From 99eac2e4e63f96c95eb354883921b3f56bf7841a Mon Sep 17 00:00:00 2001
From: Abraham Preciado Morales <apreciado@esri.com>
Date: Fri, 7 Jun 2024 12:14:04 -0700
Subject: [PATCH] refactor(storybook): build storybook simple story args
 interfaces using component class (#9457)

**Related Issue:**
[#9437](https://github.com/Esri/calcite-design-system/issues/9437)

## Summary

Replaces Storybook's manually built simple story args interfaces with
props pulled from the component's class.
---
 .../components/accordion/accordion.stories.ts | 15 +++----
 .../action-bar/action-bar.stories.ts          |  9 ++--
 .../action-pad/action-pad.stories.ts          |  9 ++--
 .../src/components/action/action.stories.ts   | 32 +++++++-------
 .../src/components/avatar/avatar.stories.ts   | 16 +++----
 .../src/components/block/block.stories.ts     | 22 ++++------
 .../src/components/button/button.stories.ts   | 14 ++-----
 .../card-group/card-group.stories.ts          |  6 +--
 .../src/components/card/card.stories.ts       | 13 +++---
 .../components/carousel/carousel.stories.ts   | 23 +++++-----
 .../components/checkbox/checkbox.stories.ts   | 12 ++----
 .../chip-group/chip-group.stories.ts          |  8 ++--
 .../src/components/chip/chip.stories.ts       | 11 ++---
 .../color-picker-swatch.stories.ts            |  8 ++--
 .../color-picker/color-picker.stories.ts      | 15 +++----
 .../date-picker/date-picker.stories.ts        | 10 ++---
 .../components/dropdown/dropdown.stories.ts   | 18 ++++----
 .../src/components/fab/fab.stories.ts         | 17 +++-----
 .../components/flow-item/flow-item.stories.ts | 16 ++++---
 .../src/components/flow/flow.stories.ts       |  4 +-
 .../src/components/graph/graph.stories.ts     |  7 ++--
 .../src/components/icon/icon.stories.ts       |  8 ++--
 .../inline-editable.stories.ts                | 15 +++----
 .../input-date-picker.stories.ts              | 17 ++++----
 .../input-number/input-number.stories.ts      | 40 +++++++++---------
 .../input-text/input-text.stories.ts          | 32 +++++++-------
 .../input-time-picker.stories.ts              | 18 ++++----
 .../input-time-zone.stories.ts                | 15 +++----
 .../src/components/input/input.stories.ts     | 42 ++++++++++---------
 .../src/components/link/link.stories.ts       |  7 ++--
 .../src/components/list/list.stories.ts       | 16 ++++---
 .../src/components/loader/loader.stories.ts   |  9 ++--
 .../components/menu-item/menu-item.stories.ts | 13 ++----
 .../src/components/menu/menu.stories.ts       |  7 ++--
 .../src/components/meter/meter.stories.ts     | 34 ++++++++-------
 .../src/components/modal/modal.stories.ts     | 16 +++----
 .../navigation-logo.stories.ts                |  9 ++--
 .../navigation-user.stories.ts                | 17 ++++----
 .../src/components/notice/notice.stories.ts   | 10 ++---
 .../pagination/pagination.stories.ts          | 11 ++---
 .../src/components/panel/panel.stories.ts     | 16 ++++---
 .../components/pick-list/pick-list.stories.ts | 14 +++----
 .../src/components/popover/popover.stories.ts | 16 ++++---
 .../components/progress/progress.stories.ts   |  9 ++--
 .../radio-button-group.stories.ts             |  8 ++--
 .../radio-button/radio-button.stories.ts      | 10 ++---
 .../src/components/rating/rating.stories.ts   | 13 ++----
 .../src/components/scrim/scrim.stories.ts     |  7 ++--
 .../segmented-control.stories.ts              | 17 +++-----
 .../src/components/select/select.stories.ts   | 23 ++++------
 .../src/components/sheet/sheet.stories.ts     | 11 ++---
 .../src/components/shell/shell.stories.ts     | 22 +++++-----
 .../src/components/slider/slider.stories.ts   | 36 +++++++++-------
 .../split-button/split-button.stories.ts      | 30 ++++++-------
 .../src/components/stepper/stepper.stories.ts | 41 +++++++++++-------
 .../src/components/switch/switch.stories.ts   |  9 ++--
 .../src/components/table/table.stories.ts     | 28 +++++++------
 .../src/components/tabs/tabs.stories.ts       |  9 ++--
 .../components/text-area/text-area.stories.ts | 30 ++++++-------
 .../tile-group/tile-group.stories.ts          |  8 ++--
 .../tile-select-group.stories.ts              | 27 ++++++------
 .../tile-select/tile-select.stories.ts        | 28 +++++++------
 .../src/components/tile/tile.stories.ts       | 14 +++----
 .../time-picker/time-picker.stories.ts        |  9 ++--
 .../tip-manager/tip-manager.stories.ts        |  7 ++--
 .../src/components/tip/tip.stories.ts         |  9 ++--
 .../src/components/tooltip/tooltip.stories.ts |  7 ++--
 .../src/components/tree/tree.stories.ts       |  9 ++--
 .../value-list/value-list.stories.ts          | 15 +++----
 69 files changed, 485 insertions(+), 618 deletions(-)

diff --git a/packages/calcite-components/src/components/accordion/accordion.stories.ts b/packages/calcite-components/src/components/accordion/accordion.stories.ts
index f5a3cafc654..122990c1642 100644
--- a/packages/calcite-components/src/components/accordion/accordion.stories.ts
+++ b/packages/calcite-components/src/components/accordion/accordion.stories.ts
@@ -1,19 +1,14 @@
+import { AccordionItem } from "../accordion-item/accordion-item";
 import { modesDarkDefault } from "../../../.storybook/utils";
 import { placeholderImage } from "../../../.storybook/placeholderImage";
 import { iconNames } from "../../../.storybook/helpers";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { Accordion } from "./accordion";
 const { scale, appearance, selectionMode } = ATTRIBUTES;
 
-interface AccordionArgs {
-  scale: string;
-  appearance: string;
-  selectionMode: string;
-  heading: string;
-  description: string;
-  iconStart: string;
-  iconEnd: string;
-}
+type AccordionStoryArgs = Pick<Accordion, "scale" | "appearance" | "selectionMode"> &
+  Pick<AccordionItem, "heading" | "description" | "iconStart" | "iconEnd">;
 
 export default {
   title: "Components/Accordion",
@@ -62,7 +57,7 @@ const accordionItemContent = `Custom content here<br/><img src="${placeholderIma
   height: 133,
 })}"><br/>More custom content here`;
 
-export const simple = (args: AccordionArgs): string => html`
+export const simple = (args: AccordionStoryArgs): string => html`
   <calcite-accordion scale="${args.scale}" appearance="${args.appearance}" selection-mode="${args.selectionMode}">
     <calcite-accordion-item
       heading="${args.heading}"
diff --git a/packages/calcite-components/src/components/action-bar/action-bar.stories.ts b/packages/calcite-components/src/components/action-bar/action-bar.stories.ts
index 0009376f81a..968c00b2345 100644
--- a/packages/calcite-components/src/components/action-bar/action-bar.stories.ts
+++ b/packages/calcite-components/src/components/action-bar/action-bar.stories.ts
@@ -1,13 +1,10 @@
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { ActionBar } from "./action-bar";
 const { position } = ATTRIBUTES;
 
-interface ActionBarArgs {
-  expandDisabled: boolean;
-  expanded: boolean;
-  position: string;
-}
+type ActionBarStoryArgs = Pick<ActionBar, "expandDisabled" | "expanded" | "position">;
 
 export default {
   title: "Components/Action Bar",
@@ -24,7 +21,7 @@ export default {
   },
 };
 
-export const simple = (args: ActionBarArgs): string => html`
+export const simple = (args: ActionBarStoryArgs): string => html`
   <calcite-action-bar
     ${boolean("expand-disabled", args.expandDisabled)}
     ${boolean("expanded", args.expanded)}
diff --git a/packages/calcite-components/src/components/action-pad/action-pad.stories.ts b/packages/calcite-components/src/components/action-pad/action-pad.stories.ts
index a8a0d2eff8b..6224cfe3507 100644
--- a/packages/calcite-components/src/components/action-pad/action-pad.stories.ts
+++ b/packages/calcite-components/src/components/action-pad/action-pad.stories.ts
@@ -1,13 +1,10 @@
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { ActionPad } from "./action-pad";
 const { position } = ATTRIBUTES;
 
-interface ActionPadArgs {
-  expandDisabled: boolean;
-  expanded: boolean;
-  position: string;
-}
+type ActionPadStoryArgs = Pick<ActionPad, "expandDisabled" | "expanded" | "position">;
 
 export default {
   title: "Components/Action Pad",
@@ -29,7 +26,7 @@ export default {
   },
 };
 
-export const simple = (args: ActionPadArgs): string => html`
+export const simple = (args: ActionPadStoryArgs): string => html`
   <calcite-action-pad
     ${boolean("expand-disabled", args.expandDisabled)}
     ${boolean("expanded", args.expanded)}
diff --git a/packages/calcite-components/src/components/action/action.stories.ts b/packages/calcite-components/src/components/action/action.stories.ts
index 5a4ab9cb8a9..695be0270f2 100644
--- a/packages/calcite-components/src/components/action/action.stories.ts
+++ b/packages/calcite-components/src/components/action/action.stories.ts
@@ -2,22 +2,24 @@ import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { iconNames } from "../../../.storybook/helpers";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { Action } from "./action";
 const { alignment, appearance, scale } = ATTRIBUTES;
 
-interface ActionArgs {
-  active: boolean;
-  alignment: string;
-  appearance: string;
-  compact: boolean;
-  disabled: boolean;
-  icon: string;
-  indicator: boolean;
-  label: string;
-  loading: boolean;
-  scale: string;
-  text: string;
-  textEnabled: boolean;
-}
+type ActionStoryArgs = Pick<
+  Action,
+  | "active"
+  | "alignment"
+  | "appearance"
+  | "compact"
+  | "disabled"
+  | "icon"
+  | "indicator"
+  | "label"
+  | "loading"
+  | "scale"
+  | "text"
+  | "textEnabled"
+>;
 
 export default {
   title: "Components/Buttons/Action",
@@ -55,7 +57,7 @@ export default {
   },
 };
 
-export const simple = (args: ActionArgs): string => html`
+export const simple = (args: ActionStoryArgs): string => html`
   <div>
     <calcite-action
       ${boolean("active", args.active)}
diff --git a/packages/calcite-components/src/components/avatar/avatar.stories.ts b/packages/calcite-components/src/components/avatar/avatar.stories.ts
index 6e3e32d10b1..b9831e1ebb9 100644
--- a/packages/calcite-components/src/components/avatar/avatar.stories.ts
+++ b/packages/calcite-components/src/components/avatar/avatar.stories.ts
@@ -1,16 +1,10 @@
 import { placeholderImage } from "../../../.storybook/placeholderImage";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { Avatar } from "./avatar";
 const { scale } = ATTRIBUTES;
 
-interface AvatarArgs {
-  scale: string;
-  fullName: string;
-  label: string;
-  userName: string;
-  userId: string;
-  thumbnail: string;
-}
+type AvatarStoryArgs = Pick<Avatar, "scale" | "fullName" | "label" | "username" | "userId" | "thumbnail">;
 
 export default {
   title: "Components/Avatar",
@@ -18,7 +12,7 @@ export default {
     scale: scale.defaultValue,
     fullName: "John Doe",
     label: "John Doe",
-    userName: "jdoe",
+    username: "jdoe",
     userId: "9a7c50e6b3ce4b859f7b31e302437164",
     thumbnail: placeholderImage({ width: 120, height: 120 }),
   },
@@ -30,12 +24,12 @@ export default {
   },
 };
 
-export const simple = (args: AvatarArgs): string => html`
+export const simple = (args: AvatarStoryArgs): string => html`
   <calcite-avatar
     scale="${args.scale}"
     full-name="${args.fullName}"
     label="${args.label}"
-    username="${args.userName}"
+    username="${args.username}"
     user-id="${args.userId}"
     thumbnail="${args.thumbnail}"
   >
diff --git a/packages/calcite-components/src/components/block/block.stories.ts b/packages/calcite-components/src/components/block/block.stories.ts
index d70e9661170..2d7fb1993a2 100644
--- a/packages/calcite-components/src/components/block/block.stories.ts
+++ b/packages/calcite-components/src/components/block/block.stories.ts
@@ -1,20 +1,16 @@
+import { BlockSection } from "../block-section/block-section";
 import { boolean } from "../../../.storybook/utils";
 import { placeholderImage } from "../../../.storybook/placeholderImage";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { Block } from "./block";
 const { toggleDisplay } = ATTRIBUTES;
 
-interface BlockArgs {
-  heading: string;
-  description: string;
-  blockOpen: boolean;
-  collapsible: boolean;
-  loading: boolean;
-  disabled: boolean;
-  headingLevel: number;
+interface BlockStoryArgs
+  extends Pick<Block, "heading" | "description" | "open" | "collapsible" | "loading" | "disabled" | "headingLevel">,
+    Pick<BlockSection, "toggleDisplay"> {
   text: string;
-  sectionOpen: boolean;
-  toggleDisplay: string;
+  sectionOpen: BlockSection["open"];
 }
 
 export default {
@@ -22,7 +18,7 @@ export default {
   args: {
     heading: "Heading",
     description: "description",
-    blockOpen: true,
+    open: true,
     collapsible: true,
     loading: false,
     disabled: false,
@@ -42,11 +38,11 @@ export default {
   },
 };
 
-export const simple = (args: BlockArgs): string => html`
+export const simple = (args: BlockStoryArgs): string => html`
   <calcite-block
     heading="${args.heading}"
     description="${args.description}"
-    ${boolean("open", args.blockOpen)}
+    ${boolean("open", args.open)}
     ${boolean("collapsible", args.collapsible)}
     ${boolean("loading", args.loading)}
     ${boolean("disabled", args.disabled)}
diff --git a/packages/calcite-components/src/components/button/button.stories.ts b/packages/calcite-components/src/components/button/button.stories.ts
index ea9b24943a1..1dce317e526 100644
--- a/packages/calcite-components/src/components/button/button.stories.ts
+++ b/packages/calcite-components/src/components/button/button.stories.ts
@@ -2,17 +2,11 @@ import { iconNames } from "../../../.storybook/helpers";
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { Button } from "./button";
 const { appearance, kind, scale, width } = ATTRIBUTES;
 
-interface ButtonArgs {
-  appearance: string;
-  kind: string;
-  scale: string;
-  round: boolean;
-  href: string;
-  loading: boolean;
-  disabled: boolean;
-  width: string;
+interface ButtonStoryArgs
+  extends Pick<Button, "appearance" | "kind" | "scale" | "round" | "href" | "loading" | "disabled" | "width"> {
   text: string;
 }
 
@@ -49,7 +43,7 @@ export default {
   },
 };
 
-export const simple = (args: ButtonArgs): string => html`
+export const simple = (args: ButtonStoryArgs): string => html`
   <calcite-button
     appearance="${args.appearance}"
     kind="${args.kind}"
diff --git a/packages/calcite-components/src/components/card-group/card-group.stories.ts b/packages/calcite-components/src/components/card-group/card-group.stories.ts
index 906ed33e29e..7c87ecb8490 100644
--- a/packages/calcite-components/src/components/card-group/card-group.stories.ts
+++ b/packages/calcite-components/src/components/card-group/card-group.stories.ts
@@ -2,10 +2,10 @@ import { modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { placeholderImage } from "../../../.storybook/placeholderImage";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { CardGroup } from "./card-group";
 const { selectionMode } = ATTRIBUTES;
 
-interface CardGroupArgs {
-  selectionMode: string;
+interface CardGroupStoryArgs extends Pick<CardGroup, "selectionMode"> {
   src: string;
 }
 
@@ -28,7 +28,7 @@ export default {
   },
 };
 
-export const simple = (args: CardGroupArgs): string => html`
+export const simple = (args: CardGroupStoryArgs): string => html`
   <calcite-card-group selection-mode="${args.selectionMode}">
     <calcite-card label="test card">
       <img slot="thumbnail" alt="Sample image alt" src="${args.src}" />
diff --git a/packages/calcite-components/src/components/card/card.stories.ts b/packages/calcite-components/src/components/card/card.stories.ts
index e86148f2ea5..c1dfaff212d 100644
--- a/packages/calcite-components/src/components/card/card.stories.ts
+++ b/packages/calcite-components/src/components/card/card.stories.ts
@@ -2,13 +2,10 @@ import { placeholderImage } from "../../../.storybook/placeholderImage";
 import { html } from "../../../support/formatting";
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { Card } from "./card";
 const { logicalFlowPosition } = ATTRIBUTES;
 
-interface CardArgs {
-  loading: boolean;
-  selected: boolean;
-  thumbnailPosition: string;
-}
+type CardStoryArgs = Pick<Card, "loading" | "selected" | "thumbnailPosition">;
 
 export default {
   title: "Components/Card",
@@ -60,7 +57,7 @@ const footerEndButtonsHtml = html`
   </div>
 `;
 
-export const simple = (args: CardArgs): string => html`
+export const simple = (args: CardStoryArgs): string => html`
   <div style="width: 260px">
     <calcite-card
       ${boolean("loading", args.loading)}
@@ -72,7 +69,7 @@ export const simple = (args: CardArgs): string => html`
   </div>
 `;
 
-export const simpleWithFooterLinks = (args: CardArgs): string => html`
+export const simpleWithFooterLinks = (args: CardStoryArgs): string => html`
   <div style="width:260px">
     <calcite-card
       ${boolean("loading", args.loading)}
@@ -84,7 +81,7 @@ export const simpleWithFooterLinks = (args: CardArgs): string => html`
   </div>
 `;
 
-export const simpleWithFooterButton = (args: CardArgs): string => html`
+export const simpleWithFooterButton = (args: CardStoryArgs): string => html`
   <div style="width:260px">
     <calcite-card
       ${boolean("loading", args.loading)}
diff --git a/packages/calcite-components/src/components/carousel/carousel.stories.ts b/packages/calcite-components/src/components/carousel/carousel.stories.ts
index 2a444098cff..86ba3a2b7df 100644
--- a/packages/calcite-components/src/components/carousel/carousel.stories.ts
+++ b/packages/calcite-components/src/components/carousel/carousel.stories.ts
@@ -2,24 +2,21 @@ import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { placeholderImage } from "../../../.storybook/placeholderImage";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { Carousel } from "./carousel";
 const { arrowType } = ATTRIBUTES;
 
-interface CarouselArgs {
-  controlOverlay: boolean;
-  disabled: boolean;
-  autoPlayDuration: number;
-  autoPlay: boolean;
-  label: string;
-  arrowType: string;
-}
+type CarouselStoryArgs = Pick<
+  Carousel,
+  "controlOverlay" | "disabled" | "autoplayDuration" | "autoplay" | "label" | "arrowType"
+>;
 
 export default {
   title: "Components/Carousel",
   args: {
     controlOverlay: false,
     disabled: false,
-    autoPlayDuration: 6000,
-    autoPlay: false,
+    autoplayDuration: 6000,
+    autoplay: false,
     label: "Example carousel label",
     arrowType: arrowType.defaultValue,
   },
@@ -31,13 +28,13 @@ export default {
   },
 };
 
-export const simple = (args: CarouselArgs): string =>
+export const simple = (args: CarouselStoryArgs): string =>
   html` <div style="width:600px;height:400px;">
     <calcite-carousel
       control-overlay="${args.controlOverlay}"
       ${boolean("disabled", args.disabled)}
-      autoplay-duration="${args.autoPlayDuration}"
-      ${boolean("autoplay", args.autoPlay)}
+      autoplay-duration="${args.autoplayDuration}"
+      ${args.autoplay ? "autoplay" : ""}
       label="${args.label}"
       arrow-type="${args.arrowType}"
     >
diff --git a/packages/calcite-components/src/components/checkbox/checkbox.stories.ts b/packages/calcite-components/src/components/checkbox/checkbox.stories.ts
index 3b61fe57003..2420cb782cc 100644
--- a/packages/calcite-components/src/components/checkbox/checkbox.stories.ts
+++ b/packages/calcite-components/src/components/checkbox/checkbox.stories.ts
@@ -1,16 +1,10 @@
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { Checkbox } from "./checkbox";
 const { scale, status } = ATTRIBUTES;
 
-interface CheckboxArgs {
-  checked: boolean;
-  disabled: boolean;
-  indeterminate: boolean;
-  scale: string;
-  status: string;
-  label: string;
-}
+type CheckboxStoryArgs = Pick<Checkbox, "checked" | "disabled" | "indeterminate" | "scale" | "status" | "label">;
 
 export default {
   title: "Components/Controls/Checkbox",
@@ -34,7 +28,7 @@ export default {
   },
 };
 
-export const simple = (args: CheckboxArgs): string => html`
+export const simple = (args: CheckboxStoryArgs): string => html`
   <calcite-label layout="inline">
     <calcite-checkbox
       ${boolean("checked", args.checked)}
diff --git a/packages/calcite-components/src/components/chip-group/chip-group.stories.ts b/packages/calcite-components/src/components/chip-group/chip-group.stories.ts
index da0f6cb1df7..cb122596ff5 100644
--- a/packages/calcite-components/src/components/chip-group/chip-group.stories.ts
+++ b/packages/calcite-components/src/components/chip-group/chip-group.stories.ts
@@ -1,12 +1,10 @@
 import { modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { ChipGroup } from "./chip-group";
 const { selectionMode, scale } = ATTRIBUTES;
 
-interface ChipGroupArgs {
-  selectionMode: string;
-  scale: string;
-}
+type ChipGroupStoryArgs = Pick<ChipGroup, "selectionMode" | "scale">;
 
 export default {
   title: "Components/Chip Group",
@@ -28,7 +26,7 @@ export default {
   },
 };
 
-export const simple = (args: ChipGroupArgs): string => html`
+export const simple = (args: ChipGroupStoryArgs): string => html`
   <calcite-chip-group selection-mode="${args.selectionMode}" scale="${args.scale}">
     <calcite-chip value="forest">Forest</calcite-chip>
     <calcite-chip value="tundra">Tundra</calcite-chip>
diff --git a/packages/calcite-components/src/components/chip/chip.stories.ts b/packages/calcite-components/src/components/chip/chip.stories.ts
index 0f68241f80b..8b3286fda87 100644
--- a/packages/calcite-components/src/components/chip/chip.stories.ts
+++ b/packages/calcite-components/src/components/chip/chip.stories.ts
@@ -3,15 +3,10 @@ import { placeholderImage } from "../../../.storybook/placeholderImage";
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { Chip } from "./chip";
 const { scale, appearance, kind } = ATTRIBUTES;
 
-interface ChipArgs {
-  scale: string;
-  appearance: string;
-  kind: string;
-  closable: boolean;
-  selected: boolean;
-}
+type ChipStoryArgs = Pick<Chip, "scale" | "appearance" | "kind" | "closable" | "selected">;
 
 export default {
   title: "Components/Chip",
@@ -40,7 +35,7 @@ export default {
   },
 };
 
-export const simple = (args: ChipArgs): string => html`
+export const simple = (args: ChipStoryArgs): string => html`
   <div style="background-color:white;padding:100px">
     <calcite-chip
       scale="${args.scale}"
diff --git a/packages/calcite-components/src/components/color-picker-swatch/color-picker-swatch.stories.ts b/packages/calcite-components/src/components/color-picker-swatch/color-picker-swatch.stories.ts
index 2c59917fc2f..06b6bc06bfb 100644
--- a/packages/calcite-components/src/components/color-picker-swatch/color-picker-swatch.stories.ts
+++ b/packages/calcite-components/src/components/color-picker-swatch/color-picker-swatch.stories.ts
@@ -1,10 +1,8 @@
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
+import { ColorPickerSwatch } from "./color-picker-swatch";
 
-interface ColorPickerSwatchArgs {
-  active: boolean;
-  color: string;
-}
+type ColorPickerSwatchStoryArgs = Pick<ColorPickerSwatch, "active" | "color">;
 
 export default {
   title: "Components/Controls/ColorPicker/support/ColorPickerSwatch",
@@ -14,7 +12,7 @@ export default {
   },
 };
 
-export const simple = (args: ColorPickerSwatchArgs): string => html`
+export const simple = (args: ColorPickerSwatchStoryArgs): string => html`
   <calcite-color-picker-swatch ${boolean("active", args.active)} color="${args.color}"></calcite-color-picker-swatch>
 `;
 
diff --git a/packages/calcite-components/src/components/color-picker/color-picker.stories.ts b/packages/calcite-components/src/components/color-picker/color-picker.stories.ts
index f2d06771e02..9cd34b95e23 100644
--- a/packages/calcite-components/src/components/color-picker/color-picker.stories.ts
+++ b/packages/calcite-components/src/components/color-picker/color-picker.stories.ts
@@ -1,16 +1,13 @@
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { ColorPicker } from "./color-picker";
 const { scale } = ATTRIBUTES;
 
-interface ColorPickerArgs {
-  channelsDisabled: boolean;
-  hexDisabled: boolean;
-  savedDisabled: boolean;
-  scale: string;
-  clearable: boolean;
-  value: string;
-}
+type ColorPickerStoryArgs = Pick<
+  ColorPicker,
+  "channelsDisabled" | "hexDisabled" | "savedDisabled" | "scale" | "clearable" | "value"
+>;
 
 export default {
   title: "Components/Controls/ColorPicker",
@@ -30,7 +27,7 @@ export default {
   },
 };
 
-export const simple = (args: ColorPickerArgs): string => html`
+export const simple = (args: ColorPickerStoryArgs): string => html`
   <calcite-color-picker
     ${boolean("channels-disabled", args.channelsDisabled)}
     ${boolean("hex-disabled", args.hexDisabled)}
diff --git a/packages/calcite-components/src/components/date-picker/date-picker.stories.ts b/packages/calcite-components/src/components/date-picker/date-picker.stories.ts
index c8889b99b79..0f034e41de1 100644
--- a/packages/calcite-components/src/components/date-picker/date-picker.stories.ts
+++ b/packages/calcite-components/src/components/date-picker/date-picker.stories.ts
@@ -2,18 +2,14 @@ import { boolean, createBreakpointStories, modesDarkDefault } from "../../../.st
 import { html } from "../../../support/formatting";
 import { locales, defaultLocale } from "../../utils/locale";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { DatePicker } from "./date-picker";
 const { scale } = ATTRIBUTES;
 
-interface DatePickerArgs {
+interface DatePickerStoryArgs extends Pick<DatePicker, "min" | "max" | "range" | "scale" | "value"> {
   dir: string;
   lang: string;
-  max: string;
-  min: string;
   nextMonthLabel: string;
   prevMonthLabel: string;
-  range: boolean;
-  scale: string;
-  value: string;
 }
 
 export default {
@@ -48,7 +44,7 @@ export default {
   },
 };
 
-export const simple = (args: DatePickerArgs): string => html`
+export const simple = (args: DatePickerStoryArgs): string => html`
   <div style="width: 400px">
     <calcite-date-picker
       dir="${args.dir}"
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.stories.ts b/packages/calcite-components/src/components/dropdown/dropdown.stories.ts
index 8ba1def3360..f668a560e9c 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.stories.ts
+++ b/packages/calcite-components/src/components/dropdown/dropdown.stories.ts
@@ -1,18 +1,16 @@
+import { DropdownGroup } from "../dropdown-group/dropdown-group";
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { defaultMenuPlacement, menuPlacements } from "../../utils/floating-ui";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { Dropdown } from "./dropdown";
 const { scale, clickType, selectionMode } = ATTRIBUTES;
 
-interface DropdownArgs {
-  placement: string;
-  scale: string;
-  widthScale: string;
-  type: string;
-  closeOnSelectDisabled: boolean;
-  disabled: boolean;
-  selectionMode: string;
-}
+type DropdownStoryArgs = Pick<
+  Dropdown,
+  "placement" | "scale" | "widthScale" | "type" | "closeOnSelectDisabled" | "disabled"
+> &
+  Pick<DropdownGroup, "selectionMode">;
 
 export default {
   title: "Components/Buttons/Dropdown",
@@ -57,7 +55,7 @@ export default {
   },
 };
 
-export const simple = (args: DropdownArgs): string => html`
+export const simple = (args: DropdownStoryArgs): string => html`
   <calcite-dropdown
     open
     placement="${args.placement}"
diff --git a/packages/calcite-components/src/components/fab/fab.stories.ts b/packages/calcite-components/src/components/fab/fab.stories.ts
index 1ae6e058c8f..d19c86c31a2 100644
--- a/packages/calcite-components/src/components/fab/fab.stories.ts
+++ b/packages/calcite-components/src/components/fab/fab.stories.ts
@@ -1,19 +1,14 @@
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { Fab } from "./fab";
 import { ICONS } from "./resources";
 const { appearance, scale } = ATTRIBUTES;
 
-interface FabArgs {
-  appearance: string;
-  disabled: boolean;
-  icon: string;
-  label: string;
-  loading: boolean;
-  text: string;
-  textEnabled: boolean;
-  scale: boolean;
-}
+type FabStoryArgs = Pick<
+  Fab,
+  "appearance" | "disabled" | "icon" | "label" | "loading" | "text" | "textEnabled" | "scale"
+>;
 
 export default {
   title: "Components/Buttons/FAB",
@@ -39,7 +34,7 @@ export default {
   },
 };
 
-export const simple = (args: FabArgs): string => html`
+export const simple = (args: FabStoryArgs): string => html`
   <calcite-fab
     appearance="${args.appearance}"
     ${boolean("disabled", args.disabled)}
diff --git a/packages/calcite-components/src/components/flow-item/flow-item.stories.ts b/packages/calcite-components/src/components/flow-item/flow-item.stories.ts
index f570d72bce1..71fe853c7a7 100644
--- a/packages/calcite-components/src/components/flow-item/flow-item.stories.ts
+++ b/packages/calcite-components/src/components/flow-item/flow-item.stories.ts
@@ -1,18 +1,16 @@
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { FlowItem } from "./flow-item";
 import { SLOTS } from "./resources";
 const { collapseDirection, scale } = ATTRIBUTES;
 
-interface FlowItemArgs {
-  closed: boolean;
-  disabled: boolean;
-  closable: boolean;
-  collapsible: boolean;
-  collapsed: boolean;
-  collapseDirection: string;
+interface FlowItemStoryArgs
+  extends Pick<
+    FlowItem,
+    "closed" | "disabled" | "closable" | "collapsible" | "collapsed" | "collapseDirection" | "loading"
+  > {
   heightScale: string;
-  loading: boolean;
 }
 
 export default {
@@ -77,7 +75,7 @@ const flowItemContent = `${headerHTML}
   ${contentHTML}
   ${footerHTML}`;
 
-export const simple = (args: FlowItemArgs): string => html`
+export const simple = (args: FlowItemStoryArgs): string => html`
   <calcite-flow-item
     ${boolean("closed", args.closed)}
     ${boolean("disabled", args.disabled)}
diff --git a/packages/calcite-components/src/components/flow/flow.stories.ts b/packages/calcite-components/src/components/flow/flow.stories.ts
index 209c8d6e310..ab1d3848898 100644
--- a/packages/calcite-components/src/components/flow/flow.stories.ts
+++ b/packages/calcite-components/src/components/flow/flow.stories.ts
@@ -2,7 +2,7 @@ import { boolean } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { SLOTS } from "../panel/resources";
 
-interface FlowArgs {
+interface FlowStoryArgs {
   disabled: boolean;
   heading: string;
   loading: boolean;
@@ -114,7 +114,7 @@ const item2HTML = html`
   </ul>
 `;
 
-export const simple = (args: FlowArgs): string => html`
+export const simple = (args: FlowStoryArgs): string => html`
   <calcite-flow>
     <calcite-flow-item
       ${boolean("disabled", args.disabled)}
diff --git a/packages/calcite-components/src/components/graph/graph.stories.ts b/packages/calcite-components/src/components/graph/graph.stories.ts
index e4efabcafbb..46b4736b225 100644
--- a/packages/calcite-components/src/components/graph/graph.stories.ts
+++ b/packages/calcite-components/src/components/graph/graph.stories.ts
@@ -1,10 +1,9 @@
 import { modesDarkDefault } from "../../../.storybook/utils";
+import { Graph } from "./graph";
 
-interface GraphArgs {
+interface GraphStoryArgs extends Pick<Graph, "min" | "max"> {
   width: number;
   height: number;
-  min: number;
-  max: number;
 }
 
 export default {
@@ -34,7 +33,7 @@ const data: HTMLCalciteGraphElement["data"] = [
 const rainbow = ["red", "orange", "yellow", "green", "cyan", "blue", "violet"];
 const colorStops = rainbow.map((color, i) => ({ offset: (1 / (rainbow.length - 1)) * i, color }));
 
-export const simple = (args: GraphArgs): HTMLDivElement => {
+export const simple = (args: GraphStoryArgs): HTMLDivElement => {
   const div = document.createElement("div");
   div.style.width = `${args.width}px`;
   div.style.height = `${args.height}px`;
diff --git a/packages/calcite-components/src/components/icon/icon.stories.ts b/packages/calcite-components/src/components/icon/icon.stories.ts
index 8c651ce13ef..793934a30df 100644
--- a/packages/calcite-components/src/components/icon/icon.stories.ts
+++ b/packages/calcite-components/src/components/icon/icon.stories.ts
@@ -2,14 +2,12 @@ import { iconNames } from "../../../.storybook/helpers";
 import { modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { Icon } from "./icon";
 const { scale } = ATTRIBUTES;
 
 const sampleIcon = iconNames.find((item) => item === "arrowRight");
 
-interface IconArgs {
-  icon: string;
-  scale: string;
-}
+type IconStoryArgs = Pick<Icon, "icon" | "scale">;
 
 export default {
   title: "Components/Icon",
@@ -29,7 +27,7 @@ export default {
   },
 };
 
-export const simple = (args: IconArgs): string => html`
+export const simple = (args: IconStoryArgs): string => html`
   <calcite-icon icon="${args.icon}" scale="${args.scale}"></calcite-icon>
 `;
 
diff --git a/packages/calcite-components/src/components/inline-editable/inline-editable.stories.ts b/packages/calcite-components/src/components/inline-editable/inline-editable.stories.ts
index 8135108cced..0273fb9cf20 100644
--- a/packages/calcite-components/src/components/inline-editable/inline-editable.stories.ts
+++ b/packages/calcite-components/src/components/inline-editable/inline-editable.stories.ts
@@ -1,17 +1,12 @@
+import { Input } from "../input/input";
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { InlineEditable } from "./inline-editable";
 const { scale, alignment } = ATTRIBUTES;
 
-interface InlineEditableArgs {
-  scale: string;
-  controls: boolean;
-  editingEnabled: boolean;
-  loading: boolean;
-  disabled: boolean;
-  alignment: string;
-  placeholder: string;
-}
+type InlineEditableStoryArgs = Pick<InlineEditable, "scale" | "controls" | "editingEnabled" | "loading" | "disabled"> &
+  Pick<Input, "alignment" | "placeholder">;
 
 export default {
   title: "Components/Controls/Inline Editable",
@@ -36,7 +31,7 @@ export default {
   },
 };
 
-export const simple = (args: InlineEditableArgs): string => html`
+export const simple = (args: InlineEditableStoryArgs): string => html`
   <div style="width:300px;max-width:100%;">
     <calcite-inline-editable
       scale="${args.scale}"
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
index d85f1846bbf..6c16a6b2297 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
@@ -4,18 +4,15 @@ import { locales, defaultLocale } from "../../utils/locale";
 import { defaultMenuPlacement, menuPlacements } from "../../utils/floating-ui";
 import { iconNames } from "../../../.storybook/helpers";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { InputDatePicker } from "./input-date-picker";
 const { scale, status } = ATTRIBUTES;
 
-interface InputDatePickerArgs {
-  scale: string;
-  status: string;
-  value: string;
-  min: string;
-  max: string;
+interface InputDatePickerStoryArgs
+  extends Pick<
+    InputDatePicker,
+    "scale" | "status" | "value" | "min" | "max" | "placement" | "validationMessage" | "validationIcon"
+  > {
   lang: string;
-  placement: string;
-  validationMessage: string;
-  validationIcon: string;
 }
 
 export default {
@@ -55,7 +52,7 @@ export default {
   },
 };
 
-export const simple = (args: InputDatePickerArgs): string => html`
+export const simple = (args: InputDatePickerStoryArgs): string => html`
   <div style="width: 400px">
     <calcite-input-date-picker
       scale="${args.scale}"
diff --git a/packages/calcite-components/src/components/input-number/input-number.stories.ts b/packages/calcite-components/src/components/input-number/input-number.stories.ts
index 2b3184258fc..78bdfc68a68 100644
--- a/packages/calcite-components/src/components/input-number/input-number.stories.ts
+++ b/packages/calcite-components/src/components/input-number/input-number.stories.ts
@@ -2,26 +2,28 @@ import { iconNames } from "../../../.storybook/helpers";
 import { boolean, createBreakpointStories, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { InputNumber } from "./input-number";
 const { scale, status, alignment, layout } = ATTRIBUTES;
 
-interface InputNumberArgs {
-  scale: string;
-  status: string;
-  alignment: string;
-  numberButtonType: string;
-  min: number;
-  max: number;
-  step: number;
-  prefixText: string;
-  suffixText: string;
-  loading: boolean;
-  clearable: boolean;
-  disabled: boolean;
-  value: string;
-  placeholder: string;
-  validationMessage: string;
-  validationIcon: string;
-}
+type InputNumberStoryArgs = Pick<
+  InputNumber,
+  | "scale"
+  | "status"
+  | "alignment"
+  | "numberButtonType"
+  | "min"
+  | "max"
+  | "step"
+  | "prefixText"
+  | "suffixText"
+  | "loading"
+  | "clearable"
+  | "disabled"
+  | "value"
+  | "placeholder"
+  | "validationMessage"
+  | "validationIcon"
+>;
 
 export default {
   title: "Components/Controls/Input Number",
@@ -75,7 +77,7 @@ export default {
   },
 };
 
-export const simple = (args: InputNumberArgs): string => html`
+export const simple = (args: InputNumberStoryArgs): string => html`
   <div style="width:300px;max-width:100%;text-align:center;">
     <calcite-input-number
       scale="${args.scale}"
diff --git a/packages/calcite-components/src/components/input-text/input-text.stories.ts b/packages/calcite-components/src/components/input-text/input-text.stories.ts
index cab427fc0ac..86a49c3624e 100644
--- a/packages/calcite-components/src/components/input-text/input-text.stories.ts
+++ b/packages/calcite-components/src/components/input-text/input-text.stories.ts
@@ -2,22 +2,24 @@ import { iconNames } from "../../../.storybook/helpers";
 import { boolean, createBreakpointStories, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { InputText } from "./input-text";
 const { scale, status, alignment } = ATTRIBUTES;
 
-interface InputTextArgs {
-  scale: string;
-  status: string;
-  alignment: string;
-  prefixText: string;
-  suffixText: string;
-  loading: boolean;
-  clearable: boolean;
-  disabled: boolean;
-  value: string;
-  placeholder: string;
-  validationMessage: string;
-  validationIcon: string;
-}
+type InputTextStoryArgs = Pick<
+  InputText,
+  | "scale"
+  | "status"
+  | "alignment"
+  | "prefixText"
+  | "suffixText"
+  | "loading"
+  | "clearable"
+  | "disabled"
+  | "value"
+  | "placeholder"
+  | "validationMessage"
+  | "validationIcon"
+>;
 
 export default {
   title: "Components/Controls/Input Text",
@@ -55,7 +57,7 @@ export default {
   },
 };
 
-export const simple = (args: InputTextArgs): string => html`
+export const simple = (args: InputTextStoryArgs): string => html`
   <div style="width:300px;max-width:100%;text-align:center;">
     <calcite-input-text
       scale="${args.scale}"
diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.stories.ts b/packages/calcite-components/src/components/input-time-picker/input-time-picker.stories.ts
index 6fbe936ab37..7e42b6e62fd 100644
--- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.stories.ts
+++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.stories.ts
@@ -3,19 +3,15 @@ import { boolean, createBreakpointStories, modesDarkDefault } from "../../../.st
 import { html } from "../../../support/formatting";
 import { defaultMenuPlacement, menuPlacements } from "../../utils/floating-ui";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { InputTimePicker } from "./input-time-picker";
 const { scale, status } = ATTRIBUTES;
 
-interface InputTimePickerArgs {
-  disabled: boolean;
+interface InputTimePickerStoryArgs
+  extends Pick<
+    InputTimePicker,
+    "disabled" | "name" | "placement" | "scale" | "status" | "step" | "validationMessage" | "validationIcon" | "value"
+  > {
   hidden: boolean;
-  name: string;
-  placement: string;
-  scale: string;
-  status: string;
-  step: number;
-  validationMessage: string;
-  validationIcon: string;
-  value: string;
 }
 
 export default {
@@ -52,7 +48,7 @@ export default {
   },
 };
 
-export const simple = (args: InputTimePickerArgs): string => html`
+export const simple = (args: InputTimePickerStoryArgs): string => html`
   <calcite-input-time-picker
     ${boolean("disabled", args.disabled)}
     ${boolean("hidden", args.hidden)}
diff --git a/packages/calcite-components/src/components/input-time-zone/input-time-zone.stories.ts b/packages/calcite-components/src/components/input-time-zone/input-time-zone.stories.ts
index 90009227205..a19a8a8d850 100644
--- a/packages/calcite-components/src/components/input-time-zone/input-time-zone.stories.ts
+++ b/packages/calcite-components/src/components/input-time-zone/input-time-zone.stories.ts
@@ -2,16 +2,13 @@ import { iconNames } from "../../../.storybook/helpers";
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { InputTimeZone } from "./input-time-zone";
 const { mode, scale, status } = ATTRIBUTES;
 
-interface InputTimeZoneArgs {
-  disabled: boolean;
-  mode: string;
-  scale: string;
-  status: string;
-  validationMessage: string;
-  validationIcon: string;
-}
+type InputTimeZoneStoryArgs = Pick<
+  InputTimeZone,
+  "disabled" | "mode" | "scale" | "status" | "validationMessage" | "validationIcon"
+>;
 
 export default {
   title: "Components/Controls/InputTimeZone",
@@ -50,7 +47,7 @@ export default {
   },
 };
 
-export const simple = (args: InputTimeZoneArgs): string => html`
+export const simple = (args: InputTimeZoneStoryArgs): string => html`
   <calcite-input-time-zone
     ${boolean("disabled", args.disabled)}
     mode="${args.mode}"
diff --git a/packages/calcite-components/src/components/input/input.stories.ts b/packages/calcite-components/src/components/input/input.stories.ts
index ebdb29b6158..6bd9560c123 100644
--- a/packages/calcite-components/src/components/input/input.stories.ts
+++ b/packages/calcite-components/src/components/input/input.stories.ts
@@ -2,27 +2,29 @@ import { iconNames } from "../../../.storybook/helpers";
 import { boolean, createBreakpointStories, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { Input } from "./input";
 const { textType, alignment, layout, scale, status } = ATTRIBUTES;
 
-interface InputArgs {
-  type: string;
-  alignment: string;
-  numberButtonType: string;
-  min: number;
-  max: number;
-  step: number;
-  prefixText: string;
-  suffixText: string;
-  loading: boolean;
-  clearable: boolean;
-  disabled: boolean;
-  value: string;
-  scale: string;
-  status: string;
-  placeholder: string;
-  validationMessage: string;
-  validationIcon: string;
-}
+type InputStoryArgs = Pick<
+  Input,
+  | "type"
+  | "alignment"
+  | "numberButtonType"
+  | "min"
+  | "max"
+  | "step"
+  | "prefixText"
+  | "suffixText"
+  | "loading"
+  | "clearable"
+  | "disabled"
+  | "value"
+  | "scale"
+  | "status"
+  | "placeholder"
+  | "validationMessage"
+  | "validationIcon"
+>;
 
 export default {
   title: "Components/Controls/Input",
@@ -81,7 +83,7 @@ export default {
   },
 };
 
-export const simple = (args: InputArgs): string => html`
+export const simple = (args: InputStoryArgs): string => html`
   <div style="width:300px;max-width:100%;text-align:center;">
     <calcite-input
       id="input-with-label"
diff --git a/packages/calcite-components/src/components/link/link.stories.ts b/packages/calcite-components/src/components/link/link.stories.ts
index 79623184f81..a44fa5f5569 100644
--- a/packages/calcite-components/src/components/link/link.stories.ts
+++ b/packages/calcite-components/src/components/link/link.stories.ts
@@ -1,17 +1,16 @@
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import * as icons from "../../../../../node_modules/@esri/calcite-ui-icons";
 import { html } from "../../../support/formatting";
+import { Link } from "./link";
 
 // we can get all unique icon names from all size 16 non-filled icons.
 const iconNames = Object.keys(icons)
   .filter((iconName) => iconName.endsWith("16"))
   .map((iconName) => iconName.replace("16", ""));
 
-interface LinkArgs {
+interface LinkStoryArgs extends Pick<Link, "href" | "disabled"> {
   containingFontSize: string;
   containingFontWeight: string;
-  href: string;
-  disabled: boolean;
   text: string;
 }
 
@@ -36,7 +35,7 @@ export default {
   },
 };
 
-export const simple = (args: LinkArgs): string => html`
+export const simple = (args: LinkStoryArgs): string => html`
   <div style="font-size: ${args.containingFontSize}px; font-weight: ${args.containingFontWeight};">
     Some wrapping text
     <calcite-link href="${args.href}" ${boolean("disabled", args.disabled)}> ${args.text}</calcite-link>
diff --git a/packages/calcite-components/src/components/list/list.stories.ts b/packages/calcite-components/src/components/list/list.stories.ts
index 01387a868dd..2a0cdb85903 100644
--- a/packages/calcite-components/src/components/list/list.stories.ts
+++ b/packages/calcite-components/src/components/list/list.stories.ts
@@ -2,18 +2,16 @@ import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { placeholderImage } from "../../../.storybook/placeholderImage";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { List } from "./list";
 const { selectionMode, selectionAppearance } = ATTRIBUTES;
 
-interface ListArgs {
-  selectionMode: string;
-  selectionAppearance: string;
-  loading: boolean;
+interface ListStoryArgs
+  extends Pick<
+    List,
+    "selectionMode" | "selectionAppearance" | "loading" | "filterEnabled" | "dragEnabled" | "disabled" | "label"
+  > {
   closable: boolean;
   closed: boolean;
-  filterEnabled: boolean;
-  dragEnabled: boolean;
-  disabled: boolean;
-  label: string;
 }
 
 export default {
@@ -52,7 +50,7 @@ const thumbnailImage = placeholderImage({ width: 44, height: 44 });
 
 const listHTML = (): string => html` selection-mode="none" selection-appearance="icon" label="My List" `;
 
-export const simple = (args: ListArgs): string => html`
+export const simple = (args: ListStoryArgs): string => html`
   <calcite-list
     selection-mode="${args.selectionMode}"
     selection-appearance="${args.selectionAppearance}"
diff --git a/packages/calcite-components/src/components/loader/loader.stories.ts b/packages/calcite-components/src/components/loader/loader.stories.ts
index 807bd1f7aca..204b43e033e 100644
--- a/packages/calcite-components/src/components/loader/loader.stories.ts
+++ b/packages/calcite-components/src/components/loader/loader.stories.ts
@@ -1,12 +1,9 @@
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { Loader } from "./loader";
 const { determinateType, scale } = ATTRIBUTES;
 
-interface LoaderArgs {
-  type: string;
-  scale: string;
-  value: number;
-}
+type LoaderStoryArgs = Pick<Loader, "type" | "scale" | "value">;
 
 export default {
   title: "Components/Loader",
@@ -30,7 +27,7 @@ export default {
   },
 };
 
-export const simple_TestOnly = (args: LoaderArgs): string => html`
+export const simple_TestOnly = (args: LoaderStoryArgs): string => html`
   <calcite-loader type="${args.type}" scale="${args.scale}" value="${args.value}" />
 `;
 
diff --git a/packages/calcite-components/src/components/menu-item/menu-item.stories.ts b/packages/calcite-components/src/components/menu-item/menu-item.stories.ts
index c96734b56ff..d63acf44464 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.stories.ts
+++ b/packages/calcite-components/src/components/menu-item/menu-item.stories.ts
@@ -1,16 +1,11 @@
 import { boolean } from "../../../.storybook/utils";
 import { iconNames } from "../../../.storybook/helpers";
 import { html } from "../../../support/formatting";
+import { CalciteMenuItem } from "./menu-item";
 
-interface MenuItemArgs {
-  text: string;
+interface MenuItemStoryArgs
+  extends Pick<CalciteMenuItem, "text" | "href" | "rel" | "target" | "label" | "active" | "breadcrumb"> {
   src: string;
-  href: string;
-  rel: string;
-  target: string;
-  label: string;
-  active: boolean;
-  breadcrumb: boolean;
 }
 
 export default {
@@ -27,7 +22,7 @@ export default {
   },
 };
 
-export const simple = (args: MenuItemArgs): string => html`
+export const simple = (args: MenuItemStoryArgs): string => html`
   <calcite-menu>
     <calcite-menu-item
       text="${args.text}"
diff --git a/packages/calcite-components/src/components/menu/menu.stories.ts b/packages/calcite-components/src/components/menu/menu.stories.ts
index d7270357fb6..e8d1f1c9bfb 100644
--- a/packages/calcite-components/src/components/menu/menu.stories.ts
+++ b/packages/calcite-components/src/components/menu/menu.stories.ts
@@ -1,10 +1,9 @@
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { CalciteMenu } from "./menu";
 const { layout } = ATTRIBUTES;
 
-interface MenuArgs {
-  layout: string;
-}
+type MenuStoryArgs = Pick<CalciteMenu, "layout">;
 
 export default {
   title: "Components/Menu",
@@ -28,7 +27,7 @@ export default {
   },
 };
 
-export const simple = (args: MenuArgs): string => html`
+export const simple = (args: MenuStoryArgs): string => html`
   <calcite-menu layout="${args.layout}">
     <calcite-menu-item text="Example item 1" text-enabled></calcite-menu-item>
     <calcite-menu-item text="Example item 2" text-enabled active></calcite-menu-item>
diff --git a/packages/calcite-components/src/components/meter/meter.stories.ts b/packages/calcite-components/src/components/meter/meter.stories.ts
index 927afecebb2..da2a881d02e 100644
--- a/packages/calcite-components/src/components/meter/meter.stories.ts
+++ b/packages/calcite-components/src/components/meter/meter.stories.ts
@@ -1,23 +1,25 @@
 import { html } from "../../../support/formatting";
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { Meter } from "./meter";
 const { fillType, appearance, labelType } = ATTRIBUTES;
 
-interface MeterArgs {
-  min: number;
-  max: number;
-  low: number;
-  high: number;
-  value: number;
-  fillType: string;
-  appearance: string;
-  rangeLabelType: string;
-  valueLabelType: string;
-  unitLabel: string;
-  groupSeparator: boolean;
-  rangeLabels: boolean;
-  valueLabel: boolean;
-}
+type MeterStoryArgs = Pick<
+  Meter,
+  | "min"
+  | "max"
+  | "low"
+  | "high"
+  | "value"
+  | "fillType"
+  | "appearance"
+  | "rangeLabelType"
+  | "valueLabelType"
+  | "unitLabel"
+  | "groupSeparator"
+  | "rangeLabels"
+  | "valueLabel"
+>;
 
 export default {
   title: "Components/Meter",
@@ -56,7 +58,7 @@ export default {
   },
 };
 
-export const simple = (args: MeterArgs): string =>
+export const simple = (args: MeterStoryArgs): string =>
   html`<calcite-meter
     label="Meter example"
     min="${args.min}"
diff --git a/packages/calcite-components/src/components/modal/modal.stories.ts b/packages/calcite-components/src/components/modal/modal.stories.ts
index 82a7f5157f9..f50eecc1f9e 100644
--- a/packages/calcite-components/src/components/modal/modal.stories.ts
+++ b/packages/calcite-components/src/components/modal/modal.stories.ts
@@ -1,17 +1,13 @@
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { Modal } from "./modal";
 const { kind, scale } = ATTRIBUTES;
 
-interface ModalArgs {
-  open: boolean;
-  kind: string;
-  scale: string;
-  widthScale: string;
-  fullscreen: boolean;
-  docked: boolean;
-  escapeDisabled: boolean;
-}
+type ModalStoryArgs = Pick<
+  Modal,
+  "open" | "kind" | "scale" | "widthScale" | "fullscreen" | "docked" | "escapeDisabled"
+>;
 
 export default {
   title: "Components/Modal",
@@ -45,7 +41,7 @@ export default {
   },
 };
 
-export const simple = (args: ModalArgs): string => html`
+export const simple = (args: ModalStoryArgs): string => html`
   <calcite-modal
     ${boolean("open", args.open)}
     kind="${args.kind}"
diff --git a/packages/calcite-components/src/components/navigation-logo/navigation-logo.stories.ts b/packages/calcite-components/src/components/navigation-logo/navigation-logo.stories.ts
index c40cac40d22..5fb8ce98a79 100644
--- a/packages/calcite-components/src/components/navigation-logo/navigation-logo.stories.ts
+++ b/packages/calcite-components/src/components/navigation-logo/navigation-logo.stories.ts
@@ -1,12 +1,9 @@
 import { boolean } from "../../../.storybook/utils";
 import { placeholderImage } from "../../../.storybook/placeholderImage";
 import { html } from "../../../support/formatting";
+import { CalciteNavigationLogo } from "./navigation-logo";
 
-interface NavigationLogoArgs {
-  description: string;
-  heading: string;
-  active: boolean;
-}
+type NavigationLogoStoryArgs = Pick<CalciteNavigationLogo, "description" | "heading" | "active">;
 
 export default {
   title: "Components/Navigation/Navigation Logo",
@@ -17,7 +14,7 @@ export default {
   },
 };
 
-export const simple = (args: NavigationLogoArgs): string =>
+export const simple = (args: NavigationLogoStoryArgs): string =>
   html`<calcite-navigation-logo
     description="${args.description}"
     heading="${args.heading}"
diff --git a/packages/calcite-components/src/components/navigation-user/navigation-user.stories.ts b/packages/calcite-components/src/components/navigation-user/navigation-user.stories.ts
index 9e2822d8d05..3f77420e60e 100644
--- a/packages/calcite-components/src/components/navigation-user/navigation-user.stories.ts
+++ b/packages/calcite-components/src/components/navigation-user/navigation-user.stories.ts
@@ -1,15 +1,12 @@
 import { boolean } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { placeholderImage } from "../../../.storybook/placeholderImage";
+import { CalciteNavigationUser } from "./navigation-user";
 
-interface NavigationUserArgs {
-  fullName: string;
-  userName: string;
-  thumbnail: string;
-  userId: string;
-  textDisabled: boolean;
-  active: boolean;
-}
+type NavigationUserStoryArgs = Pick<
+  CalciteNavigationUser,
+  "fullName" | "username" | "thumbnail" | "userId" | "textDisabled" | "active"
+>;
 
 export default {
   title: "Components/Navigation/Navigation User",
@@ -23,11 +20,11 @@ export default {
   },
 };
 
-export const simple = (args: NavigationUserArgs): string => html`
+export const simple = (args: NavigationUserStoryArgs): string => html`
   <calcite-navigation-user
     slot="user"
     full-name="${args.fullName}"
-    username="${args.userName}"
+    username="${args.username}"
     thumbnail="${args.thumbnail}"
     user-id="${args.userId}"
     ${boolean("text-disabled", args.textDisabled)}
diff --git a/packages/calcite-components/src/components/notice/notice.stories.ts b/packages/calcite-components/src/components/notice/notice.stories.ts
index 4dab8cb9268..f6956567b44 100644
--- a/packages/calcite-components/src/components/notice/notice.stories.ts
+++ b/packages/calcite-components/src/components/notice/notice.stories.ts
@@ -2,16 +2,12 @@ import { iconNames } from "../../../.storybook/helpers";
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { Notice } from "./notice";
 const { scale, width, kind } = ATTRIBUTES;
 
-interface NoticeArgs {
+interface NoticeStoryArgs extends Pick<Notice, "open" | "closable" | "width" | "kind" | "icon"> {
   showIcon: boolean;
-  open: boolean;
-  closable: boolean;
   noticeScale: string;
-  width: string;
-  kind: string;
-  icon: string;
   actionScale: string;
 }
 
@@ -51,7 +47,7 @@ export default {
   },
 };
 
-export const simple = (args: NoticeArgs): string => html`
+export const simple = (args: NoticeStoryArgs): string => html`
   <div style="width:600px;max-width:100%;text-align:center;">
     <calcite-notice
       ${boolean("icon", args.showIcon)}
diff --git a/packages/calcite-components/src/components/pagination/pagination.stories.ts b/packages/calcite-components/src/components/pagination/pagination.stories.ts
index 819de1b33c6..f5739649a35 100644
--- a/packages/calcite-components/src/components/pagination/pagination.stories.ts
+++ b/packages/calcite-components/src/components/pagination/pagination.stories.ts
@@ -2,15 +2,12 @@ import { locales, numberingSystems, defaultLocale, defaultNumberingSystem } from
 import { createBreakpointStories, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { Pagination } from "./pagination";
 const { scale } = ATTRIBUTES;
 
-interface PaginationArgs {
-  scale: string;
-  startItem: number;
+interface PaginationStoryArgs
+  extends Pick<Pagination, "scale" | "startItem" | "numberingSystem" | "totalItems" | "pageSize"> {
   lang: string;
-  numberingSystem: string;
-  totalItems: number;
-  pageSize: number;
 }
 
 export default {
@@ -44,7 +41,7 @@ export default {
   },
 };
 
-export const simple = (args: PaginationArgs): string => html`
+export const simple = (args: PaginationStoryArgs): string => html`
   <style>
     .sb-show-main.sb-main-centered #storybook-root {
       padding: 0 !important;
diff --git a/packages/calcite-components/src/components/panel/panel.stories.ts b/packages/calcite-components/src/components/panel/panel.stories.ts
index 741a9c5753b..e57051f846b 100644
--- a/packages/calcite-components/src/components/panel/panel.stories.ts
+++ b/packages/calcite-components/src/components/panel/panel.stories.ts
@@ -1,18 +1,16 @@
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { Panel } from "./panel";
 import { SLOTS } from "./resources";
 const { collapseDirection, scale } = ATTRIBUTES;
 
-interface PanelArgs {
-  closed: boolean;
-  disabled: boolean;
-  closable: boolean;
-  collapsed: boolean;
-  collapsible: boolean;
-  collapseDirection: string;
+interface PanelStoryArgs
+  extends Pick<
+    Panel,
+    "closed" | "disabled" | "closable" | "collapsed" | "collapsible" | "collapseDirection" | "loading"
+  > {
   heightScale: string;
-  loading: boolean;
 }
 
 export default {
@@ -77,7 +75,7 @@ const panelContent = `${headerHTML}
   ${contentHTML}
   ${footerHTML}`;
 
-export const simple = (args: PanelArgs): string => html`
+export const simple = (args: PanelStoryArgs): string => html`
   <calcite-panel
     ${boolean("closed", args.closed)}
     ${boolean("disabled", args.disabled)}
diff --git a/packages/calcite-components/src/components/pick-list/pick-list.stories.ts b/packages/calcite-components/src/components/pick-list/pick-list.stories.ts
index 7f1477b0913..7dfd1346fb6 100644
--- a/packages/calcite-components/src/components/pick-list/pick-list.stories.ts
+++ b/packages/calcite-components/src/components/pick-list/pick-list.stories.ts
@@ -1,13 +1,11 @@
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
+import { PickList } from "./pick-list";
 
-interface PickListArgs {
-  disabled: boolean;
-  filterEnabled: boolean;
-  loading: boolean;
-  multiple: boolean;
-  selectionFollowsFocus: boolean;
-}
+type PickListStoryArgs = Pick<
+  PickList,
+  "disabled" | "filterEnabled" | "loading" | "multiple" | "selectionFollowsFocus"
+>;
 
 export default {
   title: "Components/Pick List",
@@ -30,7 +28,7 @@ const action = html`
   ></calcite-action>
 `;
 
-export const simple = (args: PickListArgs): string => html`
+export const simple = (args: PickListStoryArgs): string => html`
   <calcite-pick-list
     ${boolean("disabled", args.disabled)}
     ${boolean("filter-enabled", args.filterEnabled)}
diff --git a/packages/calcite-components/src/components/popover/popover.stories.ts b/packages/calcite-components/src/components/popover/popover.stories.ts
index c69896cf1c5..bb69f56f2a8 100644
--- a/packages/calcite-components/src/components/popover/popover.stories.ts
+++ b/packages/calcite-components/src/components/popover/popover.stories.ts
@@ -3,6 +3,7 @@ import { html } from "../../../support/formatting";
 import { placements } from "../../utils/floating-ui";
 import { defaultPopoverPlacement } from "../popover/resources";
 import { modesDarkDefault } from "../../../.storybook/utils";
+import { Popover } from "./popover";
 
 const contentHTML = `
 <div style="width: 300px; padding:12px 16px;">
@@ -15,14 +16,11 @@ const contentHTML = `
 const referenceElementHTML = `Ut enim ad minim veniam, quis <calcite-button title="Reference Element" id="reference-element">nostrud exercitation</calcite-button> ullamco laboris nisi ut aliquip ex ea commodo consequat.`;
 const nestedReferenceElementHTML = `Ut enim ad minim veniam, quis <calcite-button title="Nested Reference Element" id="reference-element-nested">nostrud exercitation</calcite-button> ullamco laboris nisi ut aliquip ex ea commodo consequat.`;
 
-interface PopoverArgs {
-  closable: boolean;
-  flipDisabled: boolean;
-  pointerDisabled: boolean;
-  placement: string;
-  offsetDistance: number;
-  offsetSkidding: number;
-  open: boolean;
+interface PopoverStoryArgs
+  extends Pick<
+    Popover,
+    "closable" | "flipDisabled" | "pointerDisabled" | "placement" | "offsetDistance" | "offsetSkidding" | "open"
+  > {
   textClose: string;
 }
 
@@ -51,7 +49,7 @@ export default {
   },
 };
 
-export const simple = (args: PopoverArgs): string => html`
+export const simple = (args: PopoverStoryArgs): string => html`
   <div style="width: 400px;">
     ${referenceElementHTML}
     <calcite-popover
diff --git a/packages/calcite-components/src/components/progress/progress.stories.ts b/packages/calcite-components/src/components/progress/progress.stories.ts
index 084f97d92e5..56b67cf8f27 100644
--- a/packages/calcite-components/src/components/progress/progress.stories.ts
+++ b/packages/calcite-components/src/components/progress/progress.stories.ts
@@ -1,13 +1,10 @@
 import { modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { Progress } from "./progress";
 const { determinateType } = ATTRIBUTES;
 
-interface ProgressArgs {
-  type: string;
-  value: number;
-  text: string;
-}
+type ProgressStoryArgs = Pick<Progress, "type" | "value" | "text">;
 
 export default {
   title: "Components/Progress",
@@ -27,7 +24,7 @@ export default {
   },
 };
 
-export const simple = (args: ProgressArgs): string => html`
+export const simple = (args: ProgressStoryArgs): string => html`
   <calcite-progress type="${args.type}" value="${args.value}" text="${args.text}"></calcite-progress>
 `;
 
diff --git a/packages/calcite-components/src/components/radio-button-group/radio-button-group.stories.ts b/packages/calcite-components/src/components/radio-button-group/radio-button-group.stories.ts
index e1bb12faa49..64808d4abd5 100644
--- a/packages/calcite-components/src/components/radio-button-group/radio-button-group.stories.ts
+++ b/packages/calcite-components/src/components/radio-button-group/radio-button-group.stories.ts
@@ -1,13 +1,11 @@
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { RadioButtonGroup } from "./radio-button-group";
 const { layout, scale } = ATTRIBUTES;
 
-interface RadioButtonGroupArgs {
-  disabled: boolean;
+interface RadioButtonGroupStoryArgs extends Pick<RadioButtonGroup, "disabled" | "layout" | "scale"> {
   hidden: boolean;
-  layout: string;
-  scale: string;
 }
 
 export default {
@@ -39,7 +37,7 @@ export default {
   },
 };
 
-export const simple = (args: RadioButtonGroupArgs): string => html`
+export const simple = (args: RadioButtonGroupStoryArgs): string => html`
   <calcite-radio-button-group
     name="simple"
     ${boolean("disabled", args.disabled)}
diff --git a/packages/calcite-components/src/components/radio-button/radio-button.stories.ts b/packages/calcite-components/src/components/radio-button/radio-button.stories.ts
index 87b8a23675c..6623649e0b0 100644
--- a/packages/calcite-components/src/components/radio-button/radio-button.stories.ts
+++ b/packages/calcite-components/src/components/radio-button/radio-button.stories.ts
@@ -1,15 +1,11 @@
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { RadioButton } from "./radio-button";
 const { scale } = ATTRIBUTES;
 
-interface RadioButtonArgs {
-  checked: boolean;
-  disabled: boolean;
+interface RadioButtonStoryArgs extends Pick<RadioButton, "checked" | "disabled" | "focused" | "scale" | "label"> {
   hidden: boolean;
-  focused: boolean;
-  scale: string;
-  label: string;
 }
 
 export default {
@@ -30,7 +26,7 @@ export default {
   },
 };
 
-export const simple = (args: RadioButtonArgs): string => html`
+export const simple = (args: RadioButtonStoryArgs): string => html`
   <calcite-label layout="inline">
     <calcite-radio-button
       ${boolean("checked", args.checked)}
diff --git a/packages/calcite-components/src/components/rating/rating.stories.ts b/packages/calcite-components/src/components/rating/rating.stories.ts
index 47f3fbdbcd0..7f4c5badb8d 100644
--- a/packages/calcite-components/src/components/rating/rating.stories.ts
+++ b/packages/calcite-components/src/components/rating/rating.stories.ts
@@ -1,17 +1,10 @@
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { Rating } from "./rating";
 const { scale } = ATTRIBUTES;
 
-interface RatingArgs {
-  scale: string;
-  value: number;
-  showChip: boolean;
-  average: number;
-  count: number;
-  readOnly: boolean;
-  disabled: boolean;
-}
+type RatingStoryArgs = Pick<Rating, "scale" | "value" | "showChip" | "average" | "count" | "readOnly" | "disabled">;
 
 export default {
   title: "Components/Controls/Rating",
@@ -32,7 +25,7 @@ export default {
   },
 };
 
-export const simple = (args: RatingArgs): string => html`
+export const simple = (args: RatingStoryArgs): string => html`
   <calcite-rating
     scale="${args.scale}"
     value="${args.value}"
diff --git a/packages/calcite-components/src/components/scrim/scrim.stories.ts b/packages/calcite-components/src/components/scrim/scrim.stories.ts
index 39316ce372b..9e23f916ff9 100644
--- a/packages/calcite-components/src/components/scrim/scrim.stories.ts
+++ b/packages/calcite-components/src/components/scrim/scrim.stories.ts
@@ -1,16 +1,15 @@
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
+import { Scrim } from "./scrim";
 
-interface ScrimArgs {
-  loading: boolean;
-}
+type ScrimStoryArgs = Pick<Scrim, "loading">;
 
 export default {
   title: "Components/Scrim",
   loading: false,
 };
 
-export const simple = (args: ScrimArgs): string => html`
+export const simple = (args: ScrimStoryArgs): string => html`
   <div tabindex="0" style="position: relative; width: 400px; height: 400px">
     <calcite-scrim ${boolean("loading", args.loading)}></calcite-scrim>
     <div style="width: 400px; height: 400px; overflow: auto">
diff --git a/packages/calcite-components/src/components/segmented-control/segmented-control.stories.ts b/packages/calcite-components/src/components/segmented-control/segmented-control.stories.ts
index 36a1a8e0738..880d2b245d6 100644
--- a/packages/calcite-components/src/components/segmented-control/segmented-control.stories.ts
+++ b/packages/calcite-components/src/components/segmented-control/segmented-control.stories.ts
@@ -2,18 +2,13 @@ import { iconNames } from "../../../.storybook/helpers";
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { SegmentedControl } from "./segmented-control";
 const { layout, appearance, scale, width, status } = ATTRIBUTES;
 
-interface SegmentedControl {
-  layout: string;
-  appearance: string;
-  scale: string;
-  width: string;
-  disabled: boolean;
-  status: string;
-  validationIcon: string;
-  validationMessage: string;
-}
+type SegmentedControlStoryArgs = Pick<
+  SegmentedControl,
+  "layout" | "appearance" | "scale" | "width" | "disabled" | "status" | "validationIcon" | "validationMessage"
+>;
 
 export default {
   title: "Components/Controls/Radio/Segmented Control",
@@ -64,7 +59,7 @@ export default {
   },
 };
 
-export const simple = (args: SegmentedControl): string => html`
+export const simple = (args: SegmentedControlStoryArgs): string => html`
   <calcite-segmented-control
     layout="${args.layout}"
     appearance="${args.appearance}"
diff --git a/packages/calcite-components/src/components/select/select.stories.ts b/packages/calcite-components/src/components/select/select.stories.ts
index c072cfb87b8..590defa0c95 100644
--- a/packages/calcite-components/src/components/select/select.stories.ts
+++ b/packages/calcite-components/src/components/select/select.stories.ts
@@ -1,26 +1,21 @@
+import { Option } from "../option/option";
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { iconNames } from "../../../.storybook/helpers";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { Select } from "./select";
 const { status, width, scale } = ATTRIBUTES;
 
-interface SelectArgs {
-  selectDisabled: boolean;
-  status: string;
-  width: string;
-  scale: string;
-  validationMessage: string;
-  validationIcon: string;
-  optionDisabled: boolean;
-  label: string;
-  selected: boolean;
-  value: string;
+interface SelectStoryArgs
+  extends Pick<Select, "disabled" | "status" | "width" | "scale" | "validationMessage" | "validationIcon">,
+    Pick<Option, "label" | "selected" | "value"> {
+  optionDisabled: Option["disabled"];
 }
 
 export default {
   title: "Components/Controls/Select",
   args: {
-    selectDisabled: false,
+    disabled: false,
     status: status.defaultValue,
     width: width.defaultValue,
     scale: scale.defaultValue,
@@ -51,10 +46,10 @@ export default {
   },
 };
 
-export const simple = (args: SelectArgs): string => html`
+export const simple = (args: SelectStoryArgs): string => html`
   <div style="width:260px">
     <calcite-select
-      ${boolean("disabled", args.selectDisabled)}
+      ${boolean("disabled", args.disabled)}
       status="${args.status}"
       width="${args.width}"
       scale="${args.scale}"
diff --git a/packages/calcite-components/src/components/sheet/sheet.stories.ts b/packages/calcite-components/src/components/sheet/sheet.stories.ts
index 190c145c3d5..4ca7dd8bc01 100644
--- a/packages/calcite-components/src/components/sheet/sheet.stories.ts
+++ b/packages/calcite-components/src/components/sheet/sheet.stories.ts
@@ -1,13 +1,10 @@
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { Sheet } from "./sheet";
 const { logicalFlowPosition, displayMode } = ATTRIBUTES;
 
-interface SheetArgs {
-  open: boolean;
-  position: string;
-  displayMode: string;
-}
+type SheetStoryArgs = Pick<Sheet, "open" | "position" | "displayMode">;
 
 export default {
   title: "Components/Sheet",
@@ -44,7 +41,7 @@ const panelHTML = html`<calcite-panel heading="Ultrices neque"
   <calcite-button slot="footer" width="half" appearance="outline">amet porttitor</calcite-button>
 </calcite-panel>`;
 
-export const simple = (args: SheetArgs): string => html`
+export const simple = (args: SheetStoryArgs): string => html`
   <calcite-sheet
     label="libero nunc"
     ${boolean("open", args.open)}
@@ -54,7 +51,7 @@ export const simple = (args: SheetArgs): string => html`
   >
 `;
 
-export const simpleDarkMode = (args: SheetArgs): string => html`
+export const simpleDarkMode = (args: SheetStoryArgs): string => html`
   <calcite-sheet
     label="libero nunc"
     ${boolean("open", args.open)}
diff --git a/packages/calcite-components/src/components/shell/shell.stories.ts b/packages/calcite-components/src/components/shell/shell.stories.ts
index 7c5994e2f44..e2f2c7fd250 100644
--- a/packages/calcite-components/src/components/shell/shell.stories.ts
+++ b/packages/calcite-components/src/components/shell/shell.stories.ts
@@ -1,20 +1,22 @@
+import { ShellPanel } from "../shell-panel/shell-panel";
+import { ShellCenterRow } from "../shell-center-row/shell-center-row";
 import { placeholderImage } from "../../../.storybook/placeholderImage";
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
 const { shellDisplayMode, position, scale } = ATTRIBUTES;
 
-interface ShellArgs {
-  collapsed: boolean;
-  displayMode: string;
-  leadingPanelPosition: string;
-  trailingPanelPosition: string;
-  resizable: boolean;
-  detached: boolean;
-  heightScale: string;
-  shellCenterRowPosition: string;
+interface ShellPanelArgs extends Pick<ShellPanel, "collapsed" | "displayMode" | "resizable"> {
+  leadingPanelPosition: ShellPanel["position"];
+  trailingPanelPosition: ShellPanel["position"];
 }
 
+interface ShellCenterRowArgs extends Pick<ShellCenterRow, "detached" | "heightScale"> {
+  shellCenterRowPosition: ShellCenterRow["position"];
+}
+
+type ShellStoryArgs = ShellPanelArgs & ShellCenterRowArgs;
+
 export default {
   title: "Components/Shell",
   args: {
@@ -295,7 +297,7 @@ const advancedTrailingPanelHTMl = html(`
   </calcite-flow>
 `);
 
-export const simple = (args: ShellArgs): string => html`
+export const simple = (args: ShellStoryArgs): string => html`
   <calcite-shell>
     ${headerHTML}
     <calcite-shell-panel
diff --git a/packages/calcite-components/src/components/slider/slider.stories.ts b/packages/calcite-components/src/components/slider/slider.stories.ts
index 5aeef75f30e..5b6f91ad75c 100644
--- a/packages/calcite-components/src/components/slider/slider.stories.ts
+++ b/packages/calcite-components/src/components/slider/slider.stories.ts
@@ -1,24 +1,28 @@
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { Slider } from "./slider";
 const { scale } = ATTRIBUTES;
 
-interface SliderArgs {
-  min: number;
-  max: number;
-  value: number;
-  step: number;
+interface SliderStoryArgs
+  extends Pick<
+    Slider,
+    | "min"
+    | "max"
+    | "value"
+    | "step"
+    | "minLabel"
+    | "disabled"
+    | "labelHandles"
+    | "labelTicks"
+    | "ticks"
+    | "pageStep"
+    | "precise"
+    | "mirrored"
+    | "snap"
+    | "scale"
+  > {
   temperature: string;
-  minLabel: string;
-  disabled: boolean;
-  labelHandles: boolean;
-  labelTicks: boolean;
-  ticks: number;
-  pageStep: number;
-  precise: boolean;
-  mirrored: boolean;
-  snap: boolean;
-  scale: string;
 }
 
 export default {
@@ -54,7 +58,7 @@ export default {
   },
 };
 
-export const simple = (args: SliderArgs): string => html`
+export const simple = (args: SliderStoryArgs): string => html`
   <calcite-slider
     min="${args.min}"
     max="${args.max}"
diff --git a/packages/calcite-components/src/components/split-button/split-button.stories.ts b/packages/calcite-components/src/components/split-button/split-button.stories.ts
index ab07381fe07..d3566f2f70a 100644
--- a/packages/calcite-components/src/components/split-button/split-button.stories.ts
+++ b/packages/calcite-components/src/components/split-button/split-button.stories.ts
@@ -2,21 +2,23 @@ import { iconNames } from "../../../.storybook/helpers";
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { SplitButton } from "./split-button";
 const { appearance, kind, scale, width, iconType } = ATTRIBUTES;
 
-interface SplitButtonArgs {
-  appearance: string;
-  kind: string;
-  scale: string;
-  width: string;
-  loading: boolean;
-  disabled: boolean;
-  primaryIconStart: string;
-  primaryText: string;
-  primaryLabel: string;
-  dropdownLabel: string;
-  dropdownIconType: string;
-}
+type SplitButtonStoryArgs = Pick<
+  SplitButton,
+  | "appearance"
+  | "kind"
+  | "scale"
+  | "width"
+  | "loading"
+  | "disabled"
+  | "primaryIconStart"
+  | "primaryText"
+  | "primaryLabel"
+  | "dropdownLabel"
+  | "dropdownIconType"
+>;
 
 export default {
   title: "Components/Buttons/Split Button",
@@ -61,7 +63,7 @@ export default {
   },
 };
 
-export const simple = (args: SplitButtonArgs): string => html`
+export const simple = (args: SplitButtonStoryArgs): string => html`
   <div style="width:70vw;">
     <calcite-split-button
       active
diff --git a/packages/calcite-components/src/components/stepper/stepper.stories.ts b/packages/calcite-components/src/components/stepper/stepper.stories.ts
index 83218d21e96..16c2df37218 100644
--- a/packages/calcite-components/src/components/stepper/stepper.stories.ts
+++ b/packages/calcite-components/src/components/stepper/stepper.stories.ts
@@ -1,22 +1,33 @@
+import { Stepper } from "../stepper/stepper";
+import { StepperItem } from "../stepper-item/stepper-item";
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
 const { layout, scale } = ATTRIBUTES;
 
-interface StepperArgs {
-  layout: string;
-  scale: string;
-  numbered: boolean;
-  icon: boolean;
-  heading1: string;
-  description1: string;
-  heading2: string;
-  description2: string;
-  heading3: string;
-  description3: string;
-  heading4: string;
-  description4: string;
-}
+type StepperArgs = Pick<Stepper, "layout" | "scale" | "numbered" | "icon">;
+
+type StepperItemArgs1 = {
+  heading1: StepperItem["heading"];
+  description1: StepperItem["description"];
+};
+
+type StepperItemArgs2 = {
+  heading2: StepperItem["heading"];
+  description2: StepperItem["description"];
+};
+
+type StepperItemArgs3 = {
+  heading3: StepperItem["heading"];
+  description3: StepperItem["description"];
+};
+
+type StepperItemArgs4 = {
+  heading4: StepperItem["heading"];
+  description4: StepperItem["description"];
+};
+
+type StepperStoryArgs = StepperArgs & StepperItemArgs1 & StepperItemArgs2 & StepperItemArgs3 & StepperItemArgs4;
 
 export default {
   title: "Components/Stepper",
@@ -59,7 +70,7 @@ export default {
   },
 };
 
-export const simple = (args: StepperArgs): string => html`
+export const simple = (args: StepperStoryArgs): string => html`
   <h1>Default</h1>
   <calcite-stepper
     layout="${args.layout}"
diff --git a/packages/calcite-components/src/components/switch/switch.stories.ts b/packages/calcite-components/src/components/switch/switch.stories.ts
index 19033093437..85f82b34a1c 100644
--- a/packages/calcite-components/src/components/switch/switch.stories.ts
+++ b/packages/calcite-components/src/components/switch/switch.stories.ts
@@ -1,13 +1,10 @@
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { Switch } from "./switch";
 const { scale } = ATTRIBUTES;
 
-interface SwitchArgs {
-  checked: boolean;
-  disabled: boolean;
-  scale: string;
-}
+type SwitchStoryArgs = Pick<Switch, "checked" | "disabled" | "scale">;
 
 export default {
   title: "Components/Controls/Switch",
@@ -24,7 +21,7 @@ export default {
   },
 };
 
-export const simple = (args: SwitchArgs): string => html`
+export const simple = (args: SwitchStoryArgs): string => html`
   <calcite-switch
     name="setting"
     value="enabled"
diff --git a/packages/calcite-components/src/components/table/table.stories.ts b/packages/calcite-components/src/components/table/table.stories.ts
index 9b9b66dd000..e022d6040e3 100644
--- a/packages/calcite-components/src/components/table/table.stories.ts
+++ b/packages/calcite-components/src/components/table/table.stories.ts
@@ -1,20 +1,22 @@
 import { html } from "../../../support/formatting";
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { Table } from "./table";
 const { interactionMode, selectionMode, scale, layout } = ATTRIBUTES;
 
-interface TableArgs {
-  pageSize: number;
-  interactionMode: string;
-  selectionMode: string;
-  selectionDisplay: string;
-  scale: string;
-  layout: string;
-  caption: string;
-  numbered: boolean;
-  bordered: boolean;
-  striped: boolean;
-}
+type TableStoryArgs = Pick<
+  Table,
+  | "pageSize"
+  | "interactionMode"
+  | "selectionMode"
+  | "selectionDisplay"
+  | "scale"
+  | "layout"
+  | "caption"
+  | "numbered"
+  | "bordered"
+  | "striped"
+>;
 
 export default {
   title: "Components/Table",
@@ -66,7 +68,7 @@ export default {
   },
 };
 
-export const simple = (args: TableArgs): string => html`
+export const simple = (args: TableStoryArgs): string => html`
   <calcite-table
     page-size="${args.pageSize}"
     interaction-mode="${args.interactionMode}"
diff --git a/packages/calcite-components/src/components/tabs/tabs.stories.ts b/packages/calcite-components/src/components/tabs/tabs.stories.ts
index 56489cd2bd7..853d6f4924d 100644
--- a/packages/calcite-components/src/components/tabs/tabs.stories.ts
+++ b/packages/calcite-components/src/components/tabs/tabs.stories.ts
@@ -3,13 +3,10 @@ import { placeholderImage } from "../../../.storybook/placeholderImage";
 import { createBreakpointStories, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { Tabs } from "./tabs";
 const { layout, position, scale } = ATTRIBUTES;
 
-interface TabsArgs {
-  layout: string;
-  position: string;
-  scale: string;
-}
+type TabsStoryArgs = Pick<Tabs, "layout" | "position" | "scale">;
 
 export default {
   title: "Components/Tabs",
@@ -36,7 +33,7 @@ export default {
   },
 };
 
-export const simpleDarkModeRTL_TestOnly = (args: TabsArgs): string => html`
+export const simpleDarkModeRTL_TestOnly = (args: TabsStoryArgs): string => html`
   <calcite-tabs
     dir="rtl"
     class="calcite-mode-dark"
diff --git a/packages/calcite-components/src/components/text-area/text-area.stories.ts b/packages/calcite-components/src/components/text-area/text-area.stories.ts
index bc5bb5d4092..1698c2003bf 100644
--- a/packages/calcite-components/src/components/text-area/text-area.stories.ts
+++ b/packages/calcite-components/src/components/text-area/text-area.stories.ts
@@ -2,21 +2,23 @@ import { boolean } from "../../../.storybook/utils";
 import { iconNames } from "../../../.storybook/helpers";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { TextArea } from "./text-area";
 const { scale, status } = ATTRIBUTES;
 
-interface TextAreaArgs {
-  scale: string;
-  status: string;
-  placeholder: string;
-  disabled: boolean;
-  columns: number;
-  resize: string;
-  rows: number;
-  label: string;
-  name: string;
-  validationMessage: string;
-  validationIcon: string;
-}
+type TextAreaStoryArgs = Pick<
+  TextArea,
+  | "scale"
+  | "status"
+  | "placeholder"
+  | "disabled"
+  | "columns"
+  | "resize"
+  | "rows"
+  | "label"
+  | "name"
+  | "validationMessage"
+  | "validationIcon"
+>;
 
 export default {
   title: "Components/TextArea",
@@ -49,7 +51,7 @@ export default {
   },
 };
 
-export const simple = (args: TextAreaArgs): string => html`
+export const simple = (args: TextAreaStoryArgs): string => html`
   <calcite-text-area
     scale="${args.scale}"
     status="${args.status}"
diff --git a/packages/calcite-components/src/components/tile-group/tile-group.stories.ts b/packages/calcite-components/src/components/tile-group/tile-group.stories.ts
index 62322923432..b7cc9a7a438 100644
--- a/packages/calcite-components/src/components/tile-group/tile-group.stories.ts
+++ b/packages/calcite-components/src/components/tile-group/tile-group.stories.ts
@@ -2,13 +2,11 @@ import { boolean } from "../../../.storybook/utils";
 import { placeholderImage } from "../../../.storybook/placeholderImage";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { TileGroup } from "./tile-group";
 const { dir, layout, scale } = ATTRIBUTES;
 
-interface TitleGroupArgs {
+interface TileGroupStoryArgs extends Pick<TileGroup, "disabled" | "layout" | "scale"> {
   dir: string;
-  disabled: boolean;
-  layout: string;
-  scale: string;
 }
 
 export default {
@@ -47,7 +45,7 @@ export default {
   },
 };
 
-export const simple = (args: TitleGroupArgs): string => html`
+export const simple = (args: TileGroupStoryArgs): string => html`
   <calcite-tile-group
     dir="${args.dir}"
     ${boolean("disabled", args.disabled)}
diff --git a/packages/calcite-components/src/components/tile-select-group/tile-select-group.stories.ts b/packages/calcite-components/src/components/tile-select-group/tile-select-group.stories.ts
index a97ecef496e..4b002645de2 100644
--- a/packages/calcite-components/src/components/tile-select-group/tile-select-group.stories.ts
+++ b/packages/calcite-components/src/components/tile-select-group/tile-select-group.stories.ts
@@ -1,24 +1,25 @@
+import { TileSelect } from "../tile-select/tile-select";
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { TileSelectGroup } from "./tile-select-group";
 const { layout, dir, alignment, width, buttonType } = ATTRIBUTES;
 
-interface TileSelectGroupArgs {
-  layout: string;
+interface TileSelectGroupArgs extends Pick<TileSelectGroup, "layout"> {
   dir: string;
-  inputEnabled: boolean;
-  alignment: string;
-  width: string;
-  type: string;
 }
 
+type TileSelectArgs = Pick<TileSelect, "inputEnabled" | "inputAlignment" | "width" | "type">;
+
+type TileSelectGroupStoryArgs = TileSelectGroupArgs & TileSelectArgs;
+
 export default {
   title: "Components/Tiles/Tile Select Group",
   args: {
     layout: layout.defaultValue,
     dir: dir.defaultValue,
     inputEnabled: true,
-    alignment: alignment.defaultValue,
+    inputAlignment: alignment.defaultValue,
     width: width.defaultValue,
     type: buttonType.defaultValue,
   },
@@ -39,7 +40,7 @@ export default {
       options: dir.values,
       control: { type: "select" },
     },
-    alignment: {
+    inputAlignment: {
       options: alignment.values,
       control: { type: "select" },
     },
@@ -106,7 +107,7 @@ const tileSelectsHTML = () => html`
   </calcite-tile-select>
 `;
 
-export const simple = (args: TileSelectGroupArgs): string => html`
+export const simple = (args: TileSelectGroupStoryArgs): string => html`
   <calcite-tile-select-group layout="${args.layout}" dir="${args.dir}">
     <calcite-tile-select
       checked
@@ -115,7 +116,7 @@ export const simple = (args: TileSelectGroupArgs): string => html`
       icon="layers"
       name="light"
       ${boolean("input-enabled", args.inputEnabled)}
-      input-alignment="${args.alignment}"
+      input-alignment="${args.inputAlignment}"
       width="${args.width}"
       type="${args.type}"
       value="one"
@@ -127,7 +128,7 @@ export const simple = (args: TileSelectGroupArgs): string => html`
       icon="layers"
       name="light"
       ${boolean("input-enabled", args.inputEnabled)}
-      input-alignment="${args.alignment}"
+      input-alignment="${args.inputAlignment}"
       width="${args.width}"
       type="${args.type}"
       value="two"
@@ -139,7 +140,7 @@ export const simple = (args: TileSelectGroupArgs): string => html`
       icon="layers"
       name="light"
       ${boolean("input-enabled", args.inputEnabled)}
-      input-alignment="${args.alignment}"
+      input-alignment="${args.inputAlignment}"
       width="${args.width}"
       type="${args.type}"
       value="three"
@@ -151,7 +152,7 @@ export const simple = (args: TileSelectGroupArgs): string => html`
       icon="layers"
       name="light"
       ${boolean("input-enabled", args.inputEnabled)}
-      input-alignment="${args.alignment}"
+      input-alignment="${args.inputAlignment}"
       width="${args.width}"
       type="${args.type}"
       value="four"
diff --git a/packages/calcite-components/src/components/tile-select/tile-select.stories.ts b/packages/calcite-components/src/components/tile-select/tile-select.stories.ts
index 51307fab1a2..0cffcc489ad 100644
--- a/packages/calcite-components/src/components/tile-select/tile-select.stories.ts
+++ b/packages/calcite-components/src/components/tile-select/tile-select.stories.ts
@@ -2,20 +2,24 @@ import { boolean } from "../../../.storybook/utils";
 import { iconNames } from "../../../.storybook/helpers";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { TileSelect } from "./tile-select";
 const { alignment, buttonType, width } = ATTRIBUTES;
 
-interface TileSelectArgs {
-  checked: boolean;
-  description: string;
-  disabled: boolean;
-  heading: string;
+interface TileSelectStoryArgs
+  extends Pick<
+    TileSelect,
+    | "checked"
+    | "description"
+    | "disabled"
+    | "heading"
+    | "icon"
+    | "inputAlignment"
+    | "inputEnabled"
+    | "type"
+    | "value"
+    | "width"
+  > {
   hidden: boolean;
-  icon: string;
-  inputAlignment: string;
-  inputEnabled: boolean;
-  type: string;
-  value: string;
-  width: string;
 }
 
 export default {
@@ -53,7 +57,7 @@ export default {
   },
 };
 
-export const simple = (args: TileSelectArgs): string => html`
+export const simple = (args: TileSelectStoryArgs): string => html`
   <calcite-tile-select
     ${boolean("checked", args.checked)}
     description="${args.description}"
diff --git a/packages/calcite-components/src/components/tile/tile.stories.ts b/packages/calcite-components/src/components/tile/tile.stories.ts
index c1ce87e0dbc..f8cc31fb3e9 100644
--- a/packages/calcite-components/src/components/tile/tile.stories.ts
+++ b/packages/calcite-components/src/components/tile/tile.stories.ts
@@ -3,16 +3,12 @@ import { boolean, createBreakpointStories, modesDarkDefault } from "../../../.st
 import { html } from "../../../support/formatting";
 import { placeholderImage } from "../../../.storybook/placeholderImage";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { Tile } from "./tile";
 const { scale } = ATTRIBUTES;
-interface TileArgs {
-  active: boolean;
-  description: string;
-  disabled: boolean;
-  heading: string;
+
+interface TileStoryArgs
+  extends Pick<Tile, "active" | "description" | "disabled" | "heading" | "href" | "icon" | "scale"> {
   hidden: boolean;
-  href: string;
-  icon: string;
-  scale: string;
 }
 
 export default {
@@ -40,7 +36,7 @@ export default {
   },
 };
 
-export const simple = (args: TileArgs): string => html`
+export const simple = (args: TileStoryArgs): string => html`
   <calcite-tile
     ${boolean("active", args.active)}
     description="${args.description}"
diff --git a/packages/calcite-components/src/components/time-picker/time-picker.stories.ts b/packages/calcite-components/src/components/time-picker/time-picker.stories.ts
index 43ca7a64769..3c5968ebbf7 100644
--- a/packages/calcite-components/src/components/time-picker/time-picker.stories.ts
+++ b/packages/calcite-components/src/components/time-picker/time-picker.stories.ts
@@ -3,18 +3,15 @@ import { html } from "../../../support/formatting";
 import { defaultMenuPlacement, menuPlacements } from "../../utils/floating-ui";
 import { locales, numberingSystems, defaultLocale, defaultNumberingSystem } from "../../utils/locale";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { TimePicker } from "./time-picker";
 const { scale } = ATTRIBUTES;
 
-interface TimePicker {
+interface TimePickerStoryArgs extends Pick<TimePicker, "numberingSystem" | "scale" | "step" | "value"> {
   disabled: boolean;
   hidden: boolean;
   lang: string;
   name: string;
-  numberingSystem: string;
   placement: string;
-  scale: string;
-  step: number;
-  value: string;
 }
 
 export default {
@@ -50,7 +47,7 @@ export default {
   },
 };
 
-export const simple = (args: TimePicker): string => html`
+export const simple = (args: TimePickerStoryArgs): string => html`
   <calcite-time-picker
     ${boolean("disabled", args.disabled)}
     ${boolean("hidden", args.hidden)}
diff --git a/packages/calcite-components/src/components/tip-manager/tip-manager.stories.ts b/packages/calcite-components/src/components/tip-manager/tip-manager.stories.ts
index 030ecfc7824..7ce602722ea 100644
--- a/packages/calcite-components/src/components/tip-manager/tip-manager.stories.ts
+++ b/packages/calcite-components/src/components/tip-manager/tip-manager.stories.ts
@@ -1,10 +1,9 @@
 import { placeholderImage } from "../../../.storybook/placeholderImage";
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
+import { TipManager } from "./tip-manager";
 
-interface TipManagerArgs {
-  closed: boolean;
-}
+type TipManagerStoryArgs = Pick<TipManager, "closed">;
 
 export default {
   title: "Components/Tips/Tip Manager",
@@ -57,7 +56,7 @@ const tipContent = html`
   </calcite-tip>
 `;
 
-export const simple = (args: TipManagerArgs): string => html`
+export const simple = (args: TipManagerStoryArgs): string => html`
   <calcite-tip-manager ${boolean("closed", args.closed)}> ${tipContent} </calcite-tip-manager>
 `;
 
diff --git a/packages/calcite-components/src/components/tip/tip.stories.ts b/packages/calcite-components/src/components/tip/tip.stories.ts
index 96f80b3298e..d24ee5e349f 100644
--- a/packages/calcite-components/src/components/tip/tip.stories.ts
+++ b/packages/calcite-components/src/components/tip/tip.stories.ts
@@ -1,12 +1,9 @@
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { placeholderImage } from "../../../.storybook/placeholderImage";
 import { html } from "../../../support/formatting";
+import { Tip } from "./tip";
 
-interface TipArgs {
-  closed: boolean;
-  closeDisabled: boolean;
-  heading: string;
-}
+type TipStoryArgs = Pick<Tip, "closed" | "closeDisabled" | "heading">;
 
 export default {
   title: "Components/Tips/Tip",
@@ -22,7 +19,7 @@ const htmlContent = `<img slot="thumbnail" src="${placeholderImage({
   height: 600,
 })}" alt="This is an image." />Enim nascetur erat faucibus ornare varius arcu fames bibendum habitant felis elit ante. Nibh morbi massa curae; leo semper diam aenean congue taciti eu porta. Varius faucibus ridiculus donec. Montes sit ligula purus porta ante lacus habitasse libero cubilia purus! In quis congue arcu maecenas felis cursus pellentesque nascetur porta donec non. Quisque, rutrum ligula pharetra justo habitasse facilisis rutrum neque. Magnis nostra nec nulla dictumst taciti consectetur. Non porttitor tempor orci dictumst magna porta vitae. </div><a href="http://www.esri.com">This is a link</a>.`;
 
-export const simple = (args: TipArgs): string => html`
+export const simple = (args: TipStoryArgs): string => html`
   <calcite-tip
     ${boolean("closed", args.closed)}
     ${boolean("close-disabled", args.closeDisabled)}
diff --git a/packages/calcite-components/src/components/tooltip/tooltip.stories.ts b/packages/calcite-components/src/components/tooltip/tooltip.stories.ts
index 2ba73b2cec1..f967aedfc96 100644
--- a/packages/calcite-components/src/components/tooltip/tooltip.stories.ts
+++ b/packages/calcite-components/src/components/tooltip/tooltip.stories.ts
@@ -1,16 +1,17 @@
 import { html } from "../../../support/formatting";
 import { placements } from "../../utils/floating-ui";
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
+import { Tooltip } from "./tooltip";
 
 const contentHTML = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua`;
 
 const referenceElementHTML = `Ut enim ad minim veniam, quis <calcite-button appearance="transparent" kind="neutral" id="reference-element">nostrud exercitation</calcite-button> ullamco laboris nisi ut aliquip ex ea commodo consequat.`;
 
-interface TooltipArgs {
+interface TooltipStoryArgs {
   placements: string;
   offsetDistance: number;
   offsetSkidding: number;
-  open: boolean;
+  open: Tooltip["open"];
 }
 
 export default {
@@ -29,7 +30,7 @@ export default {
   },
 };
 
-export const simple = (args: TooltipArgs): string => html`
+export const simple = (args: TooltipStoryArgs): string => html`
   <div style="width: 400px;">
     ${referenceElementHTML}
     <calcite-tooltip
diff --git a/packages/calcite-components/src/components/tree/tree.stories.ts b/packages/calcite-components/src/components/tree/tree.stories.ts
index 135b61543f0..eb3f7637fc5 100644
--- a/packages/calcite-components/src/components/tree/tree.stories.ts
+++ b/packages/calcite-components/src/components/tree/tree.stories.ts
@@ -1,13 +1,10 @@
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { Tree } from "./tree";
 const { selectionMode, scale } = ATTRIBUTES;
 
-interface TreeArgs {
-  lines: boolean;
-  selectionMode: string;
-  scale: string;
-}
+type TreeStoryArgs = Pick<Tree, "lines" | "selectionMode" | "scale">;
 
 export default {
   title: "Components/Tree",
@@ -182,7 +179,7 @@ const slottedSmallActionsEnd = html`
   </calcite-tree-item>
 `;
 
-export const simple = (args: TreeArgs): string => html`
+export const simple = (args: TreeStoryArgs): string => html`
   <calcite-tree ${boolean("lines", args.lines)} selection-mode="${args.selectionMode}" scale="${args.scale}">
     ${treeItems}
   </calcite-tree>
diff --git a/packages/calcite-components/src/components/value-list/value-list.stories.ts b/packages/calcite-components/src/components/value-list/value-list.stories.ts
index e471587bf44..4124e96c516 100644
--- a/packages/calcite-components/src/components/value-list/value-list.stories.ts
+++ b/packages/calcite-components/src/components/value-list/value-list.stories.ts
@@ -1,14 +1,11 @@
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
+import { ValueList } from "./value-list";
 
-interface ValueListArgs {
-  disabled: boolean;
-  dragEnabled: boolean;
-  filterEnabled: boolean;
-  loading: boolean;
-  multiple: boolean;
-  selectionFollowsFocus: boolean;
-}
+type ValueListStoryArgs = Pick<
+  ValueList,
+  "disabled" | "dragEnabled" | "filterEnabled" | "loading" | "multiple" | "selectionFollowsFocus"
+>;
 
 export default {
   title: "Components/Value List",
@@ -26,7 +23,7 @@ const action = html`
   <calcite-action slot="actions-end" label="click-me" appearance="outline" scale="s" icon="ellipsis"></calcite-action>
 `;
 
-export const simple = (args: ValueListArgs): string => html`
+export const simple = (args: ValueListStoryArgs): string => html`
   <calcite-value-list
     ${boolean("disabled", args.disabled)}
     ${boolean("drag-enabled", args.dragEnabled)}