From 257fefa28c5da5c7809ba8d39fe291085f438527 Mon Sep 17 00:00:00 2001
From: Jeff Smith <37851214+eljefe223@users.noreply.github.com>
Date: Fri, 27 Sep 2024 17:32:30 -0700
Subject: [PATCH] fix: stories tabs to toggle button (#32938)

---
 .../accordion-item/accordion-item.stories.ts  |   2 +-
 .../anchor-button/anchor-button.stories.ts    |   2 +-
 .../src/avatar/avatar.stories.ts              |   2 +-
 .../web-components/src/badge/badge.stories.ts |   2 +-
 .../src/button/button.stories.ts              |   2 +-
 .../src/checkbox/checkbox.stories.ts          |   2 +-
 .../compound-button.stories.ts                |   2 +-
 .../counter-badge/counter-badge.stories.ts    |   2 +-
 .../src/dialog-body/dialog-body.stories.ts    |   2 +-
 .../src/dialog/dialog.stories.ts              |   8 +-
 .../src/divider/divider.stories.ts            |   2 +-
 .../src/drawer/drawer.stories.ts              |   2 +-
 .../web-components/src/field/field.stories.ts |   2 +-
 .../web-components/src/helpers.stories.ts     |   7 +-
 .../web-components/src/image/image.stories.ts |   2 +-
 .../web-components/src/label/label.stories.ts |   2 +-
 .../web-components/src/link/link.stories.ts   |   2 +-
 .../src/menu-button/menu-button.stories.ts    |   2 +-
 .../src/menu-list/menu-list.stories.ts        |   2 +-
 .../web-components/src/menu/menu.stories.ts   |   2 +-
 .../src/message-bar/message-bar.stories.ts    |   2 +-
 .../src/progress-bar/progress-bar.stories.ts  |   2 +-
 .../src/radio-group/radio-group.stories.ts    |   2 +-
 .../web-components/src/radio/radio.stories.ts |   2 +-
 .../rating-display/rating-display.stories.ts  |   2 +-
 .../src/slider/slider.stories.ts              |   2 +-
 .../src/spinner/spinner.stories.ts            |   2 +-
 .../src/switch/switch.stories.ts              |   2 +-
 .../src/tablist/tablist.stories.ts            | 317 +++++--------
 .../web-components/src/tabs/tabs.stories.ts   | 125 ++---
 .../src/text-input/text-input.spec.ts         |   2 +-
 .../src/text-input/text-input.stories.ts      | 411 ++++++++--------
 .../web-components/src/text/text.stories.ts   | 313 +++++++------
 .../src/textarea/textarea.stories.ts          | 439 ++++++++++--------
 .../toggle-button/toggle-button.stories.ts    | 256 ++++++----
 35 files changed, 1042 insertions(+), 888 deletions(-)

diff --git a/packages/web-components/src/accordion-item/accordion-item.stories.ts b/packages/web-components/src/accordion-item/accordion-item.stories.ts
index 7c0b47a37ebb42..c8a88557a70dfb 100644
--- a/packages/web-components/src/accordion-item/accordion-item.stories.ts
+++ b/packages/web-components/src/accordion-item/accordion-item.stories.ts
@@ -1,5 +1,5 @@
 import { html } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { AccordionItem as FluentAccordionItem } from './accordion-item.js';
 import { AccordionItemMarkerPosition, AccordionItemSize } from './accordion-item.options.js';
 
diff --git a/packages/web-components/src/anchor-button/anchor-button.stories.ts b/packages/web-components/src/anchor-button/anchor-button.stories.ts
index 6ac3fbfc1f93bc..58a05b08ed6c59 100644
--- a/packages/web-components/src/anchor-button/anchor-button.stories.ts
+++ b/packages/web-components/src/anchor-button/anchor-button.stories.ts
@@ -1,5 +1,5 @@
 import { html } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { AnchorButton as FluentAnchorButton } from './anchor-button.js';
 import { AnchorButtonAppearance, AnchorButtonShape, AnchorButtonSize, AnchorTarget } from './anchor-button.options.js';
 
diff --git a/packages/web-components/src/avatar/avatar.stories.ts b/packages/web-components/src/avatar/avatar.stories.ts
index 1eac4803864b38..20f842e677c4b8 100644
--- a/packages/web-components/src/avatar/avatar.stories.ts
+++ b/packages/web-components/src/avatar/avatar.stories.ts
@@ -1,5 +1,5 @@
 import { html } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { Avatar as FluentAvatar } from './avatar.js';
 import { AvatarActive, AvatarAppearance, AvatarColor, AvatarShape, AvatarSize } from './avatar.options.js';
 
diff --git a/packages/web-components/src/badge/badge.stories.ts b/packages/web-components/src/badge/badge.stories.ts
index b6a7917ecababa..f9a1a27b7c4ba0 100644
--- a/packages/web-components/src/badge/badge.stories.ts
+++ b/packages/web-components/src/badge/badge.stories.ts
@@ -1,5 +1,5 @@
 import { html, when } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { Badge as FluentBadge } from './badge.js';
 import { BadgeAppearance, BadgeColor, BadgeShape, BadgeSize } from './badge.options.js';
 
diff --git a/packages/web-components/src/button/button.stories.ts b/packages/web-components/src/button/button.stories.ts
index 39ab625e116f56..9b18ae1a84852a 100644
--- a/packages/web-components/src/button/button.stories.ts
+++ b/packages/web-components/src/button/button.stories.ts
@@ -1,5 +1,5 @@
 import { html } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { Button as FluentButton } from './button.js';
 import { ButtonAppearance, ButtonShape, ButtonSize, ButtonType } from './button.options.js';
 
diff --git a/packages/web-components/src/checkbox/checkbox.stories.ts b/packages/web-components/src/checkbox/checkbox.stories.ts
index 86b989cb504957..f17debf1415376 100644
--- a/packages/web-components/src/checkbox/checkbox.stories.ts
+++ b/packages/web-components/src/checkbox/checkbox.stories.ts
@@ -1,7 +1,7 @@
 import { html, repeat } from '@microsoft/fast-element';
 import { uniqueId } from '@microsoft/fast-web-utilities';
 import { LabelPosition, ValidationFlags } from '../field/field.options.js';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import { Checkbox as FluentCheckbox } from './checkbox.js';
 import { CheckboxShape, CheckboxSize } from './checkbox.options.js';
 
diff --git a/packages/web-components/src/compound-button/compound-button.stories.ts b/packages/web-components/src/compound-button/compound-button.stories.ts
index 212ef9451c7009..c45f87c77a8191 100644
--- a/packages/web-components/src/compound-button/compound-button.stories.ts
+++ b/packages/web-components/src/compound-button/compound-button.stories.ts
@@ -1,5 +1,5 @@
 import { html } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { CompoundButton as FluentCompoundButton } from './compound-button.js';
 import { CompoundButtonAppearance, CompoundButtonShape, CompoundButtonSize } from './compound-button.options.js';
 
diff --git a/packages/web-components/src/counter-badge/counter-badge.stories.ts b/packages/web-components/src/counter-badge/counter-badge.stories.ts
index 906cef28b8c7b5..136ce5892d3165 100644
--- a/packages/web-components/src/counter-badge/counter-badge.stories.ts
+++ b/packages/web-components/src/counter-badge/counter-badge.stories.ts
@@ -1,5 +1,5 @@
 import { html } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { CounterBadge as FluentCounterBadge } from './counter-badge.js';
 import {
   CounterBadgeAppearance,
diff --git a/packages/web-components/src/dialog-body/dialog-body.stories.ts b/packages/web-components/src/dialog-body/dialog-body.stories.ts
index d17e4ed835bb87..ef5d8a17cd8a70 100644
--- a/packages/web-components/src/dialog-body/dialog-body.stories.ts
+++ b/packages/web-components/src/dialog-body/dialog-body.stories.ts
@@ -1,5 +1,5 @@
 import { html } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { DialogBody as FluentDialogBody } from './dialog-body.js';
 
 type Story = StoryObj<FluentDialogBody>;
diff --git a/packages/web-components/src/dialog/dialog.stories.ts b/packages/web-components/src/dialog/dialog.stories.ts
index cbf899b1055d51..a4fb81470c6620 100644
--- a/packages/web-components/src/dialog/dialog.stories.ts
+++ b/packages/web-components/src/dialog/dialog.stories.ts
@@ -1,12 +1,6 @@
 import { css, html, ref } from '@microsoft/fast-element';
 import type { DialogBody as FluentDialogBody } from '../dialog-body/dialog-body.js';
-import {
-  generateImage,
-  type NewMeta as Meta,
-  renderComponent,
-  type StoryArgs,
-  type StoryObj,
-} from '../helpers.stories.js';
+import { generateImage, Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import { definition } from './dialog.definition.js';
 import type { Dialog as FluentDialog } from './dialog.js';
 import { DialogType } from './dialog.options.js';
diff --git a/packages/web-components/src/divider/divider.stories.ts b/packages/web-components/src/divider/divider.stories.ts
index 16950f3e37c4ae..068e70e6aed386 100644
--- a/packages/web-components/src/divider/divider.stories.ts
+++ b/packages/web-components/src/divider/divider.stories.ts
@@ -1,5 +1,5 @@
 import { html } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { Divider as FluentDivider } from './divider.js';
 import { DividerAlignContent, DividerAppearance, DividerOrientation, DividerRole } from './divider.options.js';
 
diff --git a/packages/web-components/src/drawer/drawer.stories.ts b/packages/web-components/src/drawer/drawer.stories.ts
index f64215830d0fc6..260e400e8907d8 100644
--- a/packages/web-components/src/drawer/drawer.stories.ts
+++ b/packages/web-components/src/drawer/drawer.stories.ts
@@ -1,5 +1,5 @@
 import { html } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { Drawer as FluentDrawer } from './drawer.js';
 import { DrawerPosition, DrawerSize, DrawerType } from './drawer.options.js';
 
diff --git a/packages/web-components/src/field/field.stories.ts b/packages/web-components/src/field/field.stories.ts
index 446deff8d06d26..09450667706438 100644
--- a/packages/web-components/src/field/field.stories.ts
+++ b/packages/web-components/src/field/field.stories.ts
@@ -1,6 +1,6 @@
 import { html, repeat } from '@microsoft/fast-element';
 import { uniqueId } from '@microsoft/fast-web-utilities';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import { colorStatusDangerForeground1, colorStatusSuccessBackground3 } from '../theme/design-tokens.js';
 import type { TextInput as FluentTextInput } from '../text-input/text-input.js';
 import type { Field as FluentField } from './field.js';
diff --git a/packages/web-components/src/helpers.stories.ts b/packages/web-components/src/helpers.stories.ts
index de802329b5f054..c885723594b95d 100644
--- a/packages/web-components/src/helpers.stories.ts
+++ b/packages/web-components/src/helpers.stories.ts
@@ -24,11 +24,6 @@ export declare interface FASTComponentsRenderer extends Renderer {
   storyResult: string | Node | DocumentFragment | ElementViewTemplate;
 }
 
-/**
- * Metadata to configure the stories for a component.
- */
-export declare type NewMeta<TArgs = Args> = ComponentAnnotations<FASTComponentsRenderer, StoryArgs<TArgs>>;
-
 /**
  * A helper that returns a function to bind a Storybook story to a ViewTemplate.
  */
@@ -40,7 +35,7 @@ export type FASTFramework = Renderer & {
 /**
  * Metadata to configure the stories for a component.
  */
-export type Meta<TArgs = Args> = ComponentAnnotations<FASTFramework, Omit<TArgs, keyof FASTElement>>;
+export declare type Meta<TArgs = Args> = ComponentAnnotations<FASTComponentsRenderer, StoryArgs<TArgs>>;
 
 /**
  * Story object that represents a CSFv3 component example.
diff --git a/packages/web-components/src/image/image.stories.ts b/packages/web-components/src/image/image.stories.ts
index b7d9c2fd9d1f4f..b6e1586bedf1dd 100644
--- a/packages/web-components/src/image/image.stories.ts
+++ b/packages/web-components/src/image/image.stories.ts
@@ -1,5 +1,5 @@
 import { html } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { Image as FluentImage } from './image.js';
 import { ImageFit, ImageShape } from './image.options.js';
 
diff --git a/packages/web-components/src/label/label.stories.ts b/packages/web-components/src/label/label.stories.ts
index be4744735fd24f..a08c6b1a21f416 100644
--- a/packages/web-components/src/label/label.stories.ts
+++ b/packages/web-components/src/label/label.stories.ts
@@ -1,5 +1,5 @@
 import { html } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { Label as FluentLabel } from './label.js';
 import { LabelSize, LabelWeight } from './label.options.js';
 
diff --git a/packages/web-components/src/link/link.stories.ts b/packages/web-components/src/link/link.stories.ts
index 1d408d52e0a05c..e1a6902bb50e0a 100644
--- a/packages/web-components/src/link/link.stories.ts
+++ b/packages/web-components/src/link/link.stories.ts
@@ -1,5 +1,5 @@
 import { html } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import { AnchorTarget } from '../anchor-button/anchor-button.options.js';
 import type { Link as FluentLink } from './link.js';
 import { LinkAppearance } from './link.options.js';
diff --git a/packages/web-components/src/menu-button/menu-button.stories.ts b/packages/web-components/src/menu-button/menu-button.stories.ts
index 6361977a396d5c..0b2a9c87bf47d9 100644
--- a/packages/web-components/src/menu-button/menu-button.stories.ts
+++ b/packages/web-components/src/menu-button/menu-button.stories.ts
@@ -1,5 +1,5 @@
 import { html } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { MenuButton as FluentMenuButton } from './menu-button.js';
 import { MenuButtonAppearance, MenuButtonShape, MenuButtonSize } from './menu-button.options.js';
 
diff --git a/packages/web-components/src/menu-list/menu-list.stories.ts b/packages/web-components/src/menu-list/menu-list.stories.ts
index 425db6c5a82499..2a43ed5aa3260e 100644
--- a/packages/web-components/src/menu-list/menu-list.stories.ts
+++ b/packages/web-components/src/menu-list/menu-list.stories.ts
@@ -1,5 +1,5 @@
 import { html, repeat } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import { type MenuItem as FluentMenuItem, MenuItemRole } from '../menu-item/menu-item.js';
 import type { MenuList as FluentMenuList } from './menu-list.js';
 
diff --git a/packages/web-components/src/menu/menu.stories.ts b/packages/web-components/src/menu/menu.stories.ts
index 3aaf3fe813c622..85d68262adb084 100644
--- a/packages/web-components/src/menu/menu.stories.ts
+++ b/packages/web-components/src/menu/menu.stories.ts
@@ -1,5 +1,5 @@
 import { html } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { Menu as FluentMenu } from './menu.js';
 
 type Story = StoryObj<FluentMenu>;
diff --git a/packages/web-components/src/message-bar/message-bar.stories.ts b/packages/web-components/src/message-bar/message-bar.stories.ts
index 66e30be20f5a08..b198bcfd661096 100644
--- a/packages/web-components/src/message-bar/message-bar.stories.ts
+++ b/packages/web-components/src/message-bar/message-bar.stories.ts
@@ -1,5 +1,5 @@
 import { html, repeat } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import { MessageBar as FluentMessageBar } from './message-bar.js';
 import { MessageBarIntent, MessageBarLayout, MessageBarShape } from './message-bar.options.js';
 import './define';
diff --git a/packages/web-components/src/progress-bar/progress-bar.stories.ts b/packages/web-components/src/progress-bar/progress-bar.stories.ts
index 19234246bb56d3..818efb31bdb36f 100644
--- a/packages/web-components/src/progress-bar/progress-bar.stories.ts
+++ b/packages/web-components/src/progress-bar/progress-bar.stories.ts
@@ -1,5 +1,5 @@
 import { html } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { ProgressBar as FluentProgressBar } from './progress-bar.js';
 import { ProgressBarShape, ProgressBarThickness, ProgressBarValidationState } from './progress-bar.options.js';
 
diff --git a/packages/web-components/src/radio-group/radio-group.stories.ts b/packages/web-components/src/radio-group/radio-group.stories.ts
index 980aaafac65285..a6f7b1d876810e 100644
--- a/packages/web-components/src/radio-group/radio-group.stories.ts
+++ b/packages/web-components/src/radio-group/radio-group.stories.ts
@@ -1,6 +1,6 @@
 import { html, ref, repeat } from '@microsoft/fast-element';
 import type { Field as FluentField } from '../field/field.js';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import { ValidationFlags } from '../field/field.options.js';
 import type { RadioGroup as FluentRadioGroup } from './radio-group.js';
 import { RadioGroupOrientation } from './radio-group.options.js';
diff --git a/packages/web-components/src/radio/radio.stories.ts b/packages/web-components/src/radio/radio.stories.ts
index 37142d88206b2e..f71842259faaec 100644
--- a/packages/web-components/src/radio/radio.stories.ts
+++ b/packages/web-components/src/radio/radio.stories.ts
@@ -1,5 +1,5 @@
 import { html } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { Radio as FluentRadio } from './radio.js';
 
 type Story = StoryObj<FluentRadio>;
diff --git a/packages/web-components/src/rating-display/rating-display.stories.ts b/packages/web-components/src/rating-display/rating-display.stories.ts
index 0c069f3aa67245..5ac7976f77d8f5 100644
--- a/packages/web-components/src/rating-display/rating-display.stories.ts
+++ b/packages/web-components/src/rating-display/rating-display.stories.ts
@@ -1,5 +1,5 @@
 import { html } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { RatingDisplay as FluentRatingDisplay } from './rating-display.js';
 import { RatingDisplayColor, RatingDisplaySize } from './rating-display.options.js';
 
diff --git a/packages/web-components/src/slider/slider.stories.ts b/packages/web-components/src/slider/slider.stories.ts
index 08b7677ae341e3..bd807a032ae0de 100644
--- a/packages/web-components/src/slider/slider.stories.ts
+++ b/packages/web-components/src/slider/slider.stories.ts
@@ -1,5 +1,5 @@
 import { html } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import { SliderOrientation as SliderSetOrientation, SliderSize as SliderSetSize } from './slider.options.js';
 import type { Slider as FluentSlider } from './slider.js';
 
diff --git a/packages/web-components/src/spinner/spinner.stories.ts b/packages/web-components/src/spinner/spinner.stories.ts
index 82e306ccd9a3b0..522c4bcb2842e4 100644
--- a/packages/web-components/src/spinner/spinner.stories.ts
+++ b/packages/web-components/src/spinner/spinner.stories.ts
@@ -1,5 +1,5 @@
 import { html, repeat } from '@microsoft/fast-element';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import { SpinnerAppearance, SpinnerSize } from './spinner.options.js';
 import { Spinner as FluentSpinner } from './spinner.js';
 
diff --git a/packages/web-components/src/switch/switch.stories.ts b/packages/web-components/src/switch/switch.stories.ts
index 6447149588e2ae..97a8ee1e477ce7 100644
--- a/packages/web-components/src/switch/switch.stories.ts
+++ b/packages/web-components/src/switch/switch.stories.ts
@@ -1,6 +1,6 @@
 import { html, repeat } from '@microsoft/fast-element';
 import { LabelPosition, ValidationFlags } from '../field/field.options.js';
-import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { Switch as FluentSwitch } from './switch.js';
 
 type Story = StoryObj<FluentSwitch>;
diff --git a/packages/web-components/src/tablist/tablist.stories.ts b/packages/web-components/src/tablist/tablist.stories.ts
index b9f88e44bf9353..4c19127f834db9 100644
--- a/packages/web-components/src/tablist/tablist.stories.ts
+++ b/packages/web-components/src/tablist/tablist.stories.ts
@@ -1,211 +1,150 @@
-import { html } from '@microsoft/fast-element';
-import type { Args, Meta } from '@storybook/html';
-import { renderComponent } from '../helpers.stories.js';
+import { html, ref } from '@microsoft/fast-element';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { Tablist as FluentTablist } from './tablist.js';
 import { TablistAppearance as TablistAppearanceValues, TablistOrientation, TablistSize } from './tablist.options.js';
 
-type TablistStoryArgs = Args & FluentTablist;
-type TablistStoryMeta = Meta<TablistStoryArgs>;
+type Story = StoryObj<FluentTablist>;
 
-const tabIds = ['first-tab', 'second-tab', 'third-tab', 'fourth-tab'];
-
-function changeTab() {
-  const tablist = document.querySelector('fluent-tablist') as FluentTablist;
-  const panelPlaceholder = document.querySelector('#panel-placeholder')!;
-  // there's a million ways to do this, but this is the simplest
-  panelPlaceholder.innerHTML = `
-  <div role="tabpanel" aria-labelledby="tablist.activeid">
-    Tab changed to ${tablist.activeid}
-  </div>`;
-}
-
-const tabsDefault = html`
-  <style>
-    #demo-layout {
-      display: grid;
-      gap: 1rem;
-    }
-    #demo-layout:has(fluent-tablist[orientation='vertical']) {
-      grid-template-columns: max-content 1fr;
-    }
-  </style>
-  <div id="demo-layout">
+const storyTemplate = html<StoryArgs<FluentTablist>>`
+  <div style="display: flex; flex-direction: column; gap: 1rem;">
     <fluent-tablist
-      orientation=${x => x.orientation}
-      appearance=${x => x.appearance}
-      ?disabled=${x => x.disabled}
-      size=${x => x.size}
-      activeid=${x => x.activeid}
-      @change="${() => changeTab()}"
+      orientation="${story => story.orientation}"
+      appearance="${story => story.appearance}"
+      ?disabled="${story => story.disabled}"
+      size="${story => story.size}"
+      activeid="${story => story.activeid}"
+      @change="${(x, c) => {
+        x.panel.textContent = `Panel changed to ${(c.event.target as FluentTablist).activetab?.textContent}`;
+      }}"
+      ${ref('tablist')}
     >
-      <fluent-tab id=${tabIds[0]}> First Tab </fluent-tab>
-      <fluent-tab id=${tabIds[1]}> Second Tab</fluent-tab>
-      <fluent-tab id=${tabIds[2]}> Third Tab</fluent-tab>
-      <fluent-tab id=${tabIds[3]}> Fourth Tab</fluent-tab>
+      <fluent-tab id="first-tab">First Tab</fluent-tab>
+      <fluent-tab id="second-tab">Second Tab</fluent-tab>
+      <fluent-tab id="third-tab">Third Tab</fluent-tab>
+      <fluent-tab id="fourth-tab">Fourth Tab</fluent-tab>
     </fluent-tablist>
-
-    <div id="panel-placeholder"></div>
+    <div ${ref('panel')}></div>
   </div>
 `;
-export const TablistDefault = renderComponent(tabsDefault).bind({});
 
-const tabsHorizontal = html`
-  <fluent-tablist orientation="horizontal">
-    <fluent-tab> First Tab </fluent-tab>
-    <fluent-tab> Second Tab</fluent-tab>
-    <fluent-tab> Third Tab</fluent-tab>
-    <fluent-tab> Fourth Tab</fluent-tab>
-  </fluent-tablist>
-`;
-export const TablistHorizontal = renderComponent(tabsHorizontal).bind({});
+export default {
+  title: 'Components/Tablist',
+  render: renderComponent(storyTemplate),
+  argTypes: {
+    activeid: {
+      control: 'text',
+      description: 'The id of the active tab',
+      name: 'active-id',
+      table: { category: 'attributes', type: { summary: 'string' } },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disables the tablist',
+      name: 'disabled',
+      table: { category: 'attributes', type: { summary: 'boolean' } },
+    },
+    orientation: {
+      control: 'select',
+      description: 'The orientation of the tablist.',
+      mapping: { '': null, ...TablistOrientation },
+      options: ['', ...Object.values(TablistOrientation)],
+      table: {
+        category: 'attributes',
+        type: { summary: Object.values(TablistOrientation).join('|') },
+      },
+    },
+    appearance: {
+      control: 'select',
+      description: 'The appearance of the tablist.',
+      mapping: { '': null, ...TablistAppearanceValues },
+      options: ['', ...Object.values(TablistAppearanceValues)],
+      table: {
+        category: 'attributes',
+        type: { summary: Object.values(TablistAppearanceValues).join('|') },
+      },
+    },
+    size: {
+      control: 'select',
+      description: 'The size of the tablist.',
+      mapping: { '': null, ...TablistSize },
+      options: ['', ...Object.values(TablistSize)],
+      table: {
+        category: 'attributes',
+        type: { summary: Object.values(TablistSize).join('|') },
+      },
+    },
+  },
+} as Meta<FluentTablist>;
 
-const tabsVertical = html`
-  <fluent-tablist orientation="vertical">
-    <fluent-tab> First Tab </fluent-tab>
-    <fluent-tab> Second Tab</fluent-tab>
-    <fluent-tab> Third Tab</fluent-tab>
-    <fluent-tab> Fourth Tab</fluent-tab>
-  </fluent-tablist>
-`;
-export const TablistVertical = renderComponent(tabsVertical).bind({});
+export const Default: Story = {};
 
-const tabsAppearance = html`
-  <fluent-tablist appearance="transparent">
-    <fluent-tab> First Tab </fluent-tab>
-    <fluent-tab> Second Tab</fluent-tab>
-    <fluent-tab> Third Tab</fluent-tab>
-    <fluent-tab> Fourth Tab</fluent-tab>
-  </fluent-tablist>
-  <fluent-tablist appearance="subtle">
-    <fluent-tab active> First Tab </fluent-tab>
-    <fluent-tab> Second Tab</fluent-tab>
-    <fluent-tab> Third Tab</fluent-tab>
-    <fluent-tab> Fourth Tab</fluent-tab>
-  </fluent-tablist>
-`;
-export const TablistAppearance = renderComponent(tabsAppearance).bind({});
+export const VerticalOrientation: Story = {
+  args: {
+    orientation: TablistOrientation.vertical,
+  },
+  decorators: [
+    Story => {
+      const story = Story() as HTMLDivElement;
+      story.style.flexDirection = 'row';
+      return story;
+    },
+  ],
+};
 
-const tabsDisabledTablist = html`
-  <fluent-tablist disabled>
-    <fluent-tab> First Tab </fluent-tab>
-    <fluent-tab> Second Tab</fluent-tab>
-    <fluent-tab> Third Tab</fluent-tab>
-    <fluent-tab> Fourth Tab</fluent-tab>
-  </fluent-tablist>
-  <fluent-tablist>
-    <fluent-tab> First Tab </fluent-tab>
-    <fluent-tab disabled> Second Tab</fluent-tab>
-    <fluent-tab> Third Tab</fluent-tab>
-    <fluent-tab> Fourth Tab</fluent-tab>
-  </fluent-tablist>
-`;
-export const TablistDisabled = renderComponent(tabsDisabledTablist).bind({});
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
 
-const tabsSizeSmall = html`
-  <fluent-tablist size="small">
-    <fluent-tab> First Tab </fluent-tab>
-    <fluent-tab> Second Tab</fluent-tab>
-    <fluent-tab> Third Tab</fluent-tab>
-    <fluent-tab> Fourth Tab</fluent-tab>
-  </fluent-tablist>
-  <br />
-  <fluent-tablist size="small" orientation="vertical">
-    <fluent-tab> First Tab </fluent-tab>
-    <fluent-tab> Second Tab</fluent-tab>
-    <fluent-tab> Third Tab</fluent-tab>
-    <fluent-tab> Fourth Tab</fluent-tab>
-  </fluent-tablist>
-`;
-export const TablistSizeSmall = renderComponent(tabsSizeSmall).bind({});
+export const ActiveId: Story = {
+  args: {
+    activeid: 'third-tab',
+  },
+};
 
-const tabsSizeMedium = html`
-  <fluent-tablist size="medium">
-    <fluent-tab> First Tab </fluent-tab>
-    <fluent-tab> Second Tab</fluent-tab>
-    <fluent-tab> Third Tab</fluent-tab>
-    <fluent-tab> Fourth Tab</fluent-tab>
-  </fluent-tablist>
-  <br />
-  <fluent-tablist size="medium" orientation="vertical">
-    <fluent-tab> First Tab </fluent-tab>
-    <fluent-tab> Second Tab</fluent-tab>
-    <fluent-tab> Third Tab</fluent-tab>
-    <fluent-tab> Fourth Tab</fluent-tab>
-  </fluent-tablist>
-`;
-export const TablistSizeMedium = renderComponent(tabsSizeMedium).bind({});
+export const SubtleAppearance: Story = {
+  args: {
+    appearance: 'subtle',
+  },
+};
 
-const tabsSizeLarge = html`
-  <fluent-tablist size="large">
-    <fluent-tab> First Tab </fluent-tab>
-    <fluent-tab> Second Tab</fluent-tab>
-    <fluent-tab> Third Tab</fluent-tab>
-    <fluent-tab> Fourth Tab</fluent-tab>
-  </fluent-tablist>
-  <br />
-  <fluent-tablist size="large" orientation="vertical">
-    <fluent-tab> First Tab </fluent-tab>
-    <fluent-tab> Second Tab</fluent-tab>
-    <fluent-tab> Third Tab</fluent-tab>
-    <fluent-tab> Fourth Tab</fluent-tab>
-  </fluent-tablist>
-`;
-export const TablistSizeLarge = renderComponent(tabsSizeLarge).bind({});
+export const SmallSize: Story = {
+  args: {
+    size: 'small',
+  },
+};
 
-const rtl = html`
-  <div dir="rtl">
-    <fluent-tablist>
-      <fluent-tab> First Tab </fluent-tab>
-      <fluent-tab> Second Tab</fluent-tab>
-      <fluent-tab> Third Tab</fluent-tab>
-      <fluent-tab> Fourth Tab</fluent-tab>
-    </fluent-tablist>
-    <br />
-    <fluent-tablist orientation="vertical">
-      <fluent-tab> First Tab </fluent-tab>
-      <fluent-tab> Second Tab</fluent-tab>
-      <fluent-tab> Third Tab</fluent-tab>
-      <fluent-tab> Fourth Tab</fluent-tab>
-    </fluent-tablist>
-  </div>
-`;
-export const RTL = renderComponent(rtl).bind({});
+export const LargeSize: Story = {
+  args: {
+    size: 'small',
+  },
+};
 
-export default {
-  title: 'Components/Tablist',
+export const SmallSizeVerticalOrientation: Story = {
   args: {
-    appearance: 'transparent',
-    disabled: false,
-    orientation: 'horizontal',
-    size: 'medium',
+    orientation: TablistOrientation.vertical,
+    size: 'small',
   },
-  argTypes: {
-    appearance: {
-      options: Object.values(TablistAppearanceValues),
-      defaultValue: TablistAppearanceValues.transparent,
-      control: {
-        type: 'select',
-      },
-    },
-    activeid: {
-      options: tabIds,
-      defaultValue: tabIds[0],
-      control: { type: 'select' },
-    },
-    disabled: {
-      options: [true, false],
-      defaultValue: false,
-      control: { type: 'select' },
-    },
-    size: {
-      options: Object.values(TablistSize),
-      defaultValue: TablistSize.medium,
-      control: { type: 'select' },
-    },
-    orientation: {
-      options: Object.values(TablistOrientation),
-      defaultValue: TablistOrientation.horizontal,
-      control: { type: 'select' },
+  decorators: [
+    Story => {
+      const story = Story() as HTMLDivElement;
+      story.style.flexDirection = 'row';
+      return story;
     },
+  ],
+};
+
+export const LargeSizeVerticalOrientation: Story = {
+  args: {
+    orientation: TablistOrientation.vertical,
+    size: 'large',
   },
-} as TablistStoryMeta;
+  decorators: [
+    Story => {
+      const story = Story() as HTMLDivElement;
+      story.style.flexDirection = 'row';
+      return story;
+    },
+  ],
+};
diff --git a/packages/web-components/src/tabs/tabs.stories.ts b/packages/web-components/src/tabs/tabs.stories.ts
index 30c639e0d63f23..17d9d1d30a06ef 100644
--- a/packages/web-components/src/tabs/tabs.stories.ts
+++ b/packages/web-components/src/tabs/tabs.stories.ts
@@ -1,15 +1,13 @@
 import { html } from '@microsoft/fast-element';
-import type { Args, Meta } from '@storybook/html';
-import { renderComponent } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { Tabs as FluentTabs } from './tabs.js';
 import { TabsAppearance as TabsAppearanceValues, TabsOrientation, TabsSize } from './tabs.options.js';
 
-type TabsStoryArgs = Args & FluentTabs;
-type TabsStoryMeta = Meta<TabsStoryArgs>;
+type Story = StoryObj<FluentTabs>;
 
 const tabIds = ['first-tab', 'second-tab', 'third-tab', 'fourth-tab'];
 
-const tabsDefault = html`
+const tabsDefault = html<StoryArgs<FluentTabs>>`
   <fluent-tabs
     orientation=${x => x.orientation}
     appearance=${x => x.appearance}
@@ -28,9 +26,57 @@ const tabsDefault = html`
     <fluent-tab-panel id=${tabIds[3] + '-panel'}>Tab Four Content</fluent-tab-panel>
   </fluent-tabs>
 `;
-export const TabsDefault = renderComponent(tabsDefault).bind({});
 
-const tabsHorizontal = html`
+export default {
+  title: 'Components/Tabs',
+  render: renderComponent(tabsDefault),
+  argTypes: {
+    appearance: {
+      control: 'select',
+      description: 'Indicates the styled appearance of the tabs.',
+      mapping: { '': null, ...TabsAppearanceValues },
+      options: ['', ...Object.values(TabsAppearanceValues)],
+      table: {
+        category: 'attributes',
+        type: { summary: Object.values(TabsAppearanceValues).join('|') },
+      },
+    },
+    activeid: {
+      options: tabIds,
+      defaultValue: tabIds[0],
+      control: { type: 'select' },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Sets the tabs disabled state.',
+      table: { category: 'attributes', type: { summary: 'boolean' } },
+    },
+    size: {
+      control: 'select',
+      description: 'Indicates the size of the tabs.',
+      mapping: { '': null, ...TabsSize },
+      options: ['', ...Object.values(TabsSize)],
+      table: {
+        category: 'attributes',
+        type: { summary: Object.values(TabsSize).join('|') },
+      },
+    },
+    orientation: {
+      control: 'select',
+      description: 'Indicates the orientation of the tabs.',
+      mapping: { '': null, ...TabsOrientation },
+      options: ['', ...Object.values(TabsOrientation)],
+      table: {
+        category: 'attributes',
+        type: { summary: Object.values(TabsOrientation).join('|') },
+      },
+    },
+  },
+} as Meta<FluentTabs>;
+
+export const TabsDefault: Story = {};
+
+const tabsHorizontal = html<StoryArgs<FluentTabs>>`
   <fluent-tabs orientation="horizontal">
     <fluent-tab> First Tab </fluent-tab>
     <fluent-tab> Second Tab</fluent-tab>
@@ -43,9 +89,9 @@ const tabsHorizontal = html`
     <fluent-tab-panel></fluent-tab-panel>
   </fluent-tabs>
 `;
-export const TabsHorizontal = renderComponent(tabsHorizontal).bind({});
+export const TabsHorizontal: Story = { render: renderComponent(tabsHorizontal) };
 
-const tabsVertical = html`
+const tabsVertical = html<StoryArgs<FluentTabs>>`
   <fluent-tabs orientation="vertical">
     <fluent-tab> First Tab </fluent-tab>
     <fluent-tab> Second Tab</fluent-tab>
@@ -58,9 +104,9 @@ const tabsVertical = html`
     <fluent-tab-panel></fluent-tab-panel>
   </fluent-tabs>
 `;
-export const TabsVertical = renderComponent(tabsVertical).bind({});
+export const TabsVertical: Story = { render: renderComponent(tabsVertical) };
 
-const tabsAppearance = html`
+const tabsAppearance = html<StoryArgs<FluentTabs>>`
   <fluent-tabs appearance="transparent">
     <fluent-tab> First Tab </fluent-tab>
     <fluent-tab> Second Tab</fluent-tab>
@@ -84,9 +130,9 @@ const tabsAppearance = html`
     <fluent-tab-panel></fluent-tab-panel>
   </fluent-tabs>
 `;
-export const TabsAppearance = renderComponent(tabsAppearance).bind({});
+export const TabsAppearance: Story = { render: renderComponent(tabsAppearance) };
 
-const tabsDisabledTabs = html`
+const tabsDisabledTabs = html<StoryArgs<FluentTabs>>`
   <fluent-tabs disabled>
     <fluent-tab> First Tab </fluent-tab>
     <fluent-tab> Second Tab</fluent-tab>
@@ -111,9 +157,9 @@ const tabsDisabledTabs = html`
     <fluent-tab-panel></fluent-tab-panel>
   </fluent-tabs>
 `;
-export const TabsDisabled = renderComponent(tabsDisabledTabs).bind({});
+export const TabsDisabled: Story = { render: renderComponent(tabsDisabledTabs) };
 
-const tabsSizeSmall = html`
+const tabsSizeSmall = html<StoryArgs<FluentTabs>>`
   <fluent-tabs size="small">
     <fluent-tab> First Tab </fluent-tab>
     <fluent-tab> Second Tab</fluent-tab>
@@ -137,9 +183,9 @@ const tabsSizeSmall = html`
     <fluent-tab-panel></fluent-tab-panel>
   </fluent-tabs>
 `;
-export const TabsSizeSmall = renderComponent(tabsSizeSmall).bind({});
+export const TabsSizeSmall: Story = { render: renderComponent(tabsSizeSmall) };
 
-const tabsSizeMedium = html`
+const tabsSizeMedium = html<StoryArgs<FluentTabs>>`
   <fluent-tabs size="medium">
     <fluent-tab> First Tab </fluent-tab>
     <fluent-tab> Second Tab</fluent-tab>
@@ -163,9 +209,9 @@ const tabsSizeMedium = html`
     <fluent-tab-panel></fluent-tab-panel>
   </fluent-tabs>
 `;
-export const TabsSizeMedium = renderComponent(tabsSizeMedium).bind({});
+export const TabsSizeMedium: Story = { render: renderComponent(tabsSizeMedium) };
 
-const tabsSizeLarge = html`
+const tabsSizeLarge = html<StoryArgs<FluentTabs>>`
   <fluent-tabs size="large">
     <fluent-tab> First Tab </fluent-tab>
     <fluent-tab> Second Tab</fluent-tab>
@@ -189,43 +235,4 @@ const tabsSizeLarge = html`
     <fluent-tab-panel></fluent-tab-panel>
   </fluent-tabs>
 `;
-export const TabsSizeLarge = renderComponent(tabsSizeLarge).bind({});
-
-export default {
-  title: 'Components/Tabs',
-  args: {
-    appearance: 'transparent',
-    disabled: false,
-    orientation: 'horizontal',
-    size: 'medium',
-  },
-  argTypes: {
-    appearance: {
-      options: Object.values(TabsAppearanceValues),
-      defaultValue: TabsAppearanceValues.transparent,
-      control: {
-        type: 'select',
-      },
-    },
-    activeid: {
-      options: tabIds,
-      defaultValue: tabIds[0],
-      control: { type: 'select' },
-    },
-    disabled: {
-      options: [true, false],
-      defaultValue: false,
-      control: { type: 'select' },
-    },
-    size: {
-      options: Object.values(TabsSize),
-      defaultValue: TabsSize.medium,
-      control: { type: 'select' },
-    },
-    orientation: {
-      options: Object.values(TabsOrientation),
-      defaultValue: TabsOrientation.horizontal,
-      control: { type: 'select' },
-    },
-  },
-} as TabsStoryMeta;
+export const TabsSizeLarge: Story = { render: renderComponent(tabsSizeLarge) };
diff --git a/packages/web-components/src/text-input/text-input.spec.ts b/packages/web-components/src/text-input/text-input.spec.ts
index 45da21d5ee193e..f16fa96736308c 100644
--- a/packages/web-components/src/text-input/text-input.spec.ts
+++ b/packages/web-components/src/text-input/text-input.spec.ts
@@ -5,7 +5,7 @@ import { ImplicitSubmissionBlockingTypes } from './text-input.options.js';
 
 test.describe('TextInput', () => {
   test.beforeEach(async ({ page }) => {
-    await page.goto(fixtureURL('components-textinput--text-input'));
+    await page.goto(fixtureURL('components-textinput--default'));
 
     await page.waitForFunction(() => customElements.whenDefined('fluent-text-input'));
   });
diff --git a/packages/web-components/src/text-input/text-input.stories.ts b/packages/web-components/src/text-input/text-input.stories.ts
index 3e7b3237b807b9..8ec4050f721553 100644
--- a/packages/web-components/src/text-input/text-input.stories.ts
+++ b/packages/web-components/src/text-input/text-input.stories.ts
@@ -1,282 +1,301 @@
-import { html } from '@microsoft/fast-element';
-import type { Meta, Story, StoryArgs } from '../helpers.stories.js';
-import { renderComponent } from '../helpers.stories.js';
+import { html, ref } from '@microsoft/fast-element';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import { colorNeutralBackgroundInverted, colorNeutralForegroundInverted2 } from '../theme/design-tokens.js';
 import type { TextInput as FluentTextInput } from './text-input.js';
 import { TextInputAppearance, TextInputControlSize, TextInputType } from './text-input.options.js';
 
-const Person20Regular = html<StoryArgs<FluentTextInput>>`
-  <svg
-    fill="currentColor"
-    aria-hidden="true"
-    width="1em"
-    height="1em"
-    viewBox="0 0 20 20"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M10 2a4 4 0 1 0 0 8 4 4 0 0 0 0-8ZM7 6a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm-2 5a2 2 0 0 0-2 2c0 1.7.83 2.97 2.13 3.8A9.14 9.14 0 0 0 10 18c1.85 0 3.58-.39 4.87-1.2A4.35 4.35 0 0 0 17 13a2 2 0 0 0-2-2H5Zm-1 2a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1c0 1.3-.62 2.28-1.67 2.95A8.16 8.16 0 0 1 10 17a8.16 8.16 0 0 1-4.33-1.05A3.36 3.36 0 0 1 4 13Z"
-      fill="currentColor"
-    ></path>
-  </svg>
-`;
+type Story = StoryObj<FluentTextInput>;
 
-const storyTemplate = html<StoryArgs<FluentTextInput>>`
-  <div style="display: flex; flex-direction: column;">
-    <fluent-text-input
-      appearance="${x => x.appearance}"
-      autocomplete="${x => x.autocomplete}"
-      ?autofocus="${x => x.autofocus}"
-      control-size="${x => x.controlSize}"
-      dirname="${x => x.dirname}"
-      ?disabled="${x => x.disabled}"
-      form="${x => x.form}"
-      list="${x => x.list}"
-      maxlength="${x => x.maxlength}"
-      minlength="${x => x.minlength}"
-      ?multiple="${x => x.multiple}"
-      name="${x => x.name}"
-      pattern="${x => x.pattern}"
-      placeholder="${x => x.placeholder}"
-      ?readonly="${x => x.readOnly}"
-      ?required="${x => x.required}"
-      size="${x => x.size}"
-      spellcheck="${x => x.spellcheck}"
-      type="${x => x.type}"
-      value="${x => x.value}"
+const Person20Regular = html.partial(/* html */ `
+    <svg
+        fill="currentColor"
+        aria-hidden="true"
+        width="1em"
+        height="1em"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
     >
-      <fluent-label>Sample Input</fluent-label>
-    </fluent-text-input>
-  </div>
+        <path
+            fill="currentColor"
+            d="M10 2a4 4 0 1 0 0 8 4 4 0 0 0 0-8ZM7 6a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm-2 5a2 2 0 0 0-2 2c0 1.7.83 2.97 2.13 3.8A9.14 9.14 0 0 0 10 18c1.85 0 3.58-.39 4.87-1.2A4.35 4.35 0 0 0 17 13a2 2 0 0 0-2-2H5Zm-1 2a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1c0 1.3-.62 2.28-1.67 2.95A8.16 8.16 0 0 1 10 17a8.16 8.16 0 0 1-4.33-1.05A3.36 3.36 0 0 1 4 13Z"
+        />
+    </svg>
+`);
+
+const storyTemplate = html<StoryArgs<FluentTextInput>>`
+  <fluent-text-input
+    appearance="${story => story.appearance}"
+    autocomplete="${story => story.autocomplete}"
+    ?autofocus="${story => story.autofocus}"
+    control-size="${story => story.controlSize}"
+    dirname="${story => story.dirname}"
+    ?disabled="${story => story.disabled}"
+    form="${story => story.form}"
+    id="${story => story.id}"
+    list="${story => story.list}"
+    maxlength="${story => story.maxlength}"
+    minlength="${story => story.minlength}"
+    ?multiple="${story => story.multiple}"
+    name="${story => story.name}"
+    pattern="${story => story.pattern}"
+    placeholder="${story => story.placeholder}"
+    ?readonly="${story => story.readOnly}"
+    ?required="${story => story.required}"
+    size="${story => story.size}"
+    spellcheck="${story => story.spellcheck}"
+    type="${story => story.type}"
+    value="${story => story.value}"
+  >
+    ${story => story.startSlottedContent?.()} ${story => story.slottedContent?.()}
+    ${story => story.endSlottedContent?.()}
+  </fluent-text-input>
 `;
 
 export default {
   title: 'Components/TextInput',
+  render: renderComponent(storyTemplate),
   argTypes: {
     appearance: {
-      description: 'Sets the visual appearance of the control',
+      description: 'Indicates the styled appearance of the input.',
+      control: 'select',
+      options: ['', ...Object.values(TextInputAppearance)],
+      mapping: { '': null, ...TextInputAppearance },
       table: {
-        defaultValue: { summary: `${TextInputAppearance.outline}` },
+        category: 'attributes',
+        type: {
+          summary: Object.values(TextInputAppearance).join('|'),
+        },
       },
-      control: 'select',
-      options: Object.values(TextInputAppearance),
     },
     autocomplete: {
-      description: "Indicates the element's autocomplete state.",
       control: 'text',
+      table: { category: 'attributes' },
+      description: "Indicates the element's autocomplete state.",
+      type: 'string',
     },
     autofocus: {
-      description: 'Indicates that this element should get focus after the page finishes loading.',
       control: 'boolean',
+      table: { category: 'attributes' },
+      description: 'Indicates that this element should get focus after the page finishes loading.',
+      type: 'boolean',
     },
     controlSize: {
-      description: 'Sets the size of the control',
+      description: 'Indicates the size of the input.',
+      control: 'select',
+      options: ['', ...Object.values(TextInputControlSize)],
+      mapping: { '': null, ...TextInputControlSize },
       table: {
-        defaultValue: { summary: `${TextInputControlSize.medium}` },
+        category: 'attributes',
+        type: {
+          summary: Object.values(TextInputControlSize).join('|'),
+        },
       },
-      control: 'select',
-      options: Object.values(TextInputControlSize),
     },
     dirname: {
-      description: 'Sets the directionality of the element to be submitted with form data.',
       control: 'text',
+      table: { category: 'attributes' },
+      description: 'Sets the directionality of the element to be submitted with form data.',
+      type: 'string',
     },
     disabled: {
       description: 'Sets the disabled state',
       table: {
+        category: 'attributes',
         defaultValue: { summary: 'false' },
       },
       control: 'boolean',
+      type: 'boolean',
     },
     form: {
-      description: 'The id of a form to associate the element to.',
       control: 'text',
+      table: { category: 'attributes' },
+      description: 'The id of a form to associate the element to.',
+      type: 'string',
     },
     list: {
-      description: 'The id of a datalist element that provides a list of suggested values.',
       control: 'text',
+      table: { category: 'attributes' },
+      description: 'The id of a datalist element that provides a list of suggested values.',
+      type: 'string',
     },
     maxlength: {
-      description: 'Sets the maximum number of characters allowed in the input',
       control: 'number',
+      table: { category: 'attributes' },
+      description: 'Sets the maximum number of characters allowed in the input',
+      type: 'number',
     },
     minlength: {
-      description: 'Sets the minimum number of characters allowed in the input',
       control: 'number',
+      table: { category: 'attributes' },
+      description: 'Sets the minimum number of characters allowed in the input',
+      type: 'number',
     },
     multiple: {
-      description: 'Indicates whether the user can enter multiple values.',
       control: 'boolean',
+      table: { category: 'attributes' },
+      description: 'Indicates whether the user can enter multiple values.',
+      type: 'boolean',
     },
     name: {
-      description: 'Sets the name of the input',
       control: 'text',
+      table: { category: 'attributes' },
+      description: 'Sets the name of the input',
+      type: 'string',
     },
     pattern: {
-      description: 'Sets the regular expression pattern that the input’s value is checked against.',
       control: 'text',
+      table: { category: 'attributes' },
+      description: 'Sets the regular expression pattern that the input’s value is checked against.',
+      type: 'string',
     },
     placeholder: {
-      description: 'Sets the placeholder text',
       control: 'text',
+      table: { category: 'attributes' },
+      description: 'Sets the placeholder text',
+      type: 'string',
     },
     readOnly: {
+      control: 'boolean',
+      table: { category: 'attributes' },
       description: 'Sets the readonly state',
+      type: 'boolean',
+    },
+    required: {
       control: 'boolean',
+      table: {
+        category: 'attributes',
+        defaultValue: { summary: 'false' },
+      },
+      description: 'Sets the required state',
+      type: 'boolean',
     },
-    storyContent: { table: { disable: true } },
     type: {
       description: 'Sets the input type',
+      control: 'select',
+      options: ['', ...Object.values(TextInputType)],
+      mapping: { '': null, ...TextInputType },
       table: {
+        category: 'attributes',
         defaultValue: { summary: `${TextInputType.text}` },
+        type: {
+          summary: Object.values(TextInputType).join('|'),
+        },
       },
-      options: Object.values(TextInputType),
-      control: 'select',
     },
     value: {
-      description: 'The initial value of the input.',
       control: 'text',
+      table: { category: 'attributes' },
+      description: 'The initial value of the input.',
+      type: 'string',
+    },
+    slottedContent: {
+      name: '',
+      description: 'The default slot. Content in this slot is used as the `<label>` for the input.',
+      table: { category: 'slots', type: {} },
+    },
+    startSlottedContent: {
+      name: 'start',
+      description: 'Content in this slot is placed at the start of the input.',
+      table: { category: 'slots', type: {} },
+    },
+    endSlottedContent: {
+      name: 'end',
+      description: 'Content in this slot is placed at the end of the input.',
+      table: { category: 'slots', type: {} },
     },
   },
 } as Meta<FluentTextInput>;
 
-export const TextInput: Story<FluentTextInput> = renderComponent(storyTemplate).bind({});
-
-export const ContentStartAfter: Story<FluentTextInput> = renderComponent(html<StoryArgs<FluentTextInput>>`
-  <div style="display: flex; flex-direction: column; gap: 30px;">
-    <fluent-text-input>
-      <span slot="start">${Person20Regular}</span>
-      <fluent-label>Content Start</fluent-label>
-    </fluent-text-input>
-    <fluent-text-input>
-      <span slot="end">${Person20Regular}</span>
-      <fluent-label>Content After</fluent-label>
-    </fluent-text-input>
-    <fluent-text-input>
-      <fluent-text slot="start" size="400"><span>$</span></fluent-text>
-      <fluent-text slot="end" size="400"><span>.00</span></fluent-text>
-      <fluent-label>Content Before + After</fluent-label>
-    </fluent-text-input>
-  </div>
-`);
-
-export const Placeholder: Story<FluentTextInput> = renderComponent(html<StoryArgs<FluentTextInput>>`
-  <fluent-text-input placeholder="This is a placeholder">
-    <span slot="end">${Person20Regular}</span>
-    <fluent-label>Input with a placeholder</fluent-label>
-  </fluent-text-input>
-`);
+export const Default: Story = {
+  args: {
+    slottedContent: () => 'Input Label',
+  },
+};
 
-export const Appearance: Story<FluentTextInput> = renderComponent(html<StoryArgs<FluentTextInput>>`
-  <div style="display: flex; flex-direction: column; gap: 30px; width: 400px;">
-    <div style="padding: 10px;">
-      <fluent-text-input>
-        <span slot="start">${Person20Regular}</span>
-        <fluent-label>Outline (default) Input</fluent-label>
-      </fluent-text-input>
-    </div>
-    <div style="padding: 10px;">
-      <fluent-text-input appearance="underline">
-        <span slot="start">${Person20Regular}</span>
-        <fluent-label>Underlined Input</fluent-label>
-      </fluent-text-input>
-    </div>
-    <div style="padding: 10px; background: ${colorNeutralBackgroundInverted}">
-      <fluent-text-input appearance="filled-lighter">
-        <span slot="start">${Person20Regular}</span>
-        <fluent-label style="color: ${colorNeutralForegroundInverted2}">Filled Lighter Input</fluent-label>
-      </fluent-text-input>
-    </div>
-    <div style="padding: 10px; background: ${colorNeutralBackgroundInverted}">
-      <fluent-text-input appearance="filled-darker">
-        <span slot="start">${Person20Regular}</span>
-        <fluent-label style="color: ${colorNeutralForegroundInverted2}">Filled Darker Input</fluent-label>
-      </fluent-text-input>
-    </div>
-  </div>
-`);
+export const WithoutLabel: Story = {};
 
-export const Size: Story<FluentTextInput> = renderComponent(html<StoryArgs<FluentTextInput>>`
-  <div style="display: flex; flex-direction: column; gap: 30px;">
-    <fluent-text-input control-size="small">
-      <span slot="end">${Person20Regular}</span>
-      <fluent-label size="small">Small Input</fluent-label>
-    </fluent-text-input>
+export const Disabled: Story = {
+  args: {
+    slottedContent: () => 'Disabled Input',
+    disabled: true,
+  },
+};
 
-    <fluent-text-input>
-      <span slot="end">${Person20Regular}</span>
-      <fluent-label>Medium (default) Input</fluent-label>
-    </fluent-text-input>
+export const Placeholder: Story = {
+  args: {
+    slottedContent: () => 'Input with a placeholder',
+    placeholder: 'Placeholder text',
+  },
+};
 
-    <fluent-text-input control-size="large">
-      <span slot="end">${Person20Regular}</span>
-      <fluent-label size="large">Large Input</fluent-label>
-    </fluent-text-input>
-  </div>
-`);
+export const ReadOnly: Story = {
+  args: {
+    slottedContent: () => 'Read-only input',
+    readOnly: true,
+    value: 'Read-only value',
+  },
+};
 
-export const Inline: Story<FluentTextInput> = renderComponent(html<StoryArgs<FluentTextInput>>`
-  <div>
-    <fluent-text-input style="display: inline-flex; align-items: center; margin-bottom: 22px;">
-      <span slot="end">${Person20Regular}</span>
-      <fluent-label>Inline Input</fluent-label>
-    </fluent-text-input>
-    <fluent-text
-      align="start"
-      font="base"
-      size="300"
-      weight="regular"
-      style="display: flex; align-items: center; gap: 4px;"
+export const Required: Story = {
+  render: renderComponent(html<StoryArgs<FluentTextInput>>`
+    <form
+      id="required-form"
+      action="#"
+      @reset="${story => story.successMessage.toggleAttribute('hidden', true)}"
+      @submit="${story => story.successMessage.toggleAttribute('hidden', false)}"
     >
-      <span>
-        This input is an
-        <fluent-text-input
-          style="display: inline-flex; align-items: center;"
-          placeholder="inline text input"
-        ></fluent-text-input>
-        with a paragraph of text.
-      </span>
-    </fluent-text>
-  </div>
-`);
+      ${storyTemplate}
+      <fluent-button type="submit" appearance="primary">Submit</fluent-button>
+      <fluent-button type="reset">Reset</fluent-button>
+      <span id="success-message" hidden ${ref('successMessage')}> Form submitted successfully! </span>
+    </form>
+  `),
+  args: {
+    id: 'required-input',
+    required: true,
+    slottedContent: () => 'Required Input',
+    endSlottedContent: () => html` <span slot="end">${Person20Regular}</span> `,
+  },
+};
 
-export const Disabled: Story<FluentTextInput> = renderComponent(html<StoryArgs<FluentTextInput>>`
-  <fluent-text-input disabled>
-    <span slot="end">${Person20Regular}</span>
-    <fluent-label>Disabled Input</fluent-label>
-  </fluent-text-input>
-`);
+export const StartSlot: Story = {
+  args: {
+    slottedContent: () => 'Input with a start slot',
+    startSlottedContent: () => html` <span slot="start">${Person20Regular}</span> `,
+  },
+};
 
-export const Required: Story<FluentTextInput> = renderComponent(html<StoryArgs<FluentTextInput>>`
-  <form id="required-form" action="#">
-    <fluent-text-input name="required-input" required>
-      <span slot="end">${Person20Regular}</span>
-      <fluent-label>Required Input</fluent-label>
-    </fluent-text-input>
-    <button type="submit">Submit</button>
-  </form>
-`);
+export const EndSlot: Story = {
+  args: {
+    slottedContent: () => 'Input with an end slot',
+    endSlottedContent: () => html` <span slot="end">${Person20Regular}</span> `,
+  },
+};
 
-export const ReadOnly: Story<FluentTextInput> = renderComponent(html<StoryArgs<FluentTextInput>>`
-  <form id="readonly-form" action="#">
-    <fluent-text-input readonly>
-      <span slot="end">${Person20Regular}</span>
-      <fluent-label>Readonly Input</fluent-label>
-    </fluent-text-input>
-    <button type="submit">Submit</button>
-  </form>
-`);
+export const StartAndEndSlot: Story = {
+  args: {
+    slottedContent: () => 'Input with Start and End Slots',
+    endSlottedContent: () => html` <span slot="end">.00</span> `,
+    startSlottedContent: () => html` <span slot="start">$</span> `,
+  },
+};
 
-export const WithoutLabel: Story<FluentTextInput> = renderComponent(html<StoryArgs<FluentTextInput>>`
-  <fluent-text-input>
-    <span slot="end">${Person20Regular}</span>
-  </fluent-text-input>
-`);
+export const slottedButtons: Story = {
+  args: {
+    slottedContent: () => 'Input with slotted end buttons',
+    endSlottedContent: () => html` <button slot="end">Button</button> `,
+    startSlottedContent: () => html` <button slot="start">Button</button> `,
+  },
+};
 
-export const slottedEndButton: Story<FluentTextInput> = renderComponent(html<StoryArgs<FluentTextInput>>`
-  <fluent-text-input>
-    <fluent-button slot="start" size="small" appearance="subtle">Button</fluent-button>
-    <fluent-button slot="end" size="small" appearance="subtle">Button</fluent-button>
-    <fluent-label>Input with slotted end button</fluent-label>
-  </fluent-text-input>
-`);
+export const Inline: Story = {
+  render: renderComponent(html<StoryArgs<FluentTextInput>>`
+    <p>
+      The quick brown
+      <fluent-text-input style="display: inline-flex" placeholder="noun"></fluent-text-input>
+      jumped over the
+      <fluent-text-input style="display: inline-flex" placeholder="adjective"></fluent-text-input>
+      dog.
+    </p>
+  `),
+};
diff --git a/packages/web-components/src/text/text.stories.ts b/packages/web-components/src/text/text.stories.ts
index ea3312027437e3..7ac1f4f6646d74 100644
--- a/packages/web-components/src/text/text.stories.ts
+++ b/packages/web-components/src/text/text.stories.ts
@@ -1,12 +1,10 @@
 import { html } from '@microsoft/fast-element';
-import type { Args, Meta } from '@storybook/html';
-import { renderComponent } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import { colorNeutralBackground6 } from '../theme/design-tokens.js';
 import type { Text as FluentText } from './text.js';
 import { TextAlign, TextFont, TextSize, TextWeight } from './text.options.js';
 
-type TextStoryArgs = Args & FluentText;
-type TextStoryMeta = Meta<TextStoryArgs>;
+type Story = StoryObj<FluentText>;
 
 /**
  * Used to generate slotted content for stories
@@ -38,184 +36,239 @@ const generateSemanticElementTemplate = (as: string, content: string) => {
   }
 };
 
-const storyTemplate = html<TextStoryArgs>`
+const storyTemplate = html<StoryArgs<FluentText>>`
   <fluent-text
-    align=${x => x.align}
-    font=${x => x.font}
-    size=${x => x.size}
-    weight=${x => x.weight}
-    ?nowrap=${x => x.nowrap}
-    ?truncate=${x => x.truncate}
-    ?italic=${x => x.italic}
-    ?underline=${x => x.underline}
-    ?strikethrough=${x => x.strikethrough}
-    ?block=${x => x.block}
-    >${x => generateSemanticElementTemplate(x.as, x.content)}</fluent-text
+    align=${story => story.align}
+    font=${story => story.font}
+    size=${story => story.size}
+    weight=${story => story.weight}
+    ?nowrap=${story => story.nowrap}
+    ?truncate=${story => story.truncate}
+    ?italic=${story => story.italic}
+    ?underline=${story => story.underline}
+    ?strikethrough=${story => story.strikethrough}
+    ?block=${story => story.block}
+    >${story => story.slottedContent?.()}</fluent-text
   >
 `;
 
 export default {
   title: 'Components/Text',
+  render: renderComponent(storyTemplate),
   args: {
-    content: 'Text',
-    nowrap: false,
-    truncate: false,
-    italic: false,
-    underline: false,
-    strikethrough: false,
-    block: false,
+    slottedContent: () => html`${story => generateSemanticElementTemplate(story.as, 'text')}`,
   },
   argTypes: {
     as: {
+      control: 'select',
+      mapping: { '': null, ...['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'pre', 'span'] },
       options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'pre', 'span'],
-      control: {
-        type: 'select',
+      table: {
+        category: 'attributes',
+        type: { summary: Object.values(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'pre', 'span']).join('|') },
       },
     },
     size: {
-      options: Object.values(TextSize),
-      control: {
-        type: 'select',
+      control: 'select',
+      description: 'Indicates the size of the text.',
+      mapping: { '': null, ...TextSize },
+      options: ['', ...Object.values(TextSize)],
+      table: {
+        category: 'attributes',
+        type: { summary: Object.values(TextSize).join('|') },
       },
     },
     weight: {
-      options: Object.keys(TextWeight),
-      control: {
-        type: 'select',
+      description: 'Indicates the weight of the text.',
+      mapping: { '': null, ...TextWeight },
+      options: ['', ...Object.values(TextWeight)],
+      table: {
+        category: 'attributes',
+        type: { summary: Object.values(TextWeight).join('|') },
       },
     },
     align: {
-      options: Object.keys(TextAlign),
-      control: {
-        type: 'select',
+      description: 'Indicates the alignment of the text.',
+      mapping: { '': null, ...TextAlign },
+      options: ['', ...Object.values(TextAlign)],
+      table: {
+        category: 'attributes',
+        type: { summary: Object.values(TextAlign).join('|') },
       },
     },
     font: {
-      options: Object.keys(TextFont),
-      control: {
-        type: 'select',
+      description: 'Indicates the font family of the text.',
+      mapping: { '': null, ...TextFont },
+      options: ['', ...Object.values(TextFont)],
+      table: {
+        category: 'attributes',
+        type: { summary: Object.values(TextFont).join('|') },
       },
     },
     nowrap: {
       control: 'boolean',
+      description: 'Indicates if the text is set to no-wrap.',
+      name: 'nowrap',
+      table: { category: 'attributes', type: { summary: 'boolean' } },
     },
     truncate: {
       control: 'boolean',
+      description: 'Indicates if the text should truncate.',
+      name: 'truncate',
+      table: { category: 'attributes', type: { summary: 'boolean' } },
     },
     italic: {
       control: 'boolean',
+      description: 'Indicates if the text is set to italic.',
+      name: 'italic',
+      table: { category: 'attributes', type: { summary: 'boolean' } },
     },
     underline: {
       control: 'boolean',
+      description: 'Indicates if the text is set to underline.',
+      name: 'underline',
+      table: { category: 'attributes', type: { summary: 'boolean' } },
     },
     strikethrough: {
       control: 'boolean',
+      description: 'Indicates if the text is set to strikethrough.',
+      name: 'strikethrough',
+      table: { category: 'attributes', type: { summary: 'boolean' } },
     },
     block: {
       control: 'boolean',
+      description: 'Indicates if the text is set to block.',
+      name: 'block',
+      table: { category: 'attributes', type: { summary: 'boolean' } },
+    },
+    slottedContent: {
+      control: false,
+      description: 'The default slot',
+      name: '',
+      table: { category: 'slots', type: {} },
     },
   },
-} as TextStoryMeta;
+} as Meta<FluentText>;
 
-export const Text = renderComponent(storyTemplate).bind({});
+export const Text: Story = {};
 
 //
 // Attribute stories
 //
 
-export const Nowrap = renderComponent(html<TextStoryArgs>`
-  <fluent-text nowrap>
-    <div style="display: block; width: 320px; border: 1px solid black;">
-      This text will not wrap lines when it overflows the container.
-    </div>
-  </fluent-text>
-`);
+export const Nowrap: Story = {
+  render: renderComponent(html<StoryArgs<FluentText>>`
+    <fluent-text nowrap>
+      <div style="display: block; width: 320px; border: 1px solid black;">
+        This text will not wrap lines when it overflows the container.
+      </div>
+    </fluent-text>
+  `),
+};
 
-export const Truncate = renderComponent(html<TextStoryArgs>`
-  <fluent-text truncate nowrap>
-    <div style="display: block; width: 320px; border: 1px solid black;">
-      Setting <code>truncate</code> and <code>nowrap</code> will truncate when it overflows the container.
-    </div>
-  </fluent-text>
-`);
-
-export const Italic = renderComponent(html<TextStoryArgs>`
-  <fluent-text italic>
-    <span>Italics are emphasized text.</span>
-  </fluent-text>
-`);
-
-export const Underline = renderComponent(html<TextStoryArgs>`
-  <fluent-text underline>
-    <span>Underlined text draws the reader's attention to the words.</span>
-  </fluent-text>
-`);
-
-export const Strikethrough = renderComponent(html<TextStoryArgs>`
-  <fluent-text strikethrough>
-    <span>Strikethrough text is used to indicate something that is no longer relevant.</span>
-  </fluent-text>
-`);
-
-export const Block = renderComponent(html<TextStoryArgs>`
-  <span>
-    <fluent-text style="background: ${colorNeutralBackground6}"
-      ><span>Fluent text is inline by default. Setting</span></fluent-text
-    >
-    <fluent-text style="background: ${colorNeutralBackground6}" block><span>block</span></fluent-text>
-    <fluent-text style="background: ${colorNeutralBackground6}"
-      ><span>will make it behave as a block element.</span></fluent-text
-    >
-  </span>
-`);
-
-export const Size = renderComponent(html<TextStoryArgs>`
-  <div>
-    <fluent-text block size="100"><span>100</span></fluent-text>
-    <fluent-text block size="200"><span>200</span></fluent-text>
-    <fluent-text block size="300"><span>300</span></fluent-text>
-    <fluent-text block size="400"><span>400</span></fluent-text>
-    <fluent-text block size="500"><span>500</span></fluent-text>
-    <fluent-text block size="600"><span>600</span></fluent-text>
-    <fluent-text block size="700"><span>700</span></fluent-text>
-    <fluent-text block size="800"><span>800</span></fluent-text>
-    <fluent-text block size="900"><span>900</span></fluent-text>
-    <fluent-text block size="1000"><span>1000</span></fluent-text>
-  </div>
-`);
-
-export const Weight = renderComponent(html<TextStoryArgs>`
-  <div>
-    <fluent-text block weight="regular"><span>This text is regular.</span></fluent-text>
-    <fluent-text block weight="medium"><span>This text is medium.</span></fluent-text>
-    <fluent-text block weight="semibold"><span>This text is semibold.</span></fluent-text>
-    <fluent-text block weight="bold"><span>This text is bold.</span></fluent-text>
-  </div>
-`);
-
-export const Align = renderComponent(html<TextStoryArgs>`
-  <div
-    style="display: flex; flex-direction: column; gap: 20px; width: 320px; border-left: 1px solid #000; border-right: 1px solid #000;"
-  >
-    <fluent-text block align="start">
-      <span>Start aligned block.</span>
+export const Truncate: Story = {
+  render: renderComponent(html<StoryArgs<FluentText>>`
+    <fluent-text truncate nowrap>
+      <div style="display: block; width: 320px; border: 1px solid black;">
+        Setting <code>truncate</code> and <code>nowrap</code> will truncate when it overflows the container.
+      </div>
     </fluent-text>
-    <fluent-text block align="end">
-      <span>End aligned block.</span>
+  `),
+};
+
+export const Italic: Story = {
+  render: renderComponent(html<StoryArgs<FluentText>>`
+    <fluent-text italic>
+      <span>Italics are emphasized text.</span>
     </fluent-text>
-    <fluent-text block align="center">
-      <span>Center aligned block.</span>
+  `),
+};
+
+export const Underline: Story = {
+  render: renderComponent(html<StoryArgs<FluentText>>`
+    <fluent-text underline>
+      <span>Underlined text draws the reader's attention to the words.</span>
     </fluent-text>
-    <fluent-text block align="justify">
-      <span>Justify aligned block text stretches wrapped lines to meet container edges.</span>
+  `),
+};
+
+export const Strikethrough: Story = {
+  render: renderComponent(html<StoryArgs<FluentText>>`
+    <fluent-text strikethrough>
+      <span>Strikethrough text is used to indicate something that is no longer relevant.</span>
     </fluent-text>
-  </div>
-`);
-
-export const Font = renderComponent(html<TextStoryArgs>`
-  <div>
-    <fluent-text block font="base"><span>Font base.</span></fluent-text>
-    <fluent-text block font="numeric"><span>Font numeric 0123456789.</span></fluent-text>
-    <fluent-text block font="monospace"><span>Font monospace.</span></fluent-text>
-  </div>
-`);
+  `),
+};
+
+export const Block: Story = {
+  render: renderComponent(html<StoryArgs<FluentText>>`
+    <span>
+      <fluent-text style="background: ${colorNeutralBackground6}"
+        ><span>Fluent text is inline by default. Setting</span></fluent-text
+      >
+      <fluent-text style="background: ${colorNeutralBackground6}" block><span>block</span></fluent-text>
+      <fluent-text style="background: ${colorNeutralBackground6}"
+        ><span>will make it behave as a block element.</span></fluent-text
+      >
+    </span>
+  `),
+};
+
+export const Size: Story = {
+  render: renderComponent(html<StoryArgs<FluentText>>`
+    <div>
+      <fluent-text block size="100"><span>100</span></fluent-text>
+      <fluent-text block size="200"><span>200</span></fluent-text>
+      <fluent-text block size="300"><span>300</span></fluent-text>
+      <fluent-text block size="400"><span>400</span></fluent-text>
+      <fluent-text block size="500"><span>500</span></fluent-text>
+      <fluent-text block size="600"><span>600</span></fluent-text>
+      <fluent-text block size="700"><span>700</span></fluent-text>
+      <fluent-text block size="800"><span>800</span></fluent-text>
+      <fluent-text block size="900"><span>900</span></fluent-text>
+      <fluent-text block size="1000"><span>1000</span></fluent-text>
+    </div>
+  `),
+};
+
+export const Weight: Story = {
+  render: renderComponent(html<StoryArgs<FluentText>>`
+    <div>
+      <fluent-text block weight="regular"><span>This text is regular.</span></fluent-text>
+      <fluent-text block weight="medium"><span>This text is medium.</span></fluent-text>
+      <fluent-text block weight="semibold"><span>This text is semibold.</span></fluent-text>
+      <fluent-text block weight="bold"><span>This text is bold.</span></fluent-text>
+    </div>
+  `),
+};
+
+export const Align: Story = {
+  render: renderComponent(html<StoryArgs<FluentText>>`
+    <div
+      style="display: flex; flex-direction: column; gap: 20px; width: 320px; border-left: 1px solid #000; border-right: 1px solid #000;"
+    >
+      <fluent-text block align="start">
+        <span>Start aligned block.</span>
+      </fluent-text>
+      <fluent-text block align="end">
+        <span>End aligned block.</span>
+      </fluent-text>
+      <fluent-text block align="center">
+        <span>Center aligned block.</span>
+      </fluent-text>
+      <fluent-text block align="justify">
+        <span>Justify aligned block text stretches wrapped lines to meet container edges.</span>
+      </fluent-text>
+    </div>
+  `),
+};
+
+export const Font: Story = {
+  render: renderComponent(html<StoryArgs<FluentText>>`
+    <div>
+      <fluent-text block font="base"><span>Font base.</span></fluent-text>
+      <fluent-text block font="numeric"><span>Font numeric 0123456789.</span></fluent-text>
+      <fluent-text block font="monospace"><span>Font monospace.</span></fluent-text>
+    </div>
+  `),
+};
diff --git a/packages/web-components/src/textarea/textarea.stories.ts b/packages/web-components/src/textarea/textarea.stories.ts
index 15773cafafa17c..a18ac24e643835 100644
--- a/packages/web-components/src/textarea/textarea.stories.ts
+++ b/packages/web-components/src/textarea/textarea.stories.ts
@@ -1,10 +1,11 @@
 import { html, when } from '@microsoft/fast-element';
-import type { Meta, Story, StoryArgs } from '../helpers.stories.js';
-import { renderComponent } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import { colorNeutralBackground1, colorNeutralBackground3 } from '../theme/design-tokens.js';
 import { TextArea as FluentTextArea } from './textarea.js';
 import { TextAreaAppearance, TextAreaResize, TextAreaSize } from './textarea.options.js';
 
+type Story = StoryObj<FluentTextArea>;
+
 const storyTemplate = html<StoryArgs<FluentTextArea>>`
   <fluent-textarea
     appearance="${x => x.appearance}"
@@ -27,283 +28,347 @@ const storyTemplate = html<StoryArgs<FluentTextArea>>`
     resize="${x => x.resize}"
     value="${x => x.value}"
   >
-    ${when(
-      x => x.label,
-      html`<fluent-label slot="label" ?required="${x => x.required}">${x => x.label}</fluent-label>`,
-    )}
-    ${x => x.storyContent ?? ''}
+    ${story => story.labelSlottedContent?.()} ${story => story.slottedContent?.()}
   </fluent-textarea>
 `;
 
 export default {
   title: 'Components/TextArea',
+  render: renderComponent(storyTemplate),
   argTypes: {
-    label: {
-      description: 'Label of the control',
-      control: 'text',
-    },
-    storyContent: {
-      description: 'Content inside the component',
-      control: 'text',
-    },
     appearance: {
-      description: 'Sets the visual appearance of the control',
+      description: 'Indicates the styled appearance of the input.',
+      control: 'select',
+      options: ['', ...Object.values(TextAreaAppearance)],
+      mapping: { '': null, ...TextAreaAppearance },
       table: {
-        defaultValue: { summary: `${TextAreaAppearance.outline}` },
+        category: 'attributes',
+        type: {
+          summary: Object.values(TextAreaAppearance).join('|'),
+        },
       },
-      control: 'select',
-      options: Object.values(TextAreaAppearance),
     },
     autocomplete: {
-      description: "The element's autocomplete state.",
       control: 'text',
+      table: { category: 'attributes' },
+      description: "Indicates the element's autocomplete state.",
+      type: 'string',
     },
     autofocus: {
-      description: 'Whether this element should get focus after the page finishes loading.',
       control: 'boolean',
+      table: { category: 'attributes' },
+      description: 'Indicates that this element should get focus after the page finishes loading.',
+      type: 'boolean',
     },
     autoResize: {
-      description: 'Whether the element’s height should be automatically changed based on the content.',
-      table: {
-        defaultValue: { summary: 'false' },
-      },
       control: 'boolean',
+      table: { category: 'attributes' },
+      description: 'Whether the element’s height should be automatically changed based on the content.',
+      type: 'boolean',
     },
     block: {
-      description: 'Whether the element should be a block-level element.',
-      table: {
-        defaultValue: { summary: 'false' },
-      },
       control: 'boolean',
+      table: { category: 'attributes' },
+      description: 'Whether the element should be a block-level element.',
+      type: 'boolean',
     },
     dirname: {
-      description: 'Sets the directionality of the element to be submitted with form data.',
       control: 'text',
+      table: { category: 'attributes' },
+      description: 'Sets the directionality of the element to be submitted with form data.',
+      type: 'string',
     },
     disabled: {
       description: 'Sets the disabled state',
       table: {
+        category: 'attributes',
         defaultValue: { summary: 'false' },
       },
       control: 'boolean',
+      type: 'boolean',
     },
     displayShadow: {
       description: 'Whether the element displays a visual box shadow',
       table: {
+        category: 'attributes',
         defaultValue: { summary: 'false' },
       },
       control: 'boolean',
+      type: 'boolean',
     },
     form: {
-      description: 'The id of a form to associate the element to.',
       control: 'text',
+      table: { category: 'attributes' },
+      description: 'The id of a form to associate the element to.',
+      type: 'string',
     },
-    maxLength: {
-      description: 'Sets the maximum number of characters allowed in the input',
+    maxlength: {
       control: 'number',
+      table: { category: 'attributes' },
+      description: 'Sets the maximum number of characters allowed in the input',
+      type: 'number',
     },
-    minLength: {
-      description: 'Sets the minimum number of characters allowed in the input',
+    minlength: {
       control: 'number',
+      table: { category: 'attributes' },
+      description: 'Sets the minimum number of characters allowed in the input',
+      type: 'number',
     },
     name: {
-      description: 'Sets the name of the input',
       control: 'text',
+      table: { category: 'attributes' },
+      description: 'Sets the name of the input',
+      type: 'string',
     },
     placeholder: {
-      description: 'Sets the placeholder text',
       control: 'text',
+      table: { category: 'attributes' },
+      description: 'Sets the placeholder text',
+      type: 'string',
     },
     readOnly: {
-      description: 'Sets the readonly state',
       control: 'boolean',
+      table: { category: 'attributes' },
+      description: 'Sets the readonly state',
+      type: 'boolean',
     },
     required: {
-      description: 'Sets the required state',
+      control: 'boolean',
       table: {
+        category: 'attributes',
         defaultValue: { summary: 'false' },
       },
-      control: 'boolean',
+      description: 'Sets the required state',
+      type: 'boolean',
     },
     resize: {
       description: 'Whether and how a user can resize the element.',
       control: 'select',
-      options: Object.values(TextAreaResize),
+      options: ['', ...Object.values(TextAreaResize)],
+      mapping: { '': null, ...TextAreaResize },
+      table: {
+        category: 'attributes',
+        type: {
+          summary: Object.values(TextAreaResize).join('|'),
+        },
+      },
     },
     size: {
-      description: 'Sets the size of the control',
+      description: 'Sets the size of the control.',
       control: 'select',
-      options: Object.values(TextAreaSize),
+      options: ['', ...Object.values(TextAreaSize)],
+      mapping: { '': null, ...TextAreaSize },
+      table: {
+        category: 'attributes',
+        type: {
+          summary: Object.values(TextAreaSize).join('|'),
+        },
+      },
     },
     spellcheck: {
-      description: 'Controls whether to enable spell checking for the content.',
+      control: 'boolean',
       table: {
+        category: 'attributes',
         defaultValue: { summary: 'false' },
       },
-      control: 'boolean',
+      description: 'Controls whether to enable spell checking for the content.',
+      type: 'boolean',
+    },
+    slottedContent: {
+      name: '',
+      description: 'The default slot. Content in this slot is used as the `<label>` for the input.',
+      table: { category: 'slots', type: {} },
+    },
+    labelSlottedContent: {
+      name: '',
+      description: 'The label slot. Content in this slot is used as the `<label>` for the input.',
+      table: { category: 'slots', type: {} },
     },
   },
 } as Meta<FluentTextArea>;
 
-export const TextArea: Story<FluentTextArea> = renderComponent(storyTemplate).bind({});
-TextArea.args = {
-  label: 'Sample textarea',
+export const Default: Story = {};
+
+export const TextArea: Story = {
+  args: {
+    labelSlottedContent: () =>
+      html`<fluent-label slot="label" ?required="${x => x.required}">Sample textarea</fluent-label>`,
+  },
 };
 
-export const Placeholder: Story<FluentTextArea> = renderComponent(html<StoryArgs<FluentTextArea>>` ${storyTemplate} `);
-Placeholder.args = {
-  placeholder: 'This is a placeholder',
+export const Placeholder: Story = {
+  args: {
+    placeholder: 'This is a placeholder',
+  },
 };
 
-export const Appearance: Story<FluentTextArea> = renderComponent(html<StoryArgs<FluentTextArea>>`
-  <div style="display: flex; flex-direction: column; gap: 2rem; align-items: start;">
-    <div style="padding: 1rem;">
-      <fluent-textarea>
-        <fluent-label slot="label">Outlined (default)</fluent-label>
-      </fluent-textarea>
-    </div>
-    <div style="padding: 1rem; background-color: ${colorNeutralBackground1};">
-      <fluent-textarea appearance="filled-darker">
-        <fluent-label slot="label">Filled darker</fluent-label>
-      </fluent-textarea>
-    </div>
-    <div style="padding: 1rem; background-color: ${colorNeutralBackground1};">
-      <fluent-textarea appearance="filled-darker" display-shadow>
-        <fluent-label slot="label">Filled darker with shadow</fluent-label>
-      </fluent-textarea>
+export const Appearance: Story = {
+  render: renderComponent(html<StoryArgs<FluentTextArea>>`
+    <div style="display: flex; flex-direction: column; gap: 2rem; align-items: start;">
+      <div style="padding: 1rem;">
+        <fluent-textarea>
+          <fluent-label slot="label">Outlined (default)</fluent-label>
+        </fluent-textarea>
+      </div>
+      <div style="padding: 1rem; background-color: ${colorNeutralBackground1};">
+        <fluent-textarea appearance="filled-darker">
+          <fluent-label slot="label">Filled darker</fluent-label>
+        </fluent-textarea>
+      </div>
+      <div style="padding: 1rem; background-color: ${colorNeutralBackground1};">
+        <fluent-textarea appearance="filled-darker" display-shadow>
+          <fluent-label slot="label">Filled darker with shadow</fluent-label>
+        </fluent-textarea>
+      </div>
+      <div style="padding: 1rem; background-color: ${colorNeutralBackground3};">
+        <fluent-textarea appearance="filled-lighter">
+          <fluent-label slot="label">Filled lighter</fluent-label>
+        </fluent-textarea>
+      </div>
+      <div style="padding: 1rem; background-color: ${colorNeutralBackground3};">
+        <fluent-textarea appearance="filled-lighter" display-shadow>
+          <fluent-label slot="label">Filled lighter with shadow</fluent-label>
+        </fluent-textarea>
+      </div>
     </div>
-    <div style="padding: 1rem; background-color: ${colorNeutralBackground3};">
-      <fluent-textarea appearance="filled-lighter">
-        <fluent-label slot="label">Filled lighter</fluent-label>
-      </fluent-textarea>
-    </div>
-    <div style="padding: 1rem; background-color: ${colorNeutralBackground3};">
-      <fluent-textarea appearance="filled-lighter" display-shadow>
-        <fluent-label slot="label">Filled lighter with shadow</fluent-label>
-      </fluent-textarea>
-    </div>
-  </div>
-`);
+  `),
+};
 
-export const Block: Story<FluentTextArea> = renderComponent(html<StoryArgs<FluentTextArea>>`
-  <div style="display: flex; flex-direction: column; gap: 1rem;">
-    <div>
-      <fluent-textarea>
-        <fluent-label slot="label">Inline (default)</fluent-label>
-      </fluent-textarea>
+export const Block: Story = {
+  render: renderComponent(html<StoryArgs<FluentTextArea>>`
+    <div style="display: flex; flex-direction: column; gap: 1rem;">
+      <div>
+        <fluent-textarea>
+          <fluent-label slot="label">Inline (default)</fluent-label>
+        </fluent-textarea>
+      </div>
+      <div>
+        <fluent-textarea block>
+          <fluent-label slot="label">Block</fluent-label>
+        </fluent-textarea>
+      </div>
     </div>
-    <div>
-      <fluent-textarea block>
-        <fluent-label slot="label">Block</fluent-label>
-      </fluent-textarea>
-    </div>
-  </div>
-`);
+  `),
+};
 
-export const Size: Story<FluentTextArea> = renderComponent(html<StoryArgs<FluentTextArea>>`
-  <div style="display: flex; flex-direction: column; gap: 1rem;">
-    <div>
-      <fluent-textarea>
-        <fluent-label slot="label">Medium (default)</fluent-label>
-      </fluent-textarea>
-    </div>
-    <div>
-      <fluent-textarea size="small">
-        <fluent-label slot="label">Small</fluent-label>
-      </fluent-textarea>
+export const Size: Story = {
+  render: renderComponent(html<StoryArgs<FluentTextArea>>`
+    <div style="display: flex; flex-direction: column; gap: 1rem;">
+      <div>
+        <fluent-textarea>
+          <fluent-label slot="label">Medium (default)</fluent-label>
+        </fluent-textarea>
+      </div>
+      <div>
+        <fluent-textarea size="small">
+          <fluent-label slot="label">Small</fluent-label>
+        </fluent-textarea>
+      </div>
+      <div>
+        <fluent-textarea size="large">
+          <fluent-label slot="label">Large</fluent-label>
+        </fluent-textarea>
+      </div>
     </div>
-    <div>
-      <fluent-textarea size="large">
-        <fluent-label slot="label">Large</fluent-label>
-      </fluent-textarea>
-    </div>
-  </div>
-`);
+  `),
+};
 
-export const AutoResize: Story<FluentTextArea> = renderComponent(html<StoryArgs<FluentTextArea>>`
-  <fluent-textarea auto-resize></fluent-textarea>
-`);
+export const AutoResize: Story = {
+  args: {
+    autoResize: true,
+  },
+};
 
-export const Resize: Story<FluentTextArea> = renderComponent(html<StoryArgs<FluentTextArea>>`
-  <div style="display: flex; flex-direction: column; gap: 1rem;">
-    <div>
-      <fluent-textarea resize="none">
-        <fluent-label slot="label">None (default)</fluent-label>
-      </fluent-textarea>
+export const Resize: Story = {
+  render: renderComponent(html<StoryArgs<FluentTextArea>>`
+    <div style="display: flex; flex-direction: column; gap: 1rem;">
+      <div>
+        <fluent-textarea resize="none">
+          <fluent-label slot="label">None (default)</fluent-label>
+        </fluent-textarea>
+      </div>
+      <div>
+        <fluent-textarea resize="horizontal">
+          <fluent-label slot="label">Horizontal</fluent-label>
+        </fluent-textarea>
+      </div>
+      <div>
+        <fluent-textarea resize="vertical">
+          <fluent-label slot="label">Vertical</fluent-label>
+        </fluent-textarea>
+      </div>
+      <div>
+        <fluent-textarea resize="both">
+          <fluent-label slot="label">Both</fluent-label>
+        </fluent-textarea>
+      </div>
     </div>
-    <div>
-      <fluent-textarea resize="horizontal">
-        <fluent-label slot="label">Horizontal</fluent-label>
-      </fluent-textarea>
-    </div>
-    <div>
-      <fluent-textarea resize="vertical">
-        <fluent-label slot="label">Vertical</fluent-label>
-      </fluent-textarea>
-    </div>
-    <div>
-      <fluent-textarea resize="both">
-        <fluent-label slot="label">Both</fluent-label>
-      </fluent-textarea>
-    </div>
-  </div>
-`);
+  `),
+};
 
-export const RTL: Story<FluentTextArea> = renderComponent(html<StoryArgs<FluentTextArea>>`
-  <div style="display: flex; flex-direction: column; gap: 1rem;" dir="rtl">
-    <div>
-      <fluent-textarea resize="none">
-        <fluent-label slot="label">None (default)</fluent-label>
-      </fluent-textarea>
-    </div>
-    <div>
-      <fluent-textarea resize="horizontal">
-        <fluent-label slot="label">Horizontal</fluent-label>
-      </fluent-textarea>
-    </div>
-    <div>
-      <fluent-textarea resize="vertical">
-        <fluent-label slot="label">Vertical</fluent-label>
-      </fluent-textarea>
+export const RTL: Story = {
+  render: renderComponent(html<StoryArgs<FluentTextArea>>`
+    <div style="display: flex; flex-direction: column; gap: 1rem;" dir="rtl">
+      <div>
+        <fluent-textarea resize="none">
+          <fluent-label slot="label">None (default)</fluent-label>
+        </fluent-textarea>
+      </div>
+      <div>
+        <fluent-textarea resize="horizontal">
+          <fluent-label slot="label">Horizontal</fluent-label>
+        </fluent-textarea>
+      </div>
+      <div>
+        <fluent-textarea resize="vertical">
+          <fluent-label slot="label">Vertical</fluent-label>
+        </fluent-textarea>
+      </div>
+      <div>
+        <fluent-textarea resize="both">
+          <fluent-label slot="label">Both</fluent-label>
+        </fluent-textarea>
+      </div>
     </div>
-    <div>
-      <fluent-textarea resize="both">
-        <fluent-label slot="label">Both</fluent-label>
-      </fluent-textarea>
-    </div>
-  </div>
-`);
+  `),
+};
 
-export const Disabled: Story<FluentTextArea> = renderComponent(html<StoryArgs<FluentTextArea>>` ${storyTemplate} `);
-Disabled.args = {
-  disabled: true,
-  resize: TextAreaResize.both,
-  storyContent: 'This textarea is disabled',
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    resize: TextAreaResize.both,
+    slottedContent: () => 'This textarea is disabled',
+  },
 };
 
-export const Required: Story<FluentTextArea> = renderComponent(html<StoryArgs<FluentTextArea>>`
-  <form id="required-form" action="#">
-    <fluent-textarea slot="input" name="required-input" required>
-      <fluent-label slot="label">Required Input</fluent-label>
-    </fluent-textarea>
-    <div><button type="submit">Submit</button></div>
-  </form>
-`);
+export const Required: Story = {
+  render: renderComponent(html<StoryArgs<FluentTextArea>>`
+    <form id="required-form" action="#">
+      <fluent-textarea slot="input" name="required-input" required>
+        <fluent-label slot="label">Required Input</fluent-label>
+      </fluent-textarea>
+      <div><button type="submit">Submit</button></div>
+    </form>
+  `),
+};
 
-export const ReadOnly: Story<FluentTextArea> = renderComponent(html<StoryArgs<FluentTextArea>>` ${storyTemplate} `);
-ReadOnly.args = {
-  readOnly: true,
-  resize: TextAreaResize.both,
-  storyContent: 'Some content',
+export const ReadOnly: Story = {
+  args: {
+    readOnly: true,
+    resize: TextAreaResize.both,
+    slottedContent: () => 'Some content',
+  },
 };
 
-export const WithHTMLCode: Story<FluentTextArea> = renderComponent(html<StoryArgs<FluentTextArea>>`
-  <fluent-textarea auto-resize resize="both" size="large">
-    <p>This text should show up as plain text.</p>
-    <img src="logo.svg" alt="" />
-    <script>
-      alert(1);
-    </script>
-    <fluent-text>hello</fluent-text>
-  </fluent-textarea>
-`);
+export const WithHTMLCode: Story = {
+  render: renderComponent(html<StoryArgs<FluentTextArea>>`
+    <fluent-textarea auto-resize resize="both" size="large">
+      <p>This text should show up as plain text.</p>
+      <img src="logo.svg" alt="" />
+      <script>
+        alert(1);
+      </script>
+      <fluent-text>hello</fluent-text>
+    </fluent-textarea>
+  `),
+};
diff --git a/packages/web-components/src/toggle-button/toggle-button.stories.ts b/packages/web-components/src/toggle-button/toggle-button.stories.ts
index 3f05bde133e955..1d32a19db6a0cd 100644
--- a/packages/web-components/src/toggle-button/toggle-button.stories.ts
+++ b/packages/web-components/src/toggle-button/toggle-button.stories.ts
@@ -1,128 +1,210 @@
-import { html } from '@microsoft/fast-element';
-import type { Args, Meta } from '@storybook/html';
-import { renderComponent } from '../helpers.stories.js';
+import { html, repeat } from '@microsoft/fast-element';
+import { type Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { ToggleButton as FluentToggleButton } from './toggle-button.js';
 import { ToggleButtonAppearance, ToggleButtonShape, ToggleButtonSize } from './toggle-button.options.js';
 
-type ToggleButtonStoryArgs = Args & FluentToggleButton;
-type ToggleButtonStoryMeta = Meta<ToggleButtonStoryArgs>;
+type Story = StoryObj<FluentToggleButton>;
 
-const storyTemplate = html<ToggleButtonStoryArgs>`
+const storyTemplate = html<StoryArgs<FluentToggleButton>>`
   <fluent-toggle-button
-    appearance="${x => x.appearance}"
-    shape="${x => x.shape}"
-    size="${x => x.size}"
+    ?autofocus="${story => story.autofocus}"
+    ?disabled-focusable="${story => story.disabledFocusable}"
+    ?disabled="${story => story.disabled}"
+    ?formnovalidate="${story => story.formnovalidate}"
+    ?icon-only="${story => story.iconOnly}"
+    appearance="${story => story.appearance}"
+    form="${story => story.form}"
+    formaction="${story => story.formaction}"
+    formenctype="${story => story.formenctype}"
+    formmethod="${story => story.formmethod}"
+    formtarget="${story => story.formtarget}"
+    name="${story => story.name}"
+    shape="${story => story.shape}"
+    size="${story => story.size}"
+    type="${story => story.type}"
+    value="${story => story.value}"
     ?pressed="${x => x.pressed}"
     ?mixed="${x => x.mixed}"
-    ?disabled="${x => x.disabled}"
-    ?disabled-focusable="${x => x.disabledFocusable}"
-    ?icon-only="${x => x.iconOnly}"
   >
-    ${x => x.content}
+    ${story => story.startSlottedContent?.()} ${story => story.slottedContent?.()}
+    ${story => story.endSlottedContent?.()}
   </fluent-toggle-button>
 `;
 
 export default {
   title: 'Components/Button/Toggle Button',
+  render: renderComponent(storyTemplate),
   args: {
-    content: 'Button',
-    disabled: false,
-    disabledFocusable: false,
+    slottedContent: () => 'Button',
   },
   argTypes: {
     appearance: {
-      options: Object.values(ToggleButtonAppearance),
-      control: {
-        type: 'select',
+      control: 'select',
+      description: 'Indicates the styled appearance of the button.',
+      options: ['', ...Object.values(ToggleButtonAppearance)],
+      mapping: { '': null, ...ToggleButtonAppearance },
+      table: {
+        category: 'attributes',
+        type: { summary: Object.values(ToggleButtonAppearance).join('|') },
       },
     },
-    shape: {
-      options: Object.values(ToggleButtonShape),
-      control: {
-        type: 'select',
-      },
+    disabled: {
+      control: 'boolean',
+      description: "Sets the button's disabled state.",
+      table: { category: 'attributes', type: { summary: 'boolean' } },
     },
-    size: {
-      options: Object.values(ToggleButtonSize),
-      control: {
-        type: 'select',
-      },
+    disabledFocusable: {
+      control: 'boolean',
+      description: 'Indicates the button is focusable while disabled.',
+      name: 'disabled-focusable',
+      table: { category: 'attributes', type: { summary: 'boolean' } },
+    },
+    formAction: {
+      control: 'text',
+      description: 'The URL that processes the form submission.',
+      name: 'formaction',
+      table: { category: 'attributes', type: { summary: 'string' } },
+    },
+    formAttribute: {
+      control: 'text',
+      description: 'The id of a form to associate the element to.',
+      name: 'form',
+      table: { category: 'attributes', type: { summary: 'string' } },
+    },
+    formEnctype: {
+      control: 'text',
+      description: 'The encoding type for the form submission.',
+      name: 'formenctype',
+      table: { category: 'attributes', type: { summary: 'string' } },
+    },
+    formMethod: {
+      control: 'text',
+      description: 'The HTTP method that the browser uses to submit the form.',
+      name: 'formmethod',
+      table: { category: 'attributes', type: { summary: 'string' } },
+    },
+    formNoValidate: {
+      control: 'boolean',
+      description: 'Indicates that the form will not be validated when submitted.',
+      name: 'formnovalidate',
+      table: { category: 'attributes', type: { summary: 'boolean' } },
+    },
+    formTarget: {
+      control: 'text',
+      description: 'The target frame or window to open the form submission in.',
+      name: 'formtarget',
+      table: { category: 'attributes', type: { summary: 'string' } },
+    },
+    iconOnly: {
+      control: 'boolean',
+      description: 'Indicates the button should only display as an icon.',
+      name: 'icon-only',
+      table: { category: 'attributes', type: { summary: 'boolean' } },
     },
     mixed: {
       control: 'boolean',
-      table: {
-        type: {
-          summary: 'Sets the mixed state of the component',
-        },
-        defaultValue: {
-          summary: 'false',
-        },
-      },
+      description: 'Sets the mixed state of the component',
+      name: 'mixed',
+      table: { category: 'attributes', type: { summary: 'boolean' } },
+    },
+    name: {
+      control: 'text',
+      description:
+        "The name of the element. This element's value will be surfaced during form submission under the provided name.",
+      table: { category: 'attributes', type: { summary: 'string' } },
     },
     pressed: {
       control: 'boolean',
-      table: {
-        type: {
-          summary: 'Sets the pressed state of the component',
-        },
-        defaultValue: {
-          summary: 'false',
-        },
-      },
+      description: 'Sets the pressed state of the component',
+      name: 'pressed',
+      table: { category: 'attributes', type: { summary: 'boolean' } },
     },
-    disabled: {
-      control: 'boolean',
+    size: {
+      control: 'select',
+      description: 'The size of the button.',
+      options: ['', ...Object.values(ToggleButtonSize)],
+      mapping: { '': null, ...ToggleButtonSize },
       table: {
-        type: {
-          summary: 'Sets the disabled state of the component',
-        },
-        defaultValue: {
-          summary: 'false',
-        },
+        category: 'attributes',
+        type: { summary: Object.values(ToggleButtonSize).join('|') },
       },
     },
-    disabledFocusable: {
-      control: 'boolean',
+    shape: {
+      control: 'select',
+      description: 'The shape of the button.',
+      options: ['', ...Object.values(ToggleButtonShape)],
+      mapping: { '': null, ...ToggleButtonShape },
       table: {
-        type: {
-          summary: 'The component is disabled but still focusable',
-        },
-        defaultValue: {
-          summary: 'false',
-        },
+        category: 'attributes',
+        type: { summary: Object.values(ToggleButtonShape).join('|') },
       },
     },
-    content: {
-      control: 'Button text',
+    value: {
+      control: 'text',
+      description: 'The initial value of the button.',
+      table: { category: 'attributes', type: { summary: 'string' } },
+    },
+    slottedContent: {
+      control: false,
+      description: 'The default slot',
+      name: '',
+      table: { category: 'slots', type: {} },
+    },
+    startSlottedContent: {
+      control: false,
+      description: 'Slot for start icons',
+      name: 'start',
+      table: { category: 'slots', type: {} },
+    },
+    endSlottedContent: {
+      control: false,
+      description: 'Slot for end icons',
+      name: 'end',
+      table: { category: 'slots', type: {} },
     },
   },
-} as ToggleButtonStoryMeta;
+} as Meta<FluentToggleButton>;
 
-export const Button = renderComponent(storyTemplate).bind({});
+export const Default: Story = {};
 
-export const Appearance = renderComponent(html<ToggleButtonStoryArgs>`
-  <fluent-toggle-button>Default</fluent-toggle-button>
-  <fluent-toggle-button appearance="primary">Primary</fluent-toggle-button>
-  <fluent-toggle-button appearance="outline">Outline</fluent-toggle-button>
-  <fluent-toggle-button appearance="subtle">Subtle</fluent-toggle-button>
-  <fluent-toggle-button appearance="transparent">Transparent</fluent-toggle-button>
-`);
+export const Appearance: Story = {
+  render: renderComponent(html`<div>${repeat(story => story.storyItems, storyTemplate)}</div> `),
+  args: {
+    storyItems: [
+      { slottedContent: () => 'Default' },
+      { slottedContent: () => 'Primary', appearance: ToggleButtonAppearance.primary },
+      { slottedContent: () => 'Outline', appearance: ToggleButtonAppearance.outline },
+      { slottedContent: () => 'Subtle', appearance: ToggleButtonAppearance.subtle },
+      { slottedContent: () => 'Transparent', appearance: ToggleButtonAppearance.transparent },
+    ],
+  },
+};
 
-export const Pressed = renderComponent(html<ToggleButtonStoryArgs>`
-  <fluent-toggle-button pressed>Default pressed</fluent-toggle-button>
-  <fluent-toggle-button pressed appearance="primary">Primary pressed</fluent-toggle-button>
-  <fluent-toggle-button pressed appearance="outline">Outline pressed</fluent-toggle-button>
-  <fluent-toggle-button pressed appearance="subtle">Subtle pressed</fluent-toggle-button>
-  <fluent-toggle-button pressed appearance="transparent">Transparent pressed</fluent-toggle-button>
-`);
+export const Pressed: Story = {
+  render: renderComponent(html`<div>${repeat(story => story.storyItems, storyTemplate)}</div> `),
+  args: {
+    storyItems: [
+      { slottedContent: () => 'Default Pressed', pressed: true },
+      { slottedContent: () => 'Primary Pressed', appearance: ToggleButtonAppearance.primary, pressed: true },
+      { slottedContent: () => 'Outline Pressed', appearance: ToggleButtonAppearance.outline, pressed: true },
+      { slottedContent: () => 'Subtle Pressed', appearance: ToggleButtonAppearance.subtle, pressed: true },
+      { slottedContent: () => 'Transparent Pressed', appearance: ToggleButtonAppearance.transparent, pressed: true },
+    ],
+  },
+};
 
-export const Shape = renderComponent(html<ToggleButtonStoryArgs>`
-  <fluent-toggle-button shape="rounded">Rounded</fluent-toggle-button>
-  <fluent-toggle-button shape="circular">Circular</fluent-toggle-button>
-  <fluent-toggle-button shape="square">Square</fluent-toggle-button>
-`);
+export const Shape: Story = {
+  render: renderComponent(html`<div>${repeat(story => story.storyItems, storyTemplate)}</div> `),
+  args: {
+    storyItems: [
+      { slottedContent: () => 'Rounded', shape: ToggleButtonShape.rounded },
+      { slottedContent: () => 'Circular', shape: ToggleButtonShape.circular },
+      { slottedContent: () => 'Square', shape: ToggleButtonShape.square },
+    ],
+  },
+};
 
-export const Size = renderComponent(html<ToggleButtonStoryArgs>`
+export const Size = renderComponent(html<StoryArgs<FluentToggleButton>>`
   <fluent-toggle-button size="small">Small</fluent-toggle-button>
   <fluent-toggle-button size="small">
     <svg
@@ -224,7 +306,7 @@ export const Size = renderComponent(html<ToggleButtonStoryArgs>`
   </fluent-toggle-button>
 `);
 
-export const Disabled = renderComponent(html<ToggleButtonStoryArgs>`
+export const Disabled = renderComponent(html<StoryArgs<FluentToggleButton>>`
   <fluent-toggle-button>Enabled state</fluent-toggle-button>
   <fluent-toggle-button disabled>Disabled state</fluent-toggle-button>
   <fluent-toggle-button disabled-focusable>Disabled focusable state</fluent-toggle-button>
@@ -233,7 +315,7 @@ export const Disabled = renderComponent(html<ToggleButtonStoryArgs>`
   <fluent-toggle-button appearance="primary" disabled-focusable>Disabled focusable state</fluent-toggle-button>
 `);
 
-export const WithLongText = renderComponent(html<ToggleButtonStoryArgs>`
+export const WithLongText = renderComponent(html<StoryArgs<FluentToggleButton>>`
   <style>
     .max-width {
       width: 280px;