diff --git a/.github/workflows/build-release.yml b/.github/workflows/build-release.yml
index 544f28309..74e5c12a7 100644
--- a/.github/workflows/build-release.yml
+++ b/.github/workflows/build-release.yml
@@ -20,7 +20,7 @@ on:
       - 'src/**/*'
   workflow_dispatch:
 
-concurrency: build-release-${{ github.ref }}
+concurrency: build-release
 
 jobs:
   ## Gather configuration required by other jobs
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5938259e5..5ee44319a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,84 @@
+# v2.19.1 (Thu Oct 19 2023)
+
+#### 🐛 Bug Fix
+
+- chore(button-area): add build file and jsdoc [#412](https://github.com/tyler-technologies-oss/forge/pull/412) ([@samrichardsontylertech](https://github.com/samrichardsontylertech))
+
+#### Authors: 1
+
+- Sam Richardson ([@samrichardsontylertech](https://github.com/samrichardsontylertech))
+
+---
+
+# v2.19.0 (Thu Oct 12 2023)
+
+#### 🚀 Enhancement
+
+- feat(button-area): create button area component [#326](https://github.com/tyler-technologies-oss/forge/pull/326) ([@samrichardsontylertech](https://github.com/samrichardsontylertech))
+
+#### 🐛 Bug Fix
+
+- fix(expansion-panel): fixed a bug where calling `setOpenImmediate()` while an expand/collapse animation is already running would not cancel the active animation [#406](https://github.com/tyler-technologies-oss/forge/pull/406) ([@DRiFTy17](https://github.com/DRiFTy17))
+- fix(text-field): fixed a bug where the label was not being initialized properly when toggling density dynamically [#404](https://github.com/tyler-technologies-oss/forge/pull/404) ([@DRiFTy17](https://github.com/DRiFTy17))
+- fix(paginator): fixed how `offset` updates `pageIndex` along with updates to focus management [#402](https://github.com/tyler-technologies-oss/forge/pull/402) ([@DRiFTy17](https://github.com/DRiFTy17))
+
+#### Authors: 2
+
+- Kieran Nichols ([@DRiFTy17](https://github.com/DRiFTy17))
+- Sam Richardson ([@samrichardsontylertech](https://github.com/samrichardsontylertech))
+
+---
+
+# v2.18.1 (Wed Oct 04 2023)
+
+#### 🐛 Bug Fix
+
+- fix(paginator): fixed a bug where focus was lost when disabling the page buttons dynamically [#398](https://github.com/tyler-technologies-oss/forge/pull/398) ([@DRiFTy17](https://github.com/DRiFTy17))
+- feat(icon): move aria-hidden from host element to svg [#396](https://github.com/tyler-technologies-oss/forge/pull/396) ([@samrichardsontylertech](https://github.com/samrichardsontylertech))
+
+#### Authors: 2
+
+- Kieran Nichols ([@DRiFTy17](https://github.com/DRiFTy17))
+- Sam Richardson ([@samrichardsontylertech](https://github.com/samrichardsontylertech))
+
+---
+
+# v2.18.0 (Wed Sep 27 2023)
+
+#### 🚀 Enhancement
+
+- feat(autocomplete): added new `forceFilter()` method to allow for dynamically updating the options of an autocomplete [#391](https://github.com/tyler-technologies-oss/forge/pull/391) ([@DRiFTy17](https://github.com/DRiFTy17))
+- feat(list-dropdown): added configuration for setting secondary labels and for providing additional configuration to leading/trailing icon component elements [#393](https://github.com/tyler-technologies-oss/forge/pull/393) ([@DRiFTy17](https://github.com/DRiFTy17))
+- feat(keyboard-shortcut): add activate callback [#367](https://github.com/tyler-technologies-oss/forge/pull/367) ([@samrichardsontylertech](https://github.com/samrichardsontylertech))
+
+#### 🐛 Bug Fix
+
+- fix(autocomplete): fixed a bug where the filter text was not getting removed when the clear button is clicked [#390](https://github.com/tyler-technologies-oss/forge/pull/390) ([@DRiFTy17](https://github.com/DRiFTy17))
+- feat(calendar): fixed a bug where an exception was being thrown if min/max was set and caused the current month to have no selectable dates. The calendar will now automatically move to the closest month with a selectable date [#392](https://github.com/tyler-technologies-oss/forge/pull/392) ([@DRiFTy17](https://github.com/DRiFTy17))
+- fix(chip-field): don't wrap leading/trailing icons [#386](https://github.com/tyler-technologies-oss/forge/pull/386) ([@MikeMatusz](https://github.com/MikeMatusz))
+- fix(date-picker, time-picker, date-range-picker): select mask on focus if shown [#385](https://github.com/tyler-technologies-oss/forge/pull/385) ([@MikeMatusz](https://github.com/MikeMatusz))
+- fix(chip-field): don't propagate click if disabled [#384](https://github.com/tyler-technologies-oss/forge/pull/384) ([@MikeMatusz](https://github.com/MikeMatusz))
+
+#### Authors: 3
+
+- Kieran Nichols ([@DRiFTy17](https://github.com/DRiFTy17))
+- Mike Matuszak ([@MikeMatusz](https://github.com/MikeMatusz))
+- Sam Richardson ([@samrichardsontylertech](https://github.com/samrichardsontylertech))
+
+---
+
+# v2.17.0 (Tue Aug 29 2023)
+
+#### 🚀 Enhancement
+
+- feat(popup): add popup ref to close event, emit from host [#365](https://github.com/tyler-technologies-oss/forge/pull/365) ([@MikeMatusz](https://github.com/MikeMatusz))
+
+#### Authors: 1
+
+- Mike Matuszak ([@MikeMatusz](https://github.com/MikeMatusz))
+
+---
+
 # v2.16.6 (Mon Aug 21 2023)
 
 #### 🐛 Bug Fix
diff --git a/forge.json b/forge.json
index 2520f99d5..38a2218c3 100644
--- a/forge.json
+++ b/forge.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "./node_modules/@tylertech/forge-cli/schema.json",
+  "$schema": "./node_modules/@tylertech/forge-cli/config/schema.json",
   "packageOrg": "@tylertech",
   "packageName": "forge",
   "registry": "https://registry.npmjs.org/",
diff --git a/package-lock.json b/package-lock.json
index e95fe22e9..74fc61215 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@tylertech/forge",
-  "version": "3.0.0-next.1",
+  "version": "3.0.0-next.11",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@tylertech/forge",
-      "version": "3.0.0-next.1",
+      "version": "3.0.0-next.11",
       "hasInstallScript": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -45,7 +45,7 @@
         "@esm-bundle/chai": "^4.3.4-fix.0",
         "@open-wc/testing": "^3.1.8",
         "@tylertech-eslint/eslint-plugin": "^1.0.9",
-        "@tylertech/forge-cli": "^3.0.0-next.3",
+        "@tylertech/forge-cli": "^3.0.0-next.4",
         "@tylertech/forge-testing": "^2.0.0",
         "@tylertech/stylelint-rules": "^4.3.4",
         "@types/jasmine": "^3.10.3",
@@ -98,6 +98,15 @@
         "node": ">=12.17"
       }
     },
+    "node_modules/@aashutoshrathi/word-wrap": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz",
+      "integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
@@ -1082,9 +1091,9 @@
       }
     },
     "node_modules/@csstools/css-parser-algorithms": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.2.0.tgz",
-      "integrity": "sha512-9BoQ/jSrPq4vv3b9jjLW+PNNv56KlDH5JMx5yASSNrCtvq70FCNZUjXRvbCeR9hYj9ZyhURtqpU/RFIgg6kiOw==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.3.1.tgz",
+      "integrity": "sha512-xrvsmVUtefWMWQsGgFffqWSK03pZ1vfDki4IVIIUxxDKnGBzqNgv0A7SB1oXtVNEkcVO8xi1ZrTL29HhSu5kGA==",
       "dev": true,
       "funding": [
         {
@@ -1100,26 +1109,32 @@
         "node": "^14 || ^16 || >=18"
       },
       "peerDependencies": {
-        "@csstools/css-tokenizer": "^2.1.1"
+        "@csstools/css-tokenizer": "^2.2.0"
       }
     },
     "node_modules/@csstools/css-tokenizer": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.1.1.tgz",
-      "integrity": "sha512-GbrTj2Z8MCTUv+52GE0RbFGM527xuXZ0Xa5g0Z+YN573uveS4G0qi6WNOMyz3yrFM/jaILTTwJ0+umx81EzqfA==",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.2.0.tgz",
+      "integrity": "sha512-wErmsWCbsmig8sQKkM6pFhr/oPha1bHfvxsUY5CYSQxwyhA9Ulrs8EqCgClhg4Tgg2XapVstGqSVcz0xOYizZA==",
       "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
       "engines": {
         "node": "^14 || ^16 || >=18"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/csstools"
       }
     },
     "node_modules/@csstools/media-query-list-parser": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.0.tgz",
-      "integrity": "sha512-MXkR+TeaS2q9IkpyO6jVCdtA/bfpABJxIrfkLswThFN8EZZgI2RfAHhm6sDNDuYV25d5+b8Lj1fpTccIcSLPsQ==",
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.4.tgz",
+      "integrity": "sha512-V/OUXYX91tAC1CDsiY+HotIcJR+vPtzrX8pCplCpT++i8ThZZsq5F5dzZh/bDM3WUOjrvC1ljed1oSJxMfjqhw==",
       "dev": true,
       "funding": [
         {
@@ -1135,8 +1150,8 @@
         "node": "^14 || ^16 || >=18"
       },
       "peerDependencies": {
-        "@csstools/css-parser-algorithms": "^2.1.1",
-        "@csstools/css-tokenizer": "^2.1.1"
+        "@csstools/css-parser-algorithms": "^2.3.1",
+        "@csstools/css-tokenizer": "^2.2.0"
       }
     },
     "node_modules/@csstools/selector-specificity": {
@@ -1611,23 +1626,23 @@
       }
     },
     "node_modules/@eslint-community/regexpp": {
-      "version": "4.5.1",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.5.1.tgz",
-      "integrity": "sha512-Z5ba73P98O1KUYCCJTUeVpja9RcGoMdncZ6T49FCUl2lN38JtCJ+3WgIDBv0AuY4WChU5PmtJmOCTlN6FZTFKQ==",
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.8.0.tgz",
+      "integrity": "sha512-JylOEEzDiOryeUnFbQz+oViCXS0KsvR1mvHkoMiu5+UiBvy+RYX7tzlIIIEstF/gVa2tj9AQXk3dgnxv6KxhFg==",
       "dev": true,
       "engines": {
         "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
       }
     },
     "node_modules/@eslint/eslintrc": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.0.3.tgz",
-      "integrity": "sha512-+5gy6OQfk+xx3q0d6jGZZC3f3KzAkXc/IanVxd1is/VIIziRqqt3ongQz0FiTUXqTk0c7aDB3OaFuKnuSoJicQ==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.2.tgz",
+      "integrity": "sha512-+wvgpDsrB1YqAMdEUCcnTlpfVBH7Vqn6A/NT3D8WVXFIaKMlErPIZT3oCIAVCOtarRpMtelZLqJeU3t7WY6X6g==",
       "dev": true,
       "dependencies": {
         "ajv": "^6.12.4",
         "debug": "^4.3.2",
-        "espree": "^9.5.2",
+        "espree": "^9.6.0",
         "globals": "^13.19.0",
         "ignore": "^5.2.0",
         "import-fresh": "^3.2.1",
@@ -1665,9 +1680,9 @@
       "dev": true
     },
     "node_modules/@eslint/js": {
-      "version": "8.42.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.42.0.tgz",
-      "integrity": "sha512-6SWlXpWU5AvId8Ac7zjzmIOqMOba/JWY8XZ4A7q7Gn1Vlfg/SFFIlrtHXt9nPn4op9ZPAkl91Jao+QQv3r/ukw==",
+      "version": "8.48.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.48.0.tgz",
+      "integrity": "sha512-ZSjtmelB7IJfWD2Fvb7+Z+ChTIKWq6kjda95fLcQKNS5aheVHn4IkfgRQE3sIIzTcSLwLcLZUD9UBt+V7+h+Pw==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -1708,9 +1723,9 @@
       "dev": true
     },
     "node_modules/@humanwhocodes/config-array": {
-      "version": "0.11.10",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",
-      "integrity": "sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ==",
+      "version": "0.11.11",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.11.tgz",
+      "integrity": "sha512-N2brEuAadi0CcdeMXUkhbZB84eskAc8MEX1By6qEchoVywSgXPIjou4rYsl0V3Hj0ZnuGycGCjdNgockbzeWNA==",
       "dev": true,
       "dependencies": {
         "@humanwhocodes/object-schema": "^1.2.1",
@@ -1887,9 +1902,9 @@
       }
     },
     "node_modules/@jridgewell/source-map": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.3.tgz",
-      "integrity": "sha512-b+fsZXeLYi9fEULmfBrhxn4IrPlINf8fiNarzTof004v3lFdntdwa9PF7vFJqm3mg7s+ScJMxXaE3Acp1irZcg==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.5.tgz",
+      "integrity": "sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==",
       "dev": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.0",
@@ -3316,9 +3331,9 @@
       }
     },
     "node_modules/@tylertech/forge-build-tools": {
-      "version": "3.0.0-next.5",
-      "resolved": "https://registry.npmjs.org/@tylertech/forge-build-tools/-/forge-build-tools-3.0.0-next.5.tgz",
-      "integrity": "sha512-Co5BZs1g9nhUPtczqbpovJHVjMj8C3sYzk1CFN/koJR33hCJJ8ENBNnIhUq2aPPJkd4WwtD7ZbI17ILjUIU2Kg==",
+      "version": "3.0.0-next.6",
+      "resolved": "https://registry.npmjs.org/@tylertech/forge-build-tools/-/forge-build-tools-3.0.0-next.6.tgz",
+      "integrity": "sha512-0DuV79UdObX1DsZqkTo73MZGAnR/OIpPf/MH4cZWwp6nuA6i0m1HV6FmimBR/DjZB6BTNxvk9QbunsgADuxEBg==",
       "dev": true,
       "dependencies": {
         "autoprefixer": "10.4.14",
@@ -3353,6 +3368,28 @@
         "typescript": "^4.6.3"
       }
     },
+    "node_modules/@tylertech/forge-build-tools/node_modules/@csstools/selector-specificity": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.0.tgz",
+      "integrity": "sha512-hBI9tfBtuPIi885ZsZ32IMEU/5nlZH/KOVYJCOh7gyMxaVLGmLedYqFN6Ui1LXkI8JlC8IsuC0rF0btcRZKd5g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss-selector-parser": "^6.0.13"
+      }
+    },
     "node_modules/@tylertech/forge-build-tools/node_modules/ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -3362,6 +3399,39 @@
         "node": ">=8"
       }
     },
+    "node_modules/@tylertech/forge-build-tools/node_modules/autoprefixer": {
+      "version": "10.4.14",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
+      "integrity": "sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        }
+      ],
+      "dependencies": {
+        "browserslist": "^4.21.5",
+        "caniuse-lite": "^1.0.30001464",
+        "fraction.js": "^4.2.0",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.0.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/@tylertech/forge-build-tools/node_modules/brace-expansion": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -3383,10 +3453,40 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@tylertech/forge-build-tools/node_modules/camelcase-keys": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-7.0.2.tgz",
+      "integrity": "sha512-Rjs1H+A9R+Ig+4E/9oyB66UC5Mj9Xq3N//vcLf2WzgdTi/3gUu3Z9KoqmlrEG4VuuLK8wJHofxzdQXz/knhiYg==",
+      "dev": true,
+      "dependencies": {
+        "camelcase": "^6.3.0",
+        "map-obj": "^4.1.0",
+        "quick-lru": "^5.1.1",
+        "type-fest": "^1.2.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@tylertech/forge-build-tools/node_modules/camelcase-keys/node_modules/camelcase": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@tylertech/forge-build-tools/node_modules/chalk": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.2.0.tgz",
-      "integrity": "sha512-ree3Gqw/nazQAPuJJEy+avdl7QfZMcUvmHIKgEZkGL+xOBzRvup5Hxo6LHuMceSxOabuJLJm5Yp/92R9eMmMvA==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+      "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
       "dev": true,
       "engines": {
         "node": "^12.17.0 || ^14.13 || >=16.0.0"
@@ -3396,14 +3496,14 @@
       }
     },
     "node_modules/@tylertech/forge-build-tools/node_modules/cosmiconfig": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.2.0.tgz",
-      "integrity": "sha512-3rTMnFJA1tCOPwRxtgF4wd7Ab2qvDbL8jX+3smjIbS4HlZBagTlpERbdN7iAbWlrfxE3M8c27kTwTawQ7st+OQ==",
+      "version": "8.3.4",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.4.tgz",
+      "integrity": "sha512-SF+2P8+o/PTV05rgsAjDzL4OFdVXAulSfC/L19VaeVT7+tpOOSscCt2QLxDZ+CLxF2WOiq6y1K5asvs8qUJT/Q==",
       "dev": true,
       "dependencies": {
-        "import-fresh": "^3.2.1",
+        "import-fresh": "^3.3.0",
         "js-yaml": "^4.1.0",
-        "parse-json": "^5.0.0",
+        "parse-json": "^5.2.0",
         "path-type": "^4.0.0"
       },
       "engines": {
@@ -3411,32 +3511,39 @@
       },
       "funding": {
         "url": "https://github.com/sponsors/d-fischer"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.9.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@tylertech/forge-build-tools/node_modules/find-up": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+    "node_modules/@tylertech/forge-build-tools/node_modules/decamelize": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-5.0.1.tgz",
+      "integrity": "sha512-VfxadyCECXgQlkoEAjeghAr5gY3Hf+IKjKb+X8tGVDtveCjN+USwprd2q3QXBR9T1+x2DG0XZF5/w+7HAtSaXA==",
       "dev": true,
-      "dependencies": {
-        "locate-path": "^5.0.0",
-        "path-exists": "^4.0.0"
-      },
       "engines": {
-        "node": ">=8"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/@tylertech/forge-build-tools/node_modules/glob": {
-      "version": "10.2.7",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.2.7.tgz",
-      "integrity": "sha512-jTKehsravOJo8IJxUGfZILnkvVJM/MOfHRs8QcXolVef2zNI9Tqyy5+SeuOAZd3upViEZQLyFpQhYiHLrMUNmA==",
+      "version": "10.3.4",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.4.tgz",
+      "integrity": "sha512-6LFElP3A+i/Q8XQKEvZjkEWEOTgAIALR9AO2rwT8bgPhDd1anmqDJDZ6lLddI4ehxxxR1S5RIqKe1uapMQfYaQ==",
       "dev": true,
       "dependencies": {
         "foreground-child": "^3.1.0",
         "jackspeak": "^2.0.3",
         "minimatch": "^9.0.1",
-        "minipass": "^5.0.0 || ^6.0.2",
-        "path-scurry": "^1.7.0"
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0",
+        "path-scurry": "^1.10.1"
       },
       "bin": {
         "glob": "dist/cjs/src/bin.js"
@@ -3477,60 +3584,54 @@
         "node": ">=8"
       }
     },
-    "node_modules/@tylertech/forge-build-tools/node_modules/hosted-git-info": {
-      "version": "2.8.9",
-      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
-      "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
-      "dev": true
-    },
-    "node_modules/@tylertech/forge-build-tools/node_modules/known-css-properties": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.27.0.tgz",
-      "integrity": "sha512-uMCj6+hZYDoffuvAJjFAPz56E9uoowFHmTkqRtRq5WyC5Q6Cu/fTZKNQpX/RbzChBYLLl3lo8CjFZBAZXq9qFg==",
-      "dev": true
-    },
-    "node_modules/@tylertech/forge-build-tools/node_modules/locate-path": {
+    "node_modules/@tylertech/forge-build-tools/node_modules/indent-string": {
       "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-5.0.0.tgz",
+      "integrity": "sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==",
       "dev": true,
-      "dependencies": {
-        "p-locate": "^4.1.0"
-      },
       "engines": {
-        "node": ">=8"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@tylertech/forge-build-tools/node_modules/known-css-properties": {
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.28.0.tgz",
+      "integrity": "sha512-9pSL5XB4J+ifHP0e0jmmC98OGC1nL8/JjS+fi6mnTlIf//yt/MfVLtKg7S6nCtj/8KTcWX7nRlY0XywoYY1ISQ==",
+      "dev": true
+    },
     "node_modules/@tylertech/forge-build-tools/node_modules/meow": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/meow/-/meow-9.0.0.tgz",
-      "integrity": "sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==",
+      "version": "10.1.5",
+      "resolved": "https://registry.npmjs.org/meow/-/meow-10.1.5.tgz",
+      "integrity": "sha512-/d+PQ4GKmGvM9Bee/DPa8z3mXs/pkvJE2KEThngVNOqtmljC6K7NMPxtc2JeZYTmpWb9k/TmxjeL18ez3h7vCw==",
       "dev": true,
       "dependencies": {
-        "@types/minimist": "^1.2.0",
-        "camelcase-keys": "^6.2.2",
-        "decamelize": "^1.2.0",
+        "@types/minimist": "^1.2.2",
+        "camelcase-keys": "^7.0.0",
+        "decamelize": "^5.0.0",
         "decamelize-keys": "^1.1.0",
         "hard-rejection": "^2.1.0",
         "minimist-options": "4.1.0",
-        "normalize-package-data": "^3.0.0",
-        "read-pkg-up": "^7.0.1",
-        "redent": "^3.0.0",
-        "trim-newlines": "^3.0.0",
-        "type-fest": "^0.18.0",
-        "yargs-parser": "^20.2.3"
+        "normalize-package-data": "^3.0.2",
+        "read-pkg-up": "^8.0.0",
+        "redent": "^4.0.0",
+        "trim-newlines": "^4.0.2",
+        "type-fest": "^1.2.2",
+        "yargs-parser": "^20.2.9"
       },
       "engines": {
-        "node": ">=10"
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/@tylertech/forge-build-tools/node_modules/minimatch": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.1.tgz",
-      "integrity": "sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==",
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
+      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
       "dev": true,
       "dependencies": {
         "brace-expansion": "^2.0.1"
@@ -3543,118 +3644,75 @@
       }
     },
     "node_modules/@tylertech/forge-build-tools/node_modules/minipass": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-6.0.2.tgz",
-      "integrity": "sha512-MzWSV5nYVT7mVyWCwn2o7JH13w2TBRmmSqSRCKzTw+lmft9X4z+3wjvs06Tzijo5z4W/kahUCDpRXTF+ZrmF/w==",
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.3.tgz",
+      "integrity": "sha512-LhbbwCfz3vsb12j/WkWQPZfKTsgqIe1Nf/ti1pKjYESGLHIVjWU96G9/ljLH4F9mWNVhlQOm0VySdAWzf05dpg==",
       "dev": true,
       "engines": {
         "node": ">=16 || 14 >=14.17"
       }
     },
-    "node_modules/@tylertech/forge-build-tools/node_modules/p-limit": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+    "node_modules/@tylertech/forge-build-tools/node_modules/quick-lru": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
+      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
       "dev": true,
-      "dependencies": {
-        "p-try": "^2.0.0"
-      },
       "engines": {
-        "node": ">=6"
+        "node": ">=10"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@tylertech/forge-build-tools/node_modules/p-locate": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-      "dev": true,
-      "dependencies": {
-        "p-limit": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/@tylertech/forge-build-tools/node_modules/read-pkg": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
-      "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-6.0.0.tgz",
+      "integrity": "sha512-X1Fu3dPuk/8ZLsMhEj5f4wFAF0DWoK7qhGJvgaijocXxBmSToKfbFtqbxMO7bVjNA1dmE5huAzjXj/ey86iw9Q==",
       "dev": true,
       "dependencies": {
         "@types/normalize-package-data": "^2.4.0",
-        "normalize-package-data": "^2.5.0",
-        "parse-json": "^5.0.0",
-        "type-fest": "^0.6.0"
+        "normalize-package-data": "^3.0.2",
+        "parse-json": "^5.2.0",
+        "type-fest": "^1.0.1"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/@tylertech/forge-build-tools/node_modules/read-pkg-up": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-7.0.1.tgz",
-      "integrity": "sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-8.0.0.tgz",
+      "integrity": "sha512-snVCqPczksT0HS2EC+SxUndvSzn6LRCwpfSvLrIfR5BKDQQZMaI6jPRC9dYvYFDRAuFEAnkwww8kBBNE/3VvzQ==",
       "dev": true,
       "dependencies": {
-        "find-up": "^4.1.0",
-        "read-pkg": "^5.2.0",
-        "type-fest": "^0.8.1"
+        "find-up": "^5.0.0",
+        "read-pkg": "^6.0.0",
+        "type-fest": "^1.0.1"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=12"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@tylertech/forge-build-tools/node_modules/read-pkg-up/node_modules/type-fest": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
-      "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@tylertech/forge-build-tools/node_modules/read-pkg/node_modules/normalize-package-data": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
-      "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
-      "dev": true,
-      "dependencies": {
-        "hosted-git-info": "^2.1.4",
-        "resolve": "^1.10.0",
-        "semver": "2 || 3 || 4 || 5",
-        "validate-npm-package-license": "^3.0.1"
-      }
-    },
-    "node_modules/@tylertech/forge-build-tools/node_modules/read-pkg/node_modules/type-fest": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
-      "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@tylertech/forge-build-tools/node_modules/resolve": {
-      "version": "1.22.2",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz",
-      "integrity": "sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==",
+    "node_modules/@tylertech/forge-build-tools/node_modules/redent": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/redent/-/redent-4.0.0.tgz",
+      "integrity": "sha512-tYkDkVVtYkSVhuQ4zBgfvciymHaeuel+zFKXShfDnFP5SyVEP7qo70Rf1jTOTCx3vGNAbnEi/xFkcfQVMIBWag==",
       "dev": true,
       "dependencies": {
-        "is-core-module": "^2.11.0",
-        "path-parse": "^1.0.7",
-        "supports-preserve-symlinks-flag": "^1.0.0"
+        "indent-string": "^5.0.0",
+        "strip-indent": "^4.0.0"
       },
-      "bin": {
-        "resolve": "bin/resolve"
+      "engines": {
+        "node": ">=12"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/@tylertech/forge-build-tools/node_modules/rimraf": {
@@ -3675,19 +3733,10 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/@tylertech/forge-build-tools/node_modules/semver": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver"
-      }
-    },
     "node_modules/@tylertech/forge-build-tools/node_modules/signal-exit": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.0.2.tgz",
-      "integrity": "sha512-MY2/qGx4enyjprQnFaZsHib3Yadh3IXyV2C321GY0pjGfVBu4un0uDJkwgdxqO+Rdx8JMT8IfJIRwbYVz3Ob3Q==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
       "dev": true,
       "engines": {
         "node": ">=14"
@@ -3720,23 +3769,38 @@
         "node": ">=8"
       }
     },
+    "node_modules/@tylertech/forge-build-tools/node_modules/strip-indent": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-4.0.0.tgz",
+      "integrity": "sha512-mnVSV2l+Zv6BLpSD/8V87CW/y9EmmbYzGCIavsnsI6/nwn26DwffM/yztm30Z/I2DY9wdS3vXVCMnHDgZaVNoA==",
+      "dev": true,
+      "dependencies": {
+        "min-indent": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@tylertech/forge-build-tools/node_modules/stylelint": {
-      "version": "15.7.0",
-      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.7.0.tgz",
-      "integrity": "sha512-fQRwHwWuZsDn4ENyE9AsKkOkV9WlD2CmYiVDbdZPdS3iZh0ceypOn1EuwTNuZ8xTrHF+jVeIEzLtFFSlD/nJHg==",
+      "version": "15.10.3",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.10.3.tgz",
+      "integrity": "sha512-aBQMMxYvFzJJwkmg+BUUg3YfPyeuCuKo2f+LOw7yYbU8AZMblibwzp9OV4srHVeQldxvSFdz0/Xu8blq2AesiA==",
       "dev": true,
       "dependencies": {
-        "@csstools/css-parser-algorithms": "^2.2.0",
-        "@csstools/css-tokenizer": "^2.1.1",
-        "@csstools/media-query-list-parser": "^2.1.0",
-        "@csstools/selector-specificity": "^2.2.0",
+        "@csstools/css-parser-algorithms": "^2.3.1",
+        "@csstools/css-tokenizer": "^2.2.0",
+        "@csstools/media-query-list-parser": "^2.1.4",
+        "@csstools/selector-specificity": "^3.0.0",
         "balanced-match": "^2.0.0",
         "colord": "^2.9.3",
         "cosmiconfig": "^8.2.0",
-        "css-functions-list": "^3.1.0",
+        "css-functions-list": "^3.2.0",
         "css-tree": "^2.3.1",
         "debug": "^4.3.4",
-        "fast-glob": "^3.2.12",
+        "fast-glob": "^3.3.1",
         "fastest-levenshtein": "^1.0.16",
         "file-entry-cache": "^6.0.1",
         "global-modules": "^2.0.0",
@@ -3747,14 +3811,13 @@
         "import-lazy": "^4.0.0",
         "imurmurhash": "^0.1.4",
         "is-plain-object": "^5.0.0",
-        "known-css-properties": "^0.27.0",
+        "known-css-properties": "^0.28.0",
         "mathml-tag-names": "^2.1.3",
-        "meow": "^9.0.0",
+        "meow": "^10.1.5",
         "micromatch": "^4.0.5",
         "normalize-path": "^3.0.0",
         "picocolors": "^1.0.0",
-        "postcss": "^8.4.24",
-        "postcss-media-query-parser": "^0.2.3",
+        "postcss": "^8.4.27",
         "postcss-resolve-nested-selector": "^0.1.1",
         "postcss-safe-parser": "^6.0.0",
         "postcss-selector-parser": "^6.0.13",
@@ -3766,11 +3829,10 @@
         "supports-hyperlinks": "^3.0.0",
         "svg-tags": "^1.0.0",
         "table": "^6.8.1",
-        "v8-compile-cache": "^2.3.0",
         "write-file-atomic": "^5.0.1"
       },
       "bin": {
-        "stylelint": "bin/stylelint.js"
+        "stylelint": "bin/stylelint.mjs"
       },
       "engines": {
         "node": "^14.13.1 || >=16.0.0"
@@ -3799,10 +3861,22 @@
         "node": ">=14.18"
       }
     },
+    "node_modules/@tylertech/forge-build-tools/node_modules/trim-newlines": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-4.1.1.tgz",
+      "integrity": "sha512-jRKj0n0jXWo6kh62nA5TEh3+4igKDXLvzBJcPpiizP7oOolUrYIxmVBG9TOtHYFHoddUk6YvAkGeGoSVTXfQXQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@tylertech/forge-build-tools/node_modules/type-fest": {
-      "version": "0.18.1",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.18.1.tgz",
-      "integrity": "sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-1.4.0.tgz",
+      "integrity": "sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==",
       "dev": true,
       "engines": {
         "node": ">=10"
@@ -3825,13 +3899,13 @@
       }
     },
     "node_modules/@tylertech/forge-cli": {
-      "version": "3.0.0-next.3",
-      "resolved": "https://registry.npmjs.org/@tylertech/forge-cli/-/forge-cli-3.0.0-next.3.tgz",
-      "integrity": "sha512-S0OzUuLc8komAtF43EqpGkBmx9/7cZhYl3Ct9PTwUTzImpwOVd8jlh6X3NU9VZL7AdsrLQrqMm3mRqDAQK/sXg==",
+      "version": "3.0.0-next.4",
+      "resolved": "https://registry.npmjs.org/@tylertech/forge-cli/-/forge-cli-3.0.0-next.4.tgz",
+      "integrity": "sha512-QLUVSDhomyWcJex3w0ffKz9gfjnhZxOzQO1Ud44GZab9z4PBhTjQbS1xhISFBQDnquxy+IOpHyc1hTQB1boBAQ==",
       "dev": true,
       "dependencies": {
         "@custom-elements-manifest/analyzer": "^0.8.3",
-        "@tylertech/forge-build-tools": "3.0.0-next.5",
+        "@tylertech/forge-build-tools": "3.0.0-next.6",
         "autoprefixer": "^10.4.14",
         "browser-sync": "^2.29.3",
         "canonical-path": "^1.0.0",
@@ -4220,9 +4294,9 @@
       "dev": true
     },
     "node_modules/@types/eslint": {
-      "version": "8.40.2",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.40.2.tgz",
-      "integrity": "sha512-PRVjQ4Eh9z9pmmtaq8nTjZjQwKFk7YIHIud3lRoKRBgUQjgjRmoGxxGEPXQkF+lH7QkHJRNr5F4aBgYCW0lqpQ==",
+      "version": "8.44.2",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.2.tgz",
+      "integrity": "sha512-sdPRb9K6iL5XZOmBubg8yiFp5yS/JdUDQsq5e6h95km91MCYMuvp7mh1fjPEYUhvHepKpZOjnEaMBR4PxjWDzg==",
       "dev": true,
       "dependencies": {
         "@types/estree": "*",
@@ -6047,9 +6121,9 @@
       "dev": true
     },
     "node_modules/autoprefixer": {
-      "version": "10.4.14",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
-      "integrity": "sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==",
+      "version": "10.4.15",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.15.tgz",
+      "integrity": "sha512-KCuPB8ZCIqFdA4HwKXsvz7j6gvSDNhDP7WnUjBleRkKjPdvCmHFuQ77ocavI8FT6NdvlBnE2UFr2H4Mycn8Vew==",
       "dev": true,
       "funding": [
         {
@@ -6059,11 +6133,15 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ],
       "dependencies": {
-        "browserslist": "^4.21.5",
-        "caniuse-lite": "^1.0.30001464",
+        "browserslist": "^4.21.10",
+        "caniuse-lite": "^1.0.30001520",
         "fraction.js": "^4.2.0",
         "normalize-range": "^0.1.2",
         "picocolors": "^1.0.0",
@@ -6739,9 +6817,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.21.5",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.5.tgz",
-      "integrity": "sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==",
+      "version": "4.21.10",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.10.tgz",
+      "integrity": "sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==",
       "dev": true,
       "funding": [
         {
@@ -6751,13 +6829,17 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ],
       "dependencies": {
-        "caniuse-lite": "^1.0.30001449",
-        "electron-to-chromium": "^1.4.284",
-        "node-releases": "^2.0.8",
-        "update-browserslist-db": "^1.0.10"
+        "caniuse-lite": "^1.0.30001517",
+        "electron-to-chromium": "^1.4.477",
+        "node-releases": "^2.0.13",
+        "update-browserslist-db": "^1.0.11"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -7039,9 +7121,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001487",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001487.tgz",
-      "integrity": "sha512-83564Z3yWGqXsh2vaH/mhXfEM0wX+NlBCm1jYHOb97TrTWJEmPTccZgeLTPBUUb0PNVo+oomb7wkimZBIERClA==",
+      "version": "1.0.30001527",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001527.tgz",
+      "integrity": "sha512-YkJi7RwPgWtXVSgK4lG9AHH57nSzvvOp9MesgXmw4Q7n0C3H04L0foHqfxcmSAm5AcWb8dW9AYj2tR7/5GnddQ==",
       "dev": true,
       "funding": [
         {
@@ -8186,9 +8268,9 @@
       }
     },
     "node_modules/css-functions-list": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.1.0.tgz",
-      "integrity": "sha512-/9lCvYZaUbBGvYUgYGFJ4dcYiyqdhSjG7IPVluoV8A1ILjkF7ilmhp1OGUz8n+nmBcu0RNrQAzgD8B6FJbrt2w==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.0.tgz",
+      "integrity": "sha512-d/jBMPyYybkkLVypgtGv12R+pIFw4/f/IHtCTxWpZc8ofTYOPigIgmA6vu5rMHartZC+WuXhBUHfnyNUIQSYrg==",
       "dev": true,
       "engines": {
         "node": ">=12.22"
@@ -8502,9 +8584,9 @@
       }
     },
     "node_modules/del": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/del/-/del-7.0.0.tgz",
-      "integrity": "sha512-tQbV/4u5WVB8HMJr08pgw0b6nG4RGt/tj+7Numvq+zqcvUFeMaIWWOUFltiU+6go8BSO2/ogsB4EasDaj0y68Q==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/del/-/del-7.1.0.tgz",
+      "integrity": "sha512-v2KyNk7efxhlyHpjEvfyxaAihKKK0nWCuf6ZtqZcFFpQRG0bJ12Qsr0RpvsICMjAAZ8DOVCxrlqpxISlMHC4Kg==",
       "dev": true,
       "dependencies": {
         "globby": "^13.1.2",
@@ -8567,14 +8649,14 @@
       }
     },
     "node_modules/del/node_modules/globby": {
-      "version": "13.1.4",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-13.1.4.tgz",
-      "integrity": "sha512-iui/IiiW+QrJ1X1hKH5qwlMQyv34wJAYwH1vrf8b9kBA4sNiif3gKsMHa+BrdnOpEudWjpotfa7LrTzB1ERS/g==",
+      "version": "13.2.2",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-13.2.2.tgz",
+      "integrity": "sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==",
       "dev": true,
       "dependencies": {
         "dir-glob": "^3.0.1",
-        "fast-glob": "^3.2.11",
-        "ignore": "^5.2.0",
+        "fast-glob": "^3.3.0",
+        "ignore": "^5.2.4",
         "merge2": "^1.4.1",
         "slash": "^4.0.0"
       },
@@ -8877,9 +8959,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.396",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.396.tgz",
-      "integrity": "sha512-pqKTdqp/c5vsrc0xUPYXTDBo9ixZuGY8es4ZOjjd6HD6bFYbu5QA09VoW3fkY4LF1T0zYk86lN6bZnNlBuOpdQ==",
+      "version": "1.4.508",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.508.tgz",
+      "integrity": "sha512-FFa8QKjQK/A5QuFr2167myhMesGrhlOBD+3cYNxO9/S4XzHEXesyTD/1/xF644gC8buFPz3ca6G1LOQD0tZrrg==",
       "dev": true
     },
     "node_modules/emoji-regex": {
@@ -9586,27 +9668,27 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.42.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.42.0.tgz",
-      "integrity": "sha512-ulg9Ms6E1WPf67PHaEY4/6E2tEn5/f7FXGzr3t9cBMugOmf1INYvuUwwh1aXQN4MfJ6a5K2iNwP3w4AColvI9A==",
+      "version": "8.48.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.48.0.tgz",
+      "integrity": "sha512-sb6DLeIuRXxeM1YljSe1KEx9/YYeZFQWcV8Rq9HfigmdDEugjLEVEa1ozDjL6YDjBpQHPJxJzze+alxi4T3OLg==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
-        "@eslint-community/regexpp": "^4.4.0",
-        "@eslint/eslintrc": "^2.0.3",
-        "@eslint/js": "8.42.0",
+        "@eslint-community/regexpp": "^4.6.1",
+        "@eslint/eslintrc": "^2.1.2",
+        "@eslint/js": "8.48.0",
         "@humanwhocodes/config-array": "^0.11.10",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
-        "ajv": "^6.10.0",
+        "ajv": "^6.12.4",
         "chalk": "^4.0.0",
         "cross-spawn": "^7.0.2",
         "debug": "^4.3.2",
         "doctrine": "^3.0.0",
         "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^7.2.0",
-        "eslint-visitor-keys": "^3.4.1",
-        "espree": "^9.5.2",
+        "eslint-scope": "^7.2.2",
+        "eslint-visitor-keys": "^3.4.3",
+        "espree": "^9.6.1",
         "esquery": "^1.4.2",
         "esutils": "^2.0.2",
         "fast-deep-equal": "^3.1.3",
@@ -9616,7 +9698,6 @@
         "globals": "^13.19.0",
         "graphemer": "^1.4.0",
         "ignore": "^5.2.0",
-        "import-fresh": "^3.0.0",
         "imurmurhash": "^0.1.4",
         "is-glob": "^4.0.0",
         "is-path-inside": "^3.0.3",
@@ -9626,9 +9707,8 @@
         "lodash.merge": "^4.6.2",
         "minimatch": "^3.1.2",
         "natural-compare": "^1.4.0",
-        "optionator": "^0.9.1",
+        "optionator": "^0.9.3",
         "strip-ansi": "^6.0.1",
-        "strip-json-comments": "^3.1.0",
         "text-table": "^0.2.0"
       },
       "bin": {
@@ -9668,9 +9748,9 @@
       }
     },
     "node_modules/eslint-visitor-keys": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.1.tgz",
-      "integrity": "sha512-pZnmmLwYzf+kWaM/Qgrvpen51upAktaaiI01nsJD/Yr3lMOdNtq0cxkrrg16w64VtisN6okbs7Q8AfGqj4c9fA==",
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -9705,9 +9785,9 @@
       }
     },
     "node_modules/eslint/node_modules/eslint-scope": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.0.tgz",
-      "integrity": "sha512-DYj5deGlHBfMt15J7rdtyKNq/Nqlv5KfU4iodrQ019XESsRnwXH9KAE0y3cwtUHDo2ob7CypAnCqefh6vioWRw==",
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
+      "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
       "dev": true,
       "dependencies": {
         "esrecurse": "^4.3.0",
@@ -9760,12 +9840,12 @@
       }
     },
     "node_modules/espree": {
-      "version": "9.5.2",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-9.5.2.tgz",
-      "integrity": "sha512-7OASN1Wma5fum5SrNhFMAMJxOUAbhyfQ8dQ//PJaJbNw0URTPWqIghHWt1MmAANKhHZIYOHruW4Kw4ruUWOdGw==",
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
+      "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
       "dev": true,
       "dependencies": {
-        "acorn": "^8.8.0",
+        "acorn": "^8.9.0",
         "acorn-jsx": "^5.3.2",
         "eslint-visitor-keys": "^3.4.1"
       },
@@ -9963,9 +10043,9 @@
       "dev": true
     },
     "node_modules/fast-glob": {
-      "version": "3.2.12",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
-      "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
+      "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==",
       "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
@@ -10294,16 +10374,16 @@
       "dev": true
     },
     "node_modules/fraction.js": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
-      "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.6.tgz",
+      "integrity": "sha512-n2aZ9tNfYDwaHhvFTkhFErqOMIb8uyzSQ+vGJBjZyanAKZVbGUQ1sngfk9FdkBw7G26O7AgNjLcecLffD1c7eg==",
       "dev": true,
       "engines": {
         "node": "*"
       },
       "funding": {
         "type": "patreon",
-        "url": "https://www.patreon.com/infusion"
+        "url": "https://github.com/sponsors/rawify"
       }
     },
     "node_modules/fresh": {
@@ -10899,9 +10979,9 @@
       }
     },
     "node_modules/globals": {
-      "version": "13.20.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz",
-      "integrity": "sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==",
+      "version": "13.21.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.21.0.tgz",
+      "integrity": "sha512-ybyme3s4yy/t/3s35bewwXKOf7cvzfreG2lH0lZl0JB7I4GxRP2ghxOK/Nb9EkRXdbBXZLfq/p/0W2JUONB/Gg==",
       "dev": true,
       "dependencies": {
         "type-fest": "^0.20.2"
@@ -12041,9 +12121,9 @@
       }
     },
     "node_modules/is-core-module": {
-      "version": "2.12.0",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.12.0.tgz",
-      "integrity": "sha512-RECHCBCd/viahWmwj6enj19sKbHfJrddi/6cBDsNTKbNq0f7VeaUkBo60BqzvPqo/W54ChS62Z5qyun7cfOMqQ==",
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.0.tgz",
+      "integrity": "sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==",
       "dev": true,
       "dependencies": {
         "has": "^1.0.3"
@@ -15219,9 +15299,9 @@
       }
     },
     "node_modules/node-releases": {
-      "version": "2.0.10",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.10.tgz",
-      "integrity": "sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==",
+      "version": "2.0.13",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
+      "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==",
       "dev": true
     },
     "node_modules/nopt": {
@@ -15814,17 +15894,17 @@
       }
     },
     "node_modules/optionator": {
-      "version": "0.9.1",
-      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
-      "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz",
+      "integrity": "sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==",
       "dev": true,
       "dependencies": {
+        "@aashutoshrathi/word-wrap": "^1.2.3",
         "deep-is": "^0.1.3",
         "fast-levenshtein": "^2.0.6",
         "levn": "^0.4.1",
         "prelude-ls": "^1.2.1",
-        "type-check": "^0.4.0",
-        "word-wrap": "^1.2.3"
+        "type-check": "^0.4.0"
       },
       "engines": {
         "node": ">= 0.8.0"
@@ -15866,9 +15946,9 @@
       }
     },
     "node_modules/ora/node_modules/chalk": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.2.0.tgz",
-      "integrity": "sha512-ree3Gqw/nazQAPuJJEy+avdl7QfZMcUvmHIKgEZkGL+xOBzRvup5Hxo6LHuMceSxOabuJLJm5Yp/92R9eMmMvA==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+      "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
       "dev": true,
       "engines": {
         "node": "^12.17.0 || ^14.13 || >=16.0.0"
@@ -16253,13 +16333,13 @@
       "dev": true
     },
     "node_modules/path-scurry": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.9.1.tgz",
-      "integrity": "sha512-UgmoiySyjFxP6tscZDgWGEAgsW5ok8W3F5CJDnnH2pozwSTGE6eH7vwTotMwATWA2r5xqdkKdxYPkwlJjAI/3g==",
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.10.1.tgz",
+      "integrity": "sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==",
       "dev": true,
       "dependencies": {
-        "lru-cache": "^9.1.1",
-        "minipass": "^5.0.0 || ^6.0.0"
+        "lru-cache": "^9.1.1 || ^10.0.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
       },
       "engines": {
         "node": ">=16 || 14 >=14.17"
@@ -16278,9 +16358,9 @@
       }
     },
     "node_modules/path-scurry/node_modules/minipass": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-6.0.1.tgz",
-      "integrity": "sha512-Tenl5QPpgozlOGBiveNYHg2f6y+VpxsXRoIHFUVJuSmTonXRAE6q9b8Mp/O46762/2AlW4ye4Nkyvx0fgWDKbw==",
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.3.tgz",
+      "integrity": "sha512-LhbbwCfz3vsb12j/WkWQPZfKTsgqIe1Nf/ti1pKjYESGLHIVjWU96G9/ljLH4F9mWNVhlQOm0VySdAWzf05dpg==",
       "dev": true,
       "engines": {
         "node": ">=16 || 14 >=14.17"
@@ -16510,9 +16590,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.24",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
-      "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==",
+      "version": "8.4.29",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.29.tgz",
+      "integrity": "sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==",
       "dev": true,
       "funding": [
         {
@@ -17783,9 +17863,9 @@
       "dev": true
     },
     "node_modules/sass": {
-      "version": "1.63.4",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.63.4.tgz",
-      "integrity": "sha512-Sx/+weUmK+oiIlI+9sdD0wZHsqpbgQg8wSwSnGBjwb5GwqFhYNwwnI+UWZtLjKvKyFlKkatRK235qQ3mokyPoQ==",
+      "version": "1.66.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.66.1.tgz",
+      "integrity": "sha512-50c+zTsZOJVgFfTgwwEzkjA3/QACgdNsKueWPyAR0mRINIvLAStVQBbPg14iuqEQ74NPDbXzJARJ/O4SI1zftA==",
       "dev": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
@@ -17837,9 +17917,9 @@
       }
     },
     "node_modules/sass/node_modules/immutable": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz",
-      "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==",
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
+      "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==",
       "dev": true
     },
     "node_modules/schema-utils": {
@@ -20624,9 +20704,9 @@
       "dev": true
     },
     "node_modules/webpack": {
-      "version": "5.87.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.87.0.tgz",
-      "integrity": "sha512-GOu1tNbQ7p1bDEoFRs2YPcfyGs8xq52yyPBZ3m2VGnXGtV9MxjrkABHm4V9Ia280OefsSLzvbVoXcfLxjKY/Iw==",
+      "version": "5.88.2",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.88.2.tgz",
+      "integrity": "sha512-JmcgNZ1iKj+aiR0OvTYtWQqJwq37Pf683dY9bVORwVbUrDhLhdn/PlO2sHsFHPkj7sHNQF3JwaAkp49V+Sq1tQ==",
       "dev": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.3",
@@ -20863,15 +20943,6 @@
       "integrity": "sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==",
       "dev": true
     },
-    "node_modules/word-wrap": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
-      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/wordwrap": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
@@ -21173,6 +21244,12 @@
         }
       }
     },
+    "@aashutoshrathi/word-wrap": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz",
+      "integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==",
+      "dev": true
+    },
     "@ampproject/remapping": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
@@ -21985,21 +22062,21 @@
       }
     },
     "@csstools/css-parser-algorithms": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.2.0.tgz",
-      "integrity": "sha512-9BoQ/jSrPq4vv3b9jjLW+PNNv56KlDH5JMx5yASSNrCtvq70FCNZUjXRvbCeR9hYj9ZyhURtqpU/RFIgg6kiOw==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.3.1.tgz",
+      "integrity": "sha512-xrvsmVUtefWMWQsGgFffqWSK03pZ1vfDki4IVIIUxxDKnGBzqNgv0A7SB1oXtVNEkcVO8xi1ZrTL29HhSu5kGA==",
       "dev": true
     },
     "@csstools/css-tokenizer": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.1.1.tgz",
-      "integrity": "sha512-GbrTj2Z8MCTUv+52GE0RbFGM527xuXZ0Xa5g0Z+YN573uveS4G0qi6WNOMyz3yrFM/jaILTTwJ0+umx81EzqfA==",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.2.0.tgz",
+      "integrity": "sha512-wErmsWCbsmig8sQKkM6pFhr/oPha1bHfvxsUY5CYSQxwyhA9Ulrs8EqCgClhg4Tgg2XapVstGqSVcz0xOYizZA==",
       "dev": true
     },
     "@csstools/media-query-list-parser": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.0.tgz",
-      "integrity": "sha512-MXkR+TeaS2q9IkpyO6jVCdtA/bfpABJxIrfkLswThFN8EZZgI2RfAHhm6sDNDuYV25d5+b8Lj1fpTccIcSLPsQ==",
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.4.tgz",
+      "integrity": "sha512-V/OUXYX91tAC1CDsiY+HotIcJR+vPtzrX8pCplCpT++i8ThZZsq5F5dzZh/bDM3WUOjrvC1ljed1oSJxMfjqhw==",
       "dev": true
     },
     "@csstools/selector-specificity": {
@@ -22235,20 +22312,20 @@
       }
     },
     "@eslint-community/regexpp": {
-      "version": "4.5.1",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.5.1.tgz",
-      "integrity": "sha512-Z5ba73P98O1KUYCCJTUeVpja9RcGoMdncZ6T49FCUl2lN38JtCJ+3WgIDBv0AuY4WChU5PmtJmOCTlN6FZTFKQ==",
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.8.0.tgz",
+      "integrity": "sha512-JylOEEzDiOryeUnFbQz+oViCXS0KsvR1mvHkoMiu5+UiBvy+RYX7tzlIIIEstF/gVa2tj9AQXk3dgnxv6KxhFg==",
       "dev": true
     },
     "@eslint/eslintrc": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.0.3.tgz",
-      "integrity": "sha512-+5gy6OQfk+xx3q0d6jGZZC3f3KzAkXc/IanVxd1is/VIIziRqqt3ongQz0FiTUXqTk0c7aDB3OaFuKnuSoJicQ==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.2.tgz",
+      "integrity": "sha512-+wvgpDsrB1YqAMdEUCcnTlpfVBH7Vqn6A/NT3D8WVXFIaKMlErPIZT3oCIAVCOtarRpMtelZLqJeU3t7WY6X6g==",
       "dev": true,
       "requires": {
         "ajv": "^6.12.4",
         "debug": "^4.3.2",
-        "espree": "^9.5.2",
+        "espree": "^9.6.0",
         "globals": "^13.19.0",
         "ignore": "^5.2.0",
         "import-fresh": "^3.2.1",
@@ -22278,9 +22355,9 @@
       }
     },
     "@eslint/js": {
-      "version": "8.42.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.42.0.tgz",
-      "integrity": "sha512-6SWlXpWU5AvId8Ac7zjzmIOqMOba/JWY8XZ4A7q7Gn1Vlfg/SFFIlrtHXt9nPn4op9ZPAkl91Jao+QQv3r/ukw==",
+      "version": "8.48.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.48.0.tgz",
+      "integrity": "sha512-ZSjtmelB7IJfWD2Fvb7+Z+ChTIKWq6kjda95fLcQKNS5aheVHn4IkfgRQE3sIIzTcSLwLcLZUD9UBt+V7+h+Pw==",
       "dev": true
     },
     "@esm-bundle/chai": {
@@ -22318,9 +22395,9 @@
       "dev": true
     },
     "@humanwhocodes/config-array": {
-      "version": "0.11.10",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",
-      "integrity": "sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ==",
+      "version": "0.11.11",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.11.tgz",
+      "integrity": "sha512-N2brEuAadi0CcdeMXUkhbZB84eskAc8MEX1By6qEchoVywSgXPIjou4rYsl0V3Hj0ZnuGycGCjdNgockbzeWNA==",
       "dev": true,
       "requires": {
         "@humanwhocodes/object-schema": "^1.2.1",
@@ -22441,9 +22518,9 @@
       "dev": true
     },
     "@jridgewell/source-map": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.3.tgz",
-      "integrity": "sha512-b+fsZXeLYi9fEULmfBrhxn4IrPlINf8fiNarzTof004v3lFdntdwa9PF7vFJqm3mg7s+ScJMxXaE3Acp1irZcg==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.5.tgz",
+      "integrity": "sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==",
       "dev": true,
       "requires": {
         "@jridgewell/gen-mapping": "^0.3.0",
@@ -23679,9 +23756,9 @@
       }
     },
     "@tylertech/forge-build-tools": {
-      "version": "3.0.0-next.5",
-      "resolved": "https://registry.npmjs.org/@tylertech/forge-build-tools/-/forge-build-tools-3.0.0-next.5.tgz",
-      "integrity": "sha512-Co5BZs1g9nhUPtczqbpovJHVjMj8C3sYzk1CFN/koJR33hCJJ8ENBNnIhUq2aPPJkd4WwtD7ZbI17ILjUIU2Kg==",
+      "version": "3.0.0-next.6",
+      "resolved": "https://registry.npmjs.org/@tylertech/forge-build-tools/-/forge-build-tools-3.0.0-next.6.tgz",
+      "integrity": "sha512-0DuV79UdObX1DsZqkTo73MZGAnR/OIpPf/MH4cZWwp6nuA6i0m1HV6FmimBR/DjZB6BTNxvk9QbunsgADuxEBg==",
       "dev": true,
       "requires": {
         "autoprefixer": "10.4.14",
@@ -23710,12 +23787,32 @@
         "webpack-merge": "^5.9.0"
       },
       "dependencies": {
+        "@csstools/selector-specificity": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.0.tgz",
+          "integrity": "sha512-hBI9tfBtuPIi885ZsZ32IMEU/5nlZH/KOVYJCOh7gyMxaVLGmLedYqFN6Ui1LXkI8JlC8IsuC0rF0btcRZKd5g==",
+          "dev": true
+        },
         "ansi-regex": {
           "version": "5.0.1",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
           "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
           "dev": true
         },
+        "autoprefixer": {
+          "version": "10.4.14",
+          "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
+          "integrity": "sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==",
+          "dev": true,
+          "requires": {
+            "browserslist": "^4.21.5",
+            "caniuse-lite": "^1.0.30001464",
+            "fraction.js": "^4.2.0",
+            "normalize-range": "^0.1.2",
+            "picocolors": "^1.0.0",
+            "postcss-value-parser": "^4.2.0"
+          }
+        },
         "brace-expansion": {
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -23731,45 +23828,61 @@
           "integrity": "sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==",
           "dev": true
         },
+        "camelcase-keys": {
+          "version": "7.0.2",
+          "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-7.0.2.tgz",
+          "integrity": "sha512-Rjs1H+A9R+Ig+4E/9oyB66UC5Mj9Xq3N//vcLf2WzgdTi/3gUu3Z9KoqmlrEG4VuuLK8wJHofxzdQXz/knhiYg==",
+          "dev": true,
+          "requires": {
+            "camelcase": "^6.3.0",
+            "map-obj": "^4.1.0",
+            "quick-lru": "^5.1.1",
+            "type-fest": "^1.2.1"
+          },
+          "dependencies": {
+            "camelcase": {
+              "version": "6.3.0",
+              "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+              "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+              "dev": true
+            }
+          }
+        },
         "chalk": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.2.0.tgz",
-          "integrity": "sha512-ree3Gqw/nazQAPuJJEy+avdl7QfZMcUvmHIKgEZkGL+xOBzRvup5Hxo6LHuMceSxOabuJLJm5Yp/92R9eMmMvA==",
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+          "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
           "dev": true
         },
         "cosmiconfig": {
-          "version": "8.2.0",
-          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.2.0.tgz",
-          "integrity": "sha512-3rTMnFJA1tCOPwRxtgF4wd7Ab2qvDbL8jX+3smjIbS4HlZBagTlpERbdN7iAbWlrfxE3M8c27kTwTawQ7st+OQ==",
+          "version": "8.3.4",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.4.tgz",
+          "integrity": "sha512-SF+2P8+o/PTV05rgsAjDzL4OFdVXAulSfC/L19VaeVT7+tpOOSscCt2QLxDZ+CLxF2WOiq6y1K5asvs8qUJT/Q==",
           "dev": true,
           "requires": {
-            "import-fresh": "^3.2.1",
+            "import-fresh": "^3.3.0",
             "js-yaml": "^4.1.0",
-            "parse-json": "^5.0.0",
+            "parse-json": "^5.2.0",
             "path-type": "^4.0.0"
           }
         },
-        "find-up": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-          "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-          "dev": true,
-          "requires": {
-            "locate-path": "^5.0.0",
-            "path-exists": "^4.0.0"
-          }
+        "decamelize": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-5.0.1.tgz",
+          "integrity": "sha512-VfxadyCECXgQlkoEAjeghAr5gY3Hf+IKjKb+X8tGVDtveCjN+USwprd2q3QXBR9T1+x2DG0XZF5/w+7HAtSaXA==",
+          "dev": true
         },
         "glob": {
-          "version": "10.2.7",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-10.2.7.tgz",
-          "integrity": "sha512-jTKehsravOJo8IJxUGfZILnkvVJM/MOfHRs8QcXolVef2zNI9Tqyy5+SeuOAZd3upViEZQLyFpQhYiHLrMUNmA==",
+          "version": "10.3.4",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.4.tgz",
+          "integrity": "sha512-6LFElP3A+i/Q8XQKEvZjkEWEOTgAIALR9AO2rwT8bgPhDd1anmqDJDZ6lLddI4ehxxxR1S5RIqKe1uapMQfYaQ==",
           "dev": true,
           "requires": {
             "foreground-child": "^3.1.0",
             "jackspeak": "^2.0.3",
             "minimatch": "^9.0.1",
-            "minipass": "^5.0.0 || ^6.0.2",
-            "path-scurry": "^1.7.0"
+            "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0",
+            "path-scurry": "^1.10.1"
           }
         },
         "globby": {
@@ -23794,140 +23907,90 @@
             }
           }
         },
-        "hosted-git-info": {
-          "version": "2.8.9",
-          "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
-          "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
+        "indent-string": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-5.0.0.tgz",
+          "integrity": "sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==",
           "dev": true
         },
         "known-css-properties": {
-          "version": "0.27.0",
-          "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.27.0.tgz",
-          "integrity": "sha512-uMCj6+hZYDoffuvAJjFAPz56E9uoowFHmTkqRtRq5WyC5Q6Cu/fTZKNQpX/RbzChBYLLl3lo8CjFZBAZXq9qFg==",
+          "version": "0.28.0",
+          "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.28.0.tgz",
+          "integrity": "sha512-9pSL5XB4J+ifHP0e0jmmC98OGC1nL8/JjS+fi6mnTlIf//yt/MfVLtKg7S6nCtj/8KTcWX7nRlY0XywoYY1ISQ==",
           "dev": true
         },
-        "locate-path": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-          "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-          "dev": true,
-          "requires": {
-            "p-locate": "^4.1.0"
-          }
-        },
         "meow": {
-          "version": "9.0.0",
-          "resolved": "https://registry.npmjs.org/meow/-/meow-9.0.0.tgz",
-          "integrity": "sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==",
+          "version": "10.1.5",
+          "resolved": "https://registry.npmjs.org/meow/-/meow-10.1.5.tgz",
+          "integrity": "sha512-/d+PQ4GKmGvM9Bee/DPa8z3mXs/pkvJE2KEThngVNOqtmljC6K7NMPxtc2JeZYTmpWb9k/TmxjeL18ez3h7vCw==",
           "dev": true,
           "requires": {
-            "@types/minimist": "^1.2.0",
-            "camelcase-keys": "^6.2.2",
-            "decamelize": "^1.2.0",
+            "@types/minimist": "^1.2.2",
+            "camelcase-keys": "^7.0.0",
+            "decamelize": "^5.0.0",
             "decamelize-keys": "^1.1.0",
             "hard-rejection": "^2.1.0",
             "minimist-options": "4.1.0",
-            "normalize-package-data": "^3.0.0",
-            "read-pkg-up": "^7.0.1",
-            "redent": "^3.0.0",
-            "trim-newlines": "^3.0.0",
-            "type-fest": "^0.18.0",
-            "yargs-parser": "^20.2.3"
+            "normalize-package-data": "^3.0.2",
+            "read-pkg-up": "^8.0.0",
+            "redent": "^4.0.0",
+            "trim-newlines": "^4.0.2",
+            "type-fest": "^1.2.2",
+            "yargs-parser": "^20.2.9"
           }
         },
         "minimatch": {
-          "version": "9.0.1",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.1.tgz",
-          "integrity": "sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==",
+          "version": "9.0.3",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
+          "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
           "dev": true,
           "requires": {
             "brace-expansion": "^2.0.1"
           }
         },
         "minipass": {
-          "version": "6.0.2",
-          "resolved": "https://registry.npmjs.org/minipass/-/minipass-6.0.2.tgz",
-          "integrity": "sha512-MzWSV5nYVT7mVyWCwn2o7JH13w2TBRmmSqSRCKzTw+lmft9X4z+3wjvs06Tzijo5z4W/kahUCDpRXTF+ZrmF/w==",
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.3.tgz",
+          "integrity": "sha512-LhbbwCfz3vsb12j/WkWQPZfKTsgqIe1Nf/ti1pKjYESGLHIVjWU96G9/ljLH4F9mWNVhlQOm0VySdAWzf05dpg==",
           "dev": true
         },
-        "p-limit": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-          "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-          "dev": true,
-          "requires": {
-            "p-try": "^2.0.0"
-          }
-        },
-        "p-locate": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-          "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-          "dev": true,
-          "requires": {
-            "p-limit": "^2.2.0"
-          }
+        "quick-lru": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
+          "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
+          "dev": true
         },
         "read-pkg": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
-          "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==",
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-6.0.0.tgz",
+          "integrity": "sha512-X1Fu3dPuk/8ZLsMhEj5f4wFAF0DWoK7qhGJvgaijocXxBmSToKfbFtqbxMO7bVjNA1dmE5huAzjXj/ey86iw9Q==",
           "dev": true,
           "requires": {
             "@types/normalize-package-data": "^2.4.0",
-            "normalize-package-data": "^2.5.0",
-            "parse-json": "^5.0.0",
-            "type-fest": "^0.6.0"
-          },
-          "dependencies": {
-            "normalize-package-data": {
-              "version": "2.5.0",
-              "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
-              "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
-              "dev": true,
-              "requires": {
-                "hosted-git-info": "^2.1.4",
-                "resolve": "^1.10.0",
-                "semver": "2 || 3 || 4 || 5",
-                "validate-npm-package-license": "^3.0.1"
-              }
-            },
-            "type-fest": {
-              "version": "0.6.0",
-              "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
-              "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
-              "dev": true
-            }
+            "normalize-package-data": "^3.0.2",
+            "parse-json": "^5.2.0",
+            "type-fest": "^1.0.1"
           }
         },
         "read-pkg-up": {
-          "version": "7.0.1",
-          "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-7.0.1.tgz",
-          "integrity": "sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==",
+          "version": "8.0.0",
+          "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-8.0.0.tgz",
+          "integrity": "sha512-snVCqPczksT0HS2EC+SxUndvSzn6LRCwpfSvLrIfR5BKDQQZMaI6jPRC9dYvYFDRAuFEAnkwww8kBBNE/3VvzQ==",
           "dev": true,
           "requires": {
-            "find-up": "^4.1.0",
-            "read-pkg": "^5.2.0",
-            "type-fest": "^0.8.1"
-          },
-          "dependencies": {
-            "type-fest": {
-              "version": "0.8.1",
-              "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
-              "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
-              "dev": true
-            }
+            "find-up": "^5.0.0",
+            "read-pkg": "^6.0.0",
+            "type-fest": "^1.0.1"
           }
         },
-        "resolve": {
-          "version": "1.22.2",
-          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz",
-          "integrity": "sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==",
+        "redent": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/redent/-/redent-4.0.0.tgz",
+          "integrity": "sha512-tYkDkVVtYkSVhuQ4zBgfvciymHaeuel+zFKXShfDnFP5SyVEP7qo70Rf1jTOTCx3vGNAbnEi/xFkcfQVMIBWag==",
           "dev": true,
           "requires": {
-            "is-core-module": "^2.11.0",
-            "path-parse": "^1.0.7",
-            "supports-preserve-symlinks-flag": "^1.0.0"
+            "indent-string": "^5.0.0",
+            "strip-indent": "^4.0.0"
           }
         },
         "rimraf": {
@@ -23939,16 +24002,10 @@
             "glob": "^10.2.5"
           }
         },
-        "semver": {
-          "version": "5.7.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-          "dev": true
-        },
         "signal-exit": {
-          "version": "4.0.2",
-          "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.0.2.tgz",
-          "integrity": "sha512-MY2/qGx4enyjprQnFaZsHib3Yadh3IXyV2C321GY0pjGfVBu4un0uDJkwgdxqO+Rdx8JMT8IfJIRwbYVz3Ob3Q==",
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+          "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
           "dev": true
         },
         "slash": {
@@ -23966,23 +24023,32 @@
             "ansi-regex": "^5.0.1"
           }
         },
+        "strip-indent": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-4.0.0.tgz",
+          "integrity": "sha512-mnVSV2l+Zv6BLpSD/8V87CW/y9EmmbYzGCIavsnsI6/nwn26DwffM/yztm30Z/I2DY9wdS3vXVCMnHDgZaVNoA==",
+          "dev": true,
+          "requires": {
+            "min-indent": "^1.0.1"
+          }
+        },
         "stylelint": {
-          "version": "15.7.0",
-          "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.7.0.tgz",
-          "integrity": "sha512-fQRwHwWuZsDn4ENyE9AsKkOkV9WlD2CmYiVDbdZPdS3iZh0ceypOn1EuwTNuZ8xTrHF+jVeIEzLtFFSlD/nJHg==",
+          "version": "15.10.3",
+          "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.10.3.tgz",
+          "integrity": "sha512-aBQMMxYvFzJJwkmg+BUUg3YfPyeuCuKo2f+LOw7yYbU8AZMblibwzp9OV4srHVeQldxvSFdz0/Xu8blq2AesiA==",
           "dev": true,
           "requires": {
-            "@csstools/css-parser-algorithms": "^2.2.0",
-            "@csstools/css-tokenizer": "^2.1.1",
-            "@csstools/media-query-list-parser": "^2.1.0",
-            "@csstools/selector-specificity": "^2.2.0",
+            "@csstools/css-parser-algorithms": "^2.3.1",
+            "@csstools/css-tokenizer": "^2.2.0",
+            "@csstools/media-query-list-parser": "^2.1.4",
+            "@csstools/selector-specificity": "^3.0.0",
             "balanced-match": "^2.0.0",
             "colord": "^2.9.3",
             "cosmiconfig": "^8.2.0",
-            "css-functions-list": "^3.1.0",
+            "css-functions-list": "^3.2.0",
             "css-tree": "^2.3.1",
             "debug": "^4.3.4",
-            "fast-glob": "^3.2.12",
+            "fast-glob": "^3.3.1",
             "fastest-levenshtein": "^1.0.16",
             "file-entry-cache": "^6.0.1",
             "global-modules": "^2.0.0",
@@ -23993,14 +24059,13 @@
             "import-lazy": "^4.0.0",
             "imurmurhash": "^0.1.4",
             "is-plain-object": "^5.0.0",
-            "known-css-properties": "^0.27.0",
+            "known-css-properties": "^0.28.0",
             "mathml-tag-names": "^2.1.3",
-            "meow": "^9.0.0",
+            "meow": "^10.1.5",
             "micromatch": "^4.0.5",
             "normalize-path": "^3.0.0",
             "picocolors": "^1.0.0",
-            "postcss": "^8.4.24",
-            "postcss-media-query-parser": "^0.2.3",
+            "postcss": "^8.4.27",
             "postcss-resolve-nested-selector": "^0.1.1",
             "postcss-safe-parser": "^6.0.0",
             "postcss-selector-parser": "^6.0.13",
@@ -24012,7 +24077,6 @@
             "supports-hyperlinks": "^3.0.0",
             "svg-tags": "^1.0.0",
             "table": "^6.8.1",
-            "v8-compile-cache": "^2.3.0",
             "write-file-atomic": "^5.0.1"
           },
           "dependencies": {
@@ -24034,10 +24098,16 @@
             "supports-color": "^7.0.0"
           }
         },
+        "trim-newlines": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-4.1.1.tgz",
+          "integrity": "sha512-jRKj0n0jXWo6kh62nA5TEh3+4igKDXLvzBJcPpiizP7oOolUrYIxmVBG9TOtHYFHoddUk6YvAkGeGoSVTXfQXQ==",
+          "dev": true
+        },
         "type-fest": {
-          "version": "0.18.1",
-          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.18.1.tgz",
-          "integrity": "sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==",
+          "version": "1.4.0",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-1.4.0.tgz",
+          "integrity": "sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==",
           "dev": true
         },
         "write-file-atomic": {
@@ -24053,13 +24123,13 @@
       }
     },
     "@tylertech/forge-cli": {
-      "version": "3.0.0-next.3",
-      "resolved": "https://registry.npmjs.org/@tylertech/forge-cli/-/forge-cli-3.0.0-next.3.tgz",
-      "integrity": "sha512-S0OzUuLc8komAtF43EqpGkBmx9/7cZhYl3Ct9PTwUTzImpwOVd8jlh6X3NU9VZL7AdsrLQrqMm3mRqDAQK/sXg==",
+      "version": "3.0.0-next.4",
+      "resolved": "https://registry.npmjs.org/@tylertech/forge-cli/-/forge-cli-3.0.0-next.4.tgz",
+      "integrity": "sha512-QLUVSDhomyWcJex3w0ffKz9gfjnhZxOzQO1Ud44GZab9z4PBhTjQbS1xhISFBQDnquxy+IOpHyc1hTQB1boBAQ==",
       "dev": true,
       "requires": {
         "@custom-elements-manifest/analyzer": "^0.8.3",
-        "@tylertech/forge-build-tools": "3.0.0-next.5",
+        "@tylertech/forge-build-tools": "3.0.0-next.6",
         "autoprefixer": "^10.4.14",
         "browser-sync": "^2.29.3",
         "canonical-path": "^1.0.0",
@@ -24377,9 +24447,9 @@
       "dev": true
     },
     "@types/eslint": {
-      "version": "8.40.2",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.40.2.tgz",
-      "integrity": "sha512-PRVjQ4Eh9z9pmmtaq8nTjZjQwKFk7YIHIud3lRoKRBgUQjgjRmoGxxGEPXQkF+lH7QkHJRNr5F4aBgYCW0lqpQ==",
+      "version": "8.44.2",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.2.tgz",
+      "integrity": "sha512-sdPRb9K6iL5XZOmBubg8yiFp5yS/JdUDQsq5e6h95km91MCYMuvp7mh1fjPEYUhvHepKpZOjnEaMBR4PxjWDzg==",
       "dev": true,
       "requires": {
         "@types/estree": "*",
@@ -25836,13 +25906,13 @@
       }
     },
     "autoprefixer": {
-      "version": "10.4.14",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
-      "integrity": "sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==",
+      "version": "10.4.15",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.15.tgz",
+      "integrity": "sha512-KCuPB8ZCIqFdA4HwKXsvz7j6gvSDNhDP7WnUjBleRkKjPdvCmHFuQ77ocavI8FT6NdvlBnE2UFr2H4Mycn8Vew==",
       "dev": true,
       "requires": {
-        "browserslist": "^4.21.5",
-        "caniuse-lite": "^1.0.30001464",
+        "browserslist": "^4.21.10",
+        "caniuse-lite": "^1.0.30001520",
         "fraction.js": "^4.2.0",
         "normalize-range": "^0.1.2",
         "picocolors": "^1.0.0",
@@ -26374,15 +26444,15 @@
       }
     },
     "browserslist": {
-      "version": "4.21.5",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.5.tgz",
-      "integrity": "sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==",
+      "version": "4.21.10",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.10.tgz",
+      "integrity": "sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==",
       "dev": true,
       "requires": {
-        "caniuse-lite": "^1.0.30001449",
-        "electron-to-chromium": "^1.4.284",
-        "node-releases": "^2.0.8",
-        "update-browserslist-db": "^1.0.10"
+        "caniuse-lite": "^1.0.30001517",
+        "electron-to-chromium": "^1.4.477",
+        "node-releases": "^2.0.13",
+        "update-browserslist-db": "^1.0.11"
       }
     },
     "bs-recipes": {
@@ -26582,9 +26652,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001487",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001487.tgz",
-      "integrity": "sha512-83564Z3yWGqXsh2vaH/mhXfEM0wX+NlBCm1jYHOb97TrTWJEmPTccZgeLTPBUUb0PNVo+oomb7wkimZBIERClA==",
+      "version": "1.0.30001527",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001527.tgz",
+      "integrity": "sha512-YkJi7RwPgWtXVSgK4lG9AHH57nSzvvOp9MesgXmw4Q7n0C3H04L0foHqfxcmSAm5AcWb8dW9AYj2tR7/5GnddQ==",
       "dev": true
     },
     "canonical-path": {
@@ -27453,9 +27523,9 @@
       }
     },
     "css-functions-list": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.1.0.tgz",
-      "integrity": "sha512-/9lCvYZaUbBGvYUgYGFJ4dcYiyqdhSjG7IPVluoV8A1ILjkF7ilmhp1OGUz8n+nmBcu0RNrQAzgD8B6FJbrt2w==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.0.tgz",
+      "integrity": "sha512-d/jBMPyYybkkLVypgtGv12R+pIFw4/f/IHtCTxWpZc8ofTYOPigIgmA6vu5rMHartZC+WuXhBUHfnyNUIQSYrg==",
       "dev": true
     },
     "css-loader": {
@@ -27679,9 +27749,9 @@
       }
     },
     "del": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/del/-/del-7.0.0.tgz",
-      "integrity": "sha512-tQbV/4u5WVB8HMJr08pgw0b6nG4RGt/tj+7Numvq+zqcvUFeMaIWWOUFltiU+6go8BSO2/ogsB4EasDaj0y68Q==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/del/-/del-7.1.0.tgz",
+      "integrity": "sha512-v2KyNk7efxhlyHpjEvfyxaAihKKK0nWCuf6ZtqZcFFpQRG0bJ12Qsr0RpvsICMjAAZ8DOVCxrlqpxISlMHC4Kg==",
       "dev": true,
       "requires": {
         "globby": "^13.1.2",
@@ -27720,14 +27790,14 @@
           "dev": true
         },
         "globby": {
-          "version": "13.1.4",
-          "resolved": "https://registry.npmjs.org/globby/-/globby-13.1.4.tgz",
-          "integrity": "sha512-iui/IiiW+QrJ1X1hKH5qwlMQyv34wJAYwH1vrf8b9kBA4sNiif3gKsMHa+BrdnOpEudWjpotfa7LrTzB1ERS/g==",
+          "version": "13.2.2",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-13.2.2.tgz",
+          "integrity": "sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==",
           "dev": true,
           "requires": {
             "dir-glob": "^3.0.1",
-            "fast-glob": "^3.2.11",
-            "ignore": "^5.2.0",
+            "fast-glob": "^3.3.0",
+            "ignore": "^5.2.4",
             "merge2": "^1.4.1",
             "slash": "^4.0.0"
           }
@@ -27952,9 +28022,9 @@
       }
     },
     "electron-to-chromium": {
-      "version": "1.4.396",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.396.tgz",
-      "integrity": "sha512-pqKTdqp/c5vsrc0xUPYXTDBo9ixZuGY8es4ZOjjd6HD6bFYbu5QA09VoW3fkY4LF1T0zYk86lN6bZnNlBuOpdQ==",
+      "version": "1.4.508",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.508.tgz",
+      "integrity": "sha512-FFa8QKjQK/A5QuFr2167myhMesGrhlOBD+3cYNxO9/S4XzHEXesyTD/1/xF644gC8buFPz3ca6G1LOQD0tZrrg==",
       "dev": true
     },
     "emoji-regex": {
@@ -28406,27 +28476,27 @@
       "dev": true
     },
     "eslint": {
-      "version": "8.42.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.42.0.tgz",
-      "integrity": "sha512-ulg9Ms6E1WPf67PHaEY4/6E2tEn5/f7FXGzr3t9cBMugOmf1INYvuUwwh1aXQN4MfJ6a5K2iNwP3w4AColvI9A==",
+      "version": "8.48.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.48.0.tgz",
+      "integrity": "sha512-sb6DLeIuRXxeM1YljSe1KEx9/YYeZFQWcV8Rq9HfigmdDEugjLEVEa1ozDjL6YDjBpQHPJxJzze+alxi4T3OLg==",
       "dev": true,
       "requires": {
         "@eslint-community/eslint-utils": "^4.2.0",
-        "@eslint-community/regexpp": "^4.4.0",
-        "@eslint/eslintrc": "^2.0.3",
-        "@eslint/js": "8.42.0",
+        "@eslint-community/regexpp": "^4.6.1",
+        "@eslint/eslintrc": "^2.1.2",
+        "@eslint/js": "8.48.0",
         "@humanwhocodes/config-array": "^0.11.10",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
-        "ajv": "^6.10.0",
+        "ajv": "^6.12.4",
         "chalk": "^4.0.0",
         "cross-spawn": "^7.0.2",
         "debug": "^4.3.2",
         "doctrine": "^3.0.0",
         "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^7.2.0",
-        "eslint-visitor-keys": "^3.4.1",
-        "espree": "^9.5.2",
+        "eslint-scope": "^7.2.2",
+        "eslint-visitor-keys": "^3.4.3",
+        "espree": "^9.6.1",
         "esquery": "^1.4.2",
         "esutils": "^2.0.2",
         "fast-deep-equal": "^3.1.3",
@@ -28436,7 +28506,6 @@
         "globals": "^13.19.0",
         "graphemer": "^1.4.0",
         "ignore": "^5.2.0",
-        "import-fresh": "^3.0.0",
         "imurmurhash": "^0.1.4",
         "is-glob": "^4.0.0",
         "is-path-inside": "^3.0.3",
@@ -28446,9 +28515,8 @@
         "lodash.merge": "^4.6.2",
         "minimatch": "^3.1.2",
         "natural-compare": "^1.4.0",
-        "optionator": "^0.9.1",
+        "optionator": "^0.9.3",
         "strip-ansi": "^6.0.1",
-        "strip-json-comments": "^3.1.0",
         "text-table": "^0.2.0"
       },
       "dependencies": {
@@ -28471,9 +28539,9 @@
           "dev": true
         },
         "eslint-scope": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.0.tgz",
-          "integrity": "sha512-DYj5deGlHBfMt15J7rdtyKNq/Nqlv5KfU4iodrQ019XESsRnwXH9KAE0y3cwtUHDo2ob7CypAnCqefh6vioWRw==",
+          "version": "7.2.2",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
+          "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
           "dev": true,
           "requires": {
             "esrecurse": "^4.3.0",
@@ -28533,18 +28601,18 @@
       }
     },
     "eslint-visitor-keys": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.1.tgz",
-      "integrity": "sha512-pZnmmLwYzf+kWaM/Qgrvpen51upAktaaiI01nsJD/Yr3lMOdNtq0cxkrrg16w64VtisN6okbs7Q8AfGqj4c9fA==",
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
       "dev": true
     },
     "espree": {
-      "version": "9.5.2",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-9.5.2.tgz",
-      "integrity": "sha512-7OASN1Wma5fum5SrNhFMAMJxOUAbhyfQ8dQ//PJaJbNw0URTPWqIghHWt1MmAANKhHZIYOHruW4Kw4ruUWOdGw==",
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
+      "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
       "dev": true,
       "requires": {
-        "acorn": "^8.8.0",
+        "acorn": "^8.9.0",
         "acorn-jsx": "^5.3.2",
         "eslint-visitor-keys": "^3.4.1"
       }
@@ -28694,9 +28762,9 @@
       "dev": true
     },
     "fast-glob": {
-      "version": "3.2.12",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
-      "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
+      "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==",
       "dev": true,
       "requires": {
         "@nodelib/fs.stat": "^2.0.2",
@@ -28952,9 +29020,9 @@
       "dev": true
     },
     "fraction.js": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
-      "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.6.tgz",
+      "integrity": "sha512-n2aZ9tNfYDwaHhvFTkhFErqOMIb8uyzSQ+vGJBjZyanAKZVbGUQ1sngfk9FdkBw7G26O7AgNjLcecLffD1c7eg==",
       "dev": true
     },
     "fresh": {
@@ -29409,9 +29477,9 @@
       }
     },
     "globals": {
-      "version": "13.20.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz",
-      "integrity": "sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==",
+      "version": "13.21.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.21.0.tgz",
+      "integrity": "sha512-ybyme3s4yy/t/3s35bewwXKOf7cvzfreG2lH0lZl0JB7I4GxRP2ghxOK/Nb9EkRXdbBXZLfq/p/0W2JUONB/Gg==",
       "dev": true,
       "requires": {
         "type-fest": "^0.20.2"
@@ -30246,9 +30314,9 @@
       }
     },
     "is-core-module": {
-      "version": "2.12.0",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.12.0.tgz",
-      "integrity": "sha512-RECHCBCd/viahWmwj6enj19sKbHfJrddi/6cBDsNTKbNq0f7VeaUkBo60BqzvPqo/W54ChS62Z5qyun7cfOMqQ==",
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.0.tgz",
+      "integrity": "sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==",
       "dev": true,
       "requires": {
         "has": "^1.0.3"
@@ -32727,9 +32795,9 @@
       }
     },
     "node-releases": {
-      "version": "2.0.10",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.10.tgz",
-      "integrity": "sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==",
+      "version": "2.0.13",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz",
+      "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==",
       "dev": true
     },
     "nopt": {
@@ -33165,17 +33233,17 @@
       }
     },
     "optionator": {
-      "version": "0.9.1",
-      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
-      "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz",
+      "integrity": "sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==",
       "dev": true,
       "requires": {
+        "@aashutoshrathi/word-wrap": "^1.2.3",
         "deep-is": "^0.1.3",
         "fast-levenshtein": "^2.0.6",
         "levn": "^0.4.1",
         "prelude-ls": "^1.2.1",
-        "type-check": "^0.4.0",
-        "word-wrap": "^1.2.3"
+        "type-check": "^0.4.0"
       }
     },
     "ora": {
@@ -33202,9 +33270,9 @@
           "dev": true
         },
         "chalk": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.2.0.tgz",
-          "integrity": "sha512-ree3Gqw/nazQAPuJJEy+avdl7QfZMcUvmHIKgEZkGL+xOBzRvup5Hxo6LHuMceSxOabuJLJm5Yp/92R9eMmMvA==",
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+          "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
           "dev": true
         },
         "cli-cursor": {
@@ -33478,13 +33546,13 @@
       "dev": true
     },
     "path-scurry": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.9.1.tgz",
-      "integrity": "sha512-UgmoiySyjFxP6tscZDgWGEAgsW5ok8W3F5CJDnnH2pozwSTGE6eH7vwTotMwATWA2r5xqdkKdxYPkwlJjAI/3g==",
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.10.1.tgz",
+      "integrity": "sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==",
       "dev": true,
       "requires": {
-        "lru-cache": "^9.1.1",
-        "minipass": "^5.0.0 || ^6.0.0"
+        "lru-cache": "^9.1.1 || ^10.0.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
       },
       "dependencies": {
         "lru-cache": {
@@ -33494,9 +33562,9 @@
           "dev": true
         },
         "minipass": {
-          "version": "6.0.1",
-          "resolved": "https://registry.npmjs.org/minipass/-/minipass-6.0.1.tgz",
-          "integrity": "sha512-Tenl5QPpgozlOGBiveNYHg2f6y+VpxsXRoIHFUVJuSmTonXRAE6q9b8Mp/O46762/2AlW4ye4Nkyvx0fgWDKbw==",
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.3.tgz",
+          "integrity": "sha512-LhbbwCfz3vsb12j/WkWQPZfKTsgqIe1Nf/ti1pKjYESGLHIVjWU96G9/ljLH4F9mWNVhlQOm0VySdAWzf05dpg==",
           "dev": true
         }
       }
@@ -33672,9 +33740,9 @@
       }
     },
     "postcss": {
-      "version": "8.4.24",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
-      "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==",
+      "version": "8.4.29",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.29.tgz",
+      "integrity": "sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==",
       "dev": true,
       "requires": {
         "nanoid": "^3.3.6",
@@ -34590,9 +34658,9 @@
       "dev": true
     },
     "sass": {
-      "version": "1.63.4",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.63.4.tgz",
-      "integrity": "sha512-Sx/+weUmK+oiIlI+9sdD0wZHsqpbgQg8wSwSnGBjwb5GwqFhYNwwnI+UWZtLjKvKyFlKkatRK235qQ3mokyPoQ==",
+      "version": "1.66.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.66.1.tgz",
+      "integrity": "sha512-50c+zTsZOJVgFfTgwwEzkjA3/QACgdNsKueWPyAR0mRINIvLAStVQBbPg14iuqEQ74NPDbXzJARJ/O4SI1zftA==",
       "dev": true,
       "requires": {
         "chokidar": ">=3.0.0 <4.0.0",
@@ -34601,9 +34669,9 @@
       },
       "dependencies": {
         "immutable": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz",
-          "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==",
+          "version": "4.3.4",
+          "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
+          "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==",
           "dev": true
         }
       }
@@ -36696,9 +36764,9 @@
       "dev": true
     },
     "webpack": {
-      "version": "5.87.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.87.0.tgz",
-      "integrity": "sha512-GOu1tNbQ7p1bDEoFRs2YPcfyGs8xq52yyPBZ3m2VGnXGtV9MxjrkABHm4V9Ia280OefsSLzvbVoXcfLxjKY/Iw==",
+      "version": "5.88.2",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.88.2.tgz",
+      "integrity": "sha512-JmcgNZ1iKj+aiR0OvTYtWQqJwq37Pf683dY9bVORwVbUrDhLhdn/PlO2sHsFHPkj7sHNQF3JwaAkp49V+Sq1tQ==",
       "dev": true,
       "requires": {
         "@types/eslint-scope": "^3.7.3",
@@ -36875,12 +36943,6 @@
       "integrity": "sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==",
       "dev": true
     },
-    "word-wrap": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
-      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
-      "dev": true
-    },
     "wordwrap": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
diff --git a/package.json b/package.json
index 4083842f4..2a6717a0d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tylertech/forge",
-  "version": "3.0.0-next.1",
+  "version": "3.0.0-next.11",
   "description": "Tyler Forge™ Web Components library",
   "license": "Apache-2.0",
   "author": "Tyler Technologies, Inc.",
@@ -72,7 +72,7 @@
     "@esm-bundle/chai": "^4.3.4-fix.0",
     "@open-wc/testing": "^3.1.8",
     "@tylertech-eslint/eslint-plugin": "^1.0.9",
-    "@tylertech/forge-cli": "^3.0.0-next.3",
+    "@tylertech/forge-cli": "^3.0.0-next.4",
     "@tylertech/forge-testing": "^2.0.0",
     "@tylertech/stylelint-rules": "^4.3.4",
     "@types/jasmine": "^3.10.3",
diff --git a/src/dev/pages/autocomplete/autocomplete.ejs b/src/dev/pages/autocomplete/autocomplete.ejs
index e478a9cb6..b2c473917 100644
--- a/src/dev/pages/autocomplete/autocomplete.ejs
+++ b/src/dev/pages/autocomplete/autocomplete.ejs
@@ -4,6 +4,11 @@
       <forge-text-field>
         <input type="text" id="autocomplete-input" aria-label="Choose state" />
         <label for="autocomplete-input">Choose state</label>
+        <forge-icon-button slot="trailing" dense density-level="2">
+          <button type="button" data-forge-autocomplete-clear>
+            <forge-icon name="close"></forge-icon>
+          </button>
+        </forge-icon-button>
         <forge-icon slot="trailing" name="arrow_drop_down" data-forge-dropdown-icon></forge-icon>
       </forge-text-field>
     </forge-autocomplete>
diff --git a/src/dev/pages/avatar/avatar.ejs b/src/dev/pages/avatar/avatar.ejs
index 466dccc04..77eec2c6b 100644
--- a/src/dev/pages/avatar/avatar.ejs
+++ b/src/dev/pages/avatar/avatar.ejs
@@ -1,27 +1,27 @@
 <div class="vert">
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">w/Image URL</h3>
+    <h3 class="forge-typography--heading2">w/Image URL</h3>
     <div>
       <forge-avatar image-url="https://en.gravatar.com/userimage/27084046/aa996f464ca8f1ea69769cef1b76fbf9.jpg"></forge-avatar>
     </div>
   </div>
   
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">w/Text</h3>
+    <h3 class="forge-typography--heading2">w/Text</h3>
     <div>
       <forge-avatar text="Tyler Forge"></forge-avatar>
     </div>
   </div>
   
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">w/Custom Radius (10px)</h3>
+    <h3 class="forge-typography--heading2">w/Custom Radius (10px)</h3>
     <div>
       <forge-avatar text="Tyler Forge" style="--forge-avatar-radius: 10px;"></forge-avatar>
     </div>
   </div>
   
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">w/Icon</h3>
+    <h3 class="forge-typography--heading2">w/Icon</h3>
     <div>
       <forge-avatar style="--forge-avatar-theme-background: black;">
         <forge-icon name="face" external></forge-icon>
@@ -30,14 +30,14 @@
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">w/Custom Slotted Content and CSS Variable</h3>
+    <h3 class="forge-typography--heading2">w/Custom Slotted Content and CSS Variable</h3>
     <div>
       <forge-avatar style="--forge-avatar-theme-background: #ff0000; --forge-avatar-size: 24px; --forge-avatar-font-size: 16px;">A</forge-avatar>
     </div>
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">w/Invalid url</h3>
+    <h3 class="forge-typography--heading2">w/Invalid url</h3>
     <div>
       <forge-avatar image-url="https://httpstat.us/500" text="Invalid Url"></forge-avatar>
     </div>
diff --git a/src/dev/pages/badge/badge.ejs b/src/dev/pages/badge/badge.ejs
index 80d5f4bdd..e9f4817e3 100644
--- a/src/dev/pages/badge/badge.ejs
+++ b/src/dev/pages/badge/badge.ejs
@@ -31,7 +31,7 @@
 
   <div class="flex">
     <div class="vert">
-      <h3 class="forge-typography--subtitle1-secondary">Theme</h3>
+      <h3 class="forge-typography--heading2">Theme</h3>
       <forge-badge>Default</forge-badge>
       <forge-badge theme="danger">Danger</forge-badge>
       <forge-badge theme="warning">Warning</forge-badge>
@@ -40,7 +40,7 @@
       <forge-badge theme="info-secondary">Info (secondary)</forge-badge>
     </div>
     <div class="vert">
-      <h3 class="forge-typography--subtitle1-secondary">Strong theme</h3>
+      <h3 class="forge-typography--heading2">Strong theme</h3>
       <forge-badge strong>Default</forge-badge>
       <forge-badge theme="danger" strong>Danger</forge-badge>
       <forge-badge theme="warning" strong>Warning</forge-badge>
diff --git a/src/dev/pages/button-area/button-area.ejs b/src/dev/pages/button-area/button-area.ejs
new file mode 100644
index 000000000..2d1b76b60
--- /dev/null
+++ b/src/dev/pages/button-area/button-area.ejs
@@ -0,0 +1,46 @@
+<forge-card outlined>
+  <forge-button-area id="button-area">
+    <button slot="button" aria-labelledby="button-area-heading"></button>
+    <div class="flex-wrapper">
+      <div>
+        <div class="forge-typography--heading4" id="button-area-heading">Heading</div>
+        <div>Content</div>
+      </div>
+      <forge-icon-button data-forge-ignore>
+        <button>
+          <forge-icon name="favorite"></forge-icon>
+        </button>
+        <forge-tooltip>Like</forge-tooltip>
+      </forge-icon-button>
+      <forge-icon name="chevron_right"></forge-icon>
+    </div>
+  </forge-button-area>
+</forge-card>
+
+<br />
+
+<forge-card outlined>
+  <forge-expansion-panel id="expansion-panel">
+    <forge-button-area slot="header" id="expansion-panel-button-area">
+      <button slot="button" id="expansion-panel-button" aria-labelledby="expansion-panel-heading" aria-controls="expansion-panel-content" aria-expanded="false"></button>
+      <div class="flex-wrapper">
+        <div>
+          <div class="forge-typography--heading4" id="expansion-panel-heading">Expansion panel</div>
+          <div>Subheading</div>
+        </div>
+        <forge-icon-button data-forge-ignore>
+          <button>
+            <forge-icon name="favorite"></forge-icon>
+          </button>
+          <forge-tooltip>Like</forge-tooltip>
+        </forge-icon-button>
+        <forge-open-icon></forge-open-icon>
+      </div>
+    </forge-button-area>
+    <div role="group" class="expansion-panel-content" id="expansion-panel-content">
+      Expansion panel content
+    </div>
+  </forge-expansion-panel>
+</forge-card>
+
+<script type="module" src="button-area.ts"></script>
\ No newline at end of file
diff --git a/src/dev/pages/button-area/button-area.html b/src/dev/pages/button-area/button-area.html
new file mode 100644
index 000000000..a4211cdf2
--- /dev/null
+++ b/src/dev/pages/button-area/button-area.html
@@ -0,0 +1,11 @@
+<%-
+include('./src/partials/page.ejs', {
+  page: {
+    title: 'Button Area',
+    includePath: './pages/button-area/button-area.ejs',
+    options: [
+      { type: 'switch', label: 'Disabled', id: 'disabled-switch' }
+    ]
+  }
+})
+%>
\ No newline at end of file
diff --git a/src/dev/pages/button-area/button-area.scss b/src/dev/pages/button-area/button-area.scss
new file mode 100644
index 000000000..aa61a89df
--- /dev/null
+++ b/src/dev/pages/button-area/button-area.scss
@@ -0,0 +1,22 @@
+forge-card {
+  --forge-card-padding: 0 !important;
+}
+
+.flex-wrapper {
+  display: flex;
+  align-items: center;
+  margin: 16px;
+  
+  &>*:first-child {
+    margin-inline-end: auto;
+  }
+}
+
+forge-icon[name=chevron_right],
+forge-open-icon {
+  margin-inline-start: 8px;
+}
+
+.expansion-panel-content {
+  margin: 16px;
+}
\ No newline at end of file
diff --git a/src/dev/pages/button-area/button-area.ts b/src/dev/pages/button-area/button-area.ts
new file mode 100644
index 000000000..b2dbaab47
--- /dev/null
+++ b/src/dev/pages/button-area/button-area.ts
@@ -0,0 +1,28 @@
+import { IButtonAreaComponent, IExpansionPanelComponent, ISwitchComponent, IconRegistry } from '@tylertech/forge';
+import { tylIconChevronRight, tylIconFavorite } from '@tylertech/tyler-icons/standard';
+
+import '$src/shared';
+import '@tylertech/forge/button-area';
+import './button-area.scss';
+
+IconRegistry.define([
+  tylIconChevronRight,
+  tylIconFavorite
+]);
+
+const buttonArea = document.getElementById('button-area') as IButtonAreaComponent;
+buttonArea.addEventListener('click', () => alert('Click'));
+
+const expansionPanel = document.getElementById('expansion-panel') as IExpansionPanelComponent;
+const expansionPanelButtonArea = document.getElementById('expansion-panel-button-area') as IButtonAreaComponent;
+const expansionPanelButton = document.getElementById('expansion-panel-button');
+expansionPanel.addEventListener('forge-expansion-panel-toggle', (event: CustomEvent<boolean>) => {
+  expansionPanelButton.setAttribute('aria-expanded', event.detail.toString());
+});
+
+
+const disabledToggle = document.querySelector('#disabled-switch') as ISwitchComponent;
+disabledToggle.addEventListener('forge-switch-change', ({ detail: selected }) => {
+  buttonArea.disabled = selected;
+  expansionPanelButtonArea.disabled = selected;
+});
diff --git a/src/dev/pages/button-toggle/button-toggle.ejs b/src/dev/pages/button-toggle/button-toggle.ejs
index cea7fd1a2..21b17a383 100644
--- a/src/dev/pages/button-toggle/button-toggle.ejs
+++ b/src/dev/pages/button-toggle/button-toggle.ejs
@@ -1,4 +1,4 @@
-<h3 class="forge-typography--subtitle1-secondary">Static</h3>
+<h3 class="forge-typography--heading2">Static</h3>
 <forge-button-toggle-group id="button-toggle-group">
   <forge-button-toggle value="email" aria-label="By email">
     <forge-icon name="email" slot="leading"></forge-icon>
@@ -11,7 +11,7 @@
   </forge-button-toggle>
 </forge-button-toggle-group>
 
-<h3 class="forge-typography--subtitle1-secondary">Dynamic</h3>
+<h3 class="forge-typography--heading2">Dynamic</h3>
 <forge-button-toggle-group id="button-toggle-group-dynamic"></forge-button-toggle-group>
 
 <script type="module" src="button-toggle.ts"></script>
diff --git a/src/dev/pages/card/card.ejs b/src/dev/pages/card/card.ejs
index bbe4435fb..450b50892 100644
--- a/src/dev/pages/card/card.ejs
+++ b/src/dev/pages/card/card.ejs
@@ -1,6 +1,6 @@
 <forge-card class="demo-card">
   <forge-toolbar no-border>
-    <h3 class="forge-typography--headline5" slot="start">
+    <h3 class="forge-typography--heading4" slot="start">
       This is the card title
     </h3>
     <forge-icon-button slot="end">
@@ -10,7 +10,7 @@
     </forge-icon-button>
   </forge-toolbar>
 
-  <p class="card-body forge-typography--body2">
+  <p class="card-body forge-typography--body1">
     Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestias
     exercitationem doloremque dolorem ullam, nesciunt quia velit
     necessitatibus numquam quasi voluptates impedit earum dolores
diff --git a/src/dev/pages/checkbox/checkbox.ejs b/src/dev/pages/checkbox/checkbox.ejs
index 90ecc86fd..81e2662e3 100644
--- a/src/dev/pages/checkbox/checkbox.ejs
+++ b/src/dev/pages/checkbox/checkbox.ejs
@@ -1,38 +1,43 @@
 <div class="vert" id="container">
   <div>
-    <h3 class="forge-typography--subtitle1">Default</h3>
+    <h3 class="forge-typography--heading2">Default</h3>
     <forge-checkbox>Default</forge-checkbox>
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1">Exposed input</h3>
+    <h3 class="forge-typography--heading2">Exposed input</h3>
     <forge-checkbox id="exposed-input-checkbox">
       <span>Exposed input</span>
     </forge-checkbox>
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1">Dense</h3>
+    <h3 class="forge-typography--heading2">Dense</h3>
     <forge-checkbox dense>Dense</forge-checkbox>
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1">Readonly</h3>
+    <h3 class="forge-typography--heading2">Readonly</h3>
     <forge-checkbox readonly>Readonly</forge-checkbox>
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1">Disabled</h3>
+    <h3 class="forge-typography--heading2">Disabled</h3>
     <forge-checkbox disabled>Disabled</forge-checkbox>
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1">Start label</h3>
+    <h3 class="forge-typography--heading2">Start label</h3>
     <forge-checkbox label-position="start">Start label</forge-checkbox>
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1">Form associated</h3>
+    <h3 class="forge-typography--heading2">Prevent default</h3>
+    <forge-checkbox id="prevent-checkbox">Prevent default</forge-checkbox>
+  </div>
+
+  <div>
+    <h3 class="forge-typography--heading2">Form associated</h3>
     <form name="test-form">
       <forge-checkbox name="test-checkbox">Form associated</forge-checkbox>
     </form>
diff --git a/src/dev/pages/checkbox/checkbox.ts b/src/dev/pages/checkbox/checkbox.ts
index 712a9e673..3a22be329 100644
--- a/src/dev/pages/checkbox/checkbox.ts
+++ b/src/dev/pages/checkbox/checkbox.ts
@@ -33,3 +33,8 @@ exposeInputToggle.addEventListener('forge-switch-change', ({ detail: selected })
 document.querySelectorAll('forge-checkbox').forEach(checkbox => {
   checkbox.addEventListener('change', evt => console.log(evt));
 });
+
+const preventCheckbox = document.getElementById('prevent-checkbox') as ICheckboxComponent;
+preventCheckbox.addEventListener('change', (evt: Event) => {
+  evt.preventDefault();
+});
diff --git a/src/dev/pages/chips/chips.ejs b/src/dev/pages/chips/chips.ejs
index f0443ab5b..51d8e50ca 100644
--- a/src/dev/pages/chips/chips.ejs
+++ b/src/dev/pages/chips/chips.ejs
@@ -1,6 +1,6 @@
 <div class="vert">
   <div id="chips-basic">
-    <h3>Basic chips</h3>
+    <h3 class="forge-typography--heading2">Basic chips</h3>
     <forge-chip-set style="width: 600px; display: flex; flex: auto; flex-direction: row; flex-wrap: wrap;">
       <forge-chip>Small</forge-chip>
       <forge-chip>Medium</forge-chip>
@@ -9,7 +9,7 @@
   </div>
 
   <div id="chips-choice">
-    <h3>Choice chips</h3>
+    <h3 class="forge-typography--heading2">Choice chips</h3>
     <forge-chip-set type="choice">
       <forge-chip>Small</forge-chip>
       <forge-chip selected>Medium</forge-chip>
@@ -18,7 +18,7 @@
   </div>
 
   <div id="chips-choice-vertical">
-    <h3>Choice chips (vertical)</h3>
+    <h3 class="forge-typography--heading2">Choice chips (vertical)</h3>
     <forge-chip-set type="choice" vertical>
       <forge-chip>Small</forge-chip>
       <forge-chip selected>Medium</forge-chip>
@@ -27,8 +27,8 @@
   </div>
 
   <div id="chips-filter">
-    <h3>Filter chips</h3>
-    <h5>No leading icon</h5>
+    <h3 class="forge-typography--heading2">Filter chips</h3>
+    <h4 class="forge-typography--subheading1">No leading icon</h4>
     <forge-chip-set type="filter">
       <forge-chip value="tops" selected>Tops</forge-chip>
       <forge-chip value="bottoms" selected>Bottoms</forge-chip>
@@ -38,7 +38,7 @@
   </div>
 
   <div id="chips-filter-leading">
-    <h5>With leading icon</h5>
+    <h3 class="forge-typography--heading2">With leading icon</h3>
     <forge-chip-set type="filter">
       <forge-chip selected>
         <forge-icon slot="leading" name="face"></forge-icon>
@@ -60,7 +60,7 @@
   </div>
 
   <div id="chips-action">
-    <h3>Action chips</h3>
+    <h3 class="forge-typography--heading2">Action chips</h3>
     <forge-chip-set>
       <forge-chip value="calendar">
         <forge-icon slot="leading" name="event"></forge-icon>
@@ -82,7 +82,7 @@
   </div>
 
   <div id="chips-avatar">
-    <h3>With leading avatar</h3>
+    <h3 class="forge-typography--heading2">With leading avatar</h3>
     <forge-chip-set>
       <forge-chip value="calendar">
         <forge-avatar slot="leading" image-url="https://en.gravatar.com/userimage/27084046/aa996f464ca8f1ea69769cef1b76fbf9.jpg"></forge-avatar>
@@ -104,7 +104,7 @@
   </div>
 
   <div id="chips-input">
-    <h3 class="flex">
+    <h3 class="flex forge-typography--heading2">
       Input chips
       <span>
         <forge-icon-button>
@@ -135,7 +135,7 @@
   </div>
 
   <div id="chips-input">
-    <h3>Invalid chips</h3>
+    <h3 class="forge-typography--heading2">Invalid chips</h3>
     <forge-chip-set type="input">
       <forge-chip invalid>
         <forge-icon slot="leading" name="place"></forge-icon>
diff --git a/src/dev/pages/dialog/dialog-template-basic.ejs b/src/dev/pages/dialog/dialog-template-basic.ejs
index 3fb385ef5..6ee7de002 100644
--- a/src/dev/pages/dialog/dialog-template-basic.ejs
+++ b/src/dev/pages/dialog/dialog-template-basic.ejs
@@ -1,7 +1,7 @@
 <div class="dialog-container">
   <forge-scaffold>
     <forge-toolbar slot="header" class="header-toolbar" no-border forge-dialog-move-target>
-      <h1 slot="start" class="forge-typography--headline5">Dialog title</h1>
+      <h1 slot="start" class="forge-typography--heading4">Dialog title</h1>
       <forge-icon-button slot="end">
         <button type="button" id="close-button">
           <forge-icon name="close"></forge-icon>
@@ -9,19 +9,19 @@
       </forge-icon-button>
     </forge-toolbar>
     <div slot="body" class="dialog-body">
-      <p class="forge-typography--body1">
+      <p class="forge-typography--body2">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia eaque illum itaque.
         Quas, libero eaque veniam et voluptatem quod natus fugit! Nihil consequatur quo
         corrupti beatae ad, ratione velit aut!
       </p>
         
-      <p class="forge-typography--body1">
+      <p class="forge-typography--body2">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia eaque illum itaque.
         Quas, libero eaque veniam et voluptatem quod natus fugit! Nihil consequatur quo
         corrupti beatae ad, ratione velit aut!
       </p>
       
-      <p class="forge-typography--body1">
+      <p class="forge-typography--body2">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia eaque illum itaque.
         Quas, libero eaque veniam et voluptatem quod natus fugit! Nihil consequatur quo
         corrupti beatae ad, ratione velit aut!
diff --git a/src/dev/pages/divider/divider.ejs b/src/dev/pages/divider/divider.ejs
index 8e1b71b90..3d2ae6c37 100644
--- a/src/dev/pages/divider/divider.ejs
+++ b/src/dev/pages/divider/divider.ejs
@@ -1,9 +1,9 @@
-<h3 class="forge-typography--subtitle2">Horizontal</h3>
+<h3 class="forge-typography--heading2">Horizontal</h3>
 <div>
   <forge-divider></forge-divider>
 </div>
 
-<h3 class="forge-typography--subtitle2">Vertical</h3>
+<h3 class="forge-typography--heading2">Vertical</h3>
 <div style="margin-left: 50px; height: 200px;">
   <forge-divider vertical></forge-divider>
 </div>
diff --git a/src/dev/pages/drawer/drawer-dismissible-right.ejs b/src/dev/pages/drawer/drawer-dismissible-right.ejs
index 7bcadf45c..792c24648 100644
--- a/src/dev/pages/drawer/drawer-dismissible-right.ejs
+++ b/src/dev/pages/drawer/drawer-dismissible-right.ejs
@@ -1,4 +1,4 @@
-<h3 class="forge-typography--subtitle1">Dismissible (right)</h3>
+<h3 class="forge-typography--heading2">Dismissible (right)</h3>
 <div class="drawer-demo">
   <forge-scaffold stretch>
     <forge-app-bar id="drawer-dismissible-right-app-bar" title-text="Dismissible Drawer - Right" slot="header">
@@ -6,7 +6,7 @@
       <forge-app-bar-menu-button id="drawer-dismissible-right-app-bar-menu-button" slot="start"></forge-app-bar-menu-button>
     </forge-app-bar>
     <forge-toolbar slot="body-header">
-      <div slot="start" class="forge-typography--title">Toolbar</div>
+      <div slot="start" class="forge-typography--heading2">Toolbar</div>
     </forge-toolbar>
     <div slot="body" style="padding: 16px;">
       <forge-card>
diff --git a/src/dev/pages/drawer/drawer-dismissible.ejs b/src/dev/pages/drawer/drawer-dismissible.ejs
index 4e6cbc171..94f850904 100644
--- a/src/dev/pages/drawer/drawer-dismissible.ejs
+++ b/src/dev/pages/drawer/drawer-dismissible.ejs
@@ -1,4 +1,4 @@
-<h3 class="forge-typography--subtitle1">Dismissible</h3>
+<h3 class="forge-typography--heading2">Dismissible</h3>
 <div class="drawer-demo">
   <forge-scaffold stretch>
     <forge-app-bar id="drawer-dismissible-app-bar" title-text="Dismissible Drawer" slot="header">
@@ -6,7 +6,7 @@
       <forge-app-bar-menu-button id="drawer-dismissible-app-bar-menu-button" slot="start"></forge-app-bar-menu-button>
     </forge-app-bar>
     <forge-toolbar slot="body-header">
-      <div slot="start" class="forge-typography--title">Toolbar</div>
+      <div slot="start" class="forge-typography--heading2">Toolbar</div>
     </forge-toolbar>
     <div slot="body" style="padding: 16px;">
       <forge-card>
diff --git a/src/dev/pages/drawer/drawer-mini-hover-right.ejs b/src/dev/pages/drawer/drawer-mini-hover-right.ejs
index e2122014d..094db6707 100644
--- a/src/dev/pages/drawer/drawer-mini-hover-right.ejs
+++ b/src/dev/pages/drawer/drawer-mini-hover-right.ejs
@@ -1,11 +1,11 @@
-<h3 class="forge-typography--subtitle1">Mini Hover (right)</h3>
+<h3 class="forge-typography--heading2">Mini Hover (right)</h3>
 <div class="drawer-demo" style="position: relative;">
   <forge-scaffold stretch>
     <forge-app-bar id="drawer-mini-hover-app-bar" title-text="Mini Hover Drawer" slot="header">
       <forge-icon slot="logo" external external-type="custom" name="forge_logo"></forge-icon>
     </forge-app-bar>
     <forge-toolbar slot="body-header">
-      <h2 slot="start" class="forge-typography--title">Toolbar</h2>
+      <h2 slot="start" class="forge-typography--heading2">Toolbar</h2>
     </forge-toolbar>
     <forge-mini-drawer hover slot="body-right" direction="right">
       <forge-list>
diff --git a/src/dev/pages/drawer/drawer-mini-hover.ejs b/src/dev/pages/drawer/drawer-mini-hover.ejs
index 3ec4f276c..142a33719 100644
--- a/src/dev/pages/drawer/drawer-mini-hover.ejs
+++ b/src/dev/pages/drawer/drawer-mini-hover.ejs
@@ -1,11 +1,11 @@
-<h3 class="forge-typography--subtitle1">Mini Hover</h3>
+<h3 class="forge-typography--heading2">Mini Hover</h3>
 <div class="drawer-demo" style="position: relative;">
   <forge-scaffold stretch>
     <forge-app-bar id="drawer-mini-hover-app-bar" title-text="Mini Hover Drawer" slot="header">
       <forge-icon slot="logo" external external-type="custom" name="forge_logo"></forge-icon>
     </forge-app-bar>
     <forge-toolbar slot="body-header">
-      <h2 slot="start" class="forge-typography--title">Toolbar</h2>
+      <h2 slot="start" class="forge-typography--heading2">Toolbar</h2>
     </forge-toolbar>
     <forge-mini-drawer hover slot="body-left">
       <forge-list>
diff --git a/src/dev/pages/drawer/drawer-mini.ejs b/src/dev/pages/drawer/drawer-mini.ejs
index c4f285fa3..a8d19ad18 100644
--- a/src/dev/pages/drawer/drawer-mini.ejs
+++ b/src/dev/pages/drawer/drawer-mini.ejs
@@ -1,4 +1,4 @@
-<h3 class="forge-typography--subtitle1">Mini</h3>
+<h3 class="forge-typography--heading2">Mini</h3>
 <div class="drawer-demo" style="position: relative;">
   <forge-scaffold stretch>
     <forge-app-bar id="drawer-mini-app-bar" title-text="Mini Drawer" slot="header">
diff --git a/src/dev/pages/drawer/drawer-modal.ejs b/src/dev/pages/drawer/drawer-modal.ejs
index dfa22149c..26f737d90 100644
--- a/src/dev/pages/drawer/drawer-modal.ejs
+++ b/src/dev/pages/drawer/drawer-modal.ejs
@@ -1,4 +1,4 @@
-<h3 class="forge-typography--subtitle1">Modal</h3>
+<h3 class="forge-typography--heading2">Modal</h3>
 <div class="drawer-demo" style="position: relative;">
   <forge-scaffold stretch>
     <forge-app-bar id="drawer-modal-app-bar" title-text="Modal Drawer" slot="header">
@@ -26,7 +26,7 @@
       </forge-list>
     </forge-modal-drawer>
     <forge-toolbar slot="body-header">
-      <div slot="start" class="forge-typography--title">Toolbar</div>
+      <div slot="start" class="forge-typography--heading2">Toolbar</div>
     </forge-toolbar>
     <div slot="body" style="padding: 16px;">
       <forge-card>
diff --git a/src/dev/pages/drawer/drawer-permanent.ejs b/src/dev/pages/drawer/drawer-permanent.ejs
index 7336f22aa..ae408c1e6 100644
--- a/src/dev/pages/drawer/drawer-permanent.ejs
+++ b/src/dev/pages/drawer/drawer-permanent.ejs
@@ -1,11 +1,11 @@
-<h3 class="forge-typography--subtitle1">Permanent</h3>
+<h3 class="forge-typography--heading2">Permanent</h3>
 <div class="drawer-demo">
   <forge-scaffold stretch>
     <forge-app-bar title-text="Permanent Drawer" menu="false" slot="header">
       <forge-icon slot="logo" name="forge_logo"></forge-icon>
     </forge-app-bar>
     <forge-toolbar slot="body-header">
-      <div slot="start" class="forge-typography--title">Toolbar</div>
+      <div slot="start" class="forge-typography--heading2">Toolbar</div>
     </forge-toolbar>
     <div slot="body" style="padding: 16px;">
       <forge-card>
diff --git a/src/dev/pages/expansion-panel/expansion-panel.ejs b/src/dev/pages/expansion-panel/expansion-panel.ejs
index bddbb5389..563b601ed 100644
--- a/src/dev/pages/expansion-panel/expansion-panel.ejs
+++ b/src/dev/pages/expansion-panel/expansion-panel.ejs
@@ -1,17 +1,17 @@
-<h3 class="forge-typography--subtitle1">Basic (unstyled)</h3>
+<h3 class="forge-typography--heading2">Basic (unstyled)</h3>
 <forge-expansion-panel id="expansion-panel-basic">
   <div slot="header">Click me</div>
   <div>Expandable content</div>
 </forge-expansion-panel>
 
-<h3 class="forge-typography--subtitle1">Card</h3>
+<h3 class="forge-typography--heading2">Card</h3>
 <forge-card class="expandable-card">
   <forge-expansion-panel id="expansion-panel-card">
     <div slot="header" role="button" class="flex expansion-panel-header">
-      <div class="forge-typography--body1">Click me too</div>
+      <div>Click me too</div>
       <forge-open-icon></forge-open-icon>
     </div>
-    <div class="forge-typography--body1">
+    <div>
       Expandable card content
     </div>
   </forge-expansion-panel>
diff --git a/src/dev/pages/file-picker/file-picker.ejs b/src/dev/pages/file-picker/file-picker.ejs
index df8c84764..83df23425 100644
--- a/src/dev/pages/file-picker/file-picker.ejs
+++ b/src/dev/pages/file-picker/file-picker.ejs
@@ -1,4 +1,4 @@
-<h3 class="forge-typography--subtitle1">Default</h3>
+<h3 class="forge-typography--heading2">Default</h3>
 
 <forge-file-picker id="file-picker-default" style="--forge-file-picker-width: 320px; width: 320px;">
   <span slot="primary">Drag files here or</span>
@@ -10,7 +10,7 @@
 </forge-file-picker>
 <ul id="file-picker-list"></ul>
 
-<h3 class="forge-typography--subtitle1">Compact</h3>
+<h3 class="forge-typography--heading2">Compact</h3>
 
 <forge-file-picker id="file-picker-compact" compact>
   <forge-button type="outlined">
@@ -19,7 +19,7 @@
 </forge-file-picker>
 <ul id="file-picker-list-compact"></ul>
 
-<h3 class="forge-typography--subtitle1">Borderless</h3>
+<h3 class="forge-typography--heading2">Borderless</h3>
 
 <forge-card style="width: 400px; --forge-card-padding: 0;">
   <div style="height: 400px;">
diff --git a/src/dev/pages/focus-indicator/focus-indicator.ejs b/src/dev/pages/focus-indicator/focus-indicator.ejs
index 4bc1b8c0a..b92117489 100644
--- a/src/dev/pages/focus-indicator/focus-indicator.ejs
+++ b/src/dev/pages/focus-indicator/focus-indicator.ejs
@@ -45,7 +45,7 @@
   <!-- Typical card example -->
   <div tabindex="0" role="button" class="example-target">
     <forge-card role="presentation" style="border-radius: 4px;">
-      <p class="forge-typography--body" style="margin: 0;">
+      <p style="margin: 0;">
         Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate, nihil et sequi similique ad,
         voluptas quod quisquam iure deleniti voluptatibus pariatur laborum maiores iste omnis ut sapiente!
         Repellendus, autem delectus.
@@ -58,7 +58,7 @@
   <!-- Inward example -->
   <div>
     <div class="example-target inward-example" tabindex="0" role="button">
-      <span class="forge-typography--body">Inward example</span>
+      <span>Inward example</span>
       <forge-focus-indicator allow-focus inward></forge-focus-indicator>
       <forge-state-layer></forge-state-layer>
     </div>
diff --git a/src/dev/pages/icon-button/icon-button.ejs b/src/dev/pages/icon-button/icon-button.ejs
index a86156c76..ed2a9bf0a 100644
--- a/src/dev/pages/icon-button/icon-button.ejs
+++ b/src/dev/pages/icon-button/icon-button.ejs
@@ -1,6 +1,6 @@
 <div class="vert">
   <div>
-    <h3 class="forge-typography--caption">Default</h3>
+    <h3 class="forge-typography--heading2">Default</h3>
     <forge-icon-button>
       <button type="button">
         <forge-icon name="code"></forge-icon>
@@ -9,7 +9,7 @@
   </div>
 
   <div>
-    <h3 class="forge-typography--caption">Default (dense)</h3>
+    <h3 class="forge-typography--heading2">Default (dense)</h3>
     <forge-icon-button dense>
       <button type="button">
         <forge-icon name="code"></forge-icon>
@@ -18,7 +18,7 @@
   </div>
 
   <div>
-    <h3 class="forge-typography--caption">Toggle</h3>
+    <h3 class="forge-typography--heading2">Toggle</h3>
     <forge-icon-button toggle="true" is-on="false">
       <button type="button">
         <forge-icon name="favorite" forge-icon-button-on></forge-icon>
@@ -28,7 +28,7 @@
   </div>
 
   <div>
-    <h3 class="forge-typography--caption">Toggle (dense)</h3>
+    <h3 class="forge-typography--heading2">Toggle (dense)</h3>
     <forge-icon-button dense toggle is-on="false">
       <button type="button">
         <forge-icon name="favorite" forge-icon-button-on></forge-icon>
@@ -38,7 +38,7 @@
   </div>
 
   <div>
-    <h3 class="forge-typography--caption">w/Anchor link</h3>
+    <h3 class="forge-typography--heading2">w/Anchor link</h3>
     <forge-icon-button>
       <a href="javascript: alert('Anchor link icon button works!');">
         <forge-icon name="open_in_new"></forge-icon>
diff --git a/src/dev/pages/icon/icon.ejs b/src/dev/pages/icon/icon.ejs
index c2f1f90a4..af7ddcf12 100644
--- a/src/dev/pages/icon/icon.ejs
+++ b/src/dev/pages/icon/icon.ejs
@@ -1,19 +1,19 @@
-<h3 class="forge-typography--caption">External icon</h3>
+<h3 class="forge-typography--label">External icon</h3>
 <forge-icon name="face" external theme="success"></forge-icon>
 
-<h3 class="forge-typography--caption">External icon (lazy)</h3>
+<h3 class="forge-typography--label">External icon (lazy)</h3>
 <forge-icon name="code" lazy external></forge-icon>
 
-<h3 class="forge-typography--caption">Registry icon</h3>
+<h3 class="forge-typography--label">Registry icon</h3>
 <forge-icon name="action_launcher"></forge-icon>
 
-<h3 class="forge-typography--caption">Custom</h3>
+<h3 class="forge-typography--label">Custom</h3>
 <forge-icon name="palette" style="font-size: 48px; color: deepPink;" external></forge-icon>
 
-<h3 class="forge-typography--caption">Invalid icon</h3>
+<h3 class="forge-typography--label">Invalid icon</h3>
 <forge-icon name="invalidIconName"></forge-icon>
 
-<h3 class="forge-typography--caption">Invalid icon (external)</h3>
+<h3 class="forge-typography--label">Invalid icon (external)</h3>
 <forge-icon name="another_invalid_icon_name" external></forge-icon>
 
 <script type="module" src="icon.ts"></script>
diff --git a/src/dev/pages/list/list.ejs b/src/dev/pages/list/list.ejs
index 5e83d051e..c673cc770 100644
--- a/src/dev/pages/list/list.ejs
+++ b/src/dev/pages/list/list.ejs
@@ -1,7 +1,31 @@
-<div class="vert">
+<div>
+  <!-- Non-interactive (static is deprecated) -->
+  <div>
+    <h3 class="forge-typography--heading2">Non-interactive (static is deprecated)</h3>
+    <div class="list-demo">
+      <forge-list non-interactive>
+        <forge-list-item>List Item One</forge-list-item>
+        <forge-list-item>List Item Two</forge-list-item>
+        <forge-list-item>List Item Three</forge-list-item>
+      </forge-list>
+    </div>
+  </div>
+
+  <!-- Disabled -->
+  <div>
+    <h3 class="forge-typography--heading2">Disabled</h3>
+    <div class="list-demo">
+      <forge-list disabled>
+        <forge-list-item>List Item One</forge-list-item>
+        <forge-list-item>List Item Two</forge-list-item>
+        <forge-list-item>List Item Three</forge-list-item>
+      </forge-list>
+    </div>
+  </div>
+
   <!-- Single-line -->
   <div>
-    <h3 class="forge-typography--subtitle1">Single-Line</h3>
+    <h3 class="forge-typography--heading2">Single-Line</h3>
     <div class="list-demo">
       <forge-list>
         <forge-list-item>List Item One</forge-list-item>
@@ -10,10 +34,55 @@
       </forge-list>
     </div>
   </div>
+  
+  <!-- Two-Line -->
+  <div>
+    <h3 class="forge-typography--heading2">Two-Line</h3>
+    <div class="list-demo">
+      <forge-list two-line>
+        <forge-list-item>
+          <span>Primary Text</span>
+          <span slot="secondary-text">Secondary Text</span>
+        </forge-list-item>
+        <forge-list-item>
+          <span>Primary Text</span>
+          <span slot="secondary-text">Secondary Text</span>
+        </forge-list-item>
+        <forge-list-item>
+          <span>Primary Text</span>
+          <span slot="secondary-text">Secondary Text</span>
+        </forge-list-item>
+      </forge-list>
+    </div>
+  </div>
+  
+  <!-- Three-Line -->
+  <div>
+    <h3 class="forge-typography--heading2">Three-Line</h3>
+    <div class="list-demo">
+      <forge-list three-line>
+        <forge-list-item>
+          <span>Primary Text</span>
+          <span slot="secondary-text">Secondary Text</span>
+          <span slot="tertiary-text">Tertiary Text</span>
+        </forge-list-item>
+        <forge-list-item>
+          <span>Primary Text</span>
+          <span slot="secondary-text">Secondary Text</span>
+          <span slot="tertiary-text">Tertiary Text</span>
+        </forge-list-item>
+        <forge-list-item>
+          <span>Primary Text</span>
+          <span slot="secondary-text">Secondary Text</span>
+          <span slot="tertiary-text">Tertiary Text</span>
+        </forge-list-item>
+      </forge-list>
+    </div>
+  </div>
 
   <!-- Single-line long text -->
   <div>
-    <h3 class="forge-typography--subtitle1">Single-Line (long text)</h3>
+    <h3 class="forge-typography--heading2">Single-Line (long text)</h3>
     <div class="list-demo">
       <forge-list>
         <forge-list-item>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, libero nemo. Similique suscipit ipsam ab veritatis excepturi repellendus ipsa labore! Accusantium, sint ex. Illum architecto rerum, voluptates consectetur cum quaerat.</forge-list-item>
@@ -22,43 +91,67 @@
       </forge-list>
     </div>
   </div>
-
+  
   <!-- Single-line long text w/wrap -->
   <div>
-    <h3 class="forge-typography--subtitle1">Single-Line (long text w/wrap)</h3>
+    <h3 class="forge-typography--heading2">Single-Line (long text w/wrap)</h3>
     <div class="list-demo">
-      <forge-list>
-        <forge-list-item wrap>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, libero nemo. Similique suscipit ipsam ab veritatis excepturi repellendus ipsa labore! Accusantium, sint ex. Illum architecto rerum, voluptates consectetur cum quaerat.</forge-list-item>
-        <forge-list-item wrap>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, libero nemo. Similique suscipit ipsam ab veritatis excepturi repellendus ipsa labore! Accusantium, sint ex. Illum architecto rerum, voluptates consectetur cum quaerat.</forge-list-item>
-        <forge-list-item wrap>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, libero nemo. Similique suscipit ipsam ab veritatis excepturi repellendus ipsa labore! Accusantium, sint ex. Illum architecto rerum, voluptates consectetur cum quaerat.</forge-list-item>
+      <forge-list wrap>
+        <forge-list-item>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, libero nemo. Similique suscipit ipsam ab veritatis excepturi repellendus ipsa labore! Accusantium, sint ex. Illum architecto rerum, voluptates consectetur cum quaerat.</forge-list-item>
+        <forge-list-item>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, libero nemo. Similique suscipit ipsam ab veritatis excepturi repellendus ipsa labore! Accusantium, sint ex. Illum architecto rerum, voluptates consectetur cum quaerat.</forge-list-item>
+        <forge-list-item>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, libero nemo. Similique suscipit ipsam ab veritatis excepturi repellendus ipsa labore! Accusantium, sint ex. Illum architecto rerum, voluptates consectetur cum quaerat.</forge-list-item>
       </forge-list>
     </div>
   </div>
-
+  
   <!-- Two-line long text w/wrap -->
   <div>
-    <h3 class="forge-typography--subtitle1">Two-Line (long text w/wrap)</h3>
+    <h3 class="forge-typography--heading2">Two-Line (long text w/wrap)</h3>
     <div class="list-demo">
-      <forge-list>
-        <forge-list-item two-line wrap>
-          <span slot="title">List Item</span>
-          <span slot="subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, libero nemo. Similique suscipit ipsam ab veritatis excepturi repellendus ipsa labore! Accusantium, sint ex. Illum architecto rerum, voluptates consectetur cum quaerat.</span>
+      <forge-list two-line wrap>
+        <forge-list-item>
+          <span>List Item</span>
+          <span slot="secondary-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, libero nemo. Similique suscipit ipsam ab veritatis excepturi repellendus ipsa labore! Accusantium, sint ex. Illum architecto rerum, voluptates consectetur cum quaerat.</span>
         </forge-list-item>
-        <forge-list-item two-line wrap>
-          <span slot="title">List Item</span>
-          <span slot="subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, libero nemo. Similique suscipit ipsam ab veritatis excepturi repellendus ipsa labore! Accusantium, sint ex. Illum architecto rerum, voluptates consectetur cum quaerat.</span>
+        <forge-list-item>
+          <span>List Item</span>
+          <span slot="secondary-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, libero nemo. Similique suscipit ipsam ab veritatis excepturi repellendus ipsa labore! Accusantium, sint ex. Illum architecto rerum, voluptates consectetur cum quaerat.</span>
         </forge-list-item>
-        <forge-list-item two-line wrap>
-          <span slot="title">List Item</span>
-          <span slot="subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, libero nemo. Similique suscipit ipsam ab veritatis excepturi repellendus ipsa labore! Accusantium, sint ex. Illum architecto rerum, voluptates consectetur cum quaerat.</span>
+        <forge-list-item>
+          <span>List Item</span>
+          <span slot="secondary-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, libero nemo. Similique suscipit ipsam ab veritatis excepturi repellendus ipsa labore! Accusantium, sint ex. Illum architecto rerum, voluptates consectetur cum quaerat.</span>
         </forge-list-item>
       </forge-list>
     </div>
   </div>
-
+  
+  <!-- Three-line long text w/wrap -->
+  <div>
+    <h3 class="forge-typography--heading2">Three-Line (long text w/wrap)</h3>
+    <div class="list-demo">
+      <forge-list three-line wrap>
+        <forge-list-item>
+          <span>List Item</span>
+          <span slot="secondary-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, libero nemo. Similique suscipit ipsam ab veritatis excepturi repellendus ipsa labore! Accusantium, sint ex. Illum architecto rerum, voluptates consectetur cum quaerat.</span>
+          <span slot="tertiary-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, libero nemo. Similique suscipit ipsam ab veritatis excepturi repellendus ipsa labore! Accusantium, sint ex. Illum architecto rerum, voluptates consectetur cum quaerat.</span>
+        </forge-list-item>
+        <forge-list-item>
+          <span>List Item</span>
+          <span slot="secondary-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, libero nemo. Similique suscipit ipsam ab veritatis excepturi repellendus ipsa labore! Accusantium, sint ex. Illum architecto rerum, voluptates consectetur cum quaerat.</span>
+          <span slot="tertiary-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, libero nemo. Similique suscipit ipsam ab veritatis excepturi repellendus ipsa labore! Accusantium, sint ex. Illum architecto rerum, voluptates consectetur cum quaerat.</span>
+        </forge-list-item>
+        <forge-list-item>
+          <span>List Item</span>
+          <span slot="secondary-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, libero nemo. Similique suscipit ipsam ab veritatis excepturi repellendus ipsa labore! Accusantium, sint ex. Illum architecto rerum, voluptates consectetur cum quaerat.</span>
+          <span slot="tertiary-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, libero nemo. Similique suscipit ipsam ab veritatis excepturi repellendus ipsa labore! Accusantium, sint ex. Illum architecto rerum, voluptates consectetur cum quaerat.</span>
+        </forge-list-item>
+      </forge-list>
+    </div>
+  </div>
+  
   <!-- Single-line (dense) -->
   <div>
-    <h3 class="forge-typography--subtitle1">Single-Line (dense)</h3>
+    <h3 class="forge-typography--heading2">Single-Line (dense)</h3>
     <div class="list-demo">
       <forge-list dense>
         <forge-list-item>List Item One</forge-list-item>
@@ -67,88 +160,106 @@
       </forge-list>
     </div>
   </div>
-
-  <!-- Two-Line -->
+  
+  <!-- Two-line (dense) -->
   <div>
-    <h3 class="forge-typography--subtitle1">Two-Line</h3>
+    <h3 class="forge-typography--heading2">Two-Line (dense)</h3>
     <div class="list-demo">
-      <forge-list>
-        <forge-list-item two-line>
-          <span slot="title">List Item</span>
-          <span slot="subtitle">Secondary Text</span>
+      <forge-list dense two-line>
+        <forge-list-item>
+          <span>Primary Text</span>
+          <span slot="secondary-text">Secondary Text</span>
         </forge-list-item>
-        <forge-list-item two-line>
-          <span slot="title">List Item</span>
-          <span slot="subtitle">Secondary Text</span>
+        <forge-list-item>
+          <span>Primary Text</span>
+          <span slot="secondary-text">Secondary Text</span>
         </forge-list-item>
-        <forge-list-item two-line>
-          <span slot="title">List Item</span>
-          <span slot="subtitle">Secondary Text</span>
+        <forge-list-item>
+          <span>Primary Text</span>
+          <span slot="secondary-text">Secondary Text</span>
         </forge-list-item>
       </forge-list>
     </div>
   </div>
-
-  <!-- Three-Line -->
+  
+  <!-- Three-line (dense) -->
   <div>
-    <h3 class="forge-typography--subtitle1">Three-Line</h3>
+    <h3 class="forge-typography--heading2">Three-Line (dense)</h3>
     <div class="list-demo">
-      <forge-list>
-        <forge-list-item three-line>
-          <span slot="title">List Item</span>
-          <span slot="subtitle">Secondary Text</span>
-          <span slot="tertiary-title">Tertiary Text</span>
+      <forge-list dense three-line>
+        <forge-list-item>
+          <span>Primary Text</span>
+          <span slot="secondary-text">Secondary Text</span>
+          <span slot="tertiary-text">Tertiary Text</span>
         </forge-list-item>
-        <forge-list-item three-line>
-          <span slot="title">List Item</span>
-          <span slot="subtitle">Secondary Text</span>
-          <span slot="tertiary-title">Tertiary Text</span>
+        <forge-list-item>
+          <span>Primary Text</span>
+          <span slot="secondary-text">Secondary Text</span>
+          <span slot="tertiary-text">Tertiary Text</span>
         </forge-list-item>
-        <forge-list-item three-line>
-          <span slot="title">List Item</span>
-          <span slot="subtitle">Secondary Text</span>
-          <span slot="tertiary-title">Tertiary Text</span>
+        <forge-list-item>
+          <span>Primary Text</span>
+          <span slot="secondary-text">Secondary Text</span>
+          <span slot="tertiary-text">Tertiary Text</span>
         </forge-list-item>
       </forge-list>
     </div>
   </div>
-
+  
   <!-- List with Selected Item -->
   <div>
-    <h3 class="forge-typography--subtitle1">List with Selected Item</h3>
+    <h3 class="forge-typography--heading2">List with Selected Item</h3>
     <div class="list-demo">
-      <forge-list selected-value="one">
-        <forge-list-item value="one">List Item One</forge-list-item>
-        <forge-list-item value="two">List Item Two</forge-list-item>
-        <forge-list-item value="three">List Item Three</forge-list-item>
+      <forge-list three-line selected-value="wifi">
+        <forge-list-item value="wifi">
+          <forge-icon slot="leading" name="wifi"></forge-icon>  
+          Wifi
+          <span slot="secondary-text">Secondary Text</span>
+          <span slot="tertiary-text">Tertiary Text</span>
+          <forge-icon slot="trailing" name="info"></forge-icon>
+        </forge-list-item>
+        <forge-list-item value="bluetooth">
+          <forge-icon slot="leading" name="bluetooth"></forge-icon>  
+          Bluetooth
+          <span slot="secondary-text">Secondary Text</span>
+          <span slot="tertiary-text">Tertiary Text</span>
+          <forge-icon slot="trailing" name="info"></forge-icon>
+        </forge-list-item>
+        <forge-list-item value="date-usage">
+          <forge-icon slot="leading" name="data_usage"></forge-icon>  
+          Data Usage
+          <span slot="secondary-text">Secondary Text</span>
+          <span slot="tertiary-text">Tertiary Text</span>
+          <forge-icon slot="trailing" name="info"></forge-icon>
+        </forge-list-item>
       </forge-list>
     </div>
   </div>
-
+  
   <!-- Leading Icon -->
   <div>
-    <h3 class="forge-typography--subtitle1">Leading Icon</h3>
+    <h3 class="forge-typography--heading2">Leading Icon</h3>
     <div class="list-demo">
       <forge-list>
         <forge-list-item>
           <forge-icon slot="leading" name="wifi"></forge-icon>
-          <span>List Item</span>
+          List Item
         </forge-list-item>
         <forge-list-item>
           <forge-icon slot="leading" name="bluetooth"></forge-icon>
-          <span>List Item</span>
+          List Item
         </forge-list-item>
         <forge-list-item>
           <forge-icon slot="leading" name="data_usage"></forge-icon>
-          <span>List Item</span>
+          List Item
         </forge-list-item>
       </forge-list>
     </div>
   </div>
-
+  
   <!-- Trailing Icon -->
   <div>
-    <h3 class="forge-typography--subtitle1">Trailing Icon</h3>
+    <h3 class="forge-typography--heading2">Trailing Icon</h3>
     <div class="list-demo">
       <forge-list>
         <forge-list-item>
@@ -166,56 +277,56 @@
       </forge-list>
     </div>
   </div>
-
+  
   <!-- Two-Line with Leading and Trailing Icon and Divider -->
   <div>
-    <h3 class="forge-typography--subtitle1">Two-Line with Leading and Trailing Icon and Divider</h3>
+    <h3 class="forge-typography--heading2">Two-Line with Leading and Trailing Icon and Divider</h3>
     <div class="list-demo">
-      <forge-list>
-        <forge-list-item two-line>
-          <forge-icon external name="folder" slot="avatar"></forge-icon>
-          <span slot="title">Dog Photos</span>
-          <span slot="subtitle">9 Jan 2018</span>
+      <forge-list two-line>
+        <forge-list-item>
+          <forge-icon slot="avatar" external name="folder"></forge-icon>
+          <span slot="primary-text">Dog Photos</span>
+          <span slot="secondary-text">9 Jan 2018</span>
           <forge-icon slot="trailing" name="info"></forge-icon>
         </forge-list-item>
-        <forge-list-item two-line>
+        <forge-list-item>
           <forge-icon external name="folder" slot="avatar"></forge-icon>
-          <span slot="title">Cat Photos</span>
-          <span slot="subtitle">22 Dec 2017</span>
+          <span slot="primary-text">Cat Photos</span>
+          <span slot="secondary-text">22 Dec 2017</span>
           <forge-icon slot="trailing" name="info"></forge-icon>
         </forge-list-item>
         <forge-divider></forge-divider>
-        <forge-list-item two-line>
+        <forge-list-item>
           <forge-icon external name="folder" slot="avatar"></forge-icon>
-          <span slot="title">Potatoes</span>
-          <span slot="subtitle">30 Nov 2017</span>
+          <span slot="primary-text">Potatoes</span>
+          <span slot="secondary-text">30 Nov 2017</span>
           <forge-icon slot="trailing" name="info"></forge-icon>
         </forge-list-item>
-        <forge-list-item two-line>
+        <forge-list-item>
           <forge-icon external name="folder" slot="avatar"></forge-icon>
-          <span slot="title">Carrots</span>
-          <span slot="subtitle">17 Oct 2017</span>
+          <span slot="primary-text">Carrots</span>
+          <span slot="secondary-text">17 Oct 2017</span>
           <forge-icon slot="trailing" name="info"></forge-icon>
         </forge-list-item>
       </forge-list>
     </div>
   </div>
-
+  
   <!-- List with Dividers and Expandable Items -->
   <div>
-    <h3 class="forge-typography--subtitle1">List with Dividers and Expandable Items</h3>
+    <h3 class="forge-typography--heading2">List with Dividers and Expandable Items</h3>
     <div class="list-demo">
       <forge-list>
         <forge-expansion-panel>
           <forge-list-item slot="header">
             <forge-icon slot="leading" name="code"></forge-icon>
             List Item One
-            <forge-open-icon slot="trailing" style="line-height: 0.5;"></forge-open-icon>
+            <forge-open-icon slot="trailing"></forge-open-icon>
           </forge-list-item>
-          <forge-list>
-            <forge-list-item indented>List Item One</forge-list-item>
-            <forge-list-item indented>List Item Two</forge-list-item>
-            <forge-list-item indented>List Item Three</forge-list-item>
+          <forge-list indented>
+            <forge-list-item>List Item One</forge-list-item>
+            <forge-list-item>List Item Two</forge-list-item>
+            <forge-list-item>List Item Three</forge-list-item>
           </forge-list>
         </forge-expansion-panel>
         <forge-divider></forge-divider>
@@ -223,7 +334,7 @@
           <forge-list-item slot="header">
             <forge-icon slot="leading" name="face"></forge-icon>
             List Item Two
-            <forge-open-icon slot="trailing" style="line-height: 0.5;"></forge-open-icon>
+            <forge-open-icon slot="trailing"></forge-open-icon>
           </forge-list-item>
           <forge-list indented>
             <forge-list-item>List Item One</forge-list-item>
@@ -236,53 +347,53 @@
       </forge-list>
     </div>
   </div>
-
+  
   <!-- List with Leading Checkbox -->
   <div>
-    <h3 class="forge-typography--subtitle1">List with Leading Checkbox</h3>
+    <h3 class="forge-typography--heading2">List with Leading Checkbox</h3>
     <div class="list-demo">
       <forge-list>
         <forge-list-item>
           <forge-checkbox slot="leading">
             <input type="checkbox" checked aria-label="Select list item one" />
           </forge-checkbox>
-          <span>List Item</span>
+          List Item
         </forge-list-item>
         <forge-list-item>
           <forge-checkbox slot="leading">
             <input type="checkbox" aria-label="Select list item two" />
           </forge-checkbox>
-          <span>List Item</span>
+          List Item
         </forge-list-item>
         <forge-list-item>
           <forge-checkbox slot="leading">
             <input type="checkbox" aria-label="Select list item three" />
           </forge-checkbox>
-          <span>List Item</span>
+          List Item
         </forge-list-item>
       </forge-list>
     </div>
   </div>
-
+  
   <!-- List with Trailing Checkbox -->
   <div>
-    <h3 class="forge-typography--subtitle1">List with Trailing Checkbox</h3>
+    <h3 class="forge-typography--heading2">List with Trailing Checkbox</h3>
     <div class="list-demo">
       <forge-list>
         <forge-list-item>
-          <span slot="title">List Item</span>
+          List Item
           <forge-checkbox slot="trailing">
             <input type="checkbox" checked aria-label="Select list item one" />
           </forge-checkbox>
         </forge-list-item>
         <forge-list-item>
-          <span slot="title">List Item</span>
+          List Item
           <forge-checkbox slot="trailing">
             <input type="checkbox" aria-label="Select list item two" />
           </forge-checkbox>
         </forge-list-item>
         <forge-list-item>
-          <span slot="title">List Item</span>
+          List Item
           <forge-checkbox slot="trailing">
             <input type="checkbox" aria-label="Select list item three" />
           </forge-checkbox>
@@ -290,53 +401,53 @@
       </forge-list>
     </div>
   </div>
-
+  
   <!-- List with Leading Radio Buttons -->
   <div>
-    <h3 class="forge-typography--subtitle1">List with Leading Radio Buttons</h3>
+    <h3 class="forge-typography--heading2">List with Leading Radio Buttons</h3>
     <div class="list-demo">
       <forge-list role="radiogroup" aria-label="Choose radio option">
         <forge-list-item>
           <forge-radio slot="leading">
             <input type="radio" name="list-radio" aria-label="Select list item one" />
           </forge-radio>
-          <span>List Item</span>
+          List Item
         </forge-list-item>
         <forge-list-item>
           <forge-radio slot="leading">
             <input type="radio" name="list-radio" checked aria-label="Select list item two" />
           </forge-radio>
-          <span>List Item</span>
+          List Item
         </forge-list-item>
         <forge-list-item>
           <forge-radio slot="leading">
             <input type="radio" name="list-radio" aria-label="Select list item three" />
           </forge-radio>
-          <span>List Item</span>
+          List Item
         </forge-list-item>
       </forge-list>
     </div>
   </div>
-
+  
   <!-- List with Trailing Radio Buttons -->
   <div>
-    <h3 class="forge-typography--subtitle1">List with Trailing Radio Buttons</h3>
+    <h3 class="forge-typography--heading2">List with Trailing Radio Buttons</h3>
     <div class="list-demo">
       <forge-list role="radiogroup" aria-label="Choose radio option">
         <forge-list-item>
-          <span>List Item</span>
+          List Item
           <forge-radio slot="trailing">
             <input type="radio" name="list-radio" aria-label="Select list item one" />
           </forge-radio>
         </forge-list-item>
         <forge-list-item>
-          <span>List Item</span>
+          List Item
           <forge-radio slot="trailing">
             <input type="radio" name="list-radio" checked aria-label="Select list item two" />
           </forge-radio>
         </forge-list-item>
         <forge-list-item>
-          <span>List Item</span>
+          List Item
           <forge-radio slot="trailing">
             <input type="radio" name="list-radio" aria-label="Select list item three" />
           </forge-radio>
@@ -345,9 +456,31 @@
     </div>
   </div>
 
+    
+  <!-- List with Trailing Switch -->
+  <div>
+    <h3 class="forge-typography--heading2">List with Trailing Switch</h3>
+    <div class="list-demo">
+      <forge-list>
+        <forge-list-item>
+          List Item
+          <forge-switch slot="trailing"></forge-switch>
+        </forge-list-item>
+        <forge-list-item>
+          List Item
+          <forge-switch slot="trailing"></forge-switch>
+        </forge-list-item>
+        <forge-list-item>
+          List Item
+          <forge-switch slot="trailing"></forge-switch>
+        </forge-list-item>
+      </forge-list>
+    </div>
+  </div>
+  
   <!-- List with multiple Checkboxes (requires use of forge-ignore attribute) -->
   <div>
-    <h3 class="forge-typography--subtitle1">List with multiple Checkboxes (requires use of forge-ignore attribute)</h3>
+    <h3 class="forge-typography--heading2">List with multiple Checkboxes (requires use of forge-ignore attribute)</h3>
     <div class="list-demo">
       <forge-list>
         <forge-list-item>
@@ -357,7 +490,7 @@
           <forge-checkbox slot="trailing">
             <input type="checkbox" forge-ignore aria-label="Select list item one" />
           </forge-checkbox>
-          <span>List Item</span>
+          List Item
         </forge-list-item>
         <forge-list-item>
           <forge-checkbox slot="leading">
@@ -366,7 +499,7 @@
           <forge-checkbox slot="trailing">
             <input type="checkbox" forge-ignore aria-label="Select list item one" />
           </forge-checkbox>
-          <span>List Item</span>
+          List Item
         </forge-list-item>
         <forge-list-item>
           <forge-checkbox slot="leading">
@@ -375,27 +508,50 @@
           <forge-checkbox slot="trailing">
             <input type="checkbox" forge-ignore aria-label="Select list item one" />
           </forge-checkbox>
-          <span>List Item</span>
+          List Item
         </forge-list-item>
       </forge-list>
     </div>
   </div>
-
+  
   <!-- List Inside of Drawer -->
   <div>
-    <h3 class="forge-typography--subtitle1">List Inside of Drawer</h3>
+    <h3 class="forge-typography--heading2">List Inside of Drawer</h3>
     <div class="list-demo">
       <forge-drawer static open>
-        <forge-list>
-          <forge-list-item>List Item One</forge-list-item>
-          <forge-divider></forge-divider>
-          <forge-list-item selected>List Item Two</forge-list-item>
-          <forge-divider></forge-divider>
-          <forge-list-item>List Item Three</forge-list-item>
-        </forge-list>
+        <aside>
+          <forge-list navlist>
+            <forge-list-item>List Item One</forge-list-item>
+            <forge-divider></forge-divider>
+            <forge-list-item selected>List Item Two</forge-list-item>
+            <forge-divider></forge-divider>
+            <forge-list-item>List Item Three</forge-list-item>
+          </forge-list>
+        </aside>
       </forge-drawer>
     </div>
   </div>
+
+  <!-- List with anchor links -->
+  <div>
+    <h3 class="forge-typography--heading2">List with anchor links</h3>
+    <div class="list-demo">
+      <forge-list>
+        <forge-list-item href="https://www.google.com/">
+          Google
+          <forge-icon slot="trailing" name="open_in_new"></forge-icon>
+        </forge-list-item>
+        <forge-list-item href="https://www.bing.com/">
+          Bing
+          <forge-icon slot="trailing" name="open_in_new"></forge-icon>
+        </forge-list-item>
+        <forge-list-item href="https://www.yahoo.com/">
+          Yahoo
+          <forge-icon slot="trailing" name="open_in_new"></forge-icon>
+        </forge-list-item>
+      </forge-list>
+    </div>
+  </div>
 </div>
 
 <script type="module" src="list.ts"></script>
diff --git a/src/dev/pages/list/list.scss b/src/dev/pages/list/list.scss
index d0e830f4c..20e97db0d 100644
--- a/src/dev/pages/list/list.scss
+++ b/src/dev/pages/list/list.scss
@@ -1,4 +1,4 @@
 .list-demo {
   max-width: 600px;
   border: 1px solid var(--forge-theme-border-color);
-}
\ No newline at end of file
+}
diff --git a/src/dev/pages/list/list.ts b/src/dev/pages/list/list.ts
index 885cfff07..10522cdd1 100644
--- a/src/dev/pages/list/list.ts
+++ b/src/dev/pages/list/list.ts
@@ -8,7 +8,7 @@ import '@tylertech/forge/expansion-panel';
 import '@tylertech/forge/drawer';
 import './list.scss';
 import { IconRegistry } from '@tylertech/forge/icon';
-import { tylIconBluetooth, tylIconCode, tylIconDataUsage, tylIconFace, tylIconInfo, tylIconWifi } from '@tylertech/tyler-icons/standard';
+import { tylIconBluetooth, tylIconCode, tylIconDataUsage, tylIconFace, tylIconInfo, tylIconWifi, tylIconOpenInNew } from '@tylertech/tyler-icons/standard';
 
 IconRegistry.define([
   tylIconWifi,
@@ -16,5 +16,6 @@ IconRegistry.define([
   tylIconDataUsage,
   tylIconInfo,
   tylIconCode,
-  tylIconFace
+  tylIconFace,
+  tylIconOpenInNew
 ]);
diff --git a/src/dev/pages/popup/popup.ejs b/src/dev/pages/popup/popup.ejs
index d382aedeb..f331cfc96 100644
--- a/src/dev/pages/popup/popup.ejs
+++ b/src/dev/pages/popup/popup.ejs
@@ -4,7 +4,7 @@
 
 <template id="forge-popup-template">
   <div class="vert" style="padding: 16px;">
-    <h2 class="forge-typography--title">Popup title</h2>
+    <h2 class="forge-typography--heading4">Popup title</h2>
 
     <forge-select label="Select" value="determinate">
       <forge-option value="one">One</forge-option>
diff --git a/src/dev/pages/radio/radio.ejs b/src/dev/pages/radio/radio.ejs
index 69481396e..d2f25b4d1 100644
--- a/src/dev/pages/radio/radio.ejs
+++ b/src/dev/pages/radio/radio.ejs
@@ -1,6 +1,6 @@
 <div class="vert">
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">Default</h3>
+    <h3 class="forge-typography--heading2">Default</h3>
     <div role="radiogroup" aria-label="Choose radio option">
       <forge-radio>
         <input type="radio" id="input-radio-01" name="radios" />
@@ -18,7 +18,7 @@
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">Dense</h3>
+    <h3 class="forge-typography--heading2">Dense</h3>
     <div role="radiogroup" aria-label="Choose radio option">
       <forge-radio dense>
         <input type="radio" id="input-radio-dense-01" name="radios-dense" />
@@ -36,7 +36,7 @@
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">Disabled</h3>
+    <h3 class="forge-typography--heading2">Disabled</h3>
     <div role="radiogroup" aria-label="Choose radio option">
       <forge-radio>
         <input type="radio" id="input-radio-disabled-01" name="radios-disabled" disabled />
@@ -54,7 +54,7 @@
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">Example</h3>
+    <h3 class="forge-typography--heading2">Example</h3>
     <div role="radiogroup" id="example-radio-group" aria-label="Choose radio option">
       <forge-radio>
         <input type="radio" id="input-radio-example-1" name="radios-example" />
diff --git a/src/dev/pages/ripple/ripple.ejs b/src/dev/pages/ripple/ripple.ejs
index 20583a90b..90ca145d8 100644
--- a/src/dev/pages/ripple/ripple.ejs
+++ b/src/dev/pages/ripple/ripple.ejs
@@ -1,7 +1,7 @@
 <div class="vert">
   
   <div>
-    <h3 class="forge-typography--subtitle1">Attached by parent relationship</h3>
+    <h3 class="forge-typography--heading2">Attached by parent relationship</h3>
     <div class="ripple-surface-example">
       <forge-ripple></forge-ripple>
     </div>
@@ -10,12 +10,12 @@
   <div>
     <forge-ripple target="#ripple-surface-target-1"></forge-ripple>
 
-    <h3 class="forge-typography--subtitle1">Attached by target</h3>
+    <h3 class="forge-typography--heading2">Attached by target</h3>
     <div id="ripple-surface-target-1" class="ripple-surface-example"></div>
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1">Card</h3>
+    <h3 class="forge-typography--heading2">Card</h3>
     <forge-card id="forge-ripple-card" style="--forge-card-padding: 0;">
       <div style="padding: 16px;">
         Ripple's believe it or not!
@@ -25,7 +25,7 @@
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1">Unbounded</h3>
+    <h3 class="forge-typography--heading2">Unbounded</h3>
     <div class="unbounded-container">
       <forge-ripple unbounded></forge-ripple>
     </div>
diff --git a/src/dev/pages/skeleton/skeleton.ejs b/src/dev/pages/skeleton/skeleton.ejs
index c3dc05c36..8984ab47a 100644
--- a/src/dev/pages/skeleton/skeleton.ejs
+++ b/src/dev/pages/skeleton/skeleton.ejs
@@ -1,6 +1,6 @@
 <div class="vert">
   <div class="limit-container">
-    <h3 class="forge-typography--subtitle1-secondary">Profile</h3>
+    <h3 class="forge-typography--heading2">Profile</h3>
     <forge-skeleton avatar></forge-skeleton>
     <forge-skeleton text></forge-skeleton>
     <forge-skeleton text></forge-skeleton>
@@ -8,19 +8,19 @@
   </div>
 
   <div class="limit-container">
-    <h3 class="forge-typography--subtitle1-secondary">List</h3>
+    <h3 class="forge-typography--heading2">List</h3>
     <forge-skeleton list-item></forge-skeleton>
     <forge-skeleton list-item></forge-skeleton>
     <forge-skeleton list-item></forge-skeleton>
   </div>
 
   <div class="limit-container">
-    <h3 class="forge-typography--subtitle1-secondary">Section</h3>
+    <h3 class="forge-typography--heading2">Section</h3>
     <forge-skeleton stretch style="height: 256px;"></forge-skeleton>
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">Chips</h3>
+    <h3 class="forge-typography--heading2">Chips</h3>
     <div style="display: flex;">
       <div style="display: grid; grid-auto-flow: column; grid-gap: 16px;">
         <forge-skeleton chip></forge-skeleton>
@@ -31,7 +31,7 @@
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">Buttons</h3>
+    <h3 class="forge-typography--heading2">Buttons</h3>
     <div style="display: flex;">
       <div style="display: grid; grid-auto-flow: column; grid-gap: 16px;">
         <forge-skeleton button></forge-skeleton>
@@ -42,7 +42,7 @@
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">Form Fields</h3>
+    <h3 class="forge-typography--heading2">Form Fields</h3>
     <div style="display: flex;">
       <div>
         <forge-skeleton form-field></forge-skeleton>
@@ -53,7 +53,7 @@
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">App</h3>
+    <h3 class="forge-typography--heading2">App</h3>
     <div style="height: 750px;">
       <forge-scaffold style="--forge-scaffold-width: 100%; --forge-scaffold-height: 100%;">
         <forge-app-bar slot="header" title-text="Skeleton">
@@ -89,7 +89,7 @@
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">Table</h3>
+    <h3 class="forge-typography--heading2">Table</h3>
     <div>
       <table style="width: 500px;">
         <thead>
diff --git a/src/dev/pages/stack/stack.ejs b/src/dev/pages/stack/stack.ejs
index 655bdc879..741ebd3eb 100644
--- a/src/dev/pages/stack/stack.ejs
+++ b/src/dev/pages/stack/stack.ejs
@@ -1,4 +1,4 @@
-<p class="forge-typography--body2">Resize browser window to see wrapping (set inline and wrap to true)</p>
+<p>Resize browser window to see wrapping (set inline and wrap to true)</p>
 <div class="stack-container">
   <forge-stack id="main-demo" gap="16px">
     <div class="box"></div>
@@ -9,12 +9,12 @@
 </div>
 
 <div class="more-examples">
-  <p class="forge-typography--title">More examples</p>
+  <p class="forge-typography--heading2">More examples</p>
   <forge-stack gap="56">
     <!-- Toolbar buttons -->
     <forge-card>
       <forge-toolbar style="--forge-toolbar-padding: 0" no-border>
-        <p slot="start" class="forge-typography--body2">Forge toolbar with perfectly spaced end slot buttons</p>
+        <p>Forge toolbar with perfectly spaced end slot buttons</p>
       </forge-toolbar>
       <forge-toolbar>
         <forge-stack inline slot="end">
@@ -31,7 +31,7 @@
     <!-- Vertical form -->
     <forge-card style="--forge-card-padding: 0;">
       <forge-toolbar>
-        <p slot="start" class="forge-typography--body2">Simple vertical form</p>
+        <p slot="start">Simple vertical form</p>
       </forge-toolbar>
       <form style="padding: 16px;">
         <forge-stack gap="16">
@@ -54,7 +54,7 @@
     <!-- Complex form -->
     <forge-card style="--forge-card-padding: 0;">
       <forge-toolbar>
-        <p slot="start" class="forge-typography--body2">Complex form</p>
+        <p slot="start">Complex form</p>
       </forge-toolbar>
       <form style="padding: 16px;">
         <forge-stack gap="16" stretch>
diff --git a/src/dev/pages/stepper/stepper.ejs b/src/dev/pages/stepper/stepper.ejs
index bfa8d191f..c9afc6769 100644
--- a/src/dev/pages/stepper/stepper.ejs
+++ b/src/dev/pages/stepper/stepper.ejs
@@ -1,5 +1,5 @@
 <div class="vert">
-  <h2 class="forge-typography--subtitle1">Default stepper</h2>
+  <h2 class="forge-typography--heading2">Default stepper</h2>
   <forge-stepper id="demo-stepper">
     <forge-step id="stepper-step-one">Step One</forge-step>
     <forge-step >Step Two <span slot="optional">An Alternate Message</span></forge-step>
@@ -9,12 +9,12 @@
   </forge-stepper>
 
   <div>
-    <h2 class="forge-typography--subtitle1">Stepper from configuration</h2>
+    <h2 class="forge-typography--heading2">Stepper from configuration</h2>
     <forge-stepper id="demo-config-stepper"></forge-stepper>
   </div>
   
   <div>
-    <h2 class="forge-typography--subtitle1">Vertical stepper variant</h2>
+    <h2 class="forge-typography--heading2">Vertical stepper variant</h2>
     <forge-stepper id="VerticalStepper" vertical>
       <forge-step id="stepper-step-one">Step One</forge-step> 
       <forge-step expanded ignore-user-expansion id="vertical-stepper-content">
diff --git a/src/dev/pages/switch/switch.ejs b/src/dev/pages/switch/switch.ejs
index e1ccfd819..d58dff1b1 100644
--- a/src/dev/pages/switch/switch.ejs
+++ b/src/dev/pages/switch/switch.ejs
@@ -1,38 +1,38 @@
 <div class="vert">
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">Default</h3>
+    <h3 class="forge-typography--heading2">Default</h3>
     <forge-switch id="forge-switch-01" required aria-label="Active">
       <span>off/on</span>
     </forge-switch>
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">Default (start label)</h3>
+    <h3 class="forge-typography--heading2">Default (start label)</h3>
     <forge-switch label-position="start">off/on</forge-switch>
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">Dense</h3>
+    <h3 class="forge-typography--heading2">Dense</h3>
     <forge-switch dense>off/on</forge-switch>
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">Disabled</h3>
+    <h3 class="forge-typography--heading2">Disabled</h3>
     <forge-switch disabled>off/on</forge-switch>
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">Disabled (on)</h3>
+    <h3 class="forge-typography--heading2">Disabled (on)</h3>
     <forge-switch disabled selected>off/on</forge-switch>
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">Readonly</h3>
+    <h3 class="forge-typography--heading2">Readonly</h3>
     <forge-switch readonly>off/on</forge-switch>
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">Custom icons</h3>
+    <h3 class="forge-typography--heading2">Custom icons</h3>
     <forge-switch icon="both">
       <span>sad/happy</span>
       <forge-icon slot="icon-off" name="emoticon_sad"></forge-icon>
@@ -41,12 +41,12 @@
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">Custom styling</h3>
+    <h3 class="forge-typography--heading2">Custom styling</h3>
     <forge-switch class="custom-switch" label-position="start">off/on</forge-switch>
   </div>
 
   <div>
-    <h3 class="forge-typography--subtitle1-secondary">Prevent default</h3>
+    <h3 class="forge-typography--heading2">Prevent default</h3>
     <forge-switch id="prevent-switch">off/on</forge-switch>
   </div>
 
diff --git a/src/dev/pages/switch/switch.ts b/src/dev/pages/switch/switch.ts
index e25cfd3ce..3a936af0b 100644
--- a/src/dev/pages/switch/switch.ts
+++ b/src/dev/pages/switch/switch.ts
@@ -9,6 +9,6 @@ IconRegistry.define([
   tylIconEmoticonSad
 ]);
 
-// const preventSwitch = document.getElementById('prevent-switch') as ISwitchComponent;
+const preventSwitch = document.getElementById('prevent-switch') as ISwitchComponent;
 
-// preventSwitch.addEventListener('forge-switch-change', (evt: CustomEvent) => evt.preventDefault());
+preventSwitch.addEventListener('forge-switch-change', (evt: CustomEvent) => evt.preventDefault());
diff --git a/src/dev/pages/tabs/tabs.ejs b/src/dev/pages/tabs/tabs.ejs
index c18863d8b..4ad2f10bc 100644
--- a/src/dev/pages/tabs/tabs.ejs
+++ b/src/dev/pages/tabs/tabs.ejs
@@ -22,7 +22,7 @@
 </div>
 
 <div class="tabs-demo">
-  <h2 class="forge-typography--subtitle1-secondary">Scrollable tabs</h2>
+  <h2 class="forge-typography--heading2">Scrollable tabs</h2>
   <forge-tab-bar id="demo-scrollable-tabs" active-tab="9" scroll-buttons>
     <forge-tab>Tab one</forge-tab>
     <forge-tab>Tab two</forge-tab>
@@ -48,7 +48,7 @@
 </div>
 
 <div class="tabs-demo">
-  <h2 class="forge-typography--subtitle1-secondary">Primary tabs w/icons</h2>
+  <h2 class="forge-typography--heading2">Primary tabs w/icons</h2>
   <forge-tab-bar stacked active-tab="0" style="max-width: 512px;">
     <forge-tab>
       <forge-icon slot="leading" name="videocam"></forge-icon>
@@ -66,7 +66,7 @@
 </div>
 
 <div class="tabs-demo">
-  <h2 class="forge-typography--subtitle1-secondary">Secondary tabs</h2>
+  <h2 class="forge-typography--heading2">Secondary tabs</h2>
   <forge-tab-bar secondary active-tab="0">
     <forge-tab>Overview</forge-tab>
     <forge-tab>Specs</forge-tab>
diff --git a/src/dev/pages/theme/theme.ejs b/src/dev/pages/theme/theme.ejs
new file mode 100644
index 000000000..088da3ebd
--- /dev/null
+++ b/src/dev/pages/theme/theme.ejs
@@ -0,0 +1,3 @@
+<div class="swatches" id="container"></div>
+
+<script type="module" src="theme.ts"></script>
diff --git a/src/dev/pages/theme/theme.html b/src/dev/pages/theme/theme.html
new file mode 100644
index 000000000..7c3b0f897
--- /dev/null
+++ b/src/dev/pages/theme/theme.html
@@ -0,0 +1,8 @@
+<%-
+include('./src/partials/page.ejs', {
+  page: {
+    title: 'Theme',
+    includePath: './pages/theme/theme.ejs'
+  }
+})
+%>
diff --git a/src/dev/pages/theme/theme.scss b/src/dev/pages/theme/theme.scss
new file mode 100644
index 000000000..e040a6a57
--- /dev/null
+++ b/src/dev/pages/theme/theme.scss
@@ -0,0 +1,25 @@
+.swatches {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.swatch-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.swatch {
+  border: 1px solid var(--forge-theme-outline);
+  box-sizing: border-box;
+  height: 100px;
+  width: 200px;
+  font-size: 14px;
+  padding: 8px;
+  border-radius: 4px;
+}
+
+h2 {
+  margin: 0;
+}
diff --git a/src/dev/pages/theme/theme.ts b/src/dev/pages/theme/theme.ts
new file mode 100644
index 000000000..291404e60
--- /dev/null
+++ b/src/dev/pages/theme/theme.ts
@@ -0,0 +1,168 @@
+import '$src/shared';
+import './theme.scss';
+
+interface ISwatchGroup {
+  header?: string;
+  swatches: ISwatch[];
+}
+
+interface ISwatch {
+  text?: string;
+  background: string;
+  foreground?: string;
+}
+
+const SWATCH_GROUPS: ISwatchGroup[] = [
+  {
+    header: 'Surface',
+    swatches: [
+      { text: 'Surface', background: 'surface' },
+      { text: 'Surface dim (background)', background: 'surface-dim' },
+      { text: 'Surface bright', background: 'surface-bright' },
+      { text: 'Surface inverse', background: 'surface-inverse', foreground: 'on-surface-inverse' }
+    ]
+  },
+  {
+    swatches: [
+      { text: 'Surface container', background: 'surface-container', foreground: 'on-surface-container' },
+      { text: 'Surface container (low)', background: 'surface-container-low', foreground: 'on-surface' },
+      { text: 'Surface container (medium)', background: 'surface-container-medium', foreground: 'on-surface' },
+      { text: 'Surface container (high)', background: 'surface-container-high', foreground: 'on-surface-container-high' }
+    ]
+  },
+  {
+    header: 'Key colors',
+    swatches: [
+      { text: 'Primary', background: 'primary', foreground: 'on-primary' },
+      { text: 'Primary container', background: 'primary-container', foreground: 'on-primary-container' }
+    ]
+  },
+  {
+    swatches: [
+      { text: 'Secondary', background: 'secondary', foreground: 'on-secondary' },
+      { text: 'Secondary container', background: 'secondary-container', foreground: 'on-secondary-container' }
+    ]
+  },
+  {
+    swatches: [
+      { text: 'Tertiary', background: 'tertiary', foreground: 'on-tertiary' },
+      { text: 'Tertiary container', background: 'tertiary-container', foreground: 'on-tertiary-container' }
+    ]
+  },
+  {
+    header: 'Status',
+    swatches: [
+      { text: 'Success', background: 'success', foreground: 'on-success' },
+      { text: 'Success container', background: 'success-container', foreground: 'on-success-container' }
+    ]
+  },
+  {
+    swatches: [
+      { text: 'Error ', background: 'error', foreground: 'on-error' },
+      { text: 'Error container', background: 'error-container', foreground: 'on-error-container' }
+    ]
+  },
+  {
+    swatches: [
+      { text: 'Warning', background: 'warning', foreground: 'on-warning' },
+      { text: 'Warning container', background: 'warning-container', foreground: 'on-warning-container' }
+    ]
+  },
+  {
+    swatches: [
+      { text: 'Info', background: 'info', foreground: 'on-info' },
+      { text: 'Info container', background: 'info-container', foreground: 'on-info-container' }
+    ]
+  },
+  {
+    header: 'Text',
+    swatches: [
+      { text: 'High', background: 'text-high', foreground: 'text-high-inverse' },
+      { text: 'Medium', background: 'text-medium', foreground: 'text-high-inverse' },
+      { text: 'Low', background: 'text-low', foreground: 'text-high' },
+      { text: 'Lowest', background: 'text-lowest', foreground: 'text-high' }
+    ]
+  },
+  {
+    header: 'Utilities',
+    swatches: [
+      { text: 'Outline', background: 'outline', foreground: 'text-high' }
+    ]
+  }
+];
+
+const container = document.getElementById('container');
+
+function buildSwatches(): void {
+  SWATCH_GROUPS.forEach(group => {
+    const swatchContainer = document.createElement('div');
+    swatchContainer.classList.add('swatch-container');
+
+    if (group.header) {
+      const header = document.createElement('h2');
+      header.classList.add('forge-typography--subheading4');
+      header.textContent = group.header;
+      container.appendChild(header);
+    }
+
+    group.swatches.forEach(config => {
+      swatchContainer.appendChild(createSwatch(config));
+    });
+
+    container.appendChild(swatchContainer);
+  });
+}
+
+function createSwatch(config: ISwatch): HTMLElement {
+  const swatch = document.createElement('div');
+  swatch.classList.add('swatch');
+  if (config.text) {
+    swatch.textContent = config.text;
+  }
+  swatch.style.setProperty('background-color', `var(--forge-theme-${config.background})`);
+
+  if (config.foreground) {
+    swatch.style.setProperty('color', `var(--forge-theme-${config.foreground})`);
+  }
+
+  return swatch;
+}
+
+buildSwatches();
+
+function hexToRGB(hex: string): [number, number, number] {
+  let hexValue = hex.replace('#', '');
+  if (hexValue.length === 3) {
+    hexValue = hexValue.split('').map(char => char + char).join('');
+  }
+  const r = parseInt(hexValue.substring(0, 2), 16);
+  const g = parseInt(hexValue.substring(2, 4), 16);
+  const b = parseInt(hexValue.substring(4, 6), 16);
+  return [r, g, b];
+}
+
+function _linearChannelValue($channelValue: number): number {
+  const normalizedChannelValue = $channelValue / 255;
+  if (normalizedChannelValue < 0.03928) {
+    return normalizedChannelValue / 12.92;
+  }
+  return Math.pow(normalizedChannelValue + 0.055 / 1.055, 2.4);
+}
+
+// Calculate the luminance for a color.
+// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+function _luminance($color): number {
+  const [r, g, b] = hexToRGB($color);
+  const red = _linearChannelValue(r);
+  const green = _linearChannelValue(g);
+  const blue = _linearChannelValue(b);
+  return 0.2126 * red + 0.7152 * green + 0.0722 * blue;
+}
+
+// Calculate the contrast ratio between two colors.
+// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+function contrastRatio($back: string, $front: string): number {
+  const backLum = _luminance($back) + 0.05;
+  const foreLum = _luminance($front) + 0.05;
+  return Math.max(backLum, foreLum) / Math.min(backLum, foreLum);
+}
diff --git a/src/dev/pages/typography/typography.ejs b/src/dev/pages/typography/typography.ejs
index fa5007cee..17ecb4477 100644
--- a/src/dev/pages/typography/typography.ejs
+++ b/src/dev/pages/typography/typography.ejs
@@ -1,37 +1,55 @@
-<div class="forge-typography--heading-01">Heading 01</div>
-<div class="forge-typography--heading-02">Heading 02</div>
-<div class="forge-typography--heading-03">Heading 03</div>
-<div class="forge-typography--heading-04">Heading 04</div>
-<div class="forge-typography--heading-05">Heading 05</div>
-<div class="forge-typography--heading-06">Heading 06</div>
-<div class="forge-typography--display-01">Display 01</div>
-<div class="forge-typography--display-02">Display 02</div>
-<div class="forge-typography--display-03">Display 03</div>
-<div class="forge-typography--display-04">Display 04</div>
-<div class="forge-typography--display-05">Display 05</div>
-<div class="forge-typography--display-06">Display 06</div>
-<div class="forge-typography--body-01">Body 01</div>
-<div class="forge-typography--body-02">Body 02</div>
-<div class="forge-typography--body">Body (alias for Body 02)</div>
-<div class="forge-typography--title">Title</div>
-<div class="forge-typography--subtitle">Subtitle</div>
-<div class="forge-typography--label">Label</div>
-<div class="forge-typography--button">Button</div>
+<div>
+  <div class="forge-typography--heading2">Heading</div>
+  <div class="forge-typography--subheading1">Subheading</div>
+  <p>
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio vero dolore aspernatur veritatis cupiditate accusantium totam odit nihil officiis perspiciatis molestiae, cum sed ad quae dolorum. Veritatis omnis nobis repellat?
+  </p>
+</div>
 
-<forge-divider style="margin-block: 24px;"></forge-divider>
+<div class="section">
+  <div class="forge-typography--display1">Display 1</div>
+  <div class="forge-typography--display2">Display 2</div>
+  <div class="forge-typography--display3">Display 3</div>
+  <div class="forge-typography--display4">Display 4</div>
+  <div class="forge-typography--display5">Display 5</div>
+  <div class="forge-typography--display6">Display 6</div>
+  <div class="forge-typography--display7">Display 7</div>
+  <div class="forge-typography--display8">Display 8</div>
+</div>
 
-<div class="forge-typography--title">Title</div>
-<div class="forge-typography--headline1">Headline 1</div>
-<div class="forge-typography--headline2">Headline 2</div>
-<div class="forge-typography--headline3">Headline 3</div>
-<div class="forge-typography--headline4">Headline 4</div>
-<div class="forge-typography--headline5">Headline 5</div>
-<div class="forge-typography--headline6">Headline 6</div>
-<div class="forge-typography--subtitle1">Subtitle 1</div>
-<div class="forge-typography--subtitle2">Subtitle 2</div>
-<div class="forge-typography--body1">Body 1</div>
-<div class="forge-typography--body2">Body 2</div>
-<div class="forge-typography--caption">Caption</div>
-<div class="forge-typography--overline">Overline</span>
+<div class="section">
+  <div class="forge-typography--heading1">Heading 1</div>
+  <div class="forge-typography--heading2">Heading 2</div>
+  <div class="forge-typography--heading3">Heading 3</div>
+  <div class="forge-typography--heading4">Heading 4</div>
+  <div class="forge-typography--heading5">Heading 5</div>
+  <div class="forge-typography--heading6">Heading 6</div>
+  <div class="forge-typography--heading7">Heading 7</div>
+  <div class="forge-typography--heading8">Heading 8</div>
+</div>
+
+<div class="section">
+  <div class="forge-typography--subheading1">Subheading 1</div>
+  <div class="forge-typography--subheading2">Subheading 2</div>
+  <div class="forge-typography--subheading3">Subheading 3</div>
+  <div class="forge-typography--subheading4">Subheading 4</div>
+  <div class="forge-typography--subheading5">Subheading 5</div>
+  <div class="forge-typography--subheading6">Subheading 6</div>
+  <div class="forge-typography--subheading7">Subheading 7</div>
+  <div class="forge-typography--subheading8">Subheading 8</div>
+</div>
+
+<div class="section">
+  <div class="forge-typography--body1">Body 1</div>
+  <div class="forge-typography--body2">Body 2</div>
+  <div class="forge-typography--body3">Body 3</div>
+  <div class="forge-typography--body4">Body 4</div>
+</div>
+
+<div class="section">
+  <div class="forge-typography--label">Label</div>
+  <div class="forge-typography--button">Button</div>
+  <div class="forge-typography--overline">Overline</div>
+</div>
 
 <script type="module" src="typography.ts"></script>
diff --git a/src/dev/pages/typography/typography.scss b/src/dev/pages/typography/typography.scss
new file mode 100644
index 000000000..a6b0b109e
--- /dev/null
+++ b/src/dev/pages/typography/typography.scss
@@ -0,0 +1,3 @@
+.section:not(:last-of-type) {
+  margin-block-end: 24px;
+}
diff --git a/src/dev/pages/typography/typography.ts b/src/dev/pages/typography/typography.ts
index 94c763cff..5bdbe1ff4 100644
--- a/src/dev/pages/typography/typography.ts
+++ b/src/dev/pages/typography/typography.ts
@@ -1,2 +1,3 @@
 import '$src/shared';
 import '@tylertech/forge/divider';
+import './typography.scss';
diff --git a/src/dev/pages/view-switcher/view-switcher.ts b/src/dev/pages/view-switcher/view-switcher.ts
index 2b9a95076..1b7911fdd 100644
--- a/src/dev/pages/view-switcher/view-switcher.ts
+++ b/src/dev/pages/view-switcher/view-switcher.ts
@@ -8,8 +8,8 @@ const tabBar = document.querySelector('forge-tab-bar#tab-bar') as ITabBarCompone
 const viewSwitcher = document.querySelector('forge-view-switcher#view-switcher') as IViewSwitcherComponent;
 const typeRadioGroup = document.querySelector('#view-switcher-animation-type-radiogroup');
 
-tabBar.addEventListener('forge-tab-bar-activate', ({ detail: { index }}) => {
-  viewSwitcher.index = index;
+tabBar.addEventListener('forge-tab-bar-change', ({ detail }) => {
+  viewSwitcher.index = detail;
 });
 
 typeRadioGroup.addEventListener('change', evt => {
diff --git a/src/dev/src/component-list.ts b/src/dev/src/component-list.ts
index 56b937545..39bbf3fb0 100644
--- a/src/dev/src/component-list.ts
+++ b/src/dev/src/component-list.ts
@@ -127,7 +127,7 @@ function buildComponentsList(groups: IComponentGroup[]): HTMLElement[] {
 
   for (const { label: groupLabel, components } of groups) {
     const groupHeader = document.createElement('h3');
-    groupHeader.classList.add('forge-typography--subtitle1-secondary');
+    groupHeader.classList.add('forge-typography--subheading3');
     groupHeader.textContent = groupLabel;
     elements.push(groupHeader);
 
diff --git a/src/dev/src/components.json b/src/dev/src/components.json
index cd493a5a6..6b4b5ce17 100644
--- a/src/dev/src/components.json
+++ b/src/dev/src/components.json
@@ -8,6 +8,7 @@
   { "label": "Bottom sheet", "path": "/pages/bottom-sheet/bottom-sheet.html" },
   { "label": "Busy indicator", "path": "/pages/busy-indicator/busy-indicator.html" },
   { "label": "Button", "path": "/pages/button/button.html" },
+  { "label": "Button area", "path": "/pages/button-area/button-area.html" },
   { "label": "Button toggle", "path": "/pages/button-toggle/button-toggle.html", "tags": ["form"] },
   { "label": "Calendar", "path": "/pages/calendar/calendar.html", "tags": ["form"] },
   { "label": "Card", "path": "/pages/card/card.html" },
@@ -52,6 +53,7 @@
   { "label": "Table", "path": "/pages/table/table.html" },
   { "label": "Tabs", "path": "/pages/tabs/tabs.html", "tags": ["view", "bar"] },
   { "label": "Text field", "path": "/pages/text-field/text-field.html", "tags": ["form"] },
+  { "label": "Theme", "path": "/pages/theme/theme.html", "tags": ["color"] },
   { "label": "Time picker", "path": "/pages/time-picker/time-picker.html" },
   { "label": "Toast", "path": "/pages/toast/toast.html" },
   { "label": "Toolbar", "path": "/pages/toolbar/toolbar.html" },
diff --git a/src/dev/src/partials/header.ejs b/src/dev/src/partials/header.ejs
index ce9cc736e..5d2d08475 100644
--- a/src/dev/src/partials/header.ejs
+++ b/src/dev/src/partials/header.ejs
@@ -1,6 +1,6 @@
 <forge-app-bar slot="header" id="page-app-bar">
   <a slot="title" href="/">
-    <h1 class="forge-typography--headline5"><%= site.title %><%= title ? ` - ${title}` : null %></h1>
+    <h1 class="forge-typography--heading4"><%= site.title %><%= title ? ` - ${title}` : null %></h1>
     <forge-ripple></forge-ripple>
   </a>
   <forge-icon name="forge_logo" slot="logo"></forge-icon>
diff --git a/src/dev/src/partials/options-drawer.ejs b/src/dev/src/partials/options-drawer.ejs
index 62cbeb3ef..92dfc8c84 100644
--- a/src/dev/src/partials/options-drawer.ejs
+++ b/src/dev/src/partials/options-drawer.ejs
@@ -1,7 +1,7 @@
 <aside slot="body-left">
   <forge-drawer>
     <forge-toolbar slot="header">
-      <h2 slot="start" class="forge-typography--subtitle1-secondary">Options</h2>
+      <h2 slot="start" class="forge-typography--heading1">Options</h2>
     </forge-toolbar>
     <div class="options-container">
       <% controls.forEach(control => { %>
diff --git a/src/dev/src/partials/page.ejs b/src/dev/src/partials/page.ejs
index ad98d2f3f..fa3c128b5 100644
--- a/src/dev/src/partials/page.ejs
+++ b/src/dev/src/partials/page.ejs
@@ -13,7 +13,7 @@
         <forge-card class="card<%= !page.options?.length ? ' card--centered' : undefined %>">
           <!-- Card header-->
           <forge-toolbar>
-            <h2 slot="start" id="content-title" class="forge-typography--headline5"><%= page.contentTitle ?? page.title %></h2>
+            <h2 slot="start" id="content-title" class="forge-typography--heading4"><%= page.contentTitle ?? page.title %></h2>
           </forge-toolbar>
 
           <!-- Card content -->
diff --git a/src/dev/src/styles/_header.scss b/src/dev/src/styles/_header.scss
index 2983ca043..c0a25bdb6 100644
--- a/src/dev/src/styles/_header.scss
+++ b/src/dev/src/styles/_header.scss
@@ -1,4 +1,4 @@
 #page-app-bar {
-  --forge-app-bar-theme-background: var(--mdc-theme-secondary);
-  --forge-app-bar-theme-on-background: var(--mdc-theme-text-primary-on-light);
+  --forge-app-bar-theme-background: var(--forge-theme-secondary);
+  --forge-app-bar-theme-on-background: var(--forge-theme-on-secondary);
 }
diff --git a/src/dev/src/styles/_options.scss b/src/dev/src/styles/_options.scss
index 6990d964b..f51213299 100644
--- a/src/dev/src/styles/_options.scss
+++ b/src/dev/src/styles/_options.scss
@@ -2,11 +2,21 @@
   padding: 16px;
   display: flex;
   flex-direction: column;
-  gap: 16px;
 
   forge-drawer:has(.options-container) {
     --forge-drawer-width: 300px;
   }
+
+  forge-text-field,
+  forge-select {
+    &:not(:first-child) {
+      margin-block-start: 8px;
+    }
+
+    &:not(:last-child) {
+      margin-block-end: 8px;
+    }
+  }
   
   forge-switch {
     &::part(label) {
diff --git a/src/lib/accordion/build.json b/src/lib/accordion/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/accordion/build.json
+++ b/src/lib/accordion/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/app-bar/build.json b/src/lib/app-bar/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/app-bar/build.json
+++ b/src/lib/app-bar/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/autocomplete/autocomplete-constants.ts b/src/lib/autocomplete/autocomplete-constants.ts
index 6b809b677..d7ebe04f6 100644
--- a/src/lib/autocomplete/autocomplete-constants.ts
+++ b/src/lib/autocomplete/autocomplete-constants.ts
@@ -77,3 +77,7 @@ export interface IAutocompletePopupConfiguration {
 export interface IAutocompleteSelectEventData<T = any> {
   value: T;
 }
+
+export interface IAutocompleteForceFilterOptions {
+  preserveValue: boolean;
+}
diff --git a/src/lib/autocomplete/autocomplete-foundation.ts b/src/lib/autocomplete/autocomplete-foundation.ts
index 05052c19e..1a37d369c 100644
--- a/src/lib/autocomplete/autocomplete-foundation.ts
+++ b/src/lib/autocomplete/autocomplete-foundation.ts
@@ -4,7 +4,7 @@ import { IListItemComponent } from '../list';
 import { IListDropdownConfig, IListDropdownOption, ListDropdownAsyncStyle, ListDropdownFooterBuilder, ListDropdownHeaderBuilder, ListDropdownOptionBuilder } from '../list-dropdown';
 import { IListDropdownAwareFoundation, ListDropdownAwareFoundation } from '../list-dropdown/list-dropdown-aware-foundation';
 import { IAutocompleteAdapter } from './autocomplete-adapter';
-import { AutocompleteFilterCallback, AutocompleteMode, AutocompleteOptionBuilder, AutocompleteSelectedTextBuilder, AUTOCOMPLETE_CONSTANTS, IAutocompleteOption, IAutocompleteOptionGroup, IAutocompleteSelectEventData } from './autocomplete-constants';
+import { AutocompleteFilterCallback, AutocompleteMode, AutocompleteOptionBuilder, AutocompleteSelectedTextBuilder, AUTOCOMPLETE_CONSTANTS, IAutocompleteForceFilterOptions, IAutocompleteOption, IAutocompleteOptionGroup, IAutocompleteSelectEventData } from './autocomplete-constants';
 import { getSelectedOption, isOptionType, optionEqualPredicate, OptionType } from './autocomplete-utils';
 
 export interface IAutocompleteFoundation extends IListDropdownAwareFoundation {
@@ -25,6 +25,7 @@ export interface IAutocompleteFoundation extends IListDropdownAwareFoundation {
   matchKey: string | null | undefined;
   appendOptions(options: IAutocompleteOption[] | IAutocompleteOptionGroup[]): void;
   beforeValueChange: (value: any) => boolean | Promise<boolean>;
+  forceFilter(opts: IAutocompleteForceFilterOptions): void;
 }
 
 /**
@@ -117,6 +118,23 @@ export class AutocompleteFoundation extends ListDropdownAwareFoundation implemen
     }
   }
 
+  public async forceFilter({ preserveValue }: IAutocompleteForceFilterOptions): Promise<void> {
+    // Clear any existing options since they are expected to no longer be valid
+    this._options = [];
+
+    // Execute the filter callback to fetch new options if the consumer has provided any.
+    // This allows us to update the current value(s) with new label(s) if there are any matches
+    await this._executeFilter(true, true);
+
+    // Edge case, but if the consumer has a need to preserve the existing selection if it doesn't exist in the new options, this will support that
+    if (preserveValue) {
+      this._options.push(...this._selectedOptions as IAutocompleteOption<any>[] & IAutocompleteOptionGroup[]);
+    }
+
+    // This will update our current state, but it's expected that consumers will manage their own values so it's likely that this will be called again soon
+    this._applyValue(this._values);
+  }
+
   private _attachListeners(): void {
     this._adapter.addInputListener('click', this._clickListener);
     this._adapter.addInputListener('focus', this._focusListener);
@@ -178,6 +196,7 @@ export class AutocompleteFoundation extends ListDropdownAwareFoundation implemen
   }
 
   private _onClear(evt: MouseEvent): void {
+    this._filterText = '';
     this._clearValue();
     this._adapter.setSelectedText(this._getSelectedText());
   }
diff --git a/src/lib/autocomplete/autocomplete.ts b/src/lib/autocomplete/autocomplete.ts
index 8be1a9b52..c698fca77 100644
--- a/src/lib/autocomplete/autocomplete.ts
+++ b/src/lib/autocomplete/autocomplete.ts
@@ -9,7 +9,7 @@ import { PopupComponent } from '../popup';
 import { SkeletonComponent } from '../skeleton';
 import { TextFieldComponent } from '../text-field';
 import { AutocompleteAdapter } from './autocomplete-adapter';
-import { AutocompleteFilterCallback, AutocompleteMode, AutocompleteOptionBuilder, AutocompleteSelectedTextBuilder, AUTOCOMPLETE_CONSTANTS, IAutocompleteOption, IAutocompleteOptionGroup, IAutocompleteSelectEventData } from './autocomplete-constants';
+import { AutocompleteFilterCallback, AutocompleteMode, AutocompleteOptionBuilder, AutocompleteSelectedTextBuilder, AUTOCOMPLETE_CONSTANTS, IAutocompleteForceFilterOptions, IAutocompleteOption, IAutocompleteOptionGroup, IAutocompleteSelectEventData } from './autocomplete-constants';
 import { AutocompleteFoundation } from './autocomplete-foundation';
 
 import template from './autocomplete.html';
@@ -36,6 +36,7 @@ export interface IAutocompleteComponent extends IListDropdownAware {
   appendOptions(options: IAutocompleteOption[] | IAutocompleteOptionGroup[]): void;
   openDropdown(): void;
   closeDropdown(): void;
+  forceFilter(opts?: IAutocompleteForceFilterOptions): void;
 }
 
 declare global {
@@ -232,4 +233,12 @@ export class AutocompleteComponent extends ListDropdownAware implements IAutocom
   public closeDropdown(): void {
     this.open = false;
   }
+
+  /**
+   * Forces the filter callback to be executed to update the current selection state with new options.
+   * @param opts
+   */
+  public forceFilter(opts: IAutocompleteForceFilterOptions = { preserveValue: false }): void {
+    this._foundation.forceFilter(opts);
+  }
 }
diff --git a/src/lib/autocomplete/build.json b/src/lib/autocomplete/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/autocomplete/build.json
+++ b/src/lib/autocomplete/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/avatar/build.json b/src/lib/avatar/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/avatar/build.json
+++ b/src/lib/avatar/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/backdrop/build.json b/src/lib/backdrop/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/backdrop/build.json
+++ b/src/lib/backdrop/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/badge/build.json b/src/lib/badge/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/badge/build.json
+++ b/src/lib/badge/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/banner/banner.html b/src/lib/banner/banner.html
index daaee1d1f..5aca22ef5 100644
--- a/src/lib/banner/banner.html
+++ b/src/lib/banner/banner.html
@@ -6,7 +6,7 @@
           <slot name="icon"></slot>
         </div>
         <div class="forge-banner__container-wrapper-subsection" part="subsection-wrapper">
-          <div class="forge-banner__container-wrapper-subsection-text forge-typography--body1" part="subsection-text">
+          <div class="forge-banner__container-wrapper-subsection-text forge-typography--body2" part="subsection-text">
             <slot></slot>
           </div>
           <div class="forge-banner__container-wrapper-subsection-action" part="action-subsection">
diff --git a/src/lib/banner/build.json b/src/lib/banner/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/banner/build.json
+++ b/src/lib/banner/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/bottom-sheet/build.json b/src/lib/bottom-sheet/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/bottom-sheet/build.json
+++ b/src/lib/bottom-sheet/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/build.json b/src/lib/build.json
index 72fe5ae65..9b238196c 100644
--- a/src/lib/build.json
+++ b/src/lib/build.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "entry": "./index.ts",
   "stylesheets": [
     "./forge.scss",
diff --git a/src/lib/busy-indicator/build.json b/src/lib/busy-indicator/build.json
index 032f7262a..f2cc9e020 100644
--- a/src/lib/busy-indicator/build.json
+++ b/src/lib/busy-indicator/build.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json",
   "stylesheets": [
     "./forge-busy-indicator.scss"
diff --git a/src/lib/button-area/_mixins.scss b/src/lib/button-area/_mixins.scss
new file mode 100644
index 000000000..4d628e828
--- /dev/null
+++ b/src/lib/button-area/_mixins.scss
@@ -0,0 +1,42 @@
+@use '@material/ripple/ripple' as mdc-ripple;
+@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@use '../utils/mixins' as utils;
+@use '../ripple/forge-ripple';
+
+@mixin core-styles() {
+  .forge-button-area {
+    @include base;
+
+    &:not(.forge-button-area--disabled) {
+      &.forge-button-area {
+        @include enabled;
+      }
+    }
+
+    &__button {
+      @include button;
+    }
+  }
+}
+
+@mixin host() {
+  display: block;
+}
+
+@mixin base() {
+  overflow: hidden;
+}
+
+@mixin enabled() {
+  @include mdc-ripple.surface;
+  @include mdc-ripple.radius-bounded;
+  @include mdc-ripple-theme.states(primary);
+  @include mdc-ripple-theme.states-activated(primary);
+  @include mdc-ripple-theme.states-selected(primary);
+
+  cursor: pointer;
+}
+
+@mixin button() {
+  @include utils.visually-hidden;
+}
diff --git a/src/lib/list/build.json b/src/lib/button-area/build.json
similarity index 100%
rename from src/lib/list/build.json
rename to src/lib/button-area/build.json
diff --git a/src/lib/button-area/button-area-adapter.ts b/src/lib/button-area/button-area-adapter.ts
new file mode 100644
index 000000000..eb587a3cd
--- /dev/null
+++ b/src/lib/button-area/button-area-adapter.ts
@@ -0,0 +1,162 @@
+import { addClass, getShadowElement, removeClass, toggleClass } from '@tylertech/forge-core';
+
+import { BaseAdapter, IBaseAdapter, createUserInteractionListener } from '../core';
+import { ForgeRipple, ForgeRippleAdapter, ForgeRippleCapableSurface, ForgeRippleFoundation } from '../ripple';
+import { IButtonAreaComponent } from './button-area';
+import { BUTTON_AREA_CONSTANTS } from './button-area-constants';
+
+export interface IButtonAreaAdapter extends IBaseAdapter {
+  destroy(): void;
+  setDisabled(value: boolean): void;
+  addListener(type: string, listener: (event: Event) => void): void;
+  removeListener(type: string, listener: (event: Event) => void): void;
+  addSlotChangeListener(listener: () => void): void;
+  removeSlotChangeListener(listener: () => void): void;
+  startButtonObserver(callback: MutationCallback): void;
+  stopButtonObserver(): void;
+  detectSlottedButton(): void;
+  buttonIsDisabled(): boolean;
+  requestDisabledButtonFrame(): void;
+  createRipple(): Promise<void>;
+}
+
+export class ButtonAreaAdapter extends BaseAdapter<IButtonAreaComponent> implements IButtonAreaAdapter, ForgeRippleCapableSurface {
+  private _rootElement: HTMLElement;
+  private _buttonSlotElement: HTMLSlotElement;
+  private _buttonElement?: HTMLButtonElement;
+  private _rippleInstance?: ForgeRipple;
+  private _buttonObserver?: MutationObserver;
+  private _destroyUserInteractionListener: (() => void) | undefined;
+
+  constructor(component: IButtonAreaComponent) {
+    super(component);
+    this._rootElement = getShadowElement(component, BUTTON_AREA_CONSTANTS.selectors.ROOT);
+    this._buttonSlotElement = getShadowElement(component, BUTTON_AREA_CONSTANTS.selectors.BUTTON_SLOT) as HTMLSlotElement;
+  }
+
+  public destroy(): void {
+    if (typeof this._destroyUserInteractionListener === 'function') {
+      this._destroyUserInteractionListener();
+    }
+  }
+
+  public get root(): HTMLElement {
+    return this._rootElement;
+  }
+
+  public get unbounded(): boolean | undefined {
+    return false;
+  }
+
+  public get disabled(): boolean | undefined {
+    return this.buttonIsDisabled();
+  }
+
+  public setDisabled(value: boolean): void {
+    toggleClass(this._rootElement, value, BUTTON_AREA_CONSTANTS.classes.DISABLED);
+    this._buttonElement?.toggleAttribute(BUTTON_AREA_CONSTANTS.attributes.DISABLED, value);
+  }
+
+  public addListener(type: string, listener: (event: Event) => void): void {
+    this._rootElement.addEventListener(type, listener);
+  }
+
+  public removeListener(type: string, listener: (event: Event) => void): void {
+    this._rootElement.removeEventListener(type, listener);
+  }
+
+  public addSlotChangeListener(listener: () => void): void {
+    this._buttonSlotElement.addEventListener('slotchange', listener);
+  }
+
+  public removeSlotChangeListener(listener: () => void): void {
+    this._buttonSlotElement.removeEventListener('slotchange', listener);
+  }
+
+  public startButtonObserver(callback: MutationCallback): void {
+    if (this._buttonElement) {
+      this._buttonObserver = new MutationObserver(callback);
+      this._buttonObserver.observe(this._buttonElement, { attributeFilter: [BUTTON_AREA_CONSTANTS.attributes.DISABLED] });
+    }
+  }
+
+  public stopButtonObserver(): void {
+    if (this._buttonObserver) {
+      this._buttonObserver.disconnect();
+      this._buttonObserver = undefined;
+    }
+  }
+
+  public detectSlottedButton(): void {
+    this._buttonElement = this._buttonSlotElement.assignedElements()[0] as HTMLButtonElement | undefined;
+  }
+
+  public buttonIsDisabled(): boolean {
+    return this._buttonElement?.disabled ?? true;
+  }
+
+  public requestDisabledButtonFrame(): void {
+    if (this._buttonElement) {
+      this._buttonElement.disabled = true;
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      requestAnimationFrame(() => this._buttonElement!.disabled = false);
+    }
+  }
+
+  public async createRipple(): Promise<void> {
+    if (!this._rippleInstance) {
+      const type = await this._userInteractionListener();
+      if (!this._rippleInstance) {
+        const adapter: ForgeRippleAdapter = {
+          ...ForgeRipple.createAdapter(this),
+          isSurfaceActive: () => this._rootElement.matches(':active') || (this._buttonElement?.matches(':active') ?? false),
+          isSurfaceDisabled: () => this.disabled ?? true,
+          isUnbounded: () => !!this.unbounded,
+          registerInteractionHandler: (evtType, handler) => {
+            if (this._isRootEvent(evtType)) {
+              this._rootElement.addEventListener(evtType, handler, { passive: true });
+            } else {
+              this._buttonElement?.addEventListener(evtType, handler, { passive: true});
+            }
+          },
+          deregisterInteractionHandler: (evtType, handler) => {
+            if (this._isRootEvent(evtType)) {
+              this._rootElement.removeEventListener(evtType, handler, { passive: true } as AddEventListenerOptions);
+            } else {
+              this._buttonElement?.removeEventListener(evtType, handler, { passive: true } as AddEventListenerOptions);
+            }
+          },
+          addClass: (className) => addClass(className, this._rootElement),
+          removeClass: (className) => removeClass(className, this._rootElement),
+          updateCssVariable: (varName, value) => this._rootElement.style.setProperty(varName, value)
+        };
+        this._rippleInstance = new ForgeRipple(this._rootElement, new ForgeRippleFoundation(adapter));
+        if (type === 'focusin') {
+          this._rippleInstance.handleFocus();
+        }
+      }
+    } else {
+      if (typeof this._destroyUserInteractionListener === 'function') {
+        this._destroyUserInteractionListener();
+      }
+
+      this._rippleInstance.destroy();
+      this._rippleInstance = undefined;
+    }
+  }
+
+  private async _userInteractionListener(): Promise<string> {
+    if (typeof this._destroyUserInteractionListener === 'function') {
+      this._destroyUserInteractionListener();
+    }
+    const { userInteraction, destroy } = createUserInteractionListener(this._rootElement);
+    this._destroyUserInteractionListener = destroy;
+    const { type } = await userInteraction;
+    this._destroyUserInteractionListener = undefined;
+    return type;
+  }
+
+  private _isRootEvent(evtType: string): boolean {
+    return ['touchstart', 'pointerdown', 'mousedown'].includes(evtType);
+  }
+}
diff --git a/src/lib/button-area/button-area-constants.ts b/src/lib/button-area/button-area-constants.ts
new file mode 100644
index 000000000..afe2adaa5
--- /dev/null
+++ b/src/lib/button-area/button-area-constants.ts
@@ -0,0 +1,31 @@
+import { COMPONENT_NAME_PREFIX } from '../constants';
+
+const elementName = `${COMPONENT_NAME_PREFIX}button-area`;
+
+const attributes = {
+  DISABLED: 'disabled',
+  IGNORE: 'data-forge-ignore',
+  IGNORE_ALT: 'forge-ignore'
+};
+
+const ids = {
+  ROOT: 'root',
+  BUTTON_SLOT: 'button'
+};
+
+const classes = {
+  DISABLED: `forge-button-area--disabled`
+};
+
+const selectors = {
+  ROOT: `#${ids.ROOT}`,
+  BUTTON_SLOT: `slot[name=button]`
+};
+
+export const BUTTON_AREA_CONSTANTS = {
+  elementName,
+  attributes,
+  ids,
+  classes,
+  selectors
+};
diff --git a/src/lib/button-area/button-area-foundation.ts b/src/lib/button-area/button-area-foundation.ts
new file mode 100644
index 000000000..3e0da66af
--- /dev/null
+++ b/src/lib/button-area/button-area-foundation.ts
@@ -0,0 +1,113 @@
+import { ICustomElementFoundation, getEventPath } from '@tylertech/forge-core';
+
+import { IButtonAreaAdapter } from './button-area-adapter';
+import { BUTTON_AREA_CONSTANTS } from './button-area-constants';
+
+export interface IButtonAreaFoundation extends ICustomElementFoundation {
+  disabled: boolean;
+}
+
+export class ButtonAreaFoundation implements IButtonAreaFoundation {
+  private _disabled = false;
+  private _clickListener: (event: Event) => void;
+  private _keydownListener: (event: KeyboardEvent) => void;
+  private _pointerdownListener: (event: Event) => void;
+  private _slotListener: () => void;
+
+  constructor(private _adapter: IButtonAreaAdapter) {
+    this._clickListener = event => this._handleClick(event);
+    this._keydownListener = event => this._handleKeydown(event);
+    this._pointerdownListener = event => this._handlePointerdown(event);
+    this._slotListener = () => this._handleSlotChange();
+  }
+
+  public initialize(): void {
+    this._adapter.addListener('click', this._clickListener);
+    this._adapter.addListener('keydown', this._keydownListener);
+    this._adapter.addListener('pointerdown', this._pointerdownListener);
+    this._adapter.addSlotChangeListener(this._slotListener);
+    this._adapter.createRipple();
+  }
+
+  public disconnect(): void {
+    this._adapter.destroy();
+    this._adapter.removeListener('click', this._clickListener);
+    this._adapter.removeSlotChangeListener(this._slotListener);
+    this._adapter.stopButtonObserver();
+  }
+
+  private _handleClick(event: Event): void {
+    // Prevent the click if disabled
+    if (this._disabled) {
+      event.stopPropagation();
+    }
+
+    // Prevent the click if a selection was made
+    const selectionType = window.getSelection()?.type;
+    if (selectionType === 'Range') {
+      event.stopPropagation();
+    }
+
+    // Prevent the click if it originates from an ignored element
+    if (this._shouldIgnoreEvent(event)) {
+      event.stopPropagation();
+    }
+  }
+
+  private _handleKeydown(event: KeyboardEvent): void {
+    if (event.key !== ' ' && event.key !== 'Enter') {
+      return;
+    }
+
+    // Prevent the keydown if it originates from an ignored element
+    if (this._shouldIgnoreEvent(event)) {
+      event.stopPropagation();
+    }
+  }
+
+  private _handlePointerdown(event: Event): void {
+    if (this._disabled) {
+      return;
+    }
+
+    // Prevent the ripple animation when ignored children are clicked
+    if (this._shouldIgnoreEvent(event)) {
+      this._adapter.requestDisabledButtonFrame();
+    }
+  }
+
+  private _handleSlotChange(): void {
+    // Clear old button-connected listeners
+    this._adapter.stopButtonObserver();
+
+    this._adapter.detectSlottedButton();
+    this._adapter.startButtonObserver(() => this._handleButtonDisabled());
+
+    // Match the component and button states if either is disabled
+    if (this._adapter.buttonIsDisabled()) {
+      this.disabled = true;
+    } else if (this._disabled) {
+      this._adapter.setDisabled(true);
+    }
+  }
+
+  private _handleButtonDisabled(): void {
+    this.disabled = this._adapter.buttonIsDisabled();
+  }
+
+  private _shouldIgnoreEvent(event: Event): boolean {
+    const eventPath = getEventPath(event);
+    return eventPath.some(el => el.nodeType === 1 && (el.hasAttribute(BUTTON_AREA_CONSTANTS.attributes.IGNORE) || el.hasAttribute(BUTTON_AREA_CONSTANTS.attributes.IGNORE_ALT)));
+  }
+
+  public get disabled(): boolean {
+    return this._disabled;
+  }
+  public set disabled(value: boolean) {
+    if (this._disabled !== value) {
+      this._disabled = value;
+      this._adapter.setDisabled(this._disabled);
+      this._adapter.toggleHostAttribute(BUTTON_AREA_CONSTANTS.attributes.DISABLED, this._disabled);
+    }
+  }
+}
diff --git a/src/lib/button-area/button-area.html b/src/lib/button-area/button-area.html
new file mode 100644
index 000000000..c84007b5d
--- /dev/null
+++ b/src/lib/button-area/button-area.html
@@ -0,0 +1,8 @@
+<template>
+  <div class="forge-button-area" id="root" part="root">
+    <div class="forge-button-area__button" id="button" part="button">
+      <slot name="button"></slot>
+    </div>
+    <slot></slot>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/lib/button-area/button-area.scss b/src/lib/button-area/button-area.scss
new file mode 100644
index 000000000..e956eeb05
--- /dev/null
+++ b/src/lib/button-area/button-area.scss
@@ -0,0 +1,11 @@
+@use './mixins';
+
+@include mixins.core-styles;
+
+:host {
+  @include mixins.host;
+}
+
+:host([hidden]) {
+  display: none;
+}
diff --git a/src/lib/button-area/button-area.ts b/src/lib/button-area/button-area.ts
new file mode 100644
index 000000000..dbef38258
--- /dev/null
+++ b/src/lib/button-area/button-area.ts
@@ -0,0 +1,65 @@
+import { CustomElement, attachShadowTemplate, ICustomElement, FoundationProperty, coerceBoolean } from '@tylertech/forge-core';
+import { ButtonAreaAdapter } from './button-area-adapter';
+import { ButtonAreaFoundation } from './button-area-foundation';
+import { BUTTON_AREA_CONSTANTS } from './button-area-constants';
+import { RippleComponent } from '../ripple';
+
+import template from './button-area.html';
+import styles from './button-area.scss';
+
+export interface IButtonAreaComponent extends ICustomElement {
+  disabled: boolean;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'forge-button-area': IButtonAreaComponent;
+  }
+}
+
+/**
+ * The custom element class behind the `<forge-button-area>` element.
+ * 
+ * @tag forge-button-area
+ */
+@CustomElement({
+  name: BUTTON_AREA_CONSTANTS.elementName,
+  dependencies: [
+    RippleComponent
+  ]
+})
+export class ButtonAreaComponent extends HTMLElement implements IButtonAreaComponent {
+  public static get observedAttributes(): string[] {
+    return [
+      BUTTON_AREA_CONSTANTS.attributes.DISABLED
+    ];
+  }
+
+  private _foundation: ButtonAreaFoundation;
+
+  constructor() {
+    super();
+    attachShadowTemplate(this, template, styles);
+    this._foundation = new ButtonAreaFoundation(new ButtonAreaAdapter(this));
+  }
+
+  public connectedCallback(): void {
+    this._foundation.initialize();
+  }
+
+  public disconnectedCallback(): void {
+    this._foundation.disconnect();
+  }
+
+  public attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
+    switch (name) {
+      case BUTTON_AREA_CONSTANTS.attributes.DISABLED:
+        this.disabled = coerceBoolean(newValue);
+        break;
+    }
+  }
+
+  /** Controls whether the component and associated button element are disabled. */
+  @FoundationProperty()
+  public declare disabled: boolean;
+}
diff --git a/src/lib/button-area/index.ts b/src/lib/button-area/index.ts
new file mode 100644
index 000000000..8d527e19e
--- /dev/null
+++ b/src/lib/button-area/index.ts
@@ -0,0 +1,12 @@
+import { defineCustomElement } from '@tylertech/forge-core';
+
+import { ButtonAreaComponent } from './button-area';
+
+export * from './button-area-adapter';
+export * from './button-area-constants';
+export * from './button-area-foundation';
+export * from './button-area';
+
+export function defineButtonAreaComponent(): void {
+  defineCustomElement(ButtonAreaComponent);
+}
diff --git a/src/lib/button-toggle/build.json b/src/lib/button-toggle/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/button-toggle/build.json
+++ b/src/lib/button-toggle/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/button/build.json b/src/lib/button/build.json
index 486994cff..b5107734f 100644
--- a/src/lib/button/build.json
+++ b/src/lib/button/build.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json",
   "stylesheets": [
     "./forge-button.scss"
diff --git a/src/lib/calendar-dropdown/build.json b/src/lib/calendar-dropdown/build.json
index 557a83521..c7b43e317 100644
--- a/src/lib/calendar-dropdown/build.json
+++ b/src/lib/calendar-dropdown/build.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json",
   "include": false
 }
\ No newline at end of file
diff --git a/src/lib/calendar/build.json b/src/lib/calendar/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/calendar/build.json
+++ b/src/lib/calendar/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/calendar/calendar-foundation.ts b/src/lib/calendar/calendar-foundation.ts
index b03e1ddba..372e8d351 100644
--- a/src/lib/calendar/calendar-foundation.ts
+++ b/src/lib/calendar/calendar-foundation.ts
@@ -1605,6 +1605,10 @@ export class CalendarFoundation implements ICalendarFoundation {
   private _applyMin(): void {
     this._adapter.toggleHostAttribute(CALENDAR_CONSTANTS.attributes.MIN, !!this._minAttribute, this._minAttribute as string);
 
+    if (this._min && this._min.getMonth() > this._month) {
+      this._month = this._min.getMonth();
+    }
+
     if (this._isInitialized) {
       this._applyDisabledDates();
 
@@ -1620,6 +1624,10 @@ export class CalendarFoundation implements ICalendarFoundation {
   private _applyMax(): void {
     this._adapter.toggleHostAttribute(CALENDAR_CONSTANTS.attributes.MAX, !!this._maxAttribute, this._maxAttribute as string);
 
+    if (this._max && this._max.getMonth() < this._month) {
+      this._month = this._max.getMonth();
+    }
+
     if (this._isInitialized) {
       this._applyDisabledDates();
 
diff --git a/src/lib/calendar/calendar-menu/_mixins.scss b/src/lib/calendar/calendar-menu/_mixins.scss
index 6a3f3739a..ecd0bd8f2 100644
--- a/src/lib/calendar/calendar-menu/_mixins.scss
+++ b/src/lib/calendar/calendar-menu/_mixins.scss
@@ -1,9 +1,9 @@
 @use '@material/ripple/ripple' as mdc-ripple;
 @use '@material/ripple/ripple-theme' as mdc-ripple-theme;
+@use '@material/theme/theme' as mdc-theme;
 @use '@material/typography/typography' as mdc-typography;
 @use '../../theme';
 @use '../../theme/theme-values';
-@use '../../list/list-item/mixins' as list-item;
 @use './variables';
 
 @mixin core-styles() {
@@ -225,7 +225,7 @@
 }
 
 @mixin list-item() {
-  @include list-item.interactable;
+  @include _deprecated-interactable;
 
   display: flex;
   align-items: center;
@@ -412,3 +412,49 @@
     }
   }
 }
+
+@mixin _deprecated-interactable() {
+  @include mdc-ripple.surface;
+  @include mdc-ripple.radius-bounded;
+  @include mdc-ripple-theme.states(on-surface);
+  @include mdc-ripple-theme.states-activated(primary);
+  @include mdc-ripple-theme.states-selected(primary);
+
+  &--selected:focus:hover.mdc-ripple-upgraded--background-focused:not(.mdc-ripple-upgraded--foreground-activation)::before {
+    opacity: mdc-ripple-theme.states-opacity(primary, activated) + mdc-ripple-theme.states-opacity(primary, focus) +
+      mdc-ripple-theme.states-opacity(primary, hover);
+  }
+
+  &:focus,
+  &--active {
+    &:not(.forge-list-item--selected):not(.forge-list-item--activated):not(.mdc-ripple-upgraded--foreground-activation) {
+      &::before {
+        opacity: mdc-ripple-theme.states-opacity(primary, focus);
+      }
+      &:hover {
+        &::before {
+          opacity: mdc-ripple-theme.states-opacity(primary, focus) + mdc-ripple-theme.states-opacity(primary, hover);
+        }
+      }
+
+      &::before,
+      &::after {
+        @include mdc-theme.property(background-color, on-surface);
+      }
+    }
+  }
+
+  &--active:focus {
+    &.forge-list-item--selected.forge-list-item--activated:not(.mdc-ripple-upgraded--foreground-activation) {
+      &::before {
+        opacity: mdc-ripple-theme.states-opacity(primary, focus) + mdc-ripple-theme.states-opacity(primary, activated);
+      }
+      &:hover {
+        &::before {
+          opacity: mdc-ripple-theme.states-opacity(primary, focus) + mdc-ripple-theme.states-opacity(primary, hover) +
+            mdc-ripple-theme.states-opacity(primary, activated);
+        }
+      }
+    }
+  }
+}
diff --git a/src/lib/card/build.json b/src/lib/card/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/card/build.json
+++ b/src/lib/card/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/checkbox/_core.scss b/src/lib/checkbox/_core.scss
index 835498a44..e7bdc53d7 100644
--- a/src/lib/checkbox/_core.scss
+++ b/src/lib/checkbox/_core.scss
@@ -151,8 +151,6 @@
 @mixin label {
   @include typography.style(label);
 
-  margin-inline: 8px;
-
   &:empty {
     display: none;
   }
diff --git a/src/lib/checkbox/build.json b/src/lib/checkbox/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/checkbox/build.json
+++ b/src/lib/checkbox/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/checkbox/checkbox-foundation.ts b/src/lib/checkbox/checkbox-foundation.ts
index 4ec2872b7..b99511098 100644
--- a/src/lib/checkbox/checkbox-foundation.ts
+++ b/src/lib/checkbox/checkbox-foundation.ts
@@ -83,11 +83,18 @@ export class CheckboxFoundation implements ICheckboxFoundation {
       return;
     }
 
-    this._adapter.redispatchEvent(evt);
-
     const target = evt.target as HTMLInputElement;
+    const oldValue = this._checked;
     const newValue = target.checked;
     this._checked = newValue;
+
+    const isCancelled = !this._adapter.redispatchEvent(evt, { cancelable: true });
+    if (isCancelled) {
+      this._checked = oldValue;
+      this._adapter.setChecked(this._checked);
+      return;
+    }
+
     this._adapter.syncValue(this._submittedValue, this._formState);
     this._adapter.toggleHostAttribute(CHECKBOX_CONSTANTS.attributes.CHECKED, this._checked);
 
diff --git a/src/lib/checkbox/checkbox.test.ts b/src/lib/checkbox/checkbox.test.ts
index 90f424d1d..944a8c5cc 100644
--- a/src/lib/checkbox/checkbox.test.ts
+++ b/src/lib/checkbox/checkbox.test.ts
@@ -1,5 +1,3 @@
-/// <reference types="mocha" />
-
 import { expect } from '@esm-bundle/chai';
 import { fixture, html } from '@open-wc/testing';
 import { getShadowElement } from '@tylertech/forge-core';
diff --git a/src/lib/checkbox/checkbox.ts b/src/lib/checkbox/checkbox.ts
index 0c7e8e1bf..f16dfaf0b 100644
--- a/src/lib/checkbox/checkbox.ts
+++ b/src/lib/checkbox/checkbox.ts
@@ -58,7 +58,7 @@ declare global {
  * 
  * @method {(force?: boolean) => void} toggle - Toggles whether the checkbox is is checked or forces a checked state.
  *  
- * @event change {CustomEvent} - Dispatches when the switch's value changes.
+ * @event {Event} change - Dispatches when the checkbox is checked or unchecked.
  * 
  * @cssproperty --forge-theme-tertiary - The primary color of the checkbox.
  * @cssproperty --forge-theme-on-tertiary - The color of the checkmark and indeterminate mark.
diff --git a/src/lib/checkbox/index.ts b/src/lib/checkbox/index.ts
index 88c1f1699..a0cd4a206 100644
--- a/src/lib/checkbox/index.ts
+++ b/src/lib/checkbox/index.ts
@@ -2,7 +2,9 @@ import { defineCustomElement } from '@tylertech/forge-core';
 
 import { CheckboxComponent } from './checkbox';
 
+export * from './checkbox-adapter';
 export * from './checkbox-constants';
+export * from './checkbox-foundation';
 export * from './checkbox';
 export * from './checkbox-component-delegate';
 
diff --git a/src/lib/chip-field/_base.scss b/src/lib/chip-field/_base.scss
index 7928de576..8ccb750c4 100644
--- a/src/lib/chip-field/_base.scss
+++ b/src/lib/chip-field/_base.scss
@@ -220,6 +220,7 @@
 @mixin leading-core {
   @include _grid-leading;
   align-self: flex-start;
+  display: flex;
 }
 
 // Trailing
diff --git a/src/lib/chip-field/_selector.scss b/src/lib/chip-field/_selector.scss
index 3ef98896d..e4f207fe8 100644
--- a/src/lib/chip-field/_selector.scss
+++ b/src/lib/chip-field/_selector.scss
@@ -160,7 +160,7 @@
 
 @mixin leading {
   // Core
-  ::slotted([slot='leading']) {
+  &--leading .forge-field__leading-container {
     @include base.leading-core;
   }
   // Margin
@@ -171,7 +171,7 @@
 
 @mixin trailing {
   // Core
-  ::slotted([slot='trailing']) {
+  &--trailing .forge-field__trailing-container {
     @include base.trailing-core;
   }
   // Margin
diff --git a/src/lib/chip-field/build.json b/src/lib/chip-field/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/chip-field/build.json
+++ b/src/lib/chip-field/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/chip-field/chip-field-adapter.ts b/src/lib/chip-field/chip-field-adapter.ts
index 9a0efee5c..952c74883 100644
--- a/src/lib/chip-field/chip-field-adapter.ts
+++ b/src/lib/chip-field/chip-field-adapter.ts
@@ -74,7 +74,7 @@ export class ChipFieldAdapter extends FieldAdapter implements IChipFieldAdapter
   
   public tryPropagateClick(target: EventTarget | null): void {
     // We only propagate the click to the input if it originated from our internal input container
-    if (target instanceof HTMLElement && target.matches(CHIP_FIELD_CONSTANTS.selectors.INPUT_CONTAINER)) {
+    if (!this._inputElement.disabled && target instanceof HTMLElement && target.matches(CHIP_FIELD_CONSTANTS.selectors.INPUT_CONTAINER)) {
       this._inputElement?.dispatchEvent(new MouseEvent('click'));
     }
   }
diff --git a/src/lib/chip-field/chip-field.html b/src/lib/chip-field/chip-field.html
index c3a84bed6..61aff6945 100644
--- a/src/lib/chip-field/chip-field.html
+++ b/src/lib/chip-field/chip-field.html
@@ -1,7 +1,9 @@
 <template>
   <div class="forge-chip-field__wrapper" part="root">
     <div class="forge-chip-field forge-field" part="container">
-      <slot name="leading"></slot>
+      <div class="forge-field__leading-container" part="leading-container">
+        <slot name="leading"></slot>
+      </div>
       <div class="forge-field__label-input-container" part="label-input-container">
         <slot name="label"></slot>
         <div class="forge-field__input-container" part="input-container">
@@ -9,7 +11,9 @@
           <slot></slot>
         </div>
       </div>
-      <slot name="trailing"></slot>
+      <div class="forge-field__trailing-container" part="trailing-container">
+        <slot name="trailing"></slot>
+      </div>
       <div class="forge-field__addon-end-container" part="addon-end-container">
         <slot name="addon-end"></slot>
       </div>
diff --git a/src/lib/chips/build.json b/src/lib/chips/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/chips/build.json
+++ b/src/lib/chips/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/circular-progress/build.json b/src/lib/circular-progress/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/circular-progress/build.json
+++ b/src/lib/circular-progress/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/color-picker/build.json b/src/lib/color-picker/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/color-picker/build.json
+++ b/src/lib/color-picker/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/core/base/base-adapter.ts b/src/lib/core/base/base-adapter.ts
index d293a51cd..ffb60d8eb 100644
--- a/src/lib/core/base/base-adapter.ts
+++ b/src/lib/core/base/base-adapter.ts
@@ -1,13 +1,14 @@
 import { emitEvent, toggleAttribute } from '@tylertech/forge-core';
 import { IBaseComponent } from './base-component';
 
-export interface IBaseAdapter {
+export interface IBaseAdapter<T extends HTMLElement = HTMLElement> {
+  readonly hostElement: T;
   readonly isConnected: boolean;
   removeHostAttribute(name: string): void;
   getHostAttribute(name: string): string | null;
   setHostAttribute(name: string, value?: string): void;
   toggleHostAttribute(name: string, hasAttribute: boolean, value?: string): void;
-  redispatchEvent(event: Event): boolean;
+  redispatchEvent(event: Event, options?: { bubbles?: boolean; cancelable?: boolean; composed?: boolean }): boolean;
   emitHostEvent(type: string, data?: any, bubble?: boolean, cancelable?: boolean): boolean;
   addHostListener(event: string, callback: (event: Event) => void, options?: boolean | AddEventListenerOptions): void;
   removeHostListener(event: string, callback: (event: Event) => void): void;
@@ -23,6 +24,10 @@ export interface IBaseAdapter {
 export class BaseAdapter<T extends IBaseComponent> implements IBaseAdapter {
   constructor(protected _component: T) {}
 
+  public get hostElement(): T {
+    return this._component;
+  }
+
   public getHostAttribute(name: string): string | null {
     return this._component.getAttribute(name);
   }
@@ -39,14 +44,20 @@ export class BaseAdapter<T extends IBaseComponent> implements IBaseAdapter {
     toggleAttribute(this._component, hasAttribute, name, value);
   }
 
-  public redispatchEvent(event: Event): boolean {
+  public redispatchEvent(event: Event, options?: { bubbles?: boolean; cancelable?: boolean; composed?: boolean }): boolean {
     const isFromLightDom = !((event.target as HTMLElement)?.getRootNode() instanceof ShadowRoot);
     if (event.bubbles && (event.composed || isFromLightDom)) {
       event.stopPropagation();
     }
     
-    const newEvent = Reflect.construct(event.constructor, [event.type, event]);
-    const isCancelled = this._component.dispatchEvent(newEvent);
+    const eventCopy = {
+      ...event,
+      bubbles: options?.bubbles ?? event.bubbles,
+      cancelable: options?.cancelable ?? event.cancelable,
+      composed: options?.composed ?? event.composed
+    };
+    const newEvent = Reflect.construct(event.constructor, [event.type, eventCopy]);
+    const isCancelled = !this._component.dispatchEvent(newEvent);
     if (isCancelled) {
       event.preventDefault();
     }
@@ -57,12 +68,20 @@ export class BaseAdapter<T extends IBaseComponent> implements IBaseAdapter {
     return emitEvent(this._component, type, data, bubble, cancelable);
   }
 
+  public toggleHostListener(event: string, listener: EventListener, value: boolean, options?: boolean | AddEventListenerOptions): void {
+    if (value) {
+      this.addHostListener(event, listener, options);
+    } else {
+      this.removeHostListener(event, listener, options);
+    }
+  }
+
   public addHostListener(event: string, callback: (event: Event) => void, options?: boolean | AddEventListenerOptions): void {
     this._component.addEventListener(event, callback, options);
   }
 
-  public removeHostListener(event: string, callback: (event: Event) => void): void {
-    this._component.removeEventListener(event, callback);
+  public removeHostListener(event: string, callback: (event: Event) => void, options?: boolean | AddEventListenerOptions): void {
+    this._component.removeEventListener(event, callback, options);
   }
 
   public addWindowListener(event: string, callback: (event: Event) => void, options?: boolean | AddEventListenerOptions): void {
diff --git a/src/lib/core/keyboard/key-manager.ts b/src/lib/core/keyboard/key-manager.ts
new file mode 100644
index 000000000..7221da788
--- /dev/null
+++ b/src/lib/core/keyboard/key-manager.ts
@@ -0,0 +1,50 @@
+export type CanNavigateCallback = (index: number) => boolean;
+
+export interface IKeyManagerConfig {
+  canNavigateCallback?: CanNavigateCallback;
+}
+
+export const NAVIGATION_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'End', 'Home'];
+
+export class KeyManager {
+  constructor(private _config?: IKeyManagerConfig) {}
+
+  public isNavigationKey({ key, ctrlKey, altKey, shiftKey, metaKey }: KeyboardEvent): boolean {
+    if (ctrlKey || altKey || shiftKey || metaKey) {
+      return false;
+    }
+    return NAVIGATION_KEYS.includes(key);
+  }
+
+  public navigate(key: string, currentIndex: number, total: number): number {
+    const nextIndex = currentIndex + this.calculateNextIndex(key, total);
+    if (!this.canNavigateAtIndex(nextIndex)) {
+      return this.navigate(key, nextIndex, total);
+    }
+    return nextIndex;
+  }
+
+  public calculateNextIndex(key: string, total: number): number {
+    switch (key) {
+      case 'ArrowUp':
+      case 'ArrowLeft':
+        return -1;
+      case 'ArrowDown':
+      case 'ArrowRight':
+        return 1;
+      case 'Home':
+        return 0;
+      case 'End':
+        return total - 1;
+      default:
+        return 0;
+    }
+  }
+
+  public canNavigateAtIndex(index: number): boolean {
+    if (typeof this._config?.canNavigateCallback === 'function') {
+      return this._config.canNavigateCallback.call(null, index);
+    }
+    return true;
+  }
+}
diff --git a/src/lib/core/styles/_utils.scss b/src/lib/core/styles/_utils.scss
index 5a2a241ab..9ecd36674 100644
--- a/src/lib/core/styles/_utils.scss
+++ b/src/lib/core/styles/_utils.scss
@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:math';
 @use './core/config';
 
 ///
@@ -9,23 +10,69 @@
   @if not $value {
     @error 'Invalid #{$module} token: #{$key}';
   }
-  @return _create-var($module, $key, $value, $prefix);
+  @return create-var($module, $key, $value, $prefix);
 }
 
 ///
-/// Creates a CSS custom property declaration for a token in the provided module
+/// Creates a CSS custom property reference for a token in the provided module
 /// referencing an existing module token variable as the fallback.
 /// 
-@function module-ref($module, $token, $ref-token, $prefix: config.$prefix) {
-  @return _create-var($module, $token, var(--_#{$ref-token}), $prefix);
+/// To provide a module reference variable with a different fallback value, set the
+/// $type parameter to `value` and `$value` will be used verbatim.
+/// 
+/// Example:
+/// ```scss
+/// $my-token: module-ref(comp, color, primary-color); // => var(--forge-comp-color, var(--_primary-color));
+/// ```
+/// 
+@function module-ref($module, $token, $value, $type: ref, $prefix: config.$prefix) {
+  $fallback: if($type == ref, module-var($value), $value);
+  @return create-var($module, $token, $fallback, $prefix);
 }
 
 ///
-/// Creates a CSS custom property declaration for a module token using the
+/// Gets a module token CSS variable.
+/// 
+@function module-var($token, $prefix: config.$prefix) {
+  @return var(--_#{$token});
+}
+
+///
+/// Creates a CSS custom property reference for a module token using the
 /// provided value as the variable fallback.
 /// 
+/// Example:
+/// ```scss
+/// $my-token: module-val(comp, color, red); // => var(--forge-comp-color, red);
+/// $my-other-token: module-val(comp, color, theme.variable(primary)); // => var(--forge-comp-color, var(--forge-theme-primary));
+/// ```
+/// 
 @function module-val($module, $token, $value, $prefix: config.$prefix) {
-  @return _create-var($module, $token, $value, $prefix);
+  @return create-var($module, $token, $value, $prefix);
+}
+
+///
+/// Creates a CSS custom property variable reference for a token in the provided module.
+/// 
+/// Example:
+/// ```scss
+/// $my-var: variable-ref(theme, color); // => var(--forge-theme-color);
+/// ```
+///
+@function variable-ref($module, $token, $value: null, $prefix: config.$prefix) {
+  @return create-var($module, $token, $value, $prefix);
+}
+
+///
+/// Creates a CSS custom property variable reference for a token in the provided module.
+/// 
+/// Example:
+/// ```scss
+/// $my-var: variable-ref(theme, color); // => var(--forge-theme-color);
+/// ```
+///
+@function variable-ref($module, $token, $value: null, $prefix: config.$prefix) {
+  @return create-var($module, $token, $value, $prefix);
 }
 
 ///
@@ -37,22 +84,49 @@
     @if not map.get($module-tokens, $token-name) {
       @error 'Invalid token "#{$token-name}" for module "#{$module}"';
     }
-    --#{$prefix}-#{$module}-#{$token-name}: #{$token-value};
+    @include declare-var($module, $token-name, $token-value, $prefix);
   }
 }
 
 ///
 /// Creates a new map by inheriting from a base map and overriding/adding values.
-/// 
+///
 @function inherit-map($base, $overrides) {
   @return map.merge($base, $overrides);
 }
 
-
 ///
-/// Creates a CSS custom property declaration for a module token, using the provided fallback value.
+/// Creates a CSS custom property reference for a module token, using the provided fallback value.
 /// 
-@function _create-var($module, $token, $value, $prefix: config.$prefix) {
+@function create-var($module, $token, $value: null, $prefix: config.$prefix) {
+  @if $value == null {
+    @return var(--#{$prefix}-#{$module}-#{$token});
+  }
   @return var(--#{$prefix}-#{$module}-#{$token}, $value);
 }
 
+///
+/// Rounds a number to the specified number of decimal places.
+///
+@function round($value, $fractionDigits: 0) {
+  $power: math.pow(10, $fractionDigits);
+  @return math.div(math.round($power * $value), $power);
+}
+
+///
+/// Creates a CSS custom property declaration for a module token. 
+///
+@mixin declare-var($module, $name, $value, $prefix: config.$prefix) {
+  --#{$prefix}-#{$module}-#{$name}: #{$value};
+}
+
+///
+/// Flattens multiple maps into a single map. 
+///
+@function flatten($maps...) {
+  $merged: ();
+  @each $map in $maps {
+    $merged: map.merge($merged, $map);
+  }
+  @return $merged;
+}
diff --git a/src/lib/core/styles/scrollbar/index.scss b/src/lib/core/styles/scrollbar/index.scss
new file mode 100644
index 000000000..96432d008
--- /dev/null
+++ b/src/lib/core/styles/scrollbar/index.scss
@@ -0,0 +1,40 @@
+@use '../tokens/scrollbar/tokens';
+
+///
+/// Provides scrollbar styles.
+///
+@mixin base {
+  &::-webkit-scrollbar {
+    height: #{tokens.get(height)};
+    width: #{tokens.get(width)};
+  }
+  
+  &::-webkit-scrollbar-track {
+    background-color: #{tokens.get(track-container)};
+    
+    &:hover {
+      background-color: #{tokens.get(track-container-hover)};
+    }
+  }
+
+  &::-webkit-scrollbar-corner {
+    background-color: #{tokens.get(track-container)};
+  }
+
+  &::-webkit-scrollbar-thumb {
+    height: #{tokens.get(thumb-min-height)};
+    width: #{tokens.get(thumb-min-width)};
+    
+    border-radius: #{tokens.get(border-radius)};
+    border-width: #{tokens.get(border-width)};
+    border-style: solid;
+    border-color: transparent;
+    
+    background-color: #{tokens.get(thumb-container)};
+    background-clip: content-box;
+
+    &:hover {
+      background-color: #{tokens.get(thumb-container-hover)};
+    }
+  }
+}
diff --git a/src/lib/core/styles/spacing/index.scss b/src/lib/core/styles/spacing/index.scss
index 6183467e3..90ca72d2b 100644
--- a/src/lib/core/styles/spacing/index.scss
+++ b/src/lib/core/styles/spacing/index.scss
@@ -9,7 +9,7 @@
 /// Example:
 /// ```scss
 /// .my-class {
-///   margin: spacing.variable('200'); // => margin: var(--forge-spacing-standard, 16px);
+///   margin: spacing.variable('100'); // => margin: var(--forge-spacing-standard, 16px);
 /// }
 /// ```
 /// 
diff --git a/src/lib/core/styles/theme/_color-utils.scss b/src/lib/core/styles/theme/_color-utils.scss
new file mode 100644
index 000000000..ad0818a0b
--- /dev/null
+++ b/src/lib/core/styles/theme/_color-utils.scss
@@ -0,0 +1,58 @@
+@use 'sass:meta';
+@use 'sass:math';
+@use 'sass:color';
+
+@function _linear-channel-value($channel-value) {
+  $normalized-channel-value: math.div($channel-value, 255);
+  @if $normalized-channel-value < 0.03928 {
+    @return math.div($normalized-channel-value, 12.92);
+  }
+
+  @return math.pow(math.div($normalized-channel-value + 0.055, 1.055), 2.4);
+}
+
+// Calculate the luminance for a color.
+// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+@function luminance($color) {
+  $red: _linear-channel-value(color.red($color));
+  $green: _linear-channel-value(color.green($color));
+  $blue: _linear-channel-value(color.blue($color));
+
+  @return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
+}
+
+// Calculate the contrast ratio between two colors.
+// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+@function contrast-ratio($back, $front) {
+  $backLum: luminance($back) + 0.05;
+  $foreLum: luminance($front) + 0.05;
+  @return math.div(math.max($backLum, $foreLum), math.min($backLum, $foreLum));
+}
+
+// Determine whether the color is 'light' or 'dark'.
+@function tone($color) {
+  @if $color == 'dark' or $color == 'light' {
+    @return $color;
+  }
+
+  @if meta.type-of($color) != 'color' {
+    @warn '#{$color} is not a color. Falling back to "dark" tone.';
+    @return 'dark';
+  }
+
+  $minimumContrast: 3.1;
+  $lightContrast: contrast-ratio($color, white);
+  $darkContrast: contrast-ratio($color, rgba(black, 0.87));
+
+  @if ($lightContrast < $minimumContrast) and ($darkContrast > $lightContrast) {
+    @return 'light';
+  } @else {
+    @return 'dark';
+  }
+}
+
+// Determine whether to use dark or light text on top of given color to meet accessibility standards for contrast.
+// Returns 'dark' if the given color is light and 'light' if the given color is dark.
+@function contrast-tone($color) {
+  @return if(tone($color) == 'dark', 'light', 'dark');
+}
diff --git a/src/lib/core/styles/theme/_utils.scss b/src/lib/core/styles/theme/_utils.scss
new file mode 100644
index 000000000..25340fb42
--- /dev/null
+++ b/src/lib/core/styles/theme/_utils.scss
@@ -0,0 +1,77 @@
+@use 'sass:meta';
+@use 'sass:string';
+@use 'sass:color';
+@use '../utils';
+@use './color-utils';
+
+///
+/// Returns a new color with the same hue and saturation as the input color, but with a different lightness value.
+/// 
+/// Example:
+/// scale(#ff0000, 50%) => #ff6060
+/// 
+/// @param {Color} $color - The input color.
+/// @param {Number} $lightness - The desired lightness percentage to scale `$color` by. Specified as a percentage number between 0 and 100.
+/// @return {Color} - The new color with the same hue and saturation as the input color, but with a different lightness value.
+///
+@function scale($color, $lightness) {
+  @return color.scale($color, $lightness: 100 - $lightness);
+}
+
+///
+/// Creates a new color by applying the specified emphasis to the input color via the alpha channel.
+/// 
+/// Example:
+/// emphasized(#ff0000, 50%) => rgba(255, 0, 0, 0.5)
+/// 
+/// @param {Color} $color - The input color.
+/// @param {Number} $alpha - The desired opacity to apply to `$color`.
+/// @return {Color} - The input color, but with an alpha channel value in `rgba()` format.
+/// 
+@function emphasized($color, $emphasis) {
+  @return rgba($color, $emphasis);
+}
+
+///
+/// Computes the contrast color for the provided color.
+/// 
+/// Example:
+/// contrast(#ff0000) => #ffffff
+/// 
+/// @param {Color} $color - The input color.
+/// @param {Color} $light - The light color to use for contrast. Default to `#ffffff`.
+/// @param {Color} $dark - The dark color to use for contrast. Default to `#000000`.
+/// @return {Color} - The contrast color for the provided color.
+/// 
+@function contrast($color, $alpha: null, $light: #ffffff, $dark: #000000) {
+  $contrast-color: if(color-utils.contrast-tone($color) == 'dark', $dark, $light);
+  @if $alpha != null {
+    @return emphasized($contrast-color, $alpha);
+  }
+  @return $contrast-color;
+}
+
+///
+/// Converts a color with an opacity value on top of a specific background color to an opaque hex color.
+/// 
+@function hexify($color, $background, $alpha: 100%) {
+  @return if($alpha == 100%, color.mix($background, $color, $alpha), color.mix($background, $color, 100 - $alpha));
+}
+
+///
+/// Determines if the provided value is a `color` type or not.
+/// 
+@function is-color($value) {
+  @return meta.type-of($value) == color;
+}
+
+///
+/// Computes the hue, saturation, lightness (and optionally alpha) values for the provided color and returns a string in HSL format.
+///
+@function hsl-values($color, $with-alpha: false) {
+  $value: utils.round(hue($color), 2) utils.round(saturation($color), 2) utils.round(lightness($color), 2);
+  @if ($with-alpha) {
+    $value: string.unquote($value + ' / ' + alpha($color));
+  }
+  @return $value;
+}
diff --git a/src/lib/core/styles/theme/index.scss b/src/lib/core/styles/theme/index.scss
index f458f20ae..afad3d3cc 100644
--- a/src/lib/core/styles/theme/index.scss
+++ b/src/lib/core/styles/theme/index.scss
@@ -1,25 +1,16 @@
 @use 'sass:map';
+@use 'sass:math';
 @use '../core/config';
 @use '../tokens/theme/tokens';
+@use '../tokens/theme/color-emphasis';
 @use '../utils';
 
 ///
 /// Emits custom property declarations for all default theme tokens.
 /// 
 @mixin properties {
-  /// Temporary tokens to map the MDC theme to Forge theme
-  /// TODO: Remove this once MDC dependency is removed
-  :root {
-    @each $token-name, $token-value in tokens.$mdc-remap {
-      --mdc-theme-#{$token-name}: #{$token-value};
-    }
-  }
-
-  // Forge theme tokens
-  :root {
-    @each $token-name, $token-value in tokens.$tokens {
-      --#{config.$prefix}-theme-#{$token-name}: #{$token-value};
-    }
+  @each $token-name, $token-value in tokens.$tokens {
+    --#{config.$prefix}-theme-#{$token-name}: #{$token-value};
   }
 }
 
@@ -32,6 +23,31 @@
   }
 }
 
+///
+/// Temporary tokens to map the MDC theme to Forge theme
+/// 
+/// TODO: Remove this once MDC dependency is removed
+/// 
+@mixin properties-compat {
+  @each $token-name, $token-value in tokens.$mdc-remap {
+    --mdc-theme-#{$token-name}: #{$token-value};
+  }
+}
+
+///
+/// Generates utility classes for each theme token as both `color` and `background-color` styles separately.
+/// 
+@mixin classes {
+  @each $token, $value in tokens.$tokens {
+    .#{config.$prefix}-color--#{$token} {
+      color: #{variable($token)};
+    }
+    .#{config.$prefix}-background--#{$token} {
+      background-color: #{variable($token)};
+    }
+  }
+}
+
 ///
 /// Gets a CSS custom property declaration for a specific theme token, with its token value as the fallback value
 /// 
@@ -45,3 +61,13 @@
 @mixin provide($tokens, $prefix: config.$prefix) {
   @include utils.provide(tokens.$tokens, $tokens, theme, $prefix);
 }
+
+///
+/// Gets a theme emphasis value by semantic name.
+/// 
+/// Valid names are `highest`, `higher`, `high`, `medium-high`, `medium`, `medium-low`, `low`, `lower`, and `lowest`.
+/// 
+@function emphasis($emphasis) {
+  @return math.div(color-emphasis.value($emphasis), 100%);
+}
+
diff --git a/src/lib/core/styles/tokens/checkbox/_tokens.scss b/src/lib/core/styles/tokens/checkbox/_tokens.scss
index 05efc6329..a427eeae3 100644
--- a/src/lib/core/styles/tokens/checkbox/_tokens.scss
+++ b/src/lib/core/styles/tokens/checkbox/_tokens.scss
@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../color-palette';
 @use '../../animation';
+@use '../../border';
 @use '../../elevation';
 @use '../../shape';
 @use '../../theme';
@@ -10,7 +11,7 @@ $tokens: (
   // Shared
   primary-color: utils.module-val(checkbox, primary-color, theme.variable(tertiary)),
   size: utils.module-val(checkbox, size, 16px),
-  border-width: utils.module-val(checkbox, border-width, 2px),
+  border-width: utils.module-val(checkbox, border-width, border.variable(medium)),
   icon-color: utils.module-val(checkbox, icon-color, theme.variable(on-tertiary)),
   state-layer-size: utils.module-val(checkbox, state-layer-size, 40px),
   state-layer-dense-size: utils.module-val(checkbox, state-layer-size, 24px),
@@ -20,7 +21,7 @@ $tokens: (
   width: utils.module-ref(checkbox, width, size),
   height: utils.module-ref(checkbox, height, size),
   unchecked-border-width: utils.module-ref(checkbox, unchecked-border-width, border-width),
-  unchecked-border-color: utils.module-val(checkbox, unchecked-border-color, theme.variable(text-secondary-on-light)),
+  unchecked-border-color: utils.module-val(checkbox, unchecked-border-color, theme.variable(surface-container-high)), // TODO: check out surface-container
   shape: utils.module-val(checkbox, shape, shape.variable(small)),
   elevation: utils.module-val(checkbox, elevation, elevation.value(0)),
   
@@ -51,7 +52,7 @@ $tokens: (
   state-layer-dense-height: utils.module-ref(checkbox, state-layer-dense-height, state-layer-dense-size),
 
   // Disabled
-  disabled-opacity: utils.module-val(checkbox, disabled-opacity, 0.48),
+  disabled-opacity: utils.module-val(checkbox, disabled-opacity, theme.emphasis(medium-low)),
 
   // Animation
   animation-duration: utils.module-val(checkbox, animation-duration, animation.variable(duration-short2)),
diff --git a/src/lib/core/styles/tokens/circular-progress/_tokens.scss b/src/lib/core/styles/tokens/circular-progress/_tokens.scss
index 7683316cd..7c24e713d 100644
--- a/src/lib/core/styles/tokens/circular-progress/_tokens.scss
+++ b/src/lib/core/styles/tokens/circular-progress/_tokens.scss
@@ -7,7 +7,7 @@ $tokens: (
   padding: utils.module-val(circular-progress, padding, 0),
   track-width: utils.module-val(circular-progress, track-width, 12),
   track-color: utils.module-val(circular-progress, track-color, theme.variable(tertiary)),
-  track-background: utils.module-val(circular-progress, track-background, theme.variable(track-color)),
+  track-background: utils.module-val(circular-progress, track-background, theme.variable(surface-container)),
   arc-duration: utils.module-val(circular-progress, arc-duration, 1333ms)
 ) !default;
 
diff --git a/src/lib/core/styles/tokens/color-palette/_extended-color-palette.scss b/src/lib/core/styles/tokens/color-palette/_extended-color-palette.scss
new file mode 100644
index 000000000..504baa366
--- /dev/null
+++ b/src/lib/core/styles/tokens/color-palette/_extended-color-palette.scss
@@ -0,0 +1,83 @@
+$white: #ffffff;
+$black: #000000;
+
+$neutral-50: #ffffff;
+$neutral-100: #f9f9f9;
+$neutral-200: #dddddd;
+$neutral-300: #c1c1c1;
+$neutral-400: #a6a6a6;
+$neutral-500: #8b8b8b;
+$neutral-600: #727272;
+$neutral-700: #595959;
+$neutral-800: #424242;
+$neutral-900: #2c2c2c;
+
+$crimson-50: #fdeaee;
+$crimson-100: #fbcad2;
+$crimson-200: #ea959b;
+$crimson-300: #de6c74;
+$crimson-400: #e84853;
+$crimson-500: #ed323b;
+$crimson-600: #de2839;
+$crimson-700: #cc1d33;
+$crimson-800: #bf152c;
+$crimson-900: #b00020;
+
+$burnt-orange-50: #fbe9e6;
+$burnt-orange-100: #fdccb9;
+$burnt-orange-200: #fcac8c;
+$burnt-orange-300: #fa8c5d;
+$burnt-orange-400: #f87439;
+$burnt-orange-500: #f75d0e;
+$burnt-orange-600: #ec5709;
+$burnt-orange-700: #df5003;
+$burnt-orange-800: #d14900;
+$burnt-orange-900: #b93c00;
+
+$ruddy-pink-50: #fbe1e5;
+$ruddy-pink-100: #f5b4c0;
+$ruddy-pink-200: #ec8396;
+$ruddy-pink-300: #e2526f;
+$ruddy-pink-400: #d82c52;
+$ruddy-pink-500: #cf0038;
+$ruddy-pink-600: #c00038;
+$ruddy-pink-700: #ac0035;
+$ruddy-pink-800: #990033;
+$ruddy-pink-900: #78002f;
+
+$apricot-50: #fceae3;
+$apricot-100: #fbcfb0;
+$apricot-200: #f8b27c;
+$apricot-300: #f29645;
+$apricot-400: #ed830b;
+$apricot-500: #e87200;
+$apricot-600: #de6c00;
+$apricot-700: #d16400;
+$apricot-800: #c45c00;
+$apricot-900: #ad4e00;
+
+$dollar-bill-50: #f2f8ec;
+$dollar-bill-100: #deedcf;
+$dollar-bill-200: #c8e1b2;
+$dollar-bill-300: #b4d494;
+$dollar-bill-400: #a4cb7e;
+$dollar-bill-500: #95c269;
+$dollar-bill-600: #86b260;
+$dollar-bill-700: #749e55;
+$dollar-bill-800: #63894c;
+$dollar-bill-900: #46673b;
+
+$maroon-50: #f0e2e4;
+$maroon-100: #dcb7bb;
+$maroon-200: #bf868d;
+$maroon-300: #ad5661;
+$maroon-400: #92313c;
+$maroon-500: #7f0d1a;
+$maroon-600: #6c0913;
+$maroon-700: #62070f;
+$maroon-800: #4f0308;
+$maroon-900: #31050a;
+$maroon-a100: #ff636f;
+$maroon-a200: #ff3540;
+$maroon-a300: #991100;
+$maroon-a700: #771100;
diff --git a/src/lib/core/styles/tokens/_color-palette.scss b/src/lib/core/styles/tokens/color-palette/_material-color-palette.scss
similarity index 100%
rename from src/lib/core/styles/tokens/_color-palette.scss
rename to src/lib/core/styles/tokens/color-palette/_material-color-palette.scss
diff --git a/src/lib/core/styles/tokens/color-palette/index.scss b/src/lib/core/styles/tokens/color-palette/index.scss
new file mode 100644
index 000000000..a9a61222b
--- /dev/null
+++ b/src/lib/core/styles/tokens/color-palette/index.scss
@@ -0,0 +1,2 @@
+@forward './extended-color-palette';
+@forward './material-color-palette';
diff --git a/src/lib/core/styles/tokens/focus-indicator/_tokens.scss b/src/lib/core/styles/tokens/focus-indicator/_tokens.scss
index e2acca5a0..15ddd3819 100644
--- a/src/lib/core/styles/tokens/focus-indicator/_tokens.scss
+++ b/src/lib/core/styles/tokens/focus-indicator/_tokens.scss
@@ -11,8 +11,8 @@ $tokens: (
   active-width: utils.module-val(focus-indicator, active-width, 6px),
   color: utils.module-val(focus-indicator, color, theme.variable(primary)),
   duration: utils.module-val(focus-indicator, duration, animation.variable(duration-long4)),
-  outward-offset: utils.module-val(focus-indicator, outward-offset, spacing.variable('050')),
-  inward-offset: utils.module-val(focus-indicator, inward-offset, 0), // Requires unit
+  outward-offset: utils.module-val(focus-indicator, outward-offset, spacing.variable('025')),
+  inward-offset: utils.module-val(focus-indicator, inward-offset, 0px), // Requires unit
   shape: utils.module-val(focus-indicator, shape, shape.variable(extra-small)),
   width: utils.module-val(focus-indicator, width, border.variable(medium)),
   easing: utils.module-val(focus-indicator, easing, animation.variable(easing-emphasized)),
diff --git a/src/lib/core/styles/tokens/linear-progress/_tokens.scss b/src/lib/core/styles/tokens/linear-progress/_tokens.scss
index 6373dba8d..b69ffb265 100644
--- a/src/lib/core/styles/tokens/linear-progress/_tokens.scss
+++ b/src/lib/core/styles/tokens/linear-progress/_tokens.scss
@@ -6,7 +6,7 @@
 
 $tokens: (
   track-height: utils.module-val(linear-progress, track-height, 4px),
-  track-color: utils.module-val(linear-progress, track-color, theme.variable(tertiary-track-color)),
+  track-color: utils.module-val(linear-progress, track-color, theme.variable(tertiary-container)),
   active-indicator-color: utils.module-val(linear-progress, indicator-color, theme.variable(tertiary)),
   track-shape: utils.module-val(linear-progress, track-shape, shape.variable(full)),
   active-indicator-height: utils.module-ref(linear-progress, indicator-height, track-height),
diff --git a/src/lib/core/styles/tokens/list/list-item/_tokens.scss b/src/lib/core/styles/tokens/list/list-item/_tokens.scss
new file mode 100644
index 000000000..08fdf5d75
--- /dev/null
+++ b/src/lib/core/styles/tokens/list/list-item/_tokens.scss
@@ -0,0 +1,72 @@
+@use 'sass:map';
+@use '../../../utils';
+@use '../../../theme';
+@use '../../../shape';
+@use '../../../typography';
+
+$tokens: (
+  // Base
+  background-color: utils.module-val(list-item, background-color, transparent),
+  shape: utils.module-val(list-item, shape, 0),
+  padding: utils.module-val(list-item, padding, 8px 16px),
+  margin: utils.module-val(list-item, margin, 0),
+  height: utils.module-val(list-item, height, 48px),
+  dense-height: utils.module-val(list-item, dense-height, 32px),
+  indent: utils.module-val(list-item, indent, 56px),
+  cursor: utils.module-val(list-item, cursor, pointer),
+
+  // Supporting text
+  supporting-text-color: utils.module-val(list-item, supporting-text-color, theme.variable(text-medium)),
+  supporting-text-font-size: utils.module-val(list-item, supporting-text-font-size, typography.variable(body2, font-size)),
+  supporting-text-font-weight: utils.module-val(list-item, supporting-text-font-weight, typography.variable(body2, font-weight)),
+  supporting-text-line-height: utils.module-val(list-item, supporting-text-line-height, typography.scale('1500')),
+
+  // Selected
+  selected-color: utils.module-val(list-item, selected-color, theme.variable(primary)),
+  selected-opacity: utils.module-val(list-item, selected-opacity, 0.08),
+  selected-leading-color: utils.module-ref(list-item, selected-leading-color, selected-color),
+  selected-trailing-color: utils.module-ref(list-item, selected-trailing-color, selected-color),
+  selected-supporting-text-color: utils.module-val(list-item, selected-supporting-text-color, theme.variable(text-medium)),
+
+  // Disabled
+  disabled-opacity: utils.module-val(list-item, disabled-opacity, 0.38),
+  disabled-cursor: utils.module-val(list-item, disabled-cursor, not-allowed),
+
+  // Line variants
+  one-line-height: utils.module-ref(list-item, one-line-height, height),
+  two-line-height: utils.module-val(list-item, two-line-height, utils.module-ref(list-item, height, 72px, value)),
+  three-line-height: utils.module-val(list-item, three-line-height, utils.module-ref(list-item, height, 88px, value)),
+
+  // Dense
+  dense-one-line-height: utils.module-ref(list-item, dense-one-line-height, dense-height),
+  dense-two-line-height: utils.module-val(list-item, dense-two-line-height, utils.module-ref(list-item, dense-height, 56px, value)),
+  dense-three-line-height: utils.module-val(list-item, dense-three-line-height, utils.module-ref(list-item, dense-height, 72px, value)),
+  dense-font-size: utils.module-val(list-item, dense-font-size, 0.875rem),
+  dense-indent: utils.module-val(list-item, dense-indent, 48px),
+
+  // Dense leading/trailing
+  dense-leading-margin-end: utils.module-val(list-item, dense-leading-margin-end, utils.module-ref(list-item, leading-margin-end, 24px, value)),
+  dense-trailing-margin-start: utils.module-val(list-item, dense-trailing-margin-start, utils.module-ref(list-item, trailing-margin-start, 24px, value)),
+
+  // Leading
+  leading-margin-start: utils.module-val(list-item, leading-margin-start, 0),
+  leading-margin-end: utils.module-val(list-item, leading-margin-end, 32px),
+  leading-selected-color: utils.module-ref(list-item, leading-selected-color, selected-color),
+
+  // Trailing
+  trailing-margin-start: utils.module-val(list-item, trailing-margin-start, 32px),
+  trailing-margin-end: utils.module-val(list-item, trailing-margin-end, 0),
+  trailing-selected-color: utils.module-ref(list-item, trailing-selected-color, selected-color),
+
+  // Avatar
+  avatar-background-color: utils.module-val(list-item, avatar-background-color, theme.variable(text-medium)),
+  avatar-color: utils.module-val(list-item, avatar-color, theme.variable(on-primary)),
+  avatar-shape: utils.module-val(list-item, avatar-shape, shape.variable(round)),
+  avatar-margin-start: utils.module-val(list-item, avatar-margin-start, 0),
+  avatar-margin-end: utils.module-val(list-item, avatar-margin-end, 16px),
+  avatar-size: utils.module-val(list-item, avatar-size, 40px),
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}
diff --git a/src/lib/core/styles/tokens/list/list/_tokens.scss b/src/lib/core/styles/tokens/list/list/_tokens.scss
new file mode 100644
index 000000000..dcf2e7fc6
--- /dev/null
+++ b/src/lib/core/styles/tokens/list/list/_tokens.scss
@@ -0,0 +1,11 @@
+@use '../../../utils';
+
+$tokens: (
+  container-color: utils.module-val(list, container-color, transparent),
+  block-padding: utils.module-val(list, block-padding, 8px),
+  inline-padding: utils.module-val(list, inline-padding, 0),
+) !default;
+
+@function get($key) {
+  @return map-get($tokens, $key);
+}
diff --git a/src/lib/core/styles/tokens/scrollbar/_tokens.scss b/src/lib/core/styles/tokens/scrollbar/_tokens.scss
new file mode 100644
index 000000000..76e1ca601
--- /dev/null
+++ b/src/lib/core/styles/tokens/scrollbar/_tokens.scss
@@ -0,0 +1,21 @@
+@use 'sass:map';
+@use '../../theme';
+@use '../../utils';
+@use '../../shape';
+
+$tokens: (
+  height: utils.module-val(scrollbar, height, 16px),
+  width: utils.module-val(scrollbar, width, 16px),
+  thumb-min-height: utils.module-val(scrollbar, thumb-min-height, 32px),
+  thumb-min-width: utils.module-val(scrollbar, thumb-min-width, 32px),
+  border-radius: utils.module-val(scrollbar, border-radius, shape.variable(full)),
+  border-width: utils.module-val(scrollbar, border-width, 3px),
+  track-container: utils.module-val(scrollbar, track-container, theme.variable(surface-container-low)),
+  track-container-hover: utils.module-val(scrollbar, track-container-hover, theme.variable(surface-container-low)),
+  thumb-container: utils.module-val(scrollbar, thumb-container, theme.variable(surface-container-medium)),
+  thumb-container-hover: utils.module-val(scrollbar, thumb-container-hover, theme.variable(surface-container-high))
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}
diff --git a/src/lib/core/styles/tokens/slider/_tokens.scss b/src/lib/core/styles/tokens/slider/_tokens.scss
index 858e9cdd0..8c1d7c25a 100644
--- a/src/lib/core/styles/tokens/slider/_tokens.scss
+++ b/src/lib/core/styles/tokens/slider/_tokens.scss
@@ -1,7 +1,6 @@
 @use 'sass:map';
 @use '../../theme';
 @use '../../shape';
-@use '../color-palette';
 @use '../../utils';
 
 $tokens: (
@@ -9,19 +8,18 @@ $tokens: (
   active-track-color: utils.module-val(slider, active-track-color, theme.variable(primary)),
   active-track-height: utils.module-ref(slider, active-track-height, track-height),
   active-track-shape: utils.module-val(slider, active-track-shape, shape.variable(full)),
-  disabled-active-track-color: utils.module-val(slider, disabled-active-track-color, color-palette.$grey-500),
-  disabled-active-track-opacity: utils.module-val(slider, disabled-active-track-opacity, 0.38),
-  disabled-handle-color: utils.module-val(slider, disabled-handle-color, color-palette.$grey-500),
-  disabled-inactive-track-color: utils.module-val(slider, disabled-inactive-track-color, color-palette.$grey-500),
-  disabled-inactive-track-opacity: utils.module-val(slider, disabled-inactive-track-opacity, 0.12),
+  disabled-active-track-color: utils.module-val(slider, disabled-active-track-color, theme.variable(surface-container-high)),
+  disabled-active-track-opacity: utils.module-val(slider, disabled-active-track-opacity, theme.emphasis(medium-low)),
+  disabled-handle-color: utils.module-val(slider, disabled-handle-color, theme.variable(surface-container-high)),
+  disabled-inactive-track-color: utils.module-val(slider, disabled-inactive-track-color, theme.variable(surface-container-high)),
+  disabled-inactive-track-opacity: utils.module-val(slider, disabled-inactive-track-opacity, theme.emphasis(lower)),
   focus-handle-color: utils.module-val(slider, focus-handle-color, theme.variable(primary)),
   handle-color: utils.module-val(slider, handle-color, theme.variable(primary)),
   handle-height: utils.module-val(slider, handle-height, 20px),
   handle-shape: utils.module-val(slider, handle-shape, shape.variable(round)),
   handle-width: utils.module-val(slider, handle-width, 20px),
   hover-handle-color: utils.module-val(slider, hover-handle-color, theme.variable(primary)),
-  inactive-track-color-fallback: utils.module-val(slider, inactive-track-color, #d5d8ee), // TODO: remove this when we're confident that color-mix is more widely supported
-  inactive-track-color: utils.module-val(slider, inactive-track-color, color-mix(in srgb, theme.variable(primary) 24%, transparent)),
+  inactive-track-color: utils.module-val(slider, inactive-track-color, theme.variable(primary-container)),
   inactive-track-height: utils.module-ref(slider, inactive-track-height, track-height),
   inactive-track-shape: utils.module-val(slider, inactive-track-shape, shape.variable(full)),
   label-container-shape: utils.module-val(slider, label-container-shape, shape.variable(full)),
@@ -32,10 +30,10 @@ $tokens: (
   state-layer-size: utils.module-val(slider, state-layer-size, 40px),
   with-overlap-handle-outline-color: utils.module-val(slider, with-overlap-handle-outline-color, theme.variable(on-primary)),
   with-overlap-handle-outline-width: utils.module-val(slider, with-overlap-handle-outline-width, 1px),
-  with-tick-marks-active-container-color: utils.module-val(slider, with-tick-marks-active-container-color, theme.variable(primary)),
+  with-tick-marks-active-container-color: utils.module-val(slider, with-tick-marks-active-container-color, theme.variable(on-primary)),
   with-tick-marks-container-size: utils.module-val(slider, with-tick-marks-container-size, 2px),
-  with-tick-marks-disabled-active-container-color: utils.module-val(slider, with-tick-marks-disabled-active-container-color, theme.variable(text-primary)),
-  with-tick-marks-disabled-inactive-container-color: utils.module-val(slider, with-tick-marks-disabled-inactive-container-color, color-mix(in srgb, theme.variable(on-primary) 50%, transparent)),
+  with-tick-marks-disabled-active-container-color: utils.module-val(slider, with-tick-marks-disabled-active-container-color, theme.variable(on-surface-container-high)),
+  with-tick-marks-disabled-inactive-container-color: utils.module-val(slider, with-tick-marks-disabled-inactive-container-color, theme.variable(on-surface-container-high)),
   with-tick-marks-inactive-container-color: utils.module-val(slider, with-tick-marks-inactive-container-color, theme.variable(primary))
 ) !default;
 
diff --git a/src/lib/core/styles/tokens/spacing/_tokens.scss b/src/lib/core/styles/tokens/spacing/_tokens.scss
index bb755a169..f82a0a35a 100644
--- a/src/lib/core/styles/tokens/spacing/_tokens.scss
+++ b/src/lib/core/styles/tokens/spacing/_tokens.scss
@@ -1,15 +1,15 @@
-$base: 8px !default; // The Forge spacing system scales in multiples of 8
+$base: 16px !default; // The Forge spacing system scales in multiples of 8
 
 $tokens: (
-  '025': $base * 0.25, // 2px
-  '050': $base * 0.5,  // 4px
-  '100': $base,        // 8px
-  '150': $base * 1.5,  // 12px
-  '200': $base * 2,    // 16px
-  '300': $base * 3,    // 24px
-  '400': $base * 4,    // 32px
-  '600': $base * 6,    // 48px
-  '700': $base * 7,    // 56px
+  '0125': $base * 0.125, // 2px
+  '025': $base * 0.25,   // 4px
+  '050': $base * 0.5,    // 8px
+  '075': $base * 0.75,   // 12px
+  '100': $base,          // 16px
+  '150': $base * 1.5,    // 24px
+  '200': $base * 2,      // 32px
+  '300': $base * 3,      // 48px
+  '350': $base * 3.5,    // 56px
 ) !default;
 
 @function get($key) {
diff --git a/src/lib/core/styles/tokens/state-layer/_tokens.scss b/src/lib/core/styles/tokens/state-layer/_tokens.scss
index 23d7dab39..5eda94b5a 100644
--- a/src/lib/core/styles/tokens/state-layer/_tokens.scss
+++ b/src/lib/core/styles/tokens/state-layer/_tokens.scss
@@ -5,12 +5,12 @@
 $tokens: (
   color: utils.module-val(state-layer, color, theme.variable(on-surface)),
   hover-color: utils.module-ref(state-layer, hover-color, color),
-  hover-opacity: 0.08,
+  hover-opacity: utils.module-val(state-layer, hover-opacity, 0.08),
   pressed-color: utils.module-ref(state-layer, pressed-color, color),
-  pressed-opacity: 0.12,
-  hover-duration: 15ms,
-  pressed-duration: 105ms,
-  animation-duration: 375ms
+  pressed-opacity: utils.module-val(state-layer, pressed-opacity, 0.12),
+  hover-duration: utils.module-val(state-layer, hover-duration, 15ms),
+  pressed-duration: utils.module-val(state-layer, pressed-duration, 105ms),
+  animation-duration: utils.module-val(state-layer, animation-duration, 375ms)
 ) !default;
 
 @function get($key) {
diff --git a/src/lib/core/styles/tokens/switch/_tokens.scss b/src/lib/core/styles/tokens/switch/_tokens.scss
index 9d61a6608..665c16f7d 100644
--- a/src/lib/core/styles/tokens/switch/_tokens.scss
+++ b/src/lib/core/styles/tokens/switch/_tokens.scss
@@ -15,7 +15,7 @@ $tokens: (
   track-border-width: utils.module-val(switch, track-border-width, 0),
   track-border-color: utils.module-val(switch, track-border-color, transparent),
 
-  icon-color: utils.module-val(switch, icon-color, theme.variable(on-primary)),
+  icon-color: utils.module-val(switch, icon-color, theme.variable(on-tertiary)),
   icon-size: utils.module-val(switch, icon-size, 16px),
   icon-scale: utils.module-val(switch, icon-scale, 1),
 
@@ -23,8 +23,8 @@ $tokens: (
   state-layer-dense-size: utils.module-val(switch, handle-dense-size, 28px),
 
   // Handle
-  handle-on-color: utils.module-val(switch, handle-on-color, theme.variable(primary)),
-  handle-off-color: utils.module-val(switch, handle-off-color, theme.variable(handle-off-color)),
+  handle-on-color: utils.module-val(switch, handle-on-color, theme.variable(tertiary)),
+  handle-off-color: utils.module-val(switch, handle-off-color, theme.variable(surface-container-high)),
   handle-width: utils.module-ref(switch, handle-width, handle-size),
   handle-height: utils.module-ref(switch, handle-height, handle-size),
   handle-on-scale: utils.module-ref(switch, handle-on-scale, handle-scale),
@@ -34,8 +34,8 @@ $tokens: (
   handle-off-elevation: utils.module-ref(switch, handle-off-elevation, handle-elevation),
 
   // Track
-  track-on-color: utils.module-val(switch, track-on-color, theme.variable(primary-track-color)),
-  track-off-color: utils.module-val(switch, track-off-color, theme.variable(track-color)),
+  track-on-color: utils.module-val(switch, track-on-color, theme.variable(tertiary-container)),
+  track-off-color: utils.module-val(switch, track-off-color, theme.variable(surface-container)),
   track-width: utils.module-val(switch, track-width, 36px),
   track-height: utils.module-val(switch, track-height, 14px),
   track-shape: utils.module-val(switch, track-shape, shape.variable(full)),
@@ -68,7 +68,7 @@ $tokens: (
   state-layer-dense-height: utils.module-ref(switch, state-layer-dense-height, state-layer-dense-size),
 
   // Disabled
-  disabled-opacity: utils.module-val(switch, disabled-opacity, 0.38),
+  disabled-opacity: utils.module-val(switch, disabled-opacity, theme.emphasis(medium-low)),
 
   // Active
   handle-active-on-color: utils.module-ref(switch, handle-active-on-color, handle-on-color),
diff --git a/src/lib/core/styles/tokens/tabs/tab-bar/_tokens.scss b/src/lib/core/styles/tokens/tabs/tab-bar/_tokens.scss
index 6376d9325..310c8a43d 100644
--- a/src/lib/core/styles/tokens/tabs/tab-bar/_tokens.scss
+++ b/src/lib/core/styles/tokens/tabs/tab-bar/_tokens.scss
@@ -5,7 +5,7 @@
 $tokens: (
   container-justify: utils.module-val(tab-bar, justify, space-between),
   tab-flex: utils.module-val(tab-bar, stretch, 1),
-  divider-color: utils.module-val(tab-bar, divider-color, theme.variable(border-color)),
+  divider-color: utils.module-val(tab-bar, divider-color, theme.variable(outline)),
   divider-thickness: utils.module-val(tab-bar, divider-thickness, 1px)
 );
 
diff --git a/src/lib/core/styles/tokens/tabs/tab/_tokens.scss b/src/lib/core/styles/tokens/tabs/tab/_tokens.scss
index ab20a8b4d..158d1a15a 100644
--- a/src/lib/core/styles/tokens/tabs/tab/_tokens.scss
+++ b/src/lib/core/styles/tokens/tabs/tab/_tokens.scss
@@ -1,11 +1,12 @@
 @use 'sass:map';
 @use '../../../theme';
 @use '../../../utils';
+@use '../../../spacing';
 
 $tokens: (
   // Shared
   active-color: utils.module-val(tab, active-color, theme.variable(primary)),
-  inactive-color: utils.module-val(tab, inactive-color, theme.variable(text-secondary)),
+  inactive-color: utils.module-val(tab, inactive-color, theme.variable(text-medium)),
   height: utils.module-val(tab, height, 48px),
   stacked-height: utils.module-val(tab, stacked-height, 64px),
 
@@ -35,6 +36,7 @@ $tokens: (
   
   // Content
   content-height: utils.module-ref(tab, content-height, height),
+  content-padding: utils.module-val(tab, content-padding, spacing.variable('025')),
 
   // Icon
   active-focus-icon-color: utils.module-ref(tab, active-focus-icon-color, active-color),
diff --git a/src/lib/core/styles/tokens/theme/_color-emphasis.scss b/src/lib/core/styles/tokens/theme/_color-emphasis.scss
new file mode 100644
index 000000000..e9bd4dda8
--- /dev/null
+++ b/src/lib/core/styles/tokens/theme/_color-emphasis.scss
@@ -0,0 +1,33 @@
+@use 'sass:map';
+
+$color-emphasis-scale: (
+  '004': 4%,
+  '008': 8%,
+  '012': 12%,
+  '024': 24%,
+  '038': 38%,
+  '054': 54%,
+  '060': 60%,
+  '065': 65%,
+  '070': 70%,
+  '080': 80%,
+  '087': 87%
+);
+
+$color-emphasis: (
+  highest: map.get($color-emphasis-scale, '087'),
+  inverse: map.get($color-emphasis-scale, '080'),
+  higher: map.get($color-emphasis-scale, '070'),
+  high: map.get($color-emphasis-scale, '065'),
+  medium-high: map.get($color-emphasis-scale, '060'),
+  medium: map.get($color-emphasis-scale, '054'),
+  medium-low: map.get($color-emphasis-scale, '038'),
+  low: map.get($color-emphasis-scale, '024'),
+  lower: map.get($color-emphasis-scale, '012'),
+  lowest: map.get($color-emphasis-scale, '008'),
+  minimum: map.get($color-emphasis-scale, '004'),
+);
+
+@function value($emphasis) {
+  @return map.get($color-emphasis, $emphasis);
+}
diff --git a/src/lib/core/styles/tokens/theme/_token-utils.scss b/src/lib/core/styles/tokens/theme/_token-utils.scss
new file mode 100644
index 000000000..11dc021b7
--- /dev/null
+++ b/src/lib/core/styles/tokens/theme/_token-utils.scss
@@ -0,0 +1,41 @@
+@use '../../theme/utils' as theme-utils;
+@use '../../theme/color-utils';
+@use './color-emphasis';
+
+///
+/// Computes the dependent theme colors from the provided theme color value.
+/// 
+/// @param {String} $name - The name of the theme color
+/// @param {Color} $color - The theme color
+/// @param {Color} $surface - The base surface color
+/// @return {Map} - The computed theme map
+/// 
+@function get-color-theme($name, $color, $surface) {
+  @if not theme-utils.is-color($color) {
+    @error 'The value for "#{$name}" must be a color type.';
+  }
+
+  $surface-tone: color-utils.tone($surface);
+
+  // The container colors are the provided color mixed with the surface color at lower emphasis levels
+  $container: theme-utils.hexify($color, $surface, color-emphasis.value(if($surface-tone == 'light', low, medium-low)));
+  // $container-high: theme-utils.hexify($color, $surface, color-emphasis.value(if($surface-tone == 'light', medium-low, medium)));
+
+  // The on-color is the contrast color against the provided color
+  $on-color: theme-utils.contrast($color);
+
+  // The on-container colors are the contrast color for the provided color mixed with the
+  // container color at a lower emphasis to let the contrast color bleed through for
+  // increased contrast against the lower emphasis container color 
+  $on-container: theme-utils.hexify($color, theme-utils.contrast($container), color-emphasis.value(low));
+  // $on-container-high: theme-utils.contrast($container-high);
+
+  @return (
+    #{$name}: $color,
+    #{$name}-container: $container,
+    // #{$name}-container-high: $container-high,
+    on-#{$name}: $on-color,
+    on-#{$name}-container: $on-container,
+    // on-#{$name}-container-high: $on-container-high
+  );
+}
diff --git a/src/lib/core/styles/tokens/theme/_tokens.core.scss b/src/lib/core/styles/tokens/theme/_tokens.core.scss
new file mode 100644
index 000000000..0079710fd
--- /dev/null
+++ b/src/lib/core/styles/tokens/theme/_tokens.core.scss
@@ -0,0 +1,40 @@
+@use 'sass:map';
+@use '../../utils';
+@use './token-utils';
+@use './tokens.surface' as surface;
+@use '../color-palette';
+
+///
+/// Computes the status theme colors.
+/// 
+/// @param {Map} $colors - The status colors map.
+/// @param {Map} $surface-theme - The base surface theme
+/// @return {Map} - The computed status theme
+/// 
+@function get-status-theme($colors, $surface-theme) {
+  $surface: map.get($surface-theme, surface);
+
+  $primary-theme: token-utils.get-color-theme('primary', map.get($colors, primary), $surface);
+  $secondary-theme: token-utils.get-color-theme('secondary', map.get($colors, secondary), $surface);
+  $tertiary-theme: token-utils.get-color-theme('tertiary', map.get($colors, tertiary), $surface);
+
+  @return utils.flatten(
+    $primary-theme,
+    $secondary-theme,
+    $tertiary-theme
+  );
+}
+
+// Light
+$tokens: get-status-theme((
+  primary: color-palette.$indigo-500,
+  secondary: color-palette.$amber-500,
+  tertiary: color-palette.$indigo-a400
+), surface.$tokens);
+
+// Dark
+$tokens-dark: get-status-theme((
+  primary: color-palette.$indigo-a100,
+  secondary: color-palette.$amber-200,
+  tertiary: color-palette.$amber-200
+), surface.$tokens-dark);
diff --git a/src/lib/core/styles/tokens/theme/_tokens.scss b/src/lib/core/styles/tokens/theme/_tokens.scss
index af7fdbefa..0a223a916 100644
--- a/src/lib/core/styles/tokens/theme/_tokens.scss
+++ b/src/lib/core/styles/tokens/theme/_tokens.scss
@@ -1,130 +1,73 @@
 @use 'sass:map';
-@use '../../core/config';
-@use '../color-palette' as color-palette;
-@use '../../elevation';
+@use '../../utils';
+@use '../../theme/utils' as theme-utils;
+@use './tokens.core' as core;
+@use './tokens.surface' as surface;
+@use './tokens.text' as text;
+@use './tokens.status' as status;
+@use './tokens.utilities' as utilities;
 
-/// All semantic tokens for the Forge default (light) theme
-$tokens: (
-  // General theme colors
-  primary: color-palette.$indigo-500,
-  on-primary: #ffffff,
-  secondary: color-palette.$amber-500,
-  on-secondary: #000000,
-  tertiary: color-palette.$indigo-a400,
-  on-tertiary: #ffffff,
-  background: color-palette.$grey-50,
-  surface: #ffffff,
-  on-surface: #000000,
-
-  // Status colors
-  success: color-palette.$green-800,
-  on-success: #ffffff,
-  error: #b00020,
-  on-error: #ffffff,
-  warning: #d14900,
-  on-warning: #ffffff,
-
-  // Text colors
-  text-primary: rgba(0, 0, 0, 0.87),
-  text-secondary: rgba(0, 0, 0, 0.54),
-  text-disabled: rgba(0, 0, 0, 0.12),
-  text-hint: rgba(0, 0, 0, 0.38),
-  text-icon: rgba(0, 0, 0, 0.38),
-  text-primary-on-light: rgba(0, 0, 0, 0.87),
-  text-secondary-on-light: rgba(0, 0, 0, 0.54),
-  text-disabled-on-light: rgba(0, 0, 0, 0.38),
-  text-primary-on-dark: rgba(255, 255, 255, 0.87),
-  text-secondary-on-dark: rgba(255, 255, 255, 0.7),
-
-  // Utility semantic colors
-  track-color: rgba(0, 0, 0, 0.12),
-  primary-track-color: #d0d4ef,
-  secondary-track-color: #fff0c3,
-  tertiary-track-color: #d0d7ff,
-  border-color: color-palette.$grey-300,
-  icon-color: color-palette.$grey-600,
-  form-field-label-on-background: rgba(0, 0, 0, 0.65),
-  form-field-icon-disabled-on-background: rgba(0, 0, 0, 0.26),
-  form-field-text-disabled-on-background: rgba(0, 0, 0, 0.6),
-  form-field-disabled-on-background: color-palette.$grey-100,
-  label-disabled-on-background: rgba(0, 0, 0, 0.38),
-  elevated-surface: #ffffff,
-  on-elevated-surface: rgba(0, 0, 0, 0.87),
-  popup-elevation: elevation.value(2),
-  scrollbar-thumb: color-palette.$grey-400,
-  scrollbar-thumb-hover: color-palette.$grey-500,
-  scrollbar-track: #f0f0f0,
-  scrollbar-track-hover: #ececec,
-  handle-off-color: color-palette.$grey-500
-) !default;
-
-/// All tokens for the Forge dark theme
-$tokens-dark: (
-  // General theme colors
-  primary: color-palette.$indigo-a100,
-  on-primary: #000000,
-  secondary: color-palette.$amber-200,
-  on-secondary: #000000,
-  tertiary: var(--forge-theme-secondary, color-palette.$amber-200),
-  on-tertiary: #000000,
-  background: color-palette.$grey-900,
-  surface: #2c2c2c,
-  on-surface: #ffffff,
+// Forge default (light) theme
+$tokens: utils.flatten(
+  core.$tokens,
+  surface.$tokens,
+  text.$tokens,
+  status.$tokens,
+  utilities.$tokens,
+  (
+    // Temporary Forge-specific compatibility tokens (TODO: remove this when form field & popup are refactored)
+    border-color: utils.variable-ref(theme, outline),
+    elevated-surface: utils.variable-ref(theme, surface-bright),
+    on-elevated-surface: utils.variable-ref(theme, on-surface),
+    popup-elevation: utils.variable-ref(theme, surface-bright-shadow),
+    form-field-label-on-background: theme-utils.emphasized(map.get(text.$tokens, text-high), 65%),
+    form-field-icon-disabled-on-background: theme-utils.emphasized(map.get(text.$tokens, text-high), 26%),
+    form-field-text-disabled-on-background: theme-utils.emphasized(map.get(text.$tokens, text-high), 60%),
+    form-field-disabled-on-background: theme-utils.emphasized(map.get(text.$tokens, text-high), 4%),
+    label-disabled-on-background: theme-utils.emphasized(map.get(text.$tokens, text-high), 38%)
+  )
+);
 
-  // Status colors
-  text-primary: rgba(255, 255, 255, 0.87),
-  text-secondary: rgba(255, 255, 255, 0.54),
-  text-disabled: rgba(255, 255, 255, 0.12),
-  text-hint: rgba(255, 255, 255, 0.38),
-  text-icon: rgba(255, 255, 255, 0.38),
-  text-disabled-on-background: rgba(255, 255, 255, 0.12),
-  text-disabled-on-light: rgba(255, 255, 255, 0.38),
-  text-secondary-on-light: rgba(255, 255, 255, 0.54),
-  text-primary-on-dark: #000000,
 
-  // Utility semantic colors
-  track-color: rgba(255, 255, 255, 0.12),
-  primary-track-color: #e3e8ff,
-  secondary-track-color: #7c704c,
-  tertiary-track-color: var(--forge-theme-secondary-track-color, #7c704c),
-  border-color: #464646,
-  form-field-icon-disabled-on-background: rgba(78, 45, 45, 0.26),
-  form-field-disabled-on-background: #353535,
-  form-field-text-disabled-on-background: rgba(255, 255, 255, 0.6),
-  form-field-label-on-background: rgba(255, 255, 255, 0.65),
-  label-disabled-on-background: rgba(255, 255, 255, 0.38),
-  scrollbar-thumb: color-palette.$grey-600,
-  scrollbar-thumb-hover: color-palette.$grey-500,
-  scrollbar-track: #3a3a3a,
-  scrollbar-track-hover: color-palette.$grey-800,
-  elevated-surface: #363636,
-  on-elevated-surface: rgba(255, 255, 255, 0.87),
-  popup-elevation: elevation.value(16),
-  handle-off-color: color-palette.$grey-500
-) !default;
+// Forge dark theme
+$tokens-dark: utils.flatten(
+  core.$tokens-dark,
+  surface.$tokens-dark,
+  text.$tokens-dark,
+  status.$tokens-dark,
+  utilities.$tokens-dark,
+  (
+    // Temporary Forge-specific compatibility tokens (TODO: remove this when form field is refactored)
+    form-field-label-on-background: theme-utils.emphasized(map.get(text.$tokens-dark, text-high), 65%),
+    form-field-icon-disabled-on-background: theme-utils.emphasized(map.get(text.$tokens-dark, text-high), 26%),
+    form-field-text-disabled-on-background: theme-utils.emphasized(map.get(text.$tokens-dark, text-high), 60%),
+    form-field-disabled-on-background: theme-utils.emphasized(map.get(text.$tokens-dark, text-high), 4%),
+    label-disabled-on-background: theme-utils.emphasized(map.get(text.$tokens-dark, text-high), 38%)
+  )
+);
 
 ///
-/// Temporary tokens to map the MDC theme to Forge theme
+/// Temporary tokens to map the MDC theme to the Forge theme.
 ///
 /// TODO: Remove this once MDC dependency is removed
 /// 
 $mdc-remap: (
-  primary: var(--forge-theme-primary, map.get($tokens, primary)),
-  on-primary: var(--forge-theme-on-primary, map.get($tokens, on-primary)),
-  secondary: var(--forge-theme-secondary, map.get($tokens, secondary)),
-  on-secondary: var(--forge-theme-on-secondary, map.get($tokens, on-secondary)),
-  background: var(--forge-theme-background, map.get($tokens, background)),
-  surface: var(--forge-theme-surface, map.get($tokens, surface)),
-  on-surface: var(--forge-theme-on-surface, map.get($tokens, on-surface)),
-  error: var(--forge-theme-error, map.get($tokens, error)),
-  on-error: var(--forge-theme-on-error, map.get($tokens, on-error)),
-  text-primary-on-background: var(--forge-theme-text-primary, map.get($tokens, text-primary)),
-  text-secondary-on-background: var(--forge-theme-text-secondary, map.get($tokens, text-secondary)),
-  text-disabled-on-background: var(--forge-theme-text-disabled, map.get($tokens, text-disabled)),
-  text-hint-on-background: var(--forge-theme-text-hint, map.get($tokens, text-hint)),
-  text-icon-on-background: var(--forge-theme-text-icon, map.get($tokens, text-icon)),
-  text-primary-on-light: var(--forge-theme-text-primary-on-light, map.get($tokens, text-primary-on-light)),
-  text-secondary-on-light: var(--forge-theme-text-secondary-on-light, map.get($tokens, text-secondary-on-light)),
-  text-disabled-on-light: var(--forge-theme-text-disabled-on-light, map.get($tokens, text-disabled-on-light)),
-  text-primary-on-dark: var(--forge-theme-text-primary-on-dark, map.get($tokens, text-primary-on-dark)),
+  primary: utils.variable-ref(theme, primary),
+  on-primary: utils.variable-ref(theme, on-primary),
+  secondary: utils.variable-ref(theme, secondary),
+  on-secondary: utils.variable-ref(theme, on-secondary),
+  background: utils.variable-ref(theme, surface-dim),
+  surface: utils.variable-ref(theme, surface),
+  on-surface: utils.variable-ref(theme, on-surface),
+  error: utils.variable-ref(theme, error),
+  on-error: utils.variable-ref(theme, on-error),
+  text-primary-on-background: utils.variable-ref(theme, text-high),
+  text-secondary-on-background: utils.variable-ref(theme, text-medium),
+  text-disabled-on-background: utils.variable-ref(theme, text-lowest),
+  text-hint-on-background: utils.variable-ref(theme, text-low),
+  text-icon-on-background: utils.variable-ref(theme, text-medium),
+  text-primary-on-light: utils.variable-ref(theme, text-high),
+  text-secondary-on-light: utils.variable-ref(theme, text-medium),
+  text-disabled-on-light: utils.variable-ref(theme, text-low),
+  text-primary-on-dark: utils.variable-ref(theme, text-high-inverse),
 );
diff --git a/src/lib/core/styles/tokens/theme/_tokens.status.scss b/src/lib/core/styles/tokens/theme/_tokens.status.scss
new file mode 100644
index 000000000..890bc3645
--- /dev/null
+++ b/src/lib/core/styles/tokens/theme/_tokens.status.scss
@@ -0,0 +1,44 @@
+@use 'sass:map';
+@use '../../utils';
+@use './token-utils';
+@use './tokens.surface' as surface;
+@use '../color-palette';
+
+///
+/// Computes the status theme colors.
+/// 
+/// @param {Map} $colors - The status colors map.
+/// @param {Map} $surface-theme - The base surface theme
+/// @return {Map} - The computed status theme
+///
+@function get-status-theme($colors, $surface-theme) {
+  $surface: map.get($surface-theme, surface);
+
+  $success-theme: token-utils.get-color-theme('success', map.get($colors, success), $surface);
+  $error-theme: token-utils.get-color-theme('error', map.get($colors, error), $surface);
+  $warning-theme: token-utils.get-color-theme('warning', map.get($colors, warning), $surface);
+  $info-theme: token-utils.get-color-theme('info', map.get($colors, info), $surface);
+
+  @return utils.flatten(
+    $success-theme,
+    $error-theme,
+    $warning-theme,
+    $info-theme
+  );
+}
+
+// Light
+$tokens: get-status-theme((
+  success: color-palette.$green-800,
+  error: color-palette.$crimson-900,
+  warning: color-palette.$burnt-orange-800,
+  info: color-palette.$blue-800
+), surface.$tokens);
+
+// Dark
+$tokens-dark: get-status-theme((
+  success: color-palette.$dollar-bill-600,
+  error: color-palette.$ruddy-pink-200,
+  warning: color-palette.$apricot-200,
+  info: color-palette.$blue-800,
+), surface.$tokens-dark);
diff --git a/src/lib/core/styles/tokens/theme/_tokens.surface.scss b/src/lib/core/styles/tokens/theme/_tokens.surface.scss
new file mode 100644
index 000000000..c25e7e94f
--- /dev/null
+++ b/src/lib/core/styles/tokens/theme/_tokens.surface.scss
@@ -0,0 +1,60 @@
+@use 'sass:map';
+@use '../../theme/utils' as theme-utils;
+@use '../../theme/color-utils';
+@use '../../elevation';
+@use './color-emphasis';
+@use '../color-palette';
+
+///
+/// Computes the surface theme colors.
+/// 
+/// @param {Map} $theme - The surface theme map.
+/// @return {Map} - The computed surface theme map
+/// 
+@function get-surface-theme($theme) {
+  $surface: map.get($theme, surface);
+  $on-surface: theme-utils.contrast($surface);
+  $surface-tone: color-utils.tone($surface);
+  $surface-inverse: theme-utils.hexify($on-surface, $surface, color-emphasis.value(inverse));
+
+  $surface-container: theme-utils.hexify($on-surface, $surface, color-emphasis.value(lower));
+  $surface-container-low: theme-utils.hexify($on-surface, $surface, color-emphasis.value(lowest));
+  $surface-container-medium: theme-utils.hexify($on-surface, $surface, color-emphasis.value(if($surface-tone == 'light', low, medium-low)));
+  $surface-container-high: theme-utils.hexify($on-surface, $surface, color-emphasis.value(if($surface-tone == 'light', medium-low, medium)));
+
+  @return (
+    surface: $surface,
+    surface-inverse: $surface-inverse,
+    surface-container: $surface-container,
+    surface-container-low: $surface-container-low,
+    surface-container-medium: $surface-container-medium,
+    surface-container-high: $surface-container-high,
+    surface-dim: map.get($theme, surface-dim),
+    surface-bright: map.get($theme, surface-bright),
+    surface-bright-shadow: map.get($theme, surface-bright-shadow),
+    on-surface: $on-surface,
+    on-surface-inverse: theme-utils.contrast($surface-inverse),
+    on-surface-container: theme-utils.contrast($surface-container),
+    on-surface-container-low: theme-utils.contrast($surface-container-low),
+    on-surface-container-medium: theme-utils.contrast($surface-container-medium),
+    on-surface-container-high: theme-utils.contrast($surface-container-high)
+  );
+}
+
+// Light
+$tokens: get-surface-theme((
+  surface: color-palette.$neutral-50,
+  surface-bright: color-palette.$neutral-50,
+  surface-bright-shadow: elevation.value(2),
+  surface-dim: color-palette.$grey-50
+));
+
+// Dark
+$surface-dark: color-palette.$neutral-900;
+$on-surface-dark: theme-utils.contrast($surface-dark);
+$tokens-dark: get-surface-theme((
+  surface: color-palette.$neutral-900,
+  surface-bright: theme-utils.hexify($on-surface-dark, $surface-dark, color-emphasis.value(minimum)),
+  surface-bright-shadow: elevation.value(16),
+  surface-dim: color-palette.$grey-900
+));
diff --git a/src/lib/core/styles/tokens/theme/_tokens.text.scss b/src/lib/core/styles/tokens/theme/_tokens.text.scss
new file mode 100644
index 000000000..cf166b837
--- /dev/null
+++ b/src/lib/core/styles/tokens/theme/_tokens.text.scss
@@ -0,0 +1,33 @@
+@use 'sass:map';
+@use '../../theme/utils' as theme-utils;
+@use './color-emphasis';
+@use './tokens.surface' as surface;
+
+///
+/// Computes the text theme colors.
+/// 
+/// @param {Color} $surface-theme - The base surface theme
+/// @return {Map} - The computed text theme
+/// 
+@function get-text-theme($surface-theme) {
+  $surface: map.get($surface-theme, surface);
+  $text: theme-utils.contrast($surface);
+  $text-inverse: theme-utils.contrast($text);
+
+  @return (
+    text-high: theme-utils.emphasized($text, color-emphasis.value(highest)),
+    text-high-inverse: theme-utils.emphasized($text-inverse, color-emphasis.value(highest)),
+    text-medium: theme-utils.emphasized($text, color-emphasis.value(medium)),
+    text-medium-inverse: theme-utils.emphasized($text-inverse, color-emphasis.value(medium)),
+    text-low: theme-utils.emphasized($text, color-emphasis.value(medium-low)),
+    text-low-inverse: theme-utils.emphasized($text-inverse, color-emphasis.value(medium-low)),
+    text-lowest: theme-utils.emphasized($text, color-emphasis.value(lowest)),
+    text-lowest-inverse: theme-utils.emphasized($text-inverse, color-emphasis.value(lowest)),
+  );
+}
+
+// Light
+$tokens: get-text-theme(surface.$tokens);
+
+// Dark
+$tokens-dark: get-text-theme(surface.$tokens-dark);
diff --git a/src/lib/core/styles/tokens/theme/_tokens.utilities.scss b/src/lib/core/styles/tokens/theme/_tokens.utilities.scss
new file mode 100644
index 000000000..d79ecc906
--- /dev/null
+++ b/src/lib/core/styles/tokens/theme/_tokens.utilities.scss
@@ -0,0 +1,25 @@
+@use 'sass:map';
+@use '../../theme/utils' as theme-utils;
+@use './color-emphasis';
+@use './tokens.surface' as surface;
+
+///
+/// Computes the utilities theme colors.
+/// 
+/// @param {Color} $surface-theme - The base surface theme
+/// @return {Map} - The computed utilities theme 
+///
+@function get-utilities-theme($surface-theme) {
+  $surface: map.get($surface-theme, surface);
+  $on-surface: map.get($surface-theme, on-surface);
+
+  @return (
+    outline: theme-utils.hexify($on-surface, $surface, color-emphasis.value(lower))
+  );
+}
+
+// Light
+$tokens: get-utilities-theme(surface.$tokens);
+
+// Dark
+$tokens-dark: get-utilities-theme(surface.$tokens-dark);
diff --git a/src/lib/core/styles/tokens/typography/_scale.scss b/src/lib/core/styles/tokens/typography/_scale.scss
new file mode 100644
index 000000000..321fdab6b
--- /dev/null
+++ b/src/lib/core/styles/tokens/typography/_scale.scss
@@ -0,0 +1,34 @@
+@use 'sass:map';
+
+$scale: (
+  '0750': 0.75,  // 12px
+  '0875': 0.875, // 14px
+  '1000': 1,     // 16px
+  '1125': 1.125, // 18px
+  '1250': 1.25,  // 20px
+  '1375': 1.375, // 22px
+  '1500': 1.5,   // 24px
+  '1750': 1.75,  // 28px
+  '2000': 2,     // 32px
+  '2125': 2.125, // 34px
+  '2250': 2.25,  // 36px
+  '2500': 2.5,   // 40px
+  '2625': 2.625, // 42px
+  '2750': 2.75,  // 44px
+  '3000': 3,     // 48px
+  '3250': 3.25,  // 52px
+  '3500': 3.5,   // 56px
+  '3750': 3.75,  // 60px
+  '4000': 4,     // 64px
+  '4250': 4.25,  // 68px
+  '4500': 4.5,   // 72px
+  '4750': 4.75,  // 76px
+  '5000': 5      // 80px
+) !default;
+
+@function value($key) {
+  @if not map.has-key($scale, $key) {
+    @error 'Unknown scale value `#{$key}`.';
+  }
+  @return map.get($scale, $key);
+}
diff --git a/src/lib/core/styles/tokens/typography/_tokens.body.scss b/src/lib/core/styles/tokens/typography/_tokens.body.scss
new file mode 100644
index 000000000..e4dcff699
--- /dev/null
+++ b/src/lib/core/styles/tokens/typography/_tokens.body.scss
@@ -0,0 +1,36 @@
+@use '../../theme';
+@use '../../utils';
+@use './scale';
+@use './type-utils';
+@use './tokens.core' as core;
+
+$body1: utils.inherit-map(core.$base, (
+  font-size: type-utils.font-size-relative(body, font-size, '0875'),
+  line-height: type-utils.font-size-relative(body, line-height, '1125'),
+  letter-spacing: type-utils.calc-letter-spacing(0.5, scale.value('0875'))
+)) !default;
+
+$body2: utils.inherit-map(core.$base, (
+  font-size: type-utils.font-size-relative(body, font-size, '1000'),
+  line-height: type-utils.font-size-relative(body, line-height, '1375'),
+  letter-spacing: type-utils.calc-letter-spacing(0.25, scale.value('1000'))
+)) !default;
+
+$body3: utils.inherit-map(core.$base, (
+  font-size: type-utils.font-size-relative(body, font-size, '1125'),
+  line-height: type-utils.font-size-relative(body, line-height, '1500'),
+  letter-spacing: type-utils.calc-letter-spacing(0.15, scale.value('1125'))
+)) !default;
+
+$body4: utils.inherit-map(core.$base, (
+  font-size: type-utils.font-size-relative(body, font-size, '1250'),
+  line-height: type-utils.font-size-relative(body, line-height, '1750'),
+  letter-spacing: type-utils.calc-letter-spacing(0.1, scale.value('1250'))
+)) !default;
+
+$tokens: (
+  body1: $body1,
+  body2: $body2,
+  body3: $body3,
+  body4: $body4
+) !default;
diff --git a/src/lib/core/styles/tokens/typography/_tokens.core.scss b/src/lib/core/styles/tokens/typography/_tokens.core.scss
new file mode 100644
index 000000000..910aaf0c0
--- /dev/null
+++ b/src/lib/core/styles/tokens/typography/_tokens.core.scss
@@ -0,0 +1,26 @@
+@use 'sass:map';
+@use '../../utils';
+@use '../../core/config';
+@use './weight';
+
+// Base typography style values
+$font-family: 'Roboto', sans-serif !default;
+$font-size: 1rem !default; // 16px
+
+// The base typography styles that other styles inherit from.
+$base: (
+  font-family: utils.create-var(typography, font-family, $font-family),
+  font-size: utils.create-var(typography, font-size, $font-size),
+  font-weight: weight.value(regular),
+  line-height: normal,
+  letter-spacing: normal,
+  text-transform: inherit,
+  text-decoration: inherit
+) !default;
+
+@function get($key) {
+  @if not map.has-key($base, $key) {
+    @error 'No typography style exists with the key `#{$key}`.';
+  }
+  @return map.get($base, $key);
+}
diff --git a/src/lib/core/styles/tokens/typography/_tokens.display.scss b/src/lib/core/styles/tokens/typography/_tokens.display.scss
new file mode 100644
index 000000000..9333acabe
--- /dev/null
+++ b/src/lib/core/styles/tokens/typography/_tokens.display.scss
@@ -0,0 +1,62 @@
+@use '../../utils';
+@use './type-utils';
+@use './tokens.core' as core;
+@use './weight';
+@use './scale';
+
+$display1: utils.inherit-map(core.$base, (
+  font-size: type-utils.font-size-relative(display1, font-size, '1500'),
+  font-weight: weight.value(light),
+  line-height: type-utils.font-size-relative(display1, line-height, '2250')
+)) !default;
+
+$display2: utils.inherit-map($display1, (
+  font-size: type-utils.font-size-relative(display2, font-size, '1750'),
+  line-height: type-utils.font-size-relative(display2, line-height, '2250')
+)) !default;
+
+$display3: utils.inherit-map($display2, (
+  font-size: type-utils.font-size-relative(display3, font-size, '2000'),
+  line-height: type-utils.font-size-relative(display3, line-height, '2500')
+)) !default;
+
+$display4: utils.inherit-map($display3, (
+  font-size: type-utils.font-size-relative(display4, font-size, '2250'),
+  line-height: type-utils.font-size-relative(display4, line-height, '2750'),
+  letter-spacing: type-utils.calc-letter-spacing(-0.25, scale.value('2250'))
+)) !default;
+
+$display5: utils.inherit-map($display4, (
+  font-size: type-utils.font-size-relative(display5, font-size, '2500'),
+  line-height: type-utils.font-size-relative(display5, line-height, '3000'),
+  letter-spacing: type-utils.calc-letter-spacing(-0.5, scale.value('2500'))
+)) !default;
+
+$display6: utils.inherit-map($display5, (
+  font-size: type-utils.font-size-relative(display6, font-size, '3000'),
+  line-height: type-utils.font-size-relative(display6, line-height, '4000'),
+  letter-spacing: type-utils.calc-letter-spacing(-1, scale.value('3000'))
+)) !default;
+
+$display7: utils.inherit-map($display6, (
+  font-size: type-utils.font-size-relative(display7, font-size, '3500'),
+  line-height: type-utils.font-size-relative(display7, line-height, '4500'),
+  letter-spacing: type-utils.calc-letter-spacing(-1.5, scale.value('3500'))
+)) !default;
+
+$display8: utils.inherit-map($display7, (
+  font-size: type-utils.font-size-relative(display8, font-size, '4000'),
+  line-height: type-utils.font-size-relative(display8, line-height, '4750'),
+  letter-spacing: type-utils.calc-letter-spacing(-2, scale.value('4000'))
+)) !default;
+
+$tokens: (
+  display1: $display1,
+  display2: $display2,
+  display3: $display3,
+  display4: $display4,
+  display5: $display5,
+  display6: $display6,
+  display7: $display7,
+  display8: $display8
+) !default;
diff --git a/src/lib/core/styles/tokens/typography/_tokens.heading.scss b/src/lib/core/styles/tokens/typography/_tokens.heading.scss
new file mode 100644
index 000000000..2afc19a2e
--- /dev/null
+++ b/src/lib/core/styles/tokens/typography/_tokens.heading.scss
@@ -0,0 +1,65 @@
+@use '../../utils';
+@use './type-utils';
+@use './scale';
+@use './weight';
+@use './tokens.core' as core;
+
+$heading1: utils.inherit-map(core.$base, (
+  font-size: type-utils.font-size-relative(heading1, font-size, '0875'),
+  font-weight: weight.value(medium),
+  line-height: type-utils.font-size-relative(heading1, line-height, '1125'),
+  letter-spacing: type-utils.calc-letter-spacing(0.25, scale.value('0875'))
+)) !default;
+
+$heading2: utils.inherit-map($heading1, (
+  font-size: type-utils.font-size-relative(heading2, font-size, '1000'),
+  line-height: type-utils.font-size-relative(heading2, line-height, '1250'),
+  letter-spacing: type-utils.calc-letter-spacing(0.2, scale.value('1000'))
+)) !default;
+
+$heading3: utils.inherit-map($heading2, (
+  font-size: type-utils.font-size-relative(heading3, font-size, '1125'),
+  line-height: type-utils.font-size-relative(heading3, line-height, '1375'),
+  letter-spacing: type-utils.calc-letter-spacing(0.15, scale.value('1125'))
+)) !default;
+
+$heading4: utils.inherit-map($heading3, (
+  font-size: type-utils.font-size-relative(heading4, font-size, '1250'),
+  line-height: type-utils.font-size-relative(heading4, line-height, '1500'),
+  letter-spacing: type-utils.calc-letter-spacing(0.1, scale.value('1250'))
+)) !default;
+
+$heading5: utils.inherit-map($heading4, (
+  font-size: type-utils.font-size-relative(heading5, font-size, '1500'),
+  line-height: type-utils.font-size-relative(heading5, line-height, '1750'),
+  letter-spacing: type-utils.calc-letter-spacing(0, scale.value('1500'))
+)) !default;
+
+$heading6: utils.inherit-map($heading5, (
+  font-size: type-utils.font-size-relative(heading6, font-size, '1750'),
+  line-height: type-utils.font-size-relative(heading6, line-height, '2125'),
+  letter-spacing: type-utils.calc-letter-spacing(0, scale.value('1750'))
+)) !default;
+
+$heading7: utils.inherit-map($heading6, (
+  font-size: type-utils.font-size-relative(heading7, font-size, '2000'),
+  line-height: type-utils.font-size-relative(heading7, line-height, '2500'),
+  letter-spacing: type-utils.calc-letter-spacing(-0.05, scale.value('2000'))
+)) !default;
+
+$heading8: utils.inherit-map($heading7, (
+  font-size: type-utils.font-size-relative(heading8, font-size, '2250'),
+  line-height: type-utils.font-size-relative(heading8, line-height, '2625'),
+  letter-spacing: type-utils.calc-letter-spacing(-0.1, scale.value('2250'))
+)) !default;
+
+$tokens: (
+  heading1: $heading1,
+  heading2: $heading2,
+  heading3: $heading3,
+  heading4: $heading4,
+  heading5: $heading5,
+  heading6: $heading6,
+  heading7: $heading7,
+  heading8: $heading8
+) !default;
diff --git a/src/lib/core/styles/tokens/typography/_tokens.label.scss b/src/lib/core/styles/tokens/typography/_tokens.label.scss
new file mode 100644
index 000000000..7b674d215
--- /dev/null
+++ b/src/lib/core/styles/tokens/typography/_tokens.label.scss
@@ -0,0 +1,32 @@
+@use '../../utils';
+@use './type-utils';
+@use './weight';
+@use './scale';
+@use './tokens.core' as core;
+
+$label: utils.inherit-map(core.$base, (
+  font-size: type-utils.font-size-relative(label, font-size, '0750'),
+  line-height: type-utils.font-size-relative(label, line-height, '1250'),
+  letter-spacing: type-utils.calc-letter-spacing(0.5, scale.value('0875'))
+)) !default;
+
+$button: utils.inherit-map(core.$base, (
+  font-size: type-utils.font-size-relative(button, font-size, '0875'),
+  font-weight: weight.value(medium),
+  line-height: type-utils.font-size-relative(button, line-height, '2250'),
+  letter-spacing: type-utils.calc-letter-spacing(1, scale.value('0875'))
+)) !default;
+
+$overline: utils.inherit-map(core.$base, (
+  font-size: type-utils.font-size-relative(overline, font-size, '0750'),
+  font-weight: weight.value(medium),
+  line-height: type-utils.font-size-relative(overline, line-height, '2000'),
+  letter-spacing: type-utils.calc-letter-spacing(2, scale.value('0750')),
+  text-transform: uppercase
+)) !default;
+
+$tokens: (
+  label: $label,
+  button: $button,
+  overline: $overline
+) !default;
diff --git a/src/lib/core/styles/tokens/typography/_tokens.scss b/src/lib/core/styles/tokens/typography/_tokens.scss
index 6f54d5bcf..1774d6383 100644
--- a/src/lib/core/styles/tokens/typography/_tokens.scss
+++ b/src/lib/core/styles/tokens/typography/_tokens.scss
@@ -1,220 +1,25 @@
 @use 'sass:map';
-@use 'sass:list';
-@use '../../core/config';
-@use '../../theme';
 @use '../../utils';
-
-/// Base typography style values
-$font-family: 'Roboto', sans-serif !default;
-$font-size: 1rem !default; // 16px
-
-/// The Forge typography scale system
-$font-scale: (
-  12: 0.75,
-  14: 0.875,
-  16: 1,
-  18: 1.125,
-  20: 1.25,
-  22: 1.375,
-  24: 1.5,
-  28: 1.75,
-  32: 2,
-  34: 2.125,
-  36: 2.25,
-  40: 2.5,
-  42: 2.625,
-  44: 2.75,
-  48: 3,
-  56: 3.5,
-  64: 4,
-) !default;
-
-/// Available font weights for Forge typography styles
-$font-weight: (
-  light: 300,
-  regular: 400,
-  medium: 500,
-  bold: 700
-) !default;
-
-/// The base typography styles that other styles inherit from.
-$base: (
-  font-family: var(--#{config.$prefix}-typography-font-family, #{$font-family}),
-  font-size: var(--#{config.$prefix}-typography-font-size, #{$font-size}),
-  font-weight: map.get($font-weight, regular),
-  line-height: normal,
-  letter-spacing: normal,
-  text-transform: inherit,
-  text-decoration: inherit,
-  color: theme.variable(text-primary)
+@use './tokens.body' as body;
+@use './tokens.display' as display;
+@use './tokens.heading' as heading;
+@use './tokens.label' as label;
+@use './tokens.subheading' as subheading;
+
+$tokens: utils.flatten(
+  display.$tokens,
+  heading.$tokens,
+  subheading.$tokens,
+  body.$tokens,
+  label.$tokens
 ) !default;
 
 ///
-/// Creates a style value that is relative to the base font size for the given property.
+/// Retrieves a typography style token value.
 /// 
-/// This allows for typography styles to be scaled relative to the root font size, or
-/// relative to a specific CSS custom property if optionally applied. This is useful
-/// when embedding Forge in an application that adjusts the root `font-size` to something
-/// other than `16px` (browser default).
-///
-@function _font-size-relative($style, $property, $scale) {
-  @return calc(#{map.get($base, font-size)} * var(--#{config.$prefix}-typography-#{$style}-#{$property}-scale, #{$scale}));
-}
-
-/// Heading
-$heading-01: utils.inherit-map($base, (
-  font-size: _font-size-relative(heading-01, font-size, map.get($font-scale, 14)),
-  font-weight: map.get($font-weight, medium),
-  line-height: _font-size-relative(heading-01, line-height, map.get($font-scale, 20)),
-  letter-spacing: 0.0071428571em
-)) !default;
-
-$heading-02: utils.inherit-map($heading-01, (
-  font-size: _font-size-relative(heading-02, font-size, map.get($font-scale, 16)),
-  line-height: _font-size-relative(heading-02, line-height, map.get($font-scale, 20)),
-  letter-spacing: 0.009375em
-)) !default;
-
-$heading-03: utils.inherit-map($heading-02, (
-  font-size: _font-size-relative(heading-03, font-size, map.get($font-scale, 18)),
-  line-height: _font-size-relative(heading-03, line-height, map.get($font-scale, 24)),
-  letter-spacing: 0.0125em
-)) !default;
-
-$heading-04: utils.inherit-map($heading-03, (
-  font-size: _font-size-relative(heading-04, font-size, map.get($font-scale, 20)),
-  line-height: _font-size-relative(heading-04, line-height, map.get($font-scale, 28)),
-  letter-spacing: normal
-)) !default;
-
-$heading-05: utils.inherit-map($heading-04, (
-  font-size: _font-size-relative(heading-05, font-size, map.get($font-scale, 24)),
-  line-height: _font-size-relative(heading-05, line-height, map.get($font-scale, 32)),
-)) !default;
-
-$heading-06: utils.inherit-map($heading-05, (
-  font-size: _font-size-relative(heading-06, font-size, map.get($font-scale, 28)),
-  line-height: _font-size-relative(heading-06, line-height, map.get($font-scale, 36)),
-)) !default;
-
-/// Display
-$display-01: utils.inherit-map($base, (
-  font-size: _font-size-relative(display-01, font-size, map.get($font-scale, 24)),
-  font-weight: map.get($font-weight, light),
-  line-height: _font-size-relative(display-01, line-height, map.get($font-scale, 30)),
-)) !default;
-
-$display-02: utils.inherit-map($display-01, (
-  font-size: _font-size-relative(display-02, font-size, map.get($font-scale, 28)),
-  line-height: _font-size-relative(display-02, line-height, map.get($font-scale, 34)),
-)) !default;
-
-$display-03: utils.inherit-map($display-02, (
-  font-size: _font-size-relative(display-03, font-size, map.get($font-scale, 32)),
-  line-height: _font-size-relative(display-03, line-height, map.get($font-scale, 40)),
-)) !default;
-
-$display-04: utils.inherit-map($display-03, (
-  font-size: _font-size-relative(display-04, font-size, map.get($font-scale, 36)),
-  line-height: _font-size-relative(display-04, line-height, map.get($font-scale, 44)),
-)) !default;
-
-$display-05: utils.inherit-map($display-04, (
-  font-size: _font-size-relative(display-05, font-size, map.get($font-scale, 40)),
-  line-height: _font-size-relative(display-05, line-height, map.get($font-scale, 48)),
-)) !default;
-
-$display-06: utils.inherit-map($display-05, (
-  font-size: _font-size-relative(display-06, font-size, map.get($font-scale, 48)),
-  line-height: _font-size-relative(display-06, line-height, map.get($font-scale, 64)),
-)) !default;
-
-/// Title
-$title: utils.inherit-map($heading-03, (
-  font-family: #{map.get($base, font-family)},
-  font-size: _font-size-relative(title, font-size, map.get($font-scale, 20)),
-  font-weight: map.get($font-weight, regular),
-  line-height: _font-size-relative(title, line-height, map.get($font-scale, 24)),
-  letter-spacing: 0.0125em,
-)) !default;
-
-/// Subtitle
-$subtitle: (
-  font-family: #{map.get($base, font-family)},
-  font-size: _font-size-relative(subtitle, font-size, map.get($font-scale, 16)),
-  font-weight: map.get($base, font-weight),
-  line-height: _font-size-relative(subtitle, line-height, map.get($font-scale, 28)),
-  letter-spacing: 0.009375em,
-  text-transform: inherit,
-  text-decoration: inherit,
-  color: theme.variable(text-secondary)
-) !default;
-
-$body-01: utils.inherit-map($base, (
-  font-size: _font-size-relative(body, font-size, map.get($font-scale, 14)),
-  line-height: _font-size-relative(body, line-height, map.get($font-scale, 20)),
-  letter-spacing: 0.0178571429em
-)) !default;
-
-$body-02: utils.inherit-map($base, (
-  font-size: _font-size-relative(body, font-size, map.get($font-scale, 16)),
-  line-height: _font-size-relative(body, line-height, map.get($font-scale, 24)),
-  letter-spacing: 0.03125em
-)) !default;
-
-$body: utils.inherit-map($body-01, (
-  font-size: _font-size-relative(body, font-size, map.get($font-scale, 16)),
-  line-height: _font-size-relative(body, line-height, map.get($font-scale, 24)),
-)) !default;
-
-/// Label
-$label: (
-  font-family: #{map.get($base, font-family)},
-  font-size: _font-size-relative(label, font-size, 0.75), // 12px
-  font-weight: map.get($base, font-weight),
-  line-height: _font-size-relative(label, line-height, 1.25), // 20px
-  letter-spacing: 0.0333333333em,
-  text-transform: inherit,
-  text-decoration: inherit,
-  color: map.get($base, color)
-) !default;
-
-/// Button
-$button: (
-  font-family: #{map.get($base, font-family)},
-  font-size: _font-size-relative(button, font-size, 0.875), // 14px
-  font-weight: 500,
-  line-height: _font-size-relative(button, line-height, 2.25), // 36px
-  letter-spacing: 0.0892857143em,
-  text-transform: inherit,
-  text-decoration: inherit,
-  color: map.get($base, color)
-) !default;
-
-$tokens: (
-  heading-01: $heading-01,
-  heading-02: $heading-02,
-  heading-03: $heading-03,
-  heading-04: $heading-04,
-  heading-05: $heading-05,
-  heading-06: $heading-06,
-  display-01: $display-01,
-  display-02: $display-02,
-  display-03: $display-03,
-  display-04: $display-04,
-  display-05: $display-05,
-  display-06: $display-06,
-  title: $title,
-  subtitle: $subtitle,
-  body-01: $body-01,
-  body-02: $body-02,
-  body: $body,
-  label: $label,
-  button: $button
-) !default;
-
-///
-/// Returns a typography style token value.
+/// @param {String} $style - The typography style.
+/// @param {String} $token - The token within the provided style.
+/// @return {String} - The value of the style token.
 /// 
 @function get($style, $token) {
   $style-tokens: map.get($tokens, $style);
diff --git a/src/lib/core/styles/tokens/typography/_tokens.subheading.scss b/src/lib/core/styles/tokens/typography/_tokens.subheading.scss
new file mode 100644
index 000000000..b964dc3ca
--- /dev/null
+++ b/src/lib/core/styles/tokens/typography/_tokens.subheading.scss
@@ -0,0 +1,61 @@
+@use '../../utils';
+@use './scale';
+@use './weight';
+@use './type-utils';
+@use './tokens.core' as core;
+
+$subheading1: utils.inherit-map(core.$base, (
+  font-size: type-utils.font-size-relative(subheading1, font-size, '0875'),
+  font-weight: weight.value(regular),
+  line-height: type-utils.font-size-relative(subheading1, line-height, '1125')
+)) !default;
+
+$subheading2: utils.inherit-map($subheading1, (
+  font-size: type-utils.font-size-relative(subheading2, font-size, '1000'),
+  line-height: type-utils.font-size-relative(subheading2, line-height, '1250')
+)) !default;
+
+$subheading3: utils.inherit-map($subheading2, (
+  font-size: type-utils.font-size-relative(subheading3, font-size, '1125'),
+  line-height: type-utils.font-size-relative(subheading3, line-height, '1375')
+)) !default;
+
+$subheading4: utils.inherit-map($subheading3, (
+  font-size: type-utils.font-size-relative(subheading4, font-size, '1250'),
+  line-height: type-utils.font-size-relative(subheading4, line-height, '1500')
+)) !default;
+
+$subheading5: utils.inherit-map($subheading4, (
+  font-size: type-utils.font-size-relative(subheading5, font-size, '1500'),
+  line-height: type-utils.font-size-relative(subheading5, line-height, '1750'),
+  letter-spacing: type-utils.calc-letter-spacing(0, scale.value('1500'))
+)) !default;
+
+$subheading6: utils.inherit-map($subheading5, (
+  font-size: type-utils.font-size-relative(subheading6, font-size, '1750'),
+  line-height: type-utils.font-size-relative(subheading6, line-height, '2125'),
+  letter-spacing: type-utils.calc-letter-spacing(0, scale.value('1750'))
+)) !default;
+
+$subheading7: utils.inherit-map($subheading6, (
+  font-size: type-utils.font-size-relative(subheading7, font-size, '2000'),
+  line-height: type-utils.font-size-relative(subheading7, line-height, '2500'),
+  letter-spacing: type-utils.calc-letter-spacing(-0.05, scale.value('2000'))
+)) !default;
+
+$subheading8: utils.inherit-map($subheading7, (
+  font-size: type-utils.font-size-relative(subheading8, font-size, '2250'),
+  line-height: type-utils.font-size-relative(subheading8, line-height, '2625'),
+  letter-spacing: type-utils.calc-letter-spacing(-0.1, scale.value('2250'))
+)) !default;
+
+$tokens: (
+  subheading1: $subheading1,
+  subheading2: $subheading2,
+  subheading3: $subheading3,
+  subheading4: $subheading4,
+  subheading5: $subheading5,
+  subheading6: $subheading6,
+  subheading7: $subheading7,
+  subheading8: $subheading8
+) !default;
diff --git a/src/lib/core/styles/tokens/typography/_type-utils.scss b/src/lib/core/styles/tokens/typography/_type-utils.scss
new file mode 100644
index 000000000..eda111c44
--- /dev/null
+++ b/src/lib/core/styles/tokens/typography/_type-utils.scss
@@ -0,0 +1,32 @@
+@use 'sass:math';
+@use '../../core/config';
+@use './tokens.core' as core;
+@use './scale';
+
+$module: 'typography' !default;
+$token: 'scale' !default;
+
+///
+/// Creates a style value that is relative to the base font size for the given property.
+/// 
+/// This allows for typography styles to be scaled relative to the root font size, or
+/// relative to a specific CSS custom property if optionally applied. This is useful
+/// when embedding Forge in an application that adjusts the root `font-size` to something
+/// other than `16px` (browser default).
+///
+@function font-size-relative($style, $property, $scale) {
+  $scale-value: scale.value($scale);
+  $var-name: '--#{config.$prefix}-#{$module}-#{$style}-#{$property}-#{$token}';
+  @return calc(#{core.get(font-size)} * var(#{$var-name}, #{$scale-value}));
+}
+
+///
+/// Calculates the letter spacing value for the given tracking and font size.
+/// 
+/// @param {Number} $tracking - The tracking value.
+/// @param {Number} $font-size - The font size value.
+/// @return {String} - The letter spacing value.
+/// 
+@function calc-letter-spacing($tracking, $font-size) {
+  @return math.div($tracking, $font-size * 16) * 1em;
+}
diff --git a/src/lib/core/styles/tokens/typography/_weight.scss b/src/lib/core/styles/tokens/typography/_weight.scss
new file mode 100644
index 000000000..360be0b5b
--- /dev/null
+++ b/src/lib/core/styles/tokens/typography/_weight.scss
@@ -0,0 +1,15 @@
+@use 'sass:map';
+
+$font-weight: (
+  light: 300,
+  regular: 400,
+  medium: 500,
+  bold: 700
+) !default;
+
+@function value($weight) {
+  @if not map.has-key($font-weight, $weight) {
+    @error 'Invalid font weight: "#{$weight}"';
+  }
+  @return map.get($font-weight, $weight);
+}
diff --git a/src/lib/core/styles/typography/index.scss b/src/lib/core/styles/typography/index.scss
index 2bbf97232..e09ed3e2e 100644
--- a/src/lib/core/styles/typography/index.scss
+++ b/src/lib/core/styles/typography/index.scss
@@ -1,7 +1,11 @@
 @use 'sass:map';
 @use 'sass:list';
 @use '../core/config';
+@use '../utils';
+@use '../theme';
 @use '../tokens/typography/tokens';
+@use '../tokens/typography/scale';
+@use '../tokens/typography/tokens.core' as core;
 
 @forward '../tokens/typography/tokens';
 
@@ -15,7 +19,7 @@
 /// 
 /// Allows for providing an optional list of tokens to exclude from the output:
 /// ```scss
-/// @include style(title, [font-family font-size]);
+/// @include style(title, $exclude: [font-family font-size]);
 /// ```
 /// 
 @mixin style($style, $exclude: null) {
@@ -26,8 +30,7 @@
     line-height: _get-style-value($style, line-height),
     letter-spacing: _get-style-value($style, letter-spacing),
     text-transform: _get-style-value($style, text-transform),
-    text-decoration: _get-style-value($style, text-decoration),
-    color: _get-style-value($style, color)
+    text-decoration: _get-style-value($style, text-decoration)
   );
 
   -moz-osx-font-smoothing: grayscale;
@@ -40,14 +43,36 @@
   }
 }
 
+///
+/// Gets a CSS custom property declaration for a specific typography style token, with its token value as the fallback value.
+/// 
+@function variable($style, $token, $prefix: config.$prefix) {
+  @return _get-style-value($style, $token);
+}
+
+///
+/// Gets the value of a typography scale token.
+/// 
+@function scale($scale) {
+  @return #{scale.value($scale)}rem;
+}
+
+@mixin ellipse {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 ///
 /// Sets base typography styles.
 /// 
 @mixin base {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  font-family: map.get(tokens.$base, font-family);
-  color: map.get(tokens.$base, color);
+  font-family: core.get(font-family);
+  color: theme.variable(text-high);
+
+  @include style(body2);
 }
 
 ///
@@ -106,7 +131,7 @@
 /// ```
 /// 
 @function font-size-relative($scale) {
-  @return calc(#{map.get(tokens.$base, font-size)} * #{$scale});
+  @return calc(#{core.get(font-size)} * #{$scale});
 }
 
 @function _get-style-value($style, $token) {
diff --git a/src/lib/core/utils/utils.ts b/src/lib/core/utils/utils.ts
index b6a1c92b2..3776b9aa4 100644
--- a/src/lib/core/utils/utils.ts
+++ b/src/lib/core/utils/utils.ts
@@ -201,3 +201,19 @@ export function locateTargetHeuristic(element: HTMLElement, id?: string | null):
 
   return targetEl;
 }
+
+/**
+ * Replaces an existing element with a new element, while optionally moving the children of the old element into the new element.
+ * @param oldElement The element to replace.
+ * @param newElement The element to replace with.
+ * @param preserveChildren Whether or not to preserve the children of the old element in the new element.
+ * @returns The new element.
+ */
+export function replaceElement(oldElement: HTMLElement, newElement: HTMLElement, preserveChildren = true): HTMLElement {
+  if (preserveChildren) {
+    newElement.append(...oldElement.childNodes);
+  }
+  oldElement.insertAdjacentElement('beforebegin', newElement);
+  oldElement.remove();
+  return newElement;
+}
diff --git a/src/lib/date-picker/base/base-date-picker-foundation.ts b/src/lib/date-picker/base/base-date-picker-foundation.ts
index 5091f3498..562bda407 100644
--- a/src/lib/date-picker/base/base-date-picker-foundation.ts
+++ b/src/lib/date-picker/base/base-date-picker-foundation.ts
@@ -167,11 +167,11 @@ export abstract class BaseDatePickerFoundation<TAdapter extends IBaseDatePickerA
   }
 
   protected _onInputFocus(evt: FocusEvent): void {
-    this._adapter.selectInputText();
-
     if (this.masked && this.showMaskFormat) {
       this._applyMask();
     }
+
+    this._adapter.selectInputText();
   }
   
   protected _onInputBlur(evt: FocusEvent): void {
diff --git a/src/lib/date-picker/build.json b/src/lib/date-picker/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/date-picker/build.json
+++ b/src/lib/date-picker/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/date-range-picker/build.json b/src/lib/date-range-picker/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/date-range-picker/build.json
+++ b/src/lib/date-range-picker/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/date-range-picker/date-range-picker-foundation.ts b/src/lib/date-range-picker/date-range-picker-foundation.ts
index c681b2f5c..6e5bfa309 100644
--- a/src/lib/date-range-picker/date-range-picker-foundation.ts
+++ b/src/lib/date-range-picker/date-range-picker-foundation.ts
@@ -315,11 +315,11 @@ export class DateRangePickerFoundation extends BaseDatePickerFoundation<IDateRan
   }
 
   private _onToInputFocus(): void {
-    this._adapter.selectToInputText();
     if (this.masked && this._showMaskFormat) {
       this._initializeMask();
       this._initializeToMask();
     }
+    this._adapter.selectToInputText();
   }
 
   private _onToInputBlur(evt: FocusEvent): void {
@@ -336,11 +336,11 @@ export class DateRangePickerFoundation extends BaseDatePickerFoundation<IDateRan
   }
 
   protected override _onInputFocus(evt: FocusEvent): void {
-    this._adapter.selectInputText();
     if (this.masked && this._showMaskFormat) {
       this._initializeMask();
       this._initializeToMask();
     }
+    this._adapter.selectInputText();
   }
 
   protected override _onInputBlur(evt: FocusEvent): void {
diff --git a/src/lib/dialog/build.json b/src/lib/dialog/build.json
index a57f446bc..6cbb4c23d 100644
--- a/src/lib/dialog/build.json
+++ b/src/lib/dialog/build.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json",
   "stylesheets": [
     "./forge-dialog.scss",
diff --git a/src/lib/divider/build.json b/src/lib/divider/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/divider/build.json
+++ b/src/lib/divider/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/drawer/build.json b/src/lib/drawer/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/drawer/build.json
+++ b/src/lib/drawer/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/expansion-panel/build.json b/src/lib/expansion-panel/build.json
index df0812ccf..f14c8e6dc 100644
--- a/src/lib/expansion-panel/build.json
+++ b/src/lib/expansion-panel/build.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json",
   "stylesheets": [
     "./forge-expansion-panel.scss"
diff --git a/src/lib/expansion-panel/expansion-panel-adapter.ts b/src/lib/expansion-panel/expansion-panel-adapter.ts
index 0eb048c4e..c6377fb9e 100644
--- a/src/lib/expansion-panel/expansion-panel-adapter.ts
+++ b/src/lib/expansion-panel/expansion-panel-adapter.ts
@@ -20,6 +20,7 @@ export class ExpansionPanelAdapter extends BaseAdapter<IExpansionPanelComponent>
   private _headerElement: HTMLElement;
   private _contentElement: HTMLElement;
   private _headerSlotElement: HTMLSlotElement;
+  private _activeAnimationFrame: number | undefined;
 
   constructor(component: IExpansionPanelComponent) {
     super(component);
@@ -114,8 +115,9 @@ export class ExpansionPanelAdapter extends BaseAdapter<IExpansionPanelComponent>
         this._contentElement.style.transition = EXPANSION_PANEL_CONSTANTS.strings.EXPANSION_VERTICAL_TRANSITION;
       }
 
-      window.requestAnimationFrame(() => {
-        window.requestAnimationFrame(() => {
+      this._activeAnimationFrame = window.requestAnimationFrame(() => {
+        this._activeAnimationFrame = window.requestAnimationFrame(() => {
+          this._activeAnimationFrame = undefined;
           if (opening) {
             if (orientation === EXPANSION_PANEL_CONSTANTS.strings.ORIENTATION_HORIZONTAL) {
               this._contentElement.style.width = `${this._contentElement.scrollWidth}px`;
@@ -142,6 +144,11 @@ export class ExpansionPanelAdapter extends BaseAdapter<IExpansionPanelComponent>
         });
       });
     } else {
+      if (this._activeAnimationFrame) {
+        window.cancelAnimationFrame(this._activeAnimationFrame);
+        this._activeAnimationFrame = undefined;
+      }
+
       this._contentElement.style.removeProperty('transition');
       if (opening) {
         if (orientation === EXPANSION_PANEL_CONSTANTS.strings.ORIENTATION_HORIZONTAL) {
diff --git a/src/lib/field/build.json b/src/lib/field/build.json
index 557a83521..c7b43e317 100644
--- a/src/lib/field/build.json
+++ b/src/lib/field/build.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json",
   "include": false
 }
\ No newline at end of file
diff --git a/src/lib/field/field-foundation.ts b/src/lib/field/field-foundation.ts
index 64dfbd8f3..00e9f89b2 100644
--- a/src/lib/field/field-foundation.ts
+++ b/src/lib/field/field-foundation.ts
@@ -115,11 +115,17 @@ export class FieldFoundation {
   }
   public set density(value: FieldDensityType) {
     if (this._density !== value) {
+      const prevDensity = this._density;
       this._density = value;
 
       if (this._isInitialized) {
         this._applyDensity();
-        this._initializeLabel();
+
+        if (this._density === 'dense') {
+          this._destroyFloatingLabel({ cancelFloat: true });
+        } else if (prevDensity === 'dense') {
+          this._initializeLabel();
+        }
       }
 
       this._adapter.setHostAttribute(FIELD_CONSTANTS.attributes.DENSITY, this._density.toString());
@@ -236,22 +242,26 @@ export class FieldFoundation {
   }
 
   protected _initializeLabel(): void {
-    if (this._floatingLabel) {
-      this._floatingLabel.destroy();
-    }
+    this._floatingLabel?.destroy();
     this._adapter.detectLabel();
+    
     if (this._adapter.hasLabel() && this._density !== 'dense') {
       this._floatingLabel = this._adapter.initializeFloatingLabel();
       this._adapter.ensureLabelOrder();
       this.floatLabel(this._floatLabelType === 'always' || this._adapter.fieldHasValue() || this._adapter.hasPlaceholder());
       this._adapter.setRootClass(FIELD_CONSTANTS.classes.LABEL);
     } else {
-      this._adapter.removeHostAttribute(FIELD_CONSTANTS.attributes.HOST_LABEL_FLOATING);
-      this._adapter.removeRootClass(FIELD_CONSTANTS.classes.LABEL);
-      this._floatingLabel = undefined;
+      this._destroyFloatingLabel();
     }
   }
 
+  private _destroyFloatingLabel({ cancelFloat = false } = {}): void {
+    this._adapter.removeHostAttribute(FIELD_CONSTANTS.attributes.HOST_LABEL_FLOATING);
+    this._adapter.removeRootClass(FIELD_CONSTANTS.classes.LABEL);
+    this._floatingLabel?.destroy({ cancelFloat });
+    this._floatingLabel = undefined;
+  }
+
   protected _detectLeadingContent(): void {
     if (this._adapter.hasLeadingNodes()) {
       this._adapter.setRootClass(FIELD_CONSTANTS.classes.LEADING);
diff --git a/src/lib/file-picker/build.json b/src/lib/file-picker/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/file-picker/build.json
+++ b/src/lib/file-picker/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/floating-action-button/build.json b/src/lib/floating-action-button/build.json
index b4b520e41..07dee431d 100644
--- a/src/lib/floating-action-button/build.json
+++ b/src/lib/floating-action-button/build.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json",
   "stylesheets": [
     "./forge-floating-action-button.scss"
diff --git a/src/lib/floating-label/build.json b/src/lib/floating-label/build.json
index d3ad5ce1d..63758c536 100644
--- a/src/lib/floating-label/build.json
+++ b/src/lib/floating-label/build.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json",
   "compile": false,
   "stylesheets": [
diff --git a/src/lib/floating-label/floating-label-foundation.ts b/src/lib/floating-label/floating-label-foundation.ts
index a4d257fdb..1a889dfbe 100644
--- a/src/lib/floating-label/floating-label-foundation.ts
+++ b/src/lib/floating-label/floating-label-foundation.ts
@@ -4,6 +4,7 @@ import { Platform } from '@tylertech/forge-core';
 
 export class FloatingLabelFoundation {
   private _floatAnimationEndHandler: () => void;
+  private _activeFrame: number | undefined;
 
   constructor(protected _adapter: IFloatingLabelAdapter) {
     this._floatAnimationEndHandler = () => this._handleFloatAnimationEnd();
@@ -19,11 +20,16 @@ export class FloatingLabelFoundation {
     }
   }
 
-  public disconnect(): void {
+  public disconnect({ cancelFloat = false } = {}): void {
+    if (cancelFloat && this._activeFrame) {
+      window.cancelAnimationFrame(this._activeFrame);
+    }
+
     this._adapter.removeLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOATING_LABEL);
     this._adapter.removeLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE);
     this._adapter.removeLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE_END_KEYFRAME);
     this._adapter.removeLabelClass(FLOATING_LABEL_CONSTANTS.classes.UNFLOAT_ABOVE_START_KEYFRAME);
+
     if (this._floatAnimationEndHandler) {
       this._adapter.removeLabelListener('transitionend', this._floatAnimationEndHandler);
     }
@@ -34,9 +40,9 @@ export class FloatingLabelFoundation {
       if (this._adapter.hasLabelClass(FLOATING_LABEL_CONSTANTS.classes.UNFLOAT_ABOVE_START_KEYFRAME)) {
         this._adapter.removeLabelClass(FLOATING_LABEL_CONSTANTS.classes.UNFLOAT_ABOVE_START_KEYFRAME);
       }
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          if (alwaysFloat || this._adapter.hasLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE)) {
+      this._activeFrame = window.requestAnimationFrame(() => {
+        this._activeFrame = window.requestAnimationFrame(() => {
+          if (alwaysFloat || this.isFloating) {
             this._adapter.addLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE_END_KEYFRAME);
           }
           this._adapter.addLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE);
@@ -47,8 +53,9 @@ export class FloatingLabelFoundation {
       if (this._adapter.hasLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE_END_KEYFRAME)) {
         this._adapter.removeLabelClass(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE_END_KEYFRAME);
         this._adapter.addLabelClass(FLOATING_LABEL_CONSTANTS.classes.UNFLOAT_ABOVE_START_KEYFRAME);
-        requestAnimationFrame(() => {
-          requestAnimationFrame(() => {
+        
+        this._activeFrame = window.requestAnimationFrame(() => {
+          this._activeFrame = window.requestAnimationFrame(() => {
             this._adapter.removeLabelClass(FLOATING_LABEL_CONSTANTS.classes.UNFLOAT_ABOVE_START_KEYFRAME);
           });
         });
diff --git a/src/lib/floating-label/floating-label.ts b/src/lib/floating-label/floating-label.ts
index 818cfb501..fd3ead301 100644
--- a/src/lib/floating-label/floating-label.ts
+++ b/src/lib/floating-label/floating-label.ts
@@ -5,7 +5,7 @@ export interface IFloatingLabel {
   isFloating: boolean;
   float(float: boolean, alwaysFloat?: boolean): void;
   getWidth(): number;
-  destroy(): void;
+  destroy(opts?: { cancelFloat?: boolean }): void;
 }
 
 export class FloatingLabel implements IFloatingLabel {
@@ -21,8 +21,8 @@ export class FloatingLabel implements IFloatingLabel {
     return this._foundation.isFloating;
   }
 
-  public destroy(): void {
-    this._foundation.disconnect();
+  public destroy({ cancelFloat = false } = {}): void {
+    this._foundation.disconnect({ cancelFloat });
     this._labelElement = undefined as any;
   }
 
diff --git a/src/lib/focus-indicator/build.json b/src/lib/focus-indicator/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/focus-indicator/build.json
+++ b/src/lib/focus-indicator/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/focus-indicator/focus-indicator-foundation.ts b/src/lib/focus-indicator/focus-indicator-foundation.ts
index e0024bc94..65a274b17 100644
--- a/src/lib/focus-indicator/focus-indicator-foundation.ts
+++ b/src/lib/focus-indicator/focus-indicator-foundation.ts
@@ -32,8 +32,8 @@ export class FocusIndicatorFoundation implements IFocusIndicatorFoundation {
   }
 
   public destroy(): void {
+    this._removeListeners(); // Must be called before destroying adapter
     this._adapter.destroy();
-    this._removeListeners();
   }
 
   private _addListeners(): void {
diff --git a/src/lib/form-field/build.json b/src/lib/form-field/build.json
index 4eb6576ef..58c037e26 100644
--- a/src/lib/form-field/build.json
+++ b/src/lib/form-field/build.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json",
   "compile": false,
   "stylesheets": [
diff --git a/src/lib/icon-button/build.json b/src/lib/icon-button/build.json
index 917560ca6..97cb49a08 100644
--- a/src/lib/icon-button/build.json
+++ b/src/lib/icon-button/build.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json",
   "stylesheets": [
     "./forge-icon-button.scss"
diff --git a/src/lib/icon/build.json b/src/lib/icon/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/icon/build.json
+++ b/src/lib/icon/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/icon/icon-adapter.ts b/src/lib/icon/icon-adapter.ts
index c4e2cf5df..34e7108a8 100644
--- a/src/lib/icon/icon-adapter.ts
+++ b/src/lib/icon/icon-adapter.ts
@@ -3,7 +3,6 @@ import { BaseAdapter, IBaseAdapter } from '../core';
 import { ICON_CONSTANTS } from './icon-constants';
 
 export interface IIconAdapter extends IBaseAdapter {
-  initialize(): void;
   canLazyLoad(): boolean;
   observeVisibility(listener: () => void): void;
   destroyVisibilityObserver(): void;
@@ -17,12 +16,6 @@ export class IconAdapter extends BaseAdapter<IIconComponent> implements IIconAda
     super(component);
   }
 
-  public initialize(): void {
-    if (!this._component.hasAttribute('aria-hidden')) {
-      this._component.setAttribute('aria-hidden', 'true');
-    }
-  }
-
   public canLazyLoad(): boolean {
     return !!window.IntersectionObserver;
   }
@@ -48,6 +41,9 @@ export class IconAdapter extends BaseAdapter<IIconComponent> implements IIconAda
     const shadowRoot = this._component.shadowRoot as ShadowRoot;
     const styleTag = shadowRoot.querySelector('style');
     shadowRoot.innerHTML = content;
+    if (content) {
+      shadowRoot.firstElementChild?.setAttribute('aria-hidden', 'true');
+    }
     if (styleTag) {
       shadowRoot.appendChild(styleTag);
     }
diff --git a/src/lib/icon/icon-foundation.ts b/src/lib/icon/icon-foundation.ts
index e1b58538a..f68d34334 100644
--- a/src/lib/icon/icon-foundation.ts
+++ b/src/lib/icon/icon-foundation.ts
@@ -31,7 +31,6 @@ export class IconFoundation implements IIconFoundation {
   }
 
   public initialize(): void {
-    this._adapter.initialize();
     this._applyIcon();
   }
 
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 85094b987..dc67a617c 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -2,7 +2,7 @@
 
 /**
  * @license
- * Copyright (c) 2022 Tyler Technologies, Inc.
+ * Copyright (c) 2024 Tyler Technologies, Inc.
  * License: Apache-2.0
  */
 
@@ -78,6 +78,7 @@ import { ViewComponent, ViewSwitcherComponent } from './view-switcher';
 import { IconComponent } from './icon';
 import { SelectDropdownComponent } from './select/select-dropdown';
 import { StackComponent } from './stack';
+import { ButtonAreaComponent } from './button-area';
 
 export * from './accordion';
 export * from './app-bar';
@@ -89,6 +90,7 @@ export * from './banner';
 export * from './bottom-sheet';
 export * from './busy-indicator';
 export * from './button';
+export * from './button-area';
 export * from './button-toggle';
 export * from './calendar';
 export * from './card';
@@ -155,6 +157,7 @@ const CUSTOM_ELEMENTS = [
   BottomSheetComponent,
   BusyIndicatorComponent,
   ButtonComponent,
+  ButtonAreaComponent,
   ButtonToggleComponent,
   ButtonToggleGroupComponent,
   CalendarComponent,
diff --git a/src/lib/inline-message/build.json b/src/lib/inline-message/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/inline-message/build.json
+++ b/src/lib/inline-message/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/keyboard-shortcut/build.json b/src/lib/keyboard-shortcut/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/keyboard-shortcut/build.json
+++ b/src/lib/keyboard-shortcut/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/keyboard-shortcut/keyboard-shortcut-constants.ts b/src/lib/keyboard-shortcut/keyboard-shortcut-constants.ts
index bea0f1a02..2a827cf8b 100644
--- a/src/lib/keyboard-shortcut/keyboard-shortcut-constants.ts
+++ b/src/lib/keyboard-shortcut/keyboard-shortcut-constants.ts
@@ -44,6 +44,8 @@ export const textInputTypes = [
   'week'
 ];
 
+export type KeyboardShortcutActivateCallback = (event: KeyboardEvent) => void;
+
 export interface IKeyCombination {
   key: string;
   modifier?: string;
diff --git a/src/lib/keyboard-shortcut/keyboard-shortcut-foundation.ts b/src/lib/keyboard-shortcut/keyboard-shortcut-foundation.ts
index 0e53d4d15..9e1311e52 100644
--- a/src/lib/keyboard-shortcut/keyboard-shortcut-foundation.ts
+++ b/src/lib/keyboard-shortcut/keyboard-shortcut-foundation.ts
@@ -1,7 +1,7 @@
 import { ICustomElementFoundation } from '@tylertech/forge-core';
 
 import { IKeyboardShortcutAdapter } from './keyboard-shortcut-adapter';
-import { IKeyCombination, KEYBOARD_SHORTCUT_CONSTANTS } from './keyboard-shortcut-constants';
+import { IKeyCombination, KEYBOARD_SHORTCUT_CONSTANTS, KeyboardShortcutActivateCallback } from './keyboard-shortcut-constants';
 import { elementAcceptsTextInput, matchKeyCombination, parseKeyCombinations } from './keyboard-shortcut-utils';
 
 export interface IKeyboardShortcutFoundation extends ICustomElementFoundation {
@@ -13,6 +13,7 @@ export interface IKeyboardShortcutFoundation extends ICustomElementFoundation {
   capture: boolean;
   useCode: boolean;
   disabled: boolean;
+  activateCallback: KeyboardShortcutActivateCallback | null | undefined;
 }
 
 export class KeyboardShortcutFoundation implements IKeyboardShortcutFoundation {
@@ -24,6 +25,7 @@ export class KeyboardShortcutFoundation implements IKeyboardShortcutFoundation {
   private _capture = false;
   private _useCode = false;
   private _disabled = false;
+  private _activateCallback: KeyboardShortcutActivateCallback | null | undefined;
   private _keyCombinations: IKeyCombination[];
   private _keyDownListener: (evt: KeyboardEvent) => void;
   
@@ -82,6 +84,7 @@ export class KeyboardShortcutFoundation implements IKeyboardShortcutFoundation {
         evt.preventDefault();
       }
       this._adapter.emitHostEvent(KEYBOARD_SHORTCUT_CONSTANTS.events.ACTIVATE, evt);
+      this._activateCallback?.call(null, evt);
     }
   }
 
@@ -194,4 +197,12 @@ export class KeyboardShortcutFoundation implements IKeyboardShortcutFoundation {
       }
     }
   }
+
+  /** Gets/sets the activation callback. */
+  public get activateCallback(): KeyboardShortcutActivateCallback | null | undefined {
+    return this._activateCallback;
+  }
+  public set activateCallback(value: KeyboardShortcutActivateCallback | null | undefined) {
+    this._activateCallback = value;
+  }
 }
diff --git a/src/lib/keyboard-shortcut/keyboard-shortcut.ts b/src/lib/keyboard-shortcut/keyboard-shortcut.ts
index 17255523b..21798b2ee 100644
--- a/src/lib/keyboard-shortcut/keyboard-shortcut.ts
+++ b/src/lib/keyboard-shortcut/keyboard-shortcut.ts
@@ -2,7 +2,7 @@ import { coerceBoolean, CustomElement, FoundationProperty } from '@tylertech/for
 
 import { KeyboardShortcutAdapter } from './keyboard-shortcut-adapter';
 import { KeyboardShortcutFoundation } from './keyboard-shortcut-foundation';
-import { KEYBOARD_SHORTCUT_CONSTANTS } from './keyboard-shortcut-constants';
+import { KEYBOARD_SHORTCUT_CONSTANTS, KeyboardShortcutActivateCallback } from './keyboard-shortcut-constants';
 import { BaseComponent, IBaseComponent } from '../core/base/base-component';
 
 export interface IKeyboardShortcutComponent extends IBaseComponent {
@@ -15,6 +15,7 @@ export interface IKeyboardShortcutComponent extends IBaseComponent {
   capture: boolean;
   useCode: boolean;
   disabled: boolean;
+  activateCallback: KeyboardShortcutActivateCallback | null | undefined;
 }
 
 declare global {
@@ -133,4 +134,8 @@ export class KeyboardShortcutComponent extends BaseComponent implements IKeyboar
   /** Gets/sets whether the callback will be called. */
   @FoundationProperty()
   public declare disabled: boolean;
+
+  /** Gets/sets whether the activation callback. */
+  @FoundationProperty()
+  public declare activateCallback: KeyboardShortcutActivateCallback | null | undefined;
 }
diff --git a/src/lib/label-value/build.json b/src/lib/label-value/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/label-value/build.json
+++ b/src/lib/label-value/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/linear-progress/build.json b/src/lib/linear-progress/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/linear-progress/build.json
+++ b/src/lib/linear-progress/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/list-dropdown/build.json b/src/lib/list-dropdown/build.json
index 4bf3cb335..417901368 100644
--- a/src/lib/list-dropdown/build.json
+++ b/src/lib/list-dropdown/build.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json",
   "include": false
 }
diff --git a/src/lib/list-dropdown/list-dropdown-adapter.ts b/src/lib/list-dropdown/list-dropdown-adapter.ts
index ba63837ea..930d34388 100644
--- a/src/lib/list-dropdown/list-dropdown-adapter.ts
+++ b/src/lib/list-dropdown/list-dropdown-adapter.ts
@@ -2,7 +2,7 @@ import { IListDropdownOption, IListDropdownOpenConfig, IListDropdownOptionGroup,
 import { createDropdown, createList, createListItems, createAsyncElement, createBusyElement, createCheckboxElement } from './list-dropdown-utils';
 import { IPopupComponent, POPUP_CONSTANTS } from '../popup';
 import { IListComponent } from '../list/list';
-import { LIST_ITEM_CONSTANTS, IListItemComponent, IListItemSelectEventData } from '../list/list-item';
+import { LIST_ITEM_CONSTANTS, IListItemComponent } from '../list/list-item';
 import { ScrollEvents, getShadowElement, IScrollObserverConfiguration, ScrollAxisObserver, removeAllChildren, isFunction, removeElement, replaceElement, createVisuallyHiddenElement, isDeepEqual, tryScrollIntoView } from '@tylertech/forge-core';
 import { ILinearProgressComponent } from '../linear-progress';
 import { ICON_CONSTANTS, IIconComponent } from '../icon';
@@ -304,9 +304,7 @@ export class ListDropdownAdapter implements IListDropdownAdapter {
     const listItems = this._getListItemElements();
     if (listItems.length) {
       const activeItems = listItems.filter(li => li !== listItem && li.active);
-      if (activeItems.length) {
-        activeItems.forEach(ai => ai.active = false);
-      }
+      activeItems.forEach(ai => ai.active = false);
     }
 
     // Now we can toggle the selected state and sync the active state
@@ -314,10 +312,6 @@ export class ListDropdownAdapter implements IListDropdownAdapter {
     listItem.setAttribute('aria-selected', `${isSelected}`);
     listItem.setAttribute('aria-checked', `${isSelected}`);
 
-    if (isSelected) {
-      listItem.active = true;
-    }
-
     // Toggle the checkbox icon based on the selected state
     const checkboxElement = listItem.querySelector(`${ICON_CONSTANTS.elementName}[slot=leading]`) as IIconComponent;
     if (checkboxElement) {
diff --git a/src/lib/list-dropdown/list-dropdown-constants.ts b/src/lib/list-dropdown/list-dropdown-constants.ts
index c3bc216f1..dd771e1f4 100644
--- a/src/lib/list-dropdown/list-dropdown-constants.ts
+++ b/src/lib/list-dropdown/list-dropdown-constants.ts
@@ -1,3 +1,4 @@
+import { IconExternalType, IIconComponent } from '../icon';
 import { IPopupPosition, PopupPlacement } from '../popup';
 
 const attributes = {
@@ -33,15 +34,18 @@ export type ListDropdownIconType = 'font' | 'component';
 export interface IBaseListDropdownOption<T = any> {
   value: T;
   label: string;
+  secondaryLabel?: string;
   disabled?: boolean;
   divider?: boolean;
   optionClass?: string | string[];
   leadingIcon?: string;
   leadingIconClass?: string;
   leadingIconType?: ListDropdownIconType;
+  leadingIconComponentProps?: Partial<IIconComponent>;
   trailingIcon?: string;
   trailingIconClass?: string;
   trailingIconType?: ListDropdownIconType;
+  trailingIconComponentProps?: Partial<IIconComponent>;
   leadingBuilder?: () => HTMLElement;
   trailingBuilder?: () => HTMLElement;
 }
diff --git a/src/lib/list-dropdown/list-dropdown-utils.ts b/src/lib/list-dropdown/list-dropdown-utils.ts
index b94f3257e..21630ebac 100644
--- a/src/lib/list-dropdown/list-dropdown-utils.ts
+++ b/src/lib/list-dropdown/list-dropdown-utils.ts
@@ -1,6 +1,7 @@
 import { addClass, getEventPath, isDeepEqual, isDefined, isObject } from '@tylertech/forge-core';
 import { tylIconCheckBox, tylIconCheckBoxOutlineBlank } from '@tylertech/tyler-icons/standard';
 import { ICON_CLASS_NAME } from '../constants';
+import { IIconComponent } from '../icon';
 import { ILinearProgressComponent, LINEAR_PROGRESS_CONSTANTS } from '../linear-progress';
 import { IListComponent, LIST_CONSTANTS } from '../list/list';
 import { IPopupComponent, PopupAnimationType, POPUP_CONSTANTS } from '../popup';
@@ -34,16 +35,6 @@ export function createDropdown(config: IListDropdownOpenConfig, targetElement: H
     }
   });
 
-  // Set roles and other attributes based on our type
-  switch (config.type) {
-    case ListDropdownType.Menu:
-      dropdownElement.setAttribute('role', 'menu');
-      dropdownElement.setAttribute('aria-orientation', 'vertical');
-      break;
-    default:
-      dropdownElement.setAttribute('role', 'listbox');
-  }
-
   if (config.id) {
     dropdownElement.id = dropdownId;
   }
@@ -91,6 +82,17 @@ export function createList(config: IListDropdownOpenConfig): IListComponent {
   const listElement = document.createElement(LIST_CONSTANTS.elementName) as IListComponent;
   listElement.id = `list-dropdown-list-${config.id}`;
   listElement.propagateClick = false;
+
+  // Set roles and other attributes based on our type
+  switch (config.type) {
+    case ListDropdownType.Menu:
+      listElement.setAttribute('role', 'menu');
+      listElement.setAttribute('aria-orientation', 'vertical');
+      break;
+    default:
+      listElement.setAttribute('role', 'listbox');
+  }
+
   return listElement;
 }
 
@@ -172,7 +174,6 @@ export function createListItems(config: IListDropdownOpenConfig, listElement: IL
       let listItemElement = document.createElement('forge-list-item');
       listItemElement.value = option.value;
       listItemElement.id = `list-dropdown-option-${config.id}-${optionIdIndex++}`;
-      listItemElement.style.cursor = 'pointer';
 
       if (config.wrapOptionText) {
         listItemElement.wrap = true;
@@ -183,17 +184,6 @@ export function createListItems(config: IListDropdownOpenConfig, listElement: IL
         addClass(option.optionClass, listItemElement);
       }
 
-      // Set role based on type
-      switch (config.type) {
-        case ListDropdownType.Menu:
-          listItemElement.setAttribute('role', 'menuitem');
-          break;
-        case ListDropdownType.None:
-          break;
-        default:
-          listItemElement.setAttribute('role', 'option');
-      }
-
       if (config.dense) {
         listItemElement.dense = true;
       }
@@ -221,6 +211,15 @@ export function createListItems(config: IListDropdownOpenConfig, listElement: IL
         }
       }
 
+      // Check for secondary (subtitle) text
+      if (option.secondaryLabel) {
+        const secondaryLabelElement = document.createElement('span');
+        secondaryLabelElement.slot = 'subtitle';
+        secondaryLabelElement.textContent = option.secondaryLabel;
+        listItemElement.twoLine = true;
+        listItemElement.appendChild(secondaryLabelElement);
+      }
+
       // If multiple selections are enabled then we need to create and append a leading checkbox element
       if (config.multiple) {
         const checkboxElement = createCheckboxElement(isSelected);
@@ -243,7 +242,7 @@ export function createListItems(config: IListDropdownOpenConfig, listElement: IL
           listItemElement.appendChild(element);
         }
       } else if (option.leadingIcon) {
-        const leadingIconElement = createIconElement(option.leadingIconType, option.leadingIcon, option.leadingIconClass || config.iconClass);
+        const leadingIconElement = createIconElement(option.leadingIconType, option.leadingIcon, option.leadingIconClass || config.iconClass, option.leadingIconComponentProps);
         leadingIconElement.slot = 'leading';
         listItemElement.appendChild(leadingIconElement);
       }
@@ -256,7 +255,7 @@ export function createListItems(config: IListDropdownOpenConfig, listElement: IL
           listItemElement.appendChild(element);
         }
       } else if (option.trailingIcon) {
-        const trailingIconElement = createIconElement(option.trailingIconType, option.trailingIcon, option.trailingIconClass || config.iconClass);
+        const trailingIconElement = createIconElement(option.trailingIconType, option.trailingIcon, option.trailingIconClass || config.iconClass, option.trailingIconComponentProps);
         trailingIconElement.slot = 'trailing';
         listItemElement.appendChild(trailingIconElement);
       }
@@ -266,7 +265,6 @@ export function createListItems(config: IListDropdownOpenConfig, listElement: IL
         listItemElement.disabled = option.disabled;
         listItemElement.setAttribute('aria-disabled', 'true');
       } else {
-        listItemElement.style.cursor = 'pointer';
         listItemElement.setAttribute('aria-disabled', 'false');
       }
 
@@ -318,7 +316,7 @@ function createDivider(): HTMLElement {
   return divider;
 }
 
-function createIconElement(type: ListDropdownIconType = 'font', iconName: string, iconClass?: string): HTMLElement {
+function createIconElement(type: ListDropdownIconType = 'font', iconName: string, iconClass?: string, componentProps?: Partial<IIconComponent>): HTMLElement {
   if (type === 'component') {
     const icon = document.createElement('forge-icon');
     if (iconClass) {
@@ -326,6 +324,9 @@ function createIconElement(type: ListDropdownIconType = 'font', iconName: string
     }
     icon.setAttribute('aria-hidden', 'true');
     icon.name = iconName;
+    if (componentProps) {
+      Object.assign(icon, componentProps);
+    }
     return icon;
   }
 
diff --git a/src/lib/list/list-item/_configuration.scss b/src/lib/list/list-item/_configuration.scss
new file mode 100644
index 000000000..f1a605f54
--- /dev/null
+++ b/src/lib/list/list-item/_configuration.scss
@@ -0,0 +1,67 @@
+@use '../../core/styles/tokens/list/list-item/tokens';
+
+@mixin host {
+  --_indent: #{tokens.get(indent)};
+  --_dense-indent: #{tokens.get(dense-indent)};
+}
+
+@mixin configuration {
+  // Base
+  --_background-color: #{tokens.get(background-color)};
+  --_shape: #{tokens.get(shape)};
+  --_padding: #{tokens.get(padding)};
+  --_margin: #{tokens.get(margin)};
+  --_height: #{tokens.get(height)};
+  --_dense-height: #{tokens.get(dense-height)};
+  --_cursor: #{tokens.get(cursor)};
+
+  // Supporting text
+  --_supporting-text-color: #{tokens.get(supporting-text-color)};
+  --_supporting-text-font-size: #{tokens.get(supporting-text-font-size)};
+  --_supporting-text-font-weight: #{tokens.get(supporting-text-font-weight)};
+  --_supporting-text-line-height: #{tokens.get(supporting-text-line-height)};
+
+  // Selected
+  --_selected-color: #{tokens.get(selected-color)};
+  --_selected-opacity: #{tokens.get(selected-opacity)};
+  --_selected-leading-color: #{tokens.get(selected-leading-color)};
+  --_selected-trailing-color: #{tokens.get(selected-trailing-color)};
+  --_selected-supporting-text-color: #{tokens.get(selected-supporting-text-color)};
+
+  // Disabled
+  --_disabled-opacity: #{tokens.get(disabled-opacity)};
+  --_disabled-cursor: #{tokens.get(disabled-cursor)};
+
+  // Line variants
+  --_one-line-height: #{tokens.get(one-line-height)};
+  --_two-line-height: #{tokens.get(two-line-height)};
+  --_three-line-height: #{tokens.get(three-line-height)};
+
+  // Dense
+  --_dense-one-line-height: #{tokens.get(dense-one-line-height)};
+  --_dense-two-line-height: #{tokens.get(dense-two-line-height)};
+  --_dense-three-line-height: #{tokens.get(dense-three-line-height)};
+  --_dense-font-size: #{tokens.get(dense-font-size)};
+
+  // Dense leading/trailing
+  --_dense-leading-margin-end: #{tokens.get(dense-leading-margin-end)};
+  --_dense-trailing-margin-start: #{tokens.get(dense-trailing-margin-start)};
+
+  // Leading
+  --_leading-margin-start: #{tokens.get(leading-margin-start)};
+  --_leading-margin-end: #{tokens.get(leading-margin-end)};
+  --_leading-selected-color: #{tokens.get(leading-selected-color)};
+
+  // Trailing
+  --_trailing-margin-start: #{tokens.get(trailing-margin-start)};
+  --_trailing-margin-end: #{tokens.get(trailing-margin-end)};
+  --_trailing-selected-color: #{tokens.get(trailing-selected-color)};
+
+  // Avatar
+  --_avatar-background-color: #{tokens.get(avatar-background-color)};
+  --_avatar-color: #{tokens.get(avatar-color)};
+  --_avatar-shape: #{tokens.get(avatar-shape)};
+  --_avatar-margin-start: #{tokens.get(avatar-margin-start)};
+  --_avatar-margin-end: #{tokens.get(avatar-margin-end)};
+  --_avatar-size: #{tokens.get(avatar-size)};
+}
diff --git a/src/lib/list/list-item/_core.scss b/src/lib/list/list-item/_core.scss
new file mode 100644
index 000000000..ab462ce05
--- /dev/null
+++ b/src/lib/list/list-item/_core.scss
@@ -0,0 +1,195 @@
+@use '../../core/styles/utils';
+@use '../../core/styles/typography';
+@use '../../core/styles/tokens/list/list-item/tokens';
+
+@mixin provide-theme($theme) {
+  @include utils.provide(tokens.$tokens, $theme, list-item);
+}
+
+@mixin container {
+  display: block;
+  outline: none;
+}
+
+@mixin base {
+  position: relative;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  outline: none;
+  text-decoration: none;
+  background-color: var(--_background-color);
+  border-radius: var(--_shape);
+  -webkit-tap-highlight-color: transparent;
+  height: var(--_height);
+  min-height: var(--_height);
+  padding: var(--_padding);
+  margin: var(--_margin);
+  cursor: var(--_cursor);
+}
+
+@mixin anchor-link {
+  color: inherit;
+}
+
+@mixin text-container {
+  @include typography.style(body2, $exclude: [font-size font-weight line-height]);
+  @include typography.ellipse;
+
+  box-sizing: border-box;
+  font-size: var(--_supporting-text-font-size);
+  font-weight: var(--_supporting-text-font-weight);
+  line-height: var(--_supporting-text-line-height);
+  flex: 1;
+}
+
+@mixin selected {
+  color: var(--_selected-color);
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    opacity: var(--_selected-opacity);
+    background-color: var(--_selected-color);
+  }
+}
+
+@mixin leading-selected {
+  color: var(--_leading-selected-color);
+}
+
+@mixin trailing-selected {
+  color: var(--_trailing-selected-color);
+}
+
+@mixin text-container-selected {
+  color: var(--_selected-color);
+}
+
+@mixin leading-trailing-selected {
+  color: var(--_selected-color);
+}
+
+@mixin supporting-text {
+  @include typography.style(body1);
+  @include typography.ellipse;
+
+  color: var(--_supporting-text-color);
+  display: block;
+}
+
+@mixin supporting-text-selected {
+  color: var(--_selected-supporting-text-color);
+}
+
+@mixin two-line {
+  height: var(--_two-line-height);
+  min-height: var(--_two-line-height);
+}
+
+@mixin three-line {
+  height: var(--_three-line-height);
+  min-height: var(--_three-line-height);
+}
+
+@mixin dense {
+  height: var(--_dense-one-line-height);
+  min-height: var(--_dense-one-line-height);
+}
+
+@mixin dense-text {
+  font-size: var(--_dense-font-size);
+}
+
+@mixin dense-two-line {
+  height: var(--_dense-two-line-height);
+  min-height: var(--_dense-two-line-height);
+}
+
+@mixin dense-three-line {
+  height: var(--_dense-three-line-height);
+  min-height: var(--_dense-three-line-height);
+}
+
+@mixin indented {
+  margin-inline-start: var(--_indent);
+}
+
+@mixin dense-indented {
+  margin-inline-start: var(--_dense-indent);
+}
+
+@mixin avatar {
+  background-color: var(--_avatar-background-color);
+  color: var(--_avatar-color);
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  fill: currentColor;
+  margin-inline-start: var(--_avatar-margin-start);
+  margin-inline-end: var(--_avatar-margin-end);
+  min-width: var(--_avatar-size);
+  min-height: var(--_avatar-size);
+  border-radius: var(--_avatar-shape);
+}
+
+@mixin leading-trailing-base {
+  color: var(--_supporting-text-color);
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  fill: currentColor;
+}
+
+@mixin leading {
+  margin-inline-start: var(--_leading-margin-start);
+  margin-inline-end: var(--_leading-margin-end);
+}
+
+@mixin leading-selected {
+  color: var(--_leading-selected-color);
+}
+
+@mixin leading-dense {
+  margin-inline-end: var(--_dense-leading-margin-end);
+}
+
+@mixin trailing {
+  margin-inline-start: var(--_trailing-margin-start);
+  margin-inline-end: var(--_trailing-margin-end);
+}
+
+@mixin trailing-selected {
+  color: var(--_trailing-selected-color);
+}
+
+@mixin trailing-dense {
+  margin-inline-start: var(--_dense-trailing-margin-start);
+}
+
+@mixin wrap {
+  height: auto;
+}
+
+@mixin text-container-wrap {
+  white-space: normal;
+  overflow: visible;
+  text-overflow: clip;
+}
+
+@mixin supporting-text-wrap {
+  @include text-container-wrap;
+}
+
+@mixin non-interactive {
+  cursor: initial;
+}
+
+@mixin disabled {
+  cursor: var(--_disabled-cursor);
+  opacity: var(--_disabled-opacity);
+}
diff --git a/src/lib/list/list-item/_mixins.scss b/src/lib/list/list-item/_mixins.scss
deleted file mode 100644
index 52e7e6c73..000000000
--- a/src/lib/list/list-item/_mixins.scss
+++ /dev/null
@@ -1,408 +0,0 @@
-@use '@material/rtl/rtl' as mdc-rtl;
-@use '@material/theme/theme' as mdc-theme;
-@use '@material/typography' as mdc-typography;
-@use '../../theme';
-@use '@material/ripple/ripple' as mdc-ripple;
-@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
-@use '../../typography/mixins' as typography-mixins;
-@use './variables';
-
-@mixin core-styles() {
-  .forge-list-item {
-    @include base;
-  
-    ::slotted([slot=leading]),
-    ::slotted([slot=trailing]) {
-      font-size: 1.5rem;
-    }
-
-    ::slotted([slot=leading]) {
-      @include leading;
-    }
-
-    ::slotted([slot=trailing]) {
-      @include trailing;
-    }
-  
-    ::slotted([slot=avatar]) {
-      @include leading;
-      @include avatar;
-      @include avatar-icon;
-    }
-  
-    &:not(.forge-list-item--static):not(.forge-list-item--disabled) {
-      &.forge-list-item {
-        @include interactable;
-      }
-    }
-  
-    &__text {
-      @include text;
-    }
-
-    ::slotted([slot=title]) {
-      @include title;
-    }
-
-    ::slotted([slot=subtitle]),
-    ::slotted([slot=tertiary-title]) {
-      @include subtitle;
-    }
-
-    &--two-line {
-      @include two-line;
-    }
-  
-    &--three-line {
-      @include three-line;
-    }
-  
-    &--dense {
-      @include dense;
-  
-      ::slotted([slot=leading]),
-      ::slotted([slot=trailing]) {
-        font-size: 1.25rem;
-      }
-
-      ::slotted([slot=leading]) {
-        @include theme.css-custom-property(margin-right, --forge-list-item-leading-margin-right, 12px);
-      }
-  
-      ::slotted(.forge-list-item__title) {
-        @include mdc-typography.typography(body2);
-      }
-
-      &.forge-list-item--two-line {
-        @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$dense-two-line-height);
-      }
-
-      &.forge-list-item--three-line {
-        @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$dense-three-line-height);
-      }
-    }
-  
-    &--wrap {
-      @include theme.css-custom-property(height, --forge-list-item-height, auto);
-
-      ::slotted([slot=title]),
-      ::slotted([slot=subtitle]),
-      ::slotted([slot=tertiary-title]),
-      .forge-list-item__text {
-        @include text-wrap;
-      }
-    }
-
-    &--indented {
-      @include indented;
-    }
-  
-    // Keep this at the bottom so that these selectors will override the ones
-    // above that have the same specificity.
-    &--active {
-      @include active;
-    }
-  
-    // Keep this at the bottom so that these selectors will override the ones
-    // above that have the same specificity.
-    &--selected,
-    &--activated {
-      @include selected;
-      @include subtitle-selected;
-      @include tertiary-title-selected;
-  
-      ::slotted([slot=leading]),
-      ::slotted([slot=trailing]) {
-        @include selected-leading-trailing;
-      }
-  
-      ::slotted([slot=avatar].forge-list-item__avatar-icon) {
-        @include selected-avatar-icon;
-      }
-    }
-  
-    &--disabled {
-      @include disabled;
-  
-      ::slotted([slot=leading]),
-      ::slotted([slot=trailing]) {
-        @include disabled;
-      }
-    }
-  
-    &[role=link] {
-      cursor: pointer;
-    }
-  }
-}
-
-@mixin drawer-context-styles() {
-  .forge-list-item {
-    @include drawer;
-
-    &--static {
-      cursor: initial;
-    }
-
-    &--indented {
-      @include indented-drawer;
-    }
-
-    &--two-line {
-      @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$two-line-height - 8px);
-      @include theme.css-custom-property(height, --forge-list-item-height, variables.$two-line-height - 8px);
-    }
-
-    &--three-line {
-      @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$three-line-height - 8px);
-      @include theme.css-custom-property(height, --forge-list-item-height, variables.$three-line-height - 8px);
-    }
-
-    &:nth-child(1) {
-      margin-top: 4px;
-      margin-bottom: 4px;
-    }
-
-    &--dense {
-      @include dense;
-
-      ::slotted([slot=leading]),
-      ::slotted([slot=trailing]) {
-        font-size: 1.25rem;
-      }
-
-      .forge-list-item__text {
-        @include mdc-typography.typography(body2);
-      }
-    }
-
-    &--wrap {
-      @include theme.css-custom-property(height, --forge-list-item-height, auto);
-      @include theme.css-custom-property(padding, --forge-list-item-padding, 4px variables.$drawer-inline-padding);
-      @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$drawer-single-line-height);
-    }
-
-    &--disabled {
-      @include theme.css-custom-property(cursor, --forge-list-item-cursor, not-allowed);
-    }
-  }
-}
-
-/// Styles the list item host element.
-@mixin host() {
-  display: block;
-  contain: content;
-}
-
-@mixin base() {
-  @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$single-line-height);
-  @include theme.css-custom-property(max-height, --forge-list-item-max-height, none);
-  @include theme.css-custom-property(height, --forge-list-item-height, variables.$single-line-height);
-  @include theme.css-custom-property(padding, --forge-list-item-padding, #{variables.$block-padding variables.$inline-padding});
-  @include theme.css-custom-property(margin-left, --forge-list-item-indent, 0);
-  @include theme.css-custom-property(align-items, --forge-list-item-align-items, center);
-
-  position: relative;
-  display: flex;
-  justify-content: flex-start;
-  overflow: hidden;
-
-  &:focus {
-    outline: none;
-  }
-}
-
-@mixin interactable() {
-  @include mdc-ripple.surface;
-  @include mdc-ripple.radius-bounded;
-  @include mdc-ripple-theme.states(on-surface);
-  @include mdc-ripple-theme.states-activated(primary);
-  @include mdc-ripple-theme.states-selected(primary);
-
-  &--selected:focus:hover.mdc-ripple-upgraded--background-focused:not(.mdc-ripple-upgraded--foreground-activation)::before {
-    opacity: mdc-ripple-theme.states-opacity(primary, activated) + mdc-ripple-theme.states-opacity(primary, focus) +
-      mdc-ripple-theme.states-opacity(primary, hover);
-  }
-
-  &:focus,
-  &--active {
-    &:not(.forge-list-item--selected):not(.forge-list-item--activated):not(.mdc-ripple-upgraded--foreground-activation) {
-      &::before {
-        opacity: mdc-ripple-theme.states-opacity(primary, focus);
-      }
-      &:hover {
-        &::before {
-          opacity: mdc-ripple-theme.states-opacity(primary, focus) + mdc-ripple-theme.states-opacity(primary, hover);
-        }
-      }
-
-      &::before,
-      &::after {
-        @include mdc-theme.property(background-color, on-surface);
-      }
-    }
-  }
-
-  &--active:focus {
-    &.forge-list-item--selected.forge-list-item--activated:not(.mdc-ripple-upgraded--foreground-activation) {
-      &::before {
-        opacity: mdc-ripple-theme.states-opacity(primary, focus) + mdc-ripple-theme.states-opacity(primary, activated);
-      }
-      &:hover {
-        &::before {
-          opacity: mdc-ripple-theme.states-opacity(primary, focus) + mdc-ripple-theme.states-opacity(primary, hover) +
-            mdc-ripple-theme.states-opacity(primary, activated);
-        }
-      }
-    }
-  }
-}
-
-@mixin text() {
-  @include mdc-typography.overflow-ellipsis;
-
-  width: 100%;
-}
-
-@mixin text-wrap() {
-  text-overflow: clip;
-  white-space: normal;
-}
-
-@mixin drawer {
-  @include theme.css-custom-property(margin, --forge-list-item-margin, variables.$margin-drawer);
-  @include theme.css-custom-property(padding, --forge-list-item-padding, 0 variables.$drawer-inline-padding);
-  @include theme.css-custom-property(border-radius, --forge-list-item-border-radius, 4px);
-  @include theme.css-custom-property(cursor, --forge-list-item-cursor, pointer);
-  @include theme.css-custom-property(height, --forge-list-item-height, variables.$drawer-single-line-height);
-
-  font-size: 0.875rem;
-  font-weight: 500;
-}
-
-@mixin leading() {
-  @include mdc-theme.property(color, text-secondary-on-background);
-  @include theme.css-custom-property(margin-left, --forge-list-item-leading-margin-left, 0);
-  @include theme.css-custom-property(margin-right, --forge-list-item-leading-margin-right, 32px);
-
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  fill: currentColor;
-}
-
-@mixin trailing() {
-  @include mdc-theme.property(color, text-secondary-on-background);
-  @include mdc-rtl.reflexive-property(margin, auto, 0, '.forge-list-item');
-}
-
-@mixin selected-leading-trailing() {
-  @include mdc-theme.property(color, primary);
-}
-
-@mixin avatar() {
-  margin-left: 0;
-  margin-right: 16px;
-  min-width: 40px;
-  min-height: 40px;
-  border-radius: 50%;
-  display: inline-flex;
-}
-
-@mixin avatar-icon() {
-  @include mdc-theme.property(background-color, text-secondary-on-background);
-  @include mdc-theme.property(color, on-primary);
-}
-
-@mixin title() {
-  @include mdc-typography.overflow-ellipsis;
-
-  display: block;
-}
-
-@mixin subtitle() {
-  @include mdc-typography.typography(body2);
-  @include mdc-typography.overflow-ellipsis;
-  @include mdc-theme.property(color, text-secondary-on-background);
-
-  display: block;
-}
-
-@mixin subtitle-selected {
-  .forge-list-item__text {
-    ::slotted(.forge-list-item__subtitle),
-    .forge-list-item__subtitle {
-      @include mdc-theme.property(color, primary);
-      opacity: 0.87;
-    }
-  }
-}
-
-@mixin tertiary-title-selected {
-  .forge-list-item__text {
-    ::slotted(.forge-list-item__tertiary-title),
-    .forge-list-item__tertiary-title {
-      @include mdc-theme.property(color, primary);
-      opacity: 0.87;
-    }
-  }
-}
-
-@mixin two-line() {
-  @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$two-line-height);
-  @include theme.css-custom-property(height, --forge-list-item-height, variables.$two-line-height);
-}
-
-@mixin three-line() {
-  @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$three-line-height);
-  @include theme.css-custom-property(height, --forge-list-item-height, variables.$three-line-height);
-}
-
-@mixin dense() {
-  @include theme.css-custom-property(min-height, --forge-list-item-min-height, variables.$dense-single-line-height);
-  @include theme.css-custom-property(height, --forge-list-item-height, variables.$dense-height);
-}
-
-@mixin disabled() {
-  @include theme.css-custom-property(cursor, --forge-list-item-cursor, not-allowed);
-  @include mdc-theme.property(color, text-disabled-on-light);
-}
-
-@mixin selected() {
-  @include mdc-theme.property(color, primary);
-}
-
-@mixin selected-focus() {
-  @include mdc-theme.property(color, primary);
-}
-
-@mixin selected-avatar-icon() {
-  @include mdc-theme.property(background-color, text-disabled-on-background);
-  @include mdc-theme.property(color, on-surface);
-}
-
-@mixin indented() {
-  @include theme.css-custom-property(margin-left, --forge-list-item-indent, variables.$indent);
-}
-
-@mixin indented-drawer() {
-  @include theme.css-custom-property(margin-left, --forge-list-item-indent, variables.$indent-drawer);
-}
-
-@mixin active() {
-  &.forge-list-item--selected,
-  &.forge-list-item--activated {
-    &:not(.forge-list-item--static):not(.forge-list-item--disabled).forge-list-item {
-      &::before {
-        opacity: mdc-ripple-theme.states-opacity(primary, selected) + mdc-ripple-theme.states-opacity(primary, focus);
-      }
-      &:hover {
-        &::before {
-          opacity: mdc-ripple-theme.states-opacity(primary, selected) + mdc-ripple-theme.states-opacity(primary, focus) +
-            mdc-ripple-theme.states-opacity(primary, hover);
-        }
-      }
-    }
-  }
-}
diff --git a/src/lib/list/list-item/_variables.scss b/src/lib/list/list-item/_variables.scss
deleted file mode 100644
index 42be037d0..000000000
--- a/src/lib/list/list-item/_variables.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-@use 'sass:math';
-
-$block-padding: 8px;
-$inline-padding: 16px;
-$drawer-inline-padding: #{math.div($inline-padding, 2)};
-
-/// The default height for a single line list item.
-$single-line-height: #{48px - $block-padding * 2} !default;
-
-/// The default height for a single line list item.
-$dense-single-line-height: #{32px - $block-padding * 2} !default;
-
-/// The default height for a two line list item.
-$dense-two-line-height: #{56px - $block-padding * 2} !default;
-
-/// The default height for a three line list item.
-$dense-three-line-height: #{72px - $block-padding * 2} !default;
-
-/// The default min-height for a single line list item in a drawer context.
-$drawer-single-line-height: 40px !default;
-
-/// The default height for a two-line list item.
-$two-line-height: #{72px - $block-padding * 2} !default;
-
-/// The default height for a three-line list item.
-$three-line-height: #{88px - $block-padding * 2} !default;
-
-/// The default height for the dense single-line list item
-$dense-height: #{32px - $block-padding * 2} !default;
-
-/// The default margin for list items when placed in a drawer
-$margin-drawer: 8px !default;
-
-/// The default margin-left for indented list items
-$indent: 56px !default;
-
-/// The default margin-left for indented list items when placed in a drawer
-$indent-drawer: $indent + $margin-drawer !default;
diff --git a/src/lib/list/list-item/index.scss b/src/lib/list/list-item/index.scss
new file mode 100644
index 000000000..c78abe8eb
--- /dev/null
+++ b/src/lib/list/list-item/index.scss
@@ -0,0 +1,2 @@
+@forward './configuration';
+@forward './core';
diff --git a/src/lib/list/list-item/list-item-adapter.ts b/src/lib/list/list-item/list-item-adapter.ts
index eab4d7e11..a4886e5eb 100644
--- a/src/lib/list/list-item/list-item-adapter.ts
+++ b/src/lib/list/list-item/list-item-adapter.ts
@@ -1,162 +1,122 @@
-import { addClass, getShadowElement, removeClass, requireParent, isDeepEqual, toggleClass } from '@tylertech/forge-core';
+import { getShadowElement, isDeepEqual, toggleAttribute } from '@tylertech/forge-core';
+import { replaceElement } from '../../core/utils/utils';
 import { BaseAdapter, IBaseAdapter } from '../../core/base/base-adapter';
-import { createUserInteractionListener } from '../../core/utils';
+import { FOCUS_INDICATOR_CONSTANTS, IFocusIndicatorComponent } from '../../focus-indicator';
+import { IStateLayerComponent, STATE_LAYER_CONSTANTS } from '../../state-layer';
 import { IListComponent } from '../list/list';
-import { LIST_CONSTANTS } from '../list/list-constants';
+import { ListComponentItemRole, LIST_CONSTANTS } from '../list/list-constants';
 import { IListItemComponent } from './list-item';
 import { LIST_ITEM_CONSTANTS } from './list-item-constants';
-import { ForgeRipple } from '../../ripple';
-
-export interface IListItemAdapter extends IBaseAdapter {
-  initializeAccessibility(): void;
-  getListItem(): IListItemComponent;
-  addListener(type: string, listener: (evt: Event) => void, options?: AddEventListenerOptions): void;
-  removeListener(type: string, listener: (evt: Event) => void): void;
-  createRipple(): any;
-  setStatic(value: boolean): void;
-  setTwoLine(value: boolean): void;
-  setThreeLine(value: boolean): void;
-  getLineCount(): number;
+import { ISwitchComponent } from '../../switch';
+
+export interface IListItemAdapter extends IBaseAdapter<IListItemComponent> {
+  initialize(): void;
+  setHref(href: string, target: string): void;
+  setHrefTarget(target: string): void;
+  setNonInteractive(value: boolean): void;
+  setDisabled(value: boolean): void;
   setActive(value: boolean): void;
-  setSelected(value: boolean): void;
-  tryToggleCheckboxRadio(value?: boolean): void;
-  setFocus(): void;
-  hasFocus(): boolean;
-  setRole(role: string): void;
-  setDisabled(disabled: boolean): void;
-  setDense(dense: boolean): void;
-  setIndented(indented: boolean): void;
-  setWrap(value: boolean): void;
   trySelect(value: unknown): boolean | null;
-  userInteractionListener(): ReturnType<typeof createUserInteractionListener>;
+  tryToggleSelectionControl(value?: boolean): void;
+  isFocused(): boolean;
+  setFocus(): void;
+  animateStateLayer(): void;
 }
 
 export class ListItemAdapter extends BaseAdapter<IListItemComponent> implements IListItemAdapter {
-  private _listItemElement: HTMLElement;
-  private _defaultSlot: HTMLSlotElement;
+  private _rootElement: HTMLElement | HTMLAnchorElement;
+  private _focusIndicatorElement: IFocusIndicatorComponent;
+  private _stateLayerElement: IStateLayerComponent;
 
   constructor(component: IListItemComponent) {
     super(component);
-    this._initialize();
+    this._rootElement = getShadowElement(component, LIST_ITEM_CONSTANTS.selectors.ROOT);
+    this._focusIndicatorElement = getShadowElement(component, FOCUS_INDICATOR_CONSTANTS.elementName) as IFocusIndicatorComponent;
+    this._stateLayerElement = getShadowElement(component, STATE_LAYER_CONSTANTS.elementName) as IStateLayerComponent;
   }
 
-  private _initialize(): void {
-    this._listItemElement = getShadowElement(this._component, LIST_ITEM_CONSTANTS.selectors.LIST_ITEM);
-    this._defaultSlot = getShadowElement(this._component, LIST_ITEM_CONSTANTS.selectors.DEFAULT_SLOT) as HTMLSlotElement;
-  }
-  
-  public initializeAccessibility(): void {
-    if (!this._component.hasAttribute('role')) {
-      this._component.setAttribute('role', 'listitem');
+  public initialize(): void {
+    // Attempt to inherit state for corresponding properties from our parent list
+    const list = this._getParentList();
+    if (list) {
+      this._inheritParentListProps(list);
     }
-  }
 
-  public getListItem(): IListItemComponent {
-    return this._component;
-  }
-
-  /**
-   * Adds an event listener to the `<forge-list-item>` host element.
-   * @param {string} type The event type.
-   * @param {Function} listener The event callback.
-   */
-  public addListener(type: string, listener: (evt: Event) => void, options?: AddEventListenerOptions): void {
-    this._listItemElement.addEventListener(type, listener, options);
-  }
+    this._rootElement.tabIndex = this._component.nonInteractive || this._component.disabled ? -1 : 0;
 
-  /**
-   * Removes an event listener from the `<forge-list-item>` host element.
-   * @param {string} type The event type.
-   * @param {Function} listener The event callback.
-   */
-  public removeListener(type: string, listener: (evt: Event) => void): void {
-    this._listItemElement.removeEventListener(type, listener);
+    if (!this._component.hasAttribute('role')) {
+      this._setRole(list);
+    }
   }
 
-  /**
-   * Creates a ripple instance on the list item.
-   * @returns {ForgeRipple}
-   */
-  public createRipple(): any {
-    return new ForgeRipple(this._listItemElement);
+  public setHref(href: string, target: string): void {
+    if (href) {
+      if (this._rootElement.tagName !== 'A') {
+        const anchor = this._createAnchorRootElement(target);
+        this._rootElement = replaceElement(this._rootElement, anchor);
+      }
+      (this._rootElement as HTMLAnchorElement).href = href;
+    } else if (this._rootElement.tagName === 'A') {
+      const defaultEl = this._createDefaultRootElement();
+      this._rootElement = replaceElement(this._rootElement, defaultEl);
+    }
   }
 
-  /**
-   * Toggles the static state of this list item.
-   * @param {boolean} value The static state.
-   */
-  public setStatic(value: boolean): void {
-    if (value) {
-      this._listItemElement.tabIndex = -1;
-      addClass(LIST_ITEM_CONSTANTS.classes.STATIC, this._listItemElement);
-    } else {
-      this._listItemElement.tabIndex = 0;
-      removeClass(LIST_ITEM_CONSTANTS.classes.STATIC, this._listItemElement);
+  public setHrefTarget(target: string): void {
+    if (this._rootElement.tagName === 'A') {
+      (this._rootElement as HTMLAnchorElement).target = target;
     }
   }
 
-  /**
-   * Sets this list item as a two-line list item.
-   * @param {boolean} value The two-line state.
-   */
-  public setTwoLine(value: boolean): void {
+  public setNonInteractive(value: boolean): void {
+    this._rootElement.tabIndex = value ? -1 : 0;
+
     if (value) {
-      addClass(LIST_ITEM_CONSTANTS.classes.TWO_LINE, this._listItemElement);
+      this._focusIndicatorElement.remove();
+      this._stateLayerElement.remove();
     } else {
-      removeClass(LIST_ITEM_CONSTANTS.classes.TWO_LINE, this._listItemElement);
+      this._rootElement.append(this._focusIndicatorElement, this._stateLayerElement);
     }
   }
 
-  /**
-   * Sets this list item as a three-line list item.
-   * @param {boolean} value The three-line state.
-   */
-  public setThreeLine(value: boolean): void {
+  public setDisabled(value: boolean): void {
+    this._rootElement.tabIndex = value ? -1 : 0;
+    toggleAttribute(this._component, value, 'aria-disabled', 'true');
+
     if (value) {
-      addClass(LIST_ITEM_CONSTANTS.classes.THREE_LINE, this._listItemElement);
+      this._focusIndicatorElement.remove();
+      this._stateLayerElement.remove();
     } else {
-      removeClass(LIST_ITEM_CONSTANTS.classes.THREE_LINE, this._listItemElement);
+      this._rootElement.append(this._focusIndicatorElement, this._stateLayerElement);
     }
   }
 
-  /**
-   * Determines how many lines the list item is displaying.
-   */
-  public getLineCount(): number {
-    return this._defaultSlot.assignedNodes().filter(e => e.nodeType === Node.ELEMENT_NODE).length; // assignedElements does not exist in the polyfilled version so filtering nodes instead
-  }
-
-  /**
-   * Toggles the active class of the list item.
-   * @param {boolean} value The active state.
-   */
   public setActive(value: boolean): void {
-    if (value) {
-      addClass(LIST_ITEM_CONSTANTS.classes.ACTIVE, this._listItemElement);
-    } else {
-      removeClass(LIST_ITEM_CONSTANTS.classes.ACTIVE, this._listItemElement);
-    }
+    this._focusIndicatorElement.active = value;
   }
 
   /**
-   * Toggles the selected class of the list item.
-   * @param {boolean} value The active state.
+   * Attempts to set the selected state of the list item element and it's visual indicators
+   * @param value The value to compare to the parent list element's selected value
+   * @returns Returns whether the list item is selected, or null otherwise.
    */
-  public setSelected(value: boolean): void {
-    if (value) {
-      addClass(LIST_ITEM_CONSTANTS.classes.SELECTED, this._listItemElement);
-      // We are treating selected and activated as the same state, and mdc-states hooks right into --activated
-      // addClass(LIST_ITEM_CONSTANTS.classes.ACTIVATED, this._listItemElement);
-    } else {
-      removeClass(LIST_ITEM_CONSTANTS.classes.SELECTED, this._listItemElement);
-      // removeClass(LIST_ITEM_CONSTANTS.classes.ACTIVATED, this._listItemElement);
+  public trySelect(value: unknown): boolean | null {
+    const list = this._getParentList();
+    if (list?.selectedValue === undefined) {
+      return null;
     }
+
+    const listValues = Array.isArray(list.selectedValue) ? list.selectedValue : [list.selectedValue];
+    const isSelected = listValues.some(v => isDeepEqual(v, value));
+
+    this.tryToggleSelectionControl(isSelected);
+    return isSelected;
   }
 
   /**
-   * Attemps to toggle a checkbox or radio button within the list item if it can find one.
+   * Attempts to toggle a checkbox radio button, or switch within the list item if it can find one.
    */
-  public tryToggleCheckboxRadio(value?: boolean): void {
+  public tryToggleSelectionControl(value?: boolean): void {
     const checkable = this._component.querySelector(LIST_ITEM_CONSTANTS.selectors.CHECKBOX_RADIO_SELECTOR) as HTMLInputElement;
     if (checkable) {
       const force = typeof value === 'boolean';
@@ -165,66 +125,89 @@ export class ListItemAdapter extends BaseAdapter<IListItemComponent> implements
       // Check if we are just toggling or forcing to a specific checked state
       checkable.checked = force ? value as boolean : !checkable.checked;
 
+      // TODO: This seems weird... Should we be dispatching events on slotted elements when changes are made programmatically?
       if (!force || currentState !== value) {
         checkable.dispatchEvent(new Event('change', { bubbles: true }));
       }
-    }
-  }
+    } else {
+      // Special case handling for the Forge switch element since it doesn't have a checked property
+      const switchEl = this._component.querySelector(LIST_ITEM_CONSTANTS.selectors.SWITCH_SELECTOR) as ISwitchComponent;
+      if (!switchEl) {
+        return;
+      }
+      
+      const force = typeof value === 'boolean';
+      const currentState = switchEl.on;
 
-  /** Attempts to set focus to this list item. */
-  public setFocus(): void {
-    this._listItemElement.focus();
+      // Check if we are just toggling or forcing to a specific checked state
+      switchEl.on = force ? value as boolean : !switchEl.on;
+
+      // TODO: This seems weird... Should we be dispatching events on slotted elements when changes are made programmatically?
+      if (!force || currentState !== value) {
+        switchEl.dispatchEvent(new CustomEvent('forge-switch-change', { bubbles: true, detail: switchEl.on }));
+      }
+    }
   }
 
-  /** Returns whether the component has focus or not. */
-  public hasFocus(): boolean {
-    return document.activeElement === this._component || !!this._component.shadowRoot?.activeElement;
+  public isFocused(): boolean {
+    return this._component.matches(':focus');
   }
 
-  /**
-   * Sets the role on the list item element.
-   * @param role The role.
-   */
-  public setRole(role: string): void {
-    this._listItemElement.setAttribute('role', role);
+  public setFocus(): void {
+    this._rootElement.focus({ preventScroll: true });
   }
 
-  public setDisabled(disabled: boolean): void {
-    toggleClass(this._listItemElement, disabled, LIST_ITEM_CONSTANTS.classes.DISABLED);
+  public animateStateLayer(): void {
+    this._stateLayerElement.playAnimation();
   }
 
-  public setDense(dense: boolean): void {
-    toggleClass(this._listItemElement, dense, LIST_ITEM_CONSTANTS.classes.DENSE);
+  private _createAnchorRootElement(target: string): HTMLAnchorElement {
+    const a = document.createElement('a');
+    a.classList.add(LIST_ITEM_CONSTANTS.classes.ROOT);
+    a.setAttribute('part', 'root');
+    a.target = target;
+    return a;
   }
 
-  public setIndented(indented: boolean): void {
-    toggleClass(this._listItemElement, indented, LIST_ITEM_CONSTANTS.classes.INDENTED);
+  private _createDefaultRootElement(): HTMLElement {
+    const div = document.createElement('div');
+    div.classList.add(LIST_ITEM_CONSTANTS.classes.ROOT);
+    div.setAttribute('part', 'root');
+    div.tabIndex = this._component.nonInteractive || this._component.disabled ? -1 : 0;
+    return div;
   }
 
-  public setWrap(value: boolean): void {
-    toggleClass(this._listItemElement, value, LIST_ITEM_CONSTANTS.classes.WRAP);
+  private _getParentList(): IListComponent | null {
+    return this._component.closest(LIST_CONSTANTS.elementName);
   }
 
-  /**
-   * Attempts to set the selected state of the list item element and it's visual indicators
-   * @param value The value to compare to the parent list element's selected value
-   * @returns Returns whether the list item is selected or not
-   */
-  public trySelect(value: unknown): boolean | null {
-    const list = requireParent<IListComponent>(this._component, LIST_CONSTANTS.elementName);
-    if (!list || list.selectedValue === undefined) {
-      return null;
+  private _inheritParentListProps(list: IListComponent): void {
+    if (list.hasAttribute(LIST_CONSTANTS.attributes.NON_INTERACTIVE) || list.hasAttribute(LIST_CONSTANTS.attributes.STATIC)) {
+      this._component.nonInteractive = true;
+    }
+    if (list.hasAttribute(LIST_CONSTANTS.attributes.DISABLED)) {
+      this._component.disabled = true;
+    }
+    if (list.hasAttribute(LIST_CONSTANTS.attributes.DENSE)) {
+      this._component.dense = true;
+    }
+    if (list.getAttribute(LIST_CONSTANTS.attributes.PROPAGATE_CLICK) === 'false') {
+      this._component.propagateClick = false;
+    }
+    if (list.hasAttribute(LIST_CONSTANTS.attributes.INDENTED)) {
+      this._component.indented = true;
+    }
+    if (list.hasAttribute(LIST_CONSTANTS.attributes.TWO_LINE)) {
+      this._component.twoLine = true;
+    }
+    if (list.hasAttribute(LIST_CONSTANTS.attributes.THREE_LINE)) {
+      this._component.threeLine = true;
     }
-
-    const listValues = list.selectedValue instanceof Array ? list.selectedValue : [list.selectedValue];
-    const isSelected = listValues.some(v => isDeepEqual(v, value));
-
-    this.setSelected(isSelected);
-    this.tryToggleCheckboxRadio(isSelected);
-    return isSelected;
   }
 
-  public userInteractionListener(): ReturnType<typeof createUserInteractionListener> {
-    return createUserInteractionListener(this._listItemElement);
+  private _setRole(list: IListComponent | null): void {
+    const listRole = list?.getAttribute('role');
+    const role = ListComponentItemRole[listRole as string] ?? 'listitem';
+    this._component.setAttribute('role', role);
   }
 }
diff --git a/src/lib/list/list-item/list-item-constants.ts b/src/lib/list/list-item/list-item-constants.ts
index 4e560f5a0..93ce8e2df 100644
--- a/src/lib/list/list-item/list-item-constants.ts
+++ b/src/lib/list/list-item/list-item-constants.ts
@@ -1,67 +1,54 @@
 import { COMPONENT_NAME_PREFIX } from '../../constants';
 import { IListItemComponent } from './list-item';
 
-const elementName: keyof HTMLElementTagNameMap = `${COMPONENT_NAME_PREFIX}list-item`;
+const elementName = `${COMPONENT_NAME_PREFIX}list-item`;
 
-const attributes = {
-  STATIC: 'static',
-  TWO_LINE: 'two-line',
-  THREE_LINE: 'three-line',
-  ACTIVE: 'active',
-  SELECTED: 'selected',
-  VALUE: 'value',
+const observedAttributes = {
   HREF: 'href',
   TARGET: 'target',
-  RIPPLE: 'ripple',
+  STATIC: 'static',
+  NON_INTERACTIVE: 'non-interactive',
   DISABLED: 'disabled',
+  SELECTED: 'selected',
+  ACTIVE: 'active',
+  VALUE: 'value',
   DENSE: 'dense',
   PROPAGATE_CLICK: 'propagate-click',
   INDENTED: 'indented',
-  WRAP: 'wrap',
-  DRAWER_CONTEXT: 'forge-drawer-context',
-  IGNORE: 'forge-ignore'
+  TWO_LINE: 'two-line',
+  THREE_LINE: 'three-line',
+  WRAP: 'wrap'
+};
+
+const attributes = {
+  ...observedAttributes
 };
 
 const classes = {
-  LIST_ITEM: 'forge-list-item',
-  STATIC: 'forge-list-item--static',
-  TEXT: 'forge-list-item__text',
-  TWO_LINE: 'forge-list-item--two-line',
-  THREE_LINE: 'forge-list-item--three-line',
-  ACTIVE: 'forge-list-item--active',
-  ACTIVATED: 'forge-list-item--activated',
-  SELECTED: 'forge-list-item--selected',
-  DISABLED: 'forge-list-item--disabled',
-  DENSE: 'forge-list-item--dense',
-  INDENTED: 'forge-list-item--indented',
-  WRAP: 'forge-list-item--wrap'
+  ROOT: 'forge-list-item'
 };
 
 const selectors = {
-  LIST_ITEM: `.${classes.LIST_ITEM}`,
-  DEFAULT_SLOT: `.${classes.TEXT} > slot`,
-  CHECKBOX_RADIO_SELECTOR: 'input[type=checkbox]:not(:disabled):not([forge-ignore]),input[type=radio]:not(:disabled):not([forge-ignore])'
+  ROOT: `.${classes.ROOT}`,
+  CHECKBOX_RADIO_SELECTOR: 'input[type=checkbox]:not(:disabled):not([forge-ignore]),input[type=radio]:not(:disabled):not([forge-ignore])',
+  SWITCH_SELECTOR: 'forge-switch:not([disabled]):not([forge-ignore])',
+  IGNORE: '[forge-ignore],[data-forge-ignore]'
 };
 
 const events = {
   SELECT: `${elementName}-select`
 };
 
-const roles = {
-  LINK: 'link',
-  LIST_ITEM: 'listitem'
-};
-
 export const LIST_ITEM_CONSTANTS = {
   elementName,
+  observedAttributes,
   attributes,
   classes,
   selectors,
-  events,
-  roles
+  events
 };
 
-export interface IListItemSelectEventData {
-  value: any;
+export interface IListItemSelectEventData<T = unknown> {
+  value: T;
   listItem: IListItemComponent;
 }
diff --git a/src/lib/list/list-item/list-item-foundation.ts b/src/lib/list/list-item/list-item-foundation.ts
index 8e44e60da..3bd0ddb02 100644
--- a/src/lib/list/list-item/list-item-foundation.ts
+++ b/src/lib/list/list-item/list-item-foundation.ts
@@ -1,95 +1,76 @@
-import { ICustomElementFoundation, matchesSelectors } from '@tylertech/forge-core';
-import { ForgeRipple } from '../../ripple';
+import { ICustomElementFoundation } from '@tylertech/forge-core';
+
 import { IListItemAdapter } from './list-item-adapter';
-import { LIST_ITEM_CONSTANTS, IListItemSelectEventData } from './list-item-constants';
+import { IListItemSelectEventData, LIST_ITEM_CONSTANTS } from './list-item-constants';
 
 export interface IListItemFoundation extends ICustomElementFoundation {
-  static: boolean;
-  twoLine: boolean;
-  threeLine: boolean;
-  active: boolean;
-  selected: boolean;
-  value: any;
   href: string;
   target: string;
-  ripple: boolean;
+  static: boolean;
+  nonInteractive: boolean;
   disabled: boolean;
+  selected: boolean;
+  active: boolean;
+  value: unknown;
   dense: boolean;
+  propagateClick: boolean;
+  indented: boolean;
+  twoLine: boolean;
+  threeLine: boolean;
   wrap: boolean;
   setFocus(): void;
 }
 
-/**
- * The foundation class behind the `<forge-list-item>` component.
- */
 export class ListItemFoundation implements IListItemFoundation {
-  private _ripple = true;
-  private _rippleInstance: ForgeRipple;
-  private _static = false;
-  private _twoLine = false;
-  private _threeLine = false;
-  private _active = false;
-  private _selected = false;
-  private _value: any;
   private _href: string;
-  private _target: string;
+  private _target = '_blank';
+  private _nonInteractive = false;
   private _disabled = false;
+  private _selected = false;
+  private _active = false;
+  private _value: unknown;
   private _dense = false;
   private _propagateClick = true;
   private _indented = false;
+  private _twoLine = false;
+  private _threeLine = false;
   private _wrap = false;
-  private _clickListener: (evt: MouseEvent) => void;
-  private _mouseDownListener: (evt: MouseEvent) => void;
-  private _keydownListener: (evt: KeyboardEvent) => void;
-  private _destroyUserInteractionListener: (() => void) | undefined;
+
+  private _clickListener: EventListener;
+  private _pointerDownListener: EventListener;
+  private _keydownListener: EventListener;
 
   constructor(private _adapter: IListItemAdapter) {
-    this._clickListener = (evt: MouseEvent) => this._onClick(evt);
-    this._mouseDownListener = (evt: MouseEvent) => this._onMouseDown(evt);
-    this._keydownListener = (evt: KeyboardEvent) => this._onKeydown(evt);
+    this._clickListener = this._onClick.bind(this);
+    this._pointerDownListener = this._onPointerDown.bind(this);
+    this._keydownListener = this._onKeydown.bind(this);
   }
 
   public initialize(): void {
-    this._adapter.initializeAccessibility();
-    this._setRipple();
-    this._adapter.setStatic(this._static);
-    this._adapter.setDense(this._dense);
-    this._adapter.setDisabled(this._disabled);
-    this._adapter.setIndented(this._indented);
-    this._adapter.setWrap(this._wrap);
-
-    if (!this._static) {
-      this._adapter.addListener('click', this._clickListener);
-      this._adapter.addListener('mousedown', this._mouseDownListener, { passive: false, capture: true });
-      this._adapter.addListener('keydown', this._keydownListener);
-    }
+    this._adapter.initialize();
 
-    if (this._threeLine) {
-      this._adapter.setThreeLine(this._threeLine);
-    } else if (this.twoLine) {
-      this._adapter.setTwoLine(this._twoLine);
-    }
+    if (!this._nonInteractive && !this._disabled) {
+      this._adapter.addHostListener('click', this._clickListener);
+      this._adapter.addHostListener('keydown', this._keydownListener);
 
-    const isSelected = this._adapter.trySelect(this._value);
-    if(isSelected != null) {
-      this._selected = isSelected;
+      if (!this._propagateClick) {
+        this._adapter.addHostListener('pointerdown', this._pointerDownListener);
+      }
     }
   }
 
   public disconnect(): void {
-    if (typeof this._destroyUserInteractionListener === 'function') {
-      this._destroyUserInteractionListener();
-      this._destroyUserInteractionListener = undefined;
-    }
+    this._adapter.removeHostListener('click', this._clickListener);
+    this._adapter.removeHostListener('pointerdown', this._pointerDownListener);
+    this._adapter.removeHostListener('keydown', this._keydownListener);
+  }
 
-    if (this._rippleInstance) {
-      this._rippleInstance.destroy();
-      this._rippleInstance = undefined as any;
-    }
+  public setFocus(): void {
+    this._adapter.setFocus();
   }
 
-  private _onMouseDown(evt: MouseEvent): void {
-    if (this._adapter.hasFocus() || !this._propagateClick) {
+  private _onPointerDown(evt: MouseEvent): void {
+    if (this._adapter.isFocused()) {
       evt.preventDefault();
     }
   }
@@ -99,230 +80,158 @@ export class ListItemFoundation implements IListItemFoundation {
       if (evt.key === ' ') {
         evt.preventDefault();
       }
+      this._adapter.animateStateLayer();
       this._select(evt.target as HTMLElement);
     }
   }
 
-  /**
-   * Handles clicking a list item.
-   * @param evt
-   */
-  private _onClick(evt: MouseEvent): void {
-    this._select(evt.target as HTMLElement);
+  private _onClick(event: MouseEvent): void {
+    this._select(event.target as HTMLElement);
   }
 
   private _select(targetElement: HTMLElement): void {
-    const ignoreElement = targetElement?.hasAttribute(LIST_ITEM_CONSTANTS.attributes.IGNORE);
-    if (this._static || this._disabled || ignoreElement) {
+    const ignoreElement = targetElement?.matches(LIST_ITEM_CONSTANTS.selectors.IGNORE);
+    if (this._nonInteractive || this._disabled || ignoreElement) {
       return;
     }
 
-    if (!this._adapter.hasFocus() && this._propagateClick) {
+    if (!this._adapter.isFocused() && this._propagateClick) {
       this.setFocus();
     }
 
-    if (this._href) {
-      if (this._target) {
-        window.open(this._href, this._target);
-      } else {
-        document.location.href = this._href;
-      }
-      return;
-    }
-
     // If the target was not a checkbox or radio button, attempt to find one and toggle its checked state
-    if (!matchesSelectors(targetElement, LIST_ITEM_CONSTANTS.selectors.CHECKBOX_RADIO_SELECTOR)) {
-      this._adapter.tryToggleCheckboxRadio();
+    if (!targetElement.matches(LIST_ITEM_CONSTANTS.selectors.CHECKBOX_RADIO_SELECTOR)) {
+      this._adapter.tryToggleSelectionControl();
     }
 
     const data: IListItemSelectEventData = {
       value: this._value,
-      listItem: this._adapter.getListItem()
+      listItem: this._adapter.hostElement
     };
     this._adapter.emitHostEvent(LIST_ITEM_CONSTANTS.events.SELECT, data);
   }
 
-  /** Gets/sets whether the list item has a ripple or not. */
-  public get ripple(): boolean {
-    return this._ripple;
+  public get href(): string {
+    return this._href;
   }
-  public set ripple(value: boolean) {
-    if (this._ripple !== value) {
-      // We don't attach ripples to static items
-      if (value && this._static) {
-        return;
-      }
-      this._ripple = value;
-      this._setRipple();
-
-      this._adapter.setHostAttribute(LIST_ITEM_CONSTANTS.attributes.RIPPLE, String(this._ripple));
+  public set href(value: string) {
+    if (this._href !== value) {
+      this._href = value;
+      this._adapter.setHref(this._href, this._target);
+      this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.HREF, !!this._href, this._href);
     }
   }
 
-  /** Gets/sets whether the static state of this list item. */
-  public get static(): boolean {
-    return this._static;
+  public get target(): string {
+    return this._target;
   }
-  public set static(value: boolean) {
-    if (this._static !== value) {
-      this._static = value;
-      this._adapter.setStatic(this._static);
-
-      // Ensure we either add or remove the ripple
-      this._setRipple();
-
-      // Toggle the click listener
-      if (this._static) {
-        this._adapter.removeListener('click', this._clickListener);
-      } else {
-        this._adapter.addListener('click', this._clickListener);
-      }
-
-      if (this._static) {
-        this._adapter.setHostAttribute(LIST_ITEM_CONSTANTS.attributes.STATIC);
-      } else {
-        this._adapter.removeHostAttribute(LIST_ITEM_CONSTANTS.attributes.STATIC);
+  public set target(value: string) {
+    if (this._target !== value) {
+      this._target = value;
+      if (this._href) {
+        this._adapter.setHrefTarget(this._target);
       }
+      this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.TARGET, !!this._target, this._target);
     }
   }
 
-  /** Gets/sets whether the list item displays two lines of text. */
-  public get twoLine(): boolean {
-    return this._twoLine;
+  public get static(): boolean {
+    return this.nonInteractive;
   }
-  public set twoLine(value: boolean) {
-    if (this._twoLine !== value) {
-      this._twoLine = value;
-      this._adapter.setTwoLine(this._twoLine);
-
-      if (this._twoLine) {
-        this._adapter.setHostAttribute(LIST_ITEM_CONSTANTS.attributes.TWO_LINE);
-      } else {
-        this._adapter.removeHostAttribute(LIST_ITEM_CONSTANTS.attributes.TWO_LINE);
-      }
-    }
+  public set static(value: boolean) {
+    this.nonInteractive = value;
   }
 
-  /** Gets/sets whether the list item displays two lines of text. */
-  public get threeLine(): boolean {
-    return this._threeLine;
+  public get nonInteractive(): boolean {
+    return this._nonInteractive;
   }
-  public set threeLine(value: boolean) {
-    if (this._threeLine !== value) {
-      this._threeLine = value;
-
-      if (this._threeLine) {
-        this._adapter.setHostAttribute(LIST_ITEM_CONSTANTS.attributes.THREE_LINE);
+  public set nonInteractive(value: boolean) {
+    if (this._nonInteractive !== value) {
+      this._nonInteractive = value;
+      if (this._nonInteractive) {
+        this._adapter.removeHostListener('click', this._clickListener);
       } else {
-        this._adapter.removeHostAttribute(LIST_ITEM_CONSTANTS.attributes.THREE_LINE);
+        this._adapter.addHostListener('click', this._clickListener);
       }
-
-      if (this._threeLine) {
-        this._twoLine = false;
-      }
-
-      this._adapter.setTwoLine(this._twoLine);
-      this._adapter.setThreeLine(this._threeLine);
+      this._adapter.setNonInteractive(this._nonInteractive);
+      this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.STATIC, this._nonInteractive);
+      this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.NON_INTERACTIVE, this._nonInteractive);
     }
   }
 
-  /** Gets/sets whether the list item is active or not. */
-  public get active(): boolean {
-    return this._active;
+  public get disabled(): boolean {
+    return this._disabled;
   }
-  public set active(value: boolean) {
-    if (this._active !== value) {
-      this._active = value;
-      this._adapter.setActive(this._active);
-      if (this._active) {
-        this._adapter.setHostAttribute(LIST_ITEM_CONSTANTS.attributes.ACTIVE);
+  public set disabled(value: boolean) {
+    if (this._disabled !== value) {
+      this._disabled = value;
+      if (this._disabled) {
+        this._adapter.removeHostListener('click', this._clickListener);
       } else {
-        this._adapter.removeHostAttribute(LIST_ITEM_CONSTANTS.attributes.ACTIVE);
+        this._adapter.addHostListener('click', this._clickListener);
       }
+      this._adapter.setDisabled(this._disabled);
+      this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.DISABLED, this._disabled);
     }
   }
 
-  /** Gets/sets whether the list item is selected or not. */
   public get selected(): boolean {
     return this._selected;
   }
   public set selected(value: boolean) {
     if (this._selected !== value) {
       this._selected = value;
-      this._adapter.setSelected(this._selected);
-      this._adapter.tryToggleCheckboxRadio(this._selected);
+      this._adapter.tryToggleSelectionControl(this._selected);
       this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.SELECTED, this._selected);
     }
   }
 
-  /** Gets/sets the unique value for this list item. */
-  public get value(): any {
-    return this._value;
-  }
-  public set value(value: any) {
-    this._value = value;
-    const isSelected = this._adapter.trySelect(this._value);
-    if(isSelected != null) {
-      this._selected = isSelected;
-    }
-  }
-
-  /** Gets/sets the href link that this list item will send the browser to when clicked. */
-  public get href(): string {
-    return this._href;
+  public get active(): boolean {
+    return this._active;
   }
-  public set href(value: string) {
-    if (this._href !== value) {
-      this._href = value;
-      if (this._href) {
-        this._adapter.setRole(LIST_ITEM_CONSTANTS.roles.LINK);
-      } else {
-        this._adapter.setRole(LIST_ITEM_CONSTANTS.roles.LIST_ITEM);
-      }
-      this._adapter.setHostAttribute(LIST_ITEM_CONSTANTS.attributes.HREF, this._href);
+  public set active(value: boolean) {
+    if (this._active !== value) {
+      this._active = value;
+      this._adapter.setActive(this._active);
+      this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.ACTIVE, this._active);
     }
   }
 
-  /** Gets/sets the href link target. */
-  public get target(): string {
-    return this._target;
-  }
-  public set target(value: string) {
-    this._target = value;
-  }
-
-  /** Gets/sets the disabled state. */
-  public get disabled(): boolean {
-    return this._disabled;
+  public get value(): unknown {
+    return this._value;
   }
-  public set disabled(value: boolean) {
-    if (this._disabled !== value) {
-      this._disabled = value;
-      this._adapter.setDisabled(this._disabled);
-      this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.DISABLED, this._disabled);
+  public set value(value: unknown) {
+    this._value = value;
+    const isSelected = this._adapter.trySelect(this._value);
+    if (isSelected !== null && isSelected !== this._selected) {
+      this.selected = isSelected;
     }
   }
 
-  /** Gets/sets the dense state. */
   public get dense(): boolean {
     return this._dense;
   }
   public set dense(value: boolean) {
     if (this._dense !== value) {
       this._dense = value;
-      this._adapter.setDense(this._dense);
       this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.DENSE, this._dense);
     }
   }
 
-  /** Gets/sets the dense state. */
   public get propagateClick(): boolean {
     return this._propagateClick;
   }
   public set propagateClick(value: boolean) {
     if (this._propagateClick !== value) {
       this._propagateClick = value;
-      this._adapter.setHostAttribute(LIST_ITEM_CONSTANTS.attributes.PROPAGATE_CLICK, '' + !!this._propagateClick);
+
+      if (this._propagateClick) {
+        this._adapter.removeHostListener('pointerdown', this._pointerDownListener);
+      } else {
+        this._adapter.addHostListener('pointerdown', this._pointerDownListener);
+      }
+
+      this._adapter.setHostAttribute(LIST_ITEM_CONSTANTS.attributes.PROPAGATE_CLICK, this._propagateClick ? 'true' : 'false');
     }
   }
 
@@ -332,44 +241,37 @@ export class ListItemFoundation implements IListItemFoundation {
   public set indented(value: boolean) {
     if (this._indented !== value) {
       this._indented = value;
-      this._adapter.setIndented(this._indented);
       this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.INDENTED, this._indented);
     }
   }
 
+  public get twoLine(): boolean {
+    return this._twoLine;
+  }
+  public set twoLine(value: boolean) {
+    if (this._twoLine !== value) {
+      this._twoLine = value;
+      this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.TWO_LINE, this._twoLine);
+    }
+  }
+
+  public get threeLine(): boolean {
+    return this._threeLine;
+  }
+  public set threeLine(value: boolean) {
+    if (this._threeLine !== value) {
+      this._threeLine = value;
+      this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.THREE_LINE, this._threeLine);
+    }
+  }
+
   public get wrap(): boolean {
     return this._wrap;
   }
   public set wrap(value: boolean) {
     if (this._wrap !== value) {
       this._wrap = value;
-      this._adapter.setWrap(this._wrap);
       this._adapter.toggleHostAttribute(LIST_ITEM_CONSTANTS.attributes.WRAP, this._wrap);
     }
   }
-
-  private async _setRipple(): Promise<void> {
-    if (this._ripple && !this._static && !this._rippleInstance) {
-      const { userInteraction, destroy } = this._adapter.userInteractionListener();
-      this._destroyUserInteractionListener = destroy;
-      const { type } = await userInteraction;
-      this._destroyUserInteractionListener = undefined;
-      if (this._ripple && !this._static && !this._rippleInstance) { // need to re-check after await
-        this._rippleInstance = this._adapter.createRipple();
-        if (type === 'focusin') {
-          this._rippleInstance.handleFocus();
-        }
-      }
-    } else if ((!this._ripple || this._static) && this._rippleInstance) {
-      this._rippleInstance.destroy();
-      this._rippleInstance = undefined as any;
-    }
-  }
-
-  /**
-   * Sets focus to this list item.
-   */
-  public setFocus(): void {
-    this._adapter.setFocus();
-  }
 }
diff --git a/src/lib/list/list-item/list-item.html b/src/lib/list/list-item/list-item.html
index e1e957ecd..679cd9892 100644
--- a/src/lib/list/list-item/list-item.html
+++ b/src/lib/list/list-item/list-item.html
@@ -2,13 +2,17 @@
   <div class="forge-list-item" tabindex="0" part="root">
     <slot name="leading"></slot>
     <slot name="avatar"></slot>
-    <div class="forge-list-item__text" part="text-container">
+    <div class="text-container" part="text-container">
       <slot></slot>
       <slot name="title"></slot>
+      <slot name="primary-text"></slot>
       <slot name="subtitle"></slot>
+      <slot name="secondary-text"></slot>
+      <slot name="tertiary-text"></slot>
       <slot name="tertiary-title"></slot>
-      <slot></slot>
     </div>
     <slot name="trailing"></slot>
+    <forge-state-layer exportparts="surface:state-layer__surface"></forge-state-layer>
+    <forge-focus-indicator exportparts="indicator:focus-indicator__indicator" inward></forge-focus-indicator>
   </div>
 </template>
diff --git a/src/lib/list/list-item/list-item.scss b/src/lib/list/list-item/list-item.scss
index fac7228b9..2ed4ded4f 100644
--- a/src/lib/list/list-item/list-item.scss
+++ b/src/lib/list/list-item/list-item.scss
@@ -1,25 +1,205 @@
-@use '@material/typography' as mdc-typography;
-@use '../../theme';
-@use './mixins';
-@use '../../ripple/forge-ripple';
-@use '../../typography/mixins' as typography-mixins;
-@use './variables';
-
-@include mixins.core-styles;
+@use './configuration';
+@use './core';
+@use '../../focus-indicator';
+@use '../../state-layer';
+@use '../../core/styles/shape';
 
+// Host styles
 :host {
-  @include mixins.host;
+  @include configuration.host;
+  @include core.container;
 }
 
 :host([hidden]) {
   display: none;
 }
 
-// This is here until Firefox supports :host-context()...
-:host([forge-drawer-context=true]) {
-  @include mixins.drawer-context-styles;
+// Non-interactive
+:host([non-interactive]) {
+  .forge-list-item {
+    @include core.non-interactive;
+  }
+}
+
+// Disabled
+:host([disabled]) {
+  .forge-list-item {
+    @include core.disabled;
+  }
+}
+
+// Two-line
+:host([two-line]) {
+  .forge-list-item {
+    @include core.two-line;
+  }
+}
+
+// Three-line
+:host([three-line]) {
+  .forge-list-item {
+    @include core.three-line;
+  }
 }
 
+// Dense
 :host([dense]) {
-  @include mdc-typography.typography(body2);
+  .forge-list-item {
+    @include core.dense;
+  }
+
+  .text-container {
+    @include core.dense-text;
+  }
+}
+
+// Dense indented
+:host([dense][indented]) {
+  @include core.dense-indented;
+}
+
+// Dense two-line
+:host([dense][two-line]) {
+  .forge-list-item {
+    @include core.dense-two-line;
+  }
+}
+
+// Dense three-line
+:host([dense][three-line]) {
+  .forge-list-item {
+    @include core.dense-three-line;
+  }
+}
+
+// Dense leading/trailing
+:host([selected]) {
+  .forge-list-item {
+    @include core.selected;
+
+    ::slotted([slot=leading]),
+    ::slotted([slot=trailing]) {
+      @include core.leading-trailing-selected;
+    }
+
+    ::slotted([slot=leading]) {
+      @include core.leading-selected;
+    }
+
+    ::slotted([slot=trailing]) {
+      @include core.trailing-selected;
+    }
+  }
+
+  .text-container {
+    @include core.text-container-selected;
+  }
+
+  forge-state-layer {
+    @include state-layer.provide-theme((
+      color: var(--_selected-color)
+    ));
+  }
+}
+
+// Indented
+:host([indented]) {
+  @include core.indented;
+}
+
+// Base
+.forge-list-item {
+  @include configuration.configuration;
+  @include core.base;
+}
+
+// Anchor base
+a.forge-list-item {
+  @include core.anchor-link;
+}
+
+// Text container base
+.text-container {
+  @include core.text-container;
+}
+
+// Supporting text slotted elements
+slot[name=secondary-text],
+slot[name=subtitle],
+slot[name=tertiary-text],
+slot[name=tertiary-title] {
+  &::slotted(*) {
+    @include core.supporting-text;
+  }
+
+  :host([selected]) &::slotted(*) {
+    @include core.supporting-text-selected;
+  }
+}
+
+// Avatar slotted elements
+::slotted([slot=avatar]) {
+  @include core.avatar;
+}
+
+// Leading/trailing slotted elements
+::slotted([slot=leading]),
+::slotted([slot=trailing]) {
+  @include core.leading-trailing-base;
+}
+
+// Leading slotted elements
+::slotted([slot=leading]) {
+  @include core.leading;
+
+  :host([selected]) & {
+    @include core.leading-selected;
+  }
+
+  :host([dense]) & {
+    @include core.leading-dense;
+  }
+}
+
+// Trailing slotted elements
+::slotted([slot=trailing]) {
+  @include core.trailing;
+
+  :host([selected]) & {
+    @include core.trailing-selected;
+  }
+
+  :host([dense]) & {
+    @include core.trailing-dense;
+  }
+}
+
+// Wrap styles
+:host([wrap]) {
+  .forge-list-item {
+    @include core.wrap;
+  }
+
+  .text-container {
+    @include core.text-container-wrap;
+  }
+
+  slot[name=secondary-text],
+  slot[name=subtitle],
+  slot[name=tertiary-text],
+  slot[name=tertiary-title] {
+    &::slotted(*) {
+      @include core.supporting-text-wrap;
+    }
+  }
+}
+
+forge-focus-indicator {
+  @include focus-indicator.provide-theme((
+    shape: shape.variable(medium)
+  ));
+}
+
+forge-state-layer {
+  border-radius: inherit;
 }
diff --git a/src/lib/list/list-item/list-item.ts b/src/lib/list/list-item/list-item.ts
index b85ffb7df..1e7b4612c 100644
--- a/src/lib/list/list-item/list-item.ts
+++ b/src/lib/list/list-item/list-item.ts
@@ -1,30 +1,29 @@
-import { CustomElement, attachShadowTemplate, requireParent, elementParents, coerceBoolean, FoundationProperty } from '@tylertech/forge-core';
+import { CustomElement, attachShadowTemplate, ICustomElement, FoundationProperty, coerceBoolean } from '@tylertech/forge-core';
 import { ListItemAdapter } from './list-item-adapter';
 import { ListItemFoundation } from './list-item-foundation';
 import { IListItemSelectEventData, LIST_ITEM_CONSTANTS } from './list-item-constants';
-import { LIST_CONSTANTS } from '../list/list-constants';
-import { IListComponent } from '../list';
-import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
+import { StateLayerComponent } from '../../state-layer';
+import { FocusIndicatorComponent } from '../../focus-indicator';
 
-import defaultTemplate from './list-item.html';
+import template from './list-item.html';
 import styles from './list-item.scss';
 
-export interface IListItemComponent extends IBaseComponent {
-  static: boolean;
-  twoLine: boolean;
-  threeLine: boolean;
-  active: boolean;
-  selected: boolean;
-  value: any;
+export interface IListItemComponent<T = unknown> extends ICustomElement {
   href: string;
   target: string;
-  ripple: boolean;
+  /** @deprecated Use nonInteractive instead. */
+  static: boolean;
+  nonInteractive: boolean;
   disabled: boolean;
+  selected: boolean;
+  active: boolean;
+  value: T;
   dense: boolean;
   propagateClick: boolean;
   indented: boolean;
+  twoLine: boolean;
+  threeLine: boolean;
   wrap: boolean;
-  focus(): void;
 }
 
 declare global {
@@ -38,30 +37,121 @@ declare global {
 }
 
 /**
- * The custom element class behind the `<forge-list-item>` element.
- * 
  * @tag forge-list-item
+ * 
+ * @summary List items are individual rows of content inside of a list.
+ * 
+ * @property {string} href - The href of the list item. This forces the list item to render as an anchor element.
+ * @property {string} target - The target of the list item when an `href` is set. Defaults to `'_blank'`.
+ * @property {boolean} nonInteractive - If true, the list item will not be interactive.
+ * @property {boolean} static - If true, the list item will not be interactive. Deprecated use `nonInteractive` instead.
+ * @property {boolean} disabled - Disables the list item.
+ * @property {boolean} selected - Applies the selected state to the list item.
+ * @property {boolean} active - Applies the active state to the list item by emulating its focused state.
+ * @property {unknown} value - The unique value of the list item.
+ * @property {boolean} dense - Applies the dense state to the list item.
+ * @property {boolean} propagateClick - If true, the list item will not propagate click events to itself and therefore cannot receive focus.
+ * @property {boolean} indented - Applies the indented state by adding margin to the start of the list item.
+ * @property {boolean} twoLine - Sets the list item height to support at least two lines of text.
+ * @property {boolean} threeLine - Sets the list item height to support at least three lines of text.
+ * @property {boolean} wrap - Sets the list item to wrap its text content.
+ * 
+ * @attribute {string} href - The href of the list item. This forces the list item to render as an anchor element.
+ * @attribute {string} target - The target of the list item when an `href` is set. Defaults to `'_blank'`.
+ * @attribute {boolean} non-interactive - If true, the list item will not be interactive.
+ * @attribute {boolean} static - If true, the list item will not be interactive. Deprecated use `non-interactive` instead.
+ * @attribute {boolean} disabled - Disables the list item.
+ * @attribute {boolean} selected - Applies the selected state to the list item.
+ * @attribute {boolean} active - Applies the active state to the list item by emulating its focused state.
+ * @attribute {unknown} value - The unique value of the list item.
+ * @attribute {boolean} dense - Applies the dense state to the list item.
+ * @attribute {boolean} propagate-click - If applied, the list item will not propagate click events to itself and therefore cannot receive focus.
+ * @attribute {boolean} indented - Applies the indented state by adding margin to the start of the list item.
+ * @attribute {boolean} two-line - Sets the list item height to support at least two lines of text.
+ * @attribute {boolean} three-line - Sets the list item height to support at least three lines of text.
+ * @attribute {boolean} wrap - Sets the list item to wrap its text content.
+ * 
+ * @event {CustomEvent<IListItemSelectEventData>} forge-list-item-select - Fires when the list item is selected.
+ * 
+ * @slot - The primary text.
+ * @slot primary-text - The primary text. A named alias for the default slot.
+ * @slot secondary-text - The secondary text.
+ * @slot tertiary-text - The tertiary text.
+ * @slot title - The title element. An alias for the primary-text slot for backwards compatibility.
+ * @slot subtitle - The subtitle element. An alias for the secondary-text slot for backwards compatibility.
+ * @slot tertiary-title - The tertiary title element. An alias for the tertiary-text slot for backwards compatibility.
+ * @slot leading - The leading content.
+ * @slot trailing - The trailing element.
+ * @slot avatar - The avatar content.
+ * 
+ * @csspart root - The root container element.
+ * @csspart text-container - The container for the text content.
+ * @csspart focus-indicator__indicator - The forwarded focus indicator's internal indicator element.
+ * @csspart state-layer__surface - The forwarded state layer's internal surface element.
+ * 
+ * @cssprop --forge-list-item-background-color - The background color.
+ * @cssprop --forge-list-item-shape - The shape of the list item.
+ * @cssprop --forge-list-item-padding - The padding inside of the container element.
+ * @cssprop --forge-list-item-margin - The margin around the host element.
+ * @cssprop --forge-list-item-height - The height of the container.
+ * @cssprop --forge-list-item-dense-height - The height when in the dense state.
+ * @cssprop --forge-list-item-indent - The margin inline state when in the indented state.
+ * @cssprop --forge-list-item-supporting-text-color - The text color of the supporting text.
+ * @cssprop --forge-list-item-supporting-line-height - The line height of the supporting text.
+ * @cssprop --forge-list-item-selected-color - The color when in the selected state.
+ * @cssprop --forge-list-item-opacity - The opacity of the background color when in the disabled state.
+ * @cssprop --forge-list-item-selected-leading-color - The color of the leading content when in the selected state.
+ * @cssprop --forge-list-item-selected-trailing-color - The color of the trailing content when in the selected state.
+ * @cssprop --forge-list-item-selected-supporting-text-color - The color of the supporting text when in the selected state.
+ * @cssprop --forge-list-item-disabled-opacity - The opacity of the element when in the disabled state.
+ * @cssprop --forge-list-item-disabled-cursor - The cursor when in the disabled state.
+ * @cssprop --forge-list-item-one-line-height - The line height when in the one/single line state.
+ * @cssprop --forge-list-item-two-line-height - The line height when in the two line state.
+ * @cssprop --forge-list-item-three-line-height - The line height when in the three line state.
+ * @cssprop --forge-list-item-dense-one-line-height - The line height when in the dense one/single line state.
+ * @cssprop --forge-list-item-dense-two-line-height - The line height when in the dense two line state.
+ * @cssprop --forge-list-item-dense-three-line-height - The line height when in the dense three line state.
+ * @cssprop --forge-list-item-dense-font-size - The font size when in the dense state.
+ * @cssprop --forge-list-item-dense-indent - The margin inline state when in the dense indented state.
+ * @cssprop --forge-list-item-dense-leading-margin-end - The margin end of the leading content when in the dense state.
+ * @cssprop --forge-list-item-dense-trailing-margin-start - The margin start of the trailing content when in the dense state.
+ * @cssprop --forge-list-item-leading-margin-start - The margin start of the leading content.
+ * @cssprop --forge-list-item-leading-margin-end - The margin end of the leading content.
+ * @cssprop --forge-list-item-leading-selected-color - The color of the leading content when in the selected state.
+ * @cssprop --forge-list-item-trailing-margin-start - The margin start of the trailing content.
+ * @cssprop --forge-list-item-trailing-margin-end - The margin end of the trailing content.
+ * @cssprop --forge-list-item-trailing-selected-color - The color of the trailing content when in the selected state.
+ * @cssprop --forge-list-item-avatar-background-color - The background color of the avatar container.
+ * @cssprop --forge-list-item-avatar-color - The foreground color of the avatar container.
+ * @cssprop --forge-list-item-avatar-shape - The shape of the avatar container.
+ * @cssprop --forge-list-item-avatar-margin-start - The margin start of the avatar container.
+ * @cssprop --forge-list-item-avatar-margin-end - The margin end of the avatar container.
+ * @cssprop --forge-list-item-avatar-size - The height & width of the avatar container.
  */
 @CustomElement({
-  name: LIST_ITEM_CONSTANTS.elementName
+  name: LIST_ITEM_CONSTANTS.elementName,
+  dependencies: [
+    StateLayerComponent,
+    FocusIndicatorComponent
+  ]
 })
-export class ListItemComponent extends BaseComponent implements IListItemComponent {
+export class ListItemComponent extends HTMLElement implements IListItemComponent {
   public static get observedAttributes(): string[] {
     return [
-      LIST_ITEM_CONSTANTS.attributes.STATIC,
-      LIST_ITEM_CONSTANTS.attributes.TWO_LINE,
-      LIST_ITEM_CONSTANTS.attributes.THREE_LINE,
-      LIST_ITEM_CONSTANTS.attributes.ACTIVE,
-      LIST_ITEM_CONSTANTS.attributes.SELECTED,
-      LIST_ITEM_CONSTANTS.attributes.VALUE,
-      LIST_ITEM_CONSTANTS.attributes.HREF,
-      LIST_ITEM_CONSTANTS.attributes.TARGET,
-      LIST_ITEM_CONSTANTS.attributes.RIPPLE,
-      LIST_ITEM_CONSTANTS.attributes.DISABLED,
-      LIST_ITEM_CONSTANTS.attributes.DENSE,
-      LIST_ITEM_CONSTANTS.attributes.PROPAGATE_CLICK,
-      LIST_ITEM_CONSTANTS.attributes.INDENTED,
-      LIST_ITEM_CONSTANTS.attributes.WRAP
+      LIST_ITEM_CONSTANTS.observedAttributes.HREF,
+      LIST_ITEM_CONSTANTS.observedAttributes.TARGET,
+      LIST_ITEM_CONSTANTS.observedAttributes.STATIC,
+      LIST_ITEM_CONSTANTS.observedAttributes.NON_INTERACTIVE,
+      LIST_ITEM_CONSTANTS.observedAttributes.DISABLED,
+      LIST_ITEM_CONSTANTS.observedAttributes.SELECTED,
+      LIST_ITEM_CONSTANTS.observedAttributes.ACTIVE,
+      LIST_ITEM_CONSTANTS.observedAttributes.VALUE,
+      LIST_ITEM_CONSTANTS.observedAttributes.DENSE,
+      LIST_ITEM_CONSTANTS.observedAttributes.PROPAGATE_CLICK,
+      LIST_ITEM_CONSTANTS.observedAttributes.INDENTED,
+      LIST_ITEM_CONSTANTS.observedAttributes.TWO_LINE,
+      LIST_ITEM_CONSTANTS.observedAttributes.THREE_LINE,
+      LIST_ITEM_CONSTANTS.observedAttributes.WRAP
     ];
   }
 
@@ -69,23 +159,11 @@ export class ListItemComponent extends BaseComponent implements IListItemCompone
 
   constructor() {
     super();
-    attachShadowTemplate(this, defaultTemplate, styles);
+    attachShadowTemplate(this, template, styles);
     this._foundation = new ListItemFoundation(new ListItemAdapter(this));
   }
 
   public connectedCallback(): void {
-    // To simulate the :host-context() selector for Firefox until they implement it, we need to determine if the
-    // list item is within a drawer for auto-styling the list item when included within a drawer. Check to see if
-    // any of the parents of this element are a drawer.
-    if (!this.hasAttribute(LIST_ITEM_CONSTANTS.attributes.DRAWER_CONTEXT) && elementParents(this).some(el => ['forge-drawer', 'forge-modal-drawer', 'forge-mini-drawer'].includes(el.tagName.toLowerCase()))) {
-      this.setAttribute(LIST_ITEM_CONSTANTS.attributes.DRAWER_CONTEXT, 'true');
-    }
-
-    const list = requireParent<IListComponent>(this, LIST_CONSTANTS.elementName);
-    if (list) {
-      this._inheritParentListProps(list);
-    }
-
     this._foundation.initialize();
   }
 
@@ -95,124 +173,93 @@ export class ListItemComponent extends BaseComponent implements IListItemCompone
 
   public attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
     switch (name) {
-      case LIST_ITEM_CONSTANTS.attributes.STATIC:
-        this.static = coerceBoolean(newValue);
+      case LIST_ITEM_CONSTANTS.observedAttributes.HREF:
+        this.href = newValue;
         break;
-      case LIST_ITEM_CONSTANTS.attributes.TWO_LINE:
-        this.twoLine = coerceBoolean(newValue);
+      case LIST_ITEM_CONSTANTS.observedAttributes.TARGET:
+        this.target = newValue;
         break;
-      case LIST_ITEM_CONSTANTS.attributes.THREE_LINE:
-        this.threeLine = coerceBoolean(newValue);
+      case LIST_ITEM_CONSTANTS.observedAttributes.NON_INTERACTIVE:
+      case LIST_ITEM_CONSTANTS.observedAttributes.STATIC:
+        this.nonInteractive = coerceBoolean(newValue);
         break;
-      case LIST_ITEM_CONSTANTS.attributes.ACTIVE:
-        this.active = coerceBoolean(newValue);
+      case LIST_ITEM_CONSTANTS.observedAttributes.DISABLED:
+        this.disabled = coerceBoolean(newValue);
         break;
-      case LIST_ITEM_CONSTANTS.attributes.SELECTED:
+      case LIST_ITEM_CONSTANTS.observedAttributes.SELECTED:
         this.selected = coerceBoolean(newValue);
         break;
-      case LIST_ITEM_CONSTANTS.attributes.VALUE:
-        this.value = newValue;
-        break;
-      case LIST_ITEM_CONSTANTS.attributes.HREF:
-        this.href = newValue;
-        break;
-      case LIST_ITEM_CONSTANTS.attributes.TARGET:
-        this.target = newValue;
-        break;
-      case LIST_ITEM_CONSTANTS.attributes.RIPPLE:
-        this.ripple = coerceBoolean(newValue);
+      case LIST_ITEM_CONSTANTS.observedAttributes.ACTIVE:
+        this.active = coerceBoolean(newValue);
         break;
-      case LIST_ITEM_CONSTANTS.attributes.DISABLED:
-        this.disabled = coerceBoolean(newValue);
+      case LIST_ITEM_CONSTANTS.observedAttributes.VALUE:
+        this.value = newValue;
         break;
-      case LIST_ITEM_CONSTANTS.attributes.DENSE:
+      case LIST_ITEM_CONSTANTS.observedAttributes.DENSE:
         this.dense = coerceBoolean(newValue);
         break;
-      case LIST_ITEM_CONSTANTS.attributes.PROPAGATE_CLICK:
+      case LIST_ITEM_CONSTANTS.observedAttributes.PROPAGATE_CLICK:
         this.propagateClick = coerceBoolean(newValue);
         break;
-      case LIST_ITEM_CONSTANTS.attributes.INDENTED:
+      case LIST_ITEM_CONSTANTS.observedAttributes.INDENTED:
         this.indented = coerceBoolean(newValue);
         break;
-      case LIST_ITEM_CONSTANTS.attributes.WRAP:
+      case LIST_ITEM_CONSTANTS.observedAttributes.TWO_LINE:
+        this.twoLine = coerceBoolean(newValue);
+        break;
+      case LIST_ITEM_CONSTANTS.observedAttributes.THREE_LINE:
+        this.threeLine = coerceBoolean(newValue);
+        break;
+      case LIST_ITEM_CONSTANTS.observedAttributes.WRAP:
         this.wrap = coerceBoolean(newValue);
         break;
     }
   }
 
-  private _inheritParentListProps(list: IListComponent): void {
-    if (list.hasAttribute(LIST_CONSTANTS.attributes.STATIC)) {
-      this.static = true;
-    }
-    if (list.hasAttribute(LIST_CONSTANTS.attributes.DENSE)) {
-      this.dense = true;
-    }
-    if (list.getAttribute(LIST_CONSTANTS.attributes.PROPAGATE_CLICK) === 'false') {
-      this.propagateClick = false;
-    }
-    if (list.hasAttribute(LIST_CONSTANTS.attributes.INDENTED)) {
-      this.indented = true;
-    }
+  public override focus(): void {
+    this._foundation.setFocus();
   }
 
-  /** Gets/sets whether the static state of this list item. */
   @FoundationProperty()
-  public declare static: boolean;
+  public declare href: string;
 
-  /** Gets/sets whether the list item displays two lines of text. */
   @FoundationProperty()
-  public declare twoLine: boolean;
+  public declare target: string;
 
-  /** Gets/sets whether the list item displays three lines of text. */
+  /** @deprecated Use nonInteractive instead. */
   @FoundationProperty()
-  public declare threeLine: boolean;
+  public declare static: boolean;
 
-  /** Gets/sets whether the list item is active or not. */
   @FoundationProperty()
-  public declare active: boolean;
+  public declare nonInteractive: boolean;
 
-  /** Gets/sets whether the list item is selected or not. */
   @FoundationProperty()
-  public declare selected: boolean;
+  public declare disabled: boolean;
 
-  /** Gets/sets list item value. */
   @FoundationProperty()
-  public declare value: any;
+  public declare selected: boolean;
 
-  /** Gets/sets the href link that this list item will send the browser to when clicked. */
   @FoundationProperty()
-  public declare href: string;
+  public declare active: boolean;
 
-  /** Gets/sets the href link target. Only pertains when `href` is also used. */
   @FoundationProperty()
-  public declare target: string;
+  public declare value: unknown;
 
-  /** Gets/sets whether the list item has a ripple or not. */
   @FoundationProperty()
-  public declare ripple: boolean;
+  public declare dense: boolean;
 
-  /** Gets/sets whether the list item is disabled or not. */
   @FoundationProperty()
-  public declare disabled: boolean;
+  public declare propagateClick: boolean;
 
-  /** Gets/sets whether the list item is using dense styles or not. */
   @FoundationProperty()
-  public declare dense: boolean;
+  public declare indented: boolean;
 
-  /** Gets/sets whether the list item allows mousedown events through to the underlying list item element. Default is true. */
   @FoundationProperty()
-  public declare propagateClick: boolean;
+  public declare twoLine: boolean;
 
-  /** Gets/sets whether the list item is indented or not. Default is false. */
   @FoundationProperty()
-  public declare indented: boolean;
+  public declare threeLine: boolean;
 
-  /** Gets/sets whether the list item content is wrapped or not. Default is true. */
   @FoundationProperty()
   public declare wrap: boolean;
-
-  /** Sets focus to this list item. */
-  public override focus(): void {
-    this._foundation.setFocus();
-  }
 }
diff --git a/src/lib/list/list.test.ts b/src/lib/list/list.test.ts
new file mode 100644
index 000000000..cf8a91ef2
--- /dev/null
+++ b/src/lib/list/list.test.ts
@@ -0,0 +1,546 @@
+import { expect } from '@esm-bundle/chai';
+import { nothing } from 'lit';
+import { elementUpdated, fixture, html } from '@open-wc/testing';
+import { getShadowElement } from '@tylertech/forge-core';
+import sinon from 'sinon';
+import { TestHarness } from '../../test/utils/test-harness';
+import { IFocusIndicatorComponent } from '../focus-indicator/focus-indicator';
+import { IStateLayerComponent } from '../state-layer/state-layer';
+import { IListItemComponent, LIST_ITEM_CONSTANTS } from './list-item';
+import './list/list';
+import { IListComponent } from './list/list';
+import { LIST_CONSTANTS } from './list/list-constants';
+
+const DEFAULT_HREF = 'https://www.tylertech.com/';
+
+describe('List', () => {
+  it('should be accessible', async () => {
+    const ctx = await createFixture();
+    await expect(ctx.list).to.be.accessible();
+  });
+
+  it('should have a default role of list', async () => {
+    const ctx = await createFixture();
+    expect(ctx.list.getAttribute('role')).to.equal('list');
+    expect(ctx.listItemsAttr('role', 'listitem')).to.true;
+  });
+
+  it('should set role to listbox', async () => {
+    const ctx = await createFixture({ role: 'listbox' });
+    expect(ctx.list.getAttribute('role')).to.equal('listbox');
+    expect(ctx.listItemsAttr('role', 'option')).to.true;
+  });
+
+  it('should set role to menu', async () => {
+    const ctx = await createFixture({ role: 'menu' });
+    expect(ctx.list.getAttribute('role')).to.equal('menu');
+    expect(ctx.listItemsAttr('role', 'menuitem')).to.true;
+  });
+
+  it('should update role dynamically', async () => {
+    const ctx = await createFixture();
+    expect(ctx.listItemsAttr('role', 'listitem')).to.true;
+    
+    ctx.list.role = 'listbox';
+    expect(ctx.listItemsAttr('role', 'option')).to.true;
+
+    ctx.list.role = 'menu';
+    expect(ctx.listItemsAttr('role', 'menuitem')).to.true;
+
+    ctx.list.role = 'list';
+    expect(ctx.listItemsAttr('role', 'listitem')).to.true;
+  });
+
+  it('should dispatch select event when clicked', async () => {
+    const ctx = await createFixture();
+    const spy = sinon.spy();
+    ctx.list.addEventListener('forge-list-item-select', spy);
+    ctx.listItems[1].click();
+    expect(spy).to.have.been.calledOnceWith(sinon.match.has('detail', sinon.match.has('value', '2')));
+  });
+
+  it('should dispatch select event when enter key is pressed', async () => {
+    const ctx = await createFixture();
+    const spy = sinon.spy();
+    ctx.list.addEventListener('forge-list-item-select', spy);
+    ctx.listItems[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+    expect(spy).to.have.been.calledOnceWith(sinon.match.has('detail', sinon.match.has('value', '2')));
+  });
+
+  it('should dispatch select event when space key is pressed', async () => {
+    const ctx = await createFixture();
+    const spy = sinon.spy();
+    ctx.list.addEventListener('forge-list-item-select', spy);
+    ctx.listItems[1].dispatchEvent(new KeyboardEvent('keydown', { key: ' ' }));
+    expect(spy).to.have.been.calledOnceWith(sinon.match.has('detail', sinon.match.has('value', '2')));
+  });
+
+  it('should not dispatch select event when disabled', async () => {
+    const ctx = await createFixture({ disabled: true });
+    const spy = sinon.spy();
+    ctx.list.addEventListener('forge-list-item-select', spy);
+    ctx.listItems[1].click();
+    ctx.listItems[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+    ctx.listItems[1].dispatchEvent(new KeyboardEvent('keydown', { key: ' ' }));
+    expect(spy).to.not.have.been.called;
+  });
+
+  it('should not dispatch select event when noninteractive', async () => {
+    const ctx = await createFixture({ nonInteractive: true });
+    const spy = sinon.spy();
+    ctx.list.addEventListener('forge-list-item-select', spy);
+    ctx.listItems[1].click();
+    ctx.listItems[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+    ctx.listItems[1].dispatchEvent(new KeyboardEvent('keydown', { key: ' ' }));
+    expect(spy).to.not.have.been.called;
+  });
+
+  it('should set selected via selectedValue on list', async () => {
+    const ctx = await createFixture({ selectedValue: '2' });
+
+    expect(ctx.listItems[1].selected).to.true;
+    expect(ctx.listItems.filter(li => li.selected).length).to.be.equal(1);
+    await expect(ctx.list).to.be.accessible();
+  });
+
+  it('should set selected value via attribute', async () => {
+    const ctx = await createFixture();
+
+    ctx.list.setAttribute(LIST_CONSTANTS.attributes.SELECTED_VALUE, '2');
+    expect(ctx.list.selectedValue).to.equal('2');
+    expect(ctx.listItems[1].selected).to.be.true;
+  });
+
+  it('should remove selected value', async () => {
+    const ctx = await createFixture({ selectedValue: '2' });
+
+    expect(ctx.listItems[1].selected).to.true;
+
+    ctx.list.selectedValue = null;
+    expect(ctx.listItems.filter(li => li.selected).length).to.be.equal(0);
+  });
+
+  it('should render anchor element when href is set', async () => {
+    const ctx = await createFixture({ anchor: true });
+    const anchor = ctx.getListItemRootElement(0) as HTMLAnchorElement;
+
+    expect(anchor).to.be.instanceOf(HTMLAnchorElement);
+    expect(ctx.listItems[0].href).to.equal(DEFAULT_HREF);
+    expect(ctx.listItems[0].getAttribute(LIST_ITEM_CONSTANTS.attributes.HREF)).to.equal(DEFAULT_HREF);
+    expect(anchor.href).to.equal(DEFAULT_HREF);
+    expect(anchor.target).to.equal('_blank');
+    await expect(ctx.list).to.be.accessible();
+  });
+
+  it('should set anchor target', async () => {
+    const ctx = await createFixture({ anchor: true, anchorTarget: '_self' });
+    const anchor = ctx.getListItemRootElement(0) as HTMLAnchorElement;
+
+    expect(anchor).to.be.instanceOf(HTMLAnchorElement);
+    expect(ctx.listItems[0].target).to.equal('_self');
+    expect(ctx.listItems[0].getAttribute(LIST_ITEM_CONSTANTS.attributes.TARGET)).to.equal('_self');
+    expect(anchor.href).to.equal(DEFAULT_HREF);
+    expect(anchor.target).to.equal('_self');
+  });
+
+  it('should reset root element when href is removed', async () => {
+    const ctx = await createFixture({ anchor: true });
+    const anchor = ctx.getListItemRootElement(0) as HTMLAnchorElement;
+
+    expect(anchor).to.be.instanceOf(HTMLAnchorElement);
+
+    ctx.listItems[0].href = '';
+    expect(ctx.getListItemRootElement(0)).to.be.instanceOf(HTMLDivElement);
+  });
+
+  it('should update anchor target element', async () => {
+    const ctx = await createFixture({ anchor: true });
+    const anchor = ctx.getListItemRootElement(0) as HTMLAnchorElement;
+
+    expect(anchor.target).to.equal('_blank');
+    
+    ctx.listItems[0].target = '_self';
+    expect(anchor.target).to.equal('_self');
+  });
+
+  it('should set disabled', async () => {
+    const ctx = await createFixture({ disabled: true });
+
+    expect(ctx.listItemsAttr('disabled', '')).to.true;
+    expect(ctx.listItemsTabIndex(-1)).to.true;
+    expect(ctx.hasStateLayer()).to.be.false;
+    expect(ctx.hasFocusIndicator()).to.be.false;
+    await expect(ctx.list).to.be.accessible();
+  });
+
+  it('should re-enable interactivity after disabled', async () => {
+    const ctx = await createFixture({ disabled: true });
+
+    expect(ctx.hasStateLayer()).to.be.false;
+    expect(ctx.hasFocusIndicator()).to.be.false;
+
+    ctx.list.disabled = false;
+    expect(ctx.listItemsTabIndex(0)).to.true;
+    expect(ctx.hasStateLayer()).to.be.true;
+    expect(ctx.hasFocusIndicator()).to.be.true; 
+  });
+
+  it('should set nonInteractive', async () => {
+    const ctx = await createFixture({ nonInteractive: true });
+
+    expect(ctx.listItemsTabIndex(-1)).to.true;
+    expect(ctx.hasStateLayer()).to.be.false;
+    expect(ctx.hasFocusIndicator()).to.be.false;
+    await expect(ctx.list).to.be.accessible();
+  });
+
+  it('should set non-interactive via static attribute for backwards compatibility', async () => {
+    const ctx = await createFixture();
+
+    ctx.list.static = true;
+    expect(ctx.list.static).to.be.true;
+    expect(ctx.list.nonInteractive).to.be.true;
+    expect(ctx.listItemsTabIndex(-1)).to.true;
+    expect(ctx.listItemsAttr(LIST_ITEM_CONSTANTS.attributes.STATIC, '')).to.true;
+    expect(ctx.listItemsAttr(LIST_ITEM_CONSTANTS.attributes.NON_INTERACTIVE, '')).to.true;
+    expect(ctx.hasStateLayer()).to.be.false;
+    expect(ctx.hasFocusIndicator()).to.be.false;
+
+    ctx.list.static = false;
+    expect(ctx.list.static).to.be.false;
+    expect(ctx.list.nonInteractive).to.be.false;
+    expect(ctx.listItemsTabIndex(0)).to.true;
+    expect(ctx.listItemsAttr(LIST_ITEM_CONSTANTS.attributes.STATIC, '')).to.false;
+    expect(ctx.listItemsAttr(LIST_ITEM_CONSTANTS.attributes.NON_INTERACTIVE, '')).to.false;
+    expect(ctx.hasStateLayer()).to.be.true;
+    expect(ctx.hasFocusIndicator()).to.be.true;
+
+    ctx.listItems[0].static = true;
+    expect(ctx.listItems[0].static).to.be.true;
+    expect(ctx.listItems[0].nonInteractive).to.be.true;
+  });
+
+  it('should re-enable interactivity after nonInteractive', async () => {
+    const ctx = await createFixture({ nonInteractive: true });
+
+    expect(ctx.hasStateLayer()).to.be.false;
+    expect(ctx.hasFocusIndicator()).to.be.false;
+
+    ctx.list.nonInteractive = false;
+    expect(ctx.listItemsTabIndex(0)).to.true;
+    expect(ctx.hasStateLayer()).to.be.true;
+    expect(ctx.hasFocusIndicator()).to.be.true;
+  });
+
+  it('should set dense', async () => {
+    const ctx = await createFixture({ dense: true });
+
+    expect(ctx.list.hasAttribute(LIST_ITEM_CONSTANTS.attributes.DENSE)).to.true;
+    expect(ctx.listItemsAttr('dense', '')).to.true;
+
+    ctx.list.dense = false;
+
+    expect(ctx.list.hasAttribute(LIST_ITEM_CONSTANTS.attributes.DENSE)).to.false;
+    expect(ctx.listItemsAttr('dense', '')).to.false;
+  });
+
+  it('should set indented', async () => {
+    const ctx = await createFixture({ indented: true });
+
+    expect(ctx.list.hasAttribute(LIST_ITEM_CONSTANTS.attributes.INDENTED)).to.true;
+    expect(ctx.listItemsAttr('indented', '')).to.true;
+
+    ctx.list.indented = false;
+
+    expect(ctx.list.hasAttribute(LIST_ITEM_CONSTANTS.attributes.INDENTED)).to.false;
+    expect(ctx.listItemsAttr('indented', '')).to.false;
+  });
+
+  it('should set twoLine', async () => {
+    const ctx = await createFixture({ twoLine: true });
+
+    expect(ctx.list.hasAttribute(LIST_ITEM_CONSTANTS.attributes.TWO_LINE)).to.true;
+    expect(ctx.listItemsAttr('two-line', '')).to.true;
+
+    ctx.list.twoLine = false;
+
+    expect(ctx.list.hasAttribute(LIST_ITEM_CONSTANTS.attributes.TWO_LINE)).to.false;
+    expect(ctx.listItemsAttr('two-line', '')).to.false;
+  });
+
+  it('should set threeLine', async () => {
+    const ctx = await createFixture({ threeLine: true });
+
+    expect(ctx.list.hasAttribute(LIST_ITEM_CONSTANTS.attributes.THREE_LINE)).to.true;
+    expect(ctx.listItemsAttr('three-line', '')).to.true;
+
+    ctx.list.threeLine = false;
+
+    expect(ctx.list.hasAttribute(LIST_ITEM_CONSTANTS.attributes.THREE_LINE)).to.false;
+    expect(ctx.listItemsAttr('three-line', '')).to.false;
+  });
+
+  it('should set wrap', async () => {
+    const ctx = await createFixture({ wrap: true });
+
+    expect(ctx.list.hasAttribute(LIST_ITEM_CONSTANTS.attributes.WRAP)).to.true;
+    expect(ctx.listItemsAttr('wrap', '')).to.true;
+
+    ctx.list.wrap = false;
+
+    expect(ctx.list.hasAttribute(LIST_ITEM_CONSTANTS.attributes.WRAP)).to.false;
+    expect(ctx.listItemsAttr('wrap', '')).to.false;
+  });
+
+  it('should focus next item when down arrow key is pressed', async () => {
+    const ctx = await createFixture();
+
+    ctx.focusListItem(0);
+    ctx.listItemPressKey(0, 'ArrowDown');
+    expect(ctx.isListItemFocused(1)).to.be.true;
+  });
+
+  it('should focus previous item when down up key is pressed', async () => {
+    const ctx = await createFixture();
+
+    ctx.focusListItem(1);
+    ctx.listItemPressKey(1, 'ArrowUp');
+    expect(ctx.isListItemFocused(0)).to.be.true;
+  });
+
+  it('should focus first item when home key is pressed', async () => {
+    const ctx = await createFixture();
+
+    ctx.focusListItem(1);
+    ctx.listItemPressKey(1, 'Home');
+    expect(ctx.isListItemFocused(0)).to.be.true;
+  });
+
+  it('should focus last item when end key is pressed', async () => {
+    const ctx = await createFixture();
+
+    ctx.focusListItem(1);
+    ctx.listItemPressKey(1, 'End');
+    expect(ctx.isListItemFocused(2)).to.be.true;
+  });
+
+  it('should cycle focus to first item when down arrow pressed on last item', async () => {
+    const ctx = await createFixture();
+
+    ctx.focusListItem(2);
+    ctx.listItemPressKey(2, 'ArrowDown');
+    expect(ctx.isListItemFocused(0)).to.be.true;
+  });
+
+  it('should cycle focus to last item when up arrow pressed on first item', async () => {
+    const ctx = await createFixture();
+
+    ctx.focusListItem(0);
+    ctx.listItemPressKey(0, 'ArrowUp');
+    expect(ctx.isListItemFocused(2)).to.be.true;
+  });
+
+  it('should not move focus when modifier key is pressed', async () => {
+    const ctx = await createFixture();
+
+    ctx.focusListItem(1);
+    ctx.listItemPressKey(1, 'ArrowDown', { shiftKey: true });
+    ctx.listItemPressKey(1, 'ArrowDown', { altKey: true });
+    ctx.listItemPressKey(1, 'ArrowDown', { ctrlKey: true });
+    ctx.listItemPressKey(1, 'ArrowDown', { metaKey: true });
+    expect(ctx.isListItemFocused(1)).to.be.true;
+  });
+
+  it('should activate focus indicator when active set', async () => {
+    const ctx = await createFixture();
+
+    ctx.listItems[1].active = true;
+    expect(ctx.listItems[1].active).to.be.true;
+    expect(ctx.listItems[1].hasAttribute(LIST_ITEM_CONSTANTS.attributes.ACTIVE)).to.be.true;
+    expect(ctx.listItemActive(0)).to.be.false; 
+    expect(ctx.listItemActive(1)).to.be.true; 
+    expect(ctx.listItemActive(0)).to.be.false; 
+  });
+
+  it('should set selected when value matches list selected value', async () => {
+    const ctx = await createFixture({ selectedValue: 'some-value' });
+
+    expect(ctx.listItems[1].selected).to.be.false;
+    
+    ctx.listItems[1].value = 'some-value';
+    expect(ctx.listItems[1].selected).to.be.true;
+  });
+
+  it('should toggle slotted checkbox when list item is selected', async () => {
+    const ctx = await createFixture({ withCheckbox: true });
+
+    expect(ctx.listItems[0].selected).to.be.false;
+    expect((ctx.listItems[0].querySelector('input[type=checkbox]') as HTMLInputElement)?.checked).to.be.false;
+
+    ctx.listItems[0].selected = true;
+    expect(ctx.listItems[0].selected).to.be.true;
+    expect((ctx.listItems[0].querySelector('input[type=checkbox]') as HTMLInputElement)?.checked).to.be.true;
+  });
+
+  it('should toggle slotted radio button when list item is selected', async () => {
+    const ctx = await createFixture({ withRadioButton: true });
+
+    expect(ctx.listItems[0].selected).to.be.false;
+    expect((ctx.listItems[0].querySelector('input[type=radio]') as HTMLInputElement)?.checked).to.be.false;
+
+    ctx.listItems[0].selected = true;
+    expect(ctx.listItems[0].selected).to.be.true;
+    expect((ctx.listItems[0].querySelector('input[type=radio]') as HTMLInputElement)?.checked).to.be.true;
+  });
+
+  it('should inherit parent list state when adding new list item', async () => {
+    const ctx = await createFixture({
+      role: 'listbox',
+      nonInteractive: true,
+      disabled: true,
+      dense: true,
+      propagateClick: false,
+      twoLine: true,
+      threeLine: true,
+      selectedValue: '4'
+    });
+
+    const listItem = document.createElement('forge-list-item');
+    listItem.value = '4';
+    ctx.list.appendChild(listItem);
+
+    expect(listItem.nonInteractive).to.be.true;
+    expect(listItem.disabled).to.be.true;
+    expect(listItem.dense).to.be.true;
+    expect(listItem.propagateClick).to.be.false;
+    expect(listItem.twoLine).to.be.true;
+    expect(listItem.threeLine).to.be.true;
+    expect(listItem.selected).to.be.true;
+    expect(listItem.role).to.equal('option');
+  });
+
+  it('should not dispatch select event if target element has forge-ignore attribute', async () => {
+    const ctx = await createFixture();
+    const spy = sinon.spy();
+    ctx.list.addEventListener('forge-list-item-select', spy);
+
+    const ignoredElement = document.createElement('button');
+    ignoredElement.type = 'button';
+    ignoredElement.setAttribute('forge-ignore', '');
+    ctx.listItems[0].appendChild(ignoredElement);
+
+    await elementUpdated(ctx.list);
+    ignoredElement.click();
+
+    expect(spy).to.not.have.been.called;
+  });
+});
+
+interface ListFixtureConfig {
+  role?: 'list' | 'listbox' | 'menu';
+  nonInteractive?: boolean;
+  disabled?: boolean;
+  dense?: boolean;
+  propagateClick?: boolean;
+  indented?: boolean;
+  selectedValue?: any;
+  twoLine?: boolean;
+  threeLine?: boolean;
+  wrap?: boolean;
+  anchor?: boolean;
+  anchorTarget?: '_blank' | '_self';
+  withCheckbox?: boolean;
+  withRadioButton?: boolean;
+}
+
+async function createFixture({
+  role,
+  nonInteractive,
+  disabled,
+  dense,
+  propagateClick,
+  indented,
+  selectedValue,
+  twoLine,
+  threeLine,
+  wrap,
+  anchor,
+  anchorTarget = '_blank',
+  withCheckbox,
+  withRadioButton
+}: ListFixtureConfig = {}): Promise<ListHarness> {
+  const el = await fixture<IListComponent>(html`
+    <forge-list
+      role=${role ?? nothing}
+      ?non-interactive=${nonInteractive}
+      ?disabled=${disabled}
+      ?dense=${dense}
+      ?indented=${indented}
+      ?two-line=${twoLine}
+      ?three-line=${threeLine}
+      ?wrap=${wrap}
+      .propagateClick=${propagateClick}
+      .selectedValue=${selectedValue}>
+      <forge-list-item .href=${anchor ? DEFAULT_HREF : ''} .target=${anchorTarget} value="1">
+        One
+        ${withCheckbox ? html`<input type="checkbox" slot="trailing" />` : null}
+        ${withRadioButton ? html`<input type="radio" slot="trailing" />` : null}
+      </forge-list-item>
+      <forge-list-item value="2">Two</forge-list-item>
+      <forge-list-item value="3">Three</forge-list-item>
+    </forge-list>
+  `);
+  return new ListHarness(el);
+}
+
+class ListHarness extends TestHarness<IListComponent> {
+  public list: IListComponent;
+  public listItems: IListItemComponent[];
+
+  constructor(el: IListComponent) {
+    super(el);
+  }
+  
+  public initElementRefs(): void {
+    this.list = this.element;
+    this.listItems = Array.from(this.element.querySelectorAll('forge-list-item'));
+  }
+
+  public listItemsAttr(attr: string, value: string): boolean {
+    return this.listItems.every(li => li.getAttribute(attr) === value);
+  }
+
+  public listItemsTabIndex(tabIndex: number): boolean {
+    return this.listItems.every(li => (li.shadowRoot?.firstElementChild as HTMLElement)?.tabIndex === tabIndex);
+  }
+
+  public getListItemRootElement(index: number): HTMLElement {
+    const item = this.listItems[index];
+    return item.shadowRoot!.querySelector(LIST_ITEM_CONSTANTS.selectors.ROOT) as HTMLElement;
+  }
+
+  public hasStateLayer(): boolean {
+    return this.listItems.every(li => !!(getShadowElement(li, 'forge-state-layer') as IStateLayerComponent));
+  }
+
+  public hasFocusIndicator(): boolean {
+    return this.listItems.every(li => !!(getShadowElement(li, 'forge-focus-indicator') as IFocusIndicatorComponent));
+  }
+
+  public listItemPressKey(index: number, key: string, modifierKeys?: { shiftKey?: true, altKey?: true, ctrlKey?: true, metaKey?: true }): void {
+    this.listItems[index].dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, ...modifierKeys }));
+  }
+
+  public focusListItem(index: number): void {
+    this.listItems[index].focus();
+  }
+
+  public isListItemFocused(index: number): boolean {
+    return this.listItems[index].matches(':focus');
+  }
+
+  public listItemActive(index: number): boolean {
+    const focusIndicator = getShadowElement(this.listItems[index], 'forge-focus-indicator') as IFocusIndicatorComponent;
+    return focusIndicator?.active;
+  }
+}
diff --git a/src/lib/list/list/_configuration.scss b/src/lib/list/list/_configuration.scss
new file mode 100644
index 000000000..267479d4f
--- /dev/null
+++ b/src/lib/list/list/_configuration.scss
@@ -0,0 +1,7 @@
+@use '../../core/styles/tokens/list/list/tokens';
+
+@mixin configuration {
+  --_container-color: #{tokens.get(container-color)};
+  --_block-padding: #{tokens.get(block-padding)};
+  --_inline-padding: #{tokens.get(inline-padding)};
+}
diff --git a/src/lib/list/list/_core.scss b/src/lib/list/list/_core.scss
new file mode 100644
index 000000000..ee5807632
--- /dev/null
+++ b/src/lib/list/list/_core.scss
@@ -0,0 +1,16 @@
+@use '../../core/styles/utils';
+@use '../../core/styles/tokens/list/list/tokens';
+
+@mixin provide-theme($theme) {
+  @include utils.provide(tokens.$tokens, $theme, list);
+}
+
+@mixin base {
+  display: block;
+  outline: none;
+  background-color: var(--_container-color);
+  padding: var(--_block-padding) var(--_inline-padding);
+  margin: 0;
+  border-radius: inherit;
+  min-width: inherit;
+}
diff --git a/src/lib/list/list/_mixins.scss b/src/lib/list/list/_mixins.scss
deleted file mode 100644
index 7d9dcbabd..000000000
--- a/src/lib/list/list/_mixins.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-@use 'sass:map';
-@use '@material/feature-targeting/feature-targeting' as mdc-feature-targeting;
-@use '@material/typography/typography' as mdc-typography;
-@use '../../theme';
-
-@mixin core-styles() {
-  .forge-list {
-    @include base;
-  }
-}
-
-@mixin host() {
-  display: block;
-  contain: content;
-}
-
-@mixin base($query: mdc-feature-targeting.all()) {
-  $feat-color: mdc-feature-targeting.create-target($query, color);
-  $feat-structure: mdc-feature-targeting.create-target($query, structure);
-  $feat-typography: mdc-feature-targeting.create-target($query, typography);
-
-  @include mdc-typography.typography(subtitle1, $query);
-  @include mdc-feature-targeting.targets($feat-typography) {
-    // According to the mocks and stickersheet, the line-height is
-    // adjusted to 24px for text content, same as for body1.
-    /* @alternate */
-    line-height: map.get(map.get(mdc-typography.$styles, body1), line-height);
-  }
-  @include mdc-feature-targeting.targets($feat-structure) {
-    @include theme.css-custom-property(padding-top, --forge-list-padding, 8px);
-    @include theme.css-custom-property(padding-bottom, --forge-list-padding, 8px);
-
-    margin: 0;
-    list-style-type: none;
-
-    &:focus {
-      outline: none;
-    }
-  }
-}
diff --git a/src/lib/list/list/index.scss b/src/lib/list/list/index.scss
new file mode 100644
index 000000000..c78abe8eb
--- /dev/null
+++ b/src/lib/list/list/index.scss
@@ -0,0 +1,2 @@
+@forward './configuration';
+@forward './core';
diff --git a/src/lib/list/list/index.ts b/src/lib/list/list/index.ts
index abd826e2f..5d0580369 100644
--- a/src/lib/list/list/index.ts
+++ b/src/lib/list/list/index.ts
@@ -1,5 +1,4 @@
 import { defineCustomElement } from '@tylertech/forge-core';
-
 import { ListComponent } from './list';
 
 export * from './list-adapter';
diff --git a/src/lib/list/list/list-adapter.ts b/src/lib/list/list/list-adapter.ts
index f05c5b6d1..b63acc972 100644
--- a/src/lib/list/list/list-adapter.ts
+++ b/src/lib/list/list/list-adapter.ts
@@ -1,124 +1,100 @@
-import { emitEvent, deepQuerySelectorAll, getActiveElement } from '@tylertech/forge-core';
-import { BaseAdapter, IBaseAdapter } from '../../core/base/base-adapter';
-import { IListItemComponent, LIST_ITEM_CONSTANTS } from '../list-item';
+import { isDeepEqual } from '@tylertech/forge-core';
+import { BaseAdapter } from '../../core/base/base-adapter';
 import { IListComponent } from './list';
-import { LIST_CONSTANTS } from './list-constants';
+import { LIST_ITEM_CONSTANTS } from '../list-item/list-item-constants';
+import { IListItemComponent } from '../list-item/list-item';
+import { ListComponentItemRole, LIST_CONSTANTS } from './list-constants';
 
-export interface IListAdapter extends IBaseAdapter {
-  initializeAccessibility(): void;
-  addListener(type: string, listener: (evt: Event) => void): void;
-  removeListener(type: string, listener: (evt: Event) => void): void;
-  getListItems(): IListItemComponent[];
+export interface IListAdapter extends BaseAdapter<IListComponent> {
+  initialize(): void;
   focusNextListItem(): void;
   focusPreviousListItem(): void;
   focusFirstListItem(): void;
   focusLastListItem(): void;
-  setSelectedListItems(values: any[]): void;
+  setSelectedListItems(values: unknown | unknown[]): void;
   updateListItems(cb: (li: IListItemComponent) => void): void;
+  updateListItemRole(): void;
 }
 
-/**
- * The DOM adapter for the `<forge-list>` component.
- */
 export class ListAdapter extends BaseAdapter<IListComponent> implements IListAdapter {
   constructor(component: IListComponent) {
     super(component);
   }
 
-  public initializeAccessibility(): void {
+  public initialize(): void {
     if (!this._component.hasAttribute('role')) {
       this._component.setAttribute('role', 'list');
     }
   }
 
-  /**
-   * Adds an event listener to the `<forge-list>` host element.
-   * @param {string} type The event type.
-   * @param {Function} listener The event callback.
-   */
-  public addListener(type: string, listener: (evt: Event) => void): void {
-    this._component.addEventListener(type, listener);
-  }
-
-  /**
-   * Removes an event listener to the `<forge-list>` host element.
-   * @param {string} type The event type.
-   * @param {Function} listener The event callback.
-   */
-  public removeListener(type: string, listener: (evt: Event) => void): void {
-    this._component.removeEventListener(type, listener);
-  }
-
-  /**
-   * Returns all child `<forge-list-item>` elements.
-   */
-  public getListItems(): IListItemComponent[] {
-    return Array.from(this._component.children).filter(child => child.tagName === LIST_ITEM_CONSTANTS.elementName.toUpperCase()) as IListItemComponent[];
-  }
-
-  /**
-   * Sets focus to the next item in the list.
-   */
+  /** Sets focus to the next item in the list. */
   public focusNextListItem(): void {
-    const listItems = deepQuerySelectorAll(this._component, LIST_CONSTANTS.selectors.FOCUSABLE_LIST_ITEMS, false) as HTMLElement[];
-
-    if (listItems && listItems.length > 0) {
-      const focusedListItemIndex = listItems.indexOf(getActiveElement(this._component.ownerDocument) as HTMLElement);
+    const listItems = this._getFocusableListItems();
+    if (listItems.length) {
+      const focusedListItemIndex = listItems.findIndex(item => item.matches(':focus'));
+      console.log('focusedListItemIndex', focusedListItemIndex);
       const nextIndex = focusedListItemIndex < listItems.length - 1 ? focusedListItemIndex + 1 : 0;
-
       if (nextIndex <= listItems.length - 1) {
-        listItems[nextIndex].focus();
+        listItems[nextIndex].focus({ preventScroll: true});
       }
     }
   }
 
-  /**
-   * Sets focus to the previous item in the list.
-   */
+  /** Sets focus to the previous item in the list. */
   public focusPreviousListItem(): void {
-    const listItems = deepQuerySelectorAll(this._component, LIST_CONSTANTS.selectors.FOCUSABLE_LIST_ITEMS, false) as HTMLElement[];
-
-    if (listItems && listItems.length > 0) {
-      const focusedListItemIndex = listItems.indexOf(getActiveElement(this._component.ownerDocument) as HTMLElement);
+    const listItems = this._getFocusableListItems();
+    if (listItems.length) {
+      const focusedListItemIndex = listItems.findIndex(item => item.matches(':focus'));
       const nextIndex = focusedListItemIndex > 0 ? focusedListItemIndex - 1 : listItems.length - 1;
-
       if (nextIndex >= 0) {
-        listItems[nextIndex].focus();
+        listItems[nextIndex].focus({ preventScroll: true});
       }
     }
   }
 
-  /**
-   * Sets focus to the first item in the list.
-   */
+  /** Sets focus to the first item in the list. */
   public focusFirstListItem(): void {
-    const listItems = deepQuerySelectorAll(this._component, LIST_CONSTANTS.selectors.FOCUSABLE_LIST_ITEMS, false) as HTMLElement[];
-
-    if (listItems && listItems.length > 0) {
-      listItems[0].focus();
+    const listItems = this._getFocusableListItems();
+    if (listItems.length) {
+      listItems[0].focus({ preventScroll: true});
     }
   }
 
-  /**
-   * Sets focus to the last item in the list.
-   */
+  /** Sets focus to the last item in the list. */
   public focusLastListItem(): void {
-    const listItems = deepQuerySelectorAll(this._component, LIST_CONSTANTS.selectors.FOCUSABLE_LIST_ITEMS, false) as HTMLElement[];
-    if (listItems && listItems.length > 0) {
-      listItems[listItems.length - 1].focus();
+    const listItems = this._getFocusableListItems();
+    if (listItems.length) {
+      listItems[listItems.length - 1].focus({ preventScroll: true});
     }
   }
 
-  public setSelectedListItems(values: any[]): void {
-    const listItems = Array.from(this._component.querySelectorAll(LIST_ITEM_CONSTANTS.elementName)) as IListItemComponent[];
-    if (listItems && listItems.length) {
+  /** Select all list items that match values in the provided array of values. */
+  public setSelectedListItems(value: unknown | unknown[]): void {
+    const listItems = this._getListItems();
+    if (listItems.length) {
+      const values = Array.isArray(value) ? value : [value];
       for (const item of listItems) {
-        item.selected = values.includes(item.value);
+        item.selected = values.some(val => isDeepEqual(val, item.value));
       }
     }
   }
 
+  /** Calls the provided callback on all list items to apply an updated property to each list item. */
   public updateListItems(cb: (li: IListItemComponent) => void): void {
-    this.getListItems().forEach(li => cb(li));
+    this._getListItems().forEach(cb);
+  }
+
+  public updateListItemRole(): void {
+    const role = ListComponentItemRole[this._component.getAttribute('role') as string] ?? 'listitem';
+    this.updateListItems(li => li.role = role);
+  }
+
+  private _getListItems(): IListItemComponent[] {
+    const listItems = Array.from(this._component.querySelectorAll(LIST_ITEM_CONSTANTS.elementName));
+    return listItems.filter(item => item.closest(LIST_CONSTANTS.elementName) === this._component) as IListItemComponent[];
+  }
+
+  private _getFocusableListItems(): IListItemComponent[] {
+    return this._getListItems().filter(li => !li.disabled && !li.nonInteractive && !li.hidden);
   }
 }
diff --git a/src/lib/list/list/list-constants.ts b/src/lib/list/list/list-constants.ts
index cb49dadba..59a583b66 100644
--- a/src/lib/list/list/list-constants.ts
+++ b/src/lib/list/list/list-constants.ts
@@ -1,21 +1,32 @@
 import { COMPONENT_NAME_PREFIX } from '../../constants';
 
-const elementName: keyof HTMLElementTagNameMap = `${COMPONENT_NAME_PREFIX}list`;
+const elementName = `${COMPONENT_NAME_PREFIX}list`;
 
-const attributes = {
+const observedAttributes = {
+  ROLE: 'role',
   STATIC: 'static',
+  NON_INTERACTIVE: 'non-interactive',
+  DISABLED: 'disabled',
   DENSE: 'dense',
   PROPAGATE_CLICK: 'propagate-click',
+  SELECTED_VALUE: 'selected-value',
   INDENTED: 'indented',
-  SELECTED_VALUE: 'selected-value'
+  TWO_LINE: 'two-line',
+  THREE_LINE: 'three-line',
+  WRAP: 'wrap'
 };
 
-const selectors = {
-  FOCUSABLE_LIST_ITEMS: '.forge-list-item:not(.forge-list-item--static):not(.forge-list-item--disabled)'
+const attributes = {
+  ...observedAttributes
 };
 
 export const LIST_CONSTANTS = {
   elementName,
-  attributes,
-  selectors
+  attributes
+};
+
+export const ListComponentItemRole = {
+  list: 'listitem',
+  listbox: 'option',
+  menu: 'menuitem'
 };
diff --git a/src/lib/list/list/list-foundation.ts b/src/lib/list/list/list-foundation.ts
index 561ac7ee4..36db6182c 100644
--- a/src/lib/list/list/list-foundation.ts
+++ b/src/lib/list/list/list-foundation.ts
@@ -1,116 +1,106 @@
-import { ICustomElementFoundation, isDefined } from '@tylertech/forge-core';
+import { ICustomElementFoundation } from '@tylertech/forge-core';
 
 import { IListAdapter } from './list-adapter';
 import { LIST_CONSTANTS } from './list-constants';
-import { LIST_ITEM_CONSTANTS, IListItemComponent, IListItemSelectEventData } from '../list-item';
 
 export interface IListFoundation extends ICustomElementFoundation {
   static: boolean;
+  nonInteractive: boolean;
+  disabled: boolean;
   dense: boolean;
   propagateClick: boolean;
   indented: boolean;
-  selectedValue: any;
+  selectedValue: unknown | unknown[];
+  twoLine: boolean;
+  threeLine: boolean;
+  wrap: boolean;
 }
 
-const ELEMENTS_KEY_ALLOWED_IN = ['input', 'button', 'textarea', 'select'];
-
-/**
- * The foundation class behind the `<forge-list>` component.
- */
 export class ListFoundation implements IListFoundation {
-  private _static = false;
+  private _nonInteractive = false;
+  private _disabled = false;
   private _dense = false;
   private _propagateClick = true;
   private _indented = false;
-  private _selectedValue: any;
-  private _keydownListener: (evt: KeyboardEvent) => void;
+  private _selectedValue: unknown | unknown[];
+  private _twoLine = false;
+  private _threeLine = false;
+  private _wrap = false;
+  private _keydownListener: EventListener;
 
   constructor(private _adapter: IListAdapter) {
-    this._keydownListener = (evt: KeyboardEvent) => this._onKeydown(evt);
+    this._keydownListener = this._onKeydown.bind(this);
   }
 
   public initialize(): void {
-    this._adapter.initializeAccessibility();
-    
-    if (!this._static) {
-      this._adapter.addListener('keydown', this._keydownListener);
+    this._adapter.initialize();
+
+    if (!this._nonInteractive) {
+      this._adapter.addHostListener('keydown', this._keydownListener);
     }
 
-    if (this._selectedValue) {
+    if (this._selectedValue !== undefined && this._selectedValue !== null) {
       this._adapter.setSelectedListItems(this._selectedValue);
     }
   }
 
   private _onKeydown(evt: KeyboardEvent): void {
-    const isArrowDown = evt.key === 'ArrowDown' || evt.keyCode === 40;
-    const isArrowUp = evt.key === 'ArrowUp' || evt.keyCode === 38;
-    const isHome = evt.key === 'Home' || evt.keyCode === 36;
-    const isEnd = evt.key === 'End' || evt.keyCode === 35;
-    const isTab = evt.key === 'Tab' || evt.keyCode === 9;
-
-    // We don't capture modifier keys
-    if (evt.altKey || evt.ctrlKey || evt.shiftKey || evt.metaKey) {
-      return;
-    }
+    const { key, altKey, ctrlKey, shiftKey, metaKey } = evt;
 
-    if (!isTab) {
-      this._preventDefaultEvent(evt);
+    if (altKey || ctrlKey || shiftKey || metaKey) {
+      return;
     }
 
-    if (isHome) {
+    if (key === 'Home') {
+      evt.preventDefault();
       this._adapter.focusFirstListItem();
-    } else if (isEnd) {
+    } else if (key === 'End') {
+      evt.preventDefault();
       this._adapter.focusLastListItem();
-    } else if (isArrowDown) {
-      this._adapter.focusNextListItem();
-    } else if (isArrowUp) {
+    } else if (key === 'ArrowUp') {
+      evt.preventDefault();
       this._adapter.focusPreviousListItem();
-    }
-  }
-
-  /**
-   * Ensures that preventDefault is only called if the containing element doesn't
-   * consume the event, and it will cause an unintended scroll.
-   * @param {Event} evt
-   */
-  private _preventDefaultEvent(evt: Event): void {
-    const tagName = `${(evt.target as HTMLElement).tagName}`.toLowerCase();
-    if (ELEMENTS_KEY_ALLOWED_IN.indexOf(tagName) === -1) {
+    } else if (key === 'ArrowDown') {
       evt.preventDefault();
+      this._adapter.focusNextListItem();
     }
   }
 
-  private _setSelectedValue(value: any): void {
-    let values = value instanceof Array ? value : [value];
-    values = values.filter(v => isDefined(v));
-    this._adapter.setSelectedListItems(values);
+  public updateRole(): void {
+    this._adapter.updateListItemRole();
   }
 
-  /** Gets/sets whether the list has all static items or not. */
   public get static(): boolean {
-    return this._static;
+    return this.nonInteractive;
   }
   public set static(value: boolean) {
-    if (this._static !== value) {
-      this._static = value;
-
-      if (!this._static) {
-        this._adapter.addListener('keydown', this._keydownListener);
-      } else {
-        this._adapter.removeListener('keydown', this._keydownListener);
-      }
-
-      this._adapter.updateListItems(li => li.static = this._static);
-
-      if (this._static) {
-        this._adapter.setHostAttribute(LIST_CONSTANTS.attributes.STATIC);
-      } else {
-        this._adapter.removeHostAttribute(LIST_CONSTANTS.attributes.STATIC);
-      }
+    this.nonInteractive = value;
+  }
+
+  public get nonInteractive(): boolean {
+    return this._nonInteractive;
+  }
+  public set nonInteractive(value: boolean) {
+    if (this._nonInteractive !== value) {
+      this._nonInteractive = value;
+      this._adapter.toggleHostListener('keydown', this._keydownListener, !this._nonInteractive);
+      this._adapter.updateListItems(li => li.nonInteractive = this._nonInteractive);
+      this._adapter.toggleHostAttribute(LIST_CONSTANTS.attributes.STATIC, this._nonInteractive);
+      this._adapter.toggleHostAttribute(LIST_CONSTANTS.attributes.NON_INTERACTIVE, this._nonInteractive);
+    }
+  }
+
+  public get disabled(): boolean {
+    return this._disabled;
+  }
+  public set disabled(value: boolean) {
+    if (this._disabled !== value) {
+      this._disabled = value;
+      this._adapter.updateListItems(li => li.disabled = this._disabled);
+      this._adapter.toggleHostAttribute(LIST_CONSTANTS.attributes.DISABLED, this._disabled);
     }
   }
 
-  /** Gets/sets whether the list has all dense items or not. */
   public get dense(): boolean {
     return this._dense;
   }
@@ -118,11 +108,7 @@ export class ListFoundation implements IListFoundation {
     if (this._dense !== value) {
       this._dense = value;
       this._adapter.updateListItems(li => li.dense = this._dense);
-      if (this._dense) {
-        this._adapter.setHostAttribute(LIST_CONSTANTS.attributes.DENSE);
-      } else {
-        this._adapter.removeHostAttribute(LIST_CONSTANTS.attributes.DENSE);
-      }
+      this._adapter.toggleHostAttribute(LIST_CONSTANTS.attributes.DENSE, this._dense);
     }
   }
 
@@ -133,7 +119,7 @@ export class ListFoundation implements IListFoundation {
     if (this._propagateClick !== value) {
       this._propagateClick = value;
       this._adapter.updateListItems(li => li.propagateClick = this._propagateClick);
-      this._adapter.setHostAttribute(LIST_CONSTANTS.attributes.PROPAGATE_CLICK, '' + !!this._propagateClick);
+      this._adapter.setHostAttribute(LIST_CONSTANTS.attributes.PROPAGATE_CLICK, this._propagateClick ? 'true' : 'false');
     }
   }
 
@@ -144,19 +130,50 @@ export class ListFoundation implements IListFoundation {
     if (this._indented !== value) {
       this._indented = value;
       this._adapter.updateListItems(li => li.indented = this._indented);
-      if (this._indented) {
-        this._adapter.setHostAttribute(LIST_CONSTANTS.attributes.INDENTED);
-      } else {
-        this._adapter.removeHostAttribute(LIST_CONSTANTS.attributes.INDENTED);
-      }
+      this._adapter.toggleHostAttribute(LIST_CONSTANTS.attributes.INDENTED, this._indented);
     }
   }
 
-  public get selectedValue(): any {
+  public get selectedValue(): unknown | unknown[] {
     return this._selectedValue;
   }
-  public set selectedValue(value: any) {
-    this._selectedValue = value;
-    this._setSelectedValue(value);
+  public set selectedValue(value: unknown | unknown[]) {
+    if (this._selectedValue !== value) {
+      this._selectedValue = value;
+      this._adapter.setSelectedListItems(this._selectedValue);
+    }
+  }
+
+  public get twoLine(): boolean {
+    return this._twoLine;
+  }
+  public set twoLine(value: boolean) {
+    if (this._twoLine !== value) {
+      this._twoLine = value;
+      this._adapter.updateListItems(li => li.twoLine = this._twoLine);
+      this._adapter.toggleHostAttribute(LIST_CONSTANTS.attributes.TWO_LINE, this._twoLine);
+    }
+  }
+
+  public get threeLine(): boolean {
+    return this._threeLine;
+  }
+  public set threeLine(value: boolean) {
+    if (this._threeLine !== value) {
+      this._threeLine = value;
+      this._adapter.updateListItems(li => li.threeLine = this._threeLine);
+      this._adapter.toggleHostAttribute(LIST_CONSTANTS.attributes.THREE_LINE, this._threeLine);
+    }
+  }
+
+  public get wrap(): boolean {
+    return this._wrap;
+  }
+  public set wrap(value: boolean) {
+    if (this._wrap !== value) {
+      this._wrap = value;
+      this._adapter.updateListItems(li => li.wrap = this._wrap);
+      this._adapter.toggleHostAttribute(LIST_CONSTANTS.attributes.WRAP, this._wrap);
+    }
   }
 }
diff --git a/src/lib/list/list/list.html b/src/lib/list/list/list.html
index 9e4c361fb..574f866a1 100644
--- a/src/lib/list/list/list.html
+++ b/src/lib/list/list/list.html
@@ -2,4 +2,4 @@
   <div class="forge-list" part="root">
     <slot></slot>
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/lib/list/list/list.scss b/src/lib/list/list/list.scss
index e956eeb05..635e08787 100644
--- a/src/lib/list/list/list.scss
+++ b/src/lib/list/list/list.scss
@@ -1,11 +1,26 @@
-@use './mixins';
-
-@include mixins.core-styles;
+@use './configuration';
+@use './core';
+@use '../list-item';
 
 :host {
-  @include mixins.host;
+  display: block;
 }
 
 :host([hidden]) {
   display: none;
 }
+
+:host([navlist]) {
+  @include list-item.provide-theme((
+    height: 40px,
+    margin: 4px 8px,
+    shape: 4px,
+    supporting-text-font-size: 0.875rem,
+    supporting-text-font-weight: 500
+  ));
+}
+
+.forge-list {
+  @include configuration.configuration;
+  @include core.base;
+}
diff --git a/src/lib/list/list/list.ts b/src/lib/list/list/list.ts
index 6580807ba..52ec4184f 100644
--- a/src/lib/list/list/list.ts
+++ b/src/lib/list/list/list.ts
@@ -1,19 +1,25 @@
-import { attachShadowTemplate, coerceBoolean, CustomElement, FoundationProperty } from '@tylertech/forge-core';
+import { CustomElement, attachShadowTemplate, FoundationProperty, coerceBoolean } from '@tylertech/forge-core';
 import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
-import { ListItemComponent } from '../list-item';
 import { ListAdapter } from './list-adapter';
-import { LIST_CONSTANTS } from './list-constants';
 import { ListFoundation } from './list-foundation';
+import { LIST_CONSTANTS } from './list-constants';
 
 import template from './list.html';
 import styles from './list.scss';
+import { ListItemComponent } from '../list-item';
 
 export interface IListComponent extends IBaseComponent {
+  /** @deprecated Use nonInteractive instead. */
   static: boolean;
+  nonInteractive: boolean;
+  disabled: boolean;
   dense: boolean;
   propagateClick: boolean;
   indented: boolean;
   selectedValue: any;
+  twoLine: boolean;
+  threeLine: boolean;
+  wrap: boolean;
 }
 
 declare global {
@@ -23,22 +29,63 @@ declare global {
 }
 
 /**
- * The custom element class behind the `<forge-list>` element.
- * 
  * @tag forge-list
+ * 
+ * @summary Lists are vertical groupings of related content.
+ * 
+ * @csspart root - The component's root container element.
+ * 
+ * @slot - The default/unnamed slot for child list items.
+ *
+ * @cssproperty --forge-list-container-color - The background color of the list surface,
+ * @cssproperty --forge-list-block-padding - The block padding of the list before and after the list items.
+ * @cssproperty --forge-list-inline-padding - The inline padding of the list next to the list items.
+ * 
+ * @property {string} role - The role of the list. Default is 'list'. Valid values are 'list', 'listbox', and 'menu'.
+ * @property {boolean} static - Whether the list has all static items or not.
+ * @property {boolean} nonInteractive - Whether the list has all non-interactive items or not.
+ * @property {boolean} disabled - Whether the list items are disabled or not.
+ * @property {boolean} dense - Whether the list has all dense items or not.
+ * @property {boolean} propagateClick - Whether the list items propagate click events or not.
+ * @property {boolean} indented - Whether the list items within this list are indented. Default is false.
+ * @property {unknown | unknown[]} selectedValue - The selected list item value(s).
+ * @property {boolean} twoLine - Whether the list has all two-line items or not.
+ * @property {boolean} threeLine - Whether the list has all three-line items or not.
+ * @property {boolean} wrap - Whether the list has all items that wrap their text or not.
+ * 
+ * @attribute {string} role - The role of the list. Default is 'list'. Valid values are 'list', 'listbox', and 'menu'.
+ * @attribute {boolean} static - Whether the list has all static items or not.
+ * @attribute {boolean} non-interactive - Whether the list has all non-interactive items or not.
+ * @attribute {boolean} disabled - Whether the list items are disabled or not.
+ * @attribute {boolean} dense - Whether the list has all dense items or not.
+ * @attribute {boolean} propagate-click - Whether the list items propagate click events or not.
+ * @attribute {string} selected-value - The selected list item value(s).
+ * @attribute {boolean} indented - Whether the list items within this list are indented. Default is false.
+ * @attribute {boolean} two-line - Whether the list has all two-line items or not.
+ * @attribute {boolean} three-line - Whether the list has all three-line items or not.
+ * @attribute {boolean} wrap - Whether the list has all items that wrap their text or not.
+ * @attribute {boolean} navlist - Controls whether the list is styled a navigation list or not.
  */
 @CustomElement({
   name: LIST_CONSTANTS.elementName,
-  dependencies: [ListItemComponent]
+  dependencies: [
+    ListItemComponent
+  ]
 })
 export class ListComponent extends BaseComponent implements IListComponent {
   public static get observedAttributes(): string[] {
     return [
+      LIST_CONSTANTS.attributes.ROLE,
       LIST_CONSTANTS.attributes.STATIC,
+      LIST_CONSTANTS.attributes.NON_INTERACTIVE,
+      LIST_CONSTANTS.attributes.DISABLED,
       LIST_CONSTANTS.attributes.DENSE,
-      LIST_CONSTANTS.attributes.SELECTED_VALUE,
       LIST_CONSTANTS.attributes.PROPAGATE_CLICK,
-      LIST_CONSTANTS.attributes.INDENTED
+      LIST_CONSTANTS.attributes.SELECTED_VALUE,
+      LIST_CONSTANTS.attributes.INDENTED,
+      LIST_CONSTANTS.attributes.TWO_LINE,
+      LIST_CONSTANTS.attributes.THREE_LINE,
+      LIST_CONSTANTS.attributes.WRAP
     ];
   }
 
@@ -50,14 +97,21 @@ export class ListComponent extends BaseComponent implements IListComponent {
     this._foundation = new ListFoundation(new ListAdapter(this));
   }
 
-  public initializedCallback(): void {
+  public connectedCallback(): void {
     this._foundation.initialize();
   }
 
   public attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
     switch (name) {
+      case LIST_CONSTANTS.attributes.ROLE:
+        this._foundation.updateRole();
+        break;
       case LIST_CONSTANTS.attributes.STATIC:
-        this.static = coerceBoolean(newValue);
+      case LIST_CONSTANTS.attributes.NON_INTERACTIVE:
+        this.nonInteractive = coerceBoolean(newValue);
+        break;
+      case LIST_CONSTANTS.attributes.DISABLED:
+        this.disabled = coerceBoolean(newValue);
         break;
       case LIST_CONSTANTS.attributes.DENSE:
         this.dense = coerceBoolean(newValue);
@@ -71,26 +125,45 @@ export class ListComponent extends BaseComponent implements IListComponent {
       case LIST_CONSTANTS.attributes.SELECTED_VALUE:
         this.selectedValue = newValue;
         break;
+      case LIST_CONSTANTS.attributes.TWO_LINE:
+        this.twoLine = coerceBoolean(newValue);
+        break;
+      case LIST_CONSTANTS.attributes.THREE_LINE:
+        this.threeLine = coerceBoolean(newValue);
+        break;
+      case LIST_CONSTANTS.attributes.WRAP:
+        this.wrap = coerceBoolean(newValue);
+        break;
     }
   }
 
-  /** Gets/sets whether the list has all static items or not. */
   @FoundationProperty()
   public declare static: boolean;
 
-  /** Gets/sets whether the list has all dense items or not. */
+  @FoundationProperty()
+  public declare nonInteractive: boolean;
+
+  @FoundationProperty()
+  public declare disabled: boolean;
+
   @FoundationProperty()
   public declare dense: boolean;
 
-  /** Gets/sets whether the list items allow mousedown events through to their underlying list item elements. Default is true. */
   @FoundationProperty()
   public declare propagateClick: boolean;
 
-  /** Gets/sets whether the list items within this list are indented. Default is false. */
   @FoundationProperty()
   public declare indented: boolean;
 
-  /** Gets/sets the selected list item value(s) */
   @FoundationProperty()
   public declare selectedValue: any;
+
+  @FoundationProperty()
+  public declare twoLine: boolean;
+
+  @FoundationProperty()
+  public declare threeLine: boolean;
+
+  @FoundationProperty()
+  public declare wrap: boolean;
 }
diff --git a/src/lib/menu/build.json b/src/lib/menu/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/menu/build.json
+++ b/src/lib/menu/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/open-icon/build.json b/src/lib/open-icon/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/open-icon/build.json
+++ b/src/lib/open-icon/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/page-state/build.json b/src/lib/page-state/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/page-state/build.json
+++ b/src/lib/page-state/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/paginator/build.json b/src/lib/paginator/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/paginator/build.json
+++ b/src/lib/paginator/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/paginator/paginator-adapter.ts b/src/lib/paginator/paginator-adapter.ts
index 88dc137cf..20885d416 100644
--- a/src/lib/paginator/paginator-adapter.ts
+++ b/src/lib/paginator/paginator-adapter.ts
@@ -5,40 +5,43 @@ import { ISelectComponent, ISelectOption } from '../select';
 import { IPaginatorComponent } from './paginator';
 import { PaginatorAlternativeAlignment, PAGINATOR_CONSTANTS } from './paginator-constants';
 
+export type PaginatorFieldIdentifier = 'first' | 'last' | 'previous' | 'next' | 'page-size';
+
 export interface IPaginatorAdapter extends IBaseAdapter {
-  setLabel: (value: string) => void;
-  setPageSizeOptions: (options: ISelectOption[]) => void;
-  setPageSize: (value: number) => void;
-  setRangeLabel: (value: string) => void;
+  setLabel(value: string): void;
+  setPageSizeOptions(options: ISelectOption[]): void;
+  setPageSize(value: number): void;
+  setRangeLabel(value: string): void;
   hasFirstPageButton(): boolean;
   showFirstPageButton(): void;
   hideFirstPageButton(): void;
   hasLastPageButton(): boolean;
   showLastPageButton(): void;
   hideLastPageButton(): void;
-  attachPageSizeChangeListener: (listener: (evt: CustomEvent) => void) => void;
-  attachFirstPageListener: (listener: (evt: Event) => void) => void;
-  attachPreviousPageListener: (listener: (evt: Event) => void) => void;
-  attachNextPageListener: (listener: (evt: Event) => void) => void;
-  attachLastPageListener: (listener: (evt: Event) => void) => void;
-  detachPageSizeChangeListener: (listener: (evt: CustomEvent) => void) => void;
-  detachFirstPageListener: (listener: (evt: Event) => void) => void;
-  detachPreviousPageListener: (listener: (evt: Event) => void) => void;
-  detachNextPageListener: (listener: (evt: Event) => void) => void;
-  detachLastPageListener: (listener: (evt: Event) => void) => void;
-  disableFirstPageButton: () => void;
-  enableFirstPageButton: () => void;
-  disablePreviousPageButton: () => void;
-  enablePreviousPageButton: () => void;
-  disableNextPageButton: () => void;
-  enableNextPageButton: () => void;
+  attachPageSizeChangeListener(listener: (evt: CustomEvent) => void): void;
+  attachFirstPageListener(listener: (evt: Event) => void): void;
+  attachPreviousPageListener(listener: (evt: Event) => void): void;
+  attachNextPageListener(listener: (evt: Event) => void): void;
+  attachLastPageListener(listener: (evt: Event) => void): void;
+  detachPageSizeChangeListener(listener: (evt: CustomEvent) => void): void;
+  detachFirstPageListener(listener: (evt: Event) => void): void;
+  detachPreviousPageListener(listener: (evt: Event) => void): void;
+  detachNextPageListener(listener: (evt: Event) => void): void;
+  detachLastPageListener(listener: (evt: Event) => void): void;
+  disableFirstPageButton(): void;
+  enableFirstPageButton(): void;
+  disablePreviousPageButton(): void;
+  enablePreviousPageButton(): void;
+  disableNextPageButton(): void;
+  enableNextPageButton(): void;
   disablePageSizeSelect(): void;
   enablePageSizeSelect(): void;
   setPageSizeVisibility(visible: boolean): void;
-  disableLastPageButton: () => void;
-  enableLastPageButton: () => void;
-  setAlternative: (alternative: boolean) => void;
-  setAlignment: (alignment: PaginatorAlternativeAlignment) => void;
+  disableLastPageButton(): void;
+  enableLastPageButton(): void;
+  setAlternative(alternative: boolean): void;
+  setAlignment(alignment: PaginatorAlternativeAlignment): void;
+  handleFocusMove(from: PaginatorFieldIdentifier): void;
 }
 
 /**
@@ -256,4 +259,62 @@ export class PaginatorAdapter extends BaseAdapter<IPaginatorComponent> implement
         break;
     }
   }
+
+  public handleFocusMove(from: PaginatorFieldIdentifier): void {
+    if (!this._component.matches(':focus')) {
+      return; // We can only move focus elsewhere within the element if the element already contains focus
+    }
+
+    switch (from) {
+      case 'first':
+        this._tryFocus([
+          this._nextPageButton,
+          this._lastPageButton,
+          this._previousPageButton,
+          this._pageSizeSelect
+        ]);
+        break;
+      case 'last':
+        this._tryFocus([
+          this._previousPageButton,
+          this._firstPageButton,
+          this._nextPageButton,
+          this._pageSizeSelect
+        ]);
+        break;
+      case 'previous':
+        this._tryFocus([
+          this._nextPageButton,
+          this._lastPageButton,
+          this._firstPageButton,
+          this._pageSizeSelect
+        ]);
+        break;
+      case 'next':
+        this._tryFocus([
+          this._previousPageButton,
+          this._firstPageButton,
+          this._lastPageButton,
+          this._pageSizeSelect
+        ]);
+        break;
+      case 'page-size':
+        this._tryFocus([
+          this._nextPageButton,
+          this._lastPageButton,
+          this._firstPageButton,
+          this._previousPageButton
+        ]);
+        break;
+    }
+  }
+
+  private _tryFocus(elements: Array<HTMLButtonElement | ISelectComponent>): void {
+    for (const el of elements) {
+      if (el && el.isConnected && !el.disabled) {
+        el.focus();
+        return;
+      }
+    }
+  }
 }
diff --git a/src/lib/paginator/paginator-foundation.ts b/src/lib/paginator/paginator-foundation.ts
index c05a9a473..f0bd56144 100644
--- a/src/lib/paginator/paginator-foundation.ts
+++ b/src/lib/paginator/paginator-foundation.ts
@@ -1,8 +1,7 @@
 import { coerceNumber, ICustomElementFoundation, isArray, isDefined } from '@tylertech/forge-core';
-import { IPaginatorAdapter } from './paginator-adapter';
+import { IPaginatorAdapter, PaginatorFieldIdentifier } from './paginator-adapter';
 import { PaginatorAlternativeAlignment, PAGINATOR_CONSTANTS, IPaginatorChangeEvent } from './paginator-constants';
-import { ISelectOption, ISelectComponent } from '../select';
-
+import { ISelectOption } from '../select';
 
 export interface IPaginatorFoundation extends ICustomElementFoundation {
   pageIndex: number;
@@ -11,229 +10,44 @@ export interface IPaginatorFoundation extends ICustomElementFoundation {
   total: number;
   pageSizeOptions: number[] | boolean;
   pageSizeLabel: string;
-  initialize(): void;
 }
 
-/**
- * The foundation class behind the `<forge-paginator>` component.
- */
 export class PaginatorFoundation {
-  // Backing models
   private _pageIndex = PAGINATOR_CONSTANTS.numbers.DEFAULT_PAGE_INDEX;
   private _pageSize = PAGINATOR_CONSTANTS.numbers.DEFAULT_PAGE_SIZE;
+  private _offset = 0;
   private _total = PAGINATOR_CONSTANTS.numbers.DEFAULT_TOTAL;
-  private _pageSizeOptions: ISelectOption[] = [];
+  private _pageSizeOptions: ISelectOption[] = PAGINATOR_CONSTANTS.numbers.DEFAULT_PAGE_SIZE_OPTIONS.map(o => ({ label: `${o}`, value: `${o}` }));
   private _label = PAGINATOR_CONSTANTS.strings.DEFAULT_LABEL;
   private _firstLast = false;
   private _first = false;
   private _disabled = false;
   private _alternative: boolean;
   private _alignment: PaginatorAlternativeAlignment = 'space-between';
+  private _rangeLabel: string;
 
-  // Listeners
   private _firstPageListener: (evt: Event) => void;
   private _previousPageListener: (evt: Event) => void;
   private _nextPageListener: (evt: Event) => void;
   private _lastPageListener: (evt: Event) => void;
   private _pageSizeListener: (evt: Event) => void;
 
-  // State variables
-  private _rangeLabel: string;
-
   constructor(private _adapter: IPaginatorAdapter) {
-    // Create listeners
-    this._pageSizeListener = (evt: CustomEvent) => this._onPageSizeChanged(evt);
+    this._pageSizeListener = (evt: CustomEvent<number>) => this._onPageSizeChanged(evt);
     this._firstPageListener = (evt: Event) => this._onFirstPage(evt);
     this._previousPageListener = (evt: Event) => this._onPreviousPage(evt);
     this._nextPageListener = (evt: Event) => this._onNextPage(evt);
     this._lastPageListener = (evt: Event) => this._onLastPage(evt);
-
-    this._pageSizeOptions = PAGINATOR_CONSTANTS.numbers.DEFAULT_PAGE_SIZE_OPTIONS.map(o => ({ label: o.toString(), value: o.toString() }));
-  }
-
-  /** The zero-based page index. Default is 0. */
-  public set pageIndex(value: number) {
-    if (this._pageIndex !== value) {
-      if (isDefined(value)) {
-        this._pageIndex = value;
-        this._update();
-        this._adapter.setHostAttribute(PAGINATOR_CONSTANTS.attributes.PAGE_INDEX, this._pageIndex.toString());
-      } else {
-        this._adapter.removeHostAttribute(PAGINATOR_CONSTANTS.attributes.PAGE_INDEX);
-      }
-    }
-  }
-  public get pageIndex(): number {
-    return this._pageIndex;
-  }
-
-  /** Number of items to display on a page. By default set to 25. */
-  public set pageSize(value: number) {
-    if (this._pageSize !== value) {
-      this._pageSize = value;
-      this._adapter.setPageSize(this._pageSize);
-      this._update();
-      this._adapter.setHostAttribute(PAGINATOR_CONSTANTS.attributes.PAGE_SIZE, this._pageSize.toString());
-    }
-  }
-  public get pageSize(): number {
-    return this._pageSize;
-  }
-
-  /** Sets page index by providing the number of items to skip. */
-  public set offset(value: number) {
-    if (value >= this._total) {
-      if (this._total >= this._pageSize) {
-        value = this._total - this._pageSize;
-      } else {
-        value = 0;
-      }
-    }
-    const clampedValue = Math.min(Math.max(value, 0), this._total);
-    this.pageIndex = Math.floor(clampedValue / this._pageSize);
-  }
-  public get offset(): number {
-    return this._pageIndex * this._pageSize;
-  }
-
-  /** The total number of items to be paginated. Default is 0. */
-  public set total(value: number) {
-    if (this._total !== value) {
-      this._total = value;
-      this._update();
-      this._adapter.setHostAttribute(PAGINATOR_CONSTANTS.attributes.TOTAL, this._total.toString());
-    }
-  }
-  public get total(): number {
-    return this._total;
-  }
-
-  /** The set of provided page size options to display to the user. */
-  public set pageSizeOptions(options: number[] | boolean) {
-    if (isArray(options)) {
-      this._pageSizeOptions = (options as number[])
-        .map(o => ({ label: o.toString(), value: o.toString() }))
-        .sort((a, b) => coerceNumber(a.value) - coerceNumber(b.value));
-      this._adapter.setPageSizeOptions(this._pageSizeOptions);
-      this._adapter.attachPageSizeChangeListener(this._pageSizeListener);
-      this._adapter.setPageSizeVisibility(true);
-      if (isDefined(this._pageSize) && this._pageSizeOptions.length && !this._pageSizeOptions.find(o => coerceNumber(o.value) === this._pageSize)) {
-        this.pageSize = coerceNumber(this._pageSizeOptions[0].value);
-      }
-    } else if (options.toString().toLowerCase() === 'false') {
-      this._adapter.detachPageSizeChangeListener(this._pageSizeListener);
-      this._adapter.setPageSizeVisibility(false);
-    }
-  }
-  public get pageSizeOptions(): number[] | boolean {
-    return this._pageSizeOptions.map(o => Number(o.value));
-  }
-
-  /** A label for the paginator. Default is "Rows per page:". */
-  public set label(value: string) {
-    if (this._label !== value) {
-      this._label = value;
-      this._adapter.setLabel(this._label);
-      this._adapter.setHostAttribute(PAGINATOR_CONSTANTS.attributes.LABEL, isDefined(this._label) ? this._label.toString() : '');
-    }
-  }
-  public get label(): string {
-    return this._label;
-  }
-
-  /** Whether to show the first page and last page buttons. Default is false. */
-  public set firstLast(value: boolean) {
-    if (this._firstLast !== value) {
-      this._firstLast = value;
-      this._toggleFirstLastButtons();
-
-      if (this._firstLast) {
-        this._adapter.setHostAttribute(PAGINATOR_CONSTANTS.attributes.FIRST_LAST);
-      } else {
-        this._adapter.removeHostAttribute(PAGINATOR_CONSTANTS.attributes.FIRST_LAST);
-      }
-    }
-  }
-  public get firstLast(): boolean {
-    return this._firstLast;
-  }
-
-  /** Whether to show the first page button. Default is false. */
-  public set first(value: boolean) {
-    if (this._first !== value) {
-      this._first = value;
-      this._toggleFirstButton();
-
-      if (this._first) {
-        this._adapter.setHostAttribute(PAGINATOR_CONSTANTS.attributes.FIRST);
-      } else {
-        this._adapter.removeHostAttribute(PAGINATOR_CONSTANTS.attributes.FIRST);
-      }
-    }
   }
 
-  public get first(): boolean {
-    return this._first;
-  }
-
-  /** Whether the paginator is disabled. Default is false. */
-  public set disabled(value: boolean) {
-    if (this._disabled !== value) {
-      this._disabled = value;
-      this._update();
-
-      if (this._disabled) {
-        this._adapter.setHostAttribute(PAGINATOR_CONSTANTS.attributes.DISABLED);
-      } else {
-        this._adapter.removeHostAttribute(PAGINATOR_CONSTANTS.attributes.DISABLED);
-      }
-    }
-  }
-  public get disabled(): boolean {
-    return this._disabled;
-  }
-
-  public get alternative(): boolean {
-    return this._alternative;
-  }
-  public set alternative(value: boolean) {
-    if (value !== this._alternative) {
-      this._alternative = value;
-      this._applyAlternative();
-    }
-  }
-
-  public get alignment(): PaginatorAlternativeAlignment {
-    return this._alignment;
-  }
-  public set alignment(value: PaginatorAlternativeAlignment) {
-    if (value !== this._alignment) {
-      this._alignment = value;
-      this._applyAlternativeAlignment();
-    }
-  }
-
-  private _applyAlternativeAlignment(): void {
-    this._adapter.setHostAttribute(PAGINATOR_CONSTANTS.attributes.ALIGNMENT, this._alignment);
-    this._adapter.setAlignment(this._alignment);
-  }
-
-  private _applyAlternative(): void {
-    this._adapter.toggleHostAttribute(PAGINATOR_CONSTANTS.attributes.ALTERNATIVE, this._alternative);
-    this._adapter.setAlternative(this._alternative);
-    this._applyAlternativeAlignment();
-  }
-
-  /**
-   * Intializes the internal state when the component loads.
-   */
   public initialize(): void {
-    this._update();
+    this._updateRangeLabel();
     this._adapter.setLabel(this._label);
     this._adapter.setPageSizeOptions(this._pageSizeOptions);
     this._adapter.setPageSize(this._pageSize);
     this._attachListeners();
     this._toggleFirstLastButtons();
+    this._syncInteractionState();
   }
 
   public disconnect(): void {
@@ -256,10 +70,6 @@ export class PaginatorFoundation {
     this._adapter.detachLastPageListener(this._lastPageListener);
   }
 
-  /**
-   * Handles clicking the first page button.
-   * @param evt The click event.
-   */
   private _onFirstPage(evt: Event): void {
     evt.stopPropagation();
 
@@ -270,14 +80,10 @@ export class PaginatorFoundation {
     const firstPage = 0;
     const canPage = this._emitChangeEvent(PAGINATOR_CONSTANTS.strings.FIRST_PAGE, { pageIndex: firstPage });
     if (canPage) {
-      this.pageIndex = firstPage;
+      this._applyPageIndex(firstPage, { fromField: 'first' });
     }
   }
 
-  /**
-   * Handles clicking the previous page button.
-   * @param evt The click event.
-   */
   private _onPreviousPage(evt: Event): void {
     evt.stopPropagation();
 
@@ -288,14 +94,10 @@ export class PaginatorFoundation {
     const prevPage = this._pageIndex - 1;
     const canPage = this._emitChangeEvent(PAGINATOR_CONSTANTS.strings.PREVIOUS_PAGE, { pageIndex: prevPage });
     if (canPage) {
-      this.pageIndex = prevPage;
+      this._applyPageIndex(prevPage, { fromField: 'previous' });
     }
   }
 
-  /**
-   * Handles clicking the next page button.
-   * @param evt The click event.
-   */
   private _onNextPage(evt: Event): void {
     evt.stopPropagation();
 
@@ -306,14 +108,10 @@ export class PaginatorFoundation {
     const nextPage = this._pageIndex + 1;
     const canPage = this._emitChangeEvent(PAGINATOR_CONSTANTS.strings.NEXT_PAGE, { pageIndex: nextPage });
     if (canPage) {
-      this.pageIndex = nextPage;
+      this._applyPageIndex(nextPage, { fromField: 'next' });
     }
   }
 
-  /**
-   * Handles clicking the last page button.
-   * @param evt The click event.
-   */
   private _onLastPage(evt: Event): void {
     evt.stopPropagation();
 
@@ -324,22 +122,18 @@ export class PaginatorFoundation {
     const lastPage = this._getMaxPages();
     const canPage = this._emitChangeEvent(PAGINATOR_CONSTANTS.strings.LAST_PAGE, { pageIndex: lastPage });
     if (canPage) {
-      this.pageIndex = lastPage;
+      this._applyPageIndex(lastPage, { fromField: 'last' });
     }
   }
 
-  /**
-   * Handles selecting a new item in the page size options.
-   * @param evt The select custom event.
-   */
   private _onPageSizeChanged(evt: CustomEvent): void {
     evt.stopPropagation();
 
     const pageSize = Number(evt.detail);
     const canPage = this._emitChangeEvent(PAGINATOR_CONSTANTS.strings.PAGE_SIZE, { pageIndex: 0, pageSize });
     if (canPage) {
-      this.pageIndex = 0;
-      this.pageSize = pageSize;
+      this._applyPageIndex(0, { fromField: 'page-size' });
+      this._applyPageSize(pageSize);
     } else {
       evt.preventDefault();
     }
@@ -351,72 +145,58 @@ export class PaginatorFoundation {
     return this._adapter.emitHostEvent(PAGINATOR_CONSTANTS.events.CHANGE, detail, true, true);
   }
 
-  /**
-   * Returns the max number of pages based on our current parameters.
-   */
   private _getMaxPages(): number {
     return Math.ceil(this._total / this._pageSize) - 1;
   }
 
-  /**
-   * Updates our internal state as well as updating the UI.
-   */
-  private _update(): void {
-    // Create and update the range label
+  private _updateRangeLabel(): void {
     if (this.pageSize > 1) {
       const startIndex = this._pageIndex * this._pageSize;
       const indexStart = Math.floor(startIndex / this._pageSize) || 0;
       const pageStart = (indexStart * this._pageSize) + 1;
       const pageEnd = startIndex < this._total ? Math.min(startIndex + this._pageSize, this._total) : startIndex + this._pageSize;
-
       this._rangeLabel = `${pageStart}-${pageEnd} ${PAGINATOR_CONSTANTS.strings.RANGE_SEPARATOR_LABEL} ${this._total}`;
     } else {
       this._rangeLabel = `${this._pageIndex + 1} ${PAGINATOR_CONSTANTS.strings.RANGE_SEPARATOR_LABEL} ${this._total}`;
     }
-
     this._adapter.setRangeLabel(this._rangeLabel);
+  }
 
-    if (this.disabled) {
-      this._adapter.disablePageSizeSelect();
-      this._adapter.disableFirstPageButton();
-      this._adapter.disablePreviousPageButton();
-      this._adapter.disableNextPageButton();
-      this._adapter.disableLastPageButton();
-    } else {
-      this._adapter.enablePageSizeSelect();
-      // Check if first page button needs to be enabled/disabled
-      if (this._hasFirstPage()) {
-        this._adapter.enableFirstPageButton();
-      } else {
-        this._adapter.disableFirstPageButton();
+  private _syncInteractionState(fromField: PaginatorFieldIdentifier | null = null): void {
+    this._adapter.enableFirstPageButton();
+    this._adapter.enablePreviousPageButton();
+    this._adapter.enableNextPageButton();
+    this._adapter.enableLastPageButton();
+
+    if (!this._hasFirstPage()) {
+      if (fromField) {
+        this._adapter.handleFocusMove(fromField);
       }
+      this._adapter.disableFirstPageButton();
+    }
 
-      // Check if previous page button needs to be enabled/disabled
-      if (this._hasPreviousPage()) {
-        this._adapter.enablePreviousPageButton();
-      } else {
-        this._adapter.disablePreviousPageButton();
+    if (!this._hasPreviousPage()) {
+      if (fromField) {
+        this._adapter.handleFocusMove(fromField);
       }
+      this._adapter.disablePreviousPageButton();
+    }
 
-      // Check if next page button needs to be enabled/disabled
-      if (this._hasNextPage()) {
-        this._adapter.enableNextPageButton();
-      } else {
-        this._adapter.disableNextPageButton();
+    if (!this._hasNextPage()) {
+      if (fromField) {
+        this._adapter.handleFocusMove(fromField);
       }
+      this._adapter.disableNextPageButton();
+    }
 
-      // Check if last page button needs to be enabled/disabled
-      if (this._hasLastPage()) {
-        this._adapter.enableLastPageButton();
-      } else {
-        this._adapter.disableLastPageButton();
+    if (!this._hasLastPage()) {
+      if (fromField) {
+        this._adapter.handleFocusMove(fromField);
       }
+      this._adapter.disableLastPageButton();
     }
   }
 
-  /**
-   * Toggle showing/hiding first and last buttons based on the show first/last buttons flag.
-   */
   private _toggleFirstLastButtons(): void {
     this._toggleFirstButton();
     if (this._firstLast) {
@@ -430,9 +210,6 @@ export class PaginatorFoundation {
     }
   }
 
-  /**
-   * Toggle showing/hiding first button based on the show first or first/last buttons flags.
-   */
   private _toggleFirstButton(): void {
     if (this._first || this._firstLast) {
       if (!this._adapter.hasFirstPageButton()) {
@@ -445,28 +222,217 @@ export class PaginatorFoundation {
     }
   }
 
-  /** Checks if a first page exists. */
   private _hasFirstPage(): boolean {
-    // same as has previous page
     return this._hasPreviousPage();
   }
 
-  /**
-   * Checks if a previous page exists.
-   */
   private _hasPreviousPage(): boolean {
-    return this._pageIndex >= 1 && this._pageSize !== 0;
+    return this._pageIndex > 0 && this._pageSize > 0;
   }
 
-  /** Checks if a next page exists */
   private _hasNextPage(): boolean {
     const maxPages = this._getMaxPages();
-    return this._pageIndex < maxPages && this._pageSize !== 0;
+    return this._pageIndex < maxPages && this._pageSize > 0;
   }
 
-  /** Checks if a last page exists. */
   private _hasLastPage(): boolean {
-    // same as has next page
     return this._hasNextPage();
   }
+
+  private _computePageIndexFromOffset(value: number): void {
+    if (value >= this._total) {
+      if (this._total >= this._pageSize) {
+        value = this._total - this._pageSize;
+      } else {
+        value = 0;
+      }
+    }
+    const clampedValue = Math.min(Math.max(value, 0), this._total);
+    const pageIndex = Math.floor(clampedValue / this._pageSize);
+    this._applyPageIndex(pageIndex);
+  }
+
+  private _computeOffset(): void {
+    if (this._total > 0) {
+      this._offset = this._pageIndex * this._pageSize;
+    }
+  }
+
+  private _applyPageIndex(value: number, { fromField = null }: { fromField?: PaginatorFieldIdentifier | null } = {}): void {
+    this._pageIndex = value;
+    this._computeOffset();
+    this._updateRangeLabel();
+    this._syncInteractionState(fromField);
+    this._adapter.toggleHostAttribute(PAGINATOR_CONSTANTS.attributes.PAGE_INDEX, this._pageIndex != null, this._pageIndex.toString());
+  }
+
+  private _applyPageSize(value: number): void {
+    this._pageSize = value;
+    this._adapter.setPageSize(this._pageSize);
+    this._computeOffset();
+    this._updateRangeLabel();
+    this._syncInteractionState();
+  }
+
+  private _applyTotal(value: number): void {
+    this._total = value;
+    this._updateRangeLabel();
+
+    if (this._offset > 0 && this._total > 0) {
+      this._computePageIndexFromOffset(this._offset);
+    }
+
+    this._syncInteractionState();
+  }
+
+  private _applyAlternativeAlignment(): void {
+    this._adapter.setHostAttribute(PAGINATOR_CONSTANTS.attributes.ALIGNMENT, this._alignment);
+    this._adapter.setAlignment(this._alignment);
+  }
+
+  private _applyDisabled(disabled: boolean): void {
+    this._disabled = disabled;
+    if (disabled) {
+      this._adapter.disablePageSizeSelect();
+      this._adapter.disableFirstPageButton();
+      this._adapter.disablePreviousPageButton();
+      this._adapter.disableNextPageButton();
+      this._adapter.disableLastPageButton();
+    } else {
+      this._adapter.enablePageSizeSelect();
+      this._syncInteractionState();
+    }
+  }
+
+  public get pageIndex(): number {
+    return this._pageIndex;
+  }
+  public set pageIndex(value: number) {
+    if (this._pageIndex !== value) {
+      if (isDefined(value)) {
+        this._applyPageIndex(value);
+      } else {
+        this._adapter.removeHostAttribute(PAGINATOR_CONSTANTS.attributes.PAGE_INDEX);
+      }
+    }
+  }
+
+  public get pageSize(): number {
+    return this._pageSize;
+  }
+  public set pageSize(value: number) {
+    if (this._pageSize !== value) {
+      this._applyPageSize(value);
+      this._adapter.setHostAttribute(PAGINATOR_CONSTANTS.attributes.PAGE_SIZE, `${this._pageSize}`);
+    }
+  }
+
+  public get offset(): number {
+    return this._offset;
+  }
+  public set offset(value: number) {
+    if (this._offset !== value) {
+      this._offset = value;
+      this._computePageIndexFromOffset(value);
+    }
+  }
+
+  public get total(): number {
+    return this._total;
+  }
+  public set total(value: number) {
+    if (this._total !== value) {
+      this._applyTotal(value);
+      this._adapter.setHostAttribute(PAGINATOR_CONSTANTS.attributes.TOTAL, `${this._total}`);
+    }
+  }
+
+  public get pageSizeOptions(): number[] | boolean {
+    return this._pageSizeOptions.map(o => Number(o.value));
+  }
+  public set pageSizeOptions(options: number[] | boolean) {
+    if (isArray(options)) {
+      this._pageSizeOptions = (options as number[])
+        .map(o => ({ label: o.toString(), value: o.toString() }))
+        .sort((a, b) => coerceNumber(a.value) - coerceNumber(b.value));
+      this._adapter.setPageSizeOptions(this._pageSizeOptions);
+      this._adapter.attachPageSizeChangeListener(this._pageSizeListener);
+      this._adapter.setPageSizeVisibility(true);
+      if (isDefined(this._pageSize) && this._pageSizeOptions.length && !this._pageSizeOptions.find(o => coerceNumber(o.value) === this._pageSize)) {
+        const pageSize = coerceNumber(this._pageSizeOptions[0].value);
+        this._applyPageSize(pageSize);
+      }
+    } else if (options.toString().toLowerCase() === 'false') {
+      this._adapter.detachPageSizeChangeListener(this._pageSizeListener);
+      this._adapter.setPageSizeVisibility(false);
+    }
+  }
+
+  public get label(): string {
+    return this._label;
+  }
+  public set label(value: string) {
+    if (this._label !== value) {
+      this._label = value;
+      this._adapter.setLabel(this._label);
+      this._adapter.setHostAttribute(PAGINATOR_CONSTANTS.attributes.LABEL, isDefined(this._label) ? this._label.toString() : '');
+    }
+  }
+
+  public get firstLast(): boolean {
+    return this._firstLast;
+  }
+  public set firstLast(value: boolean) {
+    value = Boolean(value);
+    if (this._firstLast !== value) {
+      this._firstLast = value;
+      this._toggleFirstLastButtons();
+      this._adapter.toggleHostAttribute(PAGINATOR_CONSTANTS.attributes.FIRST_LAST, this._firstLast);
+    }
+  }
+
+  public get first(): boolean {
+    return this._first;
+  }
+  public set first(value: boolean) {
+    value = Boolean(value);
+    if (this._first !== value) {
+      this._first = value;
+      this._toggleFirstButton();
+      this._adapter.toggleHostAttribute(PAGINATOR_CONSTANTS.attributes.FIRST, this._first);
+    }
+  }
+
+  public get disabled(): boolean {
+    return this._disabled;
+  }
+  public set disabled(value: boolean) {
+    value = Boolean(value);
+    if (this._disabled !== value) {
+      this._applyDisabled(value);
+      this._adapter.toggleHostAttribute(PAGINATOR_CONSTANTS.attributes.DISABLED, this._disabled);
+    }
+  }
+
+  public get alternative(): boolean {
+    return this._alternative;
+  }
+  public set alternative(value: boolean) {
+    if (value !== this._alternative) {
+      this._alternative = value;
+      this._adapter.setAlternative(this._alternative);
+      this._applyAlternativeAlignment();
+      this._adapter.toggleHostAttribute(PAGINATOR_CONSTANTS.attributes.ALTERNATIVE, this._alternative);
+    }
+  }
+
+  public get alignment(): PaginatorAlternativeAlignment {
+    return this._alignment;
+  }
+  public set alignment(value: PaginatorAlternativeAlignment) {
+    if (value !== this._alignment) {
+      this._alignment = value;
+      this._applyAlternativeAlignment();
+    }
+  }
 }
diff --git a/src/lib/paginator/paginator.ts b/src/lib/paginator/paginator.ts
index f6723d31c..836eb055d 100644
--- a/src/lib/paginator/paginator.ts
+++ b/src/lib/paginator/paginator.ts
@@ -37,8 +37,6 @@ declare global {
 }
 
 /**
- * The custom element class behind the `<forge-paginator>` component.
- * 
  * @tag forge-paginator
  */
 @CustomElement({
diff --git a/src/lib/popup/build.json b/src/lib/popup/build.json
index fa91a7b63..1cc25c673 100644
--- a/src/lib/popup/build.json
+++ b/src/lib/popup/build.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json",
   "stylesheets": [
     "./forge-popup.scss"
diff --git a/src/lib/popup/popup-adapter.ts b/src/lib/popup/popup-adapter.ts
index f078f3d82..9d15ed6f6 100644
--- a/src/lib/popup/popup-adapter.ts
+++ b/src/lib/popup/popup-adapter.ts
@@ -1,6 +1,6 @@
 import { addClass, closestElement, emitEvent, getShadowElement, IPositionElementConfig, notChildEventListener, positionElementAsync, removeClass, removeElement, deepQuerySelectorAll, getActiveElement } from '@tylertech/forge-core';
 import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
-import { IPopupComponent } from './popup';
+import { IPopupComponent, IPopupCloseEventData } from './popup';
 import { IPopupPositionEventData, POPUP_CONSTANTS, PopupPlacement } from './popup-constants';
 
 export interface IPopupAdapter extends IBaseAdapter {
@@ -17,6 +17,7 @@ export interface IPopupAdapter extends IBaseAdapter {
   removeEventListener(type: string, listener: (evt: Event) => void): void;
   setBlurListener(listener: () => void): () => void;
   trySetInitialFocus(): void;
+  getCloseEventData(): IPopupCloseEventData;
 }
 
 export class PopupAdapter extends BaseAdapter<IPopupComponent> implements IPopupAdapter {
@@ -130,6 +131,10 @@ export class PopupAdapter extends BaseAdapter<IPopupComponent> implements IPopup
     return false;
   }
 
+  public getCloseEventData(): IPopupCloseEventData {
+    return { popup: this._component };
+  }
+
   public addClass(classes: string | string[]): void {
     addClass(classes, this._rootElement);
   }
diff --git a/src/lib/popup/popup-foundation.ts b/src/lib/popup/popup-foundation.ts
index 95877b276..3515f7fe7 100644
--- a/src/lib/popup/popup-foundation.ts
+++ b/src/lib/popup/popup-foundation.ts
@@ -1,6 +1,6 @@
 import { ICustomElementFoundation, isElement } from '@tylertech/forge-core';
 import { IPopupAdapter } from './popup-adapter';
-import { IPopupPosition, PopupAnimationType, PopupPlacement, PopupStateCallback, POPUP_CONSTANTS as constants, POPUP_CONSTANTS } from './popup-constants';
+import { IPopupPosition, PopupAnimationType, PopupPlacement, PopupStateCallback, POPUP_CONSTANTS } from './popup-constants';
 
 export interface IPopupFoundation extends ICustomElementFoundation {
   targetElement: HTMLElement;
@@ -66,7 +66,7 @@ export class PopupFoundation implements IPopupFoundation {
     }
 
     this._adapter.manageWindowEvents(true);
-    this._adapter.dispatchEvent(constants.events.OPEN);
+    this._adapter.dispatchEvent(POPUP_CONSTANTS.events.OPEN);
   }
 
   private _closePopup(): void {
@@ -85,7 +85,9 @@ export class PopupFoundation implements IPopupFoundation {
   private _destroyPopup(): void {
     this._adapter.manageWindowEvents(false);
     this._adapter.removePopup(this._manageFocus);
-    this._adapter.dispatchEvent(constants.events.CLOSE);
+    const eventData = this._adapter.getCloseEventData();
+    this._adapter.dispatchEvent(POPUP_CONSTANTS.events.CLOSE, eventData);
+    this._adapter.emitHostEvent(POPUP_CONSTANTS.events.CLOSE, eventData);
     this._adapter.removeAttribute(POPUP_CONSTANTS.attributes.OPEN);
   }
 
diff --git a/src/lib/popup/popup.ts b/src/lib/popup/popup.ts
index 23b0c0ea3..7cedc578e 100644
--- a/src/lib/popup/popup.ts
+++ b/src/lib/popup/popup.ts
@@ -23,6 +23,10 @@ export interface IPopupComponent extends IBaseComponent {
   closeCallback: PopupStateCallback;
 }
 
+export interface IPopupCloseEventData {
+  popup: IPopupComponent;
+}
+
 declare global {
   interface HTMLElementTagNameMap {
     'forge-popup': IPopupComponent;
@@ -30,7 +34,7 @@ declare global {
 
   interface HTMLElementEventMap {
     'forge-popup-open': CustomEvent<void>;
-    'forge-popup-close': CustomEvent<void>;
+    'forge-popup-close': CustomEvent<IPopupCloseEventData>;
     'forge-popup-position': CustomEvent<IPopupPositionEventData>;
     'forge-popup-blur': CustomEvent<void>;
   }
diff --git a/src/lib/product-icon/build.json b/src/lib/product-icon/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/product-icon/build.json
+++ b/src/lib/product-icon/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/quantity-field/build.json b/src/lib/quantity-field/build.json
index 75276503f..8c96a0641 100644
--- a/src/lib/quantity-field/build.json
+++ b/src/lib/quantity-field/build.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json",
   "stylesheets": [
     "./forge-quantity-field.scss"
diff --git a/src/lib/radio/build.json b/src/lib/radio/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/radio/build.json
+++ b/src/lib/radio/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/ripple/build.json b/src/lib/ripple/build.json
index 7de02b258..0153874aa 100644
--- a/src/lib/ripple/build.json
+++ b/src/lib/ripple/build.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json",
   "stylesheets": [
     "./forge-ripple.scss"
diff --git a/src/lib/scaffold/build.json b/src/lib/scaffold/build.json
index bc8cf624f..69a8f23e3 100644
--- a/src/lib/scaffold/build.json
+++ b/src/lib/scaffold/build.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json",
   "stylesheets": [
     "./forge-scaffold.scss"
diff --git a/src/lib/select/build.json b/src/lib/select/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/select/build.json
+++ b/src/lib/select/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/select/core/base-select-adapter.ts b/src/lib/select/core/base-select-adapter.ts
index 512edcbf6..71c36e53b 100644
--- a/src/lib/select/core/base-select-adapter.ts
+++ b/src/lib/select/core/base-select-adapter.ts
@@ -86,6 +86,7 @@ export abstract class BaseSelectAdapter extends BaseAdapter<IBaseSelectComponent
       return {
         // eslint-disable-next-line @typescript-eslint/no-extra-parens
         label: o.hasAttribute(OPTION_CONSTANTS.attributes.LABEL) ? o.getAttribute(OPTION_CONSTANTS.attributes.LABEL) as string : (isDefined(o.label) ? o.label : o.innerText),
+        secondaryLabel: o.hasAttribute(OPTION_CONSTANTS.attributes.SECONDARY_LABEL) ? o.getAttribute(OPTION_CONSTANTS.attributes.SECONDARY_LABEL) as string : isDefined(o.secondaryLabel) ? o.secondaryLabel : undefined,
         value: o.hasAttribute(OPTION_CONSTANTS.attributes.VALUE) ? o.getAttribute(OPTION_CONSTANTS.attributes.VALUE) : o.value,
         disabled: o.hasAttribute(OPTION_CONSTANTS.attributes.DISABLED),
         divider: o.hasAttribute(OPTION_CONSTANTS.attributes.DIVIDER),
@@ -93,9 +94,11 @@ export abstract class BaseSelectAdapter extends BaseAdapter<IBaseSelectComponent
         leadingIcon: o.hasAttribute(OPTION_CONSTANTS.attributes.LEADING_ICON) ? o.getAttribute(OPTION_CONSTANTS.attributes.LEADING_ICON) as string : o.leadingIcon,
         leadingIconClass: o.hasAttribute(OPTION_CONSTANTS.attributes.LEADING_ICON_CLASS) ? o.getAttribute(OPTION_CONSTANTS.attributes.LEADING_ICON_CLASS) as string : o.leadingIconClass,
         leadingIconType: o.hasAttribute(OPTION_CONSTANTS.attributes.LEADING_ICON_TYPE) ? o.getAttribute(OPTION_CONSTANTS.attributes.LEADING_ICON_TYPE) as ListDropdownIconType : o.leadingIconType,
+        leadingIconComponentProps: o.leadingIconComponentProps,
         trailingIcon: o.hasAttribute(OPTION_CONSTANTS.attributes.TRAILING_ICON) ? o.getAttribute(OPTION_CONSTANTS.attributes.TRAILING_ICON) as string : o.trailingIcon,
         trailingIconClass: o.hasAttribute(OPTION_CONSTANTS.attributes.TRAILING_ICON_CLASS) ? o.getAttribute(OPTION_CONSTANTS.attributes.TRAILING_ICON_CLASS) as string : o.trailingIconClass,
         trailingIconType: o.hasAttribute(OPTION_CONSTANTS.attributes.TRAILING_ICON_TYPE) ? o.getAttribute(OPTION_CONSTANTS.attributes.TRAILING_ICON_TYPE) as ListDropdownIconType : o.trailingIconType,
+        trailingIconComponentProps: o.trailingIconComponentProps,
         leadingBuilder: o.leadingBuilder,
         trailingBuilder: o.trailingBuilder
       };
diff --git a/src/lib/select/option/option-constants.ts b/src/lib/select/option/option-constants.ts
index a4a648c42..322a02b20 100644
--- a/src/lib/select/option/option-constants.ts
+++ b/src/lib/select/option/option-constants.ts
@@ -6,6 +6,7 @@ const attributes = {
   DISABLED: 'disabled',
   DIVIDER: 'divider',
   LABEL: 'label',
+  SECONDARY_LABEL: 'secondary-label',
   LEADING_ICON_CLASS: 'leading-icon-class',
   LEADING_ICON_TYPE: 'leading-icon-type',
   LEADING_ICON: 'leading-icon',
diff --git a/src/lib/select/option/option-foundation.ts b/src/lib/select/option/option-foundation.ts
index 4800187e3..cee27bf00 100644
--- a/src/lib/select/option/option-foundation.ts
+++ b/src/lib/select/option/option-foundation.ts
@@ -1,4 +1,5 @@
 import { ICustomElementFoundation } from '@tylertech/forge-core';
+import { IIconComponent } from '../../icon';
 import { IBaseListDropdownOption, ListDropdownIconType } from '../../list-dropdown/list-dropdown-constants';
 import { IOptionAdapter } from './option-adapter';
 import { OPTION_CONSTANTS } from './option-constants';
@@ -9,15 +10,18 @@ export interface IOptionFoundation extends ICustomElementFoundation, Required<IB
 export class OptionFoundation implements IOptionFoundation {
   private _value: any;
   private _label: string;
+  private _secondaryLabel: string;
   private _disabled = false;
   private _divider = false;
   private _optionClass: string[] = [];
   private _leadingIcon: string;
   private _leadingIconClass: string;
   private _leadingIconType: ListDropdownIconType;
+  private _leadingIconComponentProps: Partial<IIconComponent>;
   private _trailingIcon: string;
   private _trailingIconClass: string;
   private _trailingIconType: ListDropdownIconType;
+  private _trailingIconComponentProps: Partial<IIconComponent>;
   private _leadingBuilder: () => HTMLElement;
   private _trailingBuilder: () => HTMLElement;
 
@@ -45,6 +49,17 @@ export class OptionFoundation implements IOptionFoundation {
     }
   }
 
+  /** Gets/sets the secondary label of this option. */
+  public get secondaryLabel(): string {
+    return this._secondaryLabel;
+  }
+  public set secondaryLabel(value: string) {
+    if (this._secondaryLabel !== value) {
+      this._secondaryLabel = value;
+      this._adapter.toggleHostAttribute(OPTION_CONSTANTS.attributes.SECONDARY_LABEL, !!this._secondaryLabel, this._secondaryLabel);
+    }
+  }
+
   /** Gets/sets the disabled status of this option. */
   public get disabled(): boolean {
     return this._disabled;
@@ -119,6 +134,16 @@ export class OptionFoundation implements IOptionFoundation {
     }
   }
 
+  /** Gets/sets the props on the leading icon component. */
+  public get leadingIconComponentProps(): Partial<IIconComponent> {
+    return this._leadingIconComponentProps;
+  }
+  public set leadingIconComponentProps(value: Partial<IIconComponent>) {
+    if (this._leadingIconComponentProps !== value) {
+      this._leadingIconComponentProps = value;
+    }
+  }
+
   /** Gets/sets the trailing icon of this option. */
   public get trailingIcon(): string {
     return this._trailingIcon;
@@ -152,6 +177,16 @@ export class OptionFoundation implements IOptionFoundation {
     }
   }
 
+  /** Gets/sets the props on the trailing icon component. */
+  public get trailingIconComponentProps(): Partial<IIconComponent> {
+    return this._trailingIconComponentProps;
+  }
+  public set trailingIconComponentProps(value: Partial<IIconComponent>) {
+    if (this._trailingIconComponentProps !== value) {
+      this._trailingIconComponentProps = value;
+    }
+  }
+
   /** Gets/sets the leading builder of this option. */
   public get leadingBuilder(): (() => HTMLElement) {
     return this._leadingBuilder;
diff --git a/src/lib/select/option/option.ts b/src/lib/select/option/option.ts
index 16fbebc02..fdbdb9ef0 100644
--- a/src/lib/select/option/option.ts
+++ b/src/lib/select/option/option.ts
@@ -1,4 +1,5 @@
 import { coerceBoolean, CustomElement, FoundationProperty, ICustomElement } from '@tylertech/forge-core';
+import { IIconComponent } from '../../icon';
 import { BaseComponent } from '../../core/base/base-component';
 import { IBaseListDropdownOption, ListDropdownIconType } from '../../list-dropdown/list-dropdown-constants';
 import { OptionAdapter } from './option-adapter';
@@ -26,6 +27,7 @@ export class OptionComponent extends BaseComponent implements IOptionComponent {
     return [
       OPTION_CONSTANTS.attributes.VALUE,
       OPTION_CONSTANTS.attributes.LABEL,
+      OPTION_CONSTANTS.attributes.SECONDARY_LABEL,
       OPTION_CONSTANTS.attributes.DISABLED,
       OPTION_CONSTANTS.attributes.DIVIDER,
       OPTION_CONSTANTS.attributes.OPTION_CLASS,
@@ -59,6 +61,9 @@ export class OptionComponent extends BaseComponent implements IOptionComponent {
       case OPTION_CONSTANTS.attributes.LABEL:
         this.label = newValue;
         break;
+      case OPTION_CONSTANTS.attributes.SECONDARY_LABEL:
+        this.secondaryLabel = newValue;
+        break;
       case OPTION_CONSTANTS.attributes.DISABLED:
         this.disabled = coerceBoolean(newValue);
         break;
@@ -97,6 +102,10 @@ export class OptionComponent extends BaseComponent implements IOptionComponent {
   @FoundationProperty()
   public declare label: string;
 
+  /** Gets/sets the secondary label of this option. */
+  @FoundationProperty()
+  public declare secondaryLabel: string;
+
   /** Gets/sets the disabled status of this option. */
   @FoundationProperty()
   public declare disabled: boolean;
@@ -121,6 +130,10 @@ export class OptionComponent extends BaseComponent implements IOptionComponent {
   @FoundationProperty()
   public declare leadingIconType: ListDropdownIconType;
 
+  /** Gets/sets properties on leading icon component. */
+  @FoundationProperty()
+  public declare leadingIconComponentProps: Partial<IIconComponent>;
+
   /** Gets/sets the trailing icon of this option. */
   @FoundationProperty()
   public declare trailingIcon: string;
@@ -133,6 +146,10 @@ export class OptionComponent extends BaseComponent implements IOptionComponent {
   @FoundationProperty()
   public declare trailingIconType: ListDropdownIconType;
 
+  /** Gets/sets properties on trailing icon component. */
+  @FoundationProperty()
+  public declare trailingIconComponentProps: Partial<IIconComponent>;
+
   /** Gets/sets the leading builder of this option. */
   @FoundationProperty()
   public declare leadingBuilder: () => HTMLElement;
diff --git a/src/lib/skeleton/build.json b/src/lib/skeleton/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/skeleton/build.json
+++ b/src/lib/skeleton/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/slider/_core.scss b/src/lib/slider/_core.scss
index a2f0b1117..ed0df27c6 100644
--- a/src/lib/slider/_core.scss
+++ b/src/lib/slider/_core.scss
@@ -98,13 +98,7 @@ $_active-track-end-clip: calc($_active-track-end-offset + $_active-track-max-cli
 @mixin track-inactive {
   block-size: var(--_inactive-track-height);
   border-radius: var(--_inactive-track-shape);
-
-  // TODO: remove this and the @supports check below when we're confident that color-mix is more widely supported
-  background-color: var(--_inactive-track-color-fallback);
-
-  @supports (background-color: color-mix(in srgb, red 50%, transparent)) {
-    background-color: var(--_inactive-track-color);
-  }
+  background-color: var(--_inactive-track-color);
 }
 
 @mixin track-active-disabled {
@@ -200,7 +194,7 @@ $_active-track-end-clip: calc($_active-track-end-offset + $_active-track-max-cli
 }
 
 @mixin handle-label {
-  @include typography.style(label, [color font-weight]);
+  @include typography.style(label, $exclude: [font-weight]);
 
   position: absolute;
   box-sizing: border-box;
diff --git a/src/lib/slider/build.json b/src/lib/slider/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/slider/build.json
+++ b/src/lib/slider/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/slider/slider.html b/src/lib/slider/slider.html
index e87b06219..765abbc97 100644
--- a/src/lib/slider/slider.html
+++ b/src/lib/slider/slider.html
@@ -6,8 +6,8 @@
       <div class="handle-container-block">
         <div class="handle-container">
           <div class="handle end" part="handle-end">
-            <forge-state-layer target="end"></forge-state-layer>
-            <forge-focus-indicator target="end"></forge-focus-indicator>
+            <forge-state-layer exportparts="surface:state-layer__surface" target="end"></forge-state-layer>
+            <forge-focus-indicator exportparts="indicator:focus-indicator__indicator" target="end"></forge-focus-indicator>
             <div class="handle-thumb" part="handle-end-thumb"></div>
             <div class="handle-label" part="handle-end-label">
               <span class="handle-label-content" part="handle-end-label-content"></span>
diff --git a/src/lib/slider/slider.scss b/src/lib/slider/slider.scss
index fa13af04a..2d43fc59a 100644
--- a/src/lib/slider/slider.scss
+++ b/src/lib/slider/slider.scss
@@ -131,11 +131,11 @@
 
     &.tickmarks {
       &::before {
-        @include core.tickmarks-active-disabled;
+        @include core.tickmarks-inactive-disabled;
       }
 
       &::after {
-        @include core.tickmarks-inactive-disabled;
+        @include core.tickmarks-active-disabled;
       }
     }
   }
diff --git a/src/lib/slider/slider.test.ts b/src/lib/slider/slider.test.ts
index 47c1e859f..90a42f65f 100644
--- a/src/lib/slider/slider.test.ts
+++ b/src/lib/slider/slider.test.ts
@@ -9,7 +9,6 @@ import { SLIDER_CONSTANTS } from './slider-constants';
 import type { IStateLayerComponent } from '../state-layer/state-layer';
 
 import './slider';
-import { STATE_LAYER_CONSTANTS } from '../state-layer';
 
 class SliderHarness extends TestHarness<ISliderComponent> {
   public rootElement: HTMLElement;
diff --git a/src/lib/split-view/build.json b/src/lib/split-view/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/split-view/build.json
+++ b/src/lib/split-view/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/state-layer/build.json b/src/lib/state-layer/build.json
index 79c49f7e5..d6e9c5322 100644
--- a/src/lib/state-layer/build.json
+++ b/src/lib/state-layer/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
diff --git a/src/lib/stepper/build.json b/src/lib/stepper/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/stepper/build.json
+++ b/src/lib/stepper/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/switch/build.json b/src/lib/switch/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/switch/build.json
+++ b/src/lib/switch/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/switch/index.ts b/src/lib/switch/index.ts
index df72d2bbc..c9dd8ef7d 100644
--- a/src/lib/switch/index.ts
+++ b/src/lib/switch/index.ts
@@ -2,7 +2,9 @@ import { defineCustomElement } from '@tylertech/forge-core';
 
 import { SwitchComponent } from './switch';
 
+export * from './switch-adapter';
 export * from './switch-constants';
+export * from './switch-foundation';
 export * from './switch';
 export * from './switch-component-delegate';
 
diff --git a/src/lib/switch/switch.scss b/src/lib/switch/switch.scss
index 62f5df776..e477d0e98 100644
--- a/src/lib/switch/switch.scss
+++ b/src/lib/switch/switch.scss
@@ -22,20 +22,6 @@
 
   .container {
     @include core.container;
-
-    &:active {
-      .track {
-        @include core.track-active;
-      }
-  
-      .handle {
-        @include core.handle-active;
-  
-        .icon {
-          @include core.icon-active;
-        }
-      }
-    }
   }
 
   .input {
@@ -78,22 +64,6 @@
 
 // On
 :host([on]) {
-  .container {
-    &:active {
-      .track {
-        @include core.track-active-on;
-      }
-  
-      .handle {
-        @include core.handle-active-on;
-  
-        .icon {
-          @include core.icon-active-on;
-        }
-      }
-    }
-  }
-
   .track {
     @include core.track-on;
   }
@@ -120,6 +90,42 @@
   }
 }
 
+// Active
+:host(:not([disabled]):not([readonly])) {
+  .forge-switch {
+    .container:active {
+      .track {
+        @include core.track-active;
+      }
+  
+      .handle {
+        @include core.handle-active;
+  
+        .icon {
+          @include core.icon-active;
+        }
+      }
+    }
+  }
+}
+:host(:not([disabled]):not([readonly])[on]) {
+  .forge-switch {
+    .container:active {
+      .track {
+        @include core.track-active-on;
+      }
+  
+      .handle {
+        @include core.handle-active-on;
+  
+        .icon {
+          @include core.icon-active-on;
+        }
+      }
+    }
+  }
+}
+
 // Dense
 :host([dense]) {
   .forge-switch {
diff --git a/src/lib/table/build.json b/src/lib/table/build.json
index 4bf4c9a2e..5a35b3ce0 100644
--- a/src/lib/table/build.json
+++ b/src/lib/table/build.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json",
   "stylesheets": [
     "./forge-table.scss"
diff --git a/src/lib/tabs/build.json b/src/lib/tabs/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/tabs/build.json
+++ b/src/lib/tabs/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/tabs/tab/_configuration.scss b/src/lib/tabs/tab/_configuration.scss
index fb98b1626..b87b1e9ba 100644
--- a/src/lib/tabs/tab/_configuration.scss
+++ b/src/lib/tabs/tab/_configuration.scss
@@ -5,6 +5,10 @@
   --_active-color: #{tab-tokens.get(active-color)};
   --_inactive-color: #{tab-tokens.get(inactive-color)};
   --_height: #{tab-tokens.get(height)};
+  --_stacked-height: #{tab-tokens.get(stacked-height)};
+
+  // Disabled
+  --_disabled-opacity: #{tab-tokens.get(disabled-opacity)};
 
   // Indicator
   --_active-indicator-color: #{tab-tokens.get(indicator-color)};
@@ -18,6 +22,7 @@
   
   // Content
   --_content-height: #{tab-tokens.get(content-height)};
+  --_content-padding: #{tab-tokens.get(content-padding)};
 
   // Icon
   --_active-focus-icon-color: #{tab-tokens.get(active-focus-icon-color)};
diff --git a/src/lib/tabs/tab/_core.scss b/src/lib/tabs/tab/_core.scss
index 056d3e32f..f6ffc49b1 100644
--- a/src/lib/tabs/tab/_core.scss
+++ b/src/lib/tabs/tab/_core.scss
@@ -1,7 +1,6 @@
 @use '../../core/styles/utils';
 @use '../../core/styles/tokens/tabs/tab/tokens';
 @use '../../core/styles/typography';
-@use '../../core/styles/spacing';
 
 @mixin provide-theme($theme) {
   @include utils.provide(tokens.$tokens, $theme, tab);
@@ -16,7 +15,10 @@
 
 @mixin host-disabled {
   cursor: not-allowed;
-  opacity: #{tokens.get(disabled-opacity)};
+}
+
+@mixin disabled {
+  opacity: var(--_disabled-opacity);
 }
 
 @mixin tab {
@@ -118,12 +120,10 @@
   justify-content: center;
   white-space: nowrap;
   transition: 150ms color linear;
-
-  $_content-padding: spacing.variable('100');
-  max-height: calc(var(--_content-height) + 2 * $_content-padding);
+  max-height: calc(var(--_content-height) + 2 * var(--_content-padding));
   min-height: var(--_content-height);
-  padding: $_content-padding calc(2 * $_content-padding);
-  gap: spacing.variable('050');
+  padding: var(--_content-padding) calc(2 * var(--_content-padding));
+  gap: var(--_content-padding);
 }
 
 @mixin label {
diff --git a/src/lib/tabs/tab/tab.html b/src/lib/tabs/tab/tab.html
index f9587cc07..dde078b7e 100644
--- a/src/lib/tabs/tab/tab.html
+++ b/src/lib/tabs/tab/tab.html
@@ -8,7 +8,7 @@
       <slot name="trailing"></slot>
       <span class="indicator" part="indicator"></span>
     </span>
-    <forge-state-layer target=":host"></forge-state-layer>
-    <forge-focus-indicator target=":host" inward></forge-focus-indicator>
+    <forge-state-layer exportparts="surface:state-layer__surface" target=":host"></forge-state-layer>
+    <forge-focus-indicator exportparts="indicator:focus-indicator__indicator" target=":host" inward></forge-focus-indicator>
   </div>
 </template>
\ No newline at end of file
diff --git a/src/lib/tabs/tab/tab.scss b/src/lib/tabs/tab/tab.scss
index 8adce6796..25771efb9 100644
--- a/src/lib/tabs/tab/tab.scss
+++ b/src/lib/tabs/tab/tab.scss
@@ -1,6 +1,5 @@
 @use './core';
 @use './configuration';
-@use '../../core/styles/tokens/tabs/tab/tokens';
 @use '../../focus-indicator';
 @use '../../state-layer';
 
@@ -28,6 +27,8 @@
   @include core.host-disabled;
 
   .forge-tab {
+    @include core.disabled;
+
     pointer-events: none;
   }
 }
@@ -80,7 +81,7 @@
 
 :host([stacked]) {
   .forge-tab {
-    --_height: #{tokens.get(stacked-height)};
+    --_height: var(--_stacked-height);
 
     .content {
       @include core.content-stacked;
diff --git a/src/lib/text-field/build.json b/src/lib/text-field/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/text-field/build.json
+++ b/src/lib/text-field/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/theme/_theme.scss b/src/lib/theme/_theme.scss
index 214d25d4e..24a3a86c3 100644
--- a/src/lib/theme/_theme.scss
+++ b/src/lib/theme/_theme.scss
@@ -9,12 +9,7 @@
 @use './keys';
 @use './theme-values';
 @use './theme-utils';
-@use '../core/styles/theme';
-
-@mixin theme-styles($prefix: forge) {
-  @include theme.properties;
-  @include theme-utils.core-styles;
-}
+@use '../core/styles/scrollbar';
 
 @function text-emphasis($emphasis) {
   @return map.get(theme-values.$text-emphasis, $emphasis);
@@ -156,45 +151,8 @@
   ), $important: $important);
 }
 
-@mixin scrollbar() {
-  &::-webkit-scrollbar {
-    @include css-custom-property(width, --forge-scrollbar-width, theme-values.$scrollbar-width);
-    @include css-custom-property(height, --forge-scrollbar-height, theme-values.$scrollbar-height);
-  }
-  
-  &::-webkit-scrollbar-corner {
-    @include property(background-color, scrollbar-track);
-  }
-
-  &::-webkit-scrollbar-track {
-    @include property(background-color, scrollbar-track);
-    
-    &:hover {
-      @include property(background-color, scrollbar-track-hover);
-    }
-  }
-
-  &::-webkit-scrollbar-thumb {
-    @include property(background-color, scrollbar-thumb);
-    @include css-custom-property(height, --forge-scrollbar-min-height, theme-values.$scrollbar-thumb-min-height);
-    @include css-custom-property(width, --forge-scrollbar-min-width, theme-values.$scrollbar-thumb-min-width);
-    @include css-custom-property(border-radius, --forge-scrollbar-border-radius, 10px);
-    @include css-custom-property(border-width, --forge-scrollbar-border-width, 3px);
-
-    border-style: solid;
-    border-color: transparent;
-    background-clip: content-box;
-
-    &:hover {
-      @include property(background-color, scrollbar-thumb-hover);
-    }
-  }
-}
-
-@mixin scrollbar-theme-styles() {
-  * {
-    @include scrollbar;
-  }
+@mixin scrollbar {
+  @include scrollbar.base;
 }
 
 @function elevation($z-value, $color: elevation-theme.$baseline-color, $opacity-boost: 0) {
diff --git a/src/lib/theme/build.json b/src/lib/theme/build.json
index ef973ae2d..3ce83a65e 100644
--- a/src/lib/theme/build.json
+++ b/src/lib/theme/build.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json",
   "stylesheets": [
     "./forge-theme.scss"
diff --git a/src/lib/theme/forge-theme.scss b/src/lib/theme/forge-theme.scss
index f1c583395..5b111a9f4 100644
--- a/src/lib/theme/forge-theme.scss
+++ b/src/lib/theme/forge-theme.scss
@@ -1,4 +1,22 @@
-@use './theme';
+@use '../core/styles/theme';
+@use '../core/styles/scrollbar';
 
-@include theme.theme-styles;
-@include theme.scrollbar-theme-styles;
+// Temporary theme properties for compatibility with MDC theme tokens
+//
+// TODO: remove this once MDC dependency is removed
+:root {
+  @include theme.properties-compat;
+}
+
+// Root theme properties
+:root {
+  @include theme.properties;
+}
+
+// Custom scrollbar styles
+* {
+  @include scrollbar.base;
+}
+
+// Utility classes for all theme tokens
+@include theme.classes;
diff --git a/src/lib/time-picker/build.json b/src/lib/time-picker/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/time-picker/build.json
+++ b/src/lib/time-picker/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/time-picker/time-picker-foundation.ts b/src/lib/time-picker/time-picker-foundation.ts
index 8208713dd..b6257786d 100644
--- a/src/lib/time-picker/time-picker-foundation.ts
+++ b/src/lib/time-picker/time-picker-foundation.ts
@@ -287,13 +287,13 @@ export class TimePickerFoundation implements ITimePickerFoundation {
   }
 
   private _onInputFocus(evt: Event): void {
-    if (this._allowInput) {
-      this._adapter.selectInputText();
-    }
-
     if (this.masked && this._showMaskFormat) {
       this._applyMask();
     }
+
+    if (this._allowInput) {
+      this._adapter.selectInputText();
+    }
   }
 
   private _onInputBlur(evt: Event): void {
diff --git a/src/lib/toast/build.json b/src/lib/toast/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/toast/build.json
+++ b/src/lib/toast/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/toolbar/build.json b/src/lib/toolbar/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/toolbar/build.json
+++ b/src/lib/toolbar/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/lib/tooltip/build.json b/src/lib/tooltip/build.json
index d19085f92..f7224f76c 100644
--- a/src/lib/tooltip/build.json
+++ b/src/lib/tooltip/build.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json",
   "stylesheets": [
     "./forge-tooltip.scss"
diff --git a/src/lib/tsconfig-build.json b/src/lib/tsconfig-build.json
index bf791e930..f40d3b3ed 100644
--- a/src/lib/tsconfig-build.json
+++ b/src/lib/tsconfig-build.json
@@ -3,7 +3,7 @@
     "target": "es2017",
     "module": "es2015",
     "moduleResolution": "node",
-    "lib": ["es2015", "dom", "es2017"],
+    "lib": ["es2015", "dom", "es2017", "dom.iterable"],
     "experimentalDecorators": true,
     "noImplicitAny": true,
     "strictNullChecks": true,
diff --git a/src/lib/typography/_mixins.scss b/src/lib/typography/_mixins.scss
index 5fc128b9f..2bd4e2155 100644
--- a/src/lib/typography/_mixins.scss
+++ b/src/lib/typography/_mixins.scss
@@ -9,26 +9,6 @@
 @use '../theme/custom-properties';
 
 @mixin core-styles() {
-  .forge-typography {
-    @include mdc-typography.base;
-    @include theme.css-custom-property(color, --mdc-theme-text-primary-on-background, mdc-theme-color.prop-value(text-primary-on-background));
-  }
-
-  // Create custom classes for built-in MDC typography styles
-  @each $style in map.keys(mdc-typography.$styles) {
-    .forge-typography--#{$style} {
-      @include mdc-typography.typography($style);
-      @include apply-additional-styles(variables.$mdc-typography-additional-styles, $style);
-    }
-  }
-  
-  // Create classes for forge-specific typography styles
-  @each $style in map.keys(variables.$styles) {
-    .forge-typography--#{$style} {
-      @include typography($style);
-    }
-  }
-  
   :root {
     // forge-specific MDC typography overrides
     @each $style, $properties in variables.$mdc-typography-overrides {
diff --git a/src/lib/typography/build.json b/src/lib/typography/build.json
index 4c518815e..8c44fd6d1 100644
--- a/src/lib/typography/build.json
+++ b/src/lib/typography/build.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json",
   "compile": false,
   "stylesheets": [
diff --git a/src/lib/utils/build.json b/src/lib/utils/build.json
index d9f75c4cf..989896bde 100644
--- a/src/lib/utils/build.json
+++ b/src/lib/utils/build.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json",
   "stylesheets": [
     "./forge-flex.scss",
diff --git a/src/lib/view-switcher/build.json b/src/lib/view-switcher/build.json
index d8638d477..07c79a465 100644
--- a/src/lib/view-switcher/build.json
+++ b/src/lib/view-switcher/build.json
@@ -1,4 +1,4 @@
 {
-  "$schema": "../../../node_modules/@tylertech/forge-cli/build-schema.json",
+  "$schema": "../../../node_modules/@tylertech/forge-cli/config/build-schema.json",
   "extends": "../build.json"
 }
\ No newline at end of file
diff --git a/src/stories/StorybookMdxProvider.tsx b/src/stories/StorybookMdxProvider.tsx
index 0dccbf49b..a62fab9c1 100644
--- a/src/stories/StorybookMdxProvider.tsx
+++ b/src/stories/StorybookMdxProvider.tsx
@@ -16,9 +16,9 @@ import { LiveDemoStage } from './src/core/live-demo-stage';
 
 export const StorybookMdxComponents: Record<string, FC> = {
   wrapper: ({ children }: any) => <ForgeCard style={{ '--forge-card-padding': '16px 0' }}>{children}</ForgeCard>,
-  h1: (props: any) => <h1 {...props} className="forge-typography--headline5" style={{marginTop: '16px'}}>{props.children}</h1>,
-  h2: (props: any) => <h2 {...props} className="forge-typography--title forge-docs-core--header1">{props.children}</h2>,
-  h3: (props: any) => <h3 {...props} className="forge-typography--subtitle1-secondary forge-docs-core--header2">{props.children}</h3>,
+  h1: (props: any) => <h1 {...props} className="forge-typography--heading4" style={{marginTop: '16px'}}>{props.children}</h1>,
+  h2: (props: any) => <h2 {...props} className="forge-typography--subheading4 forge-docs-core--header1">{props.children}</h2>,
+  h3: (props: any) => <h3 {...props} className="forge-typography--heading2 forge-docs-core--header2">{props.children}</h3>,
   table: (props: any) => <table {...props} className="forge-docs-core__table" />,
   section: (props: any) => <section {...props} className="forge-docs-core__section">{props.children}</section>,
   blockquote: (props: any) => <Blockquote {...props} />,
diff --git a/src/stories/src/components/autocomplete/autocomplete.mdx b/src/stories/src/components/autocomplete/autocomplete.mdx
index 677fe6446..9696ac161 100644
--- a/src/stories/src/components/autocomplete/autocomplete.mdx
+++ b/src/stories/src/components/autocomplete/autocomplete.mdx
@@ -173,6 +173,14 @@ Closes the dropdown.
 
 </MethodDef>
 
+<MethodDef name="forceFilter(opts: IAutocompleteForceFilterOptions): void;">
+
+Forces the filter callback to be executed to update the current selection state with new options.
+
+Call this when you need to update the options of an autocomplete dynamically by forcing the filter callback to execute and clear any existing options.
+
+</MethodDef>
+
 </PageSection>
 
 ---
@@ -285,15 +293,18 @@ enum AutocompleteMode {
 interface IAutocompleteOption<T = any>  {
   value: T;
   label: string;
+  secondaryLabel?: string;
   disabled?: boolean;
   divider?: boolean;
   optionClass?: string | string[];
   leadingIcon?: string;
   leadingIconClass?: string;
   leadingIconType?: ListDropdownIconType;
+  leadingIconComponentProps?: Partial<IIconComponent>;
   trailingIcon?: string;
   trailingIconClass?: string;
   trailingIconType?: ListDropdownIconType;
+  trailingIconComponentProps?: Partial<IIconComponent>;
   leadingBuilder?: () => HTMLElement;
   trailingBuilder?: () => HTMLElement;
   options?: Array<IListDropdownOption | IListDropdownOptionGroup>;
@@ -326,4 +337,12 @@ interface IAutocompletePopupConfiguration {
 }
 ```
 
+### IAutocompleteForceFilterOptions
+
+```ts
+interface IAutocompleteForceFilterOptions {
+  preserveValue: boolean;
+}
+```
+
 </PageSection>
diff --git a/src/stories/src/components/backdrop/backdrop.stories.tsx b/src/stories/src/components/backdrop/backdrop.stories.tsx
index 8a47cdaa5..b8fc5ca0a 100644
--- a/src/stories/src/components/backdrop/backdrop.stories.tsx
+++ b/src/stories/src/components/backdrop/backdrop.stories.tsx
@@ -40,7 +40,7 @@ export const Default: Story<IBackdropProps> = ({
       <ForgeButton type="raised">
         <button onClick={openBackdrop}>Show backdrop</button>
       </ForgeButton>
-      <p className="forge-typography--caption">(When open, click backdrop to close)</p>
+      <p className="forge-typography--label">(When open, click backdrop to close)</p>
       <ForgeBackdrop
         ref={backdropRef}
         delay={delay}
diff --git a/src/stories/src/components/button-area/button-area-args.ts b/src/stories/src/components/button-area/button-area-args.ts
new file mode 100644
index 000000000..e125aaa55
--- /dev/null
+++ b/src/stories/src/components/button-area/button-area-args.ts
@@ -0,0 +1,21 @@
+export interface IButtonAreaProps {
+  label: string;
+  disabled: boolean;
+}
+
+export const buttonAreaArgTypes = {
+  label: {
+    control: 'text',
+    description: '',
+    table: {
+      category: 'Properties',
+    }
+  },
+  disabled: {
+    control: 'boolean',
+    description: '',
+    table: {
+      category: 'Properties'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/stories/src/components/button-area/button-area.mdx b/src/stories/src/components/button-area/button-area.mdx
new file mode 100644
index 000000000..8239748dd
--- /dev/null
+++ b/src/stories/src/components/button-area/button-area.mdx
@@ -0,0 +1,99 @@
+import { Default as ButtonAreaDemo, InExpansionPanel as ButtonAreaInExpansionPanelDemo } from './button-area.stories';
+import { ButtonAreaDefaultCodeHtml, ButtonAreaInExpansionPanelCodeHtml, ButtonAreaDefaultCodeCss, ButtonAreaInExpansionPanelCodeCss, ButtonAreaInExpansionPanelCodeTs } from './code/button-area-default';
+
+<PageSection>
+
+# Button area
+
+The button area component wraps any arbitrary content with a `<button>` element to enable accessible clickable interfaces including nested controls and other complex content. 
+
+</PageSection>
+
+---
+
+<PageSection>
+
+## Example
+
+### Default
+
+This example uses a button area to turn a card component into a clickable button with complex text content and a nested button.
+
+<LiveDemo codeHtml={ButtonAreaDefaultCodeHtml()} codeScss={ButtonAreaDefaultCodeCss()}>
+  <ButtonAreaDemo />
+</LiveDemo>
+
+### Expansion Panel
+
+A button area can be combined with an expansion panel to create a rich and accessible experience.
+
+<LiveDemo codeHtml={ButtonAreaInExpansionPanelCodeHtml()} codeScss={ButtonAreaInExpansionPanelCodeCss()} codeTs={ButtonAreaInExpansionPanelCodeTs()}>
+  <ButtonAreaInExpansionPanelDemo />
+</LiveDemo>
+
+</PageSection>
+
+---
+
+<PageSection>
+
+## Properties/Attributes
+
+<PropertyDef name="disabled" type="boolean" defaultValue="false">
+
+Sets whether the button area and slotted button are disabled. Setting this on one will also set it on the other.
+  
+</PropertyDef>
+
+</PageSection>
+
+<PageSection>
+
+## Slots
+
+| Name               | Values
+| :------------------| :-----------------
+| `default`          | Places content within the default (unnamed) slot (main body of the component).
+| `button`           | Places content within a visually hidden slot. Always place a `<button>` element in this slot.
+
+</PageSection>
+
+<PageSection>
+
+## Events
+
+| Name      | Values
+| :---------| :-----------------
+| `click`   | The button area emits a native HTML `click` event whenever it or the slotted button is clicked. Add the listener to the `<forge-button-area>` element to receive all events.
+
+> **Note:** Set `data-forge-ignore` on any nested buttons or other interactive elements to prevent them from activating the button area.
+
+</PageSection>
+
+<PageSection>
+
+## CSS parts
+
+| Name                           | Values
+| :------------------------------| :-----------------
+| `root`                         | The root container element.
+| `button`                       | The visually hidden slot for the `<button>` element.
+
+</PageSection>
+
+<PageSection>
+
+## Accessibility
+
+- Always include a slotted `<button>` element.
+- Add a concise, descriptive description of the button area's action as the text content of the slotted button.
+    - The button's text content should preferably be the same as the visible text within the button area to reduce confusion. This can a portion of the content if long.
+- Set any accessible attributes on the slotted button.
+    - Set `aria-controls` if the button controls another element on the page.
+    - Set `aria-expanded` to reflect the state of the controlled element if appropriate.
+- Verify that you can reach every nested button by keyboard navigation.
+    - Ensure that there is a visual cue that the nested button is currently in focus.
+- Verify that pressing the space bar or enter key while focused on a button will activate the button area in the same manner as if it had been clicked with a mouse.
+- Verify that there is sufficient contrast between the foreground text and background to meet WCAG requirements.
+
+</PageSection>
diff --git a/src/stories/src/components/button-area/button-area.stories.tsx b/src/stories/src/components/button-area/button-area.stories.tsx
new file mode 100644
index 000000000..796306118
--- /dev/null
+++ b/src/stories/src/components/button-area/button-area.stories.tsx
@@ -0,0 +1,114 @@
+import { Meta, Story } from '@storybook/react';
+import React, { useEffect, useRef } from 'react';
+import { buttonAreaArgTypes, IButtonAreaProps } from './button-area-args';
+import { createElementProxy, ForgeIconButton, ForgeCard, ForgeIcon, ForgeTooltip, ForgeExpansionPanel, ForgeOpenIcon } from '@tylertech/forge-react';
+import { IconRegistry } from '@tylertech/forge';
+import { tylIconChevronRight, tylIconFavorite } from '@tylertech/tyler-icons/standard';
+
+const MDX = require('./button-area.mdx').default;
+
+const ForgeButtonArea = createElementProxy('forge-button-area');
+
+const cardStyle = {
+  '--forge-card-padding': 0,
+  width: '320px',
+  maxWidth: '100%'
+} as React.CSSProperties;
+const contentStyle = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
+  padding: '16px'
+} as React.CSSProperties;
+const textStyle = {
+  marginInlineEnd: 'auto'
+} as React.CSSProperties;
+const panelContentStyle = { margin: '16px' } as React.CSSProperties;
+
+export default {
+  title: 'Components/Button Area',
+  parameters: { 
+    docs: { 
+      page: MDX
+    },
+  },
+} as Meta;
+
+export const Default: Story<IButtonAreaProps> = ({
+  label = 'Label',
+  disabled = false,
+}) => {
+  useEffect(() => {
+    IconRegistry.define([tylIconChevronRight, tylIconFavorite]);
+  }, []);
+
+  return (
+    <ForgeCard outlined style={cardStyle}>
+      <ForgeButtonArea>
+        <button slot="button" type="button" disabled={disabled}>{label}</button>
+        <div style={contentStyle}>
+          <div style={textStyle}>
+            <div className="forge-typography--heading4">Heading</div>
+            <div>Content</div>
+          </div>
+          <ForgeIconButton data-forge-ignore>
+            <button type="button" aria-label="Favorite">
+              <ForgeIcon name="favorite"></ForgeIcon>
+            </button>
+            <ForgeTooltip>Favorite</ForgeTooltip>
+          </ForgeIconButton>
+          <ForgeIcon name="chevron_right"></ForgeIcon>
+        </div>
+      </ForgeButtonArea>
+    </ForgeCard>
+  )
+};
+Default.argTypes = buttonAreaArgTypes;
+Default.args = {
+  label: 'Label',
+  disabled: false,
+} as IButtonAreaProps;
+
+export const InExpansionPanel: Story<IButtonAreaProps> = ({
+  label = 'Toggle panel',
+  disabled = false,
+}) => {
+  useEffect(() => {
+    IconRegistry.define([tylIconChevronRight, tylIconFavorite]);
+  }, []);
+
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  function onToggleExpansionPanel({ detail }: CustomEvent<boolean>): void {
+    buttonRef.current?.setAttribute('aria-expanded', detail.toString());
+  }
+
+  return (
+    <ForgeCard outlined style={cardStyle}>
+      <ForgeExpansionPanel on-forge-expansion-panel-toggle={onToggleExpansionPanel}>
+        <ForgeButtonArea slot="header">
+          <button ref={buttonRef} slot="button" type="button" disabled={disabled} aria-controls="expandable-content" aria-expanded="false">{label}</button>
+          <div style={contentStyle}>
+            <div style={textStyle}>
+              <div className="forge-typography--heading4">Heading</div>
+              <div>Content</div>
+            </div>
+            <ForgeIconButton data-forge-ignore>
+              <button type="button" aria-label="Favorite">
+                <ForgeIcon name="favorite"></ForgeIcon>
+              </button>
+              <ForgeTooltip>Favorite</ForgeTooltip>
+            </ForgeIconButton>
+            <ForgeOpenIcon></ForgeOpenIcon>
+          </div>
+        </ForgeButtonArea>
+        <div id="expandable-content" role="group" aria-label="Expandable content" style={panelContentStyle}>Content</div>
+      </ForgeExpansionPanel>
+    </ForgeCard>
+  )
+};
+InExpansionPanel.argTypes = buttonAreaArgTypes;
+InExpansionPanel.args = {
+  label: 'Toggle panel',
+  disabled: false,
+} as IButtonAreaProps;
diff --git a/src/stories/src/components/button-area/code/button-area-default.ts b/src/stories/src/components/button-area/code/button-area-default.ts
new file mode 100644
index 000000000..816534ef5
--- /dev/null
+++ b/src/stories/src/components/button-area/code/button-area-default.ts
@@ -0,0 +1,107 @@
+export const ButtonAreaDefaultCodeHtml = () => {
+  return `
+<forge-card>
+  <forge-button-area>
+    <button slot="button" type="button">Go to detail</button>
+    <div class="content">
+      <div>
+        <span>Heading</span>
+        <span>Content</span>
+      </div>
+      <forge-icon-button>
+        <button type="button" aria-label="Favorite">
+          <forge-icon name="favorite"></forge-icon>
+        </button>
+        <forge-tooltip>Favorite</forge-tooltip>
+      </forge-icon-button>
+      <forge-icon name="chevron_right"></forge-icon>
+    </div>
+  <forge-button-area>
+</forge-card>
+  `;
+};
+
+export const ButtonAreaDefaultCodeCss = () => {
+  return `
+forge-card {
+  --forge-card-padding: 0;
+
+  width: 320px;
+  max-width: 100%;
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px;
+}
+
+.content::first-child() {
+  margin-inline-end: auto;
+}
+  `;
+};
+
+export const ButtonAreaInExpansionPanelCodeHtml = () => {
+  return `
+<forge-card>
+  <forge-expansion-panel id="expansion-panel">
+    <forge-button-area>
+      <button slot="button" type="button" id="button" aria-controls="expandable-content" aria-expanded="false">Toggle panel</button>
+      <div class="header-content">
+        <div>
+          <span>Heading</span>
+          <span>Content</span>
+        </div>
+        <forge-icon-button>
+          <button type="button" aria-label="Favorite">
+            <forge-icon name="favorite"></forge-icon>
+          </button>
+          <forge-tooltip>Favorite</forge-tooltip>
+        </forge-icon-button>
+        <forge-open-icon></forge-open-icon>
+      </div>
+    <forge-button-area>
+    <div role="group" id="expandable-content" class="content" aria-label="Expandable content">Content</div>
+  </forge-expansion-panel>
+</forge-card>
+  `;
+};
+
+export const ButtonAreaInExpansionPanelCodeCss = () => {
+  return `
+forge-card {
+  --forge-card-padding: 0;
+
+  width: 320px;
+  max-width: 100%;
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px;
+}
+
+.header-content::first-child() {
+  margin-inline-end: auto;
+}
+
+.content {
+  margin: 16px;
+}
+  `;
+};
+
+export const ButtonAreaInExpansionPanelCodeTs = () => {
+  return `
+const expansionPanel = document.getElementById('expansion-panel');
+const button = document.getElementById('button');
+
+expansionPanel.addEventListener('forge-expansion-panel-toggle', ({ detail: boolean }) => {
+  button.setAttribute('aria-expanded', detail.toString());
+});
+  `;
+};
\ No newline at end of file
diff --git a/src/stories/src/components/card/card.stories.tsx b/src/stories/src/components/card/card.stories.tsx
index 3c5763a20..91cf02c1f 100644
--- a/src/stories/src/components/card/card.stories.tsx
+++ b/src/stories/src/components/card/card.stories.tsx
@@ -63,7 +63,7 @@ export const Styled: Story<ICardProps> = ({
     <div style={containerStyle}>
       <ForgeCard raised={raised} style={{'--forge-card-padding': '16px'}}>
         <div style={headerStyle}>
-          <h3 className="forge-typography--headline6">This is the card title</h3>
+          <h3 className="forge-typography--heading4">This is the card title</h3>
           <ForgeIconButton>
             <button type="button">
               <ForgeIcon name="more_vert" />
@@ -71,7 +71,7 @@ export const Styled: Story<ICardProps> = ({
           </ForgeIconButton>
         </div>
         <div>
-          <p className="forge-typography--body2">{LOREM_IPSUM.p1}</p>
+          <p className="forge-typography--body1">{LOREM_IPSUM.p1}</p>
         </div>
         <div style={footerStyle}>
           <div>
@@ -98,10 +98,10 @@ export const WithScaffold: Story<ICardProps> = ({
     <ForgeCard raised={raised} style={{ width: '400px', '--forge-card-padding': '0', '--forge-card-height': '300px' }}>
       <ForgeScaffold>
         <ForgeToolbar slot="header">
-          <h1 slot="start" className="forge-typography--title">Lorem ipsum</h1>
+          <h1 slot="start" className="forge-typography--heading4">Lorem ipsum</h1>
         </ForgeToolbar>
 
-        <p slot="body" className="forge-typography--body2" tabIndex={0} style={{padding: '16px', margin: '0'}}>
+        <p slot="body" className="forge-typography--body1" tabIndex={0} style={{padding: '16px', margin: '0'}}>
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias quas sed
           aliquid cumque sunt iste ad, alias quod adipisci? Nulla, libero necessitatibus
           enim sint nesciunt provident excepturi dolorum pariatur illum?
diff --git a/src/stories/src/components/card/code/card-scaffold.ts b/src/stories/src/components/card/code/card-scaffold.ts
index a36523d67..4eccf747a 100644
--- a/src/stories/src/components/card/code/card-scaffold.ts
+++ b/src/stories/src/components/card/code/card-scaffold.ts
@@ -3,10 +3,10 @@ export const CardScaffoldCodeHtml = () => {
 <forge-card class="scaffold-card">
   <forge-scaffold>
     <forge-toolbar slot="header">
-      <h1 slot="start" class="forge-typography--title">Lorem ipsum</h1>
+      <h1 slot="start" class="forge-typography--heading4">Lorem ipsum</h1>
     </forge-toolbar>
 
-    <p slot="body" class="forge-typography--body2" tabindex="0" class="card-content">
+    <p slot="body" className="forge-typography--body1" tabindex="0" class="card-content">
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias quas sed
       aliquid cumque sunt iste ad, alias quod adipisci? Nulla, libero necessitatibus
       enim sint nesciunt provident excepturi dolorum pariatur illum?
diff --git a/src/stories/src/components/card/code/card-styled.ts b/src/stories/src/components/card/code/card-styled.ts
index f2b87f205..cab4cc069 100644
--- a/src/stories/src/components/card/code/card-styled.ts
+++ b/src/stories/src/components/card/code/card-styled.ts
@@ -3,7 +3,7 @@ export const CardStyledCodeHtml = () => {
 <div class="demo-card">
   <forge-card>
     <div class="forge-card-header-container">
-      <h3 class="forge-typography--headline6">This is the card title</h3>
+      <h3 class="forge-typography--heading4">This is the card title</h3>
       <forge-icon-button>
         <button type="button">
           <forge-icon name="more_vert"></forge-icon>
@@ -12,7 +12,7 @@ export const CardStyledCodeHtml = () => {
     </div>
 
     <div>
-      <p class="forge-typography--body2">
+      <p className="forge-typography--body1">
         Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestias exercitationem doloremque dolorem ullam, nesciunt quia velit necessitatibus numquam quasi voluptates impedit earum dolores repudiandae facilis totam non quo labore itaque?
       </p>
     </div>
diff --git a/src/stories/src/components/chip-field/chip-field.mdx b/src/stories/src/components/chip-field/chip-field.mdx
index 8c348c0f6..3b2450543 100644
--- a/src/stories/src/components/chip-field/chip-field.mdx
+++ b/src/stories/src/components/chip-field/chip-field.mdx
@@ -145,6 +145,8 @@ Controls the floating state of the label. Call this to manually float the label.
 | `label-input-container`        | The container element around the label and input slot.
 | `input-container`              | The container element around the input slot only.
 | `addon-end-container`          | The container element for the `addon-end` slot.
+| `leading-container`            | The container element for the `leading` slot.
+| `trailing-container`           | The container element for the `trailing` slot.
 
 </PageSection>
 
diff --git a/src/stories/src/components/keyboard-shortcut/keyboard-shortcut.mdx b/src/stories/src/components/keyboard-shortcut/keyboard-shortcut.mdx
index a3db9e8ae..b19e90f62 100644
--- a/src/stories/src/components/keyboard-shortcut/keyboard-shortcut.mdx
+++ b/src/stories/src/components/keyboard-shortcut/keyboard-shortcut.mdx
@@ -127,6 +127,13 @@ target element.
 
 </PropertyDef>
 
+<PropertyDef name="activateCallback" type="KeyboardShortcutActivateCallback" attr={false} defaultValue="undefined">
+
+Sets a function to call when the keyboard shortcut is activated. This provides an alternative to
+binding to the `forge-keyboard-shortcut-activate` event in scenerios where that may be cumbersome.
+
+</PropertyDef>
+
 </PageSection>
 
 ---
@@ -161,4 +168,16 @@ pressed if it includes a submit button.
 > Even though the keyboard shortcut component exists in the DOM, the element itself doesn't affect
 > accessibility or layout due to having its `display` style property set to `none`.
 
+</PageSection>
+
+<PageSection>
+
+## Types
+
+### KeyboardShortcutActivateCallback
+
+```ts
+type KeyboardShortcutActivateCallback = (event: KeyboardEvent) => void;
+```
+
 </PageSection>
\ No newline at end of file
diff --git a/src/stories/src/components/keyboard-shortcut/keyboard-shortcut.stories.tsx b/src/stories/src/components/keyboard-shortcut/keyboard-shortcut.stories.tsx
index 906ab2038..0e269a5a4 100644
--- a/src/stories/src/components/keyboard-shortcut/keyboard-shortcut.stories.tsx
+++ b/src/stories/src/components/keyboard-shortcut/keyboard-shortcut.stories.tsx
@@ -38,7 +38,7 @@ export const Default: Story<IKeyboardShortcutProps> = ({
 
   return (
     <div>
-      <div className="forge-typography--body2" style={{ marginBottom: '16px' }}>Focus an element and press the key combination ({key})</div>
+      <div className="forge-typography--body1" style={{ marginBottom: '16px' }}>Focus an element and press the key combination ({key})</div>
       <form style={gridStyles}>
         <ForgeTextField>
           <label slot="label" htmlFor="first-name">First name</label>
diff --git a/src/stories/src/components/popup/popup.mdx b/src/stories/src/components/popup/popup.mdx
index 6c3c09d4a..c203c22ae 100644
--- a/src/stories/src/components/popup/popup.mdx
+++ b/src/stories/src/components/popup/popup.mdx
@@ -185,14 +185,15 @@ Manually tells the popup to execute its positioning logic.
 | Name                    | Description
 | :-----------------------| :-----------------
 | `forge-popup-position`    | Emits when the popup is re-positioned.
+| `forge-popup-close`       | Emits from both the host and target elements when the popup is closed.
 
 The following events are emitted from the targetElement, **NOT** the `<forge-popup>` element.
 
 | Name                    | Description
 | :-----------------------| :-----------------
 | `forge-popup-open`        | Emits when the popup is opened.
-| `forge-popup-close`       | Emits when the popup is closed.
-| `forge-popup-blur`        | Emits when the popup is closed.
+| `forge-popup-close`       | Emits from both the host and target elements when the popup is closed.
+| `forge-popup-blur`        | Emits when the popup is blurred.
 
 </PageSection>
 
diff --git a/src/stories/src/components/popup/popup.stories.tsx b/src/stories/src/components/popup/popup.stories.tsx
index 534b7f317..06b482074 100644
--- a/src/stories/src/components/popup/popup.stories.tsx
+++ b/src/stories/src/components/popup/popup.stories.tsx
@@ -39,7 +39,7 @@ export const Default: Story<IPopupProps> = ({
         open={isOpen}
         onDismiss={() => setIsOpen(false)}
         options={{ placement, manageFocus, animationType, offset }}>
-        <div style={{ width: '256px', padding: '16px' }} className="forge-typography--body1">
+        <div style={{ width: '256px', padding: '16px' }}>
           Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum, est iste.
           Tempore iure iste molestias expedita, laboriosam magni a nostrum, ullam molestiae,
           obcaecati dicta ipsam provident aut praesentium eius dolore!
diff --git a/src/stories/src/components/select/select.mdx b/src/stories/src/components/select/select.mdx
index 44682b471..4fe082d3e 100644
--- a/src/stories/src/components/select/select.mdx
+++ b/src/stories/src/components/select/select.mdx
@@ -158,7 +158,7 @@ Gets/sets the invalid state. Setting this to `true` will style the component usi
 
 <PropertyDef name="required" type="boolean" defaultValue="false">
 
-Gets/sets whether this component is marked as required or not. Setting to `true` will display an asterisk in the label.
+Gets/sets whether this component is marked as required or not. Setting to `true` will display an asterisk next to the label.
 
 </PropertyDef>
 
diff --git a/src/stories/src/components/text-field/text-field.mdx b/src/stories/src/components/text-field/text-field.mdx
index c9318880e..9dffc83f0 100644
--- a/src/stories/src/components/text-field/text-field.mdx
+++ b/src/stories/src/components/text-field/text-field.mdx
@@ -72,7 +72,7 @@ The `default` variant is intended to be used in desktop applications.
 
 <PropertyDef name="required" type="boolean" defaultValue="false">
 
-  Controls the presence of an asterisk after the label to signify that the field is required.
+  Controls the presence of an asterisk next to the label to signify that the field is required.
 
 > If you are using this for form validation, be sure to also update the property on the embedded `<input>` element.
 
diff --git a/src/stories/src/components/view-switcher/view-switcher.stories.tsx b/src/stories/src/components/view-switcher/view-switcher.stories.tsx
index c8b92afa2..0367fdfa3 100644
--- a/src/stories/src/components/view-switcher/view-switcher.stories.tsx
+++ b/src/stories/src/components/view-switcher/view-switcher.stories.tsx
@@ -42,13 +42,13 @@ export const Default: Story<IViewSwitcherProps> = ({
 
         <ForgeViewSwitcher {...viewSwitcherProps} index={index}>
           <ForgeView id="tabpanel-1" aria-labelledby="tab-1" role="tabpanel">
-            <div style={viewStyles} className="forge-typography--body1">View one</div>
+            <div style={viewStyles}>View one</div>
           </ForgeView>
           <ForgeView id="tabpanel-2" aria-labelledby="tab-2" role="tabpanel">
-            <div style={viewStyles} className="forge-typography--body1">View two</div>
+            <div style={viewStyles}>View two</div>
           </ForgeView>
           <ForgeView id="tabpanel-3" aria-labelledby="tab-3" role="tabpanel">
-            <div style={viewStyles} className="forge-typography--body1">View three</div>
+            <div style={viewStyles}>View three</div>
           </ForgeView>
         </ForgeViewSwitcher>
       </div>
diff --git a/src/stories/src/guides/css-custom-properties.stories.mdx b/src/stories/src/guides/css-custom-properties.stories.mdx
index 45e35d384..14ecc6575 100644
--- a/src/stories/src/guides/css-custom-properties.stories.mdx
+++ b/src/stories/src/guides/css-custom-properties.stories.mdx
@@ -79,7 +79,7 @@ for information about which typography styles are available.
 
 For example, to override the `font-size` of all "title" typography styles you could use this:
 ```scss
-.forge-typography--title {
+.forge-typography--subheading4 {
   --forge-typography-title-font-size: 72px;
 }
 ```
diff --git a/src/test/spec/autocomplete/autocomplete.spec.ts b/src/test/spec/autocomplete/autocomplete.spec.ts
index fa42f3104..49fc667e3 100644
--- a/src/test/spec/autocomplete/autocomplete.spec.ts
+++ b/src/test/spec/autocomplete/autocomplete.spec.ts
@@ -1525,7 +1525,7 @@ describe('AutocompleteComponent', function(this: ITestContext) {
         expect(this.context.component.value).toBe(listItems[2].value);
       });
 
-       it('should pass in to-be new value in beforeValueChange', async function(this: ITestContext) {
+      it('should pass in to-be new value in beforeValueChange', async function(this: ITestContext) {
         this.context = setupTestContext(true);
         let newValue = '';
         this.context.component.filter = () => DEFAULT_FILTER_OPTIONS;
@@ -1543,6 +1543,79 @@ describe('AutocompleteComponent', function(this: ITestContext) {
 
         expect(newValue).toBe(listItems[2].value);
       });
+
+      it('should force filter callback to execute and update selected value', async function(this: ITestContext) {
+        this.context = setupTestContext(true);
+        this.context.component.filter = () => DEFAULT_FILTER_OPTIONS;
+
+        _triggerDropdownClick(this.context.input);
+
+        await tick();
+        const listItems = _getListItems(this.context.component.popupElement);
+        _clickListItem(2, this.context.component.popupElement);
+        await tick();
+
+        expect(this.context.component.value).toBe(listItems[2].value);
+
+        this.context.component.filter = () => [
+          { label: `${DEFAULT_FILTER_OPTIONS[2].label} UPDATED`, value: DEFAULT_FILTER_OPTIONS[2].value},
+          { label: 'New', value: 'new' }
+        ];
+        this.context.component.forceFilter();
+
+        await tick();
+
+        expect(this.context.input.value).toBe(`${DEFAULT_FILTER_OPTIONS[2].label} UPDATED`);
+        expect(this.context.component.value).toBe(DEFAULT_FILTER_OPTIONS[2].value);
+      });
+
+      it('should force filter callback to execute and remove selected value', async function(this: ITestContext) {
+        this.context = setupTestContext(true);
+        this.context.component.filter = () => DEFAULT_FILTER_OPTIONS;
+
+        _triggerDropdownClick(this.context.input);
+
+        await tick();
+        const listItems = _getListItems(this.context.component.popupElement);
+        _clickListItem(2, this.context.component.popupElement);
+        await tick();
+
+        expect(this.context.component.value).toBe(listItems[2].value);
+
+        this.context.component.filter = () => [
+          { label: 'New', value: 'new' }
+        ];
+        this.context.component.forceFilter();
+
+        await tick();
+
+        expect(this.context.input.value).toBe('');
+        expect(this.context.component.value).toBe(DEFAULT_FILTER_OPTIONS[2].value);
+      });
+
+      it('should force filter callback to execute and preserve selected value if not present in new filtered options', async function(this: ITestContext) {
+        this.context = setupTestContext(true);
+        this.context.component.filter = () => DEFAULT_FILTER_OPTIONS;
+
+        _triggerDropdownClick(this.context.input);
+
+        await tick();
+        const listItems = _getListItems(this.context.component.popupElement);
+        _clickListItem(2, this.context.component.popupElement);
+        await tick();
+
+        expect(this.context.component.value).toBe(listItems[2].value);
+
+        this.context.component.filter = () => [
+          { label: 'New', value: 'new' }
+        ];
+        this.context.component.forceFilter({ preserveValue: true });
+
+        await tick();
+
+        expect(this.context.input.value).toBe(DEFAULT_FILTER_OPTIONS[2].label);
+        expect(this.context.component.value).toBe(DEFAULT_FILTER_OPTIONS[2].value);
+      });
     });
   });
 
@@ -1680,11 +1753,11 @@ describe('AutocompleteComponent', function(this: ITestContext) {
     return options.map(({ label, value }) => ({ label, value }));
   }
 
-  function _getListItems(popupElement: HTMLElement | null): IListItemComponent[] {
+  function _getListItems(popupElement: HTMLElement | null): IListItemComponent<any>[] {
     if (!popupElement) {
       return [];
     }
-    return Array.from(popupElement.querySelectorAll(LIST_ITEM_CONSTANTS.elementName)) as IListItemComponent[];
+    return Array.from(popupElement.querySelectorAll(LIST_ITEM_CONSTANTS.elementName)) as IListItemComponent<any>[];
   }
 
   function _triggerDropdownClick(input: HTMLInputElement): void {
diff --git a/src/test/spec/button-area/button-area.spec.ts b/src/test/spec/button-area/button-area.spec.ts
new file mode 100644
index 000000000..10e7a7248
--- /dev/null
+++ b/src/test/spec/button-area/button-area.spec.ts
@@ -0,0 +1,86 @@
+import { BUTTON_AREA_CONSTANTS, IButtonAreaComponent, defineButtonAreaComponent } from '@tylertech/forge';
+import { tick } from '@tylertech/forge-testing';
+
+interface ITestContext {
+  context: IButtonAreaTestContext;
+}
+
+interface IButtonAreaTestContext {
+  component: IButtonAreaComponent;
+  button: HTMLButtonElement;
+  destroy(): void;
+}
+
+describe('ButtonAreaComponent', function(this: ITestContext) {
+  beforeAll(function(this: ITestContext) {
+    defineButtonAreaComponent();
+  });
+
+  afterEach(function(this: ITestContext) {
+    this.context.destroy();
+  });
+
+  it('should instantiate component instance', function(this: ITestContext) {
+    this.context = setupTextContext();
+
+    expect(this.context.component.shadowRoot).toBeTruthy();
+  });
+
+  it('should handle click', function(this: ITestContext) {
+    this.context = setupTextContext();
+
+    const callback = jasmine.createSpy('callback');
+    this.context.component.addEventListener('click', callback);
+    this.context.component.click();
+    expect(callback).toHaveBeenCalled();
+  });
+
+  it('should handle click from the button', function(this: ITestContext) {
+    this.context = setupTextContext();
+
+    const callback = jasmine.createSpy('callback');
+    this.context.component.addEventListener('click', callback);
+    this.context.button.click();
+    expect(callback).toHaveBeenCalled();
+  });
+
+  it('should disable', function(this: ITestContext) {
+    this.context = setupTextContext();
+
+    this.context.component.disabled = true;
+    const callback = jasmine.createSpy('callback');
+    this.context.component.addEventListener('click', callback);
+    this.context.button.click();
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it('should not handle click from ignored children', function(this: ITestContext) {
+    this.context = setupTextContext();
+
+    const callback = jasmine.createSpy('callback');
+    this.context.component.addEventListener('click', callback);
+
+    const button = document.createElement('button');
+    button.toggleAttribute('data-forge-ignore', true);
+    this.context.component.append(button);
+    button.click();
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  function setupTextContext(): IButtonAreaTestContext {
+    const component = document.createElement(BUTTON_AREA_CONSTANTS.elementName) as IButtonAreaComponent;
+    const button = document.createElement('button');
+    button.setAttribute('type', 'button');
+    button.setAttribute('slot', 'button');
+    component.append(button);
+    document.body.appendChild(component);
+
+    return {
+      component,
+      button,
+      destroy: () => {
+        document.body.removeChild(component);
+      }
+    };
+  }
+});
diff --git a/src/test/spec/chip-field/chip-field.spec.ts b/src/test/spec/chip-field/chip-field.spec.ts
index 91bbb3312..6456ed26b 100644
--- a/src/test/spec/chip-field/chip-field.spec.ts
+++ b/src/test/spec/chip-field/chip-field.spec.ts
@@ -1121,6 +1121,37 @@ describe('ChipFieldComponent', function(this: ITestContext) {
 
     });
 
+   describe('Click events', function (this: ITestContext) {
+      it('should emit a click event from the input if the container is clicked', function(this: ITestContext) {
+        this.context = setupTestContext();
+        const clickSpy = jasmine.createSpy('inputClick');
+        const inputEl =  getNativeInput(this.context.component);
+        inputEl.addEventListener('click', clickSpy);
+        
+        const containerEl = getInputContainerElement(this.context.component);
+        containerEl.dispatchEvent(new MouseEvent('mousedown'));
+        
+        expect(clickSpy).toHaveBeenCalledTimes(1);
+        
+        inputEl.removeEventListener('click', clickSpy);
+      });
+
+      it('should not emit a click event from a disabled input if the container is clicked', function(this: ITestContext) {
+        this.context = setupTestContext();
+        const clickSpy = jasmine.createSpy('inputClick');
+        const inputEl =  getNativeInput(this.context.component);
+        inputEl.addEventListener('click', clickSpy);
+        inputEl.disabled = true;
+        
+        const containerEl = getInputContainerElement(this.context.component);
+        containerEl.dispatchEvent(new MouseEvent('mousedown'));
+        
+        expect(clickSpy).not.toHaveBeenCalled();
+        
+        inputEl.removeEventListener('click', clickSpy);
+      });
+    });
+
     describe('Member navigation', function(this: ITestContext) {
       it('should focus the last element when the left arrow key is pressed while the input is focused', function(this: ITestContext) {
         this.context = setupTestContext();
@@ -1218,6 +1249,10 @@ describe('ChipFieldComponent', function(this: ITestContext) {
     return component.querySelector(CHIP_FIELD_CONSTANTS.selectors.HELPER_TEXT) as HTMLElement;
   }
 
+  function getInputContainerElement(component: IChipFieldComponent) {
+    return getShadowElement(component, CHIP_FIELD_CONSTANTS.selectors.INPUT_CONTAINER) as HTMLDivElement;
+  }
+
   function dispatchKeydownEvent(ele: HTMLElement, key: string) {
     const keyboardEvent = new KeyboardEvent('keydown', {
       bubbles: true,
diff --git a/src/test/spec/date-picker/date-picker.spec.ts b/src/test/spec/date-picker/date-picker.spec.ts
index 4f5089bfc..b27a01cba 100644
--- a/src/test/spec/date-picker/date-picker.spec.ts
+++ b/src/test/spec/date-picker/date-picker.spec.ts
@@ -77,6 +77,30 @@ describe('DatePickerComponent', function(this: ITestContext) {
       expect((<Date>calendar.value).toDateString()).toEqual(date.toDateString());
     });
 
+    it('should open calendar in month of min date if min is after current month', function(this: ITestContext) {
+      this.context = setupTestContext(false);
+      const date = new Date();
+      this.context.component.min = new Date(date.getFullYear(), date.getMonth() + 1, 1);
+      this.context.append();
+
+      openPopup(this.context.component);
+      const calendar = getCalendar(this.context.component);
+
+      expect(calendar.month).toEqual(date.getMonth() + 1);
+    });
+
+    it('should open calendar in month of max date if max is before current month', function(this: ITestContext) {
+      this.context = setupTestContext(false);
+      const date = new Date();
+      this.context.component.max = new Date(date.getFullYear(), date.getMonth() - 1, 1);
+      this.context.append();
+
+      openPopup(this.context.component);
+      const calendar = getCalendar(this.context.component);
+
+      expect(calendar.month).toEqual(date.getMonth() - 1);
+    });
+
     it('should automatically render a toggle button with a Forge text-field component', function(this: ITestContext) {
       this.context = setupTestContext(false, true, false);
 
@@ -838,6 +862,19 @@ describe('DatePickerComponent', function(this: ITestContext) {
       expect(getInputElement(this.context.component).value).toBe('__/__/____');
     });
 
+    it('should select mask when shown on focus', function(this: ITestContext) {
+      this.context = setupTestContext(true);
+      const inputElement = getInputElement(this.context.component);
+      this.context.component.setAttribute(BASE_DATE_PICKER_CONSTANTS.observedAttributes.MASKED, '');
+      this.context.component.setAttribute(BASE_DATE_PICKER_CONSTANTS.observedAttributes.SHOW_MASK_FORMAT, '');
+
+      expect(this.context.component.showMaskFormat).toBe(true);
+      inputElement.focus();
+
+      expect(inputElement.selectionStart).toEqual(0);
+      expect(inputElement.selectionEnd).toEqual('__/__/____'.length);
+    });
+
     it('should clear mask format on blur', function(this: ITestContext) {
       this.context = setupTestContext(true);
       const inputElement = getInputElement(this.context.component);
diff --git a/src/test/spec/date-range-picker/date-range-picker.spec.ts b/src/test/spec/date-range-picker/date-range-picker.spec.ts
index b4279f384..a289ec240 100644
--- a/src/test/spec/date-range-picker/date-range-picker.spec.ts
+++ b/src/test/spec/date-range-picker/date-range-picker.spec.ts
@@ -919,6 +919,32 @@ describe('DateRangePickerComponent', function(this: ITestContext) {
       expect(inputElement.value).toBe('01/01/2020');
     });
 
+    it('should select mask in "from" input when shown on focus', function(this: ITestContext) {
+      this.context = setupTestContext(true);
+      const fromElement = getFromElement(this.context.component);
+      this.context.component.setAttribute(BASE_DATE_PICKER_CONSTANTS.observedAttributes.MASKED, '');
+      this.context.component.setAttribute(BASE_DATE_PICKER_CONSTANTS.observedAttributes.SHOW_MASK_FORMAT, '');
+
+      expect(this.context.component.showMaskFormat).toBe(true);
+      fromElement.focus();
+      
+      expect(fromElement.selectionStart).toEqual(0);
+      expect(fromElement.selectionEnd).toEqual('__/__/____'.length);
+    });
+
+    it('should select mask in "to" input when shown on focus', function(this: ITestContext) {
+      this.context = setupTestContext(true);
+      const toElement = getToElement(this.context.component);
+      this.context.component.setAttribute(BASE_DATE_PICKER_CONSTANTS.observedAttributes.MASKED, '');
+      this.context.component.setAttribute(BASE_DATE_PICKER_CONSTANTS.observedAttributes.SHOW_MASK_FORMAT, '');
+
+      expect(this.context.component.showMaskFormat).toBe(true);
+      toElement.focus();
+      
+      expect(toElement.selectionStart).toEqual(0);
+      expect(toElement.selectionEnd).toEqual('__/__/____'.length);
+    });
+
     it('should only show mask format in "from" input on focus', function(this: ITestContext) {
       this.context = setupTestContext(true);
       const fromElement = getFromElement(this.context.component);
diff --git a/src/test/spec/expansion-panel/expansion-panel.spec.ts b/src/test/spec/expansion-panel/expansion-panel.spec.ts
index 6dc969970..fef0e7e78 100644
--- a/src/test/spec/expansion-panel/expansion-panel.spec.ts
+++ b/src/test/spec/expansion-panel/expansion-panel.spec.ts
@@ -373,6 +373,22 @@ describe('ExpansionPanelComponent', function(this: ITestContext) {
       expect(getInternalPanelContent(this.context.component).clientHeight).toBe(0);
     });
 
+    it('should close immediately if set while active animation is running', async function(this: ITestContext) {
+      this.context = setupTestContext();
+      this.context.append();
+
+      await tick();
+
+      this.context.component.open = true;
+      this.context.component.setOpenImmediate(true);
+
+      await tick();
+      await tick();
+
+      expect(this.context.component.open).toBeTrue();
+      expect(getInternalPanelContent(this.context.component).style.height).toBe('');
+    });
+
     it('should close immediately horizontal', async function(this: ITestContext) {
       this.context = setupTestContext();
       this.context.component.useAnimations = false;
diff --git a/src/test/spec/icon/icon.spec.ts b/src/test/spec/icon/icon.spec.ts
index 9b1c86b2c..1955863a1 100644
--- a/src/test/spec/icon/icon.spec.ts
+++ b/src/test/spec/icon/icon.spec.ts
@@ -273,6 +273,18 @@ describe('IconComponent', function(this: ITestContext) {
     expect(loadSpy).not.toHaveBeenCalled();
   });
 
+  it('should hide icon from assistive technology', async function(this: ITestContext) {
+    this.context = setupTestContext();
+    IconRegistry.define(DEFAULT_ICON);
+
+    this.context.component.name = 'action_launcher';
+    await timer();
+
+    const svg = this.context.component.shadowRoot!.querySelector('svg')
+    expect(svg?.getAttribute('aria-hidden')).toBe('true');
+    IconRegistry.remove(DEFAULT_ICON);
+  });
+
   function setupTestContext(config?: Partial<IIconComponent>): ITestIconContext {
     const fixture = document.createElement('div');
     fixture.id = 'icon-test-fixture';
diff --git a/src/test/spec/keyboard-shortcut/keyboard-shortcut.spec.ts b/src/test/spec/keyboard-shortcut/keyboard-shortcut.spec.ts
index aa8a3ecc2..5f5a96833 100644
--- a/src/test/spec/keyboard-shortcut/keyboard-shortcut.spec.ts
+++ b/src/test/spec/keyboard-shortcut/keyboard-shortcut.spec.ts
@@ -1,6 +1,6 @@
 import { removeElement } from '@tylertech/forge-core';
 import { tick } from '@tylertech/forge-testing';
-import { IKeyboardShortcutComponent, KEYBOARD_SHORTCUT_CONSTANTS, defineKeyboardShortcutComponent } from '@tylertech/forge/keyboard-shortcut';
+import { IKeyboardShortcutComponent, KEYBOARD_SHORTCUT_CONSTANTS, KeyboardShortcutActivateCallback, defineKeyboardShortcutComponent } from '@tylertech/forge/keyboard-shortcut';
 
 interface ITestContext {
   context: IKeyboardShortcutTestContext
@@ -40,6 +40,19 @@ describe('KeyboardShortcutComponent', function(this: ITestContext) {
     expect(spy).toHaveBeenCalled();
   });
 
+  it('should invoke the callback function on a matching target keydown event', function(this: ITestContext) {
+    const key = 'a';
+    const callback = jasmine.createSpy();
+    this.context = setupTestContext();
+    this.context.component.key = key;
+    this.context.component.activateCallback = callback;
+
+    this.context.attach();
+
+    this.context.dispatchKeydownEvent({key});
+    expect(callback).toHaveBeenCalled();
+  });
+
   describe('attributes', function(this: ITestContext) {
 
     it('should set key when a key attribute is provided', function(this: ITestContext) {
@@ -526,6 +539,20 @@ describe('KeyboardShortcutComponent', function(this: ITestContext) {
       expect(spy).not.toHaveBeenCalled();
     });
 
+    it('should not invoke the callback when disabled is set to true', function(this: ITestContext) {
+      const key = 'a';
+      const callback = jasmine.createSpy();
+      this.context = setupTestContext();
+      this.context.component.key = key;
+      this.context.component.activateCallback = callback;
+      this.context.component.disabled = true;
+
+      this.context.attach();
+
+      this.context.dispatchKeydownEvent({key});
+      expect(callback).not.toHaveBeenCalled();
+    });
+
     it('should connect target element when disabled is set to false', function(this: ITestContext) {
       const key = 'a';
       this.context = setupTestContext();
diff --git a/src/test/spec/list-dropdown/list-dropdown.spec.ts b/src/test/spec/list-dropdown/list-dropdown.spec.ts
index a42ddca3d..4d0b1a2de 100644
--- a/src/test/spec/list-dropdown/list-dropdown.spec.ts
+++ b/src/test/spec/list-dropdown/list-dropdown.spec.ts
@@ -4,7 +4,7 @@ import { IListDropdownTestContext, createListDropdown, getListItems, getListDrop
 import { IListDropdownConfig, IListDropdownOption, ListDropdownAsyncStyle, ListDropdownHeaderBuilder, IListDropdownOptionGroup, LIST_DROPDOWN_CONSTANTS, ListDropdownFooterBuilder, ListDropdownType, ListDropdownOptionBuilder, ListDropdownTransformCallback } from '@tylertech/forge/list-dropdown';
 import { defineOptionComponent, defineOptionGroupComponent } from '@tylertech/forge/select';
 import { definePopupComponent, POPUP_CONSTANTS, IPopupComponent } from '@tylertech/forge/popup';
-import { defineListComponent, IListItemComponent } from '@tylertech/forge/list';
+import { defineListComponent, IListComponent, IListItemComponent, LIST_CONSTANTS } from '@tylertech/forge/list';
 import { defineLinearProgressComponent, SKELETON_CONSTANTS, DIVIDER_CONSTANTS, IIconComponent, CIRCULAR_PROGRESS_CONSTANTS } from '@tylertech/forge';
 import { tryCleanupPopups, isVisibleInScrollContainer } from '../../utils';
 
@@ -295,7 +295,7 @@ describe('ListDropdown', function(this: ITestContext) {
     expect(listItems[2].selected).toBeTrue();
   });
 
-  it('should toggle selection and active state in multiple mode of deselected option', async function(this: ITestContext) {
+  it('should toggle selection in multiple mode of deselected option', async function(this: ITestContext) {
     this.context = createListDropdown({ ...DEFAULT_CONFIG, multiple: true, selectedValues: [BASIC_OPTIONS[1].value]  });
     this.context.listDropdown.open();
     await delayPopupAnimation();
@@ -310,7 +310,7 @@ describe('ListDropdown', function(this: ITestContext) {
     expect(listItems[1].selected).toBeTrue();
     expect(listItems[1].active).toBeFalse();
     expect(listItems[2].selected).toBeTrue();
-    expect(listItems[2].active).toBeTrue();
+    expect(listItems[2].active).toBeFalse();
   });
 
   it('should activate selected option', async function(this: ITestContext) {
@@ -733,7 +733,8 @@ describe('ListDropdown', function(this: ITestContext) {
     this.context.listDropdown.open();
     await delayPopupAnimation();
 
-    expect(this.context.listDropdown.dropdownElement!.getAttribute('role')).toBe('menu');
+    const listElement = this.context.listDropdown.dropdownElement!.querySelector(LIST_CONSTANTS.elementName) as IListComponent;
+    expect(listElement.getAttribute('role')).toBe('menu');
   });
 
   it('should set popup classes', async function(this: ITestContext) {
@@ -953,4 +954,17 @@ describe('ListDropdown', function(this: ITestContext) {
     expect(attrValue).toBeTruthy();
     expect(attrValue).toBe('test-value');
   });
+
+  it('should display options with secondary label', async function(this: ITestContext) {
+    const opts: IListDropdownOption[] = [
+      { label: 'Label', secondaryLabel: 'Secondary label', value: 'value' },
+    ];
+    this.context = createListDropdown({ ...DEFAULT_CONFIG, options: opts });
+    this.context.listDropdown.open();
+    await timer(POPUP_CONSTANTS.numbers.ANIMATION_DURATION);
+    await tick();
+
+    const listItems = getListItems();
+    expect(listItems[0].querySelector('span[slot=subtitle]')?.textContent).toBe('Secondary label');
+  });
 });
diff --git a/src/test/spec/list/list-item/list-item.spec.ts b/src/test/spec/list/list-item/list-item.spec.ts
deleted file mode 100644
index fb02935ea..000000000
--- a/src/test/spec/list/list-item/list-item.spec.ts
+++ /dev/null
@@ -1,675 +0,0 @@
-import { getShadowElement, removeElement, getActiveElement } from '@tylertech/forge-core';
-import { tick, timer } from '@tylertech/forge-testing';
-import { CHECKBOX_CONSTANTS, ICheckboxComponent } from '@tylertech/forge/checkbox';
-import { DRAWER_CONSTANTS, IDrawerComponent } from '@tylertech/forge/drawer';
-import { defineListComponent, IListComponent, LIST_CONSTANTS } from '@tylertech/forge/list';
-import { defineListItemComponent, IListItemComponent, LIST_ITEM_CONSTANTS } from '@tylertech/forge/list/list-item';
-import { IRadioComponent, RADIO_CONSTANTS } from '@tylertech/forge/radio';
-
-interface ITestContext {
-  context: ITestListItemDefaultContext | ITestListItemDrawerContext | ITestListItemCheckboxContext | ITestListItemRadioContext;
-}
-
-interface ITestListItemDefaultContext {
-  component: IListItemComponent;
-  listComponent: IListComponent;
-  getRootElement(): HTMLElement;
-  append(): void;
-  destroy(): void;
-  /** Simulates a user interaction with the button to instantiate the ripple */
-  simulateInteraction(): Promise<void>; 
-}
-
-interface ITestListItemDrawerContext {
-  component: IListItemComponent;
-  destroy(): void;
-}
-
-interface ITestListItemCheckboxContext {
-  component: IListItemComponent;
-  listComponent: IListComponent;
-  getRootElement(): HTMLElement;
-  getInputElement(): HTMLInputElement;
-  append(): void;
-  destroy(): void;
-}
-
-interface ITestListItemRadioContext {
-  component1: IListItemComponent;
-  component2: IListItemComponent;
-  listComponent: IListComponent;
-  getRootElement1(): HTMLElement;
-  getRootElement2(): HTMLElement;
-  getRadioInput1(): HTMLInputElement;
-  getRadioInput2(): HTMLInputElement;
-  destroy(): void;
-}
-
-describe('ListItemComponent', function(this: ITestContext) {
-  beforeAll(function(this: ITestContext) {
-    defineListItemComponent();
-    defineListComponent();
-  });
-
-  afterEach(function(this: ITestContext) {
-    this.context.destroy();
-  });
-
-  describe('individual list item', function(this: ITestContext) {
-    it('should have proper role', function(this: ITestContext) {
-      this.context = setupTestContext(true);
-      expect(this.context.component.getAttribute('role')).toBe(LIST_ITEM_CONSTANTS.roles.LIST_ITEM);
-    });
-
-    it('should not have drawer context attribute', function(this: ITestContext) {
-      this.context = setupTestContext(true);
-      expect(this.context.component.hasAttribute(LIST_ITEM_CONSTANTS.attributes.DRAWER_CONTEXT)).toBe(false);
-    });
-
-    it('should not be two-line by default', function(this: ITestContext) {
-      this.context = setupTestContext(true);
-      expect(this.context.component.twoLine).toBe(false);
-      expect((this.context as ITestListItemDefaultContext).getRootElement().classList.contains(LIST_ITEM_CONSTANTS.classes.TWO_LINE)).toBe(false);
-    });
-
-    it('should not be three-line by default', function(this: ITestContext) {
-      this.context = setupTestContext(true);
-      expect(this.context.component.threeLine).toBe(false);
-      expect((this.context as ITestListItemDefaultContext).getRootElement().classList.contains(LIST_ITEM_CONSTANTS.classes.THREE_LINE)).toBe(false);
-    });
-
-    it('should not be static by default', function(this: ITestContext) {
-      this.context = setupTestContext(true);
-      expect(this.context.component.static).toBe(false);
-      expect((this.context as ITestListItemDefaultContext).getRootElement().classList.contains(LIST_ITEM_CONSTANTS.classes.STATIC)).toBe(false);
-    });
-
-    it('should not be active by default', function(this: ITestContext) {
-      this.context = setupTestContext(true);
-      expect(this.context.component.active).toBe(false);
-      expect((this.context as ITestListItemDefaultContext).getRootElement().classList.contains(LIST_ITEM_CONSTANTS.classes.ACTIVE)).toBe(false);
-    });
-
-    it('should use ripple by default, but delay initialization until user interaction', async function(this: ITestContext) {
-      this.context = setupTestContext(true);
-      const context = this.context as ITestListItemDefaultContext ;
-      expect(context.component.ripple).withContext('ripple property').toBe(true);
-      expect(context.getRootElement().classList.contains('mdc-ripple-upgraded')).withContext('ripple before interaction').toBe(false);
-      await context.simulateInteraction();
-      expect(context.getRootElement().classList.contains('mdc-ripple-upgraded')).withContext('ripple after interaction').toBe(true);
-    });
-
-    it('should not be selected by default', function(this: ITestContext) {
-      this.context = setupTestContext(true);
-
-      expect(this.context.component.selected).toBe(false);
-      expect((this.context as ITestListItemDefaultContext).getRootElement().classList.contains(LIST_ITEM_CONSTANTS.classes.SELECTED)).toBe(false);
-      expect((this.context as ITestListItemDefaultContext).getRootElement().classList.contains(LIST_ITEM_CONSTANTS.classes.ACTIVATED)).toBe(false);
-    });
-
-    it('should not have value by default', function(this: ITestContext) {
-      this.context = setupTestContext(true);
-      expect(this.context.component.value).toBeUndefined();
-    });
-
-    it('should not have href by default', function(this: ITestContext) {
-      this.context = setupTestContext(true);
-      expect(this.context.component.href).toBeUndefined();
-    });
-
-    it('should not have target by default', function(this: ITestContext) {
-      this.context = setupTestContext(true);
-      expect(this.context.component.target).toBeUndefined();
-    });
-
-    it('should not be disabled by default', function(this: ITestContext) {
-      this.context = setupTestContext(true);
-      expect(this.context.component.disabled).toBe(false);
-      expect((this.context as ITestListItemDefaultContext).getRootElement().classList.contains(LIST_ITEM_CONSTANTS.classes.DISABLED)).toBe(false);
-    });
-
-    it('should not wrap by default', function(this: ITestContext) {
-      this.context = setupTestContext(true);
-      expect(this.context.component.wrap).toBeFalse();
-      expect((this.context as ITestListItemDefaultContext).getRootElement().classList.contains(LIST_ITEM_CONSTANTS.classes.WRAP)).toBeFalse();
-    });
-
-    it('should not be dense by default', function(this: ITestContext) {
-      this.context = setupTestContext(true);
-      expect(this.context.component.dense).toBe(false);
-      expect((this.context as ITestListItemDefaultContext).getRootElement().classList.contains(LIST_ITEM_CONSTANTS.classes.DENSE)).toBe(false);
-    });
-
-    it('should propagate click by default', function(this: ITestContext) {
-      this.context = setupTestContext(true);
-      expect(this.context.component.propagateClick).toBe(true);
-    });
-
-    it('should not be indented by default', function(this: ITestContext) {
-      this.context = setupTestContext(true);
-      expect(this.context.component.indented).toBe(false);
-      expect((this.context as ITestListItemDefaultContext).getRootElement().classList.contains(LIST_ITEM_CONSTANTS.classes.INDENTED)).toBe(false);
-    });
-
-    it('should remove ripple', async function(this: ITestContext) {
-      this.context = setupTestContext(true);
-      await tick();
-      this.context.component.ripple = false;
-      await tick();
-      expect(this.context.component.ripple).toBe(false);
-      expect(this.context.component.hasAttribute(LIST_ITEM_CONSTANTS.attributes.RIPPLE)).toBe(true);
-      expect(this.context.component.getAttribute(LIST_ITEM_CONSTANTS.attributes.RIPPLE)).toBe('false');
-      expect((this.context as ITestListItemDefaultContext).getRootElement().classList.contains('mdc-ripple-upgraded')).toBe(false);
-    });
-
-    it('should not set ripple if static', async function(this: ITestContext) {
-      this.context = setupTestContext();
-      this.context.component.ripple = false;
-      (this.context as ITestListItemDefaultContext).append();
-      await tick();
-      this.context.component.static = true;
-      this.context.component.ripple = true;
-      await tick();
-      expect(this.context.component.ripple).toBe(false);
-      expect(this.context.component.hasAttribute(LIST_ITEM_CONSTANTS.attributes.RIPPLE)).toBe(true);
-      expect(this.context.component.getAttribute(LIST_ITEM_CONSTANTS.attributes.RIPPLE)).toBe('false');
-      expect((this.context as ITestListItemDefaultContext).getRootElement().classList.contains('mdc-ripple-upgraded')).toBe(false);
-    });
-
-    it('should set to static via property', function(this: ITestContext) {
-      this.context = setupTestContext(true);
-      this.context.component.static = true;
-      expect(this.context.component.static).toBe(true);
-      expect(this.context.component.hasAttribute(LIST_ITEM_CONSTANTS.attributes.STATIC)).toBe(true);
-      expect((this.context as ITestListItemDefaultContext).getRootElement().classList.contains(LIST_ITEM_CONSTANTS.classes.STATIC)).toBe(true);
-    });
-
-    it('should set to static via attribute', function(this: ITestContext) {
-      this.context = setupTestContext(true);
-      this.context.component.setAttribute(LIST_ITEM_CONSTANTS.attributes.STATIC, 'true');
-      expect(this.context.component.static).toBe(true);
-      expect((this.context as ITestListItemDefaultContext).getRootElement().classList.contains(LIST_ITEM_CONSTANTS.classes.STATIC)).toBe(true);
-    });
-
-    it('should set to static via attribute by default', function(this: ITestContext) {
-      this.context = setupTestContext();
-      this.context.component.setAttribute(LIST_ITEM_CONSTANTS.attributes.STATIC, 'true');
-      (this.context as ITestListItemDefaultContext).append();
-      expect(this.context.component.static).toBe(true);
-      expect((this.context as ITestListItemDefaultContext).getRootElement().classList.contains(LIST_ITEM_CONSTANTS.classes.STATIC)).toBe(true);
-    });
-
-    it('should not emit selected event when static', function(this: ITestContext) {
-      this.context = setupTestContext();
-      this.context.component.setAttribute(LIST_ITEM_CONSTANTS.attributes.STATIC, 'true');
-      (this.context as ITestListItemDefaultContext).append();
-      const listener = jasmine.createSpy('selected listener');
-      this.context.component.addEventListener(LIST_ITEM_CONSTANTS.events.SELECT, listener);
-      (this.context as ITestListItemDefaultContext).getRootElement().click();
-      expect(listener).not.toHaveBeenCalled();
-    });
-
-    it('should emit selected event when not static', function(this: ITestContext) {
-      this.context = setupTestContext(true);
-      const listener = jasmine.createSpy('selected listener');
-      this.context.component.addEventListener(LIST_ITEM_CONSTANTS.events.SELECT, listener);
-      (this.context as ITestListItemDefaultContext).getRootElement().click();
-      expect(listener).toHaveBeenCalledTimes(1);
-    });
-
-    it('should emit selected event when enter key is pressed', function(this: ITestContext) {
-      this.context = setupTestContext(true);
-      const listener = jasmine.createSpy('selected listener');
-      this.context.component.addEventListener(LIST_ITEM_CONSTANTS.events.SELECT, listener);
-      (this.context as ITestListItemDefaultContext).getRootElement().dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
-      expect(listener).toHaveBeenCalledTimes(1);
-    });
-
-    it('should emit selected event when enter space is pressed', function(this: ITestContext) {
-      this.context = setupTestContext(true);
-      const listener = jasmine.createSpy('selected listener');
-      this.context.component.addEventListener(LIST_ITEM_CONSTANTS.events.SELECT, listener);
-      (this.context as ITestListItemDefaultContext).getRootElement().dispatchEvent(new KeyboardEvent('keydown', { key: ' ' }));
-      expect(listener).toHaveBeenCalledTimes(1);
-    });
-
-    it('should set value via property', function(this: ITestContext) {
-      this.context = setupTestContext(true);
-      this.context.component.value = 1;
-      expect(this.context.component.value).toBe(1);
-    });
-
-    it('should set correct role based on href value', function(this: ITestContext) {
-      this.context = setupTestContext();
-      const url = 'https://www.google.com/';
-      (this.context as ITestListItemDefaultContext).append();
-      this.context.component.href = url;
-      expect((this.context as ITestListItemDefaultContext).getRootElement().getAttribute('role')).toBe(LIST_ITEM_CONSTANTS.roles.LINK);
-    });
-
-    it('should toggle role based on href', async function(this: ITestContext) {
-      this.context = setupTestContext();
-      const url = 'https://www.google.com/';
-      this.context.component.setAttribute(LIST_ITEM_CONSTANTS.attributes.HREF, url);
-      (this.context as ITestListItemDefaultContext).append();
-      expect((this.context as ITestListItemDefaultContext).getRootElement().getAttribute('role')).toBe(LIST_ITEM_CONSTANTS.roles.LINK);
-      this.context.component.href = '';
-      await tick();
-      expect((this.context as ITestListItemDefaultContext).getRootElement().getAttribute('role')).toBe(LIST_ITEM_CONSTANTS.roles.LIST_ITEM);
-    });
-
-    it('should set href via property', function(this: ITestContext) {
-      this.context = setupTestContext();
-      const url = 'https://www.google.com/';
-      (this.context as ITestListItemDefaultContext).append();
-      this.context.component.href = url;
-      expect(this.context.component.href).toBe(url);
-      expect(this.context.component.getAttribute(LIST_ITEM_CONSTANTS.attributes.HREF)).toBe(url);
-    });
-
-    it('should not emit selected event when href is set', function(this: ITestContext) {
-      this.context = setupTestContext();
-      this.context.component.setAttribute(LIST_ITEM_CONSTANTS.attributes.HREF, '#SomeHref');
-      (this.context as ITestListItemDefaultContext).append();
-      const listener = jasmine.createSpy('selected listener');
-      (this.context as ITestListItemDefaultContext).listComponent.addEventListener(LIST_ITEM_CONSTANTS.events.SELECT, listener);
-      (this.context as ITestListItemDefaultContext).getRootElement().click();
-      expect(listener).not.toHaveBeenCalled();
-    });
-
-    it('should set target via property', function(this: ITestContext) {
-      this.context = setupTestContext(true);
-      this.context.component.target = '_blank';
-      expect(this.context.component.target).toBe('_blank');
-    });
-
-    it('should set target via attribute', function(this: ITestContext) {
-      this.context = setupTestContext(true);
-      this.context.component.setAttribute(LIST_ITEM_CONSTANTS.attributes.TARGET, '_blank');
-      expect(this.context.component.target).toBe('_blank');
-    });
-
-    it('should set disabled via property', function(this: ITestContext) {
-      this.context = setupTestContext(true);
-      this.context.component.disabled = true;
-      expect(this.context.component.disabled).toBe(true);
-      expect((this.context as ITestListItemDefaultContext).getRootElement().classList.contains(LIST_ITEM_CONSTANTS.classes.DISABLED)).toBe(true);
-      this.context.component.disabled = false;
-      expect(this.context.component.disabled).toBe(false);
-      expect((this.context as ITestListItemDefaultContext).getRootElement().classList.contains(LIST_ITEM_CONSTANTS.classes.DISABLED)).toBe(false);
-    });
-
-    it('should set disabled via attribute', function(this: ITestContext) {
-      this.context = setupTestContext(true);
-      this.context.component.setAttribute(LIST_ITEM_CONSTANTS.attributes.DISABLED, 'true');
-      expect(this.context.component.disabled).toBe(true);
-      expect((this.context as ITestListItemDefaultContext).getRootElement().classList.contains(LIST_ITEM_CONSTANTS.classes.DISABLED)).toBe(true);
-    });
-
-    it('should set wrap via property', function(this: ITestContext) {
-      this.context = setupTestContext(true);
-      this.context.component.wrap = true;
-      const rootElement = (this.context as ITestListItemDefaultContext).getRootElement();
-
-      expect(this.context.component.wrap).toBeTrue();
-      expect(rootElement.classList.contains(LIST_ITEM_CONSTANTS.classes.WRAP)).toBeTrue();
-
-      this.context.component.wrap = false;
-
-      expect(this.context.component.wrap).toBeFalse();
-      expect(rootElement.classList.contains(LIST_ITEM_CONSTANTS.classes.WRAP)).toBeFalse();
-    });
-
-    it('should set wrap via attribute', function(this: ITestContext) {
-      this.context = setupTestContext(true);
-      this.context.component.setAttribute(LIST_ITEM_CONSTANTS.attributes.WRAP, '');
-      expect(this.context.component.wrap).toBeTrue();
-      expect((this.context as ITestListItemDefaultContext).getRootElement().classList.contains(LIST_ITEM_CONSTANTS.classes.WRAP)).toBeTrue();
-    });
-
-    it('should set target via attribute', function(this: ITestContext) {
-      this.context = setupTestContext(true);
-      this.context.component.setAttribute(LIST_ITEM_CONSTANTS.attributes.TARGET, '_blank');
-      expect(this.context.component.target).toBe('_blank');
-    });
-
-    it('should focus list item', function(this: ITestContext) {
-      this.context = setupTestContext(true);
-      this.context.component.focus();
-      expect(getActiveElement()).toBe((this.context as ITestListItemDefaultContext).getRootElement());
-    });
-
-    it('should not set focus when list item is selected', async function(this: ITestContext) {
-      this.context = setupTestContext(true);
-      this.context.component.selected = true;
-      await tick();
-      expect(getActiveElement()).not.toBe((this.context as ITestListItemDefaultContext).getRootElement());
-    });
-
-    it('should render selected when set by default via attribute', function(this: ITestContext) {
-      this.context = setupTestContext();
-      this.context.component.setAttribute(LIST_ITEM_CONSTANTS.attributes.SELECTED, '');
-      (this.context as ITestListItemDefaultContext).append();
-      
-      expect(this.context.component.selected).toBe(true);
-      expect((this.context as ITestListItemDefaultContext).getRootElement().classList.contains(LIST_ITEM_CONSTANTS.classes.SELECTED)).toBe(true);
-    });
-
-    it('should set two-line via property', function(this: ITestContext) {
-      this.context = setupTestContext(true);
-      this.context.component.twoLine = true;
-      expect(this.context.component.twoLine).toBe(true);
-      expect(this.context.component.hasAttribute(LIST_ITEM_CONSTANTS.attributes.TWO_LINE)).toBe(true);
-      expect((this.context as ITestListItemDefaultContext).getRootElement().classList.contains(LIST_ITEM_CONSTANTS.classes.TWO_LINE)).toBe(true);
-      this.context.component.twoLine = false;
-      expect(this.context.component.twoLine).toBe(false);
-      expect(this.context.component.hasAttribute(LIST_ITEM_CONSTANTS.attributes.TWO_LINE)).toBe(false);
-      expect((this.context as ITestListItemDefaultContext).getRootElement().classList.contains(LIST_ITEM_CONSTANTS.classes.TWO_LINE)).toBe(false);
-    });
-
-    it('should set two-line via attribute', function(this: ITestContext) {
-      this.context = setupTestContext(true);
-      this.context.component.setAttribute(LIST_ITEM_CONSTANTS.attributes.TWO_LINE, 'true');
-      expect(this.context.component.twoLine).toBe(true);
-      expect(this.context.component.hasAttribute(LIST_ITEM_CONSTANTS.attributes.TWO_LINE)).toBe(true);
-      expect((this.context as ITestListItemDefaultContext).getRootElement().classList.contains(LIST_ITEM_CONSTANTS.classes.TWO_LINE)).toBe(true);
-    });
-
-    it('should set two-line via attribute by default', function(this: ITestContext) {
-      this.context = setupTestContext();
-      this.context.component.setAttribute(LIST_ITEM_CONSTANTS.attributes.TWO_LINE, 'true');
-      (this.context as ITestListItemDefaultContext).append();
-      expect(this.context.component.twoLine).toBe(true);
-      expect(this.context.component.hasAttribute(LIST_ITEM_CONSTANTS.attributes.TWO_LINE)).toBe(true);
-      expect((this.context as ITestListItemDefaultContext).getRootElement().classList.contains(LIST_ITEM_CONSTANTS.classes.TWO_LINE)).toBe(true);
-    });
-
-    it('should set three-line via property', function(this: ITestContext) {
-      this.context = setupTestContext(true);
-      this.context.component.threeLine = true;
-      expect(this.context.component.threeLine).toBe(true);
-      expect(this.context.component.hasAttribute(LIST_ITEM_CONSTANTS.attributes.THREE_LINE)).toBe(true);
-      expect((this.context as ITestListItemDefaultContext).getRootElement().classList.contains(LIST_ITEM_CONSTANTS.classes.THREE_LINE)).toBe(true);
-      this.context.component.threeLine = false;
-      expect(this.context.component.threeLine).toBe(false);
-      expect(this.context.component.hasAttribute(LIST_ITEM_CONSTANTS.attributes.THREE_LINE)).toBe(false);
-      expect((this.context as ITestListItemDefaultContext).getRootElement().classList.contains(LIST_ITEM_CONSTANTS.classes.THREE_LINE)).toBe(false);
-    });
-
-    it('should set three-line via attribute', function(this: ITestContext) {
-      this.context = setupTestContext(true);
-      this.context.component.setAttribute(LIST_ITEM_CONSTANTS.attributes.THREE_LINE, 'true');
-      expect(this.context.component.threeLine).toBe(true);
-      expect(this.context.component.hasAttribute(LIST_ITEM_CONSTANTS.attributes.THREE_LINE)).toBe(true);
-      expect((this.context as ITestListItemDefaultContext).getRootElement().classList.contains(LIST_ITEM_CONSTANTS.classes.THREE_LINE)).toBe(true);
-    });
-
-    it('should set three-line via attribute by default', function(this: ITestContext) {
-      this.context = setupTestContext();
-      this.context.component.setAttribute(LIST_ITEM_CONSTANTS.attributes.THREE_LINE, 'true');
-      (this.context as ITestListItemDefaultContext).append();
-      expect(this.context.component.threeLine).toBe(true);
-      expect(this.context.component.hasAttribute(LIST_ITEM_CONSTANTS.attributes.THREE_LINE)).toBe(true);
-      expect((this.context as ITestListItemDefaultContext).getRootElement().classList.contains(LIST_ITEM_CONSTANTS.classes.THREE_LINE)).toBe(true);
-    });
-
-    it('should set active via property', function(this: ITestContext) {
-      this.context = setupTestContext(true);
-      this.context.component.active = true;
-      expect(this.context.component.active).toBe(true);
-      expect(this.context.component.hasAttribute(LIST_ITEM_CONSTANTS.attributes.ACTIVE)).toBe(true);
-      expect((this.context as ITestListItemDefaultContext).getRootElement().classList.contains(LIST_ITEM_CONSTANTS.classes.ACTIVE)).toBe(true);
-    });
-
-    it('should set active via attribute', function(this: ITestContext) {
-      this.context = setupTestContext(true);
-      this.context.component.setAttribute(LIST_ITEM_CONSTANTS.attributes.ACTIVE, 'true');
-      expect(this.context.component.active).toBe(true);
-      expect(this.context.component.hasAttribute(LIST_ITEM_CONSTANTS.attributes.ACTIVE)).toBe(true);
-      expect((this.context as ITestListItemDefaultContext).getRootElement().classList.contains(LIST_ITEM_CONSTANTS.classes.ACTIVE)).toBe(true);
-    });
-
-    it('should set active via attribute by default', function(this: ITestContext) {
-      this.context = setupTestContext();
-      this.context.component.setAttribute(LIST_ITEM_CONSTANTS.attributes.ACTIVE, 'true');
-      (this.context as ITestListItemDefaultContext).append();
-      expect(this.context.component.active).toBe(true);
-      expect(this.context.component.hasAttribute(LIST_ITEM_CONSTANTS.attributes.ACTIVE)).toBe(true);
-      expect((this.context as ITestListItemDefaultContext).getRootElement().classList.contains(LIST_ITEM_CONSTANTS.classes.ACTIVE)).toBe(true);
-    });
-
-    it('should set active via property by default', function(this: ITestContext) {
-      this.context = setupTestContext();
-      this.context.component.setAttribute(LIST_ITEM_CONSTANTS.attributes.ACTIVE, 'true');
-      (this.context as ITestListItemDefaultContext).append();
-      expect(this.context.component.active).toBe(true);
-      expect(this.context.component.hasAttribute(LIST_ITEM_CONSTANTS.attributes.ACTIVE)).toBe(true);
-      expect((this.context as ITestListItemDefaultContext).getRootElement().classList.contains(LIST_ITEM_CONSTANTS.classes.ACTIVE)).toBe(true);
-    });
-
-    it('should toggle active', async function(this: ITestContext) {
-      this.context = setupTestContext();
-      this.context.component.active = true;
-      (this.context as ITestListItemDefaultContext).append();
-      await tick();
-      this.context.component.active = false;
-      expect(this.context.component.active).toBe(false);
-      expect(this.context.component.hasAttribute(LIST_ITEM_CONSTANTS.attributes.ACTIVE)).toBe(false);
-      expect((this.context as ITestListItemDefaultContext).getRootElement().classList.contains(LIST_ITEM_CONSTANTS.classes.ACTIVE)).toBe(false);
-    });
-
-    it('should toggle selected', async function(this: ITestContext) {
-      this.context = setupTestContext();
-      this.context.component.selected = true;
-      (this.context as ITestListItemDefaultContext).append();
-      await tick();
-      this.context.component.selected = false;
-      expect(this.context.component.selected).toBe(false);
-      expect(this.context.component.hasAttribute(LIST_ITEM_CONSTANTS.attributes.SELECTED)).toBe(false);
-      expect((this.context as ITestListItemDefaultContext).getRootElement().classList.contains(LIST_ITEM_CONSTANTS.classes.SELECTED)).toBe(false);
-      expect((this.context as ITestListItemDefaultContext).getRootElement().classList.contains(LIST_ITEM_CONSTANTS.classes.ACTIVATED)).toBe(false);
-    });
-  });
-
-  describe('child of drawer component', function(this: ITestContext) {
-
-    it('should have drawer context attribute when a child of a drawer component', function(this: ITestContext) {
-      this.context = setupDrawerTestContext();
-      expect(this.context.component.hasAttribute(LIST_ITEM_CONSTANTS.attributes.DRAWER_CONTEXT)).toBe(true);
-      expect(this.context.component.getAttribute(LIST_ITEM_CONSTANTS.attributes.DRAWER_CONTEXT)).toBe('true');
-    });
-  });
-
-  describe('with checkbox', function(this: ITestContext) {
-    it('should check checkbox when clicked', function(this: ITestContext) {
-      this.context = setupCheckboxTestContext(true);
-      (this.context as ITestListItemCheckboxContext).getRootElement().click();
-      expect((this.context as ITestListItemCheckboxContext).getInputElement().checked).toBe(true);
-    });
-
-    it('should check checkbox when parent list has selectedValue', async function(this: ITestContext) {
-      this.context = setupCheckboxTestContext();
-
-      (this.context as ITestListItemCheckboxContext).listComponent.selectedValue = [1];
-      this.context.component.value = 1;
-
-      // append to the DOM to start the test
-      (this.context as ITestListItemCheckboxContext).append();
-
-      await tick();
-
-      expect((this.context as ITestListItemCheckboxContext).getInputElement().checked).toBe(true);
-    });
-
-    it('should not check checkbox with the forge-ignore attribute applied when list-item is clicked', function(this: ITestContext) {
-      this.context = setupCheckboxTestContext(true);
-      const checkboxInputElement = (this.context as ITestListItemCheckboxContext).getInputElement();
-      checkboxInputElement.setAttribute(LIST_ITEM_CONSTANTS.attributes.IGNORE, '');
-      (this.context as ITestListItemCheckboxContext).getRootElement().click();
-      expect(checkboxInputElement.checked).toBe(false);
-    });
-
-    it('should emit change event toggling checked state', function(this: ITestContext) {
-      this.context = setupCheckboxTestContext(true);
-      const changeSpy = jasmine.createSpy('change spy');
-      (this.context as ITestListItemCheckboxContext).getInputElement().addEventListener('change', changeSpy);
-
-      (this.context as ITestListItemCheckboxContext).getRootElement().click();
-
-      expect(changeSpy).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe('with radio', function(this: ITestContext) {
-    it('should check radio when clicked', function(this: ITestContext) {
-      this.context = setupRadioTestContext();
-      this.context.getRootElement1().click();
-      expect(this.context.getRadioInput1().checked).toBe(true);
-    });
-
-    it('should not check radio with the "forge-ignore" attribute applied when list-item is clicked', function(this: ITestContext) {
-      this.context = setupRadioTestContext();
-      const radioInput1 = this.context.getRadioInput1();
-      radioInput1.setAttribute(LIST_ITEM_CONSTANTS.attributes.IGNORE, '');
-      
-      this.context.getRootElement1().click();
-      expect(radioInput1.checked).toBe(false);
-    });
-
-    it('should check radio button in another list item', function(this: ITestContext) {
-      this.context = setupRadioTestContext();
-      this.context.getRootElement1().click();
-      this.context.getRootElement2().click();
-      expect(this.context.getRadioInput1().checked).toBe(false);
-      expect(this.context.getRadioInput2().checked).toBe(true);
-    });
-
-    it('should emit change event toggling checked state', function(this: ITestContext) {
-      this.context = setupRadioTestContext();
-      const changeSpy = jasmine.createSpy('change spy');
-      this.context.getRadioInput1().addEventListener('change', changeSpy);
-
-      this.context.getRootElement1().click();
-
-      expect(changeSpy).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  function setupTestContext(append = false): ITestListItemDefaultContext {
-    const fixture = document.createElement('div');
-    fixture.id = 'list-item-test-fixture';
-
-    const listComponent = document.createElement(LIST_CONSTANTS.elementName) as IListComponent;
-    const component = createListItem();
-    listComponent.appendChild(component);
-    fixture.appendChild(listComponent);
-
-    if (append) {
-      document.body.appendChild(fixture);
-    }
-
-    return {
-      listComponent,
-      component,
-      getRootElement: () => getShadowElement(component, LIST_ITEM_CONSTANTS.selectors.LIST_ITEM),
-      append: () => document.body.appendChild(fixture),
-      destroy: () => removeElement(fixture),
-      simulateInteraction: async () => {
-        const listItem = getShadowElement(component, LIST_ITEM_CONSTANTS.selectors.LIST_ITEM);
-        if (listItem) {
-          listItem.dispatchEvent(new Event('pointerenter'));
-          await timer();
-          await tick();
-        }
-      }
-    };
-  }
-
-  function setupDrawerTestContext(): ITestListItemDrawerContext {
-    const fixture = document.createElement('div');
-    fixture.id = 'list-item-drawer-test-fixture';
-    const listComponent = document.createElement(LIST_CONSTANTS.elementName) as IListComponent;
-    const component = createListItem();
-    listComponent.appendChild(component)
-    const drawerComponent = document.createElement(DRAWER_CONSTANTS.elementName) as IDrawerComponent;
-    drawerComponent.appendChild(listComponent);
-    fixture.appendChild(drawerComponent);
-    document.body.appendChild(fixture);
-    return {
-      component,
-      destroy: () => removeElement(fixture)
-    };
-  }
-
-  function setupCheckboxTestContext(append = false): ITestListItemCheckboxContext {
-    const fixture = document.createElement('div');
-    fixture.id = 'list-item-test-fixture';
-    const listComponent = document.createElement(LIST_CONSTANTS.elementName) as IListComponent;
-    const component = createListItem();
-    const checkboxComponent = document.createElement(CHECKBOX_CONSTANTS.elementName) as ICheckboxComponent;
-    checkboxComponent.slot = 'trailing';
-    const checkboxInputElement = document.createElement('input');
-    checkboxInputElement.type = 'checkbox';
-    checkboxComponent.appendChild(checkboxInputElement);
-    component.appendChild(checkboxComponent);
-    listComponent.appendChild(component)
-    fixture.appendChild(listComponent);
-
-    if(append) {
-      document.body.appendChild(fixture);
-    }
-
-    return {
-      listComponent,
-      component,
-      getRootElement: () => getShadowElement(component, LIST_ITEM_CONSTANTS.selectors.LIST_ITEM),
-      getInputElement: () => component.querySelector('input') as HTMLInputElement,
-      append: () => document.body.appendChild(fixture),
-      destroy: () => removeElement(fixture)
-    };
-  }
-
-  function setupRadioTestContext(): ITestListItemRadioContext {
-    const fixture = document.createElement('div');
-    fixture.id = 'list-item-radio-test-fixture';
-    const listComponent = document.createElement(LIST_CONSTANTS.elementName) as IListComponent;
-    const component1 = createListItem();
-    const component2 = createListItem();
-    const radio1Component = createRadio();
-    component1.appendChild(radio1Component);
-    listComponent.appendChild(component1)
-    const radio2Component = createRadio();
-    component2.appendChild(radio2Component);
-    listComponent.appendChild(component2);
-    fixture.appendChild(listComponent);
-    document.body.appendChild(fixture);
-    return {
-      component1,
-      component2,
-      listComponent,
-      getRootElement1: () => getShadowElement(component1, LIST_ITEM_CONSTANTS.selectors.LIST_ITEM),
-      getRootElement2: () => getShadowElement(component2, LIST_ITEM_CONSTANTS.selectors.LIST_ITEM),
-      getRadioInput1: () => component1.querySelector('input') as HTMLInputElement,
-      getRadioInput2: () => component2.querySelector('input') as HTMLInputElement,
-      destroy: () => removeElement(fixture)
-    };
-  }
-  
-  function createListItem(): IListItemComponent {
-    const component = document.createElement(LIST_ITEM_CONSTANTS.elementName) as IListItemComponent;
-    const lineOne = document.createElement('span');
-    lineOne.textContent = 'Line one';
-    component.appendChild(lineOne);
-    return component;
-  }
-
-  function createRadio(): IRadioComponent {
-    const component = document.createElement(RADIO_CONSTANTS.elementName) as IRadioComponent;
-    component.slot = 'trailing';
-    const inputElement = document.createElement('input');
-    inputElement.type = 'radio';
-    inputElement.name = 'list-radio';
-    component.appendChild(inputElement);
-    return component;
-  }
-});
diff --git a/src/test/spec/list/list/list.spec.ts b/src/test/spec/list/list/list.spec.ts
deleted file mode 100644
index 2808bce53..000000000
--- a/src/test/spec/list/list/list.spec.ts
+++ /dev/null
@@ -1,425 +0,0 @@
-import { defineListComponent, IListComponent, LIST_CONSTANTS, LIST_ITEM_CONSTANTS, IListItemComponent, ListComponent } from '@tylertech/forge/list';
-import { DIVIDER_CONSTANTS, IDividerComponent } from '@tylertech/forge/divider';
-import { removeElement, getShadowElement, getActiveElement } from '@tylertech/forge-core';
-import { tick, dispatchKeyEvent } from '@tylertech/forge-testing';
-
-interface ITestListItemNumber {
-  id: number;
-  text: string;
-  value: number;
-}
-
-interface ITestListItemString {
-  id: number;
-  text: string;
-  value: string;
-}
-
-const listNumberItems = [
-  { id: 1, text: 'one', value: 1 },
-  { id: 2, text: 'two', value: 2 },
-  { id: 3, text: 'three', value: 3 }
-];
-
-const listStringItems = [
-  { id: 1, text: 'one', value: '1' },
-  { id: 2, text: 'two', value: '2' },
-  { id: 3, text: 'three', value: '3' }
-];
-
-interface ITestContext {
-  context: ITestListContext
-}
-
-interface ITestListContext {
-  component: IListComponent;
-  getListItemComponents(): IListItemComponent[];
-  append(): void;
-  destroy(): void;
-}
-
-describe('ListComponent', function(this: ITestContext) {
-  beforeAll(function(this: ITestContext) {
-    defineListComponent();
-  });
-  
-  afterEach(function(this: ITestContext) {
-    this.context.destroy();
-  });
-
-  describe('list with number values', function(this: ITestContext) {
-    it('should not be static by default', function(this: ITestContext) {
-      this.context = setupTestContext(true, listNumberItems);
-      expect(this.context.component.static).toBe(false);
-    });
-
-    it('should set static via property', async function(this: ITestContext) {
-      this.context = setupTestContext(true, listNumberItems);
-      await tick();
-      this.context.component.static = true;
-      expect(this.context.component.hasAttribute(LIST_CONSTANTS.attributes.STATIC)).toBe(true);
-      expect(this.context.getListItemComponents().every(li => li.static)).toBe(true);
-    });
-
-    it('should set static via attribute', function(this: ITestContext) {
-      this.context = setupTestContext(true, listNumberItems);
-      this.context.component.setAttribute(LIST_CONSTANTS.attributes.STATIC, 'true');
-      expect(this.context.component.static).toBe(true);
-      expect(this.context.getListItemComponents().every(li => li.static)).toBe(true);
-    });
-
-    it('should render list items static when set by default via attribute', function(this: ITestContext) {
-      this.context = setupTestContext(false, listNumberItems);
-      this.context.component.setAttribute(LIST_CONSTANTS.attributes.STATIC, 'true');
-      this.context.append();
-      expect(this.context.component.static).toBe(true);
-      expect(this.context.getListItemComponents().every(li => li.static)).toBe(true);
-    });
-
-    it('should render list items static when set by default via property', function(this: ITestContext) {
-      this.context = setupTestContext(false, listNumberItems);
-      this.context.component.static = true;
-      this.context.append();
-      expect(this.context.component.static).toBe(true);
-      expect(this.context.getListItemComponents().every(li => li.static)).toBe(true);
-    });
-
-    it('should set list items to not be static', async function(this: ITestContext) {
-      this.context = setupTestContext(false, listNumberItems);
-      this.context.component.static = true;
-      this.context.append();
-      await tick();
-      this.context.component.static = false;
-      expect(this.context.component.hasAttribute(LIST_CONSTANTS.attributes.STATIC)).toBe(false);
-      expect(this.context.getListItemComponents().every(li => li.static)).toBe(false);
-    });
-
-    it('should not handle keydown events when static', async function(this: ITestContext) {
-      this.context = setupTestContext(false, listNumberItems);
-      this.context.component.static = true;
-      this.context.append();
-      const keydownSpy = spyOn(this.context.component['_foundation'], '_onKeydown').and.callThrough();
-      await tick();
-      dispatchKeyEvent(this.context.getListItemComponents()[0], 'keydown', 'Enter');
-      expect(keydownSpy).not.toHaveBeenCalled();
-    });
-
-    it('should handle keydown events when not static', async function(this: ITestContext) {
-      this.context = setupTestContext(true, listNumberItems);
-      const keydownSpy = spyOn(this.context.component['_foundation'], '_onKeydown').and.callThrough();
-      await tick();
-      dispatchKeyEvent(this.context.getListItemComponents()[0], 'keydown', 'Enter');
-      expect(keydownSpy).toHaveBeenCalledTimes(1);
-    });
-
-    it('should handle keydown events when not static', async function(this: ITestContext) {
-      this.context = setupTestContext(true, listNumberItems);
-      const keydownSpy = spyOn(this.context.component['_foundation'], '_onKeydown').and.callThrough();
-      await tick();
-      dispatchKeyEvent(this.context.getListItemComponents()[0], 'keydown', 'Enter');
-      expect(keydownSpy).toHaveBeenCalledTimes(1);
-    });
-
-    it('should not be dense by default', function(this: ITestContext) {
-      this.context = setupTestContext(true, listNumberItems);
-      expect(this.context.component.dense).toBe(false);
-    });
-
-    it('should set dense via property', function(this: ITestContext) {
-      this.context = setupTestContext(true, listNumberItems);
-      this.context.component.dense = true;
-      expect(this.context.component.dense).toBe(true);
-      expect(this.context.component.hasAttribute(LIST_CONSTANTS.attributes.DENSE)).toBe(true);
-      this.context.component.dense = false;
-      expect(this.context.component.dense).toBe(false);
-      expect(this.context.component.hasAttribute(LIST_CONSTANTS.attributes.DENSE)).toBe(false);
-    });
-
-    it('should set dense via attribute', function(this: ITestContext) {
-      this.context = setupTestContext(true, listNumberItems);
-      this.context.component.setAttribute(LIST_CONSTANTS.attributes.DENSE, 'true');
-      expect(this.context.component.dense).toBe(true);
-      expect(this.context.getListItemComponents().every(li => li.dense)).toBe(true);
-    });
-
-    it('should render list items dense when set by default via attribute', function(this: ITestContext) {
-      this.context = setupTestContext(false, listNumberItems);
-      this.context.component.setAttribute(LIST_CONSTANTS.attributes.DENSE, 'true');
-      this.context.append();
-      expect(this.context.component.dense).toBe(true);
-      expect(this.context.getListItemComponents().every(li => li.dense)).toBe(true);
-    });
-
-    it('should render list items dense when set by default via property', function(this: ITestContext) {
-      this.context = setupTestContext(false, listNumberItems);
-      this.context.component.dense = true;
-      this.context.append();
-      expect(this.context.component.dense).toBe(true);
-      expect(this.context.getListItemComponents().every(li => li.dense)).toBe(true);
-    });
-
-    it('should set list items to not be dense', async function(this: ITestContext) {
-      this.context = setupTestContext(false, listNumberItems);
-      this.context.component.dense = true;
-      this.context.append();
-      await tick();
-      this.context.component.dense = false;
-      expect(this.context.component.hasAttribute(LIST_CONSTANTS.attributes.DENSE)).toBe(false);
-      expect(this.context.getListItemComponents().every(li => li.dense)).toBe(false);
-    });
-
-    it('should set propagate click by default', function(this: ITestContext) {
-      this.context = setupTestContext(true, listNumberItems);
-      expect(this.context.component.propagateClick).toBe(true);
-    });
-
-    it('should set propagate click via property', function(this: ITestContext) {
-      this.context = setupTestContext(true, listNumberItems);
-      this.context.component.propagateClick = false;
-      expect(this.context.component.propagateClick).toBe(false);
-      this.context.component.propagateClick = true;
-      expect(this.context.component.propagateClick).toBe(true);
-    });
-
-    it('should set propagate click via attribute', function(this: ITestContext) {
-      this.context = setupTestContext(true, listNumberItems);
-      this.context.component.setAttribute(LIST_CONSTANTS.attributes.PROPAGATE_CLICK, 'false');
-      expect(this.context.component.propagateClick).toBe(false);
-      expect(this.context.getListItemComponents().every(li => li.propagateClick)).toBe(false);
-      this.context.component.setAttribute(LIST_CONSTANTS.attributes.PROPAGATE_CLICK, 'true');
-      expect(this.context.component.propagateClick).toBe(true);
-      expect(this.context.getListItemComponents().every(li => li.propagateClick)).toBe(true);
-    });
-
-    it('should set list items to not propagate click when set by default via attribute', function(this: ITestContext) {
-      this.context = setupTestContext(false, listNumberItems);
-      this.context.component.setAttribute(LIST_CONSTANTS.attributes.PROPAGATE_CLICK, 'false');
-      this.context.append();
-      expect(this.context.component.propagateClick).toBe(false);
-      expect(this.context.getListItemComponents().every(li => li.propagateClick)).toBe(false);
-    });
-
-    it('should set list items to not propagate click when set by default via property', function(this: ITestContext) {
-      this.context = setupTestContext(false, listNumberItems);
-      this.context.component.propagateClick = false;
-      this.context.append();
-      expect(this.context.component.propagateClick).toBe(false);
-      expect(this.context.getListItemComponents().every(li => li.propagateClick)).toBe(false);
-    });
-
-    it('should not be indented by default', function(this: ITestContext) {
-      this.context = setupTestContext(true, listNumberItems);
-      expect(this.context.component.indented).toBe(false);
-    });
-
-    it('should set indented via property', function(this: ITestContext) {
-      this.context = setupTestContext(true, listNumberItems);
-      this.context.component.indented = true;
-      expect(this.context.component.indented).toBe(true);
-      expect(this.context.component.hasAttribute(LIST_CONSTANTS.attributes.INDENTED)).toBe(true);
-      this.context.component.indented = false;
-      expect(this.context.component.indented).toBe(false);
-      expect(this.context.component.hasAttribute(LIST_CONSTANTS.attributes.INDENTED)).toBe(false);
-    });
-
-    it('should set indented via attribute', function(this: ITestContext) {
-      this.context = setupTestContext(true, listNumberItems);
-      this.context.component.setAttribute(LIST_CONSTANTS.attributes.INDENTED, 'true');
-      expect(this.context.component.indented).toBe(true);
-      expect(this.context.getListItemComponents().every(li => li.indented)).toBe(true);
-    });
-
-    it('should render list items indented when set by default via attribute', function(this: ITestContext) {
-      this.context = setupTestContext(false, listNumberItems);
-      this.context.component.setAttribute(LIST_CONSTANTS.attributes.INDENTED, 'true');
-      this.context.append();
-      expect(this.context.component.indented).toBe(true);
-      expect(this.context.getListItemComponents().every(li => li.indented)).toBe(true);
-    });
-
-    it('should render list items indented when set by default via property', function(this: ITestContext) {
-      this.context = setupTestContext(false, listNumberItems);
-      this.context.component.indented = true;
-      this.context.append();
-      expect(this.context.component.indented).toBe(true);
-      expect(this.context.getListItemComponents().every(li => li.indented)).toBe(true);
-    });
-
-    it('should set list items to not be indented', async function(this: ITestContext) {
-      this.context = setupTestContext(false, listNumberItems);
-      this.context.component.indented = true;
-      this.context.append();
-      await tick();
-      this.context.component.indented = false;
-      expect(this.context.component.hasAttribute(LIST_CONSTANTS.attributes.INDENTED)).toBe(false);
-      expect(this.context.getListItemComponents().every(li => li.indented)).toBe(false);
-    });
-
-    it('should initialize with selected value via property', function(this: ITestContext) {
-      this.context = setupTestContext(false, listNumberItems);
-      this.context.component.selectedValue = [1, 2];
-      this.context.append();
-      expect(this.context.component.selectedValue.length).toBe(2);
-      const listItemComponents = this.context.getListItemComponents();
-      expect(listItemComponents[0].selected).toBe(true);
-      expect(listItemComponents[1].selected).toBe(true);
-    });
-
-    it('should set selected value with via property', async function(this: ITestContext) {
-      this.context = setupTestContext(true, listNumberItems);
-      this.context.component.selectedValue = [1, 2];
-      expect(this.context.component.selectedValue.length).toBe(2);
-      let listItemComponents = this.context.getListItemComponents();
-      expect(listItemComponents[0].selected).toBe(true);
-      expect(listItemComponents[1].selected).toBe(true);
-
-      await tick();
-
-      this.context.component.selectedValue = 1;
-      expect(this.context.component.selectedValue).toBe(1);
-      listItemComponents = this.context.getListItemComponents();
-      expect(listItemComponents[0].selected).toBe(true);
-      expect(listItemComponents[1].selected).toBe(false);
-    });
-
-    it('should emit selected event when enter is pressed on focused list item', async function(this: ITestContext) {
-      this.context = setupTestContext(true, listNumberItems);
-      const listener = jasmine.createSpy('selected listener');
-      this.context.component.addEventListener(LIST_ITEM_CONSTANTS.events.SELECT, listener);
-      await tick();
-
-      const listItemEl = getShadowElement(this.context.getListItemComponents()[0], LIST_ITEM_CONSTANTS.selectors.LIST_ITEM);
-      listItemEl.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
-
-      expect(listener).toHaveBeenCalledTimes(1);
-    });
-
-    it('should emit selected event when space is pressed on focused list item', async function(this: ITestContext) {
-      this.context = setupTestContext(true, listNumberItems);
-      const listener = jasmine.createSpy('selected listener');
-      this.context.component.addEventListener(LIST_ITEM_CONSTANTS.events.SELECT, listener);
-      await tick();
-      
-      const listItemEl = getShadowElement(this.context.getListItemComponents()[0], LIST_ITEM_CONSTANTS.selectors.LIST_ITEM);
-      listItemEl.dispatchEvent(new KeyboardEvent('keydown', { key: ' ' }));
-
-      expect(listener).toHaveBeenCalledTimes(1);
-    });
-
-    it('should not ignore modifier keys when pressed on focused list item', async function(this: ITestContext) {
-      this.context = setupTestContext(true, listNumberItems);
-      const listener = jasmine.createSpy('selected listener');
-      this.context.component.addEventListener(LIST_ITEM_CONSTANTS.events.SELECT, listener);
-      const listItemComponents = this.context.getListItemComponents();
-      const firstItem = listItemComponents[0];
-      const secondItem = listItemComponents[1];
-      this.context.component.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' ,ctrlKey: true})); 
-      this.context.component.focus();
-      this.context.component.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' ,altKey: true})); 
-      this.context.component.focus();
-      this.context.component.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' ,shiftKey: true})); 
-      this.context.component.focus();
-      this.context.component.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' ,metaKey: true}));
-      expect(listener).toHaveBeenCalledTimes(0);
-    })
-
-    it('should focus first list item when home is pressed', async function(this: ITestContext) {
-      this.context = setupTestContext(true, listNumberItems);
-      await tick();
-      const listItemComponents = this.context.getListItemComponents();
-      const firstListItem = getShadowElement(listItemComponents[0], LIST_ITEM_CONSTANTS.selectors.LIST_ITEM);
-      const secondListItem = getShadowElement(listItemComponents[1], LIST_ITEM_CONSTANTS.selectors.LIST_ITEM);
-      secondListItem.focus();
-      dispatchKeyEvent(listItemComponents[1], 'keydown', 'Home', true);
-      expect(getActiveElement()).toBe(firstListItem);
-    });
-
-    it('should focus last list item when end is pressed', async function(this: ITestContext) {
-      this.context = setupTestContext(true, listNumberItems);
-      await tick();
-      const listItemComponents = this.context.getListItemComponents();
-      const lastListItem = getShadowElement(listItemComponents[2], LIST_ITEM_CONSTANTS.selectors.LIST_ITEM);
-      const secondListItem = getShadowElement(listItemComponents[1], LIST_ITEM_CONSTANTS.selectors.LIST_ITEM);
-      secondListItem.focus();
-      dispatchKeyEvent(listItemComponents[1], 'keydown', 'End', true);
-      expect(getActiveElement()).toBe(lastListItem);
-    });
-
-    it('should focus next list item when down arrow is pressed', async function(this: ITestContext) {
-      this.context = setupTestContext(true, listNumberItems);
-      await tick();
-      const listItemComponents = this.context.getListItemComponents();
-      const firstListItem = getShadowElement(listItemComponents[0], LIST_ITEM_CONSTANTS.selectors.LIST_ITEM);
-      const secondListItem = getShadowElement(listItemComponents[1], LIST_ITEM_CONSTANTS.selectors.LIST_ITEM);
-      firstListItem.focus();
-      dispatchKeyEvent(listItemComponents[0], 'keydown', 'ArrowDown', true);
-      expect(getActiveElement()).toBe(secondListItem);
-    });
-
-    it('should focus previous list item when up arrow is pressed', async function(this: ITestContext) {
-      this.context = setupTestContext(true, listNumberItems);
-      await tick();
-      const listItemComponents = this.context.getListItemComponents();
-      const firstListItem = getShadowElement(listItemComponents[0], LIST_ITEM_CONSTANTS.selectors.LIST_ITEM);
-      const secondListItem = getShadowElement(listItemComponents[1], LIST_ITEM_CONSTANTS.selectors.LIST_ITEM);
-      secondListItem.focus();
-      dispatchKeyEvent(listItemComponents[1], 'keydown', 'ArrowUp', true);
-      expect(getActiveElement()).toBe(firstListItem);
-    });
-
-    it('should wrap focus when up arrow is pressed on first list item', async function(this: ITestContext) {
-      this.context = setupTestContext(true, listNumberItems);
-      await tick();
-      const listItemComponents = this.context.getListItemComponents();
-      const firstListItem = getShadowElement(listItemComponents[0], LIST_ITEM_CONSTANTS.selectors.LIST_ITEM);
-      const lastListItem = getShadowElement(listItemComponents[2], LIST_ITEM_CONSTANTS.selectors.LIST_ITEM);
-      firstListItem.focus();
-      dispatchKeyEvent(listItemComponents[1], 'keydown', 'ArrowUp', true);
-      expect(getActiveElement()).toBe(lastListItem);
-    });
-
-    it('should wrap focus when down arrow is pressed on last list item', async function(this: ITestContext) {
-      this.context = setupTestContext(true, listNumberItems);
-      await tick();
-      const listItemComponents = this.context.getListItemComponents();
-      const firstListItem = getShadowElement(listItemComponents[0], LIST_ITEM_CONSTANTS.selectors.LIST_ITEM);
-      const lastListItem = getShadowElement(listItemComponents[2], LIST_ITEM_CONSTANTS.selectors.LIST_ITEM);
-      lastListItem.focus();
-      dispatchKeyEvent(listItemComponents[1], 'keydown', 'ArrowDown', true);
-      expect(getActiveElement()).toBe(firstListItem);
-    });
-  });
-
-  describe('list with string values', function(this: ITestContext) {    
-    it('should set a single selected string value via attribute', function(this: ITestContext) {
-      this.context = setupTestContext(true, listStringItems);
-      const selectedValue = '1';
-      this.context.component.setAttribute(LIST_CONSTANTS.attributes.SELECTED_VALUE, selectedValue);
-      const listItemComponents = this.context.getListItemComponents();
-      expect(listItemComponents[0].selected).toBe(true);
-      expect(listItemComponents[1].selected).toBe(false);
-    });   
-  });
-
-  function setupTestContext(append = false, listItems: ITestListItemNumber[] | ITestListItemString[]): ITestListContext {
-    const fixture = document.createElement('div');
-    fixture.id = 'list-test-fixture';
-    const component = document.createElement(LIST_CONSTANTS.elementName) as IListComponent;
-    for (const item of listItems) {
-      const listItem = document.createElement(LIST_ITEM_CONSTANTS.elementName) as IListItemComponent;
-      listItem.value = item.value;
-      listItem.textContent = item.text;
-      component.appendChild(listItem);
-      const divider = document.createElement(DIVIDER_CONSTANTS.elementName) as IDividerComponent;
-      component.appendChild(divider);
-    }
-    fixture.appendChild(component);
-    if (append) document.body.appendChild(fixture);
-    return {
-      component,
-      getListItemComponents: () => Array.from(component.querySelectorAll(LIST_ITEM_CONSTANTS.elementName)),
-      append: () => document.body.appendChild(fixture),
-      destroy: () => removeElement(fixture)
-    };
-  }  
-});
diff --git a/src/test/spec/menu/menu.spec.ts b/src/test/spec/menu/menu.spec.ts
index 8a656e506..0551a19d6 100644
--- a/src/test/spec/menu/menu.spec.ts
+++ b/src/test/spec/menu/menu.spec.ts
@@ -332,8 +332,8 @@ describe('MenuComponent', function(this: ITestContext) {
       this.context.component.options = options;
       this.context.component.open = true;
       await timer(300);
-      const listItemHost = getShadowElement(getPopupListItem(5), LIST_ITEM_CONSTANTS.selectors.LIST_ITEM);
-      expect(listItemHost.classList.contains(LIST_ITEM_CONSTANTS.classes.DISABLED)).toBe(true);
+
+      expect(getPopupListItem(5).hasAttribute(LIST_ITEM_CONSTANTS.attributes.DISABLED)).toBe(true);
     });
 
     it(`should have selected class when option is set to selected and persistSelection is true`, async function(this: ITestContext) {
@@ -344,8 +344,8 @@ describe('MenuComponent', function(this: ITestContext) {
       this.context.component.options = options;
       this.context.component.open = true;
       await timer(300);
-      const listItemHost = getShadowElement(getPopupListItem(5), LIST_ITEM_CONSTANTS.selectors.LIST_ITEM);
-      expect(listItemHost.classList.contains(LIST_ITEM_CONSTANTS.classes.SELECTED)).toBe(true);
+
+      expect(getPopupListItem(5).hasAttribute(LIST_ITEM_CONSTANTS.attributes.SELECTED)).toBe(true);
     });
 
     it(`should not have selected class when option is set to selected and persistSelection is false`, async function(this: ITestContext) {
@@ -356,8 +356,8 @@ describe('MenuComponent', function(this: ITestContext) {
       this.context.component.options = options;
       this.context.component.open = true;
       await timer(300);
-      const listItemHost = getShadowElement(getPopupListItem(5), LIST_ITEM_CONSTANTS.selectors.LIST_ITEM);
-      expect(listItemHost.classList.contains(LIST_ITEM_CONSTANTS.classes.SELECTED)).toBe(false);
+
+      expect(getPopupListItem(5).hasAttribute(LIST_ITEM_CONSTANTS.attributes.SELECTED)).toBe(false);
     });
 
     it(`should not have selected class when option is set to selected and persistSelection is switched from true to false`, async function(this: ITestContext) {
@@ -370,8 +370,8 @@ describe('MenuComponent', function(this: ITestContext) {
       this.context.component.persistSelection = false;
       this.context.component.open = true;
       await timer(300);
-      const listItemHost = getShadowElement(getPopupListItem(5), LIST_ITEM_CONSTANTS.selectors.LIST_ITEM);
-      expect(listItemHost.classList.contains(LIST_ITEM_CONSTANTS.classes.SELECTED)).toBe(false);
+
+      expect(getPopupListItem(5).hasAttribute(LIST_ITEM_CONSTANTS.attributes.SELECTED)).toBe(false);
     });
 
     it('should use option builder', async function(this: ITestContext) {
@@ -447,8 +447,7 @@ describe('MenuComponent', function(this: ITestContext) {
         await timer(300);
         this.context.getToggleElement().dispatchEvent(new KeyboardEvent('keydown', { code: 'ArrowDown' }));
 
-        const listItem = getShadowElement(getPopupListItem(0), LIST_ITEM_CONSTANTS.selectors.LIST_ITEM);
-        expect(listItem.classList.contains(LIST_ITEM_CONSTANTS.classes.ACTIVE)).toBe(true);
+        expect(getPopupListItem(0).hasAttribute(LIST_ITEM_CONSTANTS.attributes.ACTIVE)).toBe(true);
       });
 
       it('arrow up from the start should activate the last list element', async function(this: ITestContext) {
@@ -459,8 +458,7 @@ describe('MenuComponent', function(this: ITestContext) {
         await timer(300);
         this.context.getToggleElement().dispatchEvent(new KeyboardEvent('keydown', { code: 'ArrowUp' }));
 
-        const listItem = getShadowElement(getPopupListItem(6), LIST_ITEM_CONSTANTS.selectors.LIST_ITEM);
-        expect(listItem.classList.contains(LIST_ITEM_CONSTANTS.classes.ACTIVE)).toBe(true);
+        expect(getPopupListItem(6).hasAttribute(LIST_ITEM_CONSTANTS.attributes.ACTIVE)).toBe(true);
       });
 
       it('enter should select the list element when persistSelection is true', async function(this: ITestContext) {
@@ -571,7 +569,7 @@ describe('MenuComponent', function(this: ITestContext) {
         this.context.component.open = true;
         await timer(300);
         
-        getShadowElement(getPopupListItem(0), LIST_ITEM_CONSTANTS.selectors.LIST_ITEM).dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+        getPopupListItem(0).dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
 
         await timer(300);
 
@@ -684,7 +682,7 @@ describe('MenuComponent', function(this: ITestContext) {
       await tick();
 
       const childMenuListItems = getChildMenuListItems(getPopupElement());
-      childMenuListItems[1].shadowRoot!.querySelector(LIST_ITEM_CONSTANTS.selectors.LIST_ITEM)!.dispatchEvent(new MouseEvent('click'));
+      childMenuListItems[1].dispatchEvent(new MouseEvent('click'));
 
       expect(selectSpy).toHaveBeenCalledTimes(1);
       expect(selectSpy).toHaveBeenCalledWith(jasmine.objectContaining({ detail: { index: 1, value: EXPETED_SELECTION_VALUE, parentValue: options[1].value }}));
diff --git a/src/test/spec/paginator/paginator.spec.ts b/src/test/spec/paginator/paginator.spec.ts
index 3c583e46e..c3c40044f 100644
--- a/src/test/spec/paginator/paginator.spec.ts
+++ b/src/test/spec/paginator/paginator.spec.ts
@@ -114,6 +114,50 @@ describe('PaginatorComponent', function(this: ITestContext) {
       expect(this.context.nextPageButton.hasAttribute('disabled')).toBe(true);
     });
 
+    it('should move focus to previous page button when next page button is disabled', function(this: ITestContext) {
+      this.context = setupTestContext();
+      this.context.paginator.total = 100;
+      this.context.paginator.pageIndex = 2;
+      this.context.nextPageButton.focus();
+      this.context.nextPageButton.click();
+
+      expect(this.context.nextPageButton.hasAttribute('disabled')).toBe(true);
+      expect(this.context.previousPageButton.matches(':focus')).toBe(true);
+    });
+
+    it('should move focus to next page button when previous page button is disabled', function(this: ITestContext) {
+      this.context = setupTestContext();
+      this.context.paginator.total = 100;
+      this.context.paginator.pageIndex = 1;
+      this.context.previousPageButton.focus();
+      this.context.previousPageButton.click();
+
+      expect(this.context.previousPageButton.hasAttribute('disabled')).toBe(true);
+      expect(this.context.nextPageButton.matches(':focus')).toBe(true);
+    });
+
+    it('should move focus to next page button when first page button is disabled', function(this: ITestContext) {
+      this.context = setupTestContext(true, true);
+      this.context.paginator.total = 100;
+      this.context.paginator.pageIndex = 1;
+      this.context.firstPageButton.focus();
+      this.context.firstPageButton.click();
+
+      expect(this.context.firstPageButton.hasAttribute('disabled')).toBe(true);
+      expect(this.context.nextPageButton.matches(':focus')).toBe(true);
+    });
+
+    it('should move focus to previous page button when last page button is disabled', function(this: ITestContext) {
+      this.context = setupTestContext(true, true);
+      this.context.paginator.total = 100;
+      this.context.paginator.pageIndex = 2;
+      this.context.lastPageButton.focus();
+      this.context.lastPageButton.click();
+
+      expect(this.context.lastPageButton.hasAttribute('disabled')).toBe(true);
+      expect(this.context.previousPageButton.matches(':focus')).toBe(true);
+    });
+
     it('should emit change event when clicking next page button', function(this: ITestContext) {
       this.context = setupTestContext();
       this.context.paginator.total = 100;
@@ -248,8 +292,7 @@ describe('PaginatorComponent', function(this: ITestContext) {
       this.context.pageSizeSelect.open = true;
 
       const listItem = this.context.pageSizeSelect.popupElement?.querySelector(LIST_ITEM_CONSTANTS.elementName) as IListItemComponent;
-      const listItemRoot = getShadowElement(listItem, LIST_ITEM_CONSTANTS.selectors.LIST_ITEM);
-      listItemRoot.click();
+      listItem.click();
       await tick();
 
       expect(listItem.value).toBe('5');
@@ -267,8 +310,7 @@ describe('PaginatorComponent', function(this: ITestContext) {
 
       this.context.pageSizeSelect.open = true;
       const listItem = this.context.pageSizeSelect.popupElement?.querySelector(LIST_ITEM_CONSTANTS.elementName) as IListItemComponent;
-      const listItemRoot = getShadowElement(listItem, LIST_ITEM_CONSTANTS.selectors.LIST_ITEM);
-      listItemRoot.click();
+      listItem.click();
       await tick();
 
       expect(this.context.paginator.pageSize).toBe(Number(originalPageSize));
@@ -378,6 +420,45 @@ describe('PaginatorComponent', function(this: ITestContext) {
       expect(this.context.paginator.pageIndex).toBe(0);
     });
 
+    it('should set page index via offset property if total is not > 0 initially', function(this: ITestContext) {
+      this.context = setupTestContext();
+      const pageSizeOptions = [5, 10, 25];
+      this.context.paginator.pageSizeOptions = pageSizeOptions;
+      this.context.paginator.pageSize = 25;
+
+      expect(this.context.paginator.total).toBe(0);
+
+      this.context.paginator.offset = 25;
+      expect(this.context.paginator.pageIndex).toBe(0);
+
+      this.context.paginator.total = 100;
+      expect(this.context.paginator.pageIndex).toBe(1);
+    });
+
+    it('should update offset when page index changes', function(this: ITestContext) {
+      this.context = setupTestContext();
+      const pageSizeOptions = [5, 10, 25];
+      this.context.paginator.pageSizeOptions = pageSizeOptions;
+      this.context.paginator.pageSize = 25;
+      this.context.paginator.total = 100;
+      expect(this.context.paginator.pageIndex).toBe(0);
+      expect(this.context.paginator.offset).toBe(0);
+
+      this.context.paginator.pageIndex = 1;
+
+      expect(this.context.paginator.pageIndex).toBe(1);
+      expect(this.context.paginator.offset).toBe(25);
+
+      this.context.paginator.pageIndex = 3;
+      expect(this.context.paginator.pageIndex).toBe(3);
+      expect(this.context.paginator.offset).toBe(75);
+
+      this.context.paginator.pageIndex = 0;
+
+      expect(this.context.paginator.pageIndex).toBe(0);
+      expect(this.context.paginator.offset).toBe(0);
+    });
+
     it('should get offset', function(this: ITestContext) {
       this.context = setupTestContext();
       const pageSizeOptions = [5, 10, 25];
diff --git a/src/test/spec/popup/popup.spec.ts b/src/test/spec/popup/popup.spec.ts
index fcd0a8648..0c0e53c23 100644
--- a/src/test/spec/popup/popup.spec.ts
+++ b/src/test/spec/popup/popup.spec.ts
@@ -128,6 +128,18 @@ describe('Popup component', function(this: ITestContext) {
     targetElement.removeEventListener(POPUP_CONSTANTS.events.CLOSE, callback);
   });
 
+  it('should also emit close event from the host element', function(this: ITestContext) {
+    this.context = setupTestContext();
+    const { component, targetElement } = this.context;
+    component.targetElement = targetElement;
+    const callback = jasmine.createSpy('callback');
+    component.addEventListener(POPUP_CONSTANTS.events.CLOSE, callback);
+    component.open = true;
+    component.open = false;
+    expect(callback).toHaveBeenCalledTimes(1);
+    component.removeEventListener(POPUP_CONSTANTS.events.CLOSE, callback);
+  });
+
   it('should accept and return focus on open and close', async function(this: ITestContext) {
     this.context = setupTestContext();
     const { component, targetElement } = this.context;
diff --git a/src/test/spec/select/select.spec.ts b/src/test/spec/select/select.spec.ts
index 9558eb721..149423584 100644
--- a/src/test/spec/select/select.spec.ts
+++ b/src/test/spec/select/select.spec.ts
@@ -1487,8 +1487,8 @@ describe('SelectComponent', function(this: ITestContext) {
 
       _openDropdown(this.context.component);
       const listItems = Array.from(this.context.component.popupElement!.querySelectorAll(LIST_ITEM_CONSTANTS.elementName)) as IListItemComponent[];
-      getShadowElement(listItems[0], LIST_ITEM_CONSTANTS.selectors.LIST_ITEM).click();
-      getShadowElement(listItems[1], LIST_ITEM_CONSTANTS.selectors.LIST_ITEM).click();
+      listItems[0].click();
+      listItems[1].click();
       expect(this.context.component.value).toEqual(['one', 'two']);
       expect(this.context.component.selectedIndex).toEqual([0, 1]);
       expect(listItems[0].selected).toBe(true);
diff --git a/src/test/spec/text-field/text-field.spec.ts b/src/test/spec/text-field/text-field.spec.ts
index b0f226709..80bd9ca4e 100644
--- a/src/test/spec/text-field/text-field.spec.ts
+++ b/src/test/spec/text-field/text-field.spec.ts
@@ -184,6 +184,34 @@ describe('TextFieldComponent', function(this: ITestContext) {
       expectFloatingLabelState(this.context, true);
     });
 
+    it('should float label when value is set after changing from dense to roomy', async function(this: ITestContext) {
+      this.context = setupTestContext(true, { density: 'dense' });
+
+      await tick();
+      this.context.input.value = 'test';
+      await floatTick();
+      
+      this.context.component.density = 'roomy';
+      await floatTick();
+
+      expect(this.context.component.hasAttribute(FIELD_CONSTANTS.attributes.HOST_LABEL_FLOATING)).toBeTrue();
+      expectFloatingLabelState(this.context, true);
+    });
+
+    it('should float label when value is set after changing from dense to default', async function(this: ITestContext) {
+      this.context = setupTestContext(true, { density: 'dense' });
+
+      await tick();
+      this.context.input.value = 'test';
+      await floatTick();
+      
+      this.context.component.density = 'default';
+      await floatTick();
+
+      expect(this.context.component.hasAttribute(FIELD_CONSTANTS.attributes.HOST_LABEL_FLOATING)).toBeTrue();
+      expectFloatingLabelState(this.context, true);
+    });
+
     it('should float label when invoked programmatically', async function(this: ITestContext) {
       this.context = setupTestContext();
       await tick();
diff --git a/src/test/spec/time-picker/time-picker.spec.ts b/src/test/spec/time-picker/time-picker.spec.ts
index 2b1c7eccd..8f00e6c58 100644
--- a/src/test/spec/time-picker/time-picker.spec.ts
+++ b/src/test/spec/time-picker/time-picker.spec.ts
@@ -622,7 +622,7 @@ describe('TimePickerComponent', function(this: ITestContext) {
     await timer(POPUP_CONSTANTS.numbers.ANIMATION_DURATION);
 
     const listItems = this.context.getListItems();
-    const matchingListItem = listItems.find(li => li.selected) as IListItemComponent;
+    const matchingListItem = listItems.find(li => li.selected) as IListItemComponent<ITimePickerOptionValue>;
 
     expect(matchingListItem.value.time).toBe(timeMillis);
   });
@@ -667,7 +667,7 @@ describe('TimePickerComponent', function(this: ITestContext) {
     await timer(POPUP_CONSTANTS.numbers.ANIMATION_DURATION);
 
     const listItems = this.context.getListItems();
-    const activeListItem = listItems.find(li => li.selected) as IListItemComponent;
+    const activeListItem = listItems.find(li => li.selected) as IListItemComponent<ITimePickerOptionValue>;
 
     expect(activeListItem.value.time).toBe(timeMillis);
   });
@@ -701,7 +701,7 @@ describe('TimePickerComponent', function(this: ITestContext) {
     await timer(POPUP_CONSTANTS.numbers.ANIMATION_DURATION);
 
     const listItems = this.context.getListItems();
-    const restrictedListItem = listItems.find(li => li.value.time === firstRestrictedTimeMillis) as IListItemComponent;
+    const restrictedListItem = listItems.find((li: IListItemComponent<ITimePickerOptionValue>) => li.value.time === firstRestrictedTimeMillis) as IListItemComponent;
 
     expect(restrictedListItem.disabled).toBeTrue();
 
@@ -872,7 +872,7 @@ describe('TimePickerComponent', function(this: ITestContext) {
     this.context.inputElement.dispatchEvent(new KeyboardEvent('keydown', { code: 'End' }));      
     this.context.inputElement.dispatchEvent(new KeyboardEvent('keydown', { code: 'Enter' }));
 
-    const selectedListItem = listItems[listItems.length - 1];
+    const selectedListItem = listItems[listItems.length - 1] as IListItemComponent<ITimePickerOptionValue>;
     const selectedTimeString = millisToTimeString(selectedListItem.value.time, true, false);
 
     expect(changeSpy).toHaveBeenCalledOnceWith(jasmine.objectContaining({ detail: selectedTimeString }));
@@ -923,10 +923,11 @@ describe('TimePickerComponent', function(this: ITestContext) {
     await timer(POPUP_CONSTANTS.numbers.ANIMATION_DURATION);
 
     const listItems = this.context.getListItems();
+    const listItem = listItems[0] as IListItemComponent<ITimePickerOptionValue>;
 
-    expect(listItems[0].value.time).toBeNull();
-    expect(listItems[0].innerText).toBe('Now');
-    expect(listItems[0].value.metadata).toBe('now');
+    expect(listItem.value.time).toBeNull();
+    expect(listItem.innerText).toBe('Now');
+    expect(listItem.value.metadata).toBe('now');
   });
 
   it('should show "now" as the only option in the dropdown when showHourOptions is false and showNow is true and customOptions is empty', async function(this: ITestContext) {
@@ -939,11 +940,12 @@ describe('TimePickerComponent', function(this: ITestContext) {
     await timer(POPUP_CONSTANTS.numbers.ANIMATION_DURATION);
 
     const listItems = this.context.getListItems();
+    const firstListItem = listItems[0] as IListItemComponent<ITimePickerOptionValue>;
 
     expect(listItems.length).toBe(1);
-    expect(listItems[0].value.time).toBeNull();
-    expect(listItems[0].innerText).toBe('Now');
-    expect(listItems[0].value.metadata).toBe('now');
+    expect(firstListItem.value.time).toBeNull();
+    expect(firstListItem.innerText).toBe('Now');
+    expect(firstListItem.value.metadata).toBe('now');
   });
 
   it('should should not show dropdown when showNow is false and showHourOptions is false and customOptions is empty', async function(this: ITestContext) {
@@ -973,15 +975,17 @@ describe('TimePickerComponent', function(this: ITestContext) {
 
     expect(this.context.component.customOptions).toEqual(customOptions);
 
-    expect(listItems[0].innerText).toBe(customOptions[0].label);
-    expect(listItems[0].value.time).toBeNull();
-    expect(listItems[0].value.metadata).toBe(customOptions[0].value);
-    expect(listItems[0].value.isCustom).toBeTrue();
+    const firstListItem = listItems[0] as IListItemComponent<ITimePickerOptionValue>;
+    expect(firstListItem.innerText).toBe(customOptions[0].label);
+    expect(firstListItem.value.time).toBeNull();
+    expect(firstListItem.value.metadata).toBe(customOptions[0].value);
+    expect(firstListItem.value.isCustom).toBeTrue();
 
-    expect(listItems[1].innerText).toBe(customOptions[1].label);
-    expect(listItems[1].value.time).toBeNull();
-    expect(listItems[1].value.metadata).toBe(customOptions[1].value);
-    expect(listItems[1].value.isCustom).toBeTrue();
+    const secondListItem = listItems[1] as IListItemComponent<ITimePickerOptionValue>;
+    expect(secondListItem.innerText).toBe(customOptions[1].label);
+    expect(secondListItem.value.time).toBeNull();
+    expect(secondListItem.value.metadata).toBe(customOptions[1].value);
+    expect(secondListItem.value.isCustom).toBeTrue();
   });
 
   it('should call toMilliseconds function when selecting custom options', async function(this: ITestContext) {
@@ -1014,7 +1018,7 @@ describe('TimePickerComponent', function(this: ITestContext) {
     const firstListItemMillis = timeStringToMillis(min, true, false);
     const lastListItemMillis = timeStringToMillis(max, true, false);
 
-    const listItems = this.context.getListItems();
+    const listItems = this.context.getListItems() as IListItemComponent<ITimePickerOptionValue>[];
 
     expect(listItems[0].value.time).toBe(firstListItemMillis);
     expect(listItems[listItems.length - 1].value.time).toBe(lastListItemMillis);
@@ -1047,6 +1051,20 @@ describe('TimePickerComponent', function(this: ITestContext) {
     expect(inputElement.value).toBe('01:01');
   });
 
+  it('should select mask when shown on focus', function(this: ITestContext) {
+    this.context = _createTimePickerContext();
+    const inputElement = this.context.inputElement;
+    this.context.component.setAttribute(TIME_PICKER_CONSTANTS.attributes.MASKED, '');
+    this.context.component.setAttribute(TIME_PICKER_CONSTANTS.attributes.SHOW_MASK_FORMAT, '');
+
+    expect(this.context.component.masked).toBe(true);
+    expect(this.context.component.showMaskFormat).toBe(true);
+    inputElement.focus();
+
+    expect(inputElement.selectionStart).toEqual(0);
+    expect(inputElement.selectionEnd).toEqual('__:__ __'.length);
+  });
+
   it('should only show default mask format on focus', function(this: ITestContext) {
     this.context = _createTimePickerContext();
     const inputElement = this.context.inputElement;
diff --git a/src/test/utils/floating-label-utils.ts b/src/test/utils/floating-label-utils.ts
index 006d8aa55..abf7d051a 100644
--- a/src/test/utils/floating-label-utils.ts
+++ b/src/test/utils/floating-label-utils.ts
@@ -6,14 +6,14 @@ export interface IFloatingLabelContext {
 }
 
 export function expectFloatingLabelState(
-  instance: IFloatingLabelContext, 
+  instance: IFloatingLabelContext,
   isFloating: boolean
 ): void {
   testFloatingLabelState(instance.label, isFloating);
 }
 
 export function testFloatingLabelState(
-  labelElement: HTMLLabelElement, 
+  labelElement: HTMLLabelElement,
   isFloating: boolean
 ): void {
   expect(labelElement.classList.contains(FLOATING_LABEL_CONSTANTS.classes.FLOAT_ABOVE)).toBe(isFloating);
@@ -22,4 +22,4 @@ export function testFloatingLabelState(
 export async function floatTick(): Promise<void> {
   await tick();
   await tick();
-}
\ No newline at end of file
+}
diff --git a/tsconfig.json b/tsconfig.json
index 569be885d..a24f6bcf6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,7 +3,7 @@
     "target": "es2015",
     "module": "commonjs",
     "moduleResolution": "node",
-    "lib": ["es2015", "dom", "es2017", "DOM.Iterable"],
+    "lib": ["es2015", "dom", "es2017", "dom.iterable"],
     "noImplicitAny": true,
     "strictNullChecks": true,
     "experimentalDecorators": true,