diff --git a/package-lock.json b/package-lock.json
index e47f475cf5b..2369a74a49f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,6 +43,7 @@
         "@types/estree": "1.0.5",
         "@types/jest": "29.5.12",
         "@types/jest-axe": "3.5.9",
+        "@types/jsdom": "21.1.6",
         "@types/lodash-es": "4.17.12",
         "@types/node": "^20.12.7",
         "@types/prettier": "2.7.3",
@@ -2954,9 +2955,9 @@
       "dev": true
     },
     "node_modules/@cspell/dict-golang": {
-      "version": "6.0.8",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-golang/-/dict-golang-6.0.8.tgz",
-      "integrity": "sha512-1OwJNMU0oVISaNjaoQJatgYszFlNESzXPOg1f5/9V0+nL+R08nzDpZi4cWwPaHr8pIBtXzEoHL0dGY+IuoLFtQ==",
+      "version": "6.0.6",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-golang/-/dict-golang-6.0.6.tgz",
+      "integrity": "sha512-NHgTtd8l8h4EEnBVb/WXlIh/b5CfX3xkaqCXUjOHBx9ToIFk7NdPnXbevwsBHIxy2QDdr7mi0f9RWtGyW4xYWg==",
       "dev": true
     },
     "node_modules/@cspell/dict-haskell": {
@@ -3089,9 +3090,9 @@
       "dev": true
     },
     "node_modules/@cspell/dict-software-terms": {
-      "version": "3.3.22",
-      "resolved": "https://registry.npmjs.org/@cspell/dict-software-terms/-/dict-software-terms-3.3.22.tgz",
-      "integrity": "sha512-uEtaN0xeDbGh88QX+SSvvBNvZahk3ZXBRnfgHWoppUF6WGtg1oLtuLWO6fGGtwRE4klXvSWP8rA2ixzAbWvYqw==",
+      "version": "3.3.20",
+      "resolved": "https://registry.npmjs.org/@cspell/dict-software-terms/-/dict-software-terms-3.3.20.tgz",
+      "integrity": "sha512-KmPwCxYWEu7SGyT/0m/n6i6R4ZgxbmN3XcerzA6Z629Wm5iZTVfJaMWqDK2RKAyBawS7OMfxGz0W/wYU4FhJlA==",
       "dev": true
     },
     "node_modules/@cspell/dict-sql": {
@@ -8948,6 +8949,17 @@
       "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
       "dev": true
     },
+    "node_modules/@types/jsdom": {
+      "version": "21.1.6",
+      "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-21.1.6.tgz",
+      "integrity": "sha512-/7kkMsC+/kMs7gAYmmBR9P0vGTnOoLhQhyhQJSlXGI5bzTHp6xdo0TtKWQAsz6pmSAeVqKSbqeyP6hytqr9FDw==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*",
+        "@types/tough-cookie": "*",
+        "parse5": "^7.0.0"
+      }
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -9175,6 +9187,12 @@
       "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==",
       "dev": true
     },
+    "node_modules/@types/tough-cookie": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz",
+      "integrity": "sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==",
+      "dev": true
+    },
     "node_modules/@types/trusted-types": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
@@ -11460,9 +11478,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001626",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001626.tgz",
-      "integrity": "sha512-JRW7kAH8PFJzoPCJhLSHgDgKg5348hsQ68aqb+slnzuB5QFERv846oA/mRChmlLAOdEDeOkRn3ynb1gSFnjt3w==",
+      "version": "1.0.30001620",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001620.tgz",
+      "integrity": "sha512-WJvYsOjd1/BYUY6SNGUosK9DUidBPDTnOARHp3fSmFO1ekdxaY6nKRttEVrfMmYi80ctS0kz1wiWmm14fVc3ew==",
       "dev": true,
       "funding": [
         {
@@ -14551,9 +14569,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.775",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.775.tgz",
-      "integrity": "sha512-JpOfl1aNAiZ88wFzjPczTLwYIoPIsij8S9/XQH9lqMpiJOf23kxea68B8wje4f68t4rOIq4Bh+vP4I65njiJBw==",
+      "version": "1.4.774",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.774.tgz",
+      "integrity": "sha512-132O1XCd7zcTkzS3FgkAzKmnBuNJjK8WjcTtNuoylj7MYbqw5eXehjQ5OK91g0zm7OTKIPeaAG4CPoRfD9M1Mg==",
       "dev": true
     },
     "node_modules/emittery": {
@@ -36253,7 +36271,7 @@
     },
     "packages/calcite-components": {
       "name": "@esri/calcite-components",
-      "version": "2.9.1-next.1",
+      "version": "2.10.0-next.1",
       "license": "SEE LICENSE.md",
       "dependencies": {
         "@floating-ui/dom": "1.6.5",
@@ -37504,10 +37522,10 @@
     },
     "packages/calcite-components-angular/projects/component-library": {
       "name": "@esri/calcite-components-angular",
-      "version": "2.9.1-next.1",
+      "version": "2.10.0-next.1",
       "license": "SEE LICENSE.md",
       "dependencies": {
-        "@esri/calcite-components": "^2.9.1-next.1",
+        "@esri/calcite-components": "^2.10.0-next.1",
         "tslib": "2.6.2"
       },
       "peerDependencies": {
@@ -37517,10 +37535,10 @@
     },
     "packages/calcite-components-react": {
       "name": "@esri/calcite-components-react",
-      "version": "2.9.1-next.1",
+      "version": "2.10.0-next.1",
       "license": "SEE LICENSE.md",
       "dependencies": {
-        "@esri/calcite-components": "^2.9.1-next.1"
+        "@esri/calcite-components": "^2.10.0-next.1"
       },
       "peerDependencies": {
         "react": ">=16.7",
diff --git a/package.json b/package.json
index de159561418..45164384239 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
     "@types/estree": "1.0.5",
     "@types/jest": "29.5.12",
     "@types/jest-axe": "3.5.9",
+    "@types/jsdom": "21.1.6",
     "@types/lodash-es": "4.17.12",
     "@types/node": "^20.12.7",
     "@types/prettier": "2.7.3",
diff --git a/packages/calcite-components-angular/projects/component-library/CHANGELOG.md b/packages/calcite-components-angular/projects/component-library/CHANGELOG.md
index ec28835607e..f100fc7097f 100644
--- a/packages/calcite-components-angular/projects/component-library/CHANGELOG.md
+++ b/packages/calcite-components-angular/projects/component-library/CHANGELOG.md
@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.10.0-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.10.0-next.0...@esri/calcite-components-angular@2.10.0-next.1) (2024-06-06)
+
+**Note:** Version bump only for package @esri/calcite-components-angular
+
+## [2.10.0-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.9.1-next.3...@esri/calcite-components-angular@2.10.0-next.0) (2024-06-06)
+
+**Note:** Version bump only for package @esri/calcite-components-angular
+
+## [2.9.1-next.3](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.9.1-next.2...@esri/calcite-components-angular@2.9.1-next.3) (2024-06-05)
+
+**Note:** Version bump only for package @esri/calcite-components-angular
+
+## [2.9.1-next.2](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.9.1-next.1...@esri/calcite-components-angular@2.9.1-next.2) (2024-06-04)
+
+**Note:** Version bump only for package @esri/calcite-components-angular
+
 ## [2.9.1-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.9.1-next.0...@esri/calcite-components-angular@2.9.1-next.1) (2024-06-04)
 
 **Note:** Version bump only for package @esri/calcite-components-angular
diff --git a/packages/calcite-components-angular/projects/component-library/package.json b/packages/calcite-components-angular/projects/component-library/package.json
index f0774f1e2f1..c13bd859453 100644
--- a/packages/calcite-components-angular/projects/component-library/package.json
+++ b/packages/calcite-components-angular/projects/component-library/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components-angular",
-  "version": "2.9.1-next.1",
+  "version": "2.10.0-next.1",
   "description": "A set of Angular components that wrap Esri's Calcite Components.",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "bugs": {
@@ -20,7 +20,7 @@
     "dist"
   ],
   "dependencies": {
-    "@esri/calcite-components": "^2.9.1-next.1",
+    "@esri/calcite-components": "^2.10.0-next.1",
     "tslib": "2.6.2"
   },
   "peerDependencies": {
diff --git a/packages/calcite-components-react/CHANGELOG.md b/packages/calcite-components-react/CHANGELOG.md
index 7fcf5a6db5b..1106056e815 100644
--- a/packages/calcite-components-react/CHANGELOG.md
+++ b/packages/calcite-components-react/CHANGELOG.md
@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.10.0-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.10.0-next.0...@esri/calcite-components-react@2.10.0-next.1) (2024-06-06)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
+## [2.10.0-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.9.1-next.3...@esri/calcite-components-react@2.10.0-next.0) (2024-06-06)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
+## [2.9.1-next.3](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.9.1-next.2...@esri/calcite-components-react@2.9.1-next.3) (2024-06-05)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
+## [2.9.1-next.2](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.9.1-next.1...@esri/calcite-components-react@2.9.1-next.2) (2024-06-04)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
 ## [2.9.1-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.9.1-next.0...@esri/calcite-components-react@2.9.1-next.1) (2024-06-04)
 
 **Note:** Version bump only for package @esri/calcite-components-react
diff --git a/packages/calcite-components-react/package.json b/packages/calcite-components-react/package.json
index 63b6ab59382..fb7397bca33 100644
--- a/packages/calcite-components-react/package.json
+++ b/packages/calcite-components-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components-react",
-  "version": "2.9.1-next.1",
+  "version": "2.10.0-next.1",
   "description": "A set of React components that wrap calcite components",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "repository": {
@@ -28,7 +28,7 @@
     "tsc": "tsc"
   },
   "dependencies": {
-    "@esri/calcite-components": "^2.9.1-next.1"
+    "@esri/calcite-components": "^2.10.0-next.1"
   },
   "peerDependencies": {
     "react": ">=16.7",
diff --git a/packages/calcite-components/.storybook/interfaces.ts b/packages/calcite-components/.storybook/interfaces.ts
deleted file mode 100644
index 594ef97e87e..00000000000
--- a/packages/calcite-components/.storybook/interfaces.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-/* Note: using `.d.ts` file extension will exclude it from the output build */
-export type Alignment = "start" | "center" | "end";
-export type Appearance = "solid" | "outline" | "outline-fill" | "transparent";
-export type Columns = 1 | 2 | 3 | 4 | 5 | 6;
-export type FlipContext = "both" | "start" | "end";
-export type Kind = "brand" | "danger" | "info" | "inverse" | "neutral" | "warning" | "success";
-export type Layout =
-  | "horizontal"
-  | "vertical"
-  | "grid"
-  | "inline"
-  | "center"
-  | "auto"
-  | "fixed"
-  | "none"
-  | "horizontal-single";
-export type LogicalFlowPosition = "inline-start" | "inline-end" | "block-start" | "block-end";
-export type ModeClass = "calcite-mode-light" | "calcite-mode-dark" | "calcite-mode-auto";
-export type ModeName = "light" | "dark" | "auto";
-export type Position = "start" | "end" | "top" | "bottom";
-export type SelectionAppearance = "icon" | "border";
-export type SelectionMode =
-  | "single"
-  | "none"
-  | "children"
-  | "single-persist"
-  | "multichildren"
-  | "ancestors"
-  | "multiple";
-export type Scale = "s" | "m" | "l";
-export type Status = "invalid" | "valid" | "idle";
-export type Width = "auto" | "half" | "full";
-export type ArrowType = "inline" | "edge" | "none";
-export type DisplayMode = "dock" | "float" | "overlay";
-export type ToggleDisplay = "button" | "switch";
-export type Dir = "ltr" | "rtl";
-export type ButtonType = "radio" | "checkbox";
-export type InteractionMode = "interactive" | "static";
-export type IconType = "chevron" | "caret" | "ellipsis" | "overflow";
-export type DeterminateType = "determinate" | "indeterminate";
-export type FillType = "single" | "range";
-export type LabelType = "percent" | "units";
-export type ClickType = "click" | "hover";
-export type CollapseDirection = "down" | "up";
-export type TextType =
-  | "text"
-  | "textarea"
-  | "email"
-  | "password"
-  | "tel"
-  | "number"
-  | "search"
-  | "file"
-  | "time"
-  | "date";
-export type Mode = "offset" | "name";
diff --git a/packages/calcite-components/.storybook/resources.ts b/packages/calcite-components/.storybook/resources.ts
index 6d2a0e4f25b..c2f14090c76 100644
--- a/packages/calcite-components/.storybook/resources.ts
+++ b/packages/calcite-components/.storybook/resources.ts
@@ -8,23 +8,23 @@ import {
   Kind,
   Width,
   SelectionMode,
-  ArrowType,
-  DisplayMode,
-  ToggleDisplay,
   Layout,
   Dir,
-  ButtonType,
-  InteractionMode,
   IconType,
-  DeterminateType,
-  FillType,
-  LabelType,
-  ClickType,
   CollapseDirection,
-  TextType,
-  Mode,
   SelectionAppearance,
-} from "./interfaces";
+} from "../../calcite-components/src/components/interfaces.ts";
+import { ArrowType } from "../src/components/carousel/interfaces.ts";
+import { BlockSectionToggleDisplay } from "../src/components/block-section/interfaces.ts";
+import { TileSelectType } from "../src/components/tile-select/interfaces.ts";
+import { TableInteractionMode } from "../src/components/table/interfaces.ts";
+import { DeterminateType } from "../src/components/loader/interfaces.ts";
+import { MeterFillType, MeterLabelType } from "../src/components/meter/interfaces.ts";
+import { DropdownClickType } from "../src/components/dropdown/interfaces.ts";
+import { TextType } from "../src/components/input/interfaces.ts";
+import { TimeZoneMode } from "../src/components/input-time-zone/interfaces.ts";
+import { DisplayMode } from "../src/components/sheet/interfaces.ts";
+import { ShellDisplayMode } from "../src/components/shell/interfaces.ts";
 
 interface AttributeMetadata<T> {
   values: T[];
@@ -43,20 +43,21 @@ interface CommonAttributes {
   selectionMode: AttributeMetadata<SelectionMode>;
   arrowType: AttributeMetadata<ArrowType>;
   displayMode: AttributeMetadata<DisplayMode>;
-  toggleDisplay: AttributeMetadata<ToggleDisplay>;
+  toggleDisplay: AttributeMetadata<BlockSectionToggleDisplay>;
   layout: AttributeMetadata<Layout>;
   dir: AttributeMetadata<Dir>;
-  buttonType: AttributeMetadata<ButtonType>;
-  interactionMode: AttributeMetadata<InteractionMode>;
+  buttonType: AttributeMetadata<TileSelectType>;
+  interactionMode: AttributeMetadata<TableInteractionMode>;
   iconType: AttributeMetadata<IconType>;
   determinateType: AttributeMetadata<DeterminateType>;
-  fillType: AttributeMetadata<FillType>;
-  labelType: AttributeMetadata<LabelType>;
-  clickType: AttributeMetadata<ClickType>;
+  fillType: AttributeMetadata<MeterFillType>;
+  labelType: AttributeMetadata<MeterLabelType>;
+  clickType: AttributeMetadata<DropdownClickType>;
   collapseDirection: AttributeMetadata<CollapseDirection>;
   textType: AttributeMetadata<TextType>;
-  mode: AttributeMetadata<Mode>;
+  mode: AttributeMetadata<TimeZoneMode>;
   selectionAppearance: AttributeMetadata<SelectionAppearance>;
+  shellDisplayMode: AttributeMetadata<ShellDisplayMode>;
 }
 
 const logicalFlowPositionOptions: LogicalFlowPosition[] = ["inline-start", "inline-end", "block-start", "block-end"];
@@ -77,8 +78,8 @@ const selectionModeOptions: SelectionMode[] = [
   "multiple",
 ];
 const arrowTypeOptions: ArrowType[] = ["inline", "edge", "none"];
-const displayModeOptions: DisplayMode[] = ["dock", "float", "overlay"];
-const toggleDisplayOptions: ToggleDisplay[] = ["button", "switch"];
+const displayModeOptions: DisplayMode[] = ["float", "overlay"];
+const toggleDisplayOptions: BlockSectionToggleDisplay[] = ["button", "switch"];
 const layoutOptions: Layout[] = [
   "horizontal",
   "vertical",
@@ -91,13 +92,13 @@ const layoutOptions: Layout[] = [
   "horizontal-single",
 ];
 const dirOptions: Dir[] = ["ltr", "rtl"];
-const buttonTypeOptions: ButtonType[] = ["radio", "checkbox"];
-const interactionModeOptions: InteractionMode[] = ["interactive", "static"];
-const iconTypeOptions: IconType[] = ["chevron", "caret", "ellipsis", "overflow"];
+const buttonTypeOptions: TileSelectType[] = ["radio", "checkbox"];
+const interactionModeOptions: TableInteractionMode[] = ["interactive", "static"];
+const iconTypeOptions: IconType[] = ["chevron", "caret", "ellipsis", "overflow", "plus-minus"];
 const determinateTypeOptions: DeterminateType[] = ["determinate", "indeterminate"];
-const fillTypeOptions: FillType[] = ["single", "range"];
-const labelTypeOptions: LabelType[] = ["percent", "units"];
-const clickTypeOptions: ClickType[] = ["click", "hover"];
+const fillTypeOptions: MeterFillType[] = ["single", "range"];
+const labelTypeOptions: MeterLabelType[] = ["percent", "units"];
+const clickTypeOptions: DropdownClickType[] = ["click", "hover"];
 const collapseDirectionOptions: CollapseDirection[] = ["down", "up"];
 const textTypeOptions: TextType[] = [
   "text",
@@ -111,8 +112,9 @@ const textTypeOptions: TextType[] = [
   "time",
   "date",
 ];
-const modeOptions: Mode[] = ["offset", "name"];
+const modeOptions: TimeZoneMode[] = ["offset", "name"];
 const selectionAppearanceOptions: SelectionAppearance[] = ["icon", "border"];
+const shellDisplayModeOptions: ShellDisplayMode[] = ["dock", "float", "overlay"];
 
 export const ATTRIBUTES: CommonAttributes = {
   alignment: {
@@ -215,4 +217,8 @@ export const ATTRIBUTES: CommonAttributes = {
     values: selectionAppearanceOptions,
     defaultValue: selectionAppearanceOptions[0],
   },
+  shellDisplayMode: {
+    values: shellDisplayModeOptions,
+    defaultValue: shellDisplayModeOptions[0],
+  },
 };
diff --git a/packages/calcite-components/CHANGELOG.md b/packages/calcite-components/CHANGELOG.md
index 2e893d0ebc5..9f19fa2f54f 100644
--- a/packages/calcite-components/CHANGELOG.md
+++ b/packages/calcite-components/CHANGELOG.md
@@ -3,6 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.10.0-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.10.0-next.0...@esri/calcite-components@2.10.0-next.1) (2024-06-06)
+
+### Features
+
+- **action-bar, action-pad:** add expandLabel and collapseLabel to messages ([#9497](https://github.com/Esri/calcite-design-system/issues/9497)) ([12407eb](https://github.com/Esri/calcite-design-system/commit/12407eba686c7da11c5463b9e6dcbd74fdefb7cc)), closes [#5539](https://github.com/Esri/calcite-design-system/issues/5539)
+
+### Bug Fixes
+
+- **block:** add accessible label for slotted controls ([#9502](https://github.com/Esri/calcite-design-system/issues/9502)) ([a9054d5](https://github.com/Esri/calcite-design-system/commit/a9054d5e496cff038553ac349829b28ff5941a4f)), closes [#8037](https://github.com/Esri/calcite-design-system/issues/8037)
+
+## [2.10.0-next.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.9.1-next.3...@esri/calcite-components@2.10.0-next.0) (2024-06-06)
+
+### Features
+
+- **action-menu, combobox, dropdown, input-date-picker, popover:** allow logical placements for flipPlacements property. [#8825](https://github.com/Esri/calcite-design-system/issues/8825) ([#9490](https://github.com/Esri/calcite-design-system/issues/9490)) ([45aabaa](https://github.com/Esri/calcite-design-system/commit/45aabaa27ab50523ccdc5df07019cc8ed7dfb2b0))
+
+### Bug Fixes
+
+- **list-item:** hide nested list items by default ([#9474](https://github.com/Esri/calcite-design-system/issues/9474)) ([fb06ef9](https://github.com/Esri/calcite-design-system/commit/fb06ef96c7bf719afa9a46c8eff09f0945c6f3cd)), closes [#9400](https://github.com/Esri/calcite-design-system/issues/9400)
+- **popover:** correct border radius on close button ([#9485](https://github.com/Esri/calcite-design-system/issues/9485)) ([d0fba56](https://github.com/Esri/calcite-design-system/commit/d0fba5655ef730e012586f3be6ccb82f674308a7)), closes [#8208](https://github.com/Esri/calcite-design-system/issues/8208)
+
+## [2.9.1-next.3](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.9.1-next.2...@esri/calcite-components@2.9.1-next.3) (2024-06-05)
+
+### Bug Fixes
+
+- **alert:** pause auto-close alert when link focused ([#9503](https://github.com/Esri/calcite-design-system/issues/9503)) ([fa9a829](https://github.com/Esri/calcite-design-system/commit/fa9a8296d2757d8b58d6bb79d2d308d096507b49)), closes [#5960](https://github.com/Esri/calcite-design-system/issues/5960)
+
+## [2.9.1-next.2](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.9.1-next.1...@esri/calcite-components@2.9.1-next.2) (2024-06-04)
+
+### Bug Fixes
+
+- **block-section:** restore block toggling when clicking on the header switch ([#9472](https://github.com/Esri/calcite-design-system/issues/9472)) ([519a11c](https://github.com/Esri/calcite-design-system/commit/519a11c6d85383e7d7bab95a9c52330864606602)), closes [#9454](https://github.com/Esri/calcite-design-system/issues/9454) [#9194](https://github.com/Esri/calcite-design-system/issues/9194)
+
 ## [2.9.1-next.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.9.1-next.0...@esri/calcite-components@2.9.1-next.1) (2024-06-04)
 
 ### Bug Fixes
diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json
index 9e54e66245f..5eae7d88196 100644
--- a/packages/calcite-components/package.json
+++ b/packages/calcite-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "2.9.1-next.1",
+  "version": "2.10.0-next.1",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",
diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index b0ea2d37b6c..af91005d058 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -5,12 +5,13 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { Alignment, Appearance, Columns, FlipContext, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces";
+import { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces";
 import { RequestedItem } from "./components/accordion/interfaces";
 import { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
 import { ActionMessages } from "./components/action/assets/action/t9n";
-import { EffectivePlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui";
+import { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui";
 import { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n";
+import { Columns } from "./components/action-group/interfaces";
 import { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n";
 import { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n";
 import { AlertDuration, Sync } from "./components/alert/interfaces";
@@ -61,7 +62,7 @@ import { ListItemMessages } from "./components/list-item/assets/list-item/t9n";
 import { MenuMessages } from "./components/menu/assets/menu/t9n";
 import { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n";
 import { MenuItemCustomEvent } from "./components/menu-item/interfaces";
-import { MeterLabelType } from "./components/meter/interfaces";
+import { MeterFillType, MeterLabelType } from "./components/meter/interfaces";
 import { ModalMessages } from "./components/modal/assets/modal/t9n";
 import { NoticeMessages } from "./components/notice/assets/notice/t9n";
 import { PaginationMessages } from "./components/pagination/assets/pagination/t9n";
@@ -95,12 +96,13 @@ import { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/
 import { TreeItemSelectDetail } from "./components/tree-item/interfaces";
 import { ValueListMessages } from "./components/value-list/assets/value-list/t9n";
 import { ListItemAndHandle } from "./components/value-list-item/interfaces";
-export { Alignment, Appearance, Columns, FlipContext, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces";
+export { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces";
 export { RequestedItem } from "./components/accordion/interfaces";
 export { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
 export { ActionMessages } from "./components/action/assets/action/t9n";
-export { EffectivePlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui";
+export { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui";
 export { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n";
+export { Columns } from "./components/action-group/interfaces";
 export { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n";
 export { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n";
 export { AlertDuration, Sync } from "./components/alert/interfaces";
@@ -151,7 +153,7 @@ export { ListItemMessages } from "./components/list-item/assets/list-item/t9n";
 export { MenuMessages } from "./components/menu/assets/menu/t9n";
 export { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n";
 export { MenuItemCustomEvent } from "./components/menu-item/interfaces";
-export { MeterLabelType } from "./components/meter/interfaces";
+export { MeterFillType, MeterLabelType } from "./components/meter/interfaces";
 export { ModalMessages } from "./components/modal/assets/modal/t9n";
 export { NoticeMessages } from "./components/notice/assets/notice/t9n";
 export { PaginationMessages } from "./components/pagination/assets/pagination/t9n";
@@ -194,11 +196,11 @@ export namespace Components {
         /**
           * Specifies the placement of the icon in the header.
          */
-        "iconPosition": Position;
+        "iconPosition": Extract<"start" | "end", Position>;
         /**
           * Specifies the type of the icon in the header.
          */
-        "iconType": "chevron" | "caret" | "plus-minus";
+        "iconType": Extract<"chevron" | "caret" | "plus-minus", IconType>;
         /**
           * Specifies the size of the component.
          */
@@ -239,7 +241,7 @@ export namespace Components {
         /**
           * Specifies the placement of the icon in the header inherited from the `calcite-accordion`.
          */
-        "iconPosition": Position;
+        "iconPosition": Extract<"start" | "end", Position>;
         /**
           * Specifies an icon to display at the start of the component.
          */
@@ -247,7 +249,7 @@ export namespace Components {
         /**
           * Specifies the type of the icon in the header inherited from the `calcite-accordion`.
          */
-        "iconType": "chevron" | "caret" | "plus-minus";
+        "iconType": Extract<"chevron" | "caret" | "plus-minus", IconType>;
         /**
           * Specifies the size of the component inherited from the `calcite-accordion`.
          */
@@ -363,7 +365,7 @@ export namespace Components {
         /**
           * Arranges the component depending on the element's `dir` property.
          */
-        "position": Position;
+        "position": Extract<"start" | "end", Position>;
         /**
           * Specifies the size of the expand `calcite-action`.
          */
@@ -390,7 +392,7 @@ export namespace Components {
           * Indicates the layout of the component.
           * @deprecated Use the `layout` property on the component's parent instead.
          */
-        "layout": Layout;
+        "layout": Extract<"horizontal" | "vertical" | "grid", Layout>;
         /**
           * When `true`, the `calcite-action-menu` is open.
          */
@@ -428,7 +430,7 @@ export namespace Components {
         /**
           * Defines the available placements that can be used when a flip occurs.
          */
-        "flipPlacements": EffectivePlacement[];
+        "flipPlacements": FlipPlacement[];
         /**
           * Specifies the text string for the component.
          */
@@ -470,7 +472,7 @@ export namespace Components {
         /**
           * Indicates the layout of the component.
          */
-        "layout": Layout;
+        "layout": Extract<"horizontal" | "vertical" | "grid", Layout>;
         /**
           * Use this property to override individual strings used by the component.
          */
@@ -486,7 +488,7 @@ export namespace Components {
         /**
           * Arranges the component depending on the element's `dir` property.
          */
-        "position": Position;
+        "position": Extract<"start" | "end", Position>;
         /**
           * Specifies the size of the expand `calcite-action`.
          */
@@ -1229,7 +1231,7 @@ export namespace Components {
         /**
           * Defines the available placements that can be used when a flip occurs.
          */
-        "flipPlacements": EffectivePlacement[];
+        "flipPlacements": FlipPlacement[];
         /**
           * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
@@ -1627,7 +1629,7 @@ export namespace Components {
         /**
           * Defines the available placements that can be used when a flip occurs.
          */
-        "flipPlacements": EffectivePlacement[];
+        "flipPlacements": FlipPlacement[];
         /**
           * Specifies the maximum number of `calcite-dropdown-item`s to display before showing a scroller. Value must be greater than `0`, and does not include `groupTitle`'s from `calcite-dropdown-group`.
          */
@@ -1858,7 +1860,7 @@ export namespace Components {
         /**
           * Specifies the direction of the collapse.
          */
-        "collapseDirection": "down" | "up";
+        "collapseDirection": CollapseDirection;
         /**
           * When `true`, hides the component's content area.
          */
@@ -2249,7 +2251,7 @@ export namespace Components {
         /**
           * Defines the available placements that can be used when a flip occurs.
          */
-        "flipPlacements": EffectivePlacement[];
+        "flipPlacements": FlipPlacement[];
         /**
           * When `true`, prevents focus trapping.
          */
@@ -3252,7 +3254,7 @@ export namespace Components {
         /**
           * Specifies the component's display, where `"single"` displays a single color and `"range"` displays a range of colors based on provided `low`, `high`, `min` or `max` values.
          */
-        "fillType": "single" | "range";
+        "fillType": MeterFillType;
         /**
           * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
@@ -3630,7 +3632,7 @@ export namespace Components {
         /**
           * Specifies the direction of the collapse.
          */
-        "collapseDirection": "down" | "up";
+        "collapseDirection": CollapseDirection;
         /**
           * When `true`, hides the component's content area.
          */
@@ -3836,7 +3838,7 @@ export namespace Components {
         /**
           * Defines the available placements that can be used when a flip occurs.
          */
-        "flipPlacements": EffectivePlacement[];
+        "flipPlacements": FlipPlacement[];
         /**
           * When `true`, prevents focus trapping.
          */
@@ -3993,7 +3995,7 @@ export namespace Components {
         /**
           * Defines the layout of the component.
          */
-        "layout": Layout;
+        "layout": Extract<"horizontal" | "vertical" | "grid", Layout>;
         /**
           * Specifies the name of the component on form submission. Must be unique to other component instances.
          */
@@ -4185,7 +4187,7 @@ export namespace Components {
         /**
           * Defines the layout of the component inherited from parent `calcite-segmented-control`, defaults to `horizontal`.
          */
-        "layout": Layout;
+        "layout": Extract<"horizontal" | "vertical" | "grid", Layout>;
         /**
           * Specifies the size of the component inherited from the `calcite-segmented-control`, defaults to `m`.
          */
@@ -4333,7 +4335,7 @@ export namespace Components {
         /**
           * Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`).
          */
-        "position": Position;
+        "position": Extract<"start" | "end", Position>;
     }
     interface CalciteShellPanel {
         /**
@@ -4373,7 +4375,7 @@ export namespace Components {
         /**
           * Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`).
          */
-        "position": Position;
+        "position": Extract<"start" | "end", Position>;
         /**
           * When `true` and `displayMode` is not `float`, the component's content area is resizable.
          */
@@ -4530,7 +4532,7 @@ export namespace Components {
         /**
           * Indicates the horizontal or vertical orientation of the component.
          */
-        "layout": Layout;
+        "layout": Extract<"horizontal" | "vertical" | "grid", Layout>;
         /**
           * When true, content is waiting to be loaded. This state shows a busy indicator.
          */
@@ -5252,7 +5254,7 @@ export namespace Components {
         /**
           * Defines the layout of the component.  Use `"horizontal"` for rows, and `"vertical"` for a single column.
          */
-        "layout": Exclude<Layout, "grid">;
+        "layout": Extract<Layout, "horizontal" | "vertical">;
         /**
           * Specifies the size of the component.
          */
@@ -5293,7 +5295,7 @@ export namespace Components {
         /**
           * Defines the layout of the component.  Use `"horizontal"` for rows, and `"vertical"` for a single column.
          */
-        "layout": Exclude<Layout, "grid">;
+        "layout": Extract<Layout, "horizontal" | "vertical">;
         /**
           * Specifies the size of the component.
          */
@@ -7901,11 +7903,11 @@ declare namespace LocalJSX {
         /**
           * Specifies the placement of the icon in the header.
          */
-        "iconPosition"?: Position;
+        "iconPosition"?: Extract<"start" | "end", Position>;
         /**
           * Specifies the type of the icon in the header.
          */
-        "iconType"?: "chevron" | "caret" | "plus-minus";
+        "iconType"?: Extract<"chevron" | "caret" | "plus-minus", IconType>;
         "onCalciteInternalAccordionChange"?: (event: CalciteAccordionCustomEvent<RequestedItem>) => void;
         /**
           * Specifies the size of the component.
@@ -7947,7 +7949,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the placement of the icon in the header inherited from the `calcite-accordion`.
          */
-        "iconPosition"?: Position;
+        "iconPosition"?: Extract<"start" | "end", Position>;
         /**
           * Specifies an icon to display at the start of the component.
          */
@@ -7955,7 +7957,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the type of the icon in the header inherited from the `calcite-accordion`.
          */
-        "iconType"?: "chevron" | "caret" | "plus-minus";
+        "iconType"?: Extract<"chevron" | "caret" | "plus-minus", IconType>;
         "onCalciteInternalAccordionItemClose"?: (event: CalciteAccordionItemCustomEvent<void>) => void;
         "onCalciteInternalAccordionItemSelect"?: (event: CalciteAccordionItemCustomEvent<RequestedItem1>) => void;
         /**
@@ -8065,7 +8067,7 @@ declare namespace LocalJSX {
         /**
           * Arranges the component depending on the element's `dir` property.
          */
-        "position"?: Position;
+        "position"?: Extract<"start" | "end", Position>;
         /**
           * Specifies the size of the expand `calcite-action`.
          */
@@ -8088,7 +8090,7 @@ declare namespace LocalJSX {
           * Indicates the layout of the component.
           * @deprecated Use the `layout` property on the component's parent instead.
          */
-        "layout"?: Layout;
+        "layout"?: Extract<"horizontal" | "vertical" | "grid", Layout>;
         /**
           * When `true`, the `calcite-action-menu` is open.
          */
@@ -8122,7 +8124,7 @@ declare namespace LocalJSX {
         /**
           * Defines the available placements that can be used when a flip occurs.
          */
-        "flipPlacements"?: EffectivePlacement[];
+        "flipPlacements"?: FlipPlacement[];
         /**
           * Specifies the text string for the component.
          */
@@ -8164,7 +8166,7 @@ declare namespace LocalJSX {
         /**
           * Indicates the layout of the component.
          */
-        "layout"?: Layout;
+        "layout"?: Extract<"horizontal" | "vertical" | "grid", Layout>;
         /**
           * Use this property to override individual strings used by the component.
          */
@@ -8184,7 +8186,7 @@ declare namespace LocalJSX {
         /**
           * Arranges the component depending on the element's `dir` property.
          */
-        "position"?: Position;
+        "position"?: Extract<"start" | "end", Position>;
         /**
           * Specifies the size of the expand `calcite-action`.
          */
@@ -8984,7 +8986,7 @@ declare namespace LocalJSX {
         /**
           * Defines the available placements that can be used when a flip occurs.
          */
-        "flipPlacements"?: EffectivePlacement[];
+        "flipPlacements"?: FlipPlacement[];
         /**
           * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
@@ -9425,7 +9427,7 @@ declare namespace LocalJSX {
         /**
           * Defines the available placements that can be used when a flip occurs.
          */
-        "flipPlacements"?: EffectivePlacement[];
+        "flipPlacements"?: FlipPlacement[];
         /**
           * Specifies the maximum number of `calcite-dropdown-item`s to display before showing a scroller. Value must be greater than `0`, and does not include `groupTitle`'s from `calcite-dropdown-group`.
          */
@@ -9653,7 +9655,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the direction of the collapse.
          */
-        "collapseDirection"?: "down" | "up";
+        "collapseDirection"?: CollapseDirection;
         /**
           * When `true`, hides the component's content area.
          */
@@ -10063,7 +10065,7 @@ declare namespace LocalJSX {
         /**
           * Defines the available placements that can be used when a flip occurs.
          */
-        "flipPlacements"?: EffectivePlacement[];
+        "flipPlacements"?: FlipPlacement[];
         /**
           * When `true`, prevents focus trapping.
          */
@@ -11153,7 +11155,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the component's display, where `"single"` displays a single color and `"range"` displays a range of colors based on provided `low`, `high`, `min` or `max` values.
          */
-        "fillType"?: "single" | "range";
+        "fillType"?: MeterFillType;
         /**
           * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
@@ -11526,7 +11528,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the direction of the collapse.
          */
-        "collapseDirection"?: "down" | "up";
+        "collapseDirection"?: CollapseDirection;
         /**
           * When `true`, hides the component's content area.
          */
@@ -11747,7 +11749,7 @@ declare namespace LocalJSX {
         /**
           * Defines the available placements that can be used when a flip occurs.
          */
-        "flipPlacements"?: EffectivePlacement[];
+        "flipPlacements"?: FlipPlacement[];
         /**
           * When `true`, prevents focus trapping.
          */
@@ -11918,7 +11920,7 @@ declare namespace LocalJSX {
         /**
           * Defines the layout of the component.
          */
-        "layout"?: Layout;
+        "layout"?: Extract<"horizontal" | "vertical" | "grid", Layout>;
         /**
           * Specifies the name of the component on form submission. Must be unique to other component instances.
          */
@@ -12110,7 +12112,7 @@ declare namespace LocalJSX {
         /**
           * Defines the layout of the component inherited from parent `calcite-segmented-control`, defaults to `horizontal`.
          */
-        "layout"?: Layout;
+        "layout"?: Extract<"horizontal" | "vertical" | "grid", Layout>;
         /**
           * Fires when the item has been selected.
          */
@@ -12270,7 +12272,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`).
          */
-        "position"?: Position;
+        "position"?: Extract<"start" | "end", Position>;
     }
     interface CalciteShellPanel {
         /**
@@ -12312,7 +12314,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`).
          */
-        "position"?: Position;
+        "position"?: Extract<"start" | "end", Position>;
         /**
           * When `true` and `displayMode` is not `float`, the component's content area is resizable.
          */
@@ -12473,7 +12475,7 @@ declare namespace LocalJSX {
         /**
           * Indicates the horizontal or vertical orientation of the component.
          */
-        "layout"?: Layout;
+        "layout"?: Extract<"horizontal" | "vertical" | "grid", Layout>;
         /**
           * When true, content is waiting to be loaded. This state shows a busy indicator.
          */
@@ -13210,7 +13212,7 @@ declare namespace LocalJSX {
         /**
           * Defines the layout of the component.  Use `"horizontal"` for rows, and `"vertical"` for a single column.
          */
-        "layout"?: Exclude<Layout, "grid">;
+        "layout"?: Extract<Layout, "horizontal" | "vertical">;
         "onCalciteInternalTileKeyEvent"?: (event: CalciteTileCustomEvent<KeyboardEvent>) => void;
         /**
           * Fires when the selected state of the component changes.
@@ -13252,7 +13254,7 @@ declare namespace LocalJSX {
         /**
           * Defines the layout of the component.  Use `"horizontal"` for rows, and `"vertical"` for a single column.
          */
-        "layout"?: Exclude<Layout, "grid">;
+        "layout"?: Extract<Layout, "horizontal" | "vertical">;
         /**
           * Fires when the component's selection changes.
          */
diff --git a/packages/calcite-components/src/components/accordion-item/accordion-item.tsx b/packages/calcite-components/src/components/accordion-item/accordion-item.tsx
index 3336c3868da..973e9374f3a 100644
--- a/packages/calcite-components/src/components/accordion-item/accordion-item.tsx
+++ b/packages/calcite-components/src/components/accordion-item/accordion-item.tsx
@@ -23,8 +23,13 @@ import {
 } from "../../utils/dom";
 import { CSS_UTILITY } from "../../utils/resources";
 import { getIconScale } from "../../utils/component";
-import { FlipContext, Position, Scale, SelectionMode } from "../interfaces";
-import { componentFocusable } from "../../utils/component";
+import { FlipContext, Position, Scale, SelectionMode, IconType } from "../interfaces";
+import {
+  componentFocusable,
+  LoadableComponent,
+  setComponentLoaded,
+  setUpLoadableComponent,
+} from "../../utils/loadable";
 import { SLOTS, CSS, IDS } from "./resources";
 import { RequestedItem } from "./interfaces";
 
@@ -38,7 +43,7 @@ import { RequestedItem } from "./interfaces";
   styleUrl: "accordion-item.scss",
   shadow: true,
 })
-export class AccordionItem implements ConditionalSlotComponent {
+export class AccordionItem implements ConditionalSlotComponent, LoadableComponent {
   //--------------------------------------------------------------------------
   //
   //  Public Properties
@@ -68,13 +73,13 @@ export class AccordionItem implements ConditionalSlotComponent {
    *
    * @internal
    */
-  @Prop() iconPosition: Position;
+  @Prop() iconPosition: Extract<"start" | "end", Position>;
 
   /** Specifies the type of the icon in the header inherited from the `calcite-accordion`.
    *
    * @internal
    */
-  @Prop() iconType: "chevron" | "caret" | "plus-minus";
+  @Prop() iconType: Extract<"chevron" | "caret" | "plus-minus", IconType>;
 
   /**
    * The containing `accordion` element.
@@ -116,6 +121,14 @@ export class AccordionItem implements ConditionalSlotComponent {
     connectConditionalSlotComponent(this);
   }
 
+  componentWillLoad(): void {
+    setUpLoadableComponent(this);
+  }
+
+  componentDidLoad(): void {
+    setComponentLoaded(this);
+  }
+
   disconnectedCallback(): void {
     disconnectConditionalSlotComponent(this);
   }
@@ -300,7 +313,7 @@ export class AccordionItem implements ConditionalSlotComponent {
   /** Sets focus on the component. */
   @Method()
   async setFocus(): Promise<void> {
-    await componentFocusable(this.el);
+    await componentFocusable(this);
     this.headerEl.focus();
   }
 
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/accordion/accordion.tsx b/packages/calcite-components/src/components/accordion/accordion.tsx
index 8fb506ca557..847c944d861 100644
--- a/packages/calcite-components/src/components/accordion/accordion.tsx
+++ b/packages/calcite-components/src/components/accordion/accordion.tsx
@@ -9,7 +9,7 @@ import {
   VNode,
   Watch,
 } from "@stencil/core";
-import { Appearance, Position, Scale, SelectionMode } from "../interfaces";
+import { Appearance, Position, IconType, Scale, SelectionMode } from "../interfaces";
 import { createObserver } from "../../utils/observers";
 import { RequestedItem } from "./interfaces";
 /**
@@ -31,10 +31,11 @@ export class Accordion {
   @Prop({ reflect: true }) appearance: Extract<"solid" | "transparent", Appearance> = "solid";
 
   /** Specifies the placement of the icon in the header. */
-  @Prop({ reflect: true }) iconPosition: Position = "end";
+  @Prop({ reflect: true }) iconPosition: Extract<"start" | "end", Position> = "end";
 
   /** Specifies the type of the icon in the header. */
-  @Prop({ reflect: true }) iconType: "chevron" | "caret" | "plus-minus" = "chevron";
+  @Prop({ reflect: true }) iconType: Extract<"chevron" | "caret" | "plus-minus", IconType> =
+    "chevron";
 
   /** Specifies the size of the component. */
   @Prop({ reflect: true }) scale: Scale = "m";
diff --git a/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts b/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts
index b11afdf4a08..5ab4d2a3967 100755
--- a/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts
+++ b/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts
@@ -75,6 +75,37 @@ describe("calcite-action-bar", () => {
     );
   });
 
+  describe("messageOverrides", () => {
+    it("should honor expandLabel and collapseLabel", async () => {
+      const page = await newE2EPage();
+
+      await page.setContent("<calcite-action-bar></calcite-action-bar>");
+      await page.waitForChanges();
+
+      const actionBar = await page.find("calcite-action-bar");
+
+      const expandLabel = "Open me up";
+      const collapseLabel = "Close me down";
+
+      actionBar.setProperty("messageOverrides", {
+        expandLabel,
+        collapseLabel,
+      });
+      await page.waitForChanges();
+
+      const expandAction = await page.find("calcite-action-bar >>> #expand-toggle");
+
+      expect(expandAction).not.toBeNull();
+
+      expect(await expandAction.getProperty("label")).toBe(expandLabel);
+
+      actionBar.setProperty("expanded", true);
+      await page.waitForChanges();
+
+      expect(await expandAction.getProperty("label")).toBe(collapseLabel);
+    });
+  });
+
   describe("expand functionality", () => {
     it("should not modify actions within an action-menu", async () => {
       const page = await newE2EPage({
@@ -109,7 +140,7 @@ describe("calcite-action-bar", () => {
 
       await page.waitForChanges();
 
-      const expandAction = await page.find("calcite-action-bar >>> calcite-action");
+      const expandAction = await page.find("calcite-action-bar >>> #expand-toggle");
 
       expect(expandAction).not.toBeNull();
     });
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-bar/action-bar.tsx b/packages/calcite-components/src/components/action-bar/action-bar.tsx
index f2b3866436f..21e37492fb7 100755
--- a/packages/calcite-components/src/components/action-bar/action-bar.tsx
+++ b/packages/calcite-components/src/components/action-bar/action-bar.tsx
@@ -137,7 +137,7 @@ export class ActionBar
   /**
    * Arranges the component depending on the element's `dir` property.
    */
-  @Prop({ reflect: true }) position: Position;
+  @Prop({ reflect: true }) position: Extract<"start" | "end", Position>;
 
   /**
    * Specifies the size of the expand `calcite-action`.
@@ -407,8 +407,10 @@ export class ActionBar
 
     const expandToggleNode = !expandDisabled ? (
       <ExpandToggle
+        collapseLabel={messages.collapseLabel}
         collapseText={messages.collapse}
         el={el}
+        expandLabel={messages.expandLabel}
         expandText={messages.expand}
         expanded={expanded}
         position={position}
diff --git a/packages/calcite-components/src/components/action-bar/assets/action-bar/t9n/messages.json b/packages/calcite-components/src/components/action-bar/assets/action-bar/t9n/messages.json
index 8c3375a072c..431e0c99cad 100644
--- a/packages/calcite-components/src/components/action-bar/assets/action-bar/t9n/messages.json
+++ b/packages/calcite-components/src/components/action-bar/assets/action-bar/t9n/messages.json
@@ -1,4 +1,6 @@
 {
   "expand": "Expand",
-  "collapse": "Collapse"
+  "collapse": "Collapse",
+  "expandLabel": "Expand",
+  "collapseLabel": "Collapse"
 }
diff --git a/packages/calcite-components/src/components/action-bar/assets/action-bar/t9n/messages_en.json b/packages/calcite-components/src/components/action-bar/assets/action-bar/t9n/messages_en.json
index 8c3375a072c..431e0c99cad 100644
--- a/packages/calcite-components/src/components/action-bar/assets/action-bar/t9n/messages_en.json
+++ b/packages/calcite-components/src/components/action-bar/assets/action-bar/t9n/messages_en.json
@@ -1,4 +1,6 @@
 {
   "expand": "Expand",
-  "collapse": "Collapse"
+  "collapse": "Collapse",
+  "expandLabel": "Expand",
+  "collapseLabel": "Collapse"
 }
diff --git a/packages/calcite-components/src/components/action-group/action-group.tsx b/packages/calcite-components/src/components/action-group/action-group.tsx
index 84d6b524fb4..4d9f309e002 100755
--- a/packages/calcite-components/src/components/action-group/action-group.tsx
+++ b/packages/calcite-components/src/components/action-group/action-group.tsx
@@ -20,9 +20,10 @@ import {
   updateMessages,
 } from "../../utils/t9n";
 import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources";
-import { Columns, Layout, Scale } from "../interfaces";
+import { Layout, Scale } from "../interfaces";
 import { OverlayPositioning } from "../../utils/floating-ui";
 import { slotChangeHasAssignedElement } from "../../utils/dom";
+import { Columns } from "./interfaces";
 import { ActionGroupMessages } from "./assets/action-group/t9n";
 import { ICONS, SLOTS, CSS } from "./resources";
 
@@ -68,7 +69,7 @@ export class ActionGroup
    *
    * @deprecated Use the `layout` property on the component's parent instead.
    */
-  @Prop({ reflect: true }) layout: Layout = "vertical";
+  @Prop({ reflect: true }) layout: Extract<"horizontal" | "vertical" | "grid", Layout> = "vertical";
 
   /**
    * Indicates number of columns.
diff --git a/packages/calcite-components/src/components/action-group/interfaces.ts b/packages/calcite-components/src/components/action-group/interfaces.ts
new file mode 100644
index 00000000000..0acab8fea32
--- /dev/null
+++ b/packages/calcite-components/src/components/action-group/interfaces.ts
@@ -0,0 +1 @@
+export type Columns = 1 | 2 | 3 | 4 | 5 | 6;
diff --git a/packages/calcite-components/src/components/action-menu/action-menu.tsx b/packages/calcite-components/src/components/action-menu/action-menu.tsx
index 9aef5401634..c49e17b093d 100755
--- a/packages/calcite-components/src/components/action-menu/action-menu.tsx
+++ b/packages/calcite-components/src/components/action-menu/action-menu.tsx
@@ -12,7 +12,7 @@ import {
 import { Fragment, VNode } from "@stencil/core/internal";
 import { getRoundRobinIndex } from "../../utils/array";
 import { focusElement, toAriaBoolean } from "../../utils/dom";
-import { EffectivePlacement, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui";
+import { FlipPlacement, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui";
 import { guid } from "../../utils/guid";
 import { isActivationKey } from "../../utils/key";
 import {
@@ -82,7 +82,7 @@ export class ActionMenu implements LoadableComponent {
   /**
    * Defines the available placements that can be used when a flip occurs.
    */
-  @Prop() flipPlacements: EffectivePlacement[];
+  @Prop() flipPlacements: FlipPlacement[];
 
   /**
    *  Specifies the text string for the component.
diff --git a/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts b/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts
index ce870bee16b..f8cd30eabcd 100755
--- a/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts
+++ b/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts
@@ -77,6 +77,37 @@ describe("calcite-action-pad", () => {
     );
   });
 
+  describe("messageOverrides", () => {
+    it("should honor expandLabel and collapseLabel", async () => {
+      const page = await newE2EPage();
+
+      await page.setContent("<calcite-action-pad></calcite-action-pad>");
+      await page.waitForChanges();
+
+      const actionPad = await page.find("calcite-action-pad");
+
+      const expandLabel = "Open me up";
+      const collapseLabel = "Close me down";
+
+      actionPad.setProperty("messageOverrides", {
+        expandLabel,
+        collapseLabel,
+      });
+      await page.waitForChanges();
+
+      const expandAction = await page.find("calcite-action-pad >>> #expand-toggle");
+
+      expect(expandAction).not.toBeNull();
+
+      expect(await expandAction.getProperty("label")).toBe(expandLabel);
+
+      actionPad.setProperty("expanded", true);
+      await page.waitForChanges();
+
+      expect(await expandAction.getProperty("label")).toBe(collapseLabel);
+    });
+  });
+
   describe("expand functionality", () => {
     it("should be expandable by default", async () => {
       const page = await newE2EPage();
@@ -85,7 +116,7 @@ describe("calcite-action-pad", () => {
 
       await page.waitForChanges();
 
-      const expandAction = await page.find("calcite-action-pad >>> calcite-action");
+      const expandAction = await page.find("calcite-action-pad >>> #expand-toggle");
 
       expect(expandAction).not.toBeNull();
     });
@@ -97,7 +128,7 @@ describe("calcite-action-pad", () => {
 
       await page.waitForChanges();
 
-      const expandAction = await page.find("calcite-action-pad >>> calcite-action");
+      const expandAction = await page.find("calcite-action-pad >>> #expand-toggle");
 
       expect(expandAction).toBeNull();
     });
@@ -187,7 +218,7 @@ describe("calcite-action-pad", () => {
       </calcite-action-pad>`,
     );
 
-    const expandAction = await page.find("calcite-action-pad >>> calcite-action");
+    const expandAction = await page.find("calcite-action-pad >>> #expand-toggle");
     const action = await page.find("calcite-action");
     const actionPad = await page.find("calcite-action-pad");
     const group = await page.find("calcite-action-group");
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-pad/action-pad.tsx b/packages/calcite-components/src/components/action-pad/action-pad.tsx
index e677f2489dc..dae5b7570ba 100755
--- a/packages/calcite-components/src/components/action-pad/action-pad.tsx
+++ b/packages/calcite-components/src/components/action-pad/action-pad.tsx
@@ -82,7 +82,7 @@ export class ActionPad
   /**
    * Indicates the layout of the component.
    */
-  @Prop({ reflect: true }) layout: Layout = "vertical";
+  @Prop({ reflect: true }) layout: Extract<"horizontal" | "vertical" | "grid", Layout> = "vertical";
 
   @Watch("layout")
   layoutHandler(): void {
@@ -92,7 +92,7 @@ export class ActionPad
   /**
    * Arranges the component depending on the element's `dir` property.
    */
-  @Prop({ reflect: true }) position: Position;
+  @Prop({ reflect: true }) position: Extract<"start" | "end", Position>;
 
   /**
    * Specifies the size of the expand `calcite-action`.
@@ -281,8 +281,10 @@ export class ActionPad
 
     const expandToggleNode = !expandDisabled ? (
       <ExpandToggle
+        collapseLabel={messages.collapseLabel}
         collapseText={messages.collapse}
         el={el}
+        expandLabel={messages.expandLabel}
         expandText={messages.expand}
         expanded={expanded}
         position={position}
diff --git a/packages/calcite-components/src/components/action-pad/assets/action-pad/t9n/messages.json b/packages/calcite-components/src/components/action-pad/assets/action-pad/t9n/messages.json
index 8c3375a072c..431e0c99cad 100644
--- a/packages/calcite-components/src/components/action-pad/assets/action-pad/t9n/messages.json
+++ b/packages/calcite-components/src/components/action-pad/assets/action-pad/t9n/messages.json
@@ -1,4 +1,6 @@
 {
   "expand": "Expand",
-  "collapse": "Collapse"
+  "collapse": "Collapse",
+  "expandLabel": "Expand",
+  "collapseLabel": "Collapse"
 }
diff --git a/packages/calcite-components/src/components/action-pad/assets/action-pad/t9n/messages_en.json b/packages/calcite-components/src/components/action-pad/assets/action-pad/t9n/messages_en.json
index 8c3375a072c..431e0c99cad 100644
--- a/packages/calcite-components/src/components/action-pad/assets/action-pad/t9n/messages_en.json
+++ b/packages/calcite-components/src/components/action-pad/assets/action-pad/t9n/messages_en.json
@@ -1,4 +1,6 @@
 {
   "expand": "Expand",
-  "collapse": "Collapse"
+  "collapse": "Collapse",
+  "expandLabel": "Expand",
+  "collapseLabel": "Collapse"
 }
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/alert/alert.e2e.ts b/packages/calcite-components/src/components/alert/alert.e2e.ts
index 63e35eabe69..daa5bc120e1 100644
--- a/packages/calcite-components/src/components/alert/alert.e2e.ts
+++ b/packages/calcite-components/src/components/alert/alert.e2e.ts
@@ -457,6 +457,20 @@ describe("calcite-alert", () => {
       await page.waitForTimeout(DURATIONS.medium + animationDurationInMs);
       await page.waitForSelector("#alert", { visible: false });
     });
+
+    it("pauses on focus and resumes on blur", async () => {
+      await button.click();
+      expect(await alert.isVisible()).toBe(true);
+      expect(await alert.getProperty("autoCloseDuration")).toEqual("medium");
+      expect(playState).toEqual("running");
+      buttonClose = await page.find(`#alert >>> .${CSS.close}`);
+      buttonClose.focus();
+      await page.waitForTimeout(DURATIONS.medium);
+      expect(await alert.isVisible()).toBe(true);
+      await button.focus();
+      await page.waitForTimeout(DURATIONS.medium + animationDurationInMs);
+      await page.waitForSelector("#alert", { visible: false });
+    });
   });
 
   describe("translation support", () => {
diff --git a/packages/calcite-components/src/components/alert/alert.scss b/packages/calcite-components/src/components/alert/alert.scss
index 68c259951b4..17587b14794 100644
--- a/packages/calcite-components/src/components/alert/alert.scss
+++ b/packages/calcite-components/src/components/alert/alert.scss
@@ -293,11 +293,16 @@ $alertDurations:
   :host([auto-close-duration="#{$name}"]) .dismiss-progress:after {
     animation: dismissProgress $duration ease-out;
   }
-  :host(:hover[auto-close-duration="#{$name}"]) .dismiss-progress:after {
+  :host(:hover[auto-close-duration="#{$name}"]) .dismiss-progress:after,
+  :host(:focus[auto-close-duration="#{$name}"]) .dismiss-progress:after {
     animation-play-state: paused;
   }
 }
 
+.container.focused .dismiss-progress:after {
+  animation-play-state: paused;
+}
+
 @keyframes dismissProgress {
   0% {
     @apply w-0 opacity-75;
diff --git a/packages/calcite-components/src/components/alert/alert.tsx b/packages/calcite-components/src/components/alert/alert.tsx
index 0e4b2be7365..366fd9b6a81 100644
--- a/packages/calcite-components/src/components/alert/alert.tsx
+++ b/packages/calcite-components/src/components/alert/alert.tsx
@@ -200,6 +200,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
       }),
     );
     window.clearTimeout(this.autoCloseTimeoutId);
+    this.autoCloseTimeoutId = null;
     window.clearTimeout(this.queueTimeout);
     disconnectLocalized(this);
     disconnectMessages(this);
@@ -226,13 +227,18 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
             [CSS.containerQueued]: queued,
             [`${CSS.container}--${placement}`]: true,
             [CSS.containerSlottedInShell]: this.slottedInShell,
+            [CSS.focused]: this.keyBoardFocus,
           }}
           onPointerEnter={this.autoClose && this.autoCloseTimeoutId ? this.handleMouseOver : null}
-          onPointerLeave={this.autoClose && this.autoCloseTimeoutId ? this.handleMouseLeave : null}
+          onPointerLeave={this.autoClose ? this.handleMouseLeave : null}
           ref={this.setTransitionEl}
         >
           {effectiveIcon && this.renderIcon(effectiveIcon)}
-          <div class={CSS.textContainer}>
+          <div
+            class={CSS.textContainer}
+            onFocusin={this.autoClose && this.autoCloseTimeoutId ? this.handleKeyBoardFocus : null}
+            onFocusout={this.autoClose ? this.handleKeyBoardBlur : null}
+          >
             <slot name={SLOTS.title} />
             <slot name={SLOTS.message} />
             <slot name={SLOTS.link} />
@@ -246,6 +252,18 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
     );
   }
 
+  private handleKeyBoardFocus = (): void => {
+    this.keyBoardFocus = true;
+    this.handleFocus();
+  };
+
+  private handleKeyBoardBlur = (): void => {
+    this.keyBoardFocus = false;
+    if (!this.mouseFocus) {
+      this.handleBlur();
+    }
+  };
+
   private renderCloseButton(): VNode {
     return (
       <button
@@ -253,6 +271,8 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
         class={CSS.close}
         key="close"
         onClick={this.closeAlert}
+        onFocusin={this.autoClose ? this.handleKeyBoardFocus : null}
+        onFocusout={this.autoClose ? this.handleKeyBoardBlur : null}
         ref={(el) => (this.closeButton = el)}
         type="button"
       >
@@ -429,6 +449,8 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
   /** is the alert queued */
   @State() queued = false;
 
+  @State() keyBoardFocus = false;
+
   private autoCloseTimeoutId: number = null;
 
   private closeButton: HTMLButtonElement;
@@ -447,6 +469,8 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
 
   transitionEl: HTMLDivElement;
 
+  mouseFocus: boolean;
+
   //--------------------------------------------------------------------------
   //
   //  Private Methods
@@ -510,12 +534,25 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
   };
 
   private handleMouseOver = (): void => {
+    this.mouseFocus = true;
+    this.handleFocus();
+  };
+
+  private handleMouseLeave = (): void => {
+    this.mouseFocus = false;
+    if (!this.keyBoardFocus) {
+      this.handleBlur();
+    }
+  };
+
+  private handleFocus = (): void => {
     window.clearTimeout(this.autoCloseTimeoutId);
+    this.autoCloseTimeoutId = null;
     this.totalOpenTime = Date.now() - this.initialOpenTime;
     this.lastMouseOverBegin = Date.now();
   };
 
-  private handleMouseLeave = (): void => {
+  private handleBlur = (): void => {
     const hoverDuration = Date.now() - this.lastMouseOverBegin;
     const timeRemaining =
       DURATIONS[this.autoCloseDuration] - this.totalOpenTime + this.totalHoverTime;
diff --git a/packages/calcite-components/src/components/alert/resources.ts b/packages/calcite-components/src/components/alert/resources.ts
index 945fe7015ee..38c9a988058 100644
--- a/packages/calcite-components/src/components/alert/resources.ts
+++ b/packages/calcite-components/src/components/alert/resources.ts
@@ -31,4 +31,5 @@ export const CSS = {
   queueCount: "queue-count",
   queueCountActive: "queue-count--active",
   textContainer: "text-container",
+  focused: "focused",
 };
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-section/block-section.e2e.ts b/packages/calcite-components/src/components/block-section/block-section.e2e.ts
index 25fec736473..0913ae112b9 100644
--- a/packages/calcite-components/src/components/block-section/block-section.e2e.ts
+++ b/packages/calcite-components/src/components/block-section/block-section.e2e.ts
@@ -172,21 +172,38 @@ describe("calcite-block-section", () => {
     const element = await page.find("calcite-block-section");
     const toggleSpy = await element.spyOnEvent("calciteBlockSectionToggle");
     const toggle = await page.find(`calcite-block-section >>> .${CSS.toggle}`);
+    let expectedClickEvents = 1;
 
     expect(toggle.getAttribute("aria-expanded")).toBe("false");
 
     await toggle.click();
 
-    expect(toggleSpy).toHaveReceivedEventTimes(1);
+    expect(toggleSpy).toHaveReceivedEventTimes(expectedClickEvents++);
     expect(await element.getProperty("open")).toBe(true);
     expect(toggle.getAttribute("aria-expanded")).toBe("true");
 
     await toggle.click();
 
-    expect(toggleSpy).toHaveReceivedEventTimes(2);
+    expect(toggleSpy).toHaveReceivedEventTimes(expectedClickEvents++);
     expect(await element.getProperty("open")).toBe(false);
     expect(toggle.getAttribute("aria-expanded")).toBe("false");
 
+    if ((await element.getProperty("toggleDisplay")) === "switch") {
+      const switchToggle = await page.find(`calcite-block-section >>> .${CSS.switch}`);
+
+      await switchToggle.click();
+
+      expect(toggleSpy).toHaveReceivedEventTimes(expectedClickEvents++);
+      expect(await element.getProperty("open")).toBe(true);
+      expect(toggle.getAttribute("aria-expanded")).toBe("true");
+
+      await switchToggle.click();
+
+      expect(toggleSpy).toHaveReceivedEventTimes(expectedClickEvents++);
+      expect(await element.getProperty("open")).toBe(false);
+      expect(toggle.getAttribute("aria-expanded")).toBe("false");
+    }
+
     const keyboardToggleEmitter =
       toggle.tagName === "CALCITE-ACTION"
         ? (
@@ -204,14 +221,14 @@ describe("calcite-block-section", () => {
     await keyboardToggleEmitter.press(" ");
     await page.waitForChanges();
 
-    expect(toggleSpy).toHaveReceivedEventTimes(3);
+    expect(toggleSpy).toHaveReceivedEventTimes(expectedClickEvents++);
     expect(await element.getProperty("open")).toBe(true);
     expect(toggle.getAttribute("aria-expanded")).toBe("true");
 
     await keyboardToggleEmitter.press("Enter");
     await page.waitForChanges();
 
-    expect(toggleSpy).toHaveReceivedEventTimes(4);
+    expect(toggleSpy).toHaveReceivedEventTimes(expectedClickEvents++);
     expect(await element.getProperty("open")).toBe(false);
     expect(toggle.getAttribute("aria-expanded")).toBe("false");
   }
diff --git a/packages/calcite-components/src/components/block-section/block-section.scss b/packages/calcite-components/src/components/block-section/block-section.scss
index 863ae4f77e6..36ebde3e877 100644
--- a/packages/calcite-components/src/components/block-section/block-section.scss
+++ b/packages/calcite-components/src/components/block-section/block-section.scss
@@ -49,12 +49,6 @@
   }
 }
 
-.label {
-  @apply flex items-center justify-center my-1;
-
-  margin-inline-start: var(--calcite-spacing-md);
-}
-
 .section-header__text {
   @apply my-0
     flex-auto;
@@ -81,13 +75,6 @@
       color: var(--calcite-color-text-1);
     }
   }
-
-  .switch {
-    @apply flex items-center;
-
-    inset-block-start: 50%;
-    transform: translate(0, 50%);
-  }
 }
 
 .status-icon {
diff --git a/packages/calcite-components/src/components/block-section/block-section.tsx b/packages/calcite-components/src/components/block-section/block-section.tsx
index 909834bf36f..01de828ae29 100644
--- a/packages/calcite-components/src/components/block-section/block-section.tsx
+++ b/packages/calcite-components/src/components/block-section/block-section.tsx
@@ -14,7 +14,6 @@ import {
 import { focusFirstTabbable, toAriaBoolean } from "../../utils/dom";
 import { isActivationKey } from "../../utils/key";
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
-import { FlipContext } from "../interfaces";
 import {
   connectMessages,
   disconnectMessages,
@@ -22,7 +21,7 @@ import {
   T9nComponent,
   updateMessages,
 } from "../../utils/t9n";
-import { Status } from "../interfaces";
+import { FlipContext, Status } from "../interfaces";
 import {
   componentFocusable,
   LoadableComponent,
@@ -268,11 +267,8 @@ export class BlockSection implements LocalizedComponent, T9nComponent, LoadableC
 
             {this.renderIcon(this.iconEnd)}
             {this.renderStatusIcon()}
-            {/* we use calcite-label to use a simple component that will allow us to prevent keyboard focus by setting tabindex="-1" on the host */}
+            <calcite-switch checked={open} class={CSS.switch} inert label={toggleLabel} scale="s" />
           </div>
-          <calcite-label class={CSS.label} layout="inline" tabIndex={-1}>
-            <calcite-switch checked={open} class={CSS.switch} label={toggleLabel} scale="s" />
-          </calcite-label>
         </div>
       ) : (
         <div
diff --git a/packages/calcite-components/src/components/block-section/resources.ts b/packages/calcite-components/src/components/block-section/resources.ts
index 67509fc607f..9efb94b3684 100644
--- a/packages/calcite-components/src/components/block-section/resources.ts
+++ b/packages/calcite-components/src/components/block-section/resources.ts
@@ -6,11 +6,9 @@ export const IDS = {
 export const CSS = {
   chevronIcon: "chevron-icon",
   content: "content",
-  focusGuard: "focus-guard",
   iconStart: "icon--start",
   iconEnd: "icon--end",
   invalid: "invalid",
-  label: "label",
   sectionHeader: "section-header",
   sectionHeaderText: "section-header__text",
   statusIcon: "status-icon",
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/block/block.tsx b/packages/calcite-components/src/components/block/block.tsx
index ebb30260ed6..73e9fc34a89 100644
--- a/packages/calcite-components/src/components/block/block.tsx
+++ b/packages/calcite-components/src/components/block/block.tsx
@@ -370,7 +370,7 @@ export class Block
           headerContent
         )}
         {hasControl ? (
-          <div class={CSS.controlContainer}>
+          <div aria-labelledby={IDS.header} class={CSS.controlContainer}>
             <slot name={SLOTS.control} />
           </div>
         ) : null}
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/card/card.tsx b/packages/calcite-components/src/components/card/card.tsx
index bcd45987630..265ec7b7b86 100644
--- a/packages/calcite-components/src/components/card/card.tsx
+++ b/packages/calcite-components/src/components/card/card.tsx
@@ -26,8 +26,7 @@ import {
   setComponentLoaded,
   setUpLoadableComponent,
 } from "../../utils/loadable";
-import { LogicalFlowPosition } from "../interfaces";
-import { SelectionMode } from "../interfaces";
+import { LogicalFlowPosition, SelectionMode } from "../interfaces";
 import {
   connectInteractive,
   disconnectInteractive,
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/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx
index 2aa5bc9bb56..4e1a1213b38 100644
--- a/packages/calcite-components/src/components/combobox/combobox.tsx
+++ b/packages/calcite-components/src/components/combobox/combobox.tsx
@@ -20,8 +20,8 @@ import {
   connectFloatingUI,
   defaultMenuPlacement,
   disconnectFloatingUI,
-  EffectivePlacement,
-  filterComputedPlacements,
+  filterValidFlipPlacements,
+  FlipPlacement,
   FloatingCSS,
   FloatingUIComponent,
   LogicalPlacement,
@@ -283,7 +283,7 @@ export class Combobox
   /**
    * Defines the available placements that can be used when a flip occurs.
    */
-  @Prop() flipPlacements: EffectivePlacement[];
+  @Prop() flipPlacements: FlipPlacement[];
 
   /**
    * Made into a prop for testing purposes only
@@ -523,7 +523,7 @@ export class Combobox
 
   placement: LogicalPlacement = defaultMenuPlacement;
 
-  filteredFlipPlacements: EffectivePlacement[];
+  filteredFlipPlacements: FlipPlacement[];
 
   internalValueChangeFlag = false;
 
@@ -629,7 +629,7 @@ export class Combobox
     const { el, flipPlacements } = this;
 
     this.filteredFlipPlacements = flipPlacements
-      ? filterComputedPlacements(flipPlacements, el)
+      ? filterValidFlipPlacements(flipPlacements, el)
       : null;
   };
 
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/dropdown/dropdown.tsx b/packages/calcite-components/src/components/dropdown/dropdown.tsx
index ad0a054680e..54ff3aede9c 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.tsx
+++ b/packages/calcite-components/src/components/dropdown/dropdown.tsx
@@ -16,8 +16,8 @@ import {
   connectFloatingUI,
   defaultMenuPlacement,
   disconnectFloatingUI,
-  EffectivePlacement,
-  filterComputedPlacements,
+  filterValidFlipPlacements,
+  FlipPlacement,
   FloatingCSS,
   FloatingUIComponent,
   MenuPlacement,
@@ -107,7 +107,7 @@ export class Dropdown
   /**
    * Defines the available placements that can be used when a flip occurs.
    */
-  @Prop() flipPlacements: EffectivePlacement[];
+  @Prop() flipPlacements: FlipPlacement[];
 
   @Watch("flipPlacements")
   flipPlacementsHandler(): void {
@@ -421,7 +421,7 @@ export class Dropdown
 
   @Element() el: HTMLCalciteDropdownElement;
 
-  filteredFlipPlacements: EffectivePlacement[];
+  filteredFlipPlacements: FlipPlacement[];
 
   private items: HTMLCalciteDropdownItemElement[] = [];
 
@@ -466,7 +466,7 @@ export class Dropdown
     const { el, flipPlacements } = this;
 
     this.filteredFlipPlacements = flipPlacements
-      ? filterComputedPlacements(flipPlacements, el)
+      ? filterValidFlipPlacements(flipPlacements, el)
       : null;
   };
 
diff --git a/packages/calcite-components/src/components/dropdown/interfaces.ts b/packages/calcite-components/src/components/dropdown/interfaces.ts
index 706431488e5..13f756396b4 100644
--- a/packages/calcite-components/src/components/dropdown/interfaces.ts
+++ b/packages/calcite-components/src/components/dropdown/interfaces.ts
@@ -1,3 +1,5 @@
 export interface ItemKeyboardEvent {
   keyboardEvent: KeyboardEvent;
 }
+
+export type DropdownClickType = "click" | "hover";
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-item/flow-item.tsx b/packages/calcite-components/src/components/flow-item/flow-item.tsx
index 42610188f3e..2ad5c4169a6 100644
--- a/packages/calcite-components/src/components/flow-item/flow-item.tsx
+++ b/packages/calcite-components/src/components/flow-item/flow-item.tsx
@@ -36,6 +36,7 @@ import {
 import { HeadingLevel } from "../functional/Heading";
 import { SLOTS as PANEL_SLOTS } from "../panel/resources";
 import { OverlayPositioning } from "../../utils/floating-ui";
+import { CollapseDirection } from "../interfaces";
 import { FlowItemMessages } from "./assets/flow-item/t9n";
 import { CSS, ICONS, SLOTS } from "./resources";
 
@@ -83,7 +84,7 @@ export class FlowItem
    *
    * @internal
    */
-  @Prop() collapseDirection: "down" | "up" = "down";
+  @Prop() collapseDirection: CollapseDirection = "down";
 
   /**
    * When `true`, the component is collapsible.
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/functional/ExpandToggle.tsx b/packages/calcite-components/src/components/functional/ExpandToggle.tsx
index ca65432abe6..303c9f5d9a2 100644
--- a/packages/calcite-components/src/components/functional/ExpandToggle.tsx
+++ b/packages/calcite-components/src/components/functional/ExpandToggle.tsx
@@ -8,6 +8,8 @@ interface ExpandToggleProps {
   expanded: boolean;
   expandText: string;
   collapseText: string;
+  expandLabel: string;
+  collapseLabel: string;
   el: HTMLElement;
   position: Position;
   tooltip?: HTMLCalciteTooltipElement;
@@ -66,6 +68,8 @@ export const ExpandToggle: FunctionalComponent<ExpandToggleProps> = ({
   expanded,
   expandText,
   collapseText,
+  expandLabel,
+  collapseLabel,
   toggle,
   el,
   position,
@@ -76,6 +80,7 @@ export const ExpandToggle: FunctionalComponent<ExpandToggleProps> = ({
   const rtl = getElementDir(el) === "rtl";
 
   const text = expanded ? collapseText : expandText;
+  const label = expanded ? collapseLabel : expandLabel;
   const icons = [ICONS.chevronsLeft, ICONS.chevronsRight];
 
   if (rtl) {
@@ -89,6 +94,8 @@ export const ExpandToggle: FunctionalComponent<ExpandToggleProps> = ({
   const actionNode = (
     <calcite-action
       icon={expanded ? expandIcon : collapseIcon}
+      id="expand-toggle"
+      label={label}
       onClick={toggle}
       ref={(referenceElement): HTMLCalciteActionElement =>
         setTooltipReference({ tooltip, referenceElement, expanded, ref })
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-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
index 156ac9dd9c5..c18ef55a705 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
@@ -28,10 +28,10 @@ import {
   connectFloatingUI,
   defaultMenuPlacement,
   disconnectFloatingUI,
-  EffectivePlacement,
-  filterComputedPlacements,
+  filterValidFlipPlacements,
   FloatingCSS,
   FloatingUIComponent,
+  FlipPlacement,
   MenuPlacement,
   OverlayPositioning,
   reposition,
@@ -201,7 +201,7 @@ export class InputDatePicker
   /**
    * Defines the available placements that can be used when a flip occurs.
    */
-  @Prop() flipPlacements: EffectivePlacement[];
+  @Prop() flipPlacements: FlipPlacement[];
 
   @Watch("flipPlacements")
   flipPlacementsHandler(): void {
@@ -720,7 +720,7 @@ export class InputDatePicker
 
   private dialogId = `date-picker-dialog--${guid()}`;
 
-  filteredFlipPlacements: EffectivePlacement[];
+  filteredFlipPlacements: FlipPlacement[];
 
   private focusOnOpen = false;
 
@@ -814,7 +814,7 @@ export class InputDatePicker
     const { el, flipPlacements } = this;
 
     this.filteredFlipPlacements = flipPlacements
-      ? filterComputedPlacements(flipPlacements, el)
+      ? filterValidFlipPlacements(flipPlacements, el)
       : null;
   };
 
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/input/interfaces.ts b/packages/calcite-components/src/components/input/interfaces.ts
index f7a8099cea8..3b94416a1c5 100644
--- a/packages/calcite-components/src/components/input/interfaces.ts
+++ b/packages/calcite-components/src/components/input/interfaces.ts
@@ -1,3 +1,14 @@
 export type InputPlacement = "vertical" | "horizontal" | "none";
 export type NumberNudgeDirection = "up" | "down";
 export type SetValueOrigin = "initial" | "connected" | "user" | "reset" | "direct";
+export type TextType =
+  | "text"
+  | "textarea"
+  | "email"
+  | "password"
+  | "tel"
+  | "number"
+  | "search"
+  | "file"
+  | "time"
+  | "date";
diff --git a/packages/calcite-components/src/components/interfaces.ts b/packages/calcite-components/src/components/interfaces.ts
index 32f257ae8f6..bce851b606e 100644
--- a/packages/calcite-components/src/components/interfaces.ts
+++ b/packages/calcite-components/src/components/interfaces.ts
@@ -1,15 +1,23 @@
 /* Note: using `.d.ts` file extension will exclude it from the output build */
 export type Alignment = "start" | "center" | "end";
-export type Appearance = "outline" | "outline-fill" | "solid" | "transparent";
-export type Columns = 1 | 2 | 3 | 4 | 5 | 6;
+export type Appearance = "solid" | "outline" | "outline-fill" | "transparent";
 export type FlipContext = "both" | "start" | "end";
 export type Kind = "brand" | "danger" | "info" | "inverse" | "neutral" | "warning" | "success";
-export type Layout = "horizontal" | "vertical" | "grid";
+export type Layout =
+  | "horizontal"
+  | "vertical"
+  | "grid"
+  | "inline"
+  | "center"
+  | "auto"
+  | "fixed"
+  | "none"
+  | "horizontal-single";
 export type LogicalFlowPosition = "inline-start" | "inline-end" | "block-start" | "block-end";
 export type ModeClass = "calcite-mode-light" | "calcite-mode-dark" | "calcite-mode-auto";
 export type ModeName = "light" | "dark" | "auto";
-export type Position = "start" | "end";
-export type SelectionAppearance = "border" | "icon";
+export type Position = "start" | "end" | "top" | "bottom";
+export type SelectionAppearance = "icon" | "border";
 export type SelectionMode =
   | "single"
   | "none"
@@ -21,3 +29,6 @@ export type SelectionMode =
 export type Scale = "s" | "m" | "l";
 export type Status = "invalid" | "valid" | "idle";
 export type Width = "auto" | "half" | "full";
+export type IconType = "chevron" | "caret" | "ellipsis" | "overflow" | "plus-minus";
+export type CollapseDirection = "down" | "up";
+export type Dir = "ltr" | "rtl";
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-item/list-item.scss b/packages/calcite-components/src/components/list-item/list-item.scss
index 3cf36325352..d183d842738 100755
--- a/packages/calcite-components/src/components/list-item/list-item.scss
+++ b/packages/calcite-components/src/components/list-item/list-item.scss
@@ -14,16 +14,6 @@
 
 @include disabled();
 
-.indent {
-  @apply flex
-    flex-col
-    border-solid
-    border-0
-    border-color-3;
-
-  margin-inline-start: var(--calcite-list-item-spacing-indent, theme("spacing.6"));
-}
-
 .container {
   @apply bg-foreground-1
   box-border
@@ -62,11 +52,16 @@
 }
 
 .nested-container {
-  @apply flex flex-col;
+  @apply hidden flex-col
+    border-solid
+    border-0
+    border-color-3;
+
+  margin-inline-start: var(--calcite-list-item-spacing-indent, theme("spacing.6"));
 }
 
-.nested-container--hidden {
-  @apply hidden;
+.nested-container--open {
+  @apply flex;
 }
 
 .content-container {
diff --git a/packages/calcite-components/src/components/list-item/list-item.tsx b/packages/calcite-components/src/components/list-item/list-item.tsx
index f2a88a3857e..bc8bf02e23f 100644
--- a/packages/calcite-components/src/components/list-item/list-item.tsx
+++ b/packages/calcite-components/src/components/list-item/list-item.tsx
@@ -585,7 +585,7 @@ export class ListItem
       <div
         class={{
           [CSS.nestedContainer]: true,
-          [CSS.nestedContainerHidden]: this.openable && !this.open,
+          [CSS.nestedContainerOpen]: this.openable && this.open,
         }}
       >
         <slot
@@ -701,7 +701,7 @@ export class ListItem
             </tr>
             {this.renderContentBottom()}
           </div>
-          <div class={CSS.indent}>{this.renderDefaultContainer()}</div>
+          {this.renderDefaultContainer()}
         </InteractiveContainer>
       </Host>
     );
diff --git a/packages/calcite-components/src/components/list-item/resources.ts b/packages/calcite-components/src/components/list-item/resources.ts
index a51d1b84885..6257d95a488 100644
--- a/packages/calcite-components/src/components/list-item/resources.ts
+++ b/packages/calcite-components/src/components/list-item/resources.ts
@@ -2,7 +2,6 @@ export const CSS = {
   wrapper: "wrapper",
   wrapperBordered: "wrapper--bordered",
   container: "container",
-  indent: "indent",
   containerHover: "container--hover",
   containerBorder: "container--border",
   containerBorderSelected: "container--border-selected",
@@ -11,7 +10,7 @@ export const CSS = {
   contentContainerSelectable: "content-container--selectable",
   contentContainerHasCenterContent: "content-container--has-center-content",
   nestedContainer: "nested-container",
-  nestedContainerHidden: "nested-container--hidden",
+  nestedContainerOpen: "nested-container--open",
   content: "content",
   customContent: "custom-content",
   actionsStart: "actions-start",
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/interfaces.ts b/packages/calcite-components/src/components/loader/interfaces.ts
new file mode 100644
index 00000000000..8683e770da6
--- /dev/null
+++ b/packages/calcite-components/src/components/loader/interfaces.ts
@@ -0,0 +1 @@
+export type DeterminateType = "determinate" | "indeterminate";
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/interfaces.ts b/packages/calcite-components/src/components/meter/interfaces.ts
index 9a0b6e4eeb4..0ab6bb0ffbc 100644
--- a/packages/calcite-components/src/components/meter/interfaces.ts
+++ b/packages/calcite-components/src/components/meter/interfaces.ts
@@ -1 +1,2 @@
 export type MeterLabelType = "percent" | "units";
+export type MeterFillType = "single" | "range";
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/meter/meter.tsx b/packages/calcite-components/src/components/meter/meter.tsx
index 45a227ce82d..11b044c5872 100644
--- a/packages/calcite-components/src/components/meter/meter.tsx
+++ b/packages/calcite-components/src/components/meter/meter.tsx
@@ -23,7 +23,7 @@ import {
 import { intersects } from "../../utils/dom";
 import { createObserver } from "../../utils/observers";
 import { CSS } from "./resources";
-import { MeterLabelType } from "./interfaces";
+import { MeterFillType, MeterLabelType } from "./interfaces";
 
 @Component({
   tag: "calcite-meter",
@@ -45,7 +45,7 @@ export class Meter implements FormComponent, LoadableComponent, LocalizedCompone
   @Prop({ reflect: true }) disabled = false;
 
   /** Specifies the component's display, where `"single"` displays a single color and `"range"` displays a range of colors based on provided `low`, `high`, `min` or `max` values. */
-  @Prop({ reflect: true }) fillType: "single" | "range" = "range";
+  @Prop({ reflect: true }) fillType: MeterFillType = "range";
 
   /**
    * The `id` of the form that will be associated with the component.
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/panel/panel.tsx b/packages/calcite-components/src/components/panel/panel.tsx
index afd1b94c21a..5c3416a2332 100644
--- a/packages/calcite-components/src/components/panel/panel.tsx
+++ b/packages/calcite-components/src/components/panel/panel.tsx
@@ -42,6 +42,7 @@ import {
   updateMessages,
 } from "../../utils/t9n";
 import { OverlayPositioning } from "../../utils/floating-ui";
+import { CollapseDirection } from "../interfaces";
 import { PanelMessages } from "./assets/panel/t9n";
 import { CSS, ICONS, SLOTS } from "./resources";
 
@@ -94,7 +95,7 @@ export class Panel
    *
    * @internal
    */
-  @Prop() collapseDirection: "down" | "up" = "down";
+  @Prop() collapseDirection: CollapseDirection = "down";
 
   /**
    * When `true`, the component is collapsible.
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.scss b/packages/calcite-components/src/components/popover/popover.scss
index 56a721d6bc1..227cf5087c0 100644
--- a/packages/calcite-components/src/components/popover/popover.scss
+++ b/packages/calcite-components/src/components/popover/popover.scss
@@ -109,6 +109,10 @@
   border-end-end-radius: theme("borderRadius.DEFAULT");
 }
 
+.has-header .close-button-container {
+  border-end-end-radius: none;
+}
+
 ::slotted(calcite-panel),
 ::slotted(calcite-flow) {
   @apply h-full;
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/popover/popover.tsx b/packages/calcite-components/src/components/popover/popover.tsx
index c34fba1339a..03df59e725b 100644
--- a/packages/calcite-components/src/components/popover/popover.tsx
+++ b/packages/calcite-components/src/components/popover/popover.tsx
@@ -16,8 +16,8 @@ import {
   connectFloatingUI,
   defaultOffsetDistance,
   disconnectFloatingUI,
-  EffectivePlacement,
-  filterComputedPlacements,
+  filterValidFlipPlacements,
+  FlipPlacement,
   FloatingCSS,
   FloatingLayout,
   FloatingUIComponent,
@@ -121,7 +121,7 @@ export class Popover
   /**
    * Defines the available placements that can be used when a flip occurs.
    */
-  @Prop() flipPlacements: EffectivePlacement[];
+  @Prop() flipPlacements: FlipPlacement[];
 
   @Watch("flipPlacements")
   flipPlacementsHandler(): void {
@@ -253,7 +253,7 @@ export class Popover
     this.updateFocusTrapElements(),
   );
 
-  filteredFlipPlacements: EffectivePlacement[];
+  filteredFlipPlacements: FlipPlacement[];
 
   @State() effectiveLocale = "";
 
@@ -409,7 +409,7 @@ export class Popover
     const { el, flipPlacements } = this;
 
     this.filteredFlipPlacements = flipPlacements
-      ? filterComputedPlacements(flipPlacements, el)
+      ? filterValidFlipPlacements(flipPlacements, el)
       : null;
   };
 
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-group/radio-button-group.tsx b/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx
index a94b5c5c3a4..1738ecaaee4 100644
--- a/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx
+++ b/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx
@@ -58,7 +58,8 @@ export class RadioButtonGroup implements LoadableComponent {
   }
 
   /** Defines the layout of the component. */
-  @Prop({ reflect: true }) layout: Layout = "horizontal";
+  @Prop({ reflect: true }) layout: Extract<"horizontal" | "vertical" | "grid", Layout> =
+    "horizontal";
 
   @Watch("layout")
   onLayoutChange(): void {
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-item/segmented-control-item.tsx b/packages/calcite-components/src/components/segmented-control-item/segmented-control-item.tsx
index 91281352cd8..1e8f3372b9a 100644
--- a/packages/calcite-components/src/components/segmented-control-item/segmented-control-item.tsx
+++ b/packages/calcite-components/src/components/segmented-control-item/segmented-control-item.tsx
@@ -62,7 +62,7 @@ export class SegmentedControlItem {
    *
    * @internal
    */
-  @Prop() layout: Layout = "horizontal";
+  @Prop() layout: Extract<"horizontal" | "vertical" | "grid", Layout> = "horizontal";
 
   /**
    * Specifies the size of the component inherited from the `calcite-segmented-control`, defaults to `m`.
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 a76ec441fb5..4ca7dd8bc01 100644
--- a/packages/calcite-components/src/components/sheet/sheet.stories.ts
+++ b/packages/calcite-components/src/components/sheet/sheet.stories.ts
@@ -1,20 +1,17 @@
 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",
   args: {
     open: true,
     position: logicalFlowPosition.values[0],
-    displayMode: displayMode.values[2],
+    displayMode: displayMode.values[1],
   },
   argTypes: {
     position: {
@@ -22,7 +19,7 @@ export default {
       control: { type: "select" },
     },
     displayMode: {
-      options: displayMode.values.filter((option) => option !== "dock"),
+      options: displayMode.values,
       control: { type: "select" },
     },
   },
@@ -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-center-row/shell-center-row.tsx b/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx
index 7d15d2fedbd..6c526f8ea27 100644
--- a/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx
+++ b/packages/calcite-components/src/components/shell-center-row/shell-center-row.tsx
@@ -37,7 +37,7 @@ export class ShellCenterRow implements ConditionalSlotComponent {
   /**
    * Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`).
    */
-  @Prop({ reflect: true }) position: Position = "end";
+  @Prop({ reflect: true }) position: Extract<"start" | "end", Position> = "end";
 
   // --------------------------------------------------------------------------
   //
diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
index d7fdc1278f3..0ee7f5ba427 100755
--- a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
+++ b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
@@ -131,7 +131,7 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent,
   /**
    * Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`).
    */
-  @Prop({ reflect: true }) position: Position = "start";
+  @Prop({ reflect: true }) position: Extract<"start" | "end", Position> = "start";
 
   /**
    * When `true` and `displayMode` is not `float`, the component's content area is resizable.
diff --git a/packages/calcite-components/src/components/shell/interfaces.ts b/packages/calcite-components/src/components/shell/interfaces.ts
new file mode 100644
index 00000000000..cad587d2255
--- /dev/null
+++ b/packages/calcite-components/src/components/shell/interfaces.ts
@@ -0,0 +1 @@
+export type ShellDisplayMode = "dock" | "float" | "overlay";
diff --git a/packages/calcite-components/src/components/shell/shell.stories.ts b/packages/calcite-components/src/components/shell/shell.stories.ts
index c14f9b5a9d1..e2f2c7fd250 100644
--- a/packages/calcite-components/src/components/shell/shell.stories.ts
+++ b/packages/calcite-components/src/components/shell/shell.stories.ts
@@ -1,25 +1,27 @@
+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 { displayMode, position, scale } = ATTRIBUTES;
+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: {
     collapsed: false,
-    displayMode: displayMode.defaultValue,
+    displayMode: shellDisplayMode.defaultValue,
     leadingPanelPosition: position.values[0],
     trailingPanelPosition: position.values[1],
     resizable: true,
@@ -29,7 +31,7 @@ export default {
   },
   argTypes: {
     displayMode: {
-      options: displayMode.values,
+      options: shellDisplayMode.values,
       control: { type: "select" },
     },
     leadingPanelPosition: {
@@ -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/sortable-list/sortable-list.tsx b/packages/calcite-components/src/components/sortable-list/sortable-list.tsx
index 13895ef15d8..1983a0c23bb 100644
--- a/packages/calcite-components/src/components/sortable-list/sortable-list.tsx
+++ b/packages/calcite-components/src/components/sortable-list/sortable-list.tsx
@@ -65,7 +65,7 @@ export class SortableList implements InteractiveComponent, SortableComponent {
   /**
    * Indicates the horizontal or vertical orientation of the component.
    */
-  @Prop({ reflect: true }) layout: Layout = "vertical";
+  @Prop({ reflect: true }) layout: Extract<"horizontal" | "vertical" | "grid", Layout> = "vertical";
 
   /**
    * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
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 f1d8928d1a2..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",
@@ -55,13 +57,13 @@ export default {
       control: { type: "select" },
     },
     dropdownIconType: {
-      options: iconType.values,
+      options: iconType.values.filter((option) => option !== "plus-minus"),
       control: { type: "select" },
     },
   },
 };
 
-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-group/tile-group.tsx b/packages/calcite-components/src/components/tile-group/tile-group.tsx
index ab10203d57a..05282ae4383 100644
--- a/packages/calcite-components/src/components/tile-group/tile-group.tsx
+++ b/packages/calcite-components/src/components/tile-group/tile-group.tsx
@@ -53,7 +53,7 @@ export class TileGroup implements InteractiveComponent, SelectableGroupComponent
    *
    * Use `"horizontal"` for rows, and `"vertical"` for a single column.
    */
-  @Prop({ reflect: true }) layout: Exclude<Layout, "grid"> = "horizontal";
+  @Prop({ reflect: true }) layout: Extract<Layout, "horizontal" | "vertical"> = "horizontal";
 
   /**
    * Specifies the size of the component.
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/tile/tile.tsx b/packages/calcite-components/src/components/tile/tile.tsx
index 67b1330d867..15584f7c402 100644
--- a/packages/calcite-components/src/components/tile/tile.tsx
+++ b/packages/calcite-components/src/components/tile/tile.tsx
@@ -107,7 +107,7 @@ export class Tile implements InteractiveComponent, SelectableComponent {
    *
    * @internal
    */
-  @Prop({ reflect: true }) layout: Exclude<Layout, "grid"> = "horizontal";
+  @Prop({ reflect: true }) layout: Extract<Layout, "horizontal" | "vertical"> = "horizontal";
 
   /**
    * Specifies the size of the component.
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)}
diff --git a/packages/calcite-components/src/utils/dom.spec.ts b/packages/calcite-components/src/utils/dom.spec.ts
index fdb4c654d5a..5eaf3d29592 100644
--- a/packages/calcite-components/src/utils/dom.spec.ts
+++ b/packages/calcite-components/src/utils/dom.spec.ts
@@ -1,3 +1,4 @@
+import { JSDOM } from "jsdom";
 import { ModeName } from "../../src/components/interfaces";
 import { html } from "../../support/formatting";
 import {
@@ -5,20 +6,22 @@ import {
   focusElementInGroup,
   getElementProp,
   getModeName,
+  getShadowRootNode,
   getSlotted,
+  isBefore,
+  isKeyboardTriggeredClick,
   isPrimaryPointerButton,
   setRequestedIcon,
   slotChangeGetAssignedElements,
-  slotChangeHasAssignedElement,
-  toAriaBoolean,
-  getShadowRootNode,
-  slotChangeGetTextContent,
   slotChangeGetAssignedNodes,
+  slotChangeGetTextContent,
+  slotChangeHasAssignedElement,
   slotChangeHasAssignedNode,
-  slotChangeHasTextContent,
   slotChangeHasContent,
-  isBefore,
-  isKeyboardTriggeredClick,
+  slotChangeHasTextContent,
+  toAriaBoolean,
+  whenAnimationDone,
+  whenTransitionDone,
 } from "./dom";
 import { guidPattern } from "./guid.spec";
 
@@ -607,4 +610,140 @@ describe("dom", () => {
       expect(isKeyboardTriggeredClick(event)).toBe(false);
     });
   });
+
+  async function promiseState(
+    promise: Promise<any>,
+  ): Promise<{ status: "fulfilled" | "rejected"; value?: any; reason: any }> {
+    const pendingState = { status: "pending" };
+
+    return Promise.race([promise, pendingState]).then(
+      (value) => (value === pendingState ? value : { status: "fulfilled", value }),
+      (reason) => ({ status: "rejected", reason }),
+    );
+  }
+
+  describe("whenTransitionDone", () => {
+    let dispatchTransitionEvent: (
+      element: HTMLElement,
+      type: "transitionstart" | "transitionend",
+      propertyName: string,
+    ) => void;
+
+    beforeEach(() => {
+      // we clobber Stencil's custom Mock document implementation
+      const { window: win } = new JSDOM();
+
+      // eslint-disable-next-line no-global-assign -- overriding to make window references use JSDOM (which is a subset, hence the type cast)
+      window = win as any as Window & typeof globalThis;
+
+      // we define TransitionEvent since JSDOM doesn't support it yet - https://github.com/jsdom/jsdom/issues/1781
+      class TransitionEvent extends window.Event {
+        elapsedTime: number;
+
+        propertyName: string;
+
+        constructor(type: string, eventInitDict: EventInit & Partial<{ elapsedTime: number; propertyName: string }>) {
+          super(type, eventInitDict);
+          this.elapsedTime = eventInitDict.elapsedTime;
+          this.propertyName = eventInitDict.propertyName;
+        }
+      }
+
+      dispatchTransitionEvent = (
+        element: HTMLElement,
+        type: "transitionstart" | "transitionend",
+        propertyName: string,
+      ): void => {
+        element.dispatchEvent(new TransitionEvent(type, { propertyName }));
+      };
+    });
+
+    it("should return a promise that resolves after the transition", async () => {
+      const element = window.document.createElement("div");
+      const testProp = "opacity";
+      const testDuration = "0.5s";
+      const testTransition = `${testProp} ${testDuration} ease 0s`;
+
+      element.style.transition = testTransition;
+
+      // need to mock due to JSDOM issue with getComputedStyle - https://github.com/jsdom/jsdom/issues/3090
+      window.getComputedStyle = jest.fn().mockReturnValue({
+        transition: testTransition,
+        transitionDuration: testDuration,
+        transitionProperty: testProp,
+      });
+      window.document.body.append(element);
+
+      const promise = whenTransitionDone(element, "opacity");
+      element.style.opacity = "0";
+      expect(await promiseState(promise)).toHaveProperty("status", "pending");
+
+      dispatchTransitionEvent(element, "transitionstart", "opacity");
+      expect(await promiseState(promise)).toHaveProperty("status", "pending");
+
+      dispatchTransitionEvent(element, "transitionend", "opacity");
+      expect(await promiseState(promise)).toHaveProperty("status", "pending");
+
+      expect(await promiseState(promise)).toHaveProperty("status", "fulfilled");
+    });
+  });
+
+  describe("whenAnimationDone", () => {
+    let dispatchAnimationEvent: (
+      element: HTMLElement,
+      type: "animationstart" | "animationend",
+      animationName: string,
+    ) => void;
+
+    beforeEach(() => {
+      // we clobber Stencil's custom Mock document implementation
+      const { window: win } = new JSDOM();
+
+      // eslint-disable-next-line no-global-assign -- overriding to make window references use JSDOM (which is a subset, hence the type cast)
+      window = win as any as Window & typeof globalThis;
+
+      // we define AnimationEvent since JSDOM doesn't support it yet -
+
+      class AnimationEvent extends window.Event {
+        elapsedTime: number;
+
+        animationName: string;
+
+        constructor(type: string, eventInitDict: EventInit & Partial<{ elapsedTime: number; animationName: string }>) {
+          super(type, eventInitDict);
+          this.elapsedTime = eventInitDict.elapsedTime;
+          this.animationName = eventInitDict.animationName;
+        }
+      }
+
+      dispatchAnimationEvent = (
+        element: HTMLElement,
+        type: "animationstart" | "animationend",
+        animationName: string,
+      ): void => {
+        element.dispatchEvent(new AnimationEvent(type, { animationName }));
+      };
+    });
+
+    it("should return a promise that resolves after the animation", async () => {
+      const element = window.document.createElement("div");
+      const testAnimationName = "fade";
+      const testDuration = "0.5s";
+
+      element.style.animation = `${testAnimationName} ${testDuration} ease 0s`;
+      window.document.body.append(element);
+
+      const promise = whenAnimationDone(element, testAnimationName);
+      element.style.animationName = "none";
+      expect(await promiseState(promise)).toHaveProperty("status", "pending");
+
+      dispatchAnimationEvent(element, "animationstart", testAnimationName);
+      expect(await promiseState(promise)).toHaveProperty("status", "pending");
+
+      dispatchAnimationEvent(element, "animationend", testAnimationName);
+      expect(await promiseState(promise)).toHaveProperty("status", "pending");
+
+      expect(await promiseState(promise)).toHaveProperty("status", "fulfilled");
+    });
+  });
 });
diff --git a/packages/calcite-components/src/utils/dom.ts b/packages/calcite-components/src/utils/dom.ts
index 32bc69c429e..bc37bc175b3 100644
--- a/packages/calcite-components/src/utils/dom.ts
+++ b/packages/calcite-components/src/utils/dom.ts
@@ -661,11 +661,41 @@ export function isBefore(a: HTMLElement, b: HTMLElement): boolean {
  * @param animationName The name of the animation to watch for completion.
  */
 export async function whenAnimationDone(targetEl: HTMLElement, animationName: string): Promise<void> {
-  const { animationDuration: allDurations, animationName: allNames } = getComputedStyle(targetEl);
+  return whenTransitionOrAnimationDone(targetEl, animationName, "animation");
+}
+
+/**
+ * This util helps determine when a transition has completed.
+ *
+ * @param targetEl The element to watch for the transition to complete.
+ * @param transitionProp The name of the transition to watch for completion.
+ */
+export async function whenTransitionDone(targetEl: HTMLElement, transitionProp: string): Promise<void> {
+  return whenTransitionOrAnimationDone(targetEl, transitionProp, "transition");
+}
+
+type TransitionOrAnimation = "transition" | "animation";
+type TransitionOrAnimationEvent = TransitionEvent | AnimationEvent;
+
+/**
+ * This util helps determine when a transition has completed.
+ *
+ * @param targetEl The element to watch for the transition or animation to complete.
+ * @param transitionPropOrAnimationName The transition or animation property to watch for completion.
+ * @param type The type of property to watch for completion. Defaults to "transition".
+ */
+export async function whenTransitionOrAnimationDone(
+  targetEl: HTMLElement,
+  transitionPropOrAnimationName: string,
+  type: TransitionOrAnimation,
+): Promise<void> {
+  const style = window.getComputedStyle(targetEl);
+  const allDurations = type === "transition" ? style.transitionDuration : style.animationDuration;
+  const allProps = type === "transition" ? style.transitionProperty : style.animationName;
 
   const allDurationsArray = allDurations.split(",");
-  const allPropsArray = allNames.split(",");
-  const propIndex = allPropsArray.indexOf(animationName);
+  const allPropsArray = allProps.split(",");
+  const propIndex = allPropsArray.indexOf(transitionPropOrAnimationName);
   const duration =
     allDurationsArray[propIndex] ??
     /* Safari will have a single duration value for the shorthand prop when multiple, separate names/props are defined,
@@ -676,12 +706,12 @@ export async function whenAnimationDone(targetEl: HTMLElement, animationName: st
     return Promise.resolve();
   }
 
-  const startEvent = "animationstart";
-  const endEvent = "animationend";
-  const cancelEvent = "animationcancel";
+  const startEvent = type === "transition" ? "transitionstart" : "animationstart";
+  const endEvent = type === "transition" ? "transitionend" : "animationend";
+  const cancelEvent = type === "transition" ? "transitioncancel" : "animationcancel";
 
   return new Promise<void>((resolve) => {
-    const fallbackTimeoutId = setTimeout(
+    const fallbackTimeoutId = window.setTimeout(
       (): void => {
         targetEl.removeEventListener(startEvent, onStart);
         targetEl.removeEventListener(endEvent, onEndOrCancel);
@@ -695,15 +725,15 @@ export async function whenAnimationDone(targetEl: HTMLElement, animationName: st
     targetEl.addEventListener(endEvent, onEndOrCancel);
     targetEl.addEventListener(cancelEvent, onEndOrCancel);
 
-    function onStart(event: AnimationEvent): void {
-      if (event.animationName === animationName && event.target === targetEl) {
-        clearTimeout(fallbackTimeoutId);
+    function onStart(event: TransitionOrAnimationEvent): void {
+      if (event.target === targetEl && getTransitionOrAnimationName(event) === transitionPropOrAnimationName) {
+        window.clearTimeout(fallbackTimeoutId);
         targetEl.removeEventListener(startEvent, onStart);
       }
     }
 
-    function onEndOrCancel(event: AnimationEvent): void {
-      if (event.animationName === animationName && event.target === targetEl) {
+    function onEndOrCancel(event: TransitionOrAnimationEvent): void {
+      if (event.target === targetEl && getTransitionOrAnimationName(event) === transitionPropOrAnimationName) {
         targetEl.removeEventListener(endEvent, onEndOrCancel);
         targetEl.removeEventListener(cancelEvent, onEndOrCancel);
         resolve();
@@ -711,3 +741,11 @@ export async function whenAnimationDone(targetEl: HTMLElement, animationName: st
     }
   });
 }
+
+function isTransitionEvent(event: TransitionOrAnimationEvent): event is TransitionEvent {
+  return "propertyName" in event;
+}
+
+function getTransitionOrAnimationName(event: TransitionOrAnimationEvent): string {
+  return isTransitionEvent(event) ? event.propertyName : event.animationName;
+}
diff --git a/packages/calcite-components/src/utils/floating-ui.spec.ts b/packages/calcite-components/src/utils/floating-ui.spec.ts
index 6069b8f3350..8562a9f99f9 100644
--- a/packages/calcite-components/src/utils/floating-ui.spec.ts
+++ b/packages/calcite-components/src/utils/floating-ui.spec.ts
@@ -7,8 +7,8 @@ const {
   connectFloatingUI,
   defaultOffsetDistance,
   disconnectFloatingUI,
-  effectivePlacements,
-  filterComputedPlacements,
+  flipPlacements,
+  filterValidFlipPlacements,
   getEffectivePlacement,
   placements,
   positionFloatingUI,
@@ -197,8 +197,8 @@ it("should have correct value for defaultOffsetDistance", () => {
   expect(defaultOffsetDistance).toBe(6);
 });
 
-it("should filter computed placements", () => {
-  expect(new Set(filterComputedPlacements([...placements], document.createElement("div")))).toEqual(
-    new Set(effectivePlacements),
+it("should filter valid placements", () => {
+  expect(new Set(filterValidFlipPlacements([...placements], document.createElement("div")))).toEqual(
+    new Set(flipPlacements),
   );
 });
diff --git a/packages/calcite-components/src/utils/floating-ui.ts b/packages/calcite-components/src/utils/floating-ui.ts
index 9d921f4f100..9bf730b0338 100644
--- a/packages/calcite-components/src/utils/floating-ui.ts
+++ b/packages/calcite-components/src/utils/floating-ui.ts
@@ -91,7 +91,7 @@ export const positionFloatingUI =
       overlayPositioning: Strategy;
       placement: LogicalPlacement;
       flipDisabled?: boolean;
-      flipPlacements?: EffectivePlacement[];
+      flipPlacements?: FlipPlacement[];
       offsetDistance?: number;
       offsetSkidding?: number;
       arrowEl?: SVGElement;
@@ -117,7 +117,7 @@ export const positionFloatingUI =
       middleware: getMiddleware({
         placement,
         flipDisabled,
-        flipPlacements,
+        flipPlacements: flipPlacements?.map((placement) => getEffectivePlacement(floatingEl, placement)),
         offsetDistance,
         offsetSkidding,
         arrowEl,
@@ -244,7 +244,9 @@ export const menuEffectivePlacements: EffectivePlacement[] = [
   "bottom-end",
 ];
 
-export const flipPlacements: EffectivePlacement[] = [
+export type FlipPlacement = Exclude<LogicalPlacement, "auto" | "auto-start" | "auto-end">;
+
+export const flipPlacements: FlipPlacement[] = [
   "top",
   "bottom",
   "right",
@@ -257,6 +259,12 @@ export const flipPlacements: EffectivePlacement[] = [
   "right-end",
   "left-start",
   "left-end",
+  "leading",
+  "trailing",
+  "leading-start",
+  "leading-end",
+  "trailing-start",
+  "trailing-end",
 ];
 
 export type MenuPlacement = Extract<
@@ -374,14 +382,14 @@ function getMiddleware({
   return [];
 }
 
-export function filterComputedPlacements(placements: string[], el: HTMLElement): EffectivePlacement[] {
+export function filterValidFlipPlacements(placements: string[], el: HTMLElement): EffectivePlacement[] {
   const filteredPlacements = placements.filter((placement: EffectivePlacement) =>
-    effectivePlacements.includes(placement),
+    flipPlacements.includes(placement),
   ) as EffectivePlacement[];
 
   if (filteredPlacements.length !== placements.length) {
     console.warn(
-      `${el.tagName}: Invalid value found in: flipPlacements. Try any of these: ${effectivePlacements
+      `${el.tagName}: Invalid value found in: flipPlacements. Try any of these: ${flipPlacements
         .map((placement) => `"${placement}"`)
         .join(", ")
         .trim()}`,
diff --git a/packages/calcite-components/src/utils/openCloseComponent.ts b/packages/calcite-components/src/utils/openCloseComponent.ts
index ea04c165355..71c3ac78def 100644
--- a/packages/calcite-components/src/utils/openCloseComponent.ts
+++ b/packages/calcite-components/src/utils/openCloseComponent.ts
@@ -1,4 +1,6 @@
 import { readTask } from "@stencil/core";
+import { whenTransitionDone } from "./dom";
+
 /**
  * Defines interface for components with open/close public emitter.
  * All implementations of this interface must handle the following events: `beforeOpen`, `open`, `beforeClose`, `close`.
@@ -59,15 +61,6 @@ function isOpen(component: OpenCloseComponent): boolean {
   return "opened" in component ? component.opened : component.open;
 }
 
-function emitImmediately(component: OpenCloseComponent, nonOpenCloseComponent = false): void {
-  (nonOpenCloseComponent ? component[component.transitionProp] : isOpen(component))
-    ? component.onBeforeOpen()
-    : component.onBeforeClose();
-  (nonOpenCloseComponent ? component[component.transitionProp] : isOpen(component))
-    ? component.onOpen()
-    : component.onClose();
-}
-
 /**
  * Helper to determine globally set transition duration on the given openTransitionProp, which is imported and set in the @Watch("open").
  * Used to emit (before)open/close events both for when the opacity transition is present and when there is none (transition-duration is set to 0).
@@ -86,59 +79,22 @@ function emitImmediately(component: OpenCloseComponent, nonOpenCloseComponent =
  * }
  *
  * @param component - OpenCloseComponent uses `open` prop to emit (before)open/close.
- * @param nonOpenCloseComponent - OpenCloseComponent uses `expanded` prop to emit (before)open/close.
  */
-export function onToggleOpenCloseComponent(component: OpenCloseComponent, nonOpenCloseComponent = false): void {
-  readTask((): void => {
+export function onToggleOpenCloseComponent(component: OpenCloseComponent): void {
+  readTask(async (): Promise<void> => {
     if (!component.transitionEl) {
       return;
     }
 
-    const { transitionDuration: allDurations, transitionProperty: allProps } = getComputedStyle(component.transitionEl);
-    const allTransitionDurationsArray = allDurations.split(",");
-    const allTransitionPropsArray = allProps.split(",");
-    const openTransitionPropIndex = allTransitionPropsArray.indexOf(component.openTransitionProp);
-    const transitionDuration =
-      allTransitionDurationsArray[openTransitionPropIndex] ??
-      /* Safari will have a single transition value if multiple props share it,
-            so we fall back to it if there's no matching prop duration */
-      allTransitionDurationsArray[0];
-    if (transitionDuration === "0s") {
-      emitImmediately(component, nonOpenCloseComponent);
-      return;
-    }
-    const fallbackTimeoutId = setTimeout(
-      (): void => {
-        component.transitionEl.removeEventListener("transitionstart", onStart);
-        component.transitionEl.removeEventListener("transitionend", onEndOrCancel);
-        component.transitionEl.removeEventListener("transitioncancel", onEndOrCancel);
-        emitImmediately(component, nonOpenCloseComponent);
-      },
-      parseFloat(transitionDuration) * 1000,
-    );
-    component.transitionEl.addEventListener("transitionstart", onStart);
-    component.transitionEl.addEventListener("transitionend", onEndOrCancel);
-    component.transitionEl.addEventListener("transitioncancel", onEndOrCancel);
+    await whenTransitionDone(component.transitionEl, component.openTransitionProp);
 
-    function onStart(event: TransitionEvent): void {
-      if (event.propertyName === component.openTransitionProp && event.target === component.transitionEl) {
-        clearTimeout(fallbackTimeoutId);
-        component.transitionEl.removeEventListener("transitionstart", onStart);
-        (nonOpenCloseComponent ? component[component.transitionProp] : isOpen(component))
-          ? component.onBeforeOpen()
-          : component.onBeforeClose();
-      }
+    if (isOpen(component)) {
+      component.onBeforeOpen();
+      component.onOpen();
+      return;
     }
 
-    function onEndOrCancel(event: TransitionEvent): void {
-      if (event.propertyName === component.openTransitionProp && event.target === component.transitionEl) {
-        (nonOpenCloseComponent ? component[component.transitionProp] : isOpen(component))
-          ? component.onOpen()
-          : component.onClose();
-
-        component.transitionEl.removeEventListener("transitionend", onEndOrCancel);
-        component.transitionEl.removeEventListener("transitioncancel", onEndOrCancel);
-      }
-    }
+    component.onBeforeClose();
+    component.onClose();
   });
 }
diff --git a/patches/@types+jsdom+21.1.6.patch b/patches/@types+jsdom+21.1.6.patch
new file mode 100644
index 00000000000..73de52ff489
--- /dev/null
+++ b/patches/@types+jsdom+21.1.6.patch
@@ -0,0 +1,14 @@
+diff --git a/node_modules/@types/jsdom/base.d.ts b/node_modules/@types/jsdom/base.d.ts
+index 96400e7..fd26b36 100644
+--- a/node_modules/@types/jsdom/base.d.ts
++++ b/node_modules/@types/jsdom/base.d.ts
+@@ -196,7 +196,9 @@ declare module "jsdom" {
+ 
+         /* ECMAScript Globals */
+         globalThis: DOMWindow;
++      // @ts-ignore
+         readonly ["Infinity"]: number;
++      // @ts-ignore
+         readonly ["NaN"]: number;
+         readonly undefined: undefined;
+