From 6aa77788c8c76fd301cc0e097aa5aeefc514e136 Mon Sep 17 00:00:00 2001
From: castastrophe <castastrophe@users.noreply.github.com>
Date: Tue, 5 Aug 2025 15:32:16 -0400
Subject: [PATCH] feat(storybook): display custom properties

---
 .changeset/eleven-plants-grow.md              |    5 +
 .changeset/new-bulldogs-add.md                |    5 +
 .eslintrc                                     |    9 +-
 .github/workflows/development.yml             |    2 -
 .github/workflows/lint.yml                    |    3 +-
 .storybook/assets/base.css                    |   18 +-
 .storybook/assets/index.css                   |    4 -
 .storybook/decorators/utilities.js            |    4 +-
 .storybook/main.js                            |    2 +
 .storybook/package.json                       |    3 +-
 .storybook/preview.js                         |    1 +
 components/accordion/dist/metadata.json       | 1361 ++++++--
 components/accordion/index.css                |    1 +
 .../accordion/stories/accordion.stories.js    |   12 +-
 components/actionbar/dist/metadata.json       |  406 ++-
 .../actionbar/stories/actionbar.stories.js    |   12 +-
 components/actionbar/stories/template.js      |    5 +-
 components/actionbutton/dist/metadata.json    | 1246 +++++--
 .../stories/actionbutton.stories.js           |   10 +-
 components/actionbutton/stories/template.js   |    2 +-
 components/actiongroup/dist/metadata.json     |  159 +-
 .../stories/actiongroup.stories.js            |   10 +-
 components/actiongroup/stories/template.js    |    5 +-
 .../actionmenu/stories/actionmenu.stories.js  |    9 +-
 components/actionmenu/stories/template.js     |    2 +-
 components/alertbanner/dist/metadata.json     |  471 ++-
 .../stories/alertbanner.stories.js            |   10 +-
 components/alertbanner/stories/template.js    |    4 +-
 components/alertdialog/dist/metadata.json     |  467 ++-
 .../stories/alertdialog.stories.js            |   13 +-
 components/alertdialog/stories/template.js    |    2 +-
 components/asset/dist/metadata.json           |  113 +-
 components/asset/stories/asset.stories.js     |   10 +-
 components/assetcard/dist/metadata.json       |  912 ++++-
 .../assetcard/stories/assetcard.stories.js    |   10 +-
 components/assetcard/stories/template.js      |    2 +-
 components/assetlist/dist/metadata.json       |  400 ++-
 .../assetlist/stories/assetlist.stories.js    |    8 +-
 components/assetlist/stories/template.js      |    2 +-
 components/avatar/dist/metadata.json          |  305 +-
 components/avatar/stories/avatar.stories.js   |   10 +-
 components/badge/dist/metadata.json           | 1748 ++++++++--
 components/badge/stories/badge.stories.js     |   10 +-
 components/breadcrumb/dist/metadata.json      |  825 ++++-
 .../breadcrumb/stories/breadcrumb.stories.js  |   12 +-
 components/breadcrumb/stories/template.js     |    7 +-
 components/button/dist/metadata.json          | 1386 ++++++--
 components/button/stories/button.stories.js   |   10 +-
 components/buttongroup/dist/metadata.json     |   85 +-
 .../stories/buttongroup.stories.js            |   10 +-
 components/calendar/dist/metadata.json        |  888 ++++-
 .../calendar/stories/calendar.stories.js      |   10 +-
 components/card/dist/metadata.json            |  883 ++++-
 components/card/stories/card.stories.js       |   10 +-
 components/checkbox/dist/metadata.json        |  966 +++++-
 .../checkbox/stories/checkbox.stories.js      |   10 +-
 components/clearbutton/dist/metadata.json     |  292 +-
 .../stories/clearbutton.stories.js            |   12 +-
 components/closebutton/dist/metadata.json     |  482 ++-
 .../stories/closebutton.stories.js            |   11 +-
 components/closebutton/stories/template.js    |    2 +-
 components/coachindicator/dist/metadata.json  |  252 +-
 .../stories/coachindicator.stories.js         |   10 +-
 components/coachmark/dist/metadata.json       |  637 +++-
 .../coachmark/stories/coachmark.stories.js    |   10 +-
 components/colorarea/dist/metadata.json       |  209 +-
 .../colorarea/stories/colorarea.stories.js    |   10 +-
 components/colorhandle/dist/metadata.json     |  240 +-
 .../stories/colorhandle.stories.js            |   10 +-
 components/colorloupe/dist/metadata.json      |  301 +-
 .../colorloupe/stories/colorloupe.stories.js  |    8 +-
 components/colorslider/dist/metadata.json     |  201 +-
 .../stories/colorslider.stories.js            |   10 +-
 components/colorwheel/dist/metadata.json      |  209 +-
 .../colorwheel/stories/colorwheel.stories.js  |   10 +-
 components/combobox/dist/metadata.json        | 1404 ++++++--
 .../combobox/stories/combobox.stories.js      |   12 +-
 components/commons/package.json               |    3 +-
 components/contextualhelp/dist/metadata.json  |  350 +-
 .../stories/contextualhelp.stories.js         |   10 +-
 components/contextualhelp/stories/template.js |    2 +-
 components/datepicker/dist/metadata.json      |  719 +++-
 .../datepicker/stories/datepicker.stories.js  |   10 +-
 components/datepicker/stories/template.js     |    2 +-
 components/dial/dist/metadata.json            |  529 ++-
 components/dial/stories/dial.stories.js       |   10 +-
 components/dialog/dist/metadata.json          |  602 +++-
 components/dialog/stories/dialog.stories.js   |   10 +-
 components/divider/dist/metadata.json         |  169 +-
 components/divider/stories/divider.stories.js |   10 +-
 components/dropindicator/dist/metadata.json   |   71 +-
 .../stories/dropindicator.stories.js          |   10 +-
 components/dropzone/dist/metadata.json        |  558 +++-
 .../dropzone/stories/dropzone.stories.js      |   11 +-
 components/fieldgroup/dist/metadata.json      |   17 +-
 .../fieldgroup/stories/fieldgroup.stories.js  |   10 +-
 components/fieldlabel/dist/metadata.json      |  399 ++-
 .../fieldlabel/stories/fieldlabel.stories.js  |   10 +-
 components/fieldlabel/stories/template.js     |    2 +-
 .../floatingactionbutton/dist/metadata.json   |  417 ++-
 .../stories/floatingactionbutton.stories.js   |   10 +-
 components/form/dist/metadata.json            |  114 +-
 components/form/stories/form.stories.js       |   10 +-
 components/helptext/dist/metadata.json        |  482 ++-
 .../helptext/stories/helptext.stories.js      |   10 +-
 components/helptext/stories/template.js       |    2 +-
 components/icon/dist/metadata.json            |  528 ++-
 components/icon/stories/icon.stories.js       |   10 +-
 .../illustratedmessage/dist/metadata.json     |  482 ++-
 .../stories/illustratedmessage.stories.js     |   12 +-
 components/infieldbutton/dist/metadata.json   |  588 +++-
 .../stories/infieldbutton.stories.js          |   10 +-
 .../infieldprogresscircle/dist/metadata.json  |   71 +-
 components/inlinealert/dist/metadata.json     |  605 +++-
 .../stories/inlinealert.stories.js            |   10 +-
 components/link/dist/metadata.json            |  379 ++-
 components/link/stories/link.stories.js       |   10 +-
 components/logicbutton/dist/metadata.json     |  523 ++-
 .../stories/logicbutton.stories.js            |   10 +-
 components/menu/dist/metadata.json            | 2139 ++++++++++--
 components/menu/stories/menu.stories.js       |   10 +-
 components/menu/stories/template.js           |   48 +-
 components/meter/dist/metadata.json           |  129 +-
 components/meter/stories/meter.stories.js     |   10 +-
 components/miller/dist/metadata.json          |   43 +-
 components/miller/stories/miller.stories.js   |   10 +-
 components/modal/dist/metadata.json           |  209 +-
 components/modal/stories/modal.stories.js     |    8 +-
 .../opacitycheckerboard/dist/metadata.json    |   94 +-
 .../stories/opacitycheckerboard.stories.js    |   10 +-
 components/page/dist/metadata.json            |   50 +-
 components/page/stories/page.stories.js       |    4 +
 components/pagination/dist/metadata.json      |  121 +-
 .../pagination/stories/pagination.stories.js  |   10 +-
 components/picker/dist/metadata.json          | 1606 +++++++--
 components/picker/stories/picker.stories.js   |   13 +-
 components/pickerbutton/dist/metadata.json    |  717 +++-
 .../stories/pickerbutton.stories.js           |   10 +-
 components/pickerbutton/stories/template.js   |    2 +-
 components/popover/dist/metadata.json         |  352 +-
 components/popover/stories/popover.stories.js |   10 +-
 components/progressbar/dist/metadata.json     |  544 ++-
 .../stories/progressbar.stories.js            |   10 +-
 components/progresscircle/dist/metadata.json  |  178 +-
 .../stories/progresscircle.stories.js         |   10 +-
 components/radio/dist/metadata.json           |  898 ++++-
 components/radio/stories/radio.stories.js     |   10 +-
 components/rating/dist/metadata.json          |  532 ++-
 components/rating/stories/rating.stories.js   |   10 +-
 components/search/dist/metadata.json          |  985 +++++-
 components/search/stories/search.stories.js   |   10 +-
 components/sidenav/dist/metadata.json         | 1079 +++++-
 components/sidenav/stories/sidenav.stories.js |   10 +-
 components/slider/dist/metadata.json          | 1446 ++++++--
 components/slider/stories/slider.stories.js   |   10 +-
 components/splitview/dist/metadata.json       |  320 +-
 .../splitview/stories/splitview.stories.js    |   10 +-
 components/statuslight/dist/metadata.json     |  990 +++++-
 .../stories/statuslight.stories.js            |   10 +-
 components/steplist/dist/metadata.json        |  317 +-
 .../steplist/stories/steplist.stories.js      |   10 +-
 components/stepper/dist/metadata.json         | 1400 ++++++--
 components/stepper/stories/stepper.stories.js |   16 +-
 components/swatch/dist/metadata.json          |  596 +++-
 components/swatch/stories/swatch.stories.js   |   10 +-
 components/swatchgroup/dist/metadata.json     |   59 +-
 .../stories/swatchgroup.stories.js            |   10 +-
 components/swatchgroup/stories/template.js    |    2 +-
 components/switch/dist/metadata.json          | 1262 +++++--
 components/switch/stories/switch.stories.js   |   10 +-
 components/table/dist/metadata.json           | 1822 ++++++++--
 components/table/stories/table.stories.js     |   10 +-
 components/tabs/dist/metadata.json            |  842 ++++-
 components/tabs/stories/tabs.stories.js       |   11 +-
 components/tag/CHANGELOG.md                   |    4 -
 components/tag/dist/metadata.json             | 1479 ++++++--
 components/tag/stories/tag.stories.js         |   13 +-
 components/taggroup/dist/metadata.json        |  216 +-
 .../taggroup/stories/taggroup.stories.js      |   10 +-
 components/textfield/dist/metadata.json       | 1620 +++++++--
 components/textfield/stories/template.js      |    2 +-
 .../textfield/stories/textarea.stories.js     |   10 +-
 .../textfield/stories/textfield.stories.js    |   10 +-
 components/thumbnail/dist/metadata.json       |  432 ++-
 components/thumbnail/index.css                |   18 +
 .../thumbnail/stories/thumbnail.stories.js    |   10 +-
 components/toast/dist/metadata.json           |  511 ++-
 components/toast/stories/toast.stories.js     |   10 +-
 components/tooltip/dist/metadata.json         |  571 +++-
 components/tooltip/stories/tooltip.stories.js |   10 +-
 components/tray/dist/metadata.json            |  181 +-
 components/tray/stories/tray.stories.js       |    8 +-
 components/treeview/dist/metadata.json        |  830 ++++-
 .../treeview/stories/treeview.stories.js      |   10 +-
 components/typography/dist/metadata.json      | 2967 ++++++++++++++---
 .../typography/stories/typography.stories.js  |   11 +-
 components/underlay/dist/metadata.json        |  162 +-
 .../underlay/stories/underlay.stories.js      |    8 +-
 components/well/dist/metadata.json            |  142 +-
 components/well/stories/well.stories.js       |    8 +-
 lint-staged.config.js                         |    6 +-
 nx.json                                       |    5 +-
 package.json                                  |    1 +
 schemas/metadata.schema.json                  |  321 +-
 tasks/component-reporter.js                   |   86 +-
 tasks/utilities.js                            |  133 +-
 .../stories/{{ folderName }}.stories.js.hbs   |   79 +-
 yarn.lock                                     |  672 +++-
 208 files changed, 45407 insertions(+), 9217 deletions(-)
 create mode 100644 .changeset/eleven-plants-grow.md
 create mode 100644 .changeset/new-bulldogs-add.md

diff --git a/.changeset/eleven-plants-grow.md b/.changeset/eleven-plants-grow.md
new file mode 100644
index 00000000000..b08e57e1660
--- /dev/null
+++ b/.changeset/eleven-plants-grow.md
@@ -0,0 +1,5 @@
+---
+"@spectrum-css/generator": patch
+---
+
+Update story templates to include the cssprops imports
diff --git a/.changeset/new-bulldogs-add.md b/.changeset/new-bulldogs-add.md
new file mode 100644
index 00000000000..a5328a1d0ac
--- /dev/null
+++ b/.changeset/new-bulldogs-add.md
@@ -0,0 +1,5 @@
+---
+"@spectrum-css/preview": minor
+---
+
+New feature: Custom properties panel added to the development preview showing a list of modifiable custom properties as loaded from the metadata/metadata.json resource in each component.
diff --git a/.eslintrc b/.eslintrc
index f422aa9e96a..d050c2f7d97 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -8,6 +8,11 @@
 	"parserOptions": {
 		"sourceType": "module"
 	},
+	"settings": {
+	  "react": {
+		"version": "detect"
+	  }
+	},
 	"extends": "eslint:recommended",
 	"rules": {
 		"brace-style": ["warn", "stroustrup", { "allowSingleLine": true }],
@@ -17,7 +22,8 @@
 		"no-console": ["warn", { "allow": ["warn", "error"] }],
 		"quotes": ["warn", "double"],
 		"semi": ["warn", "always"],
-		"space-before-blocks": ["warn", "always"]
+		"space-before-blocks": ["warn", "always"],
+		"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
 	},
 	"overrides": [
 		{
@@ -174,6 +180,7 @@
 				".storybook/*.js",
 				".storybook/**/*.js"
 			],
+			"extends": ["plugin:react/recommended", "plugin:react/jsx-runtime"],
 			"parserOptions": {
 				"ecmaVersion": "latest",
 				"sourceType": "module",
diff --git a/.github/workflows/development.yml b/.github/workflows/development.yml
index b8617263b44..5fc8b4cbdd6 100644
--- a/.github/workflows/development.yml
+++ b/.github/workflows/development.yml
@@ -112,9 +112,7 @@ jobs:
                         - '*.md'
                         - .storybook/*.md
                         - .storybook/*/*.md
-                        - .storybook/*/*.mdx
                         - components/*/*.md
-                        - components/*/stories/*.mdx
                         - plugins/*/*.md
                         - tokens/*.md
                         - tools/*/*.md
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index a3af10310ec..acdbc78df0b 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -116,10 +116,11 @@ jobs:
                   reporter: github-pr-review
                   filter_mode: diff_context
                 #   eslint_flags: "components/*/stories/*.js"
-                  eslint_flags: "${{ inputs.eslint_added_files }} ${{ inputs.eslint_modified_files }}"
+                  eslint_flags: "--config ${{ github.workspace }}/.eslintrc ${{ inputs.eslint_added_files }} ${{ inputs.eslint_modified_files }}"
 
             - name: Run markdownlint on documentation
               uses: reviewdog/action-markdownlint@v0.26.2
+              if: ${{ inputs.mdlint_added_files != '' || inputs.mdlint_modified_files != '' }}
               with:
                 reporter: github-pr-review
                 filter_mode: diff_context
diff --git a/.storybook/assets/base.css b/.storybook/assets/base.css
index e5886de13ec..1644b455fb6 100644
--- a/.storybook/assets/base.css
+++ b/.storybook/assets/base.css
@@ -1,5 +1,3 @@
-/* stylelint-disable selector-class-pattern -- Targeting pre-defined Storybook classes */
-
 /*!
  * Copyright 2024 Adobe. All rights reserved.
  *
@@ -31,7 +29,7 @@ body {
 .spectrum {
 	color: var(--spectrum-neutral-content-color-default);
 	background-color: var(--spectrum-background-base-color);
-	-webkit-tap-highlight-color: rgba(0, 0, 0, 0%);
+	-webkit-tap-highlight-color: rgb(0, 0, 0, 0%);
 }
 
 .spectrum .spectrum-examples-static-black {
@@ -61,7 +59,7 @@ svg:has(symbol):not(:has(use)) {
 	line-height: normal;
 	letter-spacing: normal;
 	text-transform: none;
-	border-block-end: 1px solid hsla(203deg, 50%, 30%, 15%);
+	border-block-end: 1px solid hsl(203deg, 50%, 30%, 15%);
 }
 
 /* Force the modal wrapper to be contained by the frame not the viewport */
@@ -77,4 +75,14 @@ svg:has(symbol):not(:has(use)) {
 	overflow: visible !important;
 }
 
-/* stylelint-enable selector-class-pattern */
+#panel-tab-content tr th:nth-child(1),
+#panel-tab-content tr th:nth-child(3),
+#panel-tab-content tr td:nth-child(1),
+#panel-tab-content tr td:nth-child(3) {
+	min-inline-size: 100px !important;
+}
+
+#panel-tab-content tr th:nth-child(2),
+#panel-tab-content tr td:nth-child(2) {
+	max-inline-size: 500px !important;
+}
diff --git a/.storybook/assets/index.css b/.storybook/assets/index.css
index b18c09d34ce..73a53b763df 100644
--- a/.storybook/assets/index.css
+++ b/.storybook/assets/index.css
@@ -1,5 +1,3 @@
-/* stylelint-disable selector-class-pattern -- Targeting pre-defined Storybook classes */
-
 /*!
  * Copyright 2024 Adobe. All rights reserved.
  *
@@ -125,5 +123,3 @@ div.sb-bar {
 	color: var(--spectrum-neutral-content-color-default) !important;
 	background-color: var(--spectrum-background-layer-2-color) !important;
 }
-
-/* stylelint-enable selector-class-pattern */
diff --git a/.storybook/decorators/utilities.js b/.storybook/decorators/utilities.js
index f6722ae79ea..bd22ac68401 100644
--- a/.storybook/decorators/utilities.js
+++ b/.storybook/decorators/utilities.js
@@ -556,12 +556,12 @@ export const renderContent = (content = [], {
 	if (content.length === 0) return nothing;
 
 	return html`
-		${content.map((c) => {
+		${content.map((c, idx) => {
 			if (typeof c === "undefined") return nothing;
 
 			/* If the content is an object (but not a lit object), we need to merge the object with the template */
 			if (typeof c !== "string" && (typeof c === "object" && !c._$litType$)) {
-				return callback({ ...args, ...c }, context);
+				return callback({ ...args, ...c, idx }, context);
 			}
 
 			if (typeof c === "function") {
diff --git a/.storybook/main.js b/.storybook/main.js
index 5914dd5b083..f55e71c60a2 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -68,6 +68,8 @@ export default {
 			name: "@storybook/addon-actions",
 			options: {},
 		},
+		// https://github.com/ljcl/storybook-addon-cssprops
+		"@ljcl/storybook-addon-cssprops",
 		// https://www.npmjs.com/package/@whitespace/storybook-addon-html
 		"@whitespace/storybook-addon-html",
 		// https://github.com/storybookjs/storybook/tree/next/code/addons/a11y
diff --git a/.storybook/package.json b/.storybook/package.json
index 0b445a6175a..d5f39102ba8 100644
--- a/.storybook/package.json
+++ b/.storybook/package.json
@@ -48,6 +48,7 @@
 		"@babel/core": "^7.28.0",
 		"@chromatic-com/storybook": "^3.2.7",
 		"@etchteam/storybook-addon-status": "^5.0.0",
+		"@ljcl/storybook-addon-cssprops": "4.0.0",
 		"@storybook/addon-a11y": "8.4.7",
 		"@storybook/addon-actions": "8.4.7",
 		"@storybook/addon-designs": "^8.2.1",
@@ -60,7 +61,7 @@
 		"@storybook/core-events": "8.4.7",
 		"@storybook/manager-api": "8.4.7",
 		"@storybook/preview-api": "8.4.7",
-		"@storybook/test-runner": "^0.22.0",
+		"@storybook/test-runner": "^0.23.0",
 		"@storybook/theming": "8.4.7",
 		"@storybook/web-components-vite": "8.4.7",
 		"@whitespace/storybook-addon-html": "^7.0.0",
diff --git a/.storybook/preview.js b/.storybook/preview.js
index e9be0e5c367..4c583d4a9b1 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -15,6 +15,7 @@ import DocumentationTemplate from "./templates/DocumentationTemplate.mdx";
 import { argTypes, globalTypes } from "./types";
 
 // Import the custom base styles
+import "@spectrum-css/bundle/dist/index.css";
 import "./assets/base.css";
 
 /** @type import('@storybook/types').StorybookParameters & import('@storybook/types').API_Layout */
diff --git a/components/accordion/dist/metadata.json b/components/accordion/dist/metadata.json
index f0f32dc03c2..dbdf622b042 100644
--- a/components/accordion/dist/metadata.json
+++ b/components/accordion/dist/metadata.json
@@ -17,230 +17,1171 @@
     ".spectrum-Accordion--spacious.spectrum-Accordion--sizeS",
     ".spectrum-Accordion--spacious.spectrum-Accordion--sizeXL",
     ".spectrum-Accordion-item",
+    ".spectrum-Accordion-item:first-child",
     ".spectrum-Accordion-item.is-disabled",
     ".spectrum-Accordion-item.is-open > .spectrum-Accordion-itemContent",
     ".spectrum-Accordion-item.is-open > .spectrum-Accordion-itemHeading .spectrum-Accordion-itemIndicator",
-    ".spectrum-Accordion-item:first-child",
     ".spectrum-Accordion-itemContent",
     ".spectrum-Accordion-itemDirectActions",
     ".spectrum-Accordion-itemHeader",
-    ".spectrum-Accordion-itemHeader.spectrum-Accordion-itemHeader:active",
     ".spectrum-Accordion-itemHeader:focus-visible",
     ".spectrum-Accordion-itemHeader:has(+ .spectrum-Accordion-itemDirectActions)",
     ".spectrum-Accordion-itemHeader:hover",
+    ".spectrum-Accordion-itemHeader.spectrum-Accordion-itemHeader:active",
     ".spectrum-Accordion-itemHeading",
     ".spectrum-Accordion-itemIndicator",
     ".spectrum-Accordion-itemTitle",
-    ".spectrum-Accordion.spectrum-Accordion--noInlinePadding",
     ".spectrum-Accordion:dir(rtl)",
     ".spectrum-Accordion:lang(ja)",
     ".spectrum-Accordion:lang(ko)",
-    ".spectrum-Accordion:lang(zh)"
-  ],
-  "modifiers": [
-    "--mod-accordion-animation-duration",
-    "--mod-accordion-background-color-default",
-    "--mod-accordion-background-color-down",
-    "--mod-accordion-background-color-hover",
-    "--mod-accordion-background-color-key-focus",
-    "--mod-accordion-content-padding-inline",
-    "--mod-accordion-corner-radius",
-    "--mod-accordion-disclosure-indicator-height",
-    "--mod-accordion-disclosure-indicator-to-text-space",
-    "--mod-accordion-divider-color",
-    "--mod-accordion-divider-thickness",
-    "--mod-accordion-edge-to-content-area",
-    "--mod-accordion-edge-to-disclosure-indicator-space",
-    "--mod-accordion-edge-to-text-space",
-    "--mod-accordion-item-content-area-bottom-to-content",
-    "--mod-accordion-item-content-area-top-to-content",
-    "--mod-accordion-item-content-color",
-    "--mod-accordion-item-content-disabled-color",
-    "--mod-accordion-item-content-font",
-    "--mod-accordion-item-content-font-size",
-    "--mod-accordion-item-content-font-style",
-    "--mod-accordion-item-content-font-weight",
-    "--mod-accordion-item-content-line-height",
-    "--mod-accordion-item-direct-actions-height",
-    "--mod-accordion-item-direct-actions-spacing",
-    "--mod-accordion-item-direct-actions-vertical-spacing",
-    "--mod-accordion-item-focus-indicator-color",
-    "--mod-accordion-item-focus-indicator-gap",
-    "--mod-accordion-item-focus-indicator-thickness",
-    "--mod-accordion-item-header-bottom-to-text-space",
-    "--mod-accordion-item-header-color-default",
-    "--mod-accordion-item-header-color-down",
-    "--mod-accordion-item-header-color-hover",
-    "--mod-accordion-item-header-color-key-focus",
-    "--mod-accordion-item-header-disabled-color",
-    "--mod-accordion-item-header-font",
-    "--mod-accordion-item-header-font-size",
-    "--mod-accordion-item-header-font-style",
-    "--mod-accordion-item-header-font-weight",
-    "--mod-accordion-item-header-line-height",
-    "--mod-accordion-item-header-to-direct-actions-space",
-    "--mod-accordion-item-header-top-to-text-space",
-    "--mod-accordion-item-min-block-size",
-    "--mod-accordion-item-minimum-height",
-    "--mod-accordion-item-minimum-width",
-    "--mod-accordion-item-width",
-    "--mod-accordion-top-to-disclosure-indicator"
-  ],
-  "component": [
-    "--spectrum-accordion-animation-duration",
-    "--spectrum-accordion-background-color-default",
-    "--spectrum-accordion-background-color-down",
-    "--spectrum-accordion-background-color-hover",
-    "--spectrum-accordion-background-color-key-focus",
-    "--spectrum-accordion-bottom-to-text-compact-extra-large",
-    "--spectrum-accordion-bottom-to-text-compact-large",
-    "--spectrum-accordion-bottom-to-text-compact-medium",
-    "--spectrum-accordion-bottom-to-text-compact-small",
-    "--spectrum-accordion-bottom-to-text-extra-large",
-    "--spectrum-accordion-bottom-to-text-large",
-    "--spectrum-accordion-bottom-to-text-medium",
-    "--spectrum-accordion-bottom-to-text-small",
-    "--spectrum-accordion-bottom-to-text-spacious-extra-large",
-    "--spectrum-accordion-bottom-to-text-spacious-large",
-    "--spectrum-accordion-bottom-to-text-spacious-medium",
-    "--spectrum-accordion-bottom-to-text-spacious-small",
-    "--spectrum-accordion-content-area-bottom-to-content",
-    "--spectrum-accordion-content-area-edge-to-content-extra-large",
-    "--spectrum-accordion-content-area-edge-to-content-large",
-    "--spectrum-accordion-content-area-edge-to-content-medium",
-    "--spectrum-accordion-content-area-edge-to-content-small",
-    "--spectrum-accordion-content-area-top-to-content",
-    "--spectrum-accordion-content-padding-inline",
-    "--spectrum-accordion-corner-radius",
-    "--spectrum-accordion-disclosure-indicator-height",
-    "--spectrum-accordion-disclosure-indicator-to-text-extra-large",
-    "--spectrum-accordion-disclosure-indicator-to-text-large",
-    "--spectrum-accordion-disclosure-indicator-to-text-medium",
-    "--spectrum-accordion-disclosure-indicator-to-text-small",
-    "--spectrum-accordion-disclosure-indicator-to-text-space",
-    "--spectrum-accordion-divider-color",
-    "--spectrum-accordion-divider-thickness",
-    "--spectrum-accordion-edge-to-content-area",
-    "--spectrum-accordion-edge-to-content-area-extra-large",
-    "--spectrum-accordion-edge-to-content-area-large",
-    "--spectrum-accordion-edge-to-content-area-medium",
-    "--spectrum-accordion-edge-to-content-area-small",
-    "--spectrum-accordion-edge-to-disclosure-indicator-space",
-    "--spectrum-accordion-edge-to-text",
-    "--spectrum-accordion-edge-to-text-space",
-    "--spectrum-accordion-item-content-area-bottom-to-content",
-    "--spectrum-accordion-item-content-area-top-to-content",
-    "--spectrum-accordion-item-content-color",
-    "--spectrum-accordion-item-content-font",
-    "--spectrum-accordion-item-content-font-size",
-    "--spectrum-accordion-item-content-font-style",
-    "--spectrum-accordion-item-content-font-weight",
-    "--spectrum-accordion-item-content-line-height",
-    "--spectrum-accordion-item-direct-actions-height",
-    "--spectrum-accordion-item-direct-actions-spacing",
-    "--spectrum-accordion-item-direct-actions-vertical-spacing",
-    "--spectrum-accordion-item-focus-indicator-color",
-    "--spectrum-accordion-item-focus-indicator-gap",
-    "--spectrum-accordion-item-focus-indicator-thickness",
-    "--spectrum-accordion-item-header-bottom-to-text-space",
-    "--spectrum-accordion-item-header-color-default",
-    "--spectrum-accordion-item-header-color-down",
-    "--spectrum-accordion-item-header-color-hover",
-    "--spectrum-accordion-item-header-color-key-focus",
-    "--spectrum-accordion-item-header-cursor",
-    "--spectrum-accordion-item-header-font",
-    "--spectrum-accordion-item-header-font-size",
-    "--spectrum-accordion-item-header-font-style",
-    "--spectrum-accordion-item-header-font-weight",
-    "--spectrum-accordion-item-header-line-height",
-    "--spectrum-accordion-item-header-to-direct-actions-space",
-    "--spectrum-accordion-item-header-top-to-text-space",
-    "--spectrum-accordion-item-min-block-size",
-    "--spectrum-accordion-item-minimum-height",
-    "--spectrum-accordion-item-minimum-width",
-    "--spectrum-accordion-item-width",
-    "--spectrum-accordion-minimum-width",
-    "--spectrum-accordion-top-to-disclosure-indicator",
-    "--spectrum-accordion-top-to-text-compact-extra-large",
-    "--spectrum-accordion-top-to-text-compact-large",
-    "--spectrum-accordion-top-to-text-compact-medium",
-    "--spectrum-accordion-top-to-text-compact-small",
-    "--spectrum-accordion-top-to-text-extra-large",
-    "--spectrum-accordion-top-to-text-large",
-    "--spectrum-accordion-top-to-text-medium",
-    "--spectrum-accordion-top-to-text-small",
-    "--spectrum-accordion-top-to-text-spacious-extra-large",
-    "--spectrum-accordion-top-to-text-spacious-large",
-    "--spectrum-accordion-top-to-text-spacious-medium",
-    "--spectrum-accordion-top-to-text-spacious-small"
-  ],
-  "global": [
-    "--spectrum-animation-duration-100",
-    "--spectrum-body-color",
-    "--spectrum-body-sans-serif-font-style",
-    "--spectrum-body-sans-serif-font-weight",
-    "--spectrum-body-size-l",
-    "--spectrum-body-size-m",
-    "--spectrum-body-size-s",
-    "--spectrum-body-size-xs",
-    "--spectrum-bold-font-weight",
-    "--spectrum-chevron-icon-size-100",
-    "--spectrum-chevron-icon-size-200",
-    "--spectrum-chevron-icon-size-300",
-    "--spectrum-chevron-icon-size-75",
-    "--spectrum-cjk-line-height-100",
-    "--spectrum-component-height-100",
-    "--spectrum-component-height-200",
-    "--spectrum-component-height-300",
-    "--spectrum-component-height-400",
-    "--spectrum-component-height-50",
-    "--spectrum-component-height-75",
-    "--spectrum-corner-radius-medium-size-extra-large",
-    "--spectrum-corner-radius-medium-size-large",
-    "--spectrum-corner-radius-medium-size-medium",
-    "--spectrum-corner-radius-medium-size-small",
-    "--spectrum-default-font-style",
-    "--spectrum-disabled-content-color",
-    "--spectrum-divider-thickness-small",
-    "--spectrum-field-default-width-extra-large",
-    "--spectrum-field-default-width-large",
-    "--spectrum-field-default-width-medium",
-    "--spectrum-field-edge-to-disclosure-icon-100",
-    "--spectrum-field-edge-to-disclosure-icon-200",
-    "--spectrum-field-edge-to-disclosure-icon-300",
-    "--spectrum-field-edge-to-disclosure-icon-75",
-    "--spectrum-field-top-to-disclosure-icon-compact-extra-large",
-    "--spectrum-field-top-to-disclosure-icon-compact-large",
-    "--spectrum-field-top-to-disclosure-icon-compact-medium",
-    "--spectrum-field-top-to-disclosure-icon-compact-small",
-    "--spectrum-field-top-to-disclosure-icon-extra-large",
-    "--spectrum-field-top-to-disclosure-icon-large",
-    "--spectrum-field-top-to-disclosure-icon-medium",
-    "--spectrum-field-top-to-disclosure-icon-small",
-    "--spectrum-field-top-to-disclosure-icon-spacious-extra-large",
-    "--spectrum-field-top-to-disclosure-icon-spacious-large",
-    "--spectrum-field-top-to-disclosure-icon-spacious-medium",
-    "--spectrum-field-top-to-disclosure-icon-spacious-small",
-    "--spectrum-focus-indicator-color",
-    "--spectrum-focus-indicator-gap",
-    "--spectrum-focus-indicator-thickness",
-    "--spectrum-font-size-100",
-    "--spectrum-font-size-200",
-    "--spectrum-font-size-300",
-    "--spectrum-font-size-400",
-    "--spectrum-gray-200",
-    "--spectrum-line-height-100",
-    "--spectrum-logical-rotation",
-    "--spectrum-neutral-content-color-default",
-    "--spectrum-neutral-content-color-down",
-    "--spectrum-neutral-content-color-hover",
-    "--spectrum-neutral-content-color-key-focus",
-    "--spectrum-sans-font-family-stack",
-    "--spectrum-spacing-100",
-    "--spectrum-transparent-black-100",
-    "--spectrum-transparent-black-25",
-    "--spectrum-transparent-black-300"
+    ".spectrum-Accordion:lang(zh)",
+    ".spectrum-Accordion.spectrum-Accordion--noInlinePadding"
   ],
-  "passthroughs": [],
-  "high-contrast": []
+  "modifiers": {
+    "mod-accordion-background-color-default": {
+      "description": "Used by `--spectrum-accordion-background-color-default`. <br/>Defaults to `var(--spectrum-transparent-black-25)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-accordion-background-color-hover": {
+      "description": "Used by `--spectrum-accordion-background-color-hover`. <br/>Defaults to `var(--spectrum-transparent-black-100)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-accordion-background-color-down": {
+      "description": "Used by `--spectrum-accordion-background-color-down`. <br/>Defaults to `var(--spectrum-transparent-black-300)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-accordion-background-color-key-focus": {
+      "description": "Used by `--spectrum-accordion-background-color-key-focus`. <br/>Defaults to `var(--spectrum-transparent-black-100)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-accordion-item-content-color": {
+      "description": "Used by `--spectrum-accordion-item-content-color`. <br/>Defaults to `var(--spectrum-body-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-accordion-divider-color": {
+      "description": "Used by `--spectrum-accordion-divider-color`. <br/>Defaults to `var(--spectrum-gray-200)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-accordion-item-focus-indicator-color": {
+      "description": "Used by `--spectrum-accordion-item-focus-indicator-color`. <br/>Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-accordion-item-header-color-default": {
+      "description": "Used by `--spectrum-accordion-item-header-color-default`. <br/>Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-accordion-item-header-color-hover": {
+      "description": "Used by `--spectrum-accordion-item-header-color-hover`. <br/>Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-accordion-item-header-color-down": {
+      "description": "Used by `--spectrum-accordion-item-header-color-down`. <br/>Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-accordion-item-header-color-key-focus": {
+      "description": "Used by `--spectrum-accordion-item-header-color-key-focus`. <br/>Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-accordion-item-minimum-height": {
+      "description": "Used by `--spectrum-accordion-item-min-block-size`. <br/>Defaults to `var(--spectrum-accordion-item-minimum-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-accordion-item-header-top-to-text-space": {
+      "description": "Used by `--spectrum-accordion-item-min-block-size`, `.spectrum-Accordion-itemTitle`. <br/>Defaults to `var(--spectrum-accordion-item-header-top-to-text-space)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-accordion-item-header-bottom-to-text-space": {
+      "description": "Used by `--spectrum-accordion-item-min-block-size`, `.spectrum-Accordion-itemTitle`. <br/>Defaults to `var(--spectrum-accordion-item-header-bottom-to-text-space)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-accordion-item-header-font-size": {
+      "description": "Used by `--spectrum-accordion-item-min-block-size`, `.spectrum-Accordion-itemHeader`. <br/>Defaults to `var(--spectrum-accordion-item-header-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-accordion-item-header-line-height": {
+      "description": "Used by `--spectrum-accordion-item-min-block-size`, `.spectrum-Accordion-itemHeader`. <br/>Defaults to `var(--spectrum-accordion-item-header-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-accordion-item-min-block-size": {
+      "description": "Used by `--spectrum-accordion-item-direct-actions-vertical-spacing`, `.spectrum-Accordion-item`. <br/>Defaults to `var(--spectrum-accordion-item-min-block-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-accordion-item-direct-actions-height": {
+      "description": "Used by `--spectrum-accordion-item-direct-actions-vertical-spacing`. <br/>Defaults to `var(--spectrum-accordion-item-direct-actions-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-accordion-item-content-disabled-color": {
+      "description": "Used by `--spectrum-accordion-item-content-color`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-accordion-item-header-disabled-color": {
+      "description": "Used by `--spectrum-accordion-item-header-color-default`, `--spectrum-accordion-item-header-color-hover`, `--spectrum-accordion-item-header-color-down`, `--spectrum-accordion-item-header-color-key-focus`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-accordion-item-minimum-width": {
+      "description": "Used by `.spectrum-Accordion-item`. <br/>Defaults to `var(--spectrum-accordion-item-minimum-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-accordion-item-width": {
+      "description": "Used by `.spectrum-Accordion-item`. <br/>Defaults to `var(--spectrum-accordion-item-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-accordion-divider-thickness": {
+      "description": "Used by `.spectrum-Accordion-item`, `.spectrum-Accordion-item:first-child`. <br/>Defaults to `var(--spectrum-accordion-divider-thickness)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-accordion-disclosure-indicator-height": {
+      "description": "Used by `.spectrum-Accordion-itemIndicator`. <br/>Defaults to `var(--spectrum-accordion-disclosure-indicator-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-accordion-animation-duration": {
+      "description": "Used by `.spectrum-Accordion-itemIndicator`. <br/>Defaults to `var(--spectrum-accordion-animation-duration)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-accordion-top-to-disclosure-indicator": {
+      "description": "Used by `.spectrum-Accordion-itemIndicator`. <br/>Defaults to `var(--spectrum-accordion-top-to-disclosure-indicator)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-accordion-edge-to-disclosure-indicator-space": {
+      "description": "Used by `.spectrum-Accordion-itemIndicator`. <br/>Defaults to `var(--spectrum-accordion-edge-to-disclosure-indicator-space)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-accordion-disclosure-indicator-to-text-space": {
+      "description": "Used by `.spectrum-Accordion-itemIndicator`. <br/>Defaults to `var(--spectrum-accordion-disclosure-indicator-to-text-space)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-accordion-item-content-area-top-to-content": {
+      "description": "Used by `.spectrum-Accordion-itemContent`. <br/>Defaults to `var(--spectrum-accordion-item-content-area-top-to-content)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-accordion-item-content-area-bottom-to-content": {
+      "description": "Used by `.spectrum-Accordion-itemContent`. <br/>Defaults to `var(--spectrum-accordion-item-content-area-bottom-to-content)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-accordion-content-padding-inline": {
+      "description": "Used by `.spectrum-Accordion-itemContent`. <br/>Defaults to `var(--spectrum-accordion-content-padding-inline)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-accordion-item-content-font-weight": {
+      "description": "Used by `.spectrum-Accordion-itemContent`. <br/>Defaults to `var(--spectrum-accordion-item-content-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-accordion-item-content-font-style": {
+      "description": "Used by `.spectrum-Accordion-itemContent`. <br/>Defaults to `var(--spectrum-accordion-item-content-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-accordion-item-content-font-size": {
+      "description": "Used by `.spectrum-Accordion-itemContent`. <br/>Defaults to `var(--spectrum-accordion-item-content-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-accordion-item-content-font": {
+      "description": "Used by `.spectrum-Accordion-itemContent`. <br/>Defaults to `var(--spectrum-accordion-item-content-font)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-accordion-item-content-line-height": {
+      "description": "Used by `.spectrum-Accordion-itemContent`. <br/>Defaults to `var(--spectrum-accordion-item-content-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-accordion-edge-to-text-space": {
+      "description": "Used by `.spectrum-Accordion-itemTitle`. <br/>Defaults to `var(--spectrum-accordion-edge-to-text-space)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-accordion-edge-to-content-area": {
+      "description": "Used by `.spectrum-Accordion-itemHeader`, `.spectrum-Accordion-itemDirectActions`. <br/>Defaults to `var(--spectrum-accordion-edge-to-content-area)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-accordion-item-header-font-weight": {
+      "description": "Used by `.spectrum-Accordion-itemHeader`. <br/>Defaults to `var(--spectrum-accordion-item-header-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-accordion-item-header-font-style": {
+      "description": "Used by `.spectrum-Accordion-itemHeader`. <br/>Defaults to `var(--spectrum-accordion-item-header-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-accordion-item-header-font": {
+      "description": "Used by `.spectrum-Accordion-itemHeader`. <br/>Defaults to `var(--spectrum-accordion-item-header-font)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-accordion-corner-radius": {
+      "description": "Used by `.spectrum-Accordion-itemHeader:focus-visible`, `.spectrum-Accordion--quiet .spectrum-Accordion-itemHeader:active`, `.spectrum-Accordion--quiet .spectrum-Accordion-itemHeader:hover`. <br/>Defaults to `var(--spectrum-accordion-corner-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-accordion-item-focus-indicator-thickness": {
+      "description": "Used by `.spectrum-Accordion-itemHeader:focus-visible`. <br/>Defaults to `var(--spectrum-accordion-item-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-accordion-item-focus-indicator-gap": {
+      "description": "Used by `.spectrum-Accordion-itemHeader:focus-visible`. <br/>Defaults to `var(--spectrum-accordion-item-focus-indicator-gap)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-accordion-item-header-to-direct-actions-space": {
+      "description": "Used by `.spectrum-Accordion-itemHeader:has(+ .spectrum-Accordion-itemDirectActions)`. <br/>Defaults to `var(--spectrum-accordion-item-header-to-direct-actions-space)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-accordion-item-direct-actions-spacing": {
+      "description": "Used by `.spectrum-Accordion-itemDirectActions`. <br/>Defaults to `var(--spectrum-accordion-item-direct-actions-spacing)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-accordion-item-direct-actions-vertical-spacing": {
+      "description": "Used by `.spectrum-Accordion-itemDirectActions`. <br/>Defaults to `var(--spectrum-accordion-item-direct-actions-vertical-spacing)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-accordion-item-minimum-height": {
+      "value": "56px",
+      "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`, `.spectrum-Accordion--compact`, `.spectrum-Accordion--compact.spectrum-Accordion--sizeS`, `.spectrum-Accordion--compact.spectrum-Accordion--sizeL`, `.spectrum-Accordion--compact.spectrum-Accordion--sizeXL`, `.spectrum-Accordion--spacious`, `.spectrum-Accordion--spacious.spectrum-Accordion--sizeS`, `.spectrum-Accordion--spacious.spectrum-Accordion--sizeL`, `.spectrum-Accordion--spacious.spectrum-Accordion--sizeXL`. <br/>Used by `--spectrum-accordion-item-min-block-size`. <br/>Defaults to `var(--spectrum-component-height-400)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-item-minimum-width": {
+      "value": "200px",
+      "description": "Defined in `.spectrum-Accordion`. <br/>Used by `.spectrum-Accordion-item`. <br/>Defaults to `var(--spectrum-accordion-minimum-width)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-minimum-width": {
+      "value": "200px",
+      "description": "Used by `--spectrum-accordion-item-minimum-width`, `--spectrum-accordion-item-width`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-item-width": {
+      "value": "240px",
+      "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`. <br/>Used by `.spectrum-Accordion-item`. <br/>Defaults to `var(--spectrum-field-default-width-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-disclosure-indicator-height": {
+      "value": "14px",
+      "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`. <br/>Used by `.spectrum-Accordion-itemIndicator`. <br/>Defaults to `var(--spectrum-chevron-icon-size-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-disclosure-indicator-to-text-space": {
+      "value": "17px",
+      "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`. <br/>Used by `.spectrum-Accordion-itemIndicator`. <br/>Defaults to `var(--spectrum-accordion-disclosure-indicator-to-text-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-disclosure-indicator-to-text-medium": {
+      "value": "11px",
+      "description": "Used by `--spectrum-accordion-disclosure-indicator-to-text-space`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-edge-to-disclosure-indicator-space": {
+      "value": "0px",
+      "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`, `.spectrum-Accordion.spectrum-Accordion--noInlinePadding`. <br/>Used by `.spectrum-Accordion-itemIndicator`. <br/>Defaults to `0px`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-content-padding-inline": {
+      "value": "15px",
+      "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`. <br/>Used by `.spectrum-Accordion-itemContent`. <br/>Defaults to `var(--spectrum-accordion-content-area-edge-to-content-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-content-area-edge-to-content-medium": {
+      "value": "9px",
+      "description": "Used by `--spectrum-accordion-content-padding-inline`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-edge-to-content-area": {
+      "value": "0px",
+      "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`, `.spectrum-Accordion.spectrum-Accordion--noInlinePadding`. <br/>Used by `.spectrum-Accordion-itemHeader`, `.spectrum-Accordion-itemDirectActions`. <br/>Defaults to `0px`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-edge-to-content-area-medium": {
+      "value": "11px",
+      "description": "Used by `--spectrum-accordion-edge-to-content-area`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-edge-to-text-space": {
+      "value": "0px",
+      "description": "Defined in `.spectrum-Accordion`. <br/>Used by `.spectrum-Accordion-itemTitle`. <br/>Defaults to `var(--spectrum-accordion-edge-to-text)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-edge-to-text": {
+      "value": "0px",
+      "description": "Used by `--spectrum-accordion-edge-to-text-space`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-item-header-top-to-text-space": {
+      "value": "17px",
+      "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`, `.spectrum-Accordion--compact`, `.spectrum-Accordion--compact.spectrum-Accordion--sizeS`, `.spectrum-Accordion--compact.spectrum-Accordion--sizeL`, `.spectrum-Accordion--compact.spectrum-Accordion--sizeXL`, `.spectrum-Accordion--spacious`, `.spectrum-Accordion--spacious.spectrum-Accordion--sizeS`, `.spectrum-Accordion--spacious.spectrum-Accordion--sizeL`, `.spectrum-Accordion--spacious.spectrum-Accordion--sizeXL`. <br/>Used by `--spectrum-accordion-item-min-block-size`, `.spectrum-Accordion-itemTitle`. <br/>Defaults to `var(--spectrum-accordion-top-to-text-spacious-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-top-to-text-medium": {
+      "value": "9px",
+      "description": "Used by `--spectrum-accordion-item-header-top-to-text-space`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-item-header-bottom-to-text-space": {
+      "value": "16px",
+      "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`, `.spectrum-Accordion--compact`, `.spectrum-Accordion--compact.spectrum-Accordion--sizeS`, `.spectrum-Accordion--compact.spectrum-Accordion--sizeL`, `.spectrum-Accordion--compact.spectrum-Accordion--sizeXL`, `.spectrum-Accordion--spacious`, `.spectrum-Accordion--spacious.spectrum-Accordion--sizeS`, `.spectrum-Accordion--spacious.spectrum-Accordion--sizeL`, `.spectrum-Accordion--spacious.spectrum-Accordion--sizeXL`. <br/>Used by `--spectrum-accordion-item-min-block-size`, `.spectrum-Accordion-itemTitle`. <br/>Defaults to `var(--spectrum-accordion-bottom-to-text-spacious-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-bottom-to-text-medium": {
+      "value": "9px",
+      "description": "Used by `--spectrum-accordion-item-header-bottom-to-text-space`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-top-to-disclosure-indicator": {
+      "value": "25px",
+      "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`, `.spectrum-Accordion--compact`, `.spectrum-Accordion--compact.spectrum-Accordion--sizeS`, `.spectrum-Accordion--compact.spectrum-Accordion--sizeL`, `.spectrum-Accordion--compact.spectrum-Accordion--sizeXL`, `.spectrum-Accordion--spacious`, `.spectrum-Accordion--spacious.spectrum-Accordion--sizeS`, `.spectrum-Accordion--spacious.spectrum-Accordion--sizeL`, `.spectrum-Accordion--spacious.spectrum-Accordion--sizeXL`. <br/>Used by `.spectrum-Accordion-itemIndicator`. <br/>Defaults to `var(--spectrum-field-top-to-disclosure-icon-spacious-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-item-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Accordion`. <br/>Used by `.spectrum-Accordion-itemHeader:focus-visible`. <br/>Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-item-focus-indicator-gap": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Accordion`. <br/>Used by `.spectrum-Accordion-itemHeader:focus-visible`. <br/>Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-corner-radius": {
+      "value": "10px",
+      "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`. <br/>Used by `.spectrum-Accordion-itemHeader:focus-visible`, `.spectrum-Accordion--quiet .spectrum-Accordion-itemHeader:active`, `.spectrum-Accordion--quiet .spectrum-Accordion-itemHeader:hover`. <br/>Defaults to `var(--spectrum-corner-radius-medium-size-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-item-content-area-top-to-content": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-Accordion`. <br/>Used by `.spectrum-Accordion-itemContent`. <br/>Defaults to `var(--spectrum-accordion-content-area-top-to-content)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-content-area-top-to-content": {
+      "value": "8px",
+      "description": "Used by `--spectrum-accordion-item-content-area-top-to-content`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-item-content-area-bottom-to-content": {
+      "value": "16px",
+      "description": "Defined in `.spectrum-Accordion`. <br/>Used by `.spectrum-Accordion-itemContent`. <br/>Defaults to `var(--spectrum-accordion-content-area-bottom-to-content)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-content-area-bottom-to-content": {
+      "value": "16px",
+      "description": "Used by `--spectrum-accordion-item-content-area-bottom-to-content`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-divider-thickness": {
+      "value": "0px",
+      "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--quiet`. <br/>Used by `.spectrum-Accordion-item`, `.spectrum-Accordion-item:first-child`. <br/>Defaults to `0px`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-item-direct-actions-height": {
+      "value": "48px",
+      "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`. <br/>Used by `--spectrum-accordion-item-direct-actions-vertical-spacing`. <br/>Defaults to `var(--spectrum-component-height-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-item-header-to-direct-actions-space": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-Accordion`. <br/>Used by `.spectrum-Accordion-itemHeader:has(+ .spectrum-Accordion-itemDirectActions)`. <br/>Defaults to `var(--spectrum-spacing-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-item-header-font": {
+      "value": "var(--spectrum-sans-font-family-stack)",
+      "description": "Defined in `.spectrum-Accordion`. <br/>Used by `.spectrum-Accordion-itemHeader`. <br/>Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-item-header-font-weight": {
+      "value": "700",
+      "description": "Defined in `.spectrum-Accordion`. <br/>Used by `.spectrum-Accordion-itemHeader`. <br/>Defaults to `var(--spectrum-bold-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-item-header-font-style": {
+      "value": "normal",
+      "description": "Defined in `.spectrum-Accordion`. <br/>Used by `.spectrum-Accordion-itemHeader`. <br/>Defaults to `var(--spectrum-default-font-style)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-item-header-font-size": {
+      "value": "20px",
+      "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`. <br/>Used by `--spectrum-accordion-item-min-block-size`, `.spectrum-Accordion-itemHeader`. <br/>Defaults to `var(--spectrum-font-size-400)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-item-header-line-height": {
+      "value": "1.5",
+      "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion:lang(ja), .spectrum-Accordion:lang(ko), .spectrum-Accordion:lang(zh)`. <br/>Used by `--spectrum-accordion-item-min-block-size`, `.spectrum-Accordion-itemHeader`. <br/>Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-item-header-cursor": {
+      "value": "default",
+      "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion-item.is-disabled`. <br/>Used by `.spectrum-Accordion-itemHeader`. <br/>Defaults to `default`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-item-direct-actions-spacing": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-Accordion`. <br/>Used by `.spectrum-Accordion-itemDirectActions`. <br/>Defaults to `var(--spectrum-spacing-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-animation-duration": {
+      "value": "var(--spectrum-animation-duration-100)",
+      "description": "Defined in `.spectrum-Accordion`. <br/>Used by `.spectrum-Accordion-itemIndicator`. <br/>Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-item-content-font": {
+      "value": "var(--spectrum-sans-font-family-stack)",
+      "description": "Defined in `.spectrum-Accordion`. <br/>Used by `.spectrum-Accordion-itemContent`. <br/>Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-item-content-font-weight": {
+      "value": "400",
+      "description": "Defined in `.spectrum-Accordion`. <br/>Used by `.spectrum-Accordion-itemContent`. <br/>Defaults to `var(--spectrum-body-sans-serif-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-item-content-font-style": {
+      "value": "normal",
+      "description": "Defined in `.spectrum-Accordion`. <br/>Used by `.spectrum-Accordion-itemContent`. <br/>Defaults to `var(--spectrum-body-sans-serif-font-style)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-item-content-font-size": {
+      "value": "var(--spectrum-font-size-300)",
+      "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`. <br/>Used by `.spectrum-Accordion-itemContent`. <br/>Defaults to `var(--spectrum-body-size-l)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-item-content-line-height": {
+      "value": "1.5",
+      "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion:lang(ja), .spectrum-Accordion:lang(ko), .spectrum-Accordion:lang(zh)`. <br/>Used by `.spectrum-Accordion-itemContent`. <br/>Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-background-color-default": {
+      "value": "transparent",
+      "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion-item.is-disabled`. <br/>Used by `.spectrum-Accordion-itemHeader`. <br/>Defaults to `transparent`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-accordion-background-color-hover": {
+      "value": "transparent",
+      "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion-item.is-disabled`. <br/>Used by `.spectrum-Accordion-itemHeader:hover`. <br/>Defaults to `transparent`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-accordion-background-color-down": {
+      "value": "transparent",
+      "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion-item.is-disabled`. <br/>Used by `.spectrum-Accordion-itemHeader.spectrum-Accordion-itemHeader:active`. <br/>Defaults to `transparent`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-accordion-background-color-key-focus": {
+      "value": "transparent",
+      "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion-item.is-disabled`. <br/>Used by `.spectrum-Accordion-itemHeader:focus-visible`. <br/>Defaults to `transparent`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-accordion-item-content-color": {
+      "value": "var(--mod-accordion-item-content-disabled-color, var(--spectrum-disabled-content-color))",
+      "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion-item.is-disabled`. <br/>Used by `.spectrum-Accordion-itemContent`. <br/>Defaults to `var(--mod-accordion-item-content-disabled-color, var(--spectrum-disabled-content-color))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-accordion-divider-color": {
+      "value": "var(--mod-accordion-divider-color, var(--spectrum-gray-200))",
+      "description": "Defined in `.spectrum-Accordion`. <br/>Used by `.spectrum-Accordion-item`, `.spectrum-Accordion-item:first-child`. <br/>Defaults to `var(--mod-accordion-divider-color, var(--spectrum-gray-200))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-accordion-item-focus-indicator-color": {
+      "value": "Highlight",
+      "description": "Defined in `.spectrum-Accordion`. <br/>Used by `.spectrum-Accordion-itemHeader:focus-visible`. <br/>Defaults to `Highlight`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-accordion-item-header-color-default": {
+      "value": "var(--mod-accordion-item-header-disabled-color, var(--spectrum-disabled-content-color))",
+      "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion-item.is-disabled`. <br/>Used by `.spectrum-Accordion-itemHeader`. <br/>Defaults to `var(--mod-accordion-item-header-disabled-color, var(--spectrum-disabled-content-color))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-accordion-item-header-color-hover": {
+      "value": "var(--mod-accordion-item-header-disabled-color, var(--spectrum-disabled-content-color))",
+      "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion-item.is-disabled`. <br/>Used by `.spectrum-Accordion-itemHeader:hover`. <br/>Defaults to `var(--mod-accordion-item-header-disabled-color, var(--spectrum-disabled-content-color))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-accordion-item-header-color-down": {
+      "value": "var(--mod-accordion-item-header-disabled-color, var(--spectrum-disabled-content-color))",
+      "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion-item.is-disabled`. <br/>Used by `.spectrum-Accordion-itemHeader.spectrum-Accordion-itemHeader:active`. <br/>Defaults to `var(--mod-accordion-item-header-disabled-color, var(--spectrum-disabled-content-color))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-accordion-item-header-color-key-focus": {
+      "value": "var(--mod-accordion-item-header-disabled-color, var(--spectrum-disabled-content-color))",
+      "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion-item.is-disabled`. <br/>Used by `.spectrum-Accordion-itemHeader:focus-visible`. <br/>Defaults to `var(--mod-accordion-item-header-disabled-color, var(--spectrum-disabled-content-color))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-accordion-item-min-block-size": {
+      "value": "max(var(--mod-accordion-item-minimum-height, var(--spectrum-accordion-item-minimum-height)),var(--mod-accordion-item-header-top-to-text-space, var(--spectrum-accordion-item-header-top-to-text-space)) + var(--mod-accordion-item-header-bottom-to-text-space, var(--spectrum-accordion-item-header-bottom-to-text-space)) + (var(--mod-accordion-item-header-font-size, var(--spectrum-accordion-item-header-font-size)) * var(--mod-accordion-item-header-line-height, var(--spectrum-accordion-item-header-line-height))))",
+      "description": "Defined in `.spectrum-Accordion`. <br/>Used by `--spectrum-accordion-item-direct-actions-vertical-spacing`, `.spectrum-Accordion-item`. <br/>Defaults to `max(var(--mod-accordion-item-minimum-height, var(--spectrum-accordion-item-minimum-height)),var(--mod-accordion-item-header-top-to-text-space, var(--spectrum-accordion-item-header-top-to-text-space)) + var(--mod-accordion-item-header-bottom-to-text-space, var(--spectrum-accordion-item-header-bottom-to-text-space)) + (var(--mod-accordion-item-header-font-size, var(--spectrum-accordion-item-header-font-size)) * var(--mod-accordion-item-header-line-height, var(--spectrum-accordion-item-header-line-height))))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-item-direct-actions-vertical-spacing": {
+      "value": "calc((var(--mod-accordion-item-min-block-size, var(--spectrum-accordion-item-min-block-size)) - var(--mod-accordion-item-direct-actions-height, var(--spectrum-accordion-item-direct-actions-height))) / 2)",
+      "description": "Defined in `.spectrum-Accordion`. <br/>Used by `.spectrum-Accordion-itemDirectActions`. <br/>Defaults to `calc((var(--mod-accordion-item-min-block-size, var(--spectrum-accordion-item-min-block-size)) - var(--mod-accordion-item-direct-actions-height, var(--spectrum-accordion-item-direct-actions-height))) / 2)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-disclosure-indicator-to-text-small": {
+      "value": "7px",
+      "description": "Used by `--spectrum-accordion-disclosure-indicator-to-text-space`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-content-area-edge-to-content-small": {
+      "value": "8px",
+      "description": "Used by `--spectrum-accordion-content-padding-inline`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-edge-to-content-area-small": {
+      "value": "7px",
+      "description": "Used by `--spectrum-accordion-edge-to-content-area`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-top-to-text-small": {
+      "value": "7px",
+      "description": "Used by `--spectrum-accordion-item-header-top-to-text-space`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-bottom-to-text-small": {
+      "value": "7px",
+      "description": "Used by `--spectrum-accordion-item-header-bottom-to-text-space`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-disclosure-indicator-to-text-large": {
+      "value": "14px",
+      "description": "Used by `--spectrum-accordion-disclosure-indicator-to-text-space`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-content-area-edge-to-content-large": {
+      "value": "12px",
+      "description": "Used by `--spectrum-accordion-content-padding-inline`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-edge-to-content-area-large": {
+      "value": "14px",
+      "description": "Used by `--spectrum-accordion-edge-to-content-area`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-top-to-text-large": {
+      "value": "12px",
+      "description": "Used by `--spectrum-accordion-item-header-top-to-text-space`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-bottom-to-text-large": {
+      "value": "11px",
+      "description": "Used by `--spectrum-accordion-item-header-bottom-to-text-space`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-disclosure-indicator-to-text-extra-large": {
+      "value": "17px",
+      "description": "Used by `--spectrum-accordion-disclosure-indicator-to-text-space`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-content-area-edge-to-content-extra-large": {
+      "value": "15px",
+      "description": "Used by `--spectrum-accordion-content-padding-inline`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-edge-to-content-area-extra-large": {
+      "value": "17px",
+      "description": "Used by `--spectrum-accordion-edge-to-content-area`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-top-to-text-extra-large": {
+      "value": "13px",
+      "description": "Used by `--spectrum-accordion-item-header-top-to-text-space`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-bottom-to-text-extra-large": {
+      "value": "12px",
+      "description": "Used by `--spectrum-accordion-item-header-bottom-to-text-space`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-top-to-text-compact-medium": {
+      "value": "5px",
+      "description": "Used by `--spectrum-accordion-item-header-top-to-text-space`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-bottom-to-text-compact-medium": {
+      "value": "5px",
+      "description": "Used by `--spectrum-accordion-item-header-bottom-to-text-space`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-top-to-text-compact-small": {
+      "value": "3px",
+      "description": "Used by `--spectrum-accordion-item-header-top-to-text-space`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-bottom-to-text-compact-small": {
+      "value": "2px",
+      "description": "Used by `--spectrum-accordion-item-header-bottom-to-text-space`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-top-to-text-compact-large": {
+      "value": "8px",
+      "description": "Used by `--spectrum-accordion-item-header-top-to-text-space`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-bottom-to-text-compact-large": {
+      "value": "8px",
+      "description": "Used by `--spectrum-accordion-item-header-bottom-to-text-space`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-top-to-text-compact-extra-large": {
+      "value": "8px",
+      "description": "Used by `--spectrum-accordion-item-header-top-to-text-space`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-bottom-to-text-compact-extra-large": {
+      "value": "8px",
+      "description": "Used by `--spectrum-accordion-item-header-bottom-to-text-space`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-top-to-text-spacious-medium": {
+      "value": "13px",
+      "description": "Used by `--spectrum-accordion-item-header-top-to-text-space`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-bottom-to-text-spacious-medium": {
+      "value": "13px",
+      "description": "Used by `--spectrum-accordion-item-header-bottom-to-text-space`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-top-to-text-spacious-small": {
+      "value": "11px",
+      "description": "Used by `--spectrum-accordion-item-header-top-to-text-space`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-bottom-to-text-spacious-small": {
+      "value": "11px",
+      "description": "Used by `--spectrum-accordion-item-header-bottom-to-text-space`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-top-to-text-spacious-large": {
+      "value": "16px",
+      "description": "Used by `--spectrum-accordion-item-header-top-to-text-space`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-bottom-to-text-spacious-large": {
+      "value": "16px",
+      "description": "Used by `--spectrum-accordion-item-header-bottom-to-text-space`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-top-to-text-spacious-extra-large": {
+      "value": "17px",
+      "description": "Used by `--spectrum-accordion-item-header-top-to-text-space`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-accordion-bottom-to-text-spacious-extra-large": {
+      "value": "16px",
+      "description": "Used by `--spectrum-accordion-item-header-bottom-to-text-space`.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-component-height-100": {
+      "value": "32px",
+      "description": "Used by `--spectrum-accordion-item-minimum-height`, `--spectrum-accordion-item-direct-actions-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-default-width-medium": {
+      "value": "208px",
+      "description": "Used by `--spectrum-accordion-item-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-chevron-icon-size-100": {
+      "value": "10px",
+      "description": "Used by `--spectrum-accordion-disclosure-indicator-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-edge-to-disclosure-icon-100": {
+      "value": "11px",
+      "description": "Used by `--spectrum-accordion-edge-to-disclosure-indicator-space`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-top-to-disclosure-icon-medium": {
+      "value": "15px",
+      "description": "Used by `--spectrum-accordion-top-to-disclosure-indicator`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Used by `--spectrum-accordion-item-focus-indicator-thickness`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-gap": {
+      "value": "2px",
+      "description": "Used by `--spectrum-accordion-item-focus-indicator-gap`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-medium-size-medium": {
+      "value": "8px",
+      "description": "Used by `--spectrum-accordion-corner-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-divider-thickness-small": {
+      "value": "1px",
+      "description": "Used by `--spectrum-accordion-divider-thickness`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-100": {
+      "value": "8px",
+      "description": "Used by `--spectrum-accordion-item-header-to-direct-actions-space`, `--spectrum-accordion-item-direct-actions-spacing`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-sans-font-family-stack": {
+      "description": "Used by `--spectrum-accordion-item-header-font`, `--spectrum-accordion-item-content-font`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-bold-font-weight": {
+      "value": "700",
+      "description": "Used by `--spectrum-accordion-item-header-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-default-font-style": {
+      "value": "normal",
+      "description": "Used by `--spectrum-accordion-item-header-font-style`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-200": {
+      "value": "16px",
+      "description": "Used by `--spectrum-accordion-item-header-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-line-height-100": {
+      "value": "1.3",
+      "description": "Used by `--spectrum-accordion-item-header-line-height`, `--spectrum-accordion-item-content-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-animation-duration-100": {
+      "description": "Used by `--spectrum-accordion-animation-duration`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-sans-serif-font-weight": {
+      "value": "400",
+      "description": "Used by `--spectrum-accordion-item-content-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-sans-serif-font-style": {
+      "value": "normal",
+      "description": "Used by `--spectrum-accordion-item-content-font-style`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-size-s": {
+      "value": "var(--spectrum-font-size-100)",
+      "description": "Used by `--spectrum-accordion-item-content-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-transparent-black-25": {
+      "value": "rgba(0, 0, 0, 0)",
+      "description": "Used by `--spectrum-accordion-background-color-default`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-transparent-black-100": {
+      "value": "rgba(0, 0, 0, 0.09)",
+      "description": "Used by `--spectrum-accordion-background-color-hover`, `--spectrum-accordion-background-color-key-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-transparent-black-300": {
+      "value": "rgba(0, 0, 0, 0.15)",
+      "description": "Used by `--spectrum-accordion-background-color-down`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-color": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-accordion-item-content-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-gray-200": {
+      "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+      "description": "Used by `--spectrum-accordion-divider-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Used by `--spectrum-accordion-item-focus-indicator-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-accordion-item-header-color-default`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-accordion-item-header-color-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-down": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-accordion-item-header-color-down`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-key-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-accordion-item-header-color-key-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-logical-rotation": {
+      "value": "matrix(-1, 0, 0, 1, 0, 0)",
+      "description": "Defined in `.spectrum-Accordion:dir(rtl)`. <br/>Used by `.spectrum-Accordion-itemIndicator`, `.spectrum-Accordion-item.is-open > .spectrum-Accordion-itemHeading .spectrum-Accordion-itemIndicator`. <br/>Defaults to `matrix(-1, 0, 0, 1, 0, 0)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-cjk-line-height-100": {
+      "value": "1.5",
+      "description": "Used by `--spectrum-accordion-item-header-line-height`, `--spectrum-accordion-item-content-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-75": {
+      "value": "24px",
+      "description": "Used by `--spectrum-accordion-item-minimum-height`, `--spectrum-accordion-item-direct-actions-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-chevron-icon-size-75": {
+      "value": "10px",
+      "description": "Used by `--spectrum-accordion-disclosure-indicator-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-edge-to-disclosure-icon-75": {
+      "value": "7px",
+      "description": "Used by `--spectrum-accordion-edge-to-disclosure-indicator-space`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-medium-size-small": {
+      "value": "7px",
+      "description": "Used by `--spectrum-accordion-corner-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-100": {
+      "value": "14px",
+      "description": "Used by `--spectrum-accordion-item-header-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-size-xs": {
+      "value": "var(--spectrum-font-size-75)",
+      "description": "Used by `--spectrum-accordion-item-content-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-top-to-disclosure-icon-small": {
+      "value": "11px",
+      "description": "Used by `--spectrum-accordion-top-to-disclosure-indicator`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-200": {
+      "value": "40px",
+      "description": "Used by `--spectrum-accordion-item-minimum-height`, `--spectrum-accordion-item-direct-actions-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-default-width-large": {
+      "value": "224px",
+      "description": "Used by `--spectrum-accordion-item-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-chevron-icon-size-200": {
+      "value": "12px",
+      "description": "Used by `--spectrum-accordion-disclosure-indicator-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-edge-to-disclosure-icon-200": {
+      "value": "14px",
+      "description": "Used by `--spectrum-accordion-edge-to-disclosure-indicator-space`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-medium-size-large": {
+      "value": "9px",
+      "description": "Used by `--spectrum-accordion-corner-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-300": {
+      "value": "18px",
+      "description": "Used by `--spectrum-accordion-item-header-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-size-m": {
+      "value": "var(--spectrum-font-size-200)",
+      "description": "Used by `--spectrum-accordion-item-content-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-top-to-disclosure-icon-large": {
+      "value": "18px",
+      "description": "Used by `--spectrum-accordion-top-to-disclosure-indicator`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-300": {
+      "value": "48px",
+      "description": "Used by `--spectrum-accordion-item-minimum-height`, `--spectrum-accordion-item-direct-actions-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-default-width-extra-large": {
+      "value": "240px",
+      "description": "Used by `--spectrum-accordion-item-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-chevron-icon-size-300": {
+      "value": "14px",
+      "description": "Used by `--spectrum-accordion-disclosure-indicator-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-edge-to-disclosure-icon-300": {
+      "value": "17px",
+      "description": "Used by `--spectrum-accordion-edge-to-disclosure-indicator-space`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-medium-size-extra-large": {
+      "value": "10px",
+      "description": "Used by `--spectrum-accordion-corner-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-400": {
+      "value": "20px",
+      "description": "Used by `--spectrum-accordion-item-header-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-size-l": {
+      "value": "var(--spectrum-font-size-300)",
+      "description": "Used by `--spectrum-accordion-item-content-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-top-to-disclosure-icon-extra-large": {
+      "value": "21px",
+      "description": "Used by `--spectrum-accordion-top-to-disclosure-indicator`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-top-to-disclosure-icon-compact-medium": {
+      "value": "11px",
+      "description": "Used by `--spectrum-accordion-top-to-disclosure-indicator`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-50": {
+      "value": "20px",
+      "description": "Used by `--spectrum-accordion-item-minimum-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-top-to-disclosure-icon-compact-small": {
+      "value": "7px",
+      "description": "Used by `--spectrum-accordion-top-to-disclosure-indicator`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-top-to-disclosure-icon-compact-large": {
+      "value": "14px",
+      "description": "Used by `--spectrum-accordion-top-to-disclosure-indicator`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-top-to-disclosure-icon-compact-extra-large": {
+      "value": "17px",
+      "description": "Used by `--spectrum-accordion-top-to-disclosure-indicator`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-top-to-disclosure-icon-spacious-medium": {
+      "value": "19px",
+      "description": "Used by `--spectrum-accordion-top-to-disclosure-indicator`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-top-to-disclosure-icon-spacious-small": {
+      "value": "15px",
+      "description": "Used by `--spectrum-accordion-top-to-disclosure-indicator`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-top-to-disclosure-icon-spacious-large": {
+      "value": "22px",
+      "description": "Used by `--spectrum-accordion-top-to-disclosure-indicator`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-400": {
+      "value": "56px",
+      "description": "Used by `--spectrum-accordion-item-minimum-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-top-to-disclosure-icon-spacious-extra-large": {
+      "value": "25px",
+      "description": "Used by `--spectrum-accordion-top-to-disclosure-indicator`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-disabled-content-color": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Used by `--spectrum-accordion-item-content-color`, `--spectrum-accordion-item-header-color-default`, `--spectrum-accordion-item-header-color-hover`, `--spectrum-accordion-item-header-color-down`, `--spectrum-accordion-item-header-color-key-focus`.",
+      "control": "color",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {}
 }
diff --git a/components/accordion/index.css b/components/accordion/index.css
index d250feb2f21..97deea91630 100644
--- a/components/accordion/index.css
+++ b/components/accordion/index.css
@@ -87,6 +87,7 @@
 	&:lang(ja),
 	&:lang(zh),
 	&:lang(ko) {
+		/* @description When the language is CJK, update line-height values to prevent cut off diacritics */
 		--spectrum-accordion-item-header-line-height: var(--spectrum-cjk-line-height-100);
 		--spectrum-accordion-item-content-line-height: var(--spectrum-cjk-line-height-100);
 	}
diff --git a/components/accordion/stories/accordion.stories.js b/components/accordion/stories/accordion.stories.js
index 925ed7c7cd2..023b16f266e 100644
--- a/components/accordion/stories/accordion.stories.js
+++ b/components/accordion/stories/accordion.stories.js
@@ -2,11 +2,13 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isQuiet, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { AccordionGroup, testsContent as accordionContent, directActionsContent, longerContent } from "./accordion.test.js";
 import { Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * The accordion element contains a list of items that can be expanded or collapsed to reveal
  * additional content or information associated with each item. There can be zero expanded items,
@@ -118,8 +120,12 @@ export default {
 		status: {
 			type: "migrated",
 		},
-		tags: ["migrated"],
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
+	tags: ["migrated"],
 };
 
 /**
diff --git a/components/actionbar/dist/metadata.json b/components/actionbar/dist/metadata.json
index 2073a6be7d6..de0c5c238f0 100644
--- a/components/actionbar/dist/metadata.json
+++ b/components/actionbar/dist/metadata.json
@@ -11,76 +11,344 @@
     ".spectrum-ActionBar--fixed",
     ".spectrum-ActionBar--flexible .spectrum-ActionBar-popover",
     ".spectrum-ActionBar--sticky",
-    ".spectrum-ActionBar.is-open",
-    ".spectrum-ActionBar.spectrum-ActionBar--emphasized",
     ".spectrum-ActionBar:lang(ja)",
     ".spectrum-ActionBar:lang(ko)",
-    ".spectrum-ActionBar:lang(zh)"
-  ],
-  "modifiers": [
-    "--mod-actionbar-close-button-to-counter",
-    "--mod-actionbar-corner-radius",
-    "--mod-actionbar-height",
-    "--mod-actionbar-item-counter-color",
-    "--mod-actionbar-item-counter-line-height-cjk",
-    "--mod-actionbar-minimum-width",
-    "--mod-actionbar-popover-background-color",
-    "--mod-actionbar-popover-border-color",
-    "--mod-actionbar-shadow-blur",
-    "--mod-actionbar-shadow-color",
-    "--mod-actionbar-shadow-horizontal",
-    "--mod-actionbar-shadow-vertical",
-    "--mod-actionbar-spacing-action-group-edge",
-    "--mod-actionbar-spacing-bottom-area",
-    "--mod-actionbar-spacing-label-to-action-group",
-    "--mod-actionbar-spacing-outer-edge",
-    "--mod-actionbar-spacing-top-area"
-  ],
-  "component": [
-    "--spectrum-action-bar-border-color",
-    "--spectrum-action-bar-bottom-to-content-area",
-    "--spectrum-action-bar-close-button-to-counter",
-    "--spectrum-action-bar-counter-font-size",
-    "--spectrum-action-bar-edge-to-content-area",
-    "--spectrum-action-bar-height",
-    "--spectrum-action-bar-label-to-action-group-area",
-    "--spectrum-action-bar-minimum-width",
-    "--spectrum-action-bar-top-to-content-area",
-    "--spectrum-actionbar-close-button-to-counter",
-    "--spectrum-actionbar-corner-radius",
-    "--spectrum-actionbar-height",
-    "--spectrum-actionbar-item-counter-color",
-    "--spectrum-actionbar-item-counter-line-height",
-    "--spectrum-actionbar-item-counter-line-height-cjk",
-    "--spectrum-actionbar-minimum-width",
-    "--spectrum-actionbar-popover-background-color",
-    "--spectrum-actionbar-popover-border-color",
-    "--spectrum-actionbar-shadow-blur",
-    "--spectrum-actionbar-shadow-color",
-    "--spectrum-actionbar-shadow-horizontal",
-    "--spectrum-actionbar-shadow-vertical",
-    "--spectrum-actionbar-spacing-bottom-area",
-    "--spectrum-actionbar-spacing-label-to-action-group",
-    "--spectrum-actionbar-spacing-outer-edge",
-    "--spectrum-actionbar-spacing-padding-inline",
-    "--spectrum-actionbar-spacing-top-area"
-  ],
-  "global": [
-    "--spectrum-background-elevated-color",
-    "--spectrum-cjk-line-height-100",
-    "--spectrum-corner-radius-medium-size-extra-large",
-    "--spectrum-drop-shadow-elevated-blur",
-    "--spectrum-drop-shadow-elevated-color",
-    "--spectrum-drop-shadow-elevated-x",
-    "--spectrum-drop-shadow-elevated-y",
-    "--spectrum-gray-25",
-    "--spectrum-line-height-100",
-    "--spectrum-neutral-content-color-default",
-    "--spectrum-spacing-300"
-  ],
-  "passthroughs": [
-    "--mod-fieldlabel-font-size",
-    "--mod-fieldlabel-line-height"
+    ".spectrum-ActionBar:lang(zh)",
+    ".spectrum-ActionBar.is-open",
+    ".spectrum-ActionBar.spectrum-ActionBar--emphasized"
   ],
-  "high-contrast": ["--highcontrast-actionbar-popover-border-color"]
+  "modifiers": {
+    "mod-actionbar-spacing-outer-edge": {
+      "description": "Used by `.spectrum-ActionBar`, `.spectrum-ActionBar.is-open`. <br/>Defaults to `var(--spectrum-actionbar-spacing-outer-edge)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-actionbar-height": {
+      "description": "Used by `.spectrum-ActionBar.is-open`, `.spectrum-ActionBar .spectrum-ActionBar-popover`. <br/>Defaults to `var(--spectrum-actionbar-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-actionbar-minimum-width": {
+      "description": "Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`. <br/>Defaults to `var(--spectrum-actionbar-minimum-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-actionbar-spacing-action-group-edge": {
+      "description": "Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`. <br/>Defaults to `var(--spectrum-actionbar-spacing-padding-inline)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-actionbar-spacing-top-area": {
+      "description": "Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`. <br/>Defaults to `var(--spectrum-actionbar-spacing-top-area)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-actionbar-spacing-bottom-area": {
+      "description": "Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`. <br/>Defaults to `var(--spectrum-actionbar-spacing-bottom-area)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-actionbar-corner-radius": {
+      "description": "Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`. <br/>Defaults to `var(--spectrum-actionbar-corner-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-actionbar-popover-border-color": {
+      "description": "Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`. <br/>Defaults to `var(--spectrum-actionbar-popover-border-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-actionbar-popover-background-color": {
+      "description": "Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`. <br/>Defaults to `var(--spectrum-actionbar-popover-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-actionbar-shadow-horizontal": {
+      "description": "Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`. <br/>Defaults to `var(--spectrum-actionbar-shadow-horizontal)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-actionbar-shadow-vertical": {
+      "description": "Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`. <br/>Defaults to `var(--spectrum-actionbar-shadow-vertical)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-actionbar-shadow-blur": {
+      "description": "Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`. <br/>Defaults to `var(--spectrum-actionbar-shadow-blur)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-actionbar-shadow-color": {
+      "description": "Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`. <br/>Defaults to `var(--spectrum-actionbar-shadow-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-actionbar-item-counter-color": {
+      "description": "Used by `.spectrum-ActionBar .spectrum-FieldLabel`. <br/>Defaults to `var(--spectrum-actionbar-item-counter-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-actionbar-close-button-to-counter": {
+      "description": "Used by `.spectrum-ActionBar .spectrum-FieldLabel`. <br/>Defaults to `var(--spectrum-actionbar-close-button-to-counter)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-actionbar-item-counter-line-height-cjk": {
+      "description": "Used by `.spectrum-ActionBar .spectrum-FieldLabel:lang(ja), .spectrum-ActionBar .spectrum-FieldLabel:lang(ko), .spectrum-ActionBar .spectrum-FieldLabel:lang(zh)`. <br/>Defaults to `var(--spectrum-actionbar-item-counter-line-height-cjk)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-actionbar-spacing-label-to-action-group": {
+      "description": "Used by `.spectrum-ActionBar .spectrum-ActionGroup`. <br/>Defaults to `var(--spectrum-actionbar-spacing-label-to-action-group)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-actionbar-height": {
+      "value": "var(--spectrum-component-height-400)",
+      "description": "Defined in `.spectrum-ActionBar`. <br/>Used by `.spectrum-ActionBar.is-open`, `.spectrum-ActionBar .spectrum-ActionBar-popover`. <br/>Defaults to `var(--spectrum-action-bar-height)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-action-bar-height": {
+      "value": "var(--spectrum-component-height-400)",
+      "description": "Used by `--spectrum-actionbar-height`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-actionbar-minimum-width": {
+      "value": "176px",
+      "description": "Defined in `.spectrum-ActionBar`. <br/>Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`. <br/>Defaults to `var(--spectrum-action-bar-minimum-width)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-action-bar-minimum-width": {
+      "value": "176px",
+      "description": "Used by `--spectrum-actionbar-minimum-width`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-actionbar-corner-radius": {
+      "value": "10px",
+      "description": "Defined in `.spectrum-ActionBar`. <br/>Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`. <br/>Defaults to `var(--spectrum-corner-radius-medium-size-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-actionbar-spacing-label-to-action-group": {
+      "value": "16px",
+      "description": "Defined in `.spectrum-ActionBar`. <br/>Used by `.spectrum-ActionBar .spectrum-ActionGroup`. <br/>Defaults to `var(--spectrum-action-bar-label-to-action-group-area)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-action-bar-label-to-action-group-area": {
+      "value": "16px",
+      "description": "Used by `--spectrum-actionbar-spacing-label-to-action-group`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-actionbar-spacing-padding-inline": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-ActionBar`. <br/>Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`. <br/>Defaults to `var(--spectrum-action-bar-edge-to-content-area)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-action-bar-edge-to-content-area": {
+      "value": "8px",
+      "description": "Used by `--spectrum-actionbar-spacing-padding-inline`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-actionbar-spacing-top-area": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-ActionBar`. <br/>Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`. <br/>Defaults to `var(--spectrum-action-bar-top-to-content-area)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-action-bar-top-to-content-area": {
+      "value": "12px",
+      "description": "Used by `--spectrum-actionbar-spacing-top-area`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-actionbar-spacing-bottom-area": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-ActionBar`. <br/>Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`. <br/>Defaults to `var(--spectrum-action-bar-bottom-to-content-area)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-action-bar-bottom-to-content-area": {
+      "value": "12px",
+      "description": "Used by `--spectrum-actionbar-spacing-bottom-area`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-actionbar-close-button-to-counter": {
+      "value": "var(--spectrum-text-to-control-50)",
+      "description": "Defined in `.spectrum-ActionBar`. <br/>Used by `.spectrum-ActionBar .spectrum-FieldLabel`. <br/>Defaults to `var(--spectrum-action-bar-close-button-to-counter)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-action-bar-close-button-to-counter": {
+      "value": "var(--spectrum-text-to-control-50)",
+      "description": "Used by `--spectrum-actionbar-close-button-to-counter`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-actionbar-item-counter-line-height": {
+      "value": "1.3",
+      "description": "Defined in `.spectrum-ActionBar`. <br/>Used by `--mod-fieldlabel-line-height`. <br/>Defaults to `var(--spectrum-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-actionbar-item-counter-color": {
+      "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+      "description": "Defined in `.spectrum-ActionBar`, `.spectrum-ActionBar.spectrum-ActionBar--emphasized`. <br/>Used by `.spectrum-ActionBar .spectrum-FieldLabel`. <br/>Defaults to `var(--spectrum-gray-25)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-actionbar-popover-background-color": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-ActionBar`, `.spectrum-ActionBar.spectrum-ActionBar--emphasized`. <br/>Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`. <br/>Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-actionbar-popover-border-color": {
+      "value": "rgba(255, 255, 255, 0)",
+      "description": "Defined in `.spectrum-ActionBar`. <br/>Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`. <br/>Defaults to `var(--spectrum-action-bar-border-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-action-bar-border-color": {
+      "value": "rgba(255, 255, 255, 0)",
+      "description": "Used by `--spectrum-actionbar-popover-border-color`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-actionbar-spacing-outer-edge": {
+      "value": "16px",
+      "description": "Defined in `.spectrum-ActionBar`. <br/>Used by `.spectrum-ActionBar`, `.spectrum-ActionBar.is-open`. <br/>Defaults to `var(--spectrum-spacing-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-actionbar-shadow-horizontal": {
+      "value": "0px",
+      "description": "Defined in `.spectrum-ActionBar`. <br/>Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`. <br/>Defaults to `var(--spectrum-drop-shadow-elevated-x)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-actionbar-shadow-vertical": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-ActionBar`. <br/>Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`. <br/>Defaults to `var(--spectrum-drop-shadow-elevated-y)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-actionbar-shadow-blur": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-ActionBar`. <br/>Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`. <br/>Defaults to `var(--spectrum-drop-shadow-elevated-blur)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-actionbar-shadow-color": {
+      "value": "var(--spectrum-drop-shadow-color-200)",
+      "description": "Defined in `.spectrum-ActionBar`. <br/>Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`. <br/>Defaults to `var(--spectrum-drop-shadow-elevated-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-actionbar-item-counter-line-height-cjk": {
+      "value": "1.5",
+      "description": "Defined in `.spectrum-ActionBar:lang(ja), .spectrum-ActionBar:lang(ko), .spectrum-ActionBar:lang(zh)`. <br/>Used by `.spectrum-ActionBar .spectrum-FieldLabel:lang(ja), .spectrum-ActionBar .spectrum-FieldLabel:lang(ko), .spectrum-ActionBar .spectrum-FieldLabel:lang(zh)`. <br/>Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-action-bar-counter-font-size": {
+      "value": "var(--spectrum-font-size-100)",
+      "description": "Used by `--mod-fieldlabel-font-size`.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-corner-radius-medium-size-extra-large": {
+      "value": "10px",
+      "description": "Used by `--spectrum-actionbar-corner-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-line-height-100": {
+      "value": "1.3",
+      "description": "Used by `--spectrum-actionbar-item-counter-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-actionbar-item-counter-color`, `--spectrum-actionbar-popover-background-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-background-elevated-color": {
+      "value": "var(--spectrum-gray-25)",
+      "description": "Used by `--spectrum-actionbar-popover-background-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-spacing-300": {
+      "value": "16px",
+      "description": "Used by `--spectrum-actionbar-spacing-outer-edge`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-drop-shadow-elevated-x": {
+      "value": "0px",
+      "description": "Used by `--spectrum-actionbar-shadow-horizontal`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-drop-shadow-elevated-y": {
+      "value": "2px",
+      "description": "Used by `--spectrum-actionbar-shadow-vertical`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-drop-shadow-elevated-blur": {
+      "value": "8px",
+      "description": "Used by `--spectrum-actionbar-shadow-blur`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-drop-shadow-elevated-color": {
+      "value": "var(--spectrum-drop-shadow-color-200)",
+      "description": "Used by `--spectrum-actionbar-shadow-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-gray-25": {
+      "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+      "description": "Used by `--spectrum-actionbar-item-counter-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-cjk-line-height-100": {
+      "value": "1.5",
+      "description": "Used by `--spectrum-actionbar-item-counter-line-height-cjk`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {
+    "mod-fieldlabel-font-size": {
+      "category": "Passthrough"
+    },
+    "mod-fieldlabel-line-height": {
+      "category": "Passthrough"
+    }
+  },
+  "high-contrast": {
+    "highcontrast-actionbar-popover-border-color": {
+      "value": "var(--mod-actionbar-popover-border-color, var(--spectrum-actionbar-popover-border-color))",
+      "description": "Defined in `.spectrum-ActionBar`. <br/>Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`. <br/>Defaults to `var(--mod-actionbar-popover-border-color, var(--spectrum-actionbar-popover-border-color))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/actionbar/stories/actionbar.stories.js b/components/actionbar/stories/actionbar.stories.js
index c19710c0051..ae1001469d9 100644
--- a/components/actionbar/stories/actionbar.stories.js
+++ b/components/actionbar/stories/actionbar.stories.js
@@ -3,11 +3,13 @@ import { default as CloseButton } from "@spectrum-css/closebutton/stories/closeb
 import { default as Popover } from "@spectrum-css/popover/stories/popover.stories.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isEmphasized, isOpen } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { ActionBarGroup } from "./actionbar.test.js";
 import { BehavioralTemplate } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * The action bar component is a floating full width bar that appears upon selection. Action bars are used for single and bulk selection patterns, when a user needs to perform actions on either a single or multiple items at the same time.
  *
@@ -75,8 +77,12 @@ export default {
 		status: {
 			type: "migrated",
 		},
-		tags: ["migrated"],
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
+	tags: ["migrated"],
 };
 
 export const Default = ActionBarGroup.bind({});
diff --git a/components/actionbar/stories/template.js b/components/actionbar/stories/template.js
index 44b7d8265e3..721d12e59dc 100644
--- a/components/actionbar/stories/template.js
+++ b/components/actionbar/stories/template.js
@@ -2,15 +2,17 @@ import { Template as ActionGroup } from "@spectrum-css/actiongroup/stories/templ
 import { Template as CloseButton } from "@spectrum-css/closebutton/stories/template.js";
 import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js";
 import { Template as Popover } from "@spectrum-css/popover/stories/template.js";
-import { Container } from "@spectrum-css/preview/decorators";
+import { Container, getRandomId } from "@spectrum-css/preview/decorators";
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
 
 import "../index.css";
 
 export const Template = ({
 	rootClass = "spectrum-ActionBar",
+	id = getRandomId("action-bar"),
 	isOpen = true,
 	isEmphasized = false,
 	isSticky = false,
@@ -31,6 +33,7 @@ export const Template = ({
 				"is-open": isOpen,
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}
+			id=${ifDefined(id)}
 			style=${styleMap(customStyles)}
 		>
 			${Popover({
diff --git a/components/actionbutton/dist/metadata.json b/components/actionbutton/dist/metadata.json
index f8685ad4f90..5d49d2ca3a8 100644
--- a/components/actionbutton/dist/metadata.json
+++ b/components/actionbutton/dist/metadata.json
@@ -13,18 +13,6 @@
     ".spectrum-ActionButton-icon",
     ".spectrum-ActionButton-label",
     ".spectrum-ActionButton-label:empty",
-    ".spectrum-ActionButton.is-disabled",
-    ".spectrum-ActionButton.is-selected",
-    ".spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized",
-    ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack",
-    ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite",
-    ".spectrum-ActionButton.spectrum-ActionButton--quiet",
-    ".spectrum-ActionButton.spectrum-ActionButton--quiet.is-selected",
-    ".spectrum-ActionButton.spectrum-ActionButton--quiet:disabled:not(.is-selected)",
-    ".spectrum-ActionButton.spectrum-ActionButton--staticBlack",
-    ".spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet",
-    ".spectrum-ActionButton.spectrum-ActionButton--staticWhite",
-    ".spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet",
     ".spectrum-ActionButton::-moz-focus-inner",
     ".spectrum-ActionButton:active",
     ".spectrum-ActionButton:after",
@@ -36,197 +24,1049 @@
     ".spectrum-ActionButton:has(.spectrum-ActionButton-icon)",
     ".spectrum-ActionButton:hover",
     ".spectrum-ActionButton:not(:has(.spectrum-ActionButton-label))",
+    ".spectrum-ActionButton.is-disabled",
+    ".spectrum-ActionButton.is-selected",
+    ".spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized",
+    ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack",
+    ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite",
+    ".spectrum-ActionButton.spectrum-ActionButton--quiet",
+    ".spectrum-ActionButton.spectrum-ActionButton--quiet:disabled:not(.is-selected)",
+    ".spectrum-ActionButton.spectrum-ActionButton--quiet.is-selected",
+    ".spectrum-ActionButton.spectrum-ActionButton--staticBlack",
+    ".spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet",
+    ".spectrum-ActionButton.spectrum-ActionButton--staticWhite",
+    ".spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet",
     "a.spectrum-ActionButton"
   ],
-  "modifiers": [
-    "--mod-actionbutton-animation-duration",
-    "--mod-actionbutton-background-color-default",
-    "--mod-actionbutton-background-color-default-selected",
-    "--mod-actionbutton-background-color-default-selected-emphasized",
-    "--mod-actionbutton-background-color-disabled",
-    "--mod-actionbutton-background-color-down",
-    "--mod-actionbutton-background-color-down-selected",
-    "--mod-actionbutton-background-color-down-selected-emphasized",
-    "--mod-actionbutton-background-color-focus",
-    "--mod-actionbutton-background-color-focus-selected",
-    "--mod-actionbutton-background-color-focus-selected-emphasized",
-    "--mod-actionbutton-background-color-hover",
-    "--mod-actionbutton-background-color-hover-selected",
-    "--mod-actionbutton-background-color-hover-selected-emphasized",
-    "--mod-actionbutton-border-radius",
-    "--mod-actionbutton-content-color-default",
-    "--mod-actionbutton-content-color-default-selected",
-    "--mod-actionbutton-content-color-default-selected-emphasized",
-    "--mod-actionbutton-content-color-disabled",
-    "--mod-actionbutton-content-color-down",
-    "--mod-actionbutton-content-color-down-selected",
-    "--mod-actionbutton-content-color-down-selected-emphasized",
-    "--mod-actionbutton-content-color-focus",
-    "--mod-actionbutton-content-color-focus-selected",
-    "--mod-actionbutton-content-color-focus-selected-emphasized",
-    "--mod-actionbutton-content-color-hover",
-    "--mod-actionbutton-content-color-hover-selected",
-    "--mod-actionbutton-content-color-hover-selected-emphasized",
-    "--mod-actionbutton-edge-to-hold-icon",
-    "--mod-actionbutton-edge-to-text",
-    "--mod-actionbutton-edge-to-visual",
-    "--mod-actionbutton-edge-to-visual-only",
-    "--mod-actionbutton-focus-indicator-border-radius",
-    "--mod-actionbutton-focus-indicator-color",
-    "--mod-actionbutton-focus-indicator-gap",
-    "--mod-actionbutton-focus-indicator-thickness",
-    "--mod-actionbutton-font-size",
-    "--mod-actionbutton-font-style",
-    "--mod-actionbutton-font-weight",
-    "--mod-actionbutton-height",
-    "--mod-actionbutton-icon-size",
-    "--mod-actionbutton-label-color",
-    "--mod-actionbutton-line-height",
-    "--mod-actionbutton-min-width",
-    "--mod-actionbutton-text-to-visual"
-  ],
-  "component": [
-    "--spectrum-action-button-edge-to-hold-icon-extra-large",
-    "--spectrum-action-button-edge-to-hold-icon-extra-small",
-    "--spectrum-action-button-edge-to-hold-icon-large",
-    "--spectrum-action-button-edge-to-hold-icon-medium",
-    "--spectrum-action-button-edge-to-hold-icon-small",
-    "--spectrum-actionbutton-animation-duration",
-    "--spectrum-actionbutton-background-color-default",
-    "--spectrum-actionbutton-background-color-disabled",
-    "--spectrum-actionbutton-background-color-down",
-    "--spectrum-actionbutton-background-color-focus",
-    "--spectrum-actionbutton-background-color-hover",
-    "--spectrum-actionbutton-border-color",
-    "--spectrum-actionbutton-border-radius",
-    "--spectrum-actionbutton-border-width",
-    "--spectrum-actionbutton-content-color-default",
-    "--spectrum-actionbutton-content-color-disabled",
-    "--spectrum-actionbutton-content-color-down",
-    "--spectrum-actionbutton-content-color-focus",
-    "--spectrum-actionbutton-content-color-hover",
-    "--spectrum-actionbutton-downstate-perspective",
-    "--spectrum-actionbutton-edge-to-hold-icon",
-    "--spectrum-actionbutton-edge-to-text",
-    "--spectrum-actionbutton-edge-to-visual",
-    "--spectrum-actionbutton-edge-to-visual-only",
-    "--spectrum-actionbutton-focus-indicator-border-radius",
-    "--spectrum-actionbutton-focus-indicator-color",
-    "--spectrum-actionbutton-focus-indicator-gap",
-    "--spectrum-actionbutton-focus-indicator-thickness",
-    "--spectrum-actionbutton-font-size",
-    "--spectrum-actionbutton-font-style",
-    "--spectrum-actionbutton-font-weight",
-    "--spectrum-actionbutton-height",
-    "--spectrum-actionbutton-icon-size",
-    "--spectrum-actionbutton-line-height",
-    "--spectrum-actionbutton-min-width",
-    "--spectrum-actionbutton-text-to-visual"
-  ],
-  "global": [
-    "--spectrum-accent-background-color-default",
-    "--spectrum-accent-background-color-down",
-    "--spectrum-accent-background-color-hover",
-    "--spectrum-accent-background-color-key-focus",
-    "--spectrum-animation-duration-100",
-    "--spectrum-black",
-    "--spectrum-border-width-100",
-    "--spectrum-component-edge-to-text-100",
-    "--spectrum-component-edge-to-text-200",
-    "--spectrum-component-edge-to-text-300",
-    "--spectrum-component-edge-to-text-50",
-    "--spectrum-component-edge-to-text-75",
-    "--spectrum-component-edge-to-visual-100",
-    "--spectrum-component-edge-to-visual-200",
-    "--spectrum-component-edge-to-visual-300",
-    "--spectrum-component-edge-to-visual-50",
-    "--spectrum-component-edge-to-visual-75",
-    "--spectrum-component-edge-to-visual-only-100",
-    "--spectrum-component-edge-to-visual-only-200",
-    "--spectrum-component-edge-to-visual-only-300",
-    "--spectrum-component-edge-to-visual-only-50",
-    "--spectrum-component-edge-to-visual-only-75",
-    "--spectrum-component-height-100",
-    "--spectrum-component-height-200",
-    "--spectrum-component-height-300",
-    "--spectrum-component-height-50",
-    "--spectrum-component-height-75",
-    "--spectrum-component-size-difference-down",
-    "--spectrum-component-size-minimum-perspective-down",
-    "--spectrum-component-size-width-ratio-down",
-    "--spectrum-corner-radius-medium-size-extra-large",
-    "--spectrum-corner-radius-medium-size-extra-small",
-    "--spectrum-corner-radius-medium-size-large",
-    "--spectrum-corner-radius-medium-size-medium",
-    "--spectrum-corner-radius-medium-size-small",
-    "--spectrum-default-font-style",
-    "--spectrum-disabled-background-color",
-    "--spectrum-disabled-content-color",
-    "--spectrum-disabled-static-black-background-color",
-    "--spectrum-disabled-static-black-content-color",
-    "--spectrum-disabled-static-white-background-color",
-    "--spectrum-disabled-static-white-content-color",
-    "--spectrum-downstate-height",
-    "--spectrum-downstate-width",
-    "--spectrum-focus-indicator-color",
-    "--spectrum-focus-indicator-gap",
-    "--spectrum-focus-indicator-thickness",
-    "--spectrum-font-size-100",
-    "--spectrum-font-size-200",
-    "--spectrum-font-size-300",
-    "--spectrum-font-size-50",
-    "--spectrum-font-size-75",
-    "--spectrum-gray-100",
-    "--spectrum-gray-200",
-    "--spectrum-gray-25",
-    "--spectrum-line-height-100",
-    "--spectrum-logical-rotation",
-    "--spectrum-medium-font-weight",
-    "--spectrum-neutral-background-color-selected-default",
-    "--spectrum-neutral-background-color-selected-down",
-    "--spectrum-neutral-background-color-selected-hover",
-    "--spectrum-neutral-background-color-selected-key-focus",
-    "--spectrum-neutral-content-color-default",
-    "--spectrum-neutral-content-color-down",
-    "--spectrum-neutral-content-color-hover",
-    "--spectrum-neutral-content-color-key-focus",
-    "--spectrum-sans-font-family-stack",
-    "--spectrum-static-black-focus-indicator-color",
-    "--spectrum-static-white-focus-indicator-color",
-    "--spectrum-text-to-visual-100",
-    "--spectrum-text-to-visual-200",
-    "--spectrum-text-to-visual-300",
-    "--spectrum-text-to-visual-50",
-    "--spectrum-text-to-visual-75",
-    "--spectrum-transparent-black-100",
-    "--spectrum-transparent-black-200",
-    "--spectrum-transparent-black-25",
-    "--spectrum-transparent-black-800",
-    "--spectrum-transparent-black-900",
-    "--spectrum-transparent-white-100",
-    "--spectrum-transparent-white-200",
-    "--spectrum-transparent-white-25",
-    "--spectrum-transparent-white-800",
-    "--spectrum-transparent-white-900",
-    "--spectrum-white",
-    "--spectrum-workflow-icon-size-100",
-    "--spectrum-workflow-icon-size-200",
-    "--spectrum-workflow-icon-size-300",
-    "--spectrum-workflow-icon-size-50",
-    "--spectrum-workflow-icon-size-75"
-  ],
-  "passthroughs": [
-    "--mod-button-animation-duration",
-    "--mod-button-font-family",
-    "--mod-button-line-height"
-  ],
-  "high-contrast": [
-    "--highcontrast-actionbutton-animation-duration",
-    "--highcontrast-actionbutton-background-color-default",
-    "--highcontrast-actionbutton-background-color-disabled",
-    "--highcontrast-actionbutton-border-color",
-    "--highcontrast-actionbutton-content-color-default",
-    "--highcontrast-actionbutton-content-color-disabled",
-    "--highcontrast-actionbutton-focus-indicator-color"
-  ]
+  "modifiers": {
+    "mod-actionbutton-background-color-default": {
+      "description": "Defined in `.spectrum-ActionButton.is-selected`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized`. <br/>Used by `.spectrum-ActionButton`. <br/>Defaults to `var(--spectrum-actionbutton-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-background-color-default-selected": {
+      "description": "Used by `--mod-actionbutton-background-color-default`. <br/>Defaults to `var(--spectrum-neutral-background-color-selected-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-background-color-hover": {
+      "description": "Defined in `.spectrum-ActionButton.is-selected`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized`. <br/>Used by `.spectrum-ActionButton:hover`. <br/>Defaults to `var(--spectrum-actionbutton-background-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-background-color-hover-selected": {
+      "description": "Used by `--mod-actionbutton-background-color-hover`. <br/>Defaults to `var(--spectrum-neutral-background-color-selected-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-background-color-down": {
+      "description": "Defined in `.spectrum-ActionButton.is-selected`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized`. <br/>Used by `.spectrum-ActionButton:active`. <br/>Defaults to `var(--spectrum-actionbutton-background-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-background-color-down-selected": {
+      "description": "Used by `--mod-actionbutton-background-color-down`. <br/>Defaults to `var(--spectrum-neutral-background-color-selected-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-background-color-focus": {
+      "description": "Defined in `.spectrum-ActionButton.is-selected`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized`. <br/>Used by `.spectrum-ActionButton:focus-visible`. <br/>Defaults to `var(--spectrum-actionbutton-background-color-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-background-color-focus-selected": {
+      "description": "Used by `--mod-actionbutton-background-color-focus`. <br/>Defaults to `var(--spectrum-neutral-background-color-selected-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-content-color-default": {
+      "description": "Defined in `.spectrum-ActionButton.is-selected`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized`. <br/>Used by `.spectrum-ActionButton`. <br/>Defaults to `var(--spectrum-actionbutton-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-content-color-default-selected": {
+      "description": "Used by `--mod-actionbutton-content-color-default`. <br/>Defaults to `var(--spectrum-gray-25)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-content-color-hover": {
+      "description": "Defined in `.spectrum-ActionButton.is-selected`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized`. <br/>Used by `.spectrum-ActionButton:hover`. <br/>Defaults to `var(--spectrum-actionbutton-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-content-color-hover-selected": {
+      "description": "Used by `--mod-actionbutton-content-color-hover`. <br/>Defaults to `var(--spectrum-gray-25)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-content-color-down": {
+      "description": "Defined in `.spectrum-ActionButton.is-selected`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized`. <br/>Used by `.spectrum-ActionButton:active`. <br/>Defaults to `var(--spectrum-actionbutton-content-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-content-color-down-selected": {
+      "description": "Used by `--mod-actionbutton-content-color-down`. <br/>Defaults to `var(--spectrum-gray-25)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-content-color-focus": {
+      "description": "Defined in `.spectrum-ActionButton.is-selected`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized`. <br/>Used by `.spectrum-ActionButton:focus-visible`. <br/>Defaults to `var(--spectrum-actionbutton-content-color-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-content-color-focus-selected": {
+      "description": "Used by `--mod-actionbutton-content-color-focus`. <br/>Defaults to `var(--spectrum-gray-25)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-background-color-default-selected-emphasized": {
+      "description": "Used by `--mod-actionbutton-background-color-default`. <br/>Defaults to `var(--spectrum-accent-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-background-color-hover-selected-emphasized": {
+      "description": "Used by `--mod-actionbutton-background-color-hover`. <br/>Defaults to `var(--spectrum-accent-background-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-background-color-down-selected-emphasized": {
+      "description": "Used by `--mod-actionbutton-background-color-down`. <br/>Defaults to `var(--spectrum-accent-background-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-background-color-focus-selected-emphasized": {
+      "description": "Used by `--mod-actionbutton-background-color-focus`. <br/>Defaults to `var(--spectrum-accent-background-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-content-color-default-selected-emphasized": {
+      "description": "Used by `--mod-actionbutton-content-color-default`. <br/>Defaults to `var(--spectrum-white)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-content-color-hover-selected-emphasized": {
+      "description": "Used by `--mod-actionbutton-content-color-hover`. <br/>Defaults to `var(--spectrum-white)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-content-color-down-selected-emphasized": {
+      "description": "Used by `--mod-actionbutton-content-color-down`. <br/>Defaults to `var(--spectrum-white)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-content-color-focus-selected-emphasized": {
+      "description": "Used by `--mod-actionbutton-content-color-focus`. <br/>Defaults to `var(--spectrum-white)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-min-width": {
+      "description": "Used by `.spectrum-ActionButton`. <br/>Defaults to `var(--spectrum-actionbutton-min-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-height": {
+      "description": "Used by `.spectrum-ActionButton`. <br/>Defaults to `var(--spectrum-actionbutton-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-line-height": {
+      "description": "Used by `.spectrum-ActionButton`. <br/>Defaults to `var(--spectrum-actionbutton-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-border-radius": {
+      "description": "Used by `.spectrum-ActionButton`. <br/>Defaults to `var(--spectrum-actionbutton-border-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-text-to-visual": {
+      "description": "Used by `.spectrum-ActionButton`. <br/>Defaults to `var(--spectrum-actionbutton-text-to-visual)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-edge-to-text": {
+      "description": "Used by `.spectrum-ActionButton`. <br/>Defaults to `var(--spectrum-actionbutton-edge-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-background-color-disabled": {
+      "description": "Used by `.spectrum-ActionButton.is-disabled, .spectrum-ActionButton:disabled`. <br/>Defaults to `var(--spectrum-actionbutton-background-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-content-color-disabled": {
+      "description": "Used by `.spectrum-ActionButton.is-disabled, .spectrum-ActionButton:disabled`. <br/>Defaults to `var(--spectrum-actionbutton-content-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-icon-size": {
+      "description": "Used by `.spectrum-ActionButton-icon`. <br/>Defaults to `var(--spectrum-actionbutton-icon-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-edge-to-visual": {
+      "description": "Used by `.spectrum-ActionButton:has(.spectrum-ActionButton-icon)`. <br/>Defaults to `var(--spectrum-actionbutton-edge-to-visual)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-edge-to-visual-only": {
+      "description": "Used by `.spectrum-ActionButton:not(:has(.spectrum-ActionButton-label))`. <br/>Defaults to `var(--spectrum-actionbutton-edge-to-visual-only)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-font-size": {
+      "description": "Used by `.spectrum-ActionButton-label`. <br/>Defaults to `var(--spectrum-actionbutton-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-font-weight": {
+      "description": "Used by `.spectrum-ActionButton-label`. <br/>Defaults to `var(--spectrum-actionbutton-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-font-style": {
+      "description": "Used by `.spectrum-ActionButton-label`. <br/>Defaults to `var(--spectrum-actionbutton-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-label-color": {
+      "description": "Used by `.spectrum-ActionButton-label`.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-edge-to-hold-icon": {
+      "description": "Used by `.spectrum-ActionButton-hold`. <br/>Defaults to `var(--spectrum-actionbutton-edge-to-hold-icon)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-animation-duration": {
+      "description": "Used by `.spectrum-ActionButton`, `.spectrum-ActionButton:after`. <br/>Defaults to `var(--spectrum-actionbutton-animation-duration)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-focus-indicator-gap": {
+      "description": "Used by `.spectrum-ActionButton:after`. <br/>Defaults to `var(--spectrum-actionbutton-focus-indicator-gap)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-focus-indicator-border-radius": {
+      "description": "Used by `.spectrum-ActionButton:after`. <br/>Defaults to `var(--spectrum-actionbutton-focus-indicator-border-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-focus-indicator-thickness": {
+      "description": "Used by `.spectrum-ActionButton:focus-visible:after`. <br/>Defaults to `var(--spectrum-actionbutton-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-actionbutton-focus-indicator-color": {
+      "description": "Used by `.spectrum-ActionButton:focus-visible:after`. <br/>Defaults to `var(--spectrum-actionbutton-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-actionbutton-animation-duration": {
+      "value": "var(--spectrum-animation-duration-100)",
+      "description": "Defined in `.spectrum-ActionButton`. <br/>Used by `.spectrum-ActionButton`, `.spectrum-ActionButton:after`. <br/>Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-actionbutton-border-radius": {
+      "value": "10px",
+      "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton--sizeXS`, `.spectrum-ActionButton--sizeS`, `.spectrum-ActionButton--sizeL`, `.spectrum-ActionButton--sizeXL`. <br/>Used by `--spectrum-actionbutton-focus-indicator-border-radius`, `.spectrum-ActionButton`. <br/>Defaults to `var(--spectrum-corner-radius-medium-size-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-actionbutton-border-width": {
+      "value": "1px",
+      "description": "Defined in `.spectrum-ActionButton`. <br/>Used by `.spectrum-ActionButton`, `.spectrum-ActionButton:has(.spectrum-ActionButton-icon)`, `.spectrum-ActionButton:not(:has(.spectrum-ActionButton-label))`, `.spectrum-ActionButton-hold`, `.spectrum-ActionButton:after`. <br/>Defaults to `var(--spectrum-border-width-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-actionbutton-border-color": {
+      "value": "transparent",
+      "description": "Defined in `.spectrum-ActionButton`. <br/>Used by `.spectrum-ActionButton`. <br/>Defaults to `transparent`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-actionbutton-content-color-default": {
+      "value": "rgb(255, 255, 255)",
+      "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack`. <br/>Used by `.spectrum-ActionButton`. <br/>Defaults to `var(--spectrum-white)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-actionbutton-content-color-hover": {
+      "value": "rgb(255, 255, 255)",
+      "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack`. <br/>Used by `.spectrum-ActionButton:hover`. <br/>Defaults to `var(--spectrum-white)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-actionbutton-content-color-down": {
+      "value": "rgb(255, 255, 255)",
+      "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack`. <br/>Used by `.spectrum-ActionButton:active`. <br/>Defaults to `var(--spectrum-white)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-actionbutton-content-color-focus": {
+      "value": "rgb(255, 255, 255)",
+      "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack`. <br/>Used by `.spectrum-ActionButton:focus-visible`. <br/>Defaults to `var(--spectrum-white)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-actionbutton-content-color-disabled": {
+      "value": "rgba(255, 255, 255, 0.21)",
+      "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`. <br/>Used by `.spectrum-ActionButton.is-disabled, .spectrum-ActionButton:disabled`. <br/>Defaults to `var(--spectrum-disabled-static-white-content-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-actionbutton-background-color-default": {
+      "value": "rgba(0, 0, 0, 0.84)",
+      "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack`. <br/>Used by `.spectrum-ActionButton`. <br/>Defaults to `var(--spectrum-transparent-black-800)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-actionbutton-background-color-hover": {
+      "value": "rgba(0, 0, 0, 0.93)",
+      "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack`. <br/>Used by `.spectrum-ActionButton:hover`. <br/>Defaults to `var(--spectrum-transparent-black-900)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-actionbutton-background-color-down": {
+      "value": "rgba(0, 0, 0, 0.93)",
+      "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack`. <br/>Used by `.spectrum-ActionButton:active`. <br/>Defaults to `var(--spectrum-transparent-black-900)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-actionbutton-background-color-focus": {
+      "value": "rgba(0, 0, 0, 0.93)",
+      "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack`. <br/>Used by `.spectrum-ActionButton:focus-visible`. <br/>Defaults to `var(--spectrum-transparent-black-900)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-actionbutton-background-color-disabled": {
+      "value": "rgba(0, 0, 0, 0.09)",
+      "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.spectrum-ActionButton--quiet.is-selected`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack`. <br/>Used by `.spectrum-ActionButton.is-disabled, .spectrum-ActionButton:disabled`. <br/>Defaults to `var(--spectrum-disabled-static-black-background-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-actionbutton-focus-indicator-gap": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-ActionButton`. <br/>Used by `--spectrum-actionbutton-focus-indicator-border-radius`, `.spectrum-ActionButton:after`. <br/>Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-actionbutton-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-ActionButton`. <br/>Used by `.spectrum-ActionButton:focus-visible:after`. <br/>Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-actionbutton-focus-indicator-color": {
+      "value": "rgb(255, 255, 255)",
+      "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`. <br/>Used by `.spectrum-ActionButton:focus-visible:after`. <br/>Defaults to `var(--spectrum-static-white-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-actionbutton-focus-indicator-border-radius": {
+      "value": "calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap))",
+      "description": "Defined in `.spectrum-ActionButton`. <br/>Used by `.spectrum-ActionButton:after`. <br/>Defaults to `calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-actionbutton-min-width": {
+      "value": "calc(var(--spectrum-component-edge-to-visual-only-300) * 2 + var(--spectrum-workflow-icon-size-300))",
+      "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton--sizeXS`, `.spectrum-ActionButton--sizeS`, `.spectrum-ActionButton--sizeL`, `.spectrum-ActionButton--sizeXL`. <br/>Used by `.spectrum-ActionButton`. <br/>Defaults to `calc(var(--spectrum-component-edge-to-visual-only-300) * 2 + var(--spectrum-workflow-icon-size-300))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-actionbutton-height": {
+      "value": "48px",
+      "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton--sizeXS`, `.spectrum-ActionButton--sizeS`, `.spectrum-ActionButton--sizeL`, `.spectrum-ActionButton--sizeXL`. <br/>Used by `--spectrum-actionbutton-line-height`, `.spectrum-ActionButton`. <br/>Defaults to `var(--spectrum-component-height-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-actionbutton-icon-size": {
+      "value": "26px",
+      "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton--sizeXS`, `.spectrum-ActionButton--sizeS`, `.spectrum-ActionButton--sizeL`, `.spectrum-ActionButton--sizeXL`. <br/>Used by `.spectrum-ActionButton-icon`. <br/>Defaults to `var(--spectrum-workflow-icon-size-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-actionbutton-font-size": {
+      "value": "18px",
+      "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton--sizeXS`, `.spectrum-ActionButton--sizeS`, `.spectrum-ActionButton--sizeL`, `.spectrum-ActionButton--sizeXL`. <br/>Used by `.spectrum-ActionButton-label`. <br/>Defaults to `var(--spectrum-font-size-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-actionbutton-font-weight": {
+      "value": "500",
+      "description": "Defined in `.spectrum-ActionButton`. <br/>Used by `.spectrum-ActionButton-label`. <br/>Defaults to `var(--spectrum-medium-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-actionbutton-font-style": {
+      "value": "normal",
+      "description": "Defined in `.spectrum-ActionButton`. <br/>Used by `.spectrum-ActionButton-label`. <br/>Defaults to `var(--spectrum-default-font-style)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-actionbutton-line-height": {
+      "value": "var(--spectrum-actionbutton-height)",
+      "description": "Defined in `.spectrum-ActionButton`. <br/>Used by `.spectrum-ActionButton`. <br/>Defaults to `var(--spectrum-actionbutton-height)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-actionbutton-text-to-visual": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton--sizeXS`, `.spectrum-ActionButton--sizeS`, `.spectrum-ActionButton--sizeL`, `.spectrum-ActionButton--sizeXL`. <br/>Used by `.spectrum-ActionButton`. <br/>Defaults to `var(--spectrum-text-to-visual-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-actionbutton-edge-to-hold-icon": {
+      "value": "6px",
+      "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton--sizeXS`, `.spectrum-ActionButton--sizeS`, `.spectrum-ActionButton--sizeL`, `.spectrum-ActionButton--sizeXL`. <br/>Used by `.spectrum-ActionButton-hold`. <br/>Defaults to `var(--spectrum-action-button-edge-to-hold-icon-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-action-button-edge-to-hold-icon-medium": {
+      "value": "4px",
+      "description": "Used by `--spectrum-actionbutton-edge-to-hold-icon`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-actionbutton-edge-to-visual": {
+      "value": "15px",
+      "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton--sizeXS`, `.spectrum-ActionButton--sizeS`, `.spectrum-ActionButton--sizeL`, `.spectrum-ActionButton--sizeXL`. <br/>Used by `.spectrum-ActionButton:has(.spectrum-ActionButton-icon)`. <br/>Defaults to `var(--spectrum-component-edge-to-visual-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-actionbutton-edge-to-text": {
+      "value": "18px",
+      "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton--sizeXS`, `.spectrum-ActionButton--sizeS`, `.spectrum-ActionButton--sizeL`, `.spectrum-ActionButton--sizeXL`. <br/>Used by `.spectrum-ActionButton`. <br/>Defaults to `var(--spectrum-component-edge-to-text-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-actionbutton-edge-to-visual-only": {
+      "value": "11px",
+      "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton--sizeXS`, `.spectrum-ActionButton--sizeS`, `.spectrum-ActionButton--sizeL`, `.spectrum-ActionButton--sizeXL`. <br/>Used by `.spectrum-ActionButton:not(:has(.spectrum-ActionButton-label))`. <br/>Defaults to `var(--spectrum-component-edge-to-visual-only-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-actionbutton-downstate-perspective": {
+      "value": "24px",
+      "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton--sizeXS`, `.spectrum-ActionButton--sizeS`. <br/>Used by `.spectrum-ActionButton:active`. <br/>Defaults to `var(--spectrum-component-size-minimum-perspective-down)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-action-button-edge-to-hold-icon-extra-small": {
+      "value": "3px",
+      "description": "Used by `--spectrum-actionbutton-edge-to-hold-icon`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-action-button-edge-to-hold-icon-small": {
+      "value": "3px",
+      "description": "Used by `--spectrum-actionbutton-edge-to-hold-icon`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-action-button-edge-to-hold-icon-large": {
+      "value": "5px",
+      "description": "Used by `--spectrum-actionbutton-edge-to-hold-icon`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-action-button-edge-to-hold-icon-extra-large": {
+      "value": "6px",
+      "description": "Used by `--spectrum-actionbutton-edge-to-hold-icon`.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-sans-font-family-stack": {
+      "description": "Used by `.spectrum-ActionButton`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-line-height-100": {
+      "value": "1.3",
+      "description": "Used by `.spectrum-ActionButton`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-animation-duration-100": {
+      "description": "Used by `.spectrum-ActionButton`, `--spectrum-actionbutton-animation-duration`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-medium-size-medium": {
+      "value": "8px",
+      "description": "Used by `--spectrum-actionbutton-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-border-width-100": {
+      "value": "1px",
+      "description": "Used by `--spectrum-actionbutton-border-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-actionbutton-content-color-default`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-actionbutton-content-color-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-down": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-actionbutton-content-color-down`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-key-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-actionbutton-content-color-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-disabled-content-color": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Used by `--spectrum-actionbutton-content-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-gray-100": {
+      "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+      "description": "Used by `--spectrum-actionbutton-background-color-default`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-200": {
+      "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+      "description": "Used by `--spectrum-actionbutton-background-color-hover`, `--spectrum-actionbutton-background-color-down`, `--spectrum-actionbutton-background-color-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-disabled-background-color": {
+      "value": "var(--spectrum-gray-100)",
+      "description": "Used by `--spectrum-actionbutton-background-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-gap": {
+      "value": "2px",
+      "description": "Used by `--spectrum-actionbutton-focus-indicator-gap`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Used by `--spectrum-actionbutton-focus-indicator-thickness`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Used by `--spectrum-actionbutton-focus-indicator-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-visual-only-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-actionbutton-min-width`, `--spectrum-actionbutton-edge-to-visual-only`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-100": {
+      "value": "20px",
+      "description": "Used by `--spectrum-actionbutton-min-width`, `--spectrum-actionbutton-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-100": {
+      "value": "32px",
+      "description": "Used by `--spectrum-actionbutton-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-100": {
+      "value": "14px",
+      "description": "Used by `--spectrum-actionbutton-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-medium-font-weight": {
+      "value": "500",
+      "description": "Used by `--spectrum-actionbutton-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-default-font-style": {
+      "value": "normal",
+      "description": "Used by `--spectrum-actionbutton-font-style`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-actionbutton-text-to-visual`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-visual-100": {
+      "value": "10px",
+      "description": "Used by `--spectrum-actionbutton-edge-to-visual`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-text-100": {
+      "value": "12px",
+      "description": "Used by `--spectrum-actionbutton-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-downstate-height": {
+      "description": "Used by `--spectrum-actionbutton-downstate-perspective`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-downstate-width": {
+      "description": "Used by `--spectrum-actionbutton-downstate-perspective`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-size-width-ratio-down": {
+      "value": "0.3333",
+      "description": "Used by `--spectrum-actionbutton-downstate-perspective`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-logical-rotation": {
+      "value": "matrix(-1, 0, 0, 1, 0, 0)",
+      "description": "Defined in `.spectrum-ActionButton:dir(rtl)`. <br/>Used by `.spectrum-ActionButton-hold`. <br/>Defaults to `matrix(-1, 0, 0, 1, 0, 0)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-transparent-black-100": {
+      "value": "rgba(0, 0, 0, 0.09)",
+      "description": "Used by `--spectrum-actionbutton-background-color-default`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-transparent-black-200": {
+      "value": "rgba(0, 0, 0, 0.12)",
+      "description": "Used by `--spectrum-actionbutton-background-color-hover`, `--spectrum-actionbutton-background-color-down`, `--spectrum-actionbutton-background-color-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-disabled-static-black-background-color": {
+      "value": "rgba(0, 0, 0, 0.09)",
+      "description": "Used by `--spectrum-actionbutton-background-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-transparent-black-800": {
+      "value": "rgba(0, 0, 0, 0.84)",
+      "description": "Used by `--spectrum-actionbutton-content-color-default`, `--spectrum-actionbutton-background-color-default`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-transparent-black-900": {
+      "value": "rgba(0, 0, 0, 0.93)",
+      "description": "Used by `--spectrum-actionbutton-content-color-hover`, `--spectrum-actionbutton-content-color-down`, `--spectrum-actionbutton-content-color-focus`, `--spectrum-actionbutton-background-color-hover`, `--spectrum-actionbutton-background-color-down`, `--spectrum-actionbutton-background-color-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-disabled-static-black-content-color": {
+      "value": "rgba(0, 0, 0, 0.22)",
+      "description": "Used by `--spectrum-actionbutton-content-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-static-black-focus-indicator-color": {
+      "value": "rgb(0, 0, 0)",
+      "description": "Used by `--spectrum-actionbutton-focus-indicator-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-transparent-black-25": {
+      "value": "rgba(0, 0, 0, 0)",
+      "description": "Used by `--spectrum-actionbutton-background-color-disabled`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-transparent-white-100": {
+      "value": "rgba(255, 255, 255, 0.11)",
+      "description": "Used by `--spectrum-actionbutton-background-color-default`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-transparent-white-200": {
+      "value": "rgba(255, 255, 255, 0.14)",
+      "description": "Used by `--spectrum-actionbutton-background-color-hover`, `--spectrum-actionbutton-background-color-down`, `--spectrum-actionbutton-background-color-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-disabled-static-white-background-color": {
+      "value": "rgba(255, 255, 255, 0.11)",
+      "description": "Used by `--spectrum-actionbutton-background-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-transparent-white-800": {
+      "value": "rgba(255, 255, 255, 0.85)",
+      "description": "Used by `--spectrum-actionbutton-content-color-default`, `--spectrum-actionbutton-background-color-default`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-transparent-white-900": {
+      "value": "rgba(255, 255, 255, 0.94)",
+      "description": "Used by `--spectrum-actionbutton-content-color-hover`, `--spectrum-actionbutton-content-color-down`, `--spectrum-actionbutton-content-color-focus`, `--spectrum-actionbutton-background-color-hover`, `--spectrum-actionbutton-background-color-down`, `--spectrum-actionbutton-background-color-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-disabled-static-white-content-color": {
+      "value": "rgba(255, 255, 255, 0.21)",
+      "description": "Used by `--spectrum-actionbutton-content-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-static-white-focus-indicator-color": {
+      "value": "rgb(255, 255, 255)",
+      "description": "Used by `--spectrum-actionbutton-focus-indicator-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-transparent-white-25": {
+      "value": "rgba(255, 255, 255, 0)",
+      "description": "Used by `--spectrum-actionbutton-background-color-disabled`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-background-color-selected-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--mod-actionbutton-background-color-default`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-background-color-selected-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--mod-actionbutton-background-color-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-background-color-selected-down": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--mod-actionbutton-background-color-down`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-background-color-selected-key-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--mod-actionbutton-background-color-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-gray-25": {
+      "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+      "description": "Used by `--mod-actionbutton-content-color-default`, `--mod-actionbutton-content-color-hover`, `--mod-actionbutton-content-color-down`, `--mod-actionbutton-content-color-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-accent-background-color-default": {
+      "value": "var(--spectrum-accent-color-900)",
+      "description": "Used by `--mod-actionbutton-background-color-default`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-accent-background-color-hover": {
+      "value": "var(--spectrum-accent-color-1000)",
+      "description": "Used by `--mod-actionbutton-background-color-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-accent-background-color-down": {
+      "value": "var(--spectrum-accent-color-1000)",
+      "description": "Used by `--mod-actionbutton-background-color-down`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-accent-background-color-key-focus": {
+      "value": "var(--spectrum-accent-color-1000)",
+      "description": "Used by `--mod-actionbutton-background-color-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-white": {
+      "value": "rgb(255, 255, 255)",
+      "description": "Used by `--mod-actionbutton-content-color-default`, `--mod-actionbutton-content-color-hover`, `--mod-actionbutton-content-color-down`, `--mod-actionbutton-content-color-focus`, `--spectrum-actionbutton-content-color-default`, `--spectrum-actionbutton-content-color-hover`, `--spectrum-actionbutton-content-color-down`, `--spectrum-actionbutton-content-color-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-black": {
+      "value": "rgb(0, 0, 0)",
+      "description": "Used by `--spectrum-actionbutton-content-color-default`, `--spectrum-actionbutton-content-color-hover`, `--spectrum-actionbutton-content-color-down`, `--spectrum-actionbutton-content-color-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-medium-size-extra-small": {
+      "value": "6px",
+      "description": "Used by `--spectrum-actionbutton-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-visual-only-50": {
+      "value": "3px",
+      "description": "Used by `--spectrum-actionbutton-min-width`, `--spectrum-actionbutton-edge-to-visual-only`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-50": {
+      "value": "14px",
+      "description": "Used by `--spectrum-actionbutton-min-width`, `--spectrum-actionbutton-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-50": {
+      "value": "20px",
+      "description": "Used by `--spectrum-actionbutton-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-50": {
+      "value": "11px",
+      "description": "Used by `--spectrum-actionbutton-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-50": {
+      "value": "5px",
+      "description": "Used by `--spectrum-actionbutton-text-to-visual`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-visual-50": {
+      "value": "6px",
+      "description": "Used by `--spectrum-actionbutton-edge-to-visual`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-text-50": {
+      "value": "8px",
+      "description": "Used by `--spectrum-actionbutton-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-size-minimum-perspective-down": {
+      "value": "24px",
+      "description": "Used by `--spectrum-actionbutton-downstate-perspective`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-medium-size-small": {
+      "value": "7px",
+      "description": "Used by `--spectrum-actionbutton-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-visual-only-75": {
+      "value": "4px",
+      "description": "Used by `--spectrum-actionbutton-min-width`, `--spectrum-actionbutton-edge-to-visual-only`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-75": {
+      "value": "16px",
+      "description": "Used by `--spectrum-actionbutton-min-width`, `--spectrum-actionbutton-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-75": {
+      "value": "24px",
+      "description": "Used by `--spectrum-actionbutton-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-75": {
+      "value": "12px",
+      "description": "Used by `--spectrum-actionbutton-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-75": {
+      "value": "5px",
+      "description": "Used by `--spectrum-actionbutton-text-to-visual`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-visual-75": {
+      "value": "7px",
+      "description": "Used by `--spectrum-actionbutton-edge-to-visual`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-text-75": {
+      "value": "9px",
+      "description": "Used by `--spectrum-actionbutton-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-medium-size-large": {
+      "value": "9px",
+      "description": "Used by `--spectrum-actionbutton-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-visual-only-200": {
+      "value": "9px",
+      "description": "Used by `--spectrum-actionbutton-min-width`, `--spectrum-actionbutton-edge-to-visual-only`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-200": {
+      "value": "22px",
+      "description": "Used by `--spectrum-actionbutton-min-width`, `--spectrum-actionbutton-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-200": {
+      "value": "40px",
+      "description": "Used by `--spectrum-actionbutton-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-200": {
+      "value": "16px",
+      "description": "Used by `--spectrum-actionbutton-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-200": {
+      "value": "7px",
+      "description": "Used by `--spectrum-actionbutton-text-to-visual`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-visual-200": {
+      "value": "13px",
+      "description": "Used by `--spectrum-actionbutton-edge-to-visual`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-text-200": {
+      "value": "15px",
+      "description": "Used by `--spectrum-actionbutton-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-medium-size-extra-large": {
+      "value": "10px",
+      "description": "Used by `--spectrum-actionbutton-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-visual-only-300": {
+      "value": "11px",
+      "description": "Used by `--spectrum-actionbutton-min-width`, `--spectrum-actionbutton-edge-to-visual-only`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-300": {
+      "value": "26px",
+      "description": "Used by `--spectrum-actionbutton-min-width`, `--spectrum-actionbutton-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-300": {
+      "value": "48px",
+      "description": "Used by `--spectrum-actionbutton-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-300": {
+      "value": "18px",
+      "description": "Used by `--spectrum-actionbutton-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-300": {
+      "value": "8px",
+      "description": "Used by `--spectrum-actionbutton-text-to-visual`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-visual-300": {
+      "value": "15px",
+      "description": "Used by `--spectrum-actionbutton-edge-to-visual`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-text-300": {
+      "value": "18px",
+      "description": "Used by `--spectrum-actionbutton-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-size-difference-down": {
+      "value": "-2px",
+      "description": "Used by `.spectrum-ActionButton:active`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {
+    "mod-button-font-family": {
+      "category": "Passthrough"
+    },
+    "mod-button-line-height": {
+      "category": "Passthrough"
+    },
+    "mod-button-animation-duration": {
+      "category": "Passthrough"
+    }
+  },
+  "high-contrast": {
+    "highcontrast-actionbutton-border-color": {
+      "value": "var(--spectrum-actionbutton-border-color)",
+      "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.spectrum-ActionButton--quiet:disabled:not(.is-selected)`, `.spectrum-ActionButton:active, .spectrum-ActionButton:focus-visible`, `.spectrum-ActionButton:hover`, `.spectrum-ActionButton.is-selected`, `.spectrum-ActionButton:disabled`. <br/>Used by `.spectrum-ActionButton`. <br/>Defaults to `var(--spectrum-actionbutton-border-color)`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-actionbutton-background-color-default": {
+      "value": "var(--mod-actionbutton-background-color-down, var(--spectrum-actionbutton-background-color-down))",
+      "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.is-selected`. <br/>Used by `.spectrum-ActionButton`, `.spectrum-ActionButton:hover`, `.spectrum-ActionButton:focus-visible`, `.spectrum-ActionButton:active`. <br/>Defaults to `var(--mod-actionbutton-background-color-down, var(--spectrum-actionbutton-background-color-down))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-actionbutton-content-color-default": {
+      "value": "var(--mod-actionbutton-content-color-down, var(--spectrum-actionbutton-content-color-down))",
+      "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.is-selected`. <br/>Used by `.spectrum-ActionButton`, `.spectrum-ActionButton:hover`, `.spectrum-ActionButton:focus-visible`, `.spectrum-ActionButton:active`. <br/>Defaults to `var(--mod-actionbutton-content-color-down, var(--spectrum-actionbutton-content-color-down))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-actionbutton-background-color-disabled": {
+      "value": "var(--mod-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled))",
+      "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--quiet`. <br/>Used by `.spectrum-ActionButton.is-disabled, .spectrum-ActionButton:disabled`. <br/>Defaults to `var(--mod-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-actionbutton-content-color-disabled": {
+      "value": "var(--mod-actionbutton-content-color-disabled, var(--spectrum-actionbutton-content-color-disabled))",
+      "description": "Defined in `.spectrum-ActionButton`. <br/>Used by `.spectrum-ActionButton.is-disabled, .spectrum-ActionButton:disabled`. <br/>Defaults to `var(--mod-actionbutton-content-color-disabled, var(--spectrum-actionbutton-content-color-disabled))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-actionbutton-animation-duration": {
+      "value": "var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration))",
+      "description": "Defined in `.spectrum-ActionButton`. <br/>Used by `.spectrum-ActionButton`, `.spectrum-ActionButton:after`. <br/>Defaults to `var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration))`, if not set.",
+      "control": "text"
+    },
+    "highcontrast-actionbutton-focus-indicator-color": {
+      "value": "var(--mod-actionbutton-focus-indicator-color, var(--spectrum-actionbutton-focus-indicator-color))",
+      "description": "Defined in `.spectrum-ActionButton`. <br/>Used by `.spectrum-ActionButton:focus-visible:after`. <br/>Defaults to `var(--mod-actionbutton-focus-indicator-color, var(--spectrum-actionbutton-focus-indicator-color))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/actionbutton/stories/actionbutton.stories.js b/components/actionbutton/stories/actionbutton.stories.js
index d1599920baa..c4b7f097ae6 100644
--- a/components/actionbutton/stories/actionbutton.stories.js
+++ b/components/actionbutton/stories/actionbutton.stories.js
@@ -2,11 +2,13 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.
 import { Sizes, withDownStateDimensionCapture } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isActive, isDisabled, isEmphasized, isFocused, isHovered, isQuiet, isSelected, size, staticColor } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { ActionButtonGroup } from "./actionbutton.test.js";
 import { ActionButtonsWithIconOptions, IconOnlyOption, Template, TreatmentTemplate } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * The action button component represents an action a user can take.
  *
@@ -99,6 +101,10 @@ export default {
 		},
 		packageJson,
 		metadata,
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 		docs: {
 			story: {
 				height: "auto",
diff --git a/components/actionbutton/stories/template.js b/components/actionbutton/stories/template.js
index 942c3bccefa..aa444957325 100644
--- a/components/actionbutton/stories/template.js
+++ b/components/actionbutton/stories/template.js
@@ -43,6 +43,7 @@ import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
  */
 export const Template = ({
 	rootClass = "spectrum-ActionButton",
+	id = getRandomId("action-button"),
 	size = "m",
 	iconName,
 	iconSet = "workflow",
@@ -62,7 +63,6 @@ export const Template = ({
 	customStyles = {},
 	customIconClasses = [],
 	onclick,
-	id = getRandomId("actionbutton"),
 	testId,
 	role = "button",
 } = {}, context = {}) => {
diff --git a/components/actiongroup/dist/metadata.json b/components/actiongroup/dist/metadata.json
index 8d4d2ba86b7..0e2e5edd122 100644
--- a/components/actiongroup/dist/metadata.json
+++ b/components/actiongroup/dist/metadata.json
@@ -5,20 +5,20 @@
     ".spectrum-ActionGroup .spectrum-ActionGroup-item",
     ".spectrum-ActionGroup .spectrum-ActionGroup-item:focus-visible",
     ".spectrum-ActionGroup--compact",
-    ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet)",
-    ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item",
-    ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item",
-    ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child",
-    ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child",
     ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet)",
     ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item",
-    ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item",
     ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item .spectrum-ActionButton-label",
-    ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item.is-selected",
+    ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item",
     ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child",
     ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:focus-visible",
     ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:hover",
     ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child",
+    ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item.is-selected",
+    ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet)",
+    ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item",
+    ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item",
+    ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child",
+    ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child",
     ".spectrum-ActionGroup--justified .spectrum-ActionGroup-item",
     ".spectrum-ActionGroup--sizeL",
     ".spectrum-ActionGroup--sizeM",
@@ -28,31 +28,122 @@
     ".spectrum-ActionGroup--vertical",
     ".spectrum-ActionGroup:not(.spectrum-ActionGroup--vertical, .spectrum-ActionGroup--compact) .spectrum-ActionGroup-item"
   ],
-  "modifiers": [
-    "--mod-actiongroup-border-radius",
-    "--mod-actiongroup-border-radius-reset",
-    "--mod-actiongroup-button-spacing-reset",
-    "--mod-actiongroup-gap-size-compact",
-    "--mod-actiongroup-horizontal-spacing-compact",
-    "--mod-actiongroup-horizontal-spacing-regular",
-    "--mod-actiongroup-vertical-spacing-compact",
-    "--mod-actiongroup-vertical-spacing-regular"
-  ],
-  "component": [
-    "--spectrum-actiongroup-border-radius",
-    "--spectrum-actiongroup-border-radius-reset",
-    "--spectrum-actiongroup-button-spacing-reset",
-    "--spectrum-actiongroup-gap-size-compact",
-    "--spectrum-actiongroup-horizontal-spacing-compact",
-    "--spectrum-actiongroup-horizontal-spacing-regular",
-    "--spectrum-actiongroup-vertical-spacing-compact",
-    "--spectrum-actiongroup-vertical-spacing-regular"
-  ],
-  "global": [
-    "--spectrum-corner-radius-100",
-    "--spectrum-spacing-100",
-    "--spectrum-spacing-75"
-  ],
-  "passthroughs": ["--mod-actionbutton-focus-indicator-border-radius"],
-  "high-contrast": []
+  "modifiers": {
+    "mod-actiongroup-horizontal-spacing-regular": {
+      "description": "Used by `.spectrum-ActionGroup`. <br/>Defaults to `var(--spectrum-actiongroup-horizontal-spacing-regular)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-actiongroup-vertical-spacing-regular": {
+      "description": "Used by `.spectrum-ActionGroup--vertical`. <br/>Defaults to `var(--spectrum-actiongroup-vertical-spacing-regular)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-actiongroup-gap-size-compact": {
+      "description": "Used by `.spectrum-ActionGroup--compact`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet)`. <br/>Defaults to `var(--spectrum-actiongroup-gap-size-compact)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-actiongroup-border-radius-reset": {
+      "description": "Used by `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item`, `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item`. <br/>Defaults to `var(--spectrum-actiongroup-border-radius-reset)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-actiongroup-border-radius": {
+      "description": "Used by `--mod-actionbutton-focus-indicator-border-radius`, `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child`, `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child`. <br/>Defaults to `var(--spectrum-actiongroup-border-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-actiongroup-button-spacing-reset": {
+      "description": "Used by `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child`. <br/>Defaults to `var(--spectrum-actiongroup-button-spacing-reset)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-actiongroup-horizontal-spacing-compact": {
+      "description": "Used by `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item`, `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child`. <br/>Defaults to `var(--spectrum-actiongroup-horizontal-spacing-compact)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-actiongroup-vertical-spacing-compact": {
+      "description": "Used by `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child`. <br/>Defaults to `var(--spectrum-actiongroup-vertical-spacing-compact)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-actiongroup-gap-size-compact": {
+      "value": "0",
+      "description": "Defined in `.spectrum-ActionGroup`. <br/>Used by `.spectrum-ActionGroup--compact`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet)`. <br/>Defaults to `0`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-actiongroup-horizontal-spacing-compact": {
+      "value": "-1px",
+      "description": "Defined in `.spectrum-ActionGroup`. <br/>Used by `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item`, `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child`. <br/>Defaults to `-1px`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-actiongroup-vertical-spacing-compact": {
+      "value": "-1px",
+      "description": "Defined in `.spectrum-ActionGroup`. <br/>Used by `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child`. <br/>Defaults to `-1px`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-actiongroup-button-spacing-reset": {
+      "value": "0",
+      "description": "Defined in `.spectrum-ActionGroup`. <br/>Used by `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child`. <br/>Defaults to `0`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-actiongroup-border-radius-reset": {
+      "value": "0",
+      "description": "Defined in `.spectrum-ActionGroup`. <br/>Used by `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item`, `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item`. <br/>Defaults to `0`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-actiongroup-border-radius": {
+      "value": "4px",
+      "description": "Defined in `.spectrum-ActionGroup`. <br/>Used by `--mod-actionbutton-focus-indicator-border-radius`, `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child`, `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child`. <br/>Defaults to `var(--spectrum-corner-radius-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-actiongroup-horizontal-spacing-regular": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-ActionGroup--sizeS, .spectrum-ActionGroup--sizeXS`, `.spectrum-ActionGroup--sizeL, .spectrum-ActionGroup--sizeM, .spectrum-ActionGroup--sizeXL`. <br/>Used by `.spectrum-ActionGroup`. <br/>Defaults to `var(--spectrum-spacing-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-actiongroup-vertical-spacing-regular": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-ActionGroup--sizeS, .spectrum-ActionGroup--sizeXS`, `.spectrum-ActionGroup--sizeL, .spectrum-ActionGroup--sizeM, .spectrum-ActionGroup--sizeXL`. <br/>Used by `.spectrum-ActionGroup--vertical`. <br/>Defaults to `var(--spectrum-spacing-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-corner-radius-100": {
+      "value": "4px",
+      "description": "Used by `--spectrum-actiongroup-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-75": {
+      "value": "4px",
+      "description": "Used by `--spectrum-actiongroup-horizontal-spacing-regular`, `--spectrum-actiongroup-vertical-spacing-regular`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-100": {
+      "value": "8px",
+      "description": "Used by `--spectrum-actiongroup-horizontal-spacing-regular`, `--spectrum-actiongroup-vertical-spacing-regular`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {
+    "mod-actionbutton-focus-indicator-border-radius": {
+      "category": "Passthrough"
+    }
+  },
+  "high-contrast": {}
 }
diff --git a/components/actiongroup/stories/actiongroup.stories.js b/components/actiongroup/stories/actiongroup.stories.js
index 0fd9731f55b..17d146ec084 100644
--- a/components/actiongroup/stories/actiongroup.stories.js
+++ b/components/actiongroup/stories/actiongroup.stories.js
@@ -2,11 +2,13 @@ import { default as ActionButton } from "@spectrum-css/actionbutton/stories/acti
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { ActionGroups } from "./actiongroup.test.js";
 import { OverflowOption, Template, TreatmentTemplate } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * An action group is a grouping of [action buttons](/docs/components-action-button--docs) that are related to each other.
  */
@@ -102,6 +104,10 @@ export default {
 		status: {
 			type: "migrated",
 		},
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 	tags: ["migrated"],
 };
diff --git a/components/actiongroup/stories/template.js b/components/actiongroup/stories/template.js
index 25d8f25f4e0..84848f41671 100644
--- a/components/actiongroup/stories/template.js
+++ b/components/actiongroup/stories/template.js
@@ -1,7 +1,8 @@
 import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js";
-import { Container, renderContent } from "@spectrum-css/preview/decorators";
+import { Container, getRandomId, renderContent } from "@spectrum-css/preview/decorators";
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { capitalize } from "lodash-es";
 
@@ -9,6 +10,7 @@ import "../index.css";
 
 export const Template = ({
 	rootClass = "spectrum-ActionGroup",
+	id = getRandomId("accordion-group"),
 	size = "m",
 	areQuiet = false,
 	areEmphasized = false,
@@ -38,6 +40,7 @@ export const Template = ({
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}
 			style=${styleMap(customStyles)}
+			id=${ifDefined(id)}
 		>
 			${renderContent(content, {
 				callback: ActionButton,
diff --git a/components/actionmenu/stories/actionmenu.stories.js b/components/actionmenu/stories/actionmenu.stories.js
index b3cab764ac2..c5ff951ae78 100644
--- a/components/actionmenu/stories/actionmenu.stories.js
+++ b/components/actionmenu/stories/actionmenu.stories.js
@@ -4,9 +4,12 @@ import { default as Menu } from "@spectrum-css/menu/stories/menu.stories.js";
 import { default as Popover } from "@spectrum-css/popover/stories/popover.stories.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isOpen } from "@spectrum-css/preview/types";
-import packageJson from "../package.json";
 import { ActionMenuGroup } from "./actionmenu.test.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * The action menu component is an action button with a popover. The `is-selected` class should be applied to the button when the menu is open. Note that the accessibility roles are different for an action menu compared to a normal menu.
  */
@@ -46,6 +49,10 @@ export default {
 			],
 		},
 		packageJson,
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 		docs: {
 			story: {
 				height: "200px",
diff --git a/components/actionmenu/stories/template.js b/components/actionmenu/stories/template.js
index c4bc29768d9..19b6e722612 100644
--- a/components/actionmenu/stories/template.js
+++ b/components/actionmenu/stories/template.js
@@ -4,7 +4,7 @@ import { Template as Popover } from "@spectrum-css/popover/stories/template.js";
 import { getRandomId } from "@spectrum-css/preview/decorators";
 
 export const Template = ({
-	id = getRandomId("actionmenu"),
+	id = getRandomId("action-menu"),
 	testId,
 	triggerId = getRandomId("actionmenu-trigger"),
 	customClasses = [],
diff --git a/components/alertbanner/dist/metadata.json b/components/alertbanner/dist/metadata.json
index deed56dd2c9..a6b08d96c46 100644
--- a/components/alertbanner/dist/metadata.json
+++ b/components/alertbanner/dist/metadata.json
@@ -8,90 +8,397 @@
     ".spectrum-AlertBanner-content",
     ".spectrum-AlertBanner-icon",
     ".spectrum-AlertBanner-text",
-    ".spectrum-AlertBanner.is-open",
     ".spectrum-AlertBanner:has(.spectrum-CloseButton) .spectrum-AlertBanner-body",
     ".spectrum-AlertBanner:lang(ja)",
     ".spectrum-AlertBanner:lang(ko)",
-    ".spectrum-AlertBanner:lang(zh)"
+    ".spectrum-AlertBanner:lang(zh)",
+    ".spectrum-AlertBanner.is-open"
   ],
-  "modifiers": [
-    "--mod-alert-banner-background",
-    "--mod-alert-banner-block-edge-to-button",
-    "--mod-alert-banner-bottom-to-text",
-    "--mod-alert-banner-close-button-to-content",
-    "--mod-alert-banner-close-button-to-inline-end",
-    "--mod-alert-banner-font-color",
-    "--mod-alert-banner-font-family",
-    "--mod-alert-banner-font-size",
-    "--mod-alert-banner-icon-size",
-    "--mod-alert-banner-icon-to-text",
-    "--mod-alert-banner-informative-background",
-    "--mod-alert-banner-inline-end-to-content",
-    "--mod-alert-banner-inline-size",
-    "--mod-alert-banner-inline-start-to-content",
-    "--mod-alert-banner-line-height",
-    "--mod-alert-banner-max-inline-size",
-    "--mod-alert-banner-min-height",
-    "--mod-alert-banner-negative-background",
-    "--mod-alert-banner-neutral-background",
-    "--mod-alert-banner-text-margin-block-end",
-    "--mod-alert-banner-text-margin-block-start",
-    "--mod-alert-banner-text-to-button-horizontal",
-    "--mod-alert-banner-text-to-button-vertical",
-    "--mod-alert-banner-top-to-close-button",
-    "--mod-alert-banner-top-to-icon",
-    "--mod-alert-banner-top-to-text"
-  ],
-  "component": [
-    "--spectrum-alert-banner-background",
-    "--spectrum-alert-banner-block-edge-to-button",
-    "--spectrum-alert-banner-bottom-to-text",
-    "--spectrum-alert-banner-close-button-spacing",
-    "--spectrum-alert-banner-close-button-to-content",
-    "--spectrum-alert-banner-close-button-to-inline-end",
-    "--spectrum-alert-banner-font-color",
-    "--spectrum-alert-banner-font-family",
-    "--spectrum-alert-banner-font-size",
-    "--spectrum-alert-banner-icon-size",
-    "--spectrum-alert-banner-icon-to-text",
-    "--spectrum-alert-banner-inline-end-to-content",
-    "--spectrum-alert-banner-inline-size",
-    "--spectrum-alert-banner-inline-start-to-content",
-    "--spectrum-alert-banner-line-height",
-    "--spectrum-alert-banner-max-inline-size",
-    "--spectrum-alert-banner-min-height",
-    "--spectrum-alert-banner-minimum-height",
-    "--spectrum-alert-banner-text-margin-block-end",
-    "--spectrum-alert-banner-text-margin-block-start",
-    "--spectrum-alert-banner-text-to-button-horizontal",
-    "--spectrum-alert-banner-text-to-button-vertical",
-    "--spectrum-alert-banner-top-to-text",
-    "--spectrum-alert-banner-top-to-workflow-icon",
-    "--spectrum-alert-banner-width"
-  ],
-  "global": [
-    "--spectrum-border-width-100",
-    "--spectrum-cjk-line-height-100",
-    "--spectrum-font-size-100",
-    "--spectrum-informative-background-color-default",
-    "--spectrum-line-height-100",
-    "--spectrum-negative-background-color-default",
-    "--spectrum-neutral-subdued-background-color-default",
-    "--spectrum-sans-font-family-stack",
-    "--spectrum-spacing-200",
-    "--spectrum-spacing-300",
-    "--spectrum-text-to-visual-300",
-    "--spectrum-white",
-    "--spectrum-workflow-icon-size-100"
-  ],
-  "passthroughs": [
-    "--mod-closebutton-align-self",
-    "--mod-closebutton-margin-inline",
-    "--mod-closebutton-margin-top",
-    "--mod-icon-size"
-  ],
-  "high-contrast": [
-    "--highcontrast-alert-banner-border-color",
-    "--highcontrast-alert-banner-border-width"
-  ]
+  "modifiers": {
+    "mod-alert-banner-top-to-text": {
+      "description": "Used by `--spectrum-alert-banner-text-margin-block-start`. <br/>Defaults to `var(--spectrum-alert-banner-top-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-alert-banner-block-edge-to-button": {
+      "description": "Used by `--spectrum-alert-banner-text-margin-block-start`, `--spectrum-alert-banner-text-margin-block-end`, `.spectrum-AlertBanner-body`, `.spectrum-AlertBanner-icon`. <br/>Defaults to `var(--spectrum-alert-banner-block-edge-to-button)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-alert-banner-bottom-to-text": {
+      "description": "Used by `--spectrum-alert-banner-text-margin-block-end`. <br/>Defaults to `var(--spectrum-alert-banner-bottom-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-alert-banner-neutral-background": {
+      "description": "Used by `--spectrum-alert-banner-background`. <br/>Defaults to `var(--spectrum-neutral-subdued-background-color-default)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-alert-banner-close-button-to-content": {
+      "description": "Used by `--mod-closebutton-margin-inline`. <br/>Defaults to `var(--spectrum-alert-banner-close-button-to-content)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-alert-banner-close-button-to-inline-end": {
+      "description": "Used by `--mod-closebutton-margin-inline`. <br/>Defaults to `var(--spectrum-alert-banner-close-button-to-inline-end)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-alert-banner-top-to-close-button": {
+      "description": "Used by `--mod-closebutton-margin-top`. <br/>Defaults to `var(--spectrum-alert-banner-block-edge-to-button)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-alert-banner-informative-background": {
+      "description": "Used by `--spectrum-alert-banner-background`. <br/>Defaults to `var(--spectrum-informative-background-color-default)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-alert-banner-negative-background": {
+      "description": "Used by `--spectrum-alert-banner-background`. <br/>Defaults to `var(--spectrum-negative-background-color-default)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-alert-banner-inline-size": {
+      "description": "Used by `.spectrum-AlertBanner`. <br/>Defaults to `var(--spectrum-alert-banner-inline-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-alert-banner-max-inline-size": {
+      "description": "Used by `.spectrum-AlertBanner`. <br/>Defaults to `var(--spectrum-alert-banner-max-inline-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-alert-banner-min-height": {
+      "description": "Used by `.spectrum-AlertBanner`. <br/>Defaults to `var(--spectrum-alert-banner-min-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-alert-banner-font-size": {
+      "description": "Used by `.spectrum-AlertBanner`. <br/>Defaults to `var(--spectrum-alert-banner-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-alert-banner-font-family": {
+      "description": "Used by `.spectrum-AlertBanner`. <br/>Defaults to `var(--spectrum-alert-banner-font-family)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-alert-banner-line-height": {
+      "description": "Used by `.spectrum-AlertBanner`. <br/>Defaults to `var(--spectrum-alert-banner-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-alert-banner-font-color": {
+      "description": "Used by `.spectrum-AlertBanner`. <br/>Defaults to `var(--spectrum-alert-banner-font-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-alert-banner-background": {
+      "description": "Used by `.spectrum-AlertBanner`. <br/>Defaults to `var(--spectrum-alert-banner-background)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-alert-banner-text-to-button-horizontal": {
+      "description": "Used by `.spectrum-AlertBanner-body`. <br/>Defaults to `var(--spectrum-alert-banner-text-to-button-horizontal)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-alert-banner-text-to-button-vertical": {
+      "description": "Used by `.spectrum-AlertBanner-body`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-alert-banner-inline-start-to-content": {
+      "description": "Used by `.spectrum-AlertBanner-body`. <br/>Defaults to `var(--spectrum-alert-banner-inline-start-to-content)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-alert-banner-inline-end-to-content": {
+      "description": "Used by `.spectrum-AlertBanner-body`. <br/>Defaults to `var(--spectrum-alert-banner-inline-end-to-content)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-alert-banner-icon-size": {
+      "description": "Used by `--mod-icon-size`. <br/>Defaults to `var(--spectrum-alert-banner-icon-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-alert-banner-top-to-icon": {
+      "description": "Used by `.spectrum-AlertBanner-icon`. <br/>Defaults to `var(--spectrum-alert-banner-top-to-workflow-icon)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-alert-banner-icon-to-text": {
+      "description": "Used by `.spectrum-AlertBanner-icon`. <br/>Defaults to `var(--spectrum-alert-banner-icon-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-alert-banner-text-margin-block-start": {
+      "description": "Used by `.spectrum-AlertBanner-text`. <br/>Defaults to `var(--spectrum-alert-banner-text-margin-block-start)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-alert-banner-text-margin-block-end": {
+      "description": "Used by `.spectrum-AlertBanner-text`. <br/>Defaults to `var(--spectrum-alert-banner-text-margin-block-end)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-alert-banner-min-height": {
+      "value": "56px",
+      "description": "Defined in `.spectrum-AlertBanner`. <br/>Used by `.spectrum-AlertBanner`. <br/>Defaults to `var(--spectrum-alert-banner-minimum-height)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-banner-minimum-height": {
+      "value": "56px",
+      "description": "Used by `--spectrum-alert-banner-min-height`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-banner-max-inline-size": {
+      "value": "832px",
+      "description": "Defined in `.spectrum-AlertBanner`. <br/>Used by `.spectrum-AlertBanner`. <br/>Defaults to `var(--spectrum-alert-banner-width)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-banner-width": {
+      "value": "832px",
+      "description": "Used by `--spectrum-alert-banner-max-inline-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-banner-inline-size": {
+      "value": "auto",
+      "description": "Defined in `.spectrum-AlertBanner`. <br/>Used by `.spectrum-AlertBanner`. <br/>Defaults to `auto`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-banner-font-size": {
+      "value": "14px",
+      "description": "Defined in `.spectrum-AlertBanner`. <br/>Used by `.spectrum-AlertBanner`. <br/>Defaults to `var(--spectrum-font-size-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-banner-line-height": {
+      "value": "1.5",
+      "description": "Defined in `.spectrum-AlertBanner`, `.spectrum-AlertBanner:lang(ja), .spectrum-AlertBanner:lang(ko), .spectrum-AlertBanner:lang(zh)`. <br/>Used by `.spectrum-AlertBanner`. <br/>Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-banner-font-family": {
+      "value": "var(--spectrum-sans-font-family-stack)",
+      "description": "Defined in `.spectrum-AlertBanner`. <br/>Used by `.spectrum-AlertBanner`. <br/>Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-banner-icon-size": {
+      "value": "20px",
+      "description": "Defined in `.spectrum-AlertBanner`. <br/>Used by `--mod-icon-size`. <br/>Defaults to `var(--spectrum-workflow-icon-size-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-banner-icon-to-text": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-AlertBanner`. <br/>Used by `.spectrum-AlertBanner-icon`. <br/>Defaults to `var(--spectrum-text-to-visual-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-banner-inline-start-to-content": {
+      "value": "16px",
+      "description": "Defined in `.spectrum-AlertBanner`. <br/>Used by `.spectrum-AlertBanner-body`. <br/>Defaults to `var(--spectrum-spacing-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-banner-inline-end-to-content": {
+      "value": "16px",
+      "description": "Defined in `.spectrum-AlertBanner`. <br/>Used by `.spectrum-AlertBanner-body`. <br/>Defaults to `var(--spectrum-spacing-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-banner-text-to-button-horizontal": {
+      "value": "16px",
+      "description": "Defined in `.spectrum-AlertBanner`. <br/>Used by `.spectrum-AlertBanner-body`. <br/>Defaults to `var(--spectrum-spacing-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-banner-block-edge-to-button": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-AlertBanner`. <br/>Used by `--spectrum-alert-banner-text-margin-block-start`, `--spectrum-alert-banner-text-margin-block-end`, `--mod-closebutton-margin-top`, `.spectrum-AlertBanner-body`, `.spectrum-AlertBanner-icon`. <br/>Defaults to `var(--spectrum-spacing-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-banner-close-button-to-content": {
+      "value": "16px",
+      "description": "Defined in `.spectrum-AlertBanner`. <br/>Used by `--mod-closebutton-margin-inline`. <br/>Defaults to `var(--spectrum-spacing-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-banner-close-button-to-inline-end": {
+      "value": "var(--spectrum-alert-banner-close-button-spacing)",
+      "description": "Defined in `.spectrum-AlertBanner`. <br/>Used by `--mod-closebutton-margin-inline`. <br/>Defaults to `var(--spectrum-alert-banner-close-button-spacing)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-banner-close-button-spacing": {
+      "description": "Used by `--spectrum-alert-banner-close-button-to-inline-end`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-banner-text-margin-block-start": {
+      "value": "max(0px, var(--mod-alert-banner-top-to-text, var(--spectrum-alert-banner-top-to-text)) - var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button)))",
+      "description": "Defined in `.spectrum-AlertBanner`. <br/>Used by `.spectrum-AlertBanner-text`. <br/>Defaults to `max(0px, var(--mod-alert-banner-top-to-text, var(--spectrum-alert-banner-top-to-text)) - var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button)))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-banner-top-to-text": {
+      "value": "18px",
+      "description": "Used by `--spectrum-alert-banner-text-margin-block-start`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-banner-text-margin-block-end": {
+      "value": "max(0px, var(--mod-alert-banner-bottom-to-text, var(--spectrum-alert-banner-bottom-to-text)) - var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button)))",
+      "description": "Defined in `.spectrum-AlertBanner`. <br/>Used by `.spectrum-AlertBanner-body`, `.spectrum-AlertBanner-text`. <br/>Defaults to `max(0px, var(--mod-alert-banner-bottom-to-text, var(--spectrum-alert-banner-bottom-to-text)) - var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button)))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-banner-bottom-to-text": {
+      "value": "20px",
+      "description": "Used by `--spectrum-alert-banner-text-margin-block-end`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-banner-background": {
+      "value": "var(--mod-alert-banner-negative-background, var(--spectrum-negative-background-color-default))",
+      "description": "Defined in `.spectrum-AlertBanner`, `.spectrum-AlertBanner--info`, `.spectrum-AlertBanner--negative`. <br/>Used by `.spectrum-AlertBanner`. <br/>Defaults to `var(--mod-alert-banner-negative-background, var(--spectrum-negative-background-color-default))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-banner-font-color": {
+      "value": "rgb(255, 255, 255)",
+      "description": "Defined in `.spectrum-AlertBanner`. <br/>Used by `.spectrum-AlertBanner`. <br/>Defaults to `var(--spectrum-white)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-alert-banner-text-to-button-vertical": {
+      "description": "Used by `.spectrum-AlertBanner-body`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-banner-top-to-workflow-icon": {
+      "value": "18px",
+      "description": "Used by `.spectrum-AlertBanner-icon`.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-font-size-100": {
+      "value": "14px",
+      "description": "Used by `--spectrum-alert-banner-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-line-height-100": {
+      "value": "1.3",
+      "description": "Used by `--spectrum-alert-banner-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-sans-font-family-stack": {
+      "description": "Used by `--spectrum-alert-banner-font-family`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-100": {
+      "value": "20px",
+      "description": "Used by `--spectrum-alert-banner-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-300": {
+      "value": "8px",
+      "description": "Used by `--spectrum-alert-banner-icon-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-300": {
+      "value": "16px",
+      "description": "Used by `--spectrum-alert-banner-inline-start-to-content`, `--spectrum-alert-banner-inline-end-to-content`, `--spectrum-alert-banner-text-to-button-horizontal`, `--spectrum-alert-banner-close-button-to-content`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-200": {
+      "value": "12px",
+      "description": "Used by `--spectrum-alert-banner-block-edge-to-button`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-subdued-background-color-default": {
+      "value": "var(--spectrum-gray-700)",
+      "description": "Used by `--spectrum-alert-banner-background`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-white": {
+      "value": "rgb(255, 255, 255)",
+      "description": "Used by `--spectrum-alert-banner-font-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-cjk-line-height-100": {
+      "value": "1.5",
+      "description": "Used by `--spectrum-alert-banner-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-informative-background-color-default": {
+      "value": "var(--spectrum-informative-color-900)",
+      "description": "Used by `--spectrum-alert-banner-background`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-background-color-default": {
+      "value": "var(--spectrum-negative-color-900)",
+      "description": "Used by `--spectrum-alert-banner-background`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-border-width-100": {
+      "value": "1px",
+      "description": "Used by `--highcontrast-alert-banner-border-width`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {
+    "mod-closebutton-margin-inline": {
+      "category": "Passthrough"
+    },
+    "mod-closebutton-margin-top": {
+      "category": "Passthrough"
+    },
+    "mod-closebutton-align-self": {
+      "category": "Passthrough"
+    },
+    "mod-icon-size": {
+      "category": "Passthrough"
+    }
+  },
+  "high-contrast": {
+    "highcontrast-alert-banner-border-width": {
+      "value": "var(--spectrum-border-width-100)",
+      "description": "Defined in `.spectrum-AlertBanner`. <br/>Used by `.spectrum-AlertBanner`. <br/>Defaults to `var(--spectrum-border-width-100)`, if not set.",
+      "control": "text"
+    },
+    "highcontrast-alert-banner-border-color": {
+      "value": "CanvasText",
+      "description": "Defined in `.spectrum-AlertBanner`. <br/>Used by `.spectrum-AlertBanner`. <br/>Defaults to `CanvasText`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/alertbanner/stories/alertbanner.stories.js b/components/alertbanner/stories/alertbanner.stories.js
index c6d638008c2..47d9b7dfaf7 100644
--- a/components/alertbanner/stories/alertbanner.stories.js
+++ b/components/alertbanner/stories/alertbanner.stories.js
@@ -1,10 +1,12 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isOpen } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { AlertBannerGroup } from "./alertbanner.test.js";
 import { ActionableOptionsTemplate, Template, TextOverflowTemplate } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * The alert banner shows pressing and high-signal messages, such as system alerts. It is meant to be noticed and prompt users to take action.
  * It should occupy all of the available horizontal space until it reaches its maximum allowed width.
@@ -78,6 +80,10 @@ export default {
 		status: {
 			type: "migrated",
 		},
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 	tags: ["migrated"],
 };
diff --git a/components/alertbanner/stories/template.js b/components/alertbanner/stories/template.js
index ec0278583fd..a12aa218e9a 100644
--- a/components/alertbanner/stories/template.js
+++ b/components/alertbanner/stories/template.js
@@ -12,7 +12,7 @@ import "../index.css";
 
 export const Template = ({
 	rootClass = "spectrum-AlertBanner",
-	id = getRandomId("alertbanner"),
+	id = getRandomId("alert-banner"),
 	testId,
 	isOpen = true,
 	text,
@@ -37,7 +37,7 @@ export const Template = ({
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}
 			style=${styleMap(customStyles)}
-			id=${id}
+			id=${ifDefined(id)}
 			data-testid=${ifDefined(testId)}
 		>
 			<div class=${classMap({
diff --git a/components/alertdialog/dist/metadata.json b/components/alertdialog/dist/metadata.json
index 7510ea9f7aa..ad845218d4a 100644
--- a/components/alertdialog/dist/metadata.json
+++ b/components/alertdialog/dist/metadata.json
@@ -11,79 +11,396 @@
     ".spectrum-AlertDialog-header",
     ".spectrum-AlertDialog-heading"
   ],
-  "modifiers": [
-    "--mod-alert-dialog-background-color",
-    "--mod-alert-dialog-body-color",
-    "--mod-alert-dialog-body-font-family",
-    "--mod-alert-dialog-body-font-style",
-    "--mod-alert-dialog-body-font-weight",
-    "--mod-alert-dialog-body-line-height",
-    "--mod-alert-dialog-corner-radius",
-    "--mod-alert-dialog-description-content-size",
-    "--mod-alert-dialog-description-to-button-group",
-    "--mod-alert-dialog-edge-to-content",
-    "--mod-alert-dialog-error-icon-color",
-    "--mod-alert-dialog-heading-size",
-    "--mod-alert-dialog-icon-size",
-    "--mod-alert-dialog-max-width",
-    "--mod-alert-dialog-min-width",
-    "--mod-alert-dialog-minimum-title-to-icon",
-    "--mod-alert-dialog-title-color",
-    "--mod-alert-dialog-title-font-family",
-    "--mod-alert-dialog-title-font-style",
-    "--mod-alert-dialog-title-font-weight",
-    "--mod-alert-dialog-title-line-height",
-    "--mod-alert-dialog-title-to-description",
-    "--mod-alert-dialog-warning-icon-color"
-  ],
-  "component": [
-    "--spectrum-alert-dialog-background-color",
-    "--spectrum-alert-dialog-body-color",
-    "--spectrum-alert-dialog-body-font-family",
-    "--spectrum-alert-dialog-body-font-style",
-    "--spectrum-alert-dialog-body-font-weight",
-    "--spectrum-alert-dialog-body-line-height",
-    "--spectrum-alert-dialog-corner-radius",
-    "--spectrum-alert-dialog-description-content-size",
-    "--spectrum-alert-dialog-description-font-size",
-    "--spectrum-alert-dialog-description-to-button-group",
-    "--spectrum-alert-dialog-edge-to-content",
-    "--spectrum-alert-dialog-error-icon-color",
-    "--spectrum-alert-dialog-heading-size",
-    "--spectrum-alert-dialog-icon-size",
-    "--spectrum-alert-dialog-max-width",
-    "--spectrum-alert-dialog-maximum-width",
-    "--spectrum-alert-dialog-min-width",
-    "--spectrum-alert-dialog-minimum-title-to-icon",
-    "--spectrum-alert-dialog-minimum-width",
-    "--spectrum-alert-dialog-title-color",
-    "--spectrum-alert-dialog-title-font-family",
-    "--spectrum-alert-dialog-title-font-size",
-    "--spectrum-alert-dialog-title-font-style",
-    "--spectrum-alert-dialog-title-font-weight",
-    "--spectrum-alert-dialog-title-line-height",
-    "--spectrum-alert-dialog-title-to-description",
-    "--spectrum-alert-dialog-warning-icon-color"
-  ],
-  "global": [
-    "--spectrum-background-layer-2-color",
-    "--spectrum-body-color",
-    "--spectrum-body-sans-serif-font-style",
-    "--spectrum-body-sans-serif-font-weight",
-    "--spectrum-corner-radius-extra-large-default",
-    "--spectrum-heading-color",
-    "--spectrum-heading-line-height",
-    "--spectrum-heading-sans-serif-font-style",
-    "--spectrum-heading-sans-serif-font-weight",
-    "--spectrum-line-height-200",
-    "--spectrum-negative-visual-color",
-    "--spectrum-notice-visual-color",
-    "--spectrum-sans-font-family-stack",
-    "--spectrum-spacing-100",
-    "--spectrum-spacing-300",
-    "--spectrum-spacing-500",
-    "--spectrum-workflow-icon-size-100"
-  ],
-  "passthroughs": ["--mod-buttongroup-justify-content", "--mod-icon-color"],
-  "high-contrast": []
+  "modifiers": {
+    "mod-alert-dialog-min-width": {
+      "description": "Used by `.spectrum-AlertDialog`. <br/>Defaults to `var(--spectrum-alert-dialog-min-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-alert-dialog-max-width": {
+      "description": "Used by `.spectrum-AlertDialog`. <br/>Defaults to `var(--spectrum-alert-dialog-max-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-alert-dialog-background-color": {
+      "description": "Used by `.spectrum-AlertDialog`. <br/>Defaults to `var(--spectrum-alert-dialog-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-alert-dialog-edge-to-content": {
+      "description": "Used by `.spectrum-AlertDialog`. <br/>Defaults to `var(--spectrum-alert-dialog-edge-to-content)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-alert-dialog-corner-radius": {
+      "description": "Used by `.spectrum-AlertDialog`. <br/>Defaults to `var(--spectrum-alert-dialog-corner-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-alert-dialog-icon-size": {
+      "description": "Used by `.spectrum-AlertDialog .spectrum-Icon`. <br/>Defaults to `var(--spectrum-alert-dialog-icon-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-alert-dialog-warning-icon-color": {
+      "description": "Used by `--mod-icon-color`. <br/>Defaults to `var(--spectrum-alert-dialog-warning-icon-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-alert-dialog-error-icon-color": {
+      "description": "Used by `--mod-icon-color`. <br/>Defaults to `var(--spectrum-alert-dialog-error-icon-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-alert-dialog-minimum-title-to-icon": {
+      "description": "Used by `.spectrum-AlertDialog-header`. <br/>Defaults to `var(--spectrum-alert-dialog-minimum-title-to-icon)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-alert-dialog-title-to-description": {
+      "description": "Used by `.spectrum-AlertDialog-header`. <br/>Defaults to `var(--spectrum-alert-dialog-title-to-description)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-alert-dialog-title-font-family": {
+      "description": "Used by `.spectrum-AlertDialog-heading`. <br/>Defaults to `var(--spectrum-alert-dialog-title-font-family)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-alert-dialog-title-font-weight": {
+      "description": "Used by `.spectrum-AlertDialog-heading`. <br/>Defaults to `var(--spectrum-alert-dialog-title-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-alert-dialog-title-font-style": {
+      "description": "Used by `.spectrum-AlertDialog-heading`. <br/>Defaults to `var(--spectrum-alert-dialog-title-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-alert-dialog-heading-size": {
+      "description": "Used by `.spectrum-AlertDialog-heading`. <br/>Defaults to `var(--spectrum-alert-dialog-heading-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-alert-dialog-title-line-height": {
+      "description": "Used by `.spectrum-AlertDialog-heading`. <br/>Defaults to `var(--spectrum-alert-dialog-title-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-alert-dialog-title-color": {
+      "description": "Used by `.spectrum-AlertDialog-heading`. <br/>Defaults to `var(--spectrum-alert-dialog-title-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-alert-dialog-body-font-family": {
+      "description": "Used by `.spectrum-AlertDialog-content`. <br/>Defaults to `var(--spectrum-alert-dialog-body-font-family)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-alert-dialog-body-font-weight": {
+      "description": "Used by `.spectrum-AlertDialog-content`. <br/>Defaults to `var(--spectrum-alert-dialog-body-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-alert-dialog-body-font-style": {
+      "description": "Used by `.spectrum-AlertDialog-content`. <br/>Defaults to `var(--spectrum-alert-dialog-body-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-alert-dialog-description-content-size": {
+      "description": "Used by `.spectrum-AlertDialog-content`. <br/>Defaults to `var(--spectrum-alert-dialog-description-content-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-alert-dialog-body-line-height": {
+      "description": "Used by `.spectrum-AlertDialog-content`. <br/>Defaults to `var(--spectrum-alert-dialog-body-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-alert-dialog-body-color": {
+      "description": "Used by `.spectrum-AlertDialog-content`. <br/>Defaults to `var(--spectrum-alert-dialog-body-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-alert-dialog-description-to-button-group": {
+      "description": "Used by `.spectrum-AlertDialog-content`. <br/>Defaults to `var(--spectrum-alert-dialog-description-to-button-group)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-alert-dialog-min-width": {
+      "value": "288px",
+      "description": "Defined in `.spectrum-AlertDialog`. <br/>Used by `.spectrum-AlertDialog`. <br/>Defaults to `var(--spectrum-alert-dialog-minimum-width)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-dialog-minimum-width": {
+      "value": "288px",
+      "description": "Used by `--spectrum-alert-dialog-min-width`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-dialog-max-width": {
+      "value": "480px",
+      "description": "Defined in `.spectrum-AlertDialog`. <br/>Used by `.spectrum-AlertDialog`. <br/>Defaults to `var(--spectrum-alert-dialog-maximum-width)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-dialog-maximum-width": {
+      "value": "480px",
+      "description": "Used by `--spectrum-alert-dialog-max-width`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-dialog-icon-size": {
+      "value": "20px",
+      "description": "Defined in `.spectrum-AlertDialog`. <br/>Used by `.spectrum-AlertDialog .spectrum-Icon`. <br/>Defaults to `var(--spectrum-workflow-icon-size-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-dialog-corner-radius": {
+      "value": "16px",
+      "description": "Defined in `.spectrum-AlertDialog`. <br/>Used by `.spectrum-AlertDialog`. <br/>Defaults to `var(--spectrum-corner-radius-extra-large-default)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-dialog-warning-icon-color": {
+      "value": "var(--spectrum-notice-color-800)",
+      "description": "Defined in `.spectrum-AlertDialog`. <br/>Used by `--mod-icon-color`. <br/>Defaults to `var(--spectrum-notice-visual-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-alert-dialog-error-icon-color": {
+      "value": "var(--spectrum-negative-color-800)",
+      "description": "Defined in `.spectrum-AlertDialog`. <br/>Used by `--mod-icon-color`. <br/>Defaults to `var(--spectrum-negative-visual-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-alert-dialog-background-color": {
+      "value": "var(--spectrum-gray-25)",
+      "description": "Defined in `.spectrum-AlertDialog`. <br/>Used by `.spectrum-AlertDialog`. <br/>Defaults to `var(--spectrum-background-layer-2-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-alert-dialog-title-font-family": {
+      "value": "var(--spectrum-sans-font-family-stack)",
+      "description": "Defined in `.spectrum-AlertDialog`. <br/>Used by `.spectrum-AlertDialog-heading`. <br/>Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-dialog-title-font-weight": {
+      "value": "800",
+      "description": "Defined in `.spectrum-AlertDialog`. <br/>Used by `.spectrum-AlertDialog-heading`. <br/>Defaults to `var(--spectrum-heading-sans-serif-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-dialog-title-font-style": {
+      "value": "normal",
+      "description": "Defined in `.spectrum-AlertDialog`. <br/>Used by `.spectrum-AlertDialog-heading`. <br/>Defaults to `var(--spectrum-heading-sans-serif-font-style)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-dialog-title-line-height": {
+      "value": "1.3",
+      "description": "Defined in `.spectrum-AlertDialog`. <br/>Used by `.spectrum-AlertDialog-heading`. <br/>Defaults to `var(--spectrum-heading-line-height)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-dialog-title-color": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-AlertDialog`. <br/>Used by `.spectrum-AlertDialog-heading`. <br/>Defaults to `var(--spectrum-heading-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-alert-dialog-heading-size": {
+      "value": "var(--spectrum-title-size-xl)",
+      "description": "Defined in `.spectrum-AlertDialog`. <br/>Used by `.spectrum-AlertDialog-heading`. <br/>Defaults to `var(--spectrum-alert-dialog-title-font-size)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-dialog-title-font-size": {
+      "value": "var(--spectrum-title-size-xl)",
+      "description": "Used by `--spectrum-alert-dialog-heading-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-dialog-description-content-size": {
+      "value": "var(--spectrum-body-size-s)",
+      "description": "Defined in `.spectrum-AlertDialog`. <br/>Used by `.spectrum-AlertDialog-content`. <br/>Defaults to `var(--spectrum-alert-dialog-description-font-size)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-dialog-description-font-size": {
+      "value": "var(--spectrum-body-size-s)",
+      "description": "Used by `--spectrum-alert-dialog-description-content-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-dialog-body-font-family": {
+      "value": "var(--spectrum-sans-font-family-stack)",
+      "description": "Defined in `.spectrum-AlertDialog`. <br/>Used by `.spectrum-AlertDialog-content`. <br/>Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-dialog-body-font-weight": {
+      "value": "400",
+      "description": "Defined in `.spectrum-AlertDialog`. <br/>Used by `.spectrum-AlertDialog-content`. <br/>Defaults to `var(--spectrum-body-sans-serif-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-dialog-body-font-style": {
+      "value": "normal",
+      "description": "Defined in `.spectrum-AlertDialog`. <br/>Used by `.spectrum-AlertDialog-content`. <br/>Defaults to `var(--spectrum-body-sans-serif-font-style)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-dialog-body-line-height": {
+      "value": "1.5",
+      "description": "Defined in `.spectrum-AlertDialog`. <br/>Used by `.spectrum-AlertDialog-content`. <br/>Defaults to `var(--spectrum-line-height-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-dialog-body-color": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-AlertDialog`. <br/>Used by `.spectrum-AlertDialog-content`. <br/>Defaults to `var(--spectrum-body-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-alert-dialog-title-to-description": {
+      "value": "16px",
+      "description": "Defined in `.spectrum-AlertDialog`. <br/>Used by `.spectrum-AlertDialog-header`. <br/>Defaults to `var(--spectrum-spacing-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-dialog-minimum-title-to-icon": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-AlertDialog`. <br/>Used by `.spectrum-AlertDialog-header`. <br/>Defaults to `var(--spectrum-spacing-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-dialog-description-to-button-group": {
+      "value": "32px",
+      "description": "Defined in `.spectrum-AlertDialog`. <br/>Used by `.spectrum-AlertDialog-content`. <br/>Defaults to `var(--spectrum-spacing-500)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-alert-dialog-edge-to-content": {
+      "description": "Used by `.spectrum-AlertDialog`.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-workflow-icon-size-100": {
+      "value": "20px",
+      "description": "Used by `--spectrum-alert-dialog-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-extra-large-default": {
+      "value": "16px",
+      "description": "Used by `--spectrum-alert-dialog-corner-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-notice-visual-color": {
+      "value": "var(--spectrum-notice-color-800)",
+      "description": "Used by `--spectrum-alert-dialog-warning-icon-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-visual-color": {
+      "value": "var(--spectrum-negative-color-800)",
+      "description": "Used by `--spectrum-alert-dialog-error-icon-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-background-layer-2-color": {
+      "value": "var(--spectrum-gray-25)",
+      "description": "Used by `--spectrum-alert-dialog-background-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-sans-font-family-stack": {
+      "description": "Used by `--spectrum-alert-dialog-title-font-family`, `--spectrum-alert-dialog-body-font-family`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-sans-serif-font-weight": {
+      "value": "800",
+      "description": "Used by `--spectrum-alert-dialog-title-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-sans-serif-font-style": {
+      "value": "normal",
+      "description": "Used by `--spectrum-alert-dialog-title-font-style`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-line-height": {
+      "value": "1.3",
+      "description": "Used by `--spectrum-alert-dialog-title-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-color": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-alert-dialog-title-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-body-sans-serif-font-weight": {
+      "value": "400",
+      "description": "Used by `--spectrum-alert-dialog-body-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-sans-serif-font-style": {
+      "value": "normal",
+      "description": "Used by `--spectrum-alert-dialog-body-font-style`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-line-height-200": {
+      "value": "1.5",
+      "description": "Used by `--spectrum-alert-dialog-body-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-color": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-alert-dialog-body-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-spacing-300": {
+      "value": "16px",
+      "description": "Used by `--spectrum-alert-dialog-title-to-description`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-100": {
+      "value": "8px",
+      "description": "Used by `--spectrum-alert-dialog-minimum-title-to-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-500": {
+      "value": "32px",
+      "description": "Used by `--spectrum-alert-dialog-description-to-button-group`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {
+    "mod-buttongroup-justify-content": {
+      "category": "Passthrough"
+    },
+    "mod-icon-color": {
+      "category": "Passthrough"
+    }
+  },
+  "high-contrast": {}
 }
diff --git a/components/alertdialog/stories/alertdialog.stories.js b/components/alertdialog/stories/alertdialog.stories.js
index e5b563f7658..a33f1c645f2 100644
--- a/components/alertdialog/stories/alertdialog.stories.js
+++ b/components/alertdialog/stories/alertdialog.stories.js
@@ -1,11 +1,13 @@
 import { withUnderlayWrapper } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isOpen } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { AlertDialogGroup } from "./alertdialog.test.js";
 import { Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * Alert dialogs display important information that users need to acknowledge. They appear over the interface and block further interactions until an action is selected.
  */
@@ -77,12 +79,17 @@ export default {
 		metadata,
 		status: {
 			type: "migrated",
-		}
+		},
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 	tags: ["migrated"],
 	decorators: [
 		withUnderlayWrapper,
 	],
+	tags: ["migrated"],
 };
 
 export const Default = AlertDialogGroup.bind({});
diff --git a/components/alertdialog/stories/template.js b/components/alertdialog/stories/template.js
index 7504cc687da..87c83f4a09d 100644
--- a/components/alertdialog/stories/template.js
+++ b/components/alertdialog/stories/template.js
@@ -69,12 +69,12 @@ const buttonMap = {
 
 export const Dialog = ({
 	rootClass = "spectrum-AlertDialog",
+	id = getRandomId("alert-dialog"),
 	heading,
 	content,
 	customClasses = [],
 	variant,
 	hasVerticalButtons,
-	id = getRandomId("alertdialog"),
 	customStyles = {},
 } = {}, context = {}) => {
 	return html`
diff --git a/components/asset/dist/metadata.json b/components/asset/dist/metadata.json
index 6389e295f47..338139abd75 100644
--- a/components/asset/dist/metadata.json
+++ b/components/asset/dist/metadata.json
@@ -10,26 +10,95 @@
     ".spectrum-Asset-folderOutline",
     ".spectrum-Asset-image"
   ],
-  "modifiers": [
-    "--mod-asset-file-background-color",
-    "--mod-asset-folder-background-color",
-    "--mod-asset-icon-margin",
-    "--mod-asset-icon-max-width",
-    "--mod-asset-icon-min-width",
-    "--mod-asset-icon-outline-color"
-  ],
-  "component": [
-    "--spectrum-asset-file-background",
-    "--spectrum-asset-file-outline",
-    "--spectrum-asset-folder-background",
-    "--spectrum-asset-folder-outline"
-  ],
-  "global": [
-    "--spectrum-animation-duration-100",
-    "--spectrum-gray-200",
-    "--spectrum-gray-25",
-    "--spectrum-gray-500"
-  ],
-  "passthroughs": [],
-  "high-contrast": ["--highcontrast-asset-icon-background-color"]
+  "modifiers": {
+    "mod-asset-folder-background-color": {
+      "description": "Used by `--spectrum-asset-folder-background`. <br/>Defaults to `var(--spectrum-gray-200)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-asset-file-background-color": {
+      "description": "Used by `--spectrum-asset-file-background`. <br/>Defaults to `var(--spectrum-gray-25)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-asset-icon-outline-color": {
+      "description": "Used by `--spectrum-asset-folder-outline`, `--spectrum-asset-file-outline`. <br/>Defaults to `var(--spectrum-gray-500)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-asset-icon-min-width": {
+      "description": "Used by `.spectrum-Asset-file, .spectrum-Asset-folder`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-asset-icon-max-width": {
+      "description": "Used by `.spectrum-Asset-file, .spectrum-Asset-folder`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-asset-icon-margin": {
+      "description": "Used by `.spectrum-Asset-file, .spectrum-Asset-folder`.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-asset-folder-background": {
+      "value": "var(--highcontrast-asset-icon-background-color, var(--mod-asset-folder-background-color, var(--spectrum-gray-200)))",
+      "description": "Defined in `.spectrum-Asset`. <br/>Used by `.spectrum-Asset-folderBackground`. <br/>Defaults to `var(--highcontrast-asset-icon-background-color, var(--mod-asset-folder-background-color, var(--spectrum-gray-200)))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-asset-file-background": {
+      "value": "var(--highcontrast-asset-icon-background-color, var(--mod-asset-file-background-color, var(--spectrum-gray-25)))",
+      "description": "Defined in `.spectrum-Asset`. <br/>Used by `.spectrum-Asset-fileBackground`. <br/>Defaults to `var(--highcontrast-asset-icon-background-color, var(--mod-asset-file-background-color, var(--spectrum-gray-25)))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-asset-folder-outline": {
+      "value": "var(--mod-asset-icon-outline-color, var(--spectrum-gray-500))",
+      "description": "Defined in `.spectrum-Asset`. <br/>Used by `.spectrum-Asset-folderOutline`. <br/>Defaults to `var(--mod-asset-icon-outline-color, var(--spectrum-gray-500))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-asset-file-outline": {
+      "value": "var(--mod-asset-icon-outline-color, var(--spectrum-gray-500))",
+      "description": "Defined in `.spectrum-Asset`. <br/>Used by `.spectrum-Asset-fileOutline`. <br/>Defaults to `var(--mod-asset-icon-outline-color, var(--spectrum-gray-500))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-gray-200": {
+      "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+      "description": "Used by `--spectrum-asset-folder-background`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-25": {
+      "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+      "description": "Used by `--spectrum-asset-file-background`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-500": {
+      "value": "light-dark(rgb(143, 143, 143), rgb(109, 109, 109))",
+      "description": "Used by `--spectrum-asset-folder-outline`, `--spectrum-asset-file-outline`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-animation-duration-100": {
+      "description": "Used by `.spectrum-Asset-image`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {
+    "highcontrast-asset-icon-background-color": {
+      "value": "var(--mod-asset-file-background-color, var(--spectrum-gray-25))",
+      "description": "Defined in `.spectrum-Asset`. <br/>Used by `--spectrum-asset-folder-background`, `--spectrum-asset-file-background`. <br/>Defaults to `var(--mod-asset-file-background-color, var(--spectrum-gray-25))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/asset/stories/asset.stories.js b/components/asset/stories/asset.stories.js
index 927c1009aad..ae1750dccd6 100644
--- a/components/asset/stories/asset.stories.js
+++ b/components/asset/stories/asset.stories.js
@@ -1,9 +1,11 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { AssetGroup } from "./asset.test.js";
 import { Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * Use an asset element to visually represent a file, folder or image. File and folder representations will center themselves horizontally and vertically in the space provided to the element. Images will be contained to the element, growing to the element's full height while centering itself within the width provided.
 */
@@ -38,6 +40,10 @@ export default {
 	parameters: {
 		packageJson,
 		metadata,
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 };
 
diff --git a/components/assetcard/dist/metadata.json b/components/assetcard/dist/metadata.json
index 94bf07de0af..4809f8fe418 100644
--- a/components/assetcard/dist/metadata.json
+++ b/components/assetcard/dist/metadata.json
@@ -5,9 +5,9 @@
     ".spectrum-AssetCard .spectrum-AssetCard-selectionOrder",
     ".spectrum-AssetCard--checkboxSelection .spectrum-AssetCard-selectionIndicator",
     ".spectrum-AssetCard--checkboxSelection .spectrum-AssetCard-selectionIndicator .spectrum-AssetCard-selectionOrder",
-    ".spectrum-AssetCard--checkboxSelection.is-selected .spectrum-AssetCard-selectionIndicator",
     ".spectrum-AssetCard--checkboxSelection:focus-visible .spectrum-AssetCard-selectionIndicator",
     ".spectrum-AssetCard--checkboxSelection:hover .spectrum-AssetCard-selectionIndicator",
+    ".spectrum-AssetCard--checkboxSelection.is-selected .spectrum-AssetCard-selectionIndicator",
     ".spectrum-AssetCard--highlightSelection.is-selected .spectrum-AssetCard-asset",
     ".spectrum-AssetCard--orderedSelection .spectrum-AssetCard-selectionIndicator",
     ".spectrum-AssetCard--orderedSelection .spectrum-AssetCard-selectionIndicator .spectrum-AssetCard-checkbox",
@@ -23,15 +23,6 @@
     ".spectrum-AssetCard-selectionOrder",
     ".spectrum-AssetCard-selectionOverlay",
     ".spectrum-AssetCard-title",
-    ".spectrum-AssetCard.is-drop-target .spectrum-AssetCard-assetContainer:after",
-    ".spectrum-AssetCard.is-drop-target .spectrum-AssetCard-selectionOverlay",
-    ".spectrum-AssetCard.is-drop-target:active .spectrum-AssetCard-assetContainer:after",
-    ".spectrum-AssetCard.is-drop-target:hover .spectrum-AssetCard-assetContainer:after",
-    ".spectrum-AssetCard.is-selected .spectrum-AssetCard-assetContainer:after",
-    ".spectrum-AssetCard.is-selected .spectrum-AssetCard-selectionOverlay",
-    ".spectrum-AssetCard.is-selected .spectrum-Checkbox-box:before",
-    ".spectrum-AssetCard.is-selected:active .spectrum-AssetCard-assetContainer:after",
-    ".spectrum-AssetCard.is-selected:hover .spectrum-AssetCard-assetContainer:after",
     ".spectrum-AssetCard:active .spectrum-AssetCard-assetContainer:after",
     ".spectrum-AssetCard:focus-visible .spectrum-AssetCard-assetContainer:after",
     ".spectrum-AssetCard:focus-visible .spectrum-AssetCard-assetContainer:before",
@@ -40,149 +31,762 @@
     ".spectrum-AssetCard:hover .spectrum-Checkbox-box:before",
     ".spectrum-AssetCard:lang(ja)",
     ".spectrum-AssetCard:lang(ko)",
-    ".spectrum-AssetCard:lang(zh)"
-  ],
-  "modifiers": [
-    "--mod-assectcard-border-color-selected-down",
-    "--mod-assectcard-focus-indicator-color",
-    "--mod-assetcard-asset-animation-duration",
-    "--mod-assetcard-asset-container-border-size",
-    "--mod-assetcard-asset-size",
-    "--mod-assetcard-background-color",
-    "--mod-assetcard-border-color",
-    "--mod-assetcard-border-color-down",
-    "--mod-assetcard-border-color-hover",
-    "--mod-assetcard-border-color-selected",
-    "--mod-assetcard-border-color-selected-hover",
-    "--mod-assetcard-border-radius",
-    "--mod-assetcard-content-font-family",
-    "--mod-assetcard-content-font-size",
-    "--mod-assetcard-content-font-style",
-    "--mod-assetcard-content-font-weight",
-    "--mod-assetcard-content-letter-spacing",
-    "--mod-assetcard-content-line-height",
-    "--mod-assetcard-content-margin-block-start",
-    "--mod-assetcard-content-text-color",
-    "--mod-assetcard-focus-indicator-thickness",
-    "--mod-assetcard-focus-ring-border-radius",
-    "--mod-assetcard-focus-ring-gap",
-    "--mod-assetcard-header-content-font-family",
-    "--mod-assetcard-header-content-font-size",
-    "--mod-assetcard-header-content-font-stlye",
-    "--mod-assetcard-header-content-font-weight",
-    "--mod-assetcard-header-content-letter-spacing",
-    "--mod-assetcard-header-content-line-height",
-    "--mod-assetcard-header-content-text-color",
-    "--mod-assetcard-header-margin-block-start",
-    "--mod-assetcard-overlay-background-color",
-    "--mod-assetcard-selectionindicator-background-color-default",
-    "--mod-assetcard-selectionindicator-background-color-ordered",
-    "--mod-assetcard-selectionindicator-border-radius",
-    "--mod-assetcard-selectionindicator-color",
-    "--mod-assetcard-selectionindicator-font-size",
-    "--mod-assetcard-selectionindicator-font-weight",
-    "--mod-assetcard-selectionindicator-margin",
-    "--mod-assetcard-selectionindicator-size",
-    "--mod-assetcard-title-font-family",
-    "--mod-assetcard-title-font-size",
-    "--mod-assetcard-title-font-style",
-    "--mod-assetcard-title-font-weight",
-    "--mod-assetcard-title-letter-spacing",
-    "--mod-assetcard-title-line-height",
-    "--mod-assetcard-title-text-color"
-  ],
-  "component": [
-    "--spectrum-assetcard-asset-animation-duration",
-    "--spectrum-assetcard-asset-container-border-size",
-    "--spectrum-assetcard-asset-size",
-    "--spectrum-assetcard-background-color",
-    "--spectrum-assetcard-border-color",
-    "--spectrum-assetcard-border-color-down",
-    "--spectrum-assetcard-border-color-hover",
-    "--spectrum-assetcard-border-color-selected",
-    "--spectrum-assetcard-border-color-selected-down",
-    "--spectrum-assetcard-border-color-selected-hover",
-    "--spectrum-assetcard-border-radius",
-    "--spectrum-assetcard-content-font-family",
-    "--spectrum-assetcard-content-font-size",
-    "--spectrum-assetcard-content-font-style",
-    "--spectrum-assetcard-content-font-weight",
-    "--spectrum-assetcard-content-letter-spacing",
-    "--spectrum-assetcard-content-line-height",
-    "--spectrum-assetcard-content-margin-block-start",
-    "--spectrum-assetcard-content-text-color",
-    "--spectrum-assetcard-focus-indicator-thickness",
-    "--spectrum-assetcard-focus-ring-border-radius",
-    "--spectrum-assetcard-focus-ring-gap",
-    "--spectrum-assetcard-header-content-font-family",
-    "--spectrum-assetcard-header-content-font-size",
-    "--spectrum-assetcard-header-content-font-style",
-    "--spectrum-assetcard-header-content-font-weight",
-    "--spectrum-assetcard-header-content-letter-spacing",
-    "--spectrum-assetcard-header-content-line-height",
-    "--spectrum-assetcard-header-content-text-color",
-    "--spectrum-assetcard-header-margin-block-start",
-    "--spectrum-assetcard-overlay-background-color",
-    "--spectrum-assetcard-selectionindicator-background-color-default",
-    "--spectrum-assetcard-selectionindicator-background-color-ordered",
-    "--spectrum-assetcard-selectionindicator-blur",
-    "--spectrum-assetcard-selectionindicator-border-radius",
-    "--spectrum-assetcard-selectionindicator-box-shadow-color",
-    "--spectrum-assetcard-selectionindicator-color",
-    "--spectrum-assetcard-selectionindicator-font-size",
-    "--spectrum-assetcard-selectionindicator-font-weight",
-    "--spectrum-assetcard-selectionindicator-margin",
-    "--spectrum-assetcard-selectionindicator-offset-y",
-    "--spectrum-assetcard-selectionindicator-size",
-    "--spectrum-assetcard-title-font-family",
-    "--spectrum-assetcard-title-font-size",
-    "--spectrum-assetcard-title-font-style",
-    "--spectrum-assetcard-title-font-weight",
-    "--spectrum-assetcard-title-letter-spacing",
-    "--spectrum-assetcard-title-line-height",
-    "--spectrum-assetcard-title-text-color"
-  ],
-  "global": [
-    "--spectrum-animation-duration-100",
-    "--spectrum-assestcard-focus-indicator-color",
-    "--spectrum-body-cjk-font-style",
-    "--spectrum-body-cjk-font-weight",
-    "--spectrum-body-cjk-line-height",
-    "--spectrum-body-sans-serif-font-weight",
-    "--spectrum-bold-font-weight",
-    "--spectrum-card-selection-background-size",
-    "--spectrum-cjk-font-family-stack",
-    "--spectrum-cjk-letter-spacing",
-    "--spectrum-corner-radius-100",
-    "--spectrum-default-font-style",
-    "--spectrum-focus-indicator-thickness",
-    "--spectrum-font-size-400",
-    "--spectrum-gray-500",
-    "--spectrum-gray-600",
-    "--spectrum-gray-700",
-    "--spectrum-gray-75",
-    "--spectrum-gray-75-rgb",
-    "--spectrum-gray-900",
-    "--spectrum-heading-cjk-font-style",
-    "--spectrum-heading-cjk-font-weight",
-    "--spectrum-heading-cjk-line-height",
-    "--spectrum-heading-cjk-size-xs",
-    "--spectrum-heading-sans-serif-font-weight",
-    "--spectrum-line-height-100",
-    "--spectrum-line-height-200",
-    "--spectrum-sans-font-family-stack",
-    "--spectrum-spacing-300",
-    "--spectrum-spacing-75",
-    "--spectrum-transparent-black-300",
-    "--spectrum-white"
+    ".spectrum-AssetCard:lang(zh)",
+    ".spectrum-AssetCard.is-drop-target .spectrum-AssetCard-assetContainer:after",
+    ".spectrum-AssetCard.is-drop-target .spectrum-AssetCard-selectionOverlay",
+    ".spectrum-AssetCard.is-drop-target:active .spectrum-AssetCard-assetContainer:after",
+    ".spectrum-AssetCard.is-drop-target:hover .spectrum-AssetCard-assetContainer:after",
+    ".spectrum-AssetCard.is-selected .spectrum-AssetCard-assetContainer:after",
+    ".spectrum-AssetCard.is-selected .spectrum-AssetCard-selectionOverlay",
+    ".spectrum-AssetCard.is-selected .spectrum-Checkbox-box:before",
+    ".spectrum-AssetCard.is-selected:active .spectrum-AssetCard-assetContainer:after",
+    ".spectrum-AssetCard.is-selected:hover .spectrum-AssetCard-assetContainer:after"
   ],
-  "passthroughs": [],
-  "high-contrast": [
-    "--highcontrast-assectcard-border-color-selected-down",
-    "--highcontrast-assetcard-border-color-hover",
-    "--highcontrast-assetcard-border-color-selected",
-    "--highcontrast-assetcard-border-color-selected-hover",
-    "--highcontrast-assetcard-selectionindicator-background-color-ordered",
-    "--highcontrast-assetcard-selectionindicator-color"
-  ]
+  "modifiers": {
+    "mod-assetcard-asset-size": {
+      "description": "Used by `.spectrum-AssetCard`, `.spectrum-AssetCard-assetContainer`. <br/>Defaults to `var(--spectrum-assetcard-asset-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetcard-border-color-hover": {
+      "description": "Used by `.spectrum-AssetCard.is-selected .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard.is-selected .spectrum-Checkbox-box:before, .spectrum-AssetCard:focus-visible .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard:focus-visible .spectrum-Checkbox-box:before`, `.spectrum-AssetCard:hover .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard:hover .spectrum-Checkbox-box:before`. <br/>Defaults to `var(--spectrum-assetcard-border-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-assetcard-border-color-down": {
+      "description": "Used by `.spectrum-AssetCard:active .spectrum-AssetCard-assetContainer:after`. <br/>Defaults to `var(--spectrum-assetcard-border-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-assetcard-border-radius": {
+      "description": "Used by `.spectrum-AssetCard-assetContainer`, `.spectrum-AssetCard-asset, .spectrum-AssetCard-assetContainer:after`, `.spectrum-AssetCard-selectionOverlay`. <br/>Defaults to `var(--spectrum-assetcard-border-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetcard-background-color": {
+      "description": "Used by `.spectrum-AssetCard-assetContainer`. <br/>Defaults to `var(--spectrum-assetcard-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-assetcard-asset-animation-duration": {
+      "description": "Used by `.spectrum-AssetCard-assetContainer`, `.spectrum-AssetCard-assetContainer:before`, `.spectrum-AssetCard-asset`, `.spectrum-AssetCard-selectionOverlay`, `.spectrum-AssetCard-selectionIndicator`. <br/>Defaults to `var(--spectrum-assetcard-asset-animation-duration)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetcard-focus-ring-gap": {
+      "description": "Used by `.spectrum-AssetCard-assetContainer:before`. <br/>Defaults to `var(--spectrum-assetcard-focus-ring-gap)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetcard-focus-indicator-thickness": {
+      "description": "Used by `.spectrum-AssetCard-assetContainer:before`. <br/>Defaults to `var(--spectrum-assetcard-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assectcard-focus-indicator-color": {
+      "description": "Used by `.spectrum-AssetCard-assetContainer:before`. <br/>Defaults to `var(--spectrum-assestcard-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-assetcard-focus-ring-border-radius": {
+      "description": "Used by `.spectrum-AssetCard-assetContainer:before`. <br/>Defaults to `var(--spectrum-assetcard-focus-ring-border-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetcard-asset-container-border-size": {
+      "description": "Used by `.spectrum-AssetCard-assetContainer:after`. <br/>Defaults to `var(--spectrum-assetcard-asset-container-border-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetcard-border-color": {
+      "description": "Used by `.spectrum-AssetCard-assetContainer:after`. <br/>Defaults to `var(--spectrum-assetcard-border-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-assetcard-header-margin-block-start": {
+      "description": "Used by `.spectrum-AssetCard-header`. <br/>Defaults to `var(--spectrum-assetcard-header-margin-block-start)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetcard-title-text-color": {
+      "description": "Used by `.spectrum-AssetCard-title`. <br/>Defaults to `var(--spectrum-assetcard-title-text-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-assetcard-title-font-family": {
+      "description": "Used by `.spectrum-AssetCard-title`. <br/>Defaults to `var(--spectrum-assetcard-title-font-family)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetcard-title-font-weight": {
+      "description": "Used by `.spectrum-AssetCard-title`. <br/>Defaults to `var(--spectrum-assetcard-title-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetcard-title-font-size": {
+      "description": "Used by `.spectrum-AssetCard-title`. <br/>Defaults to `var(--spectrum-assetcard-title-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetcard-title-line-height": {
+      "description": "Used by `.spectrum-AssetCard-title`. <br/>Defaults to `var(--spectrum-assetcard-title-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetcard-title-font-style": {
+      "description": "Used by `.spectrum-AssetCard-title`. <br/>Defaults to `var(--spectrum-assetcard-title-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetcard-title-letter-spacing": {
+      "description": "Used by `.spectrum-AssetCard-title`. <br/>Defaults to `var(--spectrum-assetcard-title-letter-spacing)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetcard-header-content-text-color": {
+      "description": "Used by `.spectrum-AssetCard-headerContent`. <br/>Defaults to `var(--spectrum-assetcard-header-content-text-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-assetcard-header-content-font-family": {
+      "description": "Used by `.spectrum-AssetCard-headerContent`. <br/>Defaults to `var(--spectrum-assetcard-header-content-font-family)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetcard-header-content-font-size": {
+      "description": "Used by `.spectrum-AssetCard-headerContent`. <br/>Defaults to `var(--spectrum-assetcard-header-content-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetcard-header-content-font-weight": {
+      "description": "Used by `.spectrum-AssetCard-headerContent`. <br/>Defaults to `var(--spectrum-assetcard-header-content-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetcard-header-content-line-height": {
+      "description": "Used by `.spectrum-AssetCard-headerContent`. <br/>Defaults to `var(--spectrum-assetcard-header-content-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetcard-header-content-font-stlye": {
+      "description": "Used by `.spectrum-AssetCard-headerContent`. <br/>Defaults to `var(--spectrum-assetcard-header-content-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetcard-header-content-letter-spacing": {
+      "description": "Used by `.spectrum-AssetCard-headerContent`. <br/>Defaults to `var(--spectrum-assetcard-header-content-letter-spacing)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetcard-content-margin-block-start": {
+      "description": "Used by `.spectrum-AssetCard-content`. <br/>Defaults to `var(--spectrum-assetcard-content-margin-block-start)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetcard-content-text-color": {
+      "description": "Used by `.spectrum-AssetCard-content`. <br/>Defaults to `var(--spectrum-assetcard-content-text-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-assetcard-content-font-family": {
+      "description": "Used by `.spectrum-AssetCard-content`. <br/>Defaults to `var(--spectrum-assetcard-content-font-family)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetcard-content-font-size": {
+      "description": "Used by `.spectrum-AssetCard-content`. <br/>Defaults to `var(--spectrum-assetcard-content-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetcard-content-font-weight": {
+      "description": "Used by `.spectrum-AssetCard-content`. <br/>Defaults to `var(--spectrum-assetcard-content-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetcard-content-line-height": {
+      "description": "Used by `.spectrum-AssetCard-content`. <br/>Defaults to `var(--spectrum-assetcard-content-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetcard-content-font-style": {
+      "description": "Used by `.spectrum-AssetCard-content`. <br/>Defaults to `var(--spectrum-assetcard-content-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetcard-content-letter-spacing": {
+      "description": "Used by `.spectrum-AssetCard-content`. <br/>Defaults to `var(--spectrum-assetcard-content-letter-spacing)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetcard-selectionindicator-margin": {
+      "description": "Used by `.spectrum-AssetCard-selectionIndicator`. <br/>Defaults to `var(--spectrum-assetcard-selectionindicator-margin)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetcard-selectionindicator-size": {
+      "description": "Used by `.spectrum-AssetCard-selectionIndicator`. <br/>Defaults to `var(--spectrum-assetcard-selectionindicator-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetcard-selectionindicator-border-radius": {
+      "description": "Used by `.spectrum-AssetCard-selectionIndicator`. <br/>Defaults to `var(--spectrum-assetcard-selectionindicator-border-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetcard-selectionindicator-color": {
+      "description": "Used by `.spectrum-AssetCard-selectionIndicator`. <br/>Defaults to `var(--spectrum-assetcard-selectionindicator-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-assetcard-selectionindicator-font-weight": {
+      "description": "Used by `.spectrum-AssetCard-selectionIndicator`. <br/>Defaults to `var(--spectrum-assetcard-selectionindicator-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetcard-selectionindicator-font-size": {
+      "description": "Used by `.spectrum-AssetCard-selectionIndicator`. <br/>Defaults to `var(--spectrum-assetcard-selectionindicator-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetcard-border-color-selected": {
+      "description": "Used by `.spectrum-AssetCard.is-drop-target .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard.is-selected .spectrum-AssetCard-assetContainer:after`. <br/>Defaults to `var(--spectrum-assetcard-border-color-selected)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-assetcard-overlay-background-color": {
+      "description": "Used by `.spectrum-AssetCard.is-drop-target .spectrum-AssetCard-selectionOverlay, .spectrum-AssetCard.is-selected .spectrum-AssetCard-selectionOverlay`. <br/>Defaults to `var(--spectrum-assetcard-overlay-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-assectcard-border-color-selected-down": {
+      "description": "Used by `.spectrum-AssetCard.is-drop-target:active .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard.is-selected:active .spectrum-AssetCard-assetContainer:after`. <br/>Defaults to `var(--spectrum-assetcard-border-color-selected-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-assetcard-selectionindicator-background-color-default": {
+      "description": "Used by `.spectrum-AssetCard--checkboxSelection .spectrum-AssetCard-selectionIndicator`. <br/>Defaults to `var(--spectrum-assetcard-selectionindicator-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-assetcard-border-color-selected-hover": {
+      "description": "Used by `.spectrum-AssetCard.is-drop-target:hover .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard.is-selected:hover .spectrum-AssetCard-assetContainer:after`. <br/>Defaults to `var(--spectrum-assetcard-border-color-selected-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-assetcard-selectionindicator-background-color-ordered": {
+      "description": "Used by `.spectrum-AssetCard--orderedSelection .spectrum-AssetCard-selectionIndicator`. <br/>Defaults to `var(--spectrum-assetcard-selectionindicator-background-color-ordered)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-assetcard-background-color": {
+      "value": "light-dark(rgb(243, 243, 243), rgb(34, 34, 34))",
+      "description": "Defined in `.spectrum-AssetCard`. <br/>Used by `.spectrum-AssetCard-assetContainer`. <br/>Defaults to `var(--spectrum-gray-75)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-assetcard-asset-size": {
+      "value": "224px",
+      "description": "Defined in `.spectrum-AssetCard`. <br/>Used by `.spectrum-AssetCard`, `.spectrum-AssetCard-assetContainer`. <br/>Defaults to `224px`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetcard-overlay-background-color": {
+      "value": "rgb(27 127 245/10%)",
+      "description": "Defined in `.spectrum-AssetCard`. <br/>Used by `.spectrum-AssetCard.is-drop-target .spectrum-AssetCard-selectionOverlay, .spectrum-AssetCard.is-selected .spectrum-AssetCard-selectionOverlay`. <br/>Defaults to `rgb(27 127 245/10%)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-assetcard-asset-animation-duration": {
+      "value": "var(--spectrum-animation-duration-100)",
+      "description": "Defined in `.spectrum-AssetCard`. <br/>Used by `.spectrum-AssetCard-assetContainer`, `.spectrum-AssetCard-assetContainer:before`, `.spectrum-AssetCard-asset`, `.spectrum-AssetCard-selectionOverlay`, `.spectrum-AssetCard-selectionIndicator`. <br/>Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetcard-asset-container-border-size": {
+      "value": "1px",
+      "description": "Defined in `.spectrum-AssetCard`. <br/>Used by `.spectrum-AssetCard-assetContainer:after`. <br/>Defaults to `1px`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetcard-header-margin-block-start": {
+      "value": "16px",
+      "description": "Defined in `.spectrum-AssetCard`. <br/>Used by `.spectrum-AssetCard-header`. <br/>Defaults to `var(--spectrum-spacing-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetcard-border-radius": {
+      "value": "4px",
+      "description": "Defined in `.spectrum-AssetCard`. <br/>Used by `.spectrum-AssetCard-assetContainer`, `.spectrum-AssetCard-asset, .spectrum-AssetCard-assetContainer:after`, `.spectrum-AssetCard-selectionOverlay`. <br/>Defaults to `var(--spectrum-corner-radius-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetcard-border-color": {
+      "value": "transparent",
+      "description": "Defined in `.spectrum-AssetCard`. <br/>Used by `.spectrum-AssetCard-assetContainer:after`. <br/>Defaults to `transparent`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-assetcard-border-color-hover": {
+      "value": "light-dark(rgb(143, 143, 143), rgb(109, 109, 109))",
+      "description": "Defined in `.spectrum-AssetCard`. <br/>Used by `.spectrum-AssetCard.is-selected .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard.is-selected .spectrum-Checkbox-box:before, .spectrum-AssetCard:focus-visible .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard:focus-visible .spectrum-Checkbox-box:before`, `.spectrum-AssetCard:hover .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard:hover .spectrum-Checkbox-box:before`. <br/>Defaults to `var(--spectrum-gray-500)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-assetcard-border-color-down": {
+      "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))",
+      "description": "Defined in `.spectrum-AssetCard`. <br/>Used by `.spectrum-AssetCard:active .spectrum-AssetCard-assetContainer:after`. <br/>Defaults to `var(--spectrum-gray-600)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-assetcard-focus-ring-gap": {
+      "value": "5px",
+      "description": "Defined in `.spectrum-AssetCard`. <br/>Used by `.spectrum-AssetCard-assetContainer:before`. <br/>Defaults to `5px`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetcard-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-AssetCard`. <br/>Used by `.spectrum-AssetCard-assetContainer:before`. <br/>Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetcard-selectionindicator-size": {
+      "value": "40px",
+      "description": "Defined in `.spectrum-AssetCard`. <br/>Used by `.spectrum-AssetCard-selectionIndicator`. <br/>Defaults to `var(--spectrum-card-selection-background-size)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetcard-selectionindicator-border-radius": {
+      "value": "4px",
+      "description": "Defined in `.spectrum-AssetCard`. <br/>Used by `.spectrum-AssetCard-selectionIndicator`. <br/>Defaults to `var(--spectrum-corner-radius-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetcard-selectionindicator-offset-y": {
+      "value": "4px",
+      "description": "Defined in `.spectrum-AssetCard`. <br/>Used by `.spectrum-AssetCard-selectionIndicator`. <br/>Defaults to `4px`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetcard-selectionindicator-blur": {
+      "value": "6px",
+      "description": "Defined in `.spectrum-AssetCard`. <br/>Used by `.spectrum-AssetCard-selectionIndicator`. <br/>Defaults to `6px`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetcard-selectionindicator-color": {
+      "value": "rgb(255, 255, 255)",
+      "description": "Defined in `.spectrum-AssetCard`. <br/>Used by `.spectrum-AssetCard-selectionIndicator`. <br/>Defaults to `var(--spectrum-white)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-assetcard-selectionindicator-font-weight": {
+      "value": "700",
+      "description": "Defined in `.spectrum-AssetCard`. <br/>Used by `.spectrum-AssetCard-selectionIndicator`. <br/>Defaults to `var(--spectrum-bold-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetcard-selectionindicator-font-size": {
+      "value": "20px",
+      "description": "Defined in `.spectrum-AssetCard`. <br/>Used by `.spectrum-AssetCard-selectionIndicator`. <br/>Defaults to `var(--spectrum-font-size-400)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetcard-selectionindicator-background-color-default": {
+      "value": "rgb(var(--spectrum-gray-75-rgb), 0.9)",
+      "description": "Defined in `.spectrum-AssetCard`. <br/>Used by `.spectrum-AssetCard--checkboxSelection .spectrum-AssetCard-selectionIndicator`. <br/>Defaults to `rgb(var(--spectrum-gray-75-rgb), 0.9)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-assetcard-selectionindicator-box-shadow-color": {
+      "value": "rgba(0, 0, 0, 0.15)",
+      "description": "Defined in `.spectrum-AssetCard`. <br/>Used by `.spectrum-AssetCard-selectionIndicator`. <br/>Defaults to `var(--spectrum-transparent-black-300)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-assetcard-title-text-color": {
+      "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+      "description": "Defined in `.spectrum-AssetCard`. <br/>Used by `.spectrum-AssetCard-title`. <br/>Defaults to `var(--spectrum-gray-900)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-assetcard-title-font-family": {
+      "value": "var(--spectrum-cjk-font-family-stack)",
+      "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`. <br/>Used by `.spectrum-AssetCard-title`. <br/>Defaults to `var(--spectrum-cjk-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetcard-title-font-weight": {
+      "value": "800",
+      "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`. <br/>Used by `.spectrum-AssetCard-title`. <br/>Defaults to `var(--spectrum-heading-cjk-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetcard-title-font-style": {
+      "value": "normal",
+      "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`. <br/>Used by `.spectrum-AssetCard-title`. <br/>Defaults to `var(--spectrum-heading-cjk-font-style)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetcard-title-line-height": {
+      "value": "1.5",
+      "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`. <br/>Used by `.spectrum-AssetCard-title`. <br/>Defaults to `var(--spectrum-heading-cjk-line-height)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetcard-title-letter-spacing": {
+      "value": "0em",
+      "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`. <br/>Used by `.spectrum-AssetCard-title`. <br/>Defaults to `var(--spectrum-cjk-letter-spacing)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetcard-header-content-text-color": {
+      "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+      "description": "Defined in `.spectrum-AssetCard`. <br/>Used by `.spectrum-AssetCard-headerContent`. <br/>Defaults to `var(--spectrum-gray-900)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-assetcard-header-content-font-family": {
+      "value": "var(--spectrum-cjk-font-family-stack)",
+      "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`. <br/>Used by `.spectrum-AssetCard-headerContent`. <br/>Defaults to `var(--spectrum-cjk-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetcard-header-content-font-weight": {
+      "value": "400",
+      "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`. <br/>Used by `.spectrum-AssetCard-headerContent`. <br/>Defaults to `var(--spectrum-body-cjk-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetcard-header-content-font-style": {
+      "value": "normal",
+      "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`. <br/>Used by `.spectrum-AssetCard-headerContent`. <br/>Defaults to `var(--spectrum-body-cjk-font-style)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetcard-header-content-line-height": {
+      "value": "1.7",
+      "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`. <br/>Used by `.spectrum-AssetCard-headerContent`. <br/>Defaults to `var(--spectrum-body-cjk-line-height)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetcard-header-content-letter-spacing": {
+      "value": "0em",
+      "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`. <br/>Used by `.spectrum-AssetCard-headerContent`. <br/>Defaults to `var(--spectrum-cjk-letter-spacing)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetcard-content-text-color": {
+      "value": "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))",
+      "description": "Defined in `.spectrum-AssetCard`. <br/>Used by `.spectrum-AssetCard-content`. <br/>Defaults to `var(--spectrum-gray-700)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-assetcard-content-font-family": {
+      "value": "var(--spectrum-cjk-font-family-stack)",
+      "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`. <br/>Used by `.spectrum-AssetCard-content`. <br/>Defaults to `var(--spectrum-cjk-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetcard-content-font-weight": {
+      "value": "400",
+      "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`. <br/>Used by `.spectrum-AssetCard-content`. <br/>Defaults to `var(--spectrum-body-cjk-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetcard-content-font-style": {
+      "value": "normal",
+      "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`. <br/>Used by `.spectrum-AssetCard-content`. <br/>Defaults to `var(--spectrum-body-cjk-font-style)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetcard-content-line-height": {
+      "value": "1.7",
+      "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`. <br/>Used by `.spectrum-AssetCard-content`. <br/>Defaults to `var(--spectrum-body-cjk-line-height)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetcard-content-letter-spacing": {
+      "value": "0em",
+      "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`. <br/>Used by `.spectrum-AssetCard-content`. <br/>Defaults to `var(--spectrum-cjk-letter-spacing)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetcard-content-margin-block-start": {
+      "value": "4px",
+      "description": "Defined in `.spectrum-AssetCard`. <br/>Used by `.spectrum-AssetCard-content`. <br/>Defaults to `var(--spectrum-spacing-75)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetcard-title-font-size": {
+      "value": "var(--spectrum-font-size-200)",
+      "description": "Defined in `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`. <br/>Used by `.spectrum-AssetCard-title`. <br/>Defaults to `var(--spectrum-heading-cjk-size-xs)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetcard-focus-ring-border-radius": {
+      "description": "Used by `.spectrum-AssetCard-assetContainer:before`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetcard-header-content-font-size": {
+      "description": "Used by `.spectrum-AssetCard-headerContent`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetcard-content-font-size": {
+      "description": "Used by `.spectrum-AssetCard-content`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetcard-selectionindicator-margin": {
+      "description": "Used by `.spectrum-AssetCard-selectionIndicator`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetcard-border-color-selected": {
+      "description": "Used by `.spectrum-AssetCard.is-drop-target .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard.is-selected .spectrum-AssetCard-assetContainer:after`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-assetcard-border-color-selected-down": {
+      "description": "Used by `.spectrum-AssetCard.is-drop-target:active .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard.is-selected:active .spectrum-AssetCard-assetContainer:after`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-assetcard-border-color-selected-hover": {
+      "description": "Used by `.spectrum-AssetCard.is-drop-target:hover .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard.is-selected:hover .spectrum-AssetCard-assetContainer:after`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-assetcard-selectionindicator-background-color-ordered": {
+      "description": "Used by `.spectrum-AssetCard--orderedSelection .spectrum-AssetCard-selectionIndicator`.",
+      "control": "color",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-gray-75": {
+      "value": "light-dark(rgb(243, 243, 243), rgb(34, 34, 34))",
+      "description": "Used by `--spectrum-assetcard-background-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-animation-duration-100": {
+      "description": "Used by `--spectrum-assetcard-asset-animation-duration`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-300": {
+      "value": "16px",
+      "description": "Used by `--spectrum-assetcard-header-margin-block-start`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-100": {
+      "value": "4px",
+      "description": "Used by `--spectrum-assetcard-border-radius`, `--spectrum-assetcard-selectionindicator-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-500": {
+      "value": "light-dark(rgb(143, 143, 143), rgb(109, 109, 109))",
+      "description": "Used by `--spectrum-assetcard-border-color-hover`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-600": {
+      "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))",
+      "description": "Used by `--spectrum-assetcard-border-color-down`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Used by `--spectrum-assetcard-focus-indicator-thickness`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-card-selection-background-size": {
+      "value": "40px",
+      "description": "Used by `--spectrum-assetcard-selectionindicator-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-white": {
+      "value": "rgb(255, 255, 255)",
+      "description": "Used by `--spectrum-assetcard-selectionindicator-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-bold-font-weight": {
+      "value": "700",
+      "description": "Used by `--spectrum-assetcard-selectionindicator-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-400": {
+      "value": "20px",
+      "description": "Used by `--spectrum-assetcard-selectionindicator-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-75-rgb": {
+      "description": "Used by `--spectrum-assetcard-selectionindicator-background-color-default`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-transparent-black-300": {
+      "value": "rgba(0, 0, 0, 0.15)",
+      "description": "Used by `--spectrum-assetcard-selectionindicator-box-shadow-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-900": {
+      "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+      "description": "Used by `--spectrum-assetcard-title-text-color`, `--spectrum-assetcard-header-content-text-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-sans-font-family-stack": {
+      "description": "Used by `--spectrum-assetcard-title-font-family`, `--spectrum-assetcard-header-content-font-family`, `--spectrum-assetcard-content-font-family`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-sans-serif-font-weight": {
+      "value": "800",
+      "description": "Used by `--spectrum-assetcard-title-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-default-font-style": {
+      "value": "normal",
+      "description": "Used by `--spectrum-assetcard-title-font-style`, `--spectrum-assetcard-header-content-font-style`, `--spectrum-assetcard-content-font-style`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-line-height-100": {
+      "value": "1.3",
+      "description": "Used by `--spectrum-assetcard-title-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-sans-serif-font-weight": {
+      "value": "400",
+      "description": "Used by `--spectrum-assetcard-header-content-font-weight`, `--spectrum-assetcard-content-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-line-height-200": {
+      "value": "1.5",
+      "description": "Used by `--spectrum-assetcard-header-content-line-height`, `--spectrum-assetcard-content-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-700": {
+      "value": "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))",
+      "description": "Used by `--spectrum-assetcard-content-text-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-75": {
+      "value": "4px",
+      "description": "Used by `--spectrum-assetcard-content-margin-block-start`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-cjk-font-family-stack": {
+      "description": "Used by `--spectrum-assetcard-title-font-family`, `--spectrum-assetcard-header-content-font-family`, `--spectrum-assetcard-content-font-family`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-cjk-font-style": {
+      "value": "normal",
+      "description": "Used by `--spectrum-assetcard-title-font-style`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-cjk-font-weight": {
+      "value": "800",
+      "description": "Used by `--spectrum-assetcard-title-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-cjk-size-xs": {
+      "value": "var(--spectrum-font-size-200)",
+      "description": "Used by `--spectrum-assetcard-title-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-cjk-line-height": {
+      "value": "1.5",
+      "description": "Used by `--spectrum-assetcard-title-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-cjk-letter-spacing": {
+      "value": "0em",
+      "description": "Used by `--spectrum-assetcard-title-letter-spacing`, `--spectrum-assetcard-header-content-letter-spacing`, `--spectrum-assetcard-content-letter-spacing`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-cjk-font-weight": {
+      "value": "400",
+      "description": "Used by `--spectrum-assetcard-header-content-font-weight`, `--spectrum-assetcard-content-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-cjk-line-height": {
+      "value": "1.7",
+      "description": "Used by `--spectrum-assetcard-header-content-line-height`, `--spectrum-assetcard-content-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-cjk-font-style": {
+      "value": "normal",
+      "description": "Used by `--spectrum-assetcard-header-content-font-style`, `--spectrum-assetcard-content-font-style`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-assestcard-focus-indicator-color": {
+      "description": "Used by `.spectrum-AssetCard-assetContainer:before`.",
+      "control": "color",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {
+    "highcontrast-assetcard-border-color-hover": {
+      "value": "var(--mod-assetcard-border-color-hover, var(--spectrum-assetcard-border-color-hover))",
+      "description": "Defined in `.spectrum-AssetCard`. <br/>Used by `.spectrum-AssetCard.is-selected .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard.is-selected .spectrum-Checkbox-box:before, .spectrum-AssetCard:focus-visible .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard:focus-visible .spectrum-Checkbox-box:before`, `.spectrum-AssetCard:hover .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard:hover .spectrum-Checkbox-box:before`. <br/>Defaults to `var(--mod-assetcard-border-color-hover, var(--spectrum-assetcard-border-color-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-assetcard-selectionindicator-color": {
+      "value": "var(--mod-assetcard-selectionindicator-color, var(--spectrum-assetcard-selectionindicator-color))",
+      "description": "Defined in `.spectrum-AssetCard`. <br/>Used by `.spectrum-AssetCard-selectionIndicator`. <br/>Defaults to `var(--mod-assetcard-selectionindicator-color, var(--spectrum-assetcard-selectionindicator-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-assetcard-border-color-selected": {
+      "value": "var(--mod-assetcard-border-color-selected, var(--spectrum-assetcard-border-color-selected))",
+      "description": "Defined in `.spectrum-AssetCard`. <br/>Used by `.spectrum-AssetCard.is-drop-target .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard.is-selected .spectrum-AssetCard-assetContainer:after`. <br/>Defaults to `var(--mod-assetcard-border-color-selected, var(--spectrum-assetcard-border-color-selected))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-assectcard-border-color-selected-down": {
+      "value": "var(--mod-assectcard-border-color-selected-down, var(--spectrum-assetcard-border-color-selected-down))",
+      "description": "Defined in `.spectrum-AssetCard`. <br/>Used by `.spectrum-AssetCard.is-drop-target:active .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard.is-selected:active .spectrum-AssetCard-assetContainer:after`. <br/>Defaults to `var(--mod-assectcard-border-color-selected-down, var(--spectrum-assetcard-border-color-selected-down))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-assetcard-border-color-selected-hover": {
+      "value": "var(--mod-assetcard-border-color-selected-hover, var(--spectrum-assetcard-border-color-selected-hover))",
+      "description": "Defined in `.spectrum-AssetCard`. <br/>Used by `.spectrum-AssetCard.is-drop-target:hover .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard.is-selected:hover .spectrum-AssetCard-assetContainer:after`. <br/>Defaults to `var(--mod-assetcard-border-color-selected-hover, var(--spectrum-assetcard-border-color-selected-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-assetcard-selectionindicator-background-color-ordered": {
+      "value": "var(--mod-assetcard-selectionindicator-background-color-ordered, var(--spectrum-assetcard-selectionindicator-background-color-ordered))",
+      "description": "Defined in `.spectrum-AssetCard`. <br/>Used by `.spectrum-AssetCard--orderedSelection .spectrum-AssetCard-selectionIndicator`. <br/>Defaults to `var(--mod-assetcard-selectionindicator-background-color-ordered, var(--spectrum-assetcard-selectionindicator-background-color-ordered))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/assetcard/stories/assetcard.stories.js b/components/assetcard/stories/assetcard.stories.js
index 2e917fbc25c..cdcf7c292fc 100644
--- a/components/assetcard/stories/assetcard.stories.js
+++ b/components/assetcard/stories/assetcard.stories.js
@@ -1,11 +1,13 @@
 import { default as Checkbox } from "@spectrum-css/checkbox/stories/checkbox.stories.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isFocused, isSelected } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { AssetCardGroup } from "./assetcard.test.js";
 import { Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * The asset card component allows users to select and manage assets and their metadata in a grid.
  *
@@ -92,6 +94,10 @@ export default {
 		},
 		packageJson,
 		metadata,
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 };
 
diff --git a/components/assetcard/stories/template.js b/components/assetcard/stories/template.js
index 1b44be4e568..5ca467192ae 100644
--- a/components/assetcard/stories/template.js
+++ b/components/assetcard/stories/template.js
@@ -11,6 +11,7 @@ import "../index.css";
 
 export const Template = ({
 	rootClass = "spectrum-AssetCard",
+	id = getRandomId("asset-card"),
 	image,
 	exampleImage,
 	title,
@@ -22,7 +23,6 @@ export const Template = ({
 	isDropTarget = false,
 	customClasses = [],
 	customStyles = {},
-	id = getRandomId("assetcard"),
 	testId,
 } = {}, context = {}) => {
 	const { updateArgs } = context;
diff --git a/components/assetlist/dist/metadata.json b/components/assetlist/dist/metadata.json
index 0da89f4ae57..0c84f8e6a0b 100644
--- a/components/assetlist/dist/metadata.json
+++ b/components/assetlist/dist/metadata.json
@@ -4,6 +4,12 @@
     ".spectrum-AssetList",
     ".spectrum-AssetList-item",
     ".spectrum-AssetList-item .spectrum-AssetList-itemThumbnail",
+    ".spectrum-AssetList-item:before",
+    ".spectrum-AssetList-item:focus .spectrum-Checkbox",
+    ".spectrum-AssetList-item:focus-within:focus-visible",
+    ".spectrum-AssetList-item:focus-within:focus-visible:before",
+    ".spectrum-AssetList-item:hover",
+    ".spectrum-AssetList-item:hover .spectrum-Checkbox",
     ".spectrum-AssetList-item.is-branch .spectrum-AssetList-itemChildIndicator",
     ".spectrum-AssetList-item.is-focused:focus-within",
     ".spectrum-AssetList-item.is-focused:focus-within:before",
@@ -15,81 +21,331 @@
     ".spectrum-AssetList-item.is-selected .spectrum-Checkbox",
     ".spectrum-AssetList-item.is-selected:focus",
     ".spectrum-AssetList-item.is-selected:hover",
-    ".spectrum-AssetList-item:before",
-    ".spectrum-AssetList-item:focus .spectrum-Checkbox",
-    ".spectrum-AssetList-item:focus-within:focus-visible",
-    ".spectrum-AssetList-item:focus-within:focus-visible:before",
-    ".spectrum-AssetList-item:hover",
-    ".spectrum-AssetList-item:hover .spectrum-Checkbox",
     ".spectrum-AssetList-itemChildIndicator",
     ".spectrum-AssetList-itemLabel",
     ".spectrum-AssetList-itemSelector",
     ".spectrum-AssetList:dir(rtl)"
   ],
-  "modifiers": [
-    "--mod-assetlist-border-color-key-focus",
-    "--mod-assetlist-child-indicator-animation",
-    "--mod-assetlist-item-animation",
-    "--mod-assetlist-item-background-color-down",
-    "--mod-assetlist-item-background-color-hover",
-    "--mod-assetlist-item-background-color-selected",
-    "--mod-assetlist-item-background-color-selected-hover",
-    "--mod-assetlist-item-border-radius",
-    "--mod-assetlist-item-font-size",
-    "--mod-assetlist-item-font-weight",
-    "--mod-assetlist-item-height",
-    "--mod-assetlist-item-label-padding-inline-start",
-    "--mod-assetlist-item-margin-bottom",
-    "--mod-assetlist-item-padding-inline-end",
-    "--mod-assetlist-item-padding-inline-start",
-    "--mod-assetlist-label-color",
-    "--mod-assetlist-thumbnail-margin-left",
-    "--mod-assetlist-thumbnail-width",
-    "--mod-assetlist-thumnail-height",
-    "--mod-assetlist-width"
-  ],
-  "component": [
-    "--spectrum-assetlist-border-color-key-focus",
-    "--spectrum-assetlist-child-indicator-animation",
-    "--spectrum-assetlist-item-animation",
-    "--spectrum-assetlist-item-background-color-down",
-    "--spectrum-assetlist-item-background-color-hover",
-    "--spectrum-assetlist-item-background-color-selected",
-    "--spectrum-assetlist-item-background-color-selected-hover",
-    "--spectrum-assetlist-item-border-radius",
-    "--spectrum-assetlist-item-font-size",
-    "--spectrum-assetlist-item-font-weight",
-    "--spectrum-assetlist-item-height",
-    "--spectrum-assetlist-item-label-padding-inline-start",
-    "--spectrum-assetlist-item-margin-block-end",
-    "--spectrum-assetlist-item-padding-inline-end",
-    "--spectrum-assetlist-item-padding-inline-start",
-    "--spectrum-assetlist-label-color",
-    "--spectrum-assetlist-thumbnail-height",
-    "--spectrum-assetlist-thumbnail-margin-inline-start",
-    "--spectrum-assetlist-thumbnail-width",
-    "--spectrum-assetlist-width"
-  ],
-  "global": [
-    "--spectrum-animation-duration-100",
-    "--spectrum-font-size-100",
-    "--spectrum-gray-100",
-    "--spectrum-gray-200",
-    "--spectrum-logical-rotation",
-    "--spectrum-neutral-content-color-default",
-    "--spectrum-regular-font-weight",
-    "--spectrum-spacing-100",
-    "--spectrum-spacing-300",
-    "--spectrum-spacing-400",
-    "--spectrum-spacing-600",
-    "--spectrum-spacing-75"
-  ],
-  "passthroughs": [],
-  "high-contrast": [
-    "--highcontrast-assetlist-border-color-key-focus",
-    "--highcontrast-assetlist-item-background-color-hover",
-    "--highcontrast-assetlist-item-background-color-selected",
-    "--highcontrast-assetlist-item-background-color-selected-hover",
-    "--highcontrast-assetlist-label-color"
-  ]
+  "modifiers": {
+    "mod-assetlist-label-color": {
+      "description": "Used by `.spectrum-AssetList-item`. <br/>Defaults to `var(--spectrum-assetlist-label-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-assetlist-width": {
+      "description": "Used by `.spectrum-AssetList-item`. <br/>Defaults to `var(--spectrum-assetlist-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetlist-item-padding-inline-start": {
+      "description": "Used by `.spectrum-AssetList-item`. <br/>Defaults to `var(--spectrum-assetlist-item-padding-inline-start)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetlist-item-padding-inline-end": {
+      "description": "Used by `.spectrum-AssetList-item`. <br/>Defaults to `var(--spectrum-assetlist-item-padding-inline-end)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetlist-item-margin-bottom": {
+      "description": "Used by `.spectrum-AssetList-item`. <br/>Defaults to `var(--spectrum-assetlist-item-margin-block-end)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetlist-item-animation": {
+      "description": "Used by `.spectrum-AssetList-item`. <br/>Defaults to `var(--spectrum-assetlist-item-animation)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetlist-item-font-size": {
+      "description": "Used by `.spectrum-AssetList-item`. <br/>Defaults to `var(--spectrum-assetlist-item-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetlist-item-font-weight": {
+      "description": "Used by `.spectrum-AssetList-item`. <br/>Defaults to `var(--spectrum-assetlist-item-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetlist-item-height": {
+      "description": "Used by `.spectrum-AssetList-item, .spectrum-AssetList-item:before`. <br/>Defaults to `var(--spectrum-assetlist-item-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetlist-item-border-radius": {
+      "description": "Used by `.spectrum-AssetList-item, .spectrum-AssetList-item:before`. <br/>Defaults to `var(--spectrum-assetlist-item-border-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetlist-thumbnail-width": {
+      "description": "Used by `.spectrum-AssetList-item .spectrum-AssetList-itemThumbnail`. <br/>Defaults to `var(--spectrum-assetlist-thumbnail-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetlist-thumnail-height": {
+      "description": "Used by `.spectrum-AssetList-item .spectrum-AssetList-itemThumbnail`. <br/>Defaults to `var(--spectrum-assetlist-thumbnail-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetlist-thumbnail-margin-left": {
+      "description": "Used by `.spectrum-AssetList-item .spectrum-AssetList-itemThumbnail`. <br/>Defaults to `var(--spectrum-assetlist-thumbnail-margin-inline-start)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetlist-item-background-color-hover": {
+      "description": "Used by `.spectrum-AssetList-item.is-focused:focus-within, .spectrum-AssetList-item:focus-within:focus-visible`, `.spectrum-AssetList-item:hover`. <br/>Defaults to `var(--spectrum-assetlist-item-background-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-assetlist-border-color-key-focus": {
+      "description": "Used by `.spectrum-AssetList-item.is-focused:focus-within:before, .spectrum-AssetList-item:focus-within:focus-visible:before`. <br/>Defaults to `var(--spectrum-assetlist-border-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-assetlist-item-background-color-down": {
+      "description": "Used by `.spectrum-AssetList-item.is-navigated, .spectrum-AssetList-item.is-navigated:focus`, `.spectrum-AssetList-item.is-navigated:hover`. <br/>Defaults to `var(--spectrum-assetlist-item-background-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-assetlist-item-background-color-selected": {
+      "description": "Used by `.spectrum-AssetList-item.is-selected`. <br/>Defaults to `var(--spectrum-assetlist-item-background-color-selected)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-assetlist-item-background-color-selected-hover": {
+      "description": "Used by `.spectrum-AssetList-item.is-selected:focus`, `.spectrum-AssetList-item.is-selected:hover`. <br/>Defaults to `var(--spectrum-assetlist-item-background-color-selected-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-assetlist-child-indicator-animation": {
+      "description": "Used by `.spectrum-AssetList-itemChildIndicator`. <br/>Defaults to `var(--spectrum-assetlist-child-indicator-animation)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-assetlist-item-label-padding-inline-start": {
+      "description": "Used by `.spectrum-AssetList-itemLabel`. <br/>Defaults to `var(--spectrum-assetlist-item-label-padding-inline-start)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-assetlist-item-background-color-down": {
+      "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+      "description": "Defined in `.spectrum-AssetList`. <br/>Used by `.spectrum-AssetList-item.is-navigated, .spectrum-AssetList-item.is-navigated:focus`, `.spectrum-AssetList-item.is-navigated:hover`. <br/>Defaults to `var(--spectrum-gray-200)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-assetlist-item-background-color-hover": {
+      "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+      "description": "Defined in `.spectrum-AssetList`. <br/>Used by `.spectrum-AssetList-item.is-focused:focus-within, .spectrum-AssetList-item:focus-within:focus-visible`, `.spectrum-AssetList-item:hover`. <br/>Defaults to `var(--spectrum-gray-100)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-assetlist-width": {
+      "value": "272px",
+      "description": "Defined in `.spectrum-AssetList`. <br/>Used by `.spectrum-AssetList-item`. <br/>Defaults to `272px`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetlist-child-indicator-animation": {
+      "value": "var(--spectrum-animation-duration-100)",
+      "description": "Defined in `.spectrum-AssetList`. <br/>Used by `.spectrum-AssetList-itemChildIndicator`. <br/>Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetlist-item-height": {
+      "value": "40px",
+      "description": "Defined in `.spectrum-AssetList`. <br/>Used by `.spectrum-AssetList-item, .spectrum-AssetList-item:before`. <br/>Defaults to `var(--spectrum-spacing-600)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetlist-item-padding-inline-start": {
+      "value": "16px",
+      "description": "Defined in `.spectrum-AssetList`. <br/>Used by `.spectrum-AssetList-item`. <br/>Defaults to `var(--spectrum-spacing-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetlist-item-padding-inline-end": {
+      "value": "16px",
+      "description": "Defined in `.spectrum-AssetList`. <br/>Used by `.spectrum-AssetList-item`. <br/>Defaults to `var(--spectrum-spacing-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetlist-item-margin-block-end": {
+      "value": "4px",
+      "description": "Defined in `.spectrum-AssetList`. <br/>Used by `.spectrum-AssetList-item`. <br/>Defaults to `var(--spectrum-spacing-75)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetlist-item-border-radius": {
+      "value": "4px",
+      "description": "Defined in `.spectrum-AssetList`. <br/>Used by `.spectrum-AssetList-item, .spectrum-AssetList-item:before`. <br/>Defaults to `var(--spectrum-spacing-75)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetlist-item-animation": {
+      "value": "var(--spectrum-animation-duration-100)",
+      "description": "Defined in `.spectrum-AssetList`. <br/>Used by `.spectrum-AssetList-item`. <br/>Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetlist-item-font-size": {
+      "value": "14px",
+      "description": "Defined in `.spectrum-AssetList`. <br/>Used by `.spectrum-AssetList-item`. <br/>Defaults to `var(--spectrum-font-size-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetlist-item-font-weight": {
+      "value": "400",
+      "description": "Defined in `.spectrum-AssetList`. <br/>Used by `.spectrum-AssetList-item`. <br/>Defaults to `var(--spectrum-regular-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetlist-thumbnail-width": {
+      "value": "24px",
+      "description": "Defined in `.spectrum-AssetList`. <br/>Used by `.spectrum-AssetList-item .spectrum-AssetList-itemThumbnail`. <br/>Defaults to `var(--spectrum-spacing-400)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetlist-thumbnail-height": {
+      "value": "24px",
+      "description": "Defined in `.spectrum-AssetList`. <br/>Used by `.spectrum-AssetList-item .spectrum-AssetList-itemThumbnail`. <br/>Defaults to `var(--spectrum-spacing-400)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetlist-thumbnail-margin-inline-start": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-AssetList`. <br/>Used by `.spectrum-AssetList-item .spectrum-AssetList-itemThumbnail`. <br/>Defaults to `var(--spectrum-spacing-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetlist-item-label-padding-inline-start": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-AssetList`. <br/>Used by `.spectrum-AssetList-itemLabel`. <br/>Defaults to `var(--spectrum-spacing-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-assetlist-label-color": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-AssetList`. <br/>Used by `.spectrum-AssetList-item`. <br/>Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-assetlist-border-color-key-focus": {
+      "description": "Used by `.spectrum-AssetList-item.is-focused:focus-within:before, .spectrum-AssetList-item:focus-within:focus-visible:before`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-assetlist-item-background-color-selected": {
+      "description": "Used by `.spectrum-AssetList-item.is-selected`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-assetlist-item-background-color-selected-hover": {
+      "description": "Used by `.spectrum-AssetList-item.is-selected:focus`, `.spectrum-AssetList-item.is-selected:hover`.",
+      "control": "color",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-gray-200": {
+      "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+      "description": "Used by `--spectrum-assetlist-item-background-color-down`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-100": {
+      "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+      "description": "Used by `--spectrum-assetlist-item-background-color-hover`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-animation-duration-100": {
+      "description": "Used by `--spectrum-assetlist-child-indicator-animation`, `--spectrum-assetlist-item-animation`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-600": {
+      "value": "40px",
+      "description": "Used by `--spectrum-assetlist-item-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-300": {
+      "value": "16px",
+      "description": "Used by `--spectrum-assetlist-item-padding-inline-start`, `--spectrum-assetlist-item-padding-inline-end`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-75": {
+      "value": "4px",
+      "description": "Used by `--spectrum-assetlist-item-margin-block-end`, `--spectrum-assetlist-item-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-100": {
+      "value": "14px",
+      "description": "Used by `--spectrum-assetlist-item-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-regular-font-weight": {
+      "value": "400",
+      "description": "Used by `--spectrum-assetlist-item-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-400": {
+      "value": "24px",
+      "description": "Used by `--spectrum-assetlist-thumbnail-width`, `--spectrum-assetlist-thumbnail-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-100": {
+      "value": "8px",
+      "description": "Used by `--spectrum-assetlist-thumbnail-margin-inline-start`, `--spectrum-assetlist-item-label-padding-inline-start`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-assetlist-label-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-logical-rotation": {
+      "value": "matrix(-1, 0, 0, 1, 0, 0)",
+      "description": "Defined in `.spectrum-AssetList:dir(rtl)`. <br/>Used by `.spectrum-AssetList-itemChildIndicator`. <br/>Defaults to `matrix(-1, 0, 0, 1, 0, 0)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {
+    "highcontrast-assetlist-label-color": {
+      "value": "var(--mod-assetlist-label-color, var(--spectrum-assetlist-label-color))",
+      "description": "Defined in `.spectrum-AssetList-item`, `.spectrum-AssetList-item.is-navigated, .spectrum-AssetList-item.is-selected`, `.spectrum-AssetList-item:hover`. <br/>Used by `.spectrum-AssetList-item`. <br/>Defaults to `var(--mod-assetlist-label-color, var(--spectrum-assetlist-label-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-assetlist-item-background-color-hover": {
+      "value": "var(--mod-assetlist-item-background-color-hover, var(--spectrum-assetlist-item-background-color-hover))",
+      "description": "Defined in `.spectrum-AssetList-item`. <br/>Used by `.spectrum-AssetList-item.is-focused:focus-within, .spectrum-AssetList-item:focus-within:focus-visible`, `.spectrum-AssetList-item:hover`. <br/>Defaults to `var(--mod-assetlist-item-background-color-hover, var(--spectrum-assetlist-item-background-color-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-assetlist-border-color-key-focus": {
+      "value": "var(--mod-assetlist-border-color-key-focus, var(--spectrum-assetlist-border-color-key-focus))",
+      "description": "Defined in `.spectrum-AssetList-item`. <br/>Used by `.spectrum-AssetList-item.is-focused:focus-within:before, .spectrum-AssetList-item:focus-within:focus-visible:before`. <br/>Defaults to `var(--mod-assetlist-border-color-key-focus, var(--spectrum-assetlist-border-color-key-focus))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-assetlist-item-background-color-selected": {
+      "value": "var(--mod-assetlist-item-background-color-selected, var(--spectrum-assetlist-item-background-color-selected))",
+      "description": "Defined in `.spectrum-AssetList-item`. <br/>Used by `.spectrum-AssetList-item.is-selected`. <br/>Defaults to `var(--mod-assetlist-item-background-color-selected, var(--spectrum-assetlist-item-background-color-selected))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-assetlist-item-background-color-selected-hover": {
+      "value": "var(--mod-assetlist-item-background-color-selected-hover, var(--spectrum-assetlist-item-background-color-selected-hover))",
+      "description": "Defined in `.spectrum-AssetList-item`. <br/>Used by `.spectrum-AssetList-item.is-selected:focus`, `.spectrum-AssetList-item.is-selected:hover`. <br/>Defaults to `var(--mod-assetlist-item-background-color-selected-hover, var(--spectrum-assetlist-item-background-color-selected-hover))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/assetlist/stories/assetlist.stories.js b/components/assetlist/stories/assetlist.stories.js
index d421267b95d..ddbcd5438fb 100644
--- a/components/assetlist/stories/assetlist.stories.js
+++ b/components/assetlist/stories/assetlist.stories.js
@@ -1,8 +1,10 @@
 import { default as Checkbox } from "@spectrum-css/checkbox/stories/checkbox.stories.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
+import { AssetListGroup } from "./assetlist.test.js";
+
+// Local assets to render the component styles and structure
 import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
-import { AssetListGroup } from "./assetlist.test.js";
 
 /**
  * A selectable list of assets, often used inside of miller columns.
@@ -22,6 +24,10 @@ export default {
 		},
 		packageJson,
 		metadata,
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 };
 
diff --git a/components/assetlist/stories/template.js b/components/assetlist/stories/template.js
index f5c6d9731af..22d373ae292 100644
--- a/components/assetlist/stories/template.js
+++ b/components/assetlist/stories/template.js
@@ -73,9 +73,9 @@ export const AssetListItem = ({
 
 export const Template = ({
 	rootClass = "spectrum-AssetList",
+	id = getRandomId("asset-list"),
 	items = [],
 	customClasses = [],
-	id = getRandomId("assetlist"),
 } = {}, context = {}) => {
 	return html`
 		<ul
diff --git a/components/avatar/dist/metadata.json b/components/avatar/dist/metadata.json
index 6b5fb54aac2..e2aba629f84 100644
--- a/components/avatar/dist/metadata.json
+++ b/components/avatar/dist/metadata.json
@@ -21,57 +21,260 @@
     ".spectrum-Avatar--size900",
     ".spectrum-Avatar-image",
     ".spectrum-Avatar-link",
+    ".spectrum-Avatar:not(.is-disabled) .spectrum-Avatar-link:focus-visible:after",
     ".spectrum-Avatar.is-disabled",
-    ".spectrum-Avatar.is-focused:not(.is-disabled):after",
-    ".spectrum-Avatar:not(.is-disabled) .spectrum-Avatar-link:focus-visible:after"
+    ".spectrum-Avatar.is-focused:not(.is-disabled):after"
   ],
-  "modifiers": [
-    "--mod-avatar-block-size",
-    "--mod-avatar-border-radius",
-    "--mod-avatar-color-opacity",
-    "--mod-avatar-color-opacity-disabled",
-    "--mod-avatar-focus-indicator-color",
-    "--mod-avatar-focus-indicator-gap",
-    "--mod-avatar-focus-indicator-thickness",
-    "--mod-avatar-inline-size"
-  ],
-  "component": [
-    "--spectrum-avatar-block-size",
-    "--spectrum-avatar-border-color",
-    "--spectrum-avatar-border-color-default",
-    "--spectrum-avatar-border-radius",
-    "--spectrum-avatar-border-thickness",
-    "--spectrum-avatar-border-width",
-    "--spectrum-avatar-color-opacity",
-    "--spectrum-avatar-color-opacity-disabled",
-    "--spectrum-avatar-focus-indicator-color",
-    "--spectrum-avatar-focus-indicator-gap",
-    "--spectrum-avatar-focus-indicator-thickness",
-    "--spectrum-avatar-inline-size",
-    "--spectrum-avatar-opacity-disabled",
-    "--spectrum-avatar-size-100",
-    "--spectrum-avatar-size-1000",
-    "--spectrum-avatar-size-1100",
-    "--spectrum-avatar-size-1200",
-    "--spectrum-avatar-size-1300",
-    "--spectrum-avatar-size-1400",
-    "--spectrum-avatar-size-1500",
-    "--spectrum-avatar-size-200",
-    "--spectrum-avatar-size-300",
-    "--spectrum-avatar-size-400",
-    "--spectrum-avatar-size-50",
-    "--spectrum-avatar-size-500",
-    "--spectrum-avatar-size-600",
-    "--spectrum-avatar-size-700",
-    "--spectrum-avatar-size-75",
-    "--spectrum-avatar-size-800",
-    "--spectrum-avatar-size-900"
-  ],
-  "global": [
-    "--spectrum-focus-indicator-color",
-    "--spectrum-focus-indicator-gap",
-    "--spectrum-focus-indicator-thickness"
-  ],
-  "passthroughs": [],
-  "high-contrast": ["--highcontrast-avatar-focus-indicator-color"]
+  "modifiers": {
+    "mod-avatar-inline-size": {
+      "description": "Used by `.spectrum-Avatar`, `.spectrum-Avatar.is-focused:not(.is-disabled):after, .spectrum-Avatar:not(.is-disabled) .spectrum-Avatar-link:focus-visible:after`, `.spectrum-Avatar-image`. <br/>Defaults to `var(--spectrum-avatar-inline-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-avatar-block-size": {
+      "description": "Used by `.spectrum-Avatar`, `.spectrum-Avatar-image`. <br/>Defaults to `var(--spectrum-avatar-block-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-avatar-border-radius": {
+      "description": "Used by `.spectrum-Avatar`, `.spectrum-Avatar.is-focused:not(.is-disabled):after, .spectrum-Avatar:not(.is-disabled) .spectrum-Avatar-link:focus-visible:after`, `.spectrum-Avatar-image`. <br/>Defaults to `var(--spectrum-avatar-border-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-avatar-color-opacity": {
+      "description": "Used by `.spectrum-Avatar`. <br/>Defaults to `var(--spectrum-avatar-color-opacity)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-avatar-color-opacity-disabled": {
+      "description": "Used by `.spectrum-Avatar.is-disabled`. <br/>Defaults to `var(--spectrum-avatar-color-opacity-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-avatar-focus-indicator-gap": {
+      "description": "Used by `.spectrum-Avatar.is-focused:not(.is-disabled):after, .spectrum-Avatar:not(.is-disabled) .spectrum-Avatar-link:focus-visible:after`. <br/>Defaults to `var(--spectrum-avatar-focus-indicator-gap)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-avatar-focus-indicator-thickness": {
+      "description": "Used by `.spectrum-Avatar.is-focused:not(.is-disabled):after, .spectrum-Avatar:not(.is-disabled) .spectrum-Avatar-link:focus-visible:after`. <br/>Defaults to `var(--spectrum-avatar-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-avatar-focus-indicator-color": {
+      "description": "Used by `.spectrum-Avatar.is-focused:not(.is-disabled):after, .spectrum-Avatar:not(.is-disabled) .spectrum-Avatar-link:focus-visible:after`. <br/>Defaults to `var(--spectrum-avatar-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-avatar-color-opacity": {
+      "value": "1",
+      "description": "Defined in `.spectrum-Avatar`. <br/>Used by `.spectrum-Avatar`. <br/>Defaults to `1`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-avatar-inline-size": {
+      "value": "104px",
+      "description": "Defined in `.spectrum-Avatar`, `.spectrum-Avatar--size50`, `.spectrum-Avatar--size75`, `.spectrum-Avatar--size100`, `.spectrum-Avatar--size200`, `.spectrum-Avatar--size300`, `.spectrum-Avatar--size400`, `.spectrum-Avatar--size500`, `.spectrum-Avatar--size600`, `.spectrum-Avatar--size700`, `.spectrum-Avatar--size800`, `.spectrum-Avatar--size900`, `.spectrum-Avatar--size1000`, `.spectrum-Avatar--size1100`, `.spectrum-Avatar--size1200`, `.spectrum-Avatar--size1300`, `.spectrum-Avatar--size1400`, `.spectrum-Avatar--size1500`. <br/>Used by `.spectrum-Avatar`, `.spectrum-Avatar.is-focused:not(.is-disabled):after, .spectrum-Avatar:not(.is-disabled) .spectrum-Avatar-link:focus-visible:after`, `.spectrum-Avatar-image`. <br/>Defaults to `var(--spectrum-avatar-size-1500)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-avatar-size-100": {
+      "value": "24px",
+      "description": "Used by `--spectrum-avatar-inline-size`, `--spectrum-avatar-block-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-avatar-block-size": {
+      "value": "104px",
+      "description": "Defined in `.spectrum-Avatar`, `.spectrum-Avatar--size50`, `.spectrum-Avatar--size75`, `.spectrum-Avatar--size100`, `.spectrum-Avatar--size200`, `.spectrum-Avatar--size300`, `.spectrum-Avatar--size400`, `.spectrum-Avatar--size500`, `.spectrum-Avatar--size600`, `.spectrum-Avatar--size700`, `.spectrum-Avatar--size800`, `.spectrum-Avatar--size900`, `.spectrum-Avatar--size1000`, `.spectrum-Avatar--size1100`, `.spectrum-Avatar--size1200`, `.spectrum-Avatar--size1300`, `.spectrum-Avatar--size1400`, `.spectrum-Avatar--size1500`. <br/>Used by `--spectrum-avatar-border-radius`, `.spectrum-Avatar`, `.spectrum-Avatar-image`. <br/>Defaults to `var(--spectrum-avatar-size-1500)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-avatar-border-radius": {
+      "value": "var(--spectrum-avatar-block-size)",
+      "description": "Defined in `.spectrum-Avatar`. <br/>Used by `.spectrum-Avatar`, `.spectrum-Avatar.is-focused:not(.is-disabled):after, .spectrum-Avatar:not(.is-disabled) .spectrum-Avatar-link:focus-visible:after`, `.spectrum-Avatar-image`. <br/>Defaults to `var(--spectrum-avatar-block-size)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-avatar-border-thickness": {
+      "value": "1px",
+      "description": "Defined in `.spectrum-Avatar`. <br/>Used by `.spectrum-Avatar`. <br/>Defaults to `var(--spectrum-avatar-border-width)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-avatar-border-width": {
+      "value": "1px",
+      "description": "Used by `--spectrum-avatar-border-thickness`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-avatar-border-color-default": {
+      "value": "var(--spectrum-gray-25)",
+      "description": "Defined in `.spectrum-Avatar`. <br/>Used by `.spectrum-Avatar`. <br/>Defaults to `var(--spectrum-avatar-border-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-avatar-border-color": {
+      "value": "var(--spectrum-gray-25)",
+      "description": "Used by `--spectrum-avatar-border-color-default`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-avatar-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Avatar`. <br/>Used by `.spectrum-Avatar.is-focused:not(.is-disabled):after, .spectrum-Avatar:not(.is-disabled) .spectrum-Avatar-link:focus-visible:after`. <br/>Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-avatar-focus-indicator-gap": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Avatar`. <br/>Used by `.spectrum-Avatar.is-focused:not(.is-disabled):after, .spectrum-Avatar:not(.is-disabled) .spectrum-Avatar-link:focus-visible:after`. <br/>Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-avatar-focus-indicator-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Defined in `.spectrum-Avatar`. <br/>Used by `.spectrum-Avatar.is-focused:not(.is-disabled):after, .spectrum-Avatar:not(.is-disabled) .spectrum-Avatar-link:focus-visible:after`. <br/>Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-avatar-color-opacity-disabled": {
+      "value": "0.3",
+      "description": "Defined in `.spectrum-Avatar`. <br/>Used by `.spectrum-Avatar.is-disabled`. <br/>Defaults to `var(--spectrum-avatar-opacity-disabled)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-avatar-opacity-disabled": {
+      "value": "0.3",
+      "description": "Used by `--spectrum-avatar-color-opacity-disabled`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-avatar-size-50": {
+      "value": "16px",
+      "description": "Used by `--spectrum-avatar-inline-size`, `--spectrum-avatar-block-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-avatar-size-75": {
+      "value": "20px",
+      "description": "Used by `--spectrum-avatar-inline-size`, `--spectrum-avatar-block-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-avatar-size-200": {
+      "value": "28px",
+      "description": "Used by `--spectrum-avatar-inline-size`, `--spectrum-avatar-block-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-avatar-size-300": {
+      "value": "32px",
+      "description": "Used by `--spectrum-avatar-inline-size`, `--spectrum-avatar-block-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-avatar-size-400": {
+      "value": "36px",
+      "description": "Used by `--spectrum-avatar-inline-size`, `--spectrum-avatar-block-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-avatar-size-500": {
+      "value": "40px",
+      "description": "Used by `--spectrum-avatar-inline-size`, `--spectrum-avatar-block-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-avatar-size-600": {
+      "value": "44px",
+      "description": "Used by `--spectrum-avatar-inline-size`, `--spectrum-avatar-block-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-avatar-size-700": {
+      "value": "48px",
+      "description": "Used by `--spectrum-avatar-inline-size`, `--spectrum-avatar-block-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-avatar-size-800": {
+      "value": "52px",
+      "description": "Used by `--spectrum-avatar-inline-size`, `--spectrum-avatar-block-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-avatar-size-900": {
+      "value": "56px",
+      "description": "Used by `--spectrum-avatar-inline-size`, `--spectrum-avatar-block-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-avatar-size-1000": {
+      "value": "64px",
+      "description": "Used by `--spectrum-avatar-inline-size`, `--spectrum-avatar-block-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-avatar-size-1100": {
+      "value": "72px",
+      "description": "Used by `--spectrum-avatar-inline-size`, `--spectrum-avatar-block-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-avatar-size-1200": {
+      "value": "80px",
+      "description": "Used by `--spectrum-avatar-inline-size`, `--spectrum-avatar-block-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-avatar-size-1300": {
+      "value": "88px",
+      "description": "Used by `--spectrum-avatar-inline-size`, `--spectrum-avatar-block-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-avatar-size-1400": {
+      "value": "96px",
+      "description": "Used by `--spectrum-avatar-inline-size`, `--spectrum-avatar-block-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-avatar-size-1500": {
+      "value": "104px",
+      "description": "Used by `--spectrum-avatar-inline-size`, `--spectrum-avatar-block-size`.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Used by `--spectrum-avatar-focus-indicator-thickness`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-gap": {
+      "value": "2px",
+      "description": "Used by `--spectrum-avatar-focus-indicator-gap`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Used by `--spectrum-avatar-focus-indicator-color`.",
+      "control": "color",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {
+    "highcontrast-avatar-focus-indicator-color": {
+      "value": "var(--mod-avatar-focus-indicator-color, var(--spectrum-avatar-focus-indicator-color))",
+      "description": "Defined in `.spectrum-Avatar`. <br/>Used by `.spectrum-Avatar.is-focused:not(.is-disabled):after, .spectrum-Avatar:not(.is-disabled) .spectrum-Avatar-link:focus-visible:after`. <br/>Defaults to `var(--mod-avatar-focus-indicator-color, var(--spectrum-avatar-focus-indicator-color))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/avatar/stories/avatar.stories.js b/components/avatar/stories/avatar.stories.js
index b3f4d56aea8..7d95d915c76 100644
--- a/components/avatar/stories/avatar.stories.js
+++ b/components/avatar/stories/avatar.stories.js
@@ -1,11 +1,13 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { AvatarGroup } from "./avatar.test.js";
 import { Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * An image representing a user.
  */
@@ -62,6 +64,10 @@ export default {
 		status: {
 			type: "migrated",
 		},
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 	tags: ["migrated"],
 };
diff --git a/components/badge/dist/metadata.json b/components/badge/dist/metadata.json
index 29aa729974a..927d9135c9e 100644
--- a/components/badge/dist/metadata.json
+++ b/components/badge/dist/metadata.json
@@ -32,13 +32,13 @@
     ".spectrum-Badge--sizeL",
     ".spectrum-Badge--sizeS",
     ".spectrum-Badge--sizeXL",
+    ".spectrum-Badge--style-outline:is(.spectrum-Badge--neutral, .spectrum-Badge--accent, .spectrum-Badge--informative, .spectrum-Badge--negative, .spectrum-Badge--positive, .spectrum-Badge--notice)",
     ".spectrum-Badge--style-outline.spectrum-Badge--accent",
     ".spectrum-Badge--style-outline.spectrum-Badge--informative",
     ".spectrum-Badge--style-outline.spectrum-Badge--negative",
     ".spectrum-Badge--style-outline.spectrum-Badge--neutral",
     ".spectrum-Badge--style-outline.spectrum-Badge--notice",
     ".spectrum-Badge--style-outline.spectrum-Badge--positive",
-    ".spectrum-Badge--style-outline:is(.spectrum-Badge--neutral, .spectrum-Badge--accent, .spectrum-Badge--informative, .spectrum-Badge--negative, .spectrum-Badge--positive, .spectrum-Badge--notice)",
     ".spectrum-Badge--style-subtle",
     ".spectrum-Badge--style-subtle.spectrum-Badge--accent",
     ".spectrum-Badge--style-subtle.spectrum-Badge--blue",
@@ -75,269 +75,1485 @@
     ".spectrum-Badge-label:lang(ko)",
     ".spectrum-Badge-label:lang(zh)"
   ],
-  "modifiers": [
-    "--mod-badge-background-color-accent",
-    "--mod-badge-background-color-blue",
-    "--mod-badge-background-color-brown",
-    "--mod-badge-background-color-celery",
-    "--mod-badge-background-color-chartreuse",
-    "--mod-badge-background-color-cinnamon",
-    "--mod-badge-background-color-cyan",
-    "--mod-badge-background-color-default",
-    "--mod-badge-background-color-fuchsia",
-    "--mod-badge-background-color-gray",
-    "--mod-badge-background-color-green",
-    "--mod-badge-background-color-indigo",
-    "--mod-badge-background-color-informative",
-    "--mod-badge-background-color-magenta",
-    "--mod-badge-background-color-negative",
-    "--mod-badge-background-color-notice",
-    "--mod-badge-background-color-orange",
-    "--mod-badge-background-color-pink",
-    "--mod-badge-background-color-positive",
-    "--mod-badge-background-color-purple",
-    "--mod-badge-background-color-red",
-    "--mod-badge-background-color-seafoam",
-    "--mod-badge-background-color-silver",
-    "--mod-badge-background-color-turquoise",
-    "--mod-badge-background-color-yellow",
-    "--mod-badge-border-color",
-    "--mod-badge-border-width",
-    "--mod-badge-corner-radius",
-    "--mod-badge-font-size",
-    "--mod-badge-height",
-    "--mod-badge-icon-only-spacing-horizontal",
-    "--mod-badge-icon-spacing-horizontal",
-    "--mod-badge-icon-spacing-vertical-top",
-    "--mod-badge-icon-text-spacing",
-    "--mod-badge-label-icon-color",
-    "--mod-badge-label-spacing-horizontal",
-    "--mod-badge-label-spacing-vertical-bottom",
-    "--mod-badge-label-spacing-vertical-top",
-    "--mod-badge-line-height",
-    "--mod-badge-line-height-cjk",
-    "--mod-badge-outline-background-color-default",
-    "--mod-badge-outline-border-color-accent",
-    "--mod-badge-outline-border-color-informative",
-    "--mod-badge-outline-border-color-negative",
-    "--mod-badge-outline-border-color-neutral",
-    "--mod-badge-outline-border-color-notice",
-    "--mod-badge-outline-border-color-positive",
-    "--mod-badge-outline-label-icon-color",
-    "--mod-badge-subtle-background-color-accent",
-    "--mod-badge-subtle-background-color-blue",
-    "--mod-badge-subtle-background-color-brown",
-    "--mod-badge-subtle-background-color-celery",
-    "--mod-badge-subtle-background-color-chartreuse",
-    "--mod-badge-subtle-background-color-cinnamon",
-    "--mod-badge-subtle-background-color-cyan",
-    "--mod-badge-subtle-background-color-default",
-    "--mod-badge-subtle-background-color-fuchsia",
-    "--mod-badge-subtle-background-color-gray",
-    "--mod-badge-subtle-background-color-green",
-    "--mod-badge-subtle-background-color-indigo",
-    "--mod-badge-subtle-background-color-informative",
-    "--mod-badge-subtle-background-color-magenta",
-    "--mod-badge-subtle-background-color-negative",
-    "--mod-badge-subtle-background-color-notice",
-    "--mod-badge-subtle-background-color-orange",
-    "--mod-badge-subtle-background-color-pink",
-    "--mod-badge-subtle-background-color-positive",
-    "--mod-badge-subtle-background-color-purple",
-    "--mod-badge-subtle-background-color-red",
-    "--mod-badge-subtle-background-color-seafoam",
-    "--mod-badge-subtle-background-color-silver",
-    "--mod-badge-subtle-background-color-turquoise",
-    "--mod-badge-subtle-background-color-yellow",
-    "--mod-badge-subtle-label-icon-color",
-    "--mod-badge-workflow-icon-size"
-  ],
-  "component": [
-    "--spectrum-badge-background-color-accent",
-    "--spectrum-badge-background-color-blue",
-    "--spectrum-badge-background-color-brown",
-    "--spectrum-badge-background-color-celery",
-    "--spectrum-badge-background-color-chartreuse",
-    "--spectrum-badge-background-color-cinnamon",
-    "--spectrum-badge-background-color-cyan",
-    "--spectrum-badge-background-color-default",
-    "--spectrum-badge-background-color-fuchsia",
-    "--spectrum-badge-background-color-gray",
-    "--spectrum-badge-background-color-green",
-    "--spectrum-badge-background-color-indigo",
-    "--spectrum-badge-background-color-informative",
-    "--spectrum-badge-background-color-magenta",
-    "--spectrum-badge-background-color-negative",
-    "--spectrum-badge-background-color-notice",
-    "--spectrum-badge-background-color-orange",
-    "--spectrum-badge-background-color-pink",
-    "--spectrum-badge-background-color-positive",
-    "--spectrum-badge-background-color-purple",
-    "--spectrum-badge-background-color-red",
-    "--spectrum-badge-background-color-seafoam",
-    "--spectrum-badge-background-color-silver",
-    "--spectrum-badge-background-color-turquoise",
-    "--spectrum-badge-background-color-yellow",
-    "--spectrum-badge-border-color",
-    "--spectrum-badge-border-width",
-    "--spectrum-badge-corner-radius",
-    "--spectrum-badge-font-size",
-    "--spectrum-badge-font-weight",
-    "--spectrum-badge-height",
-    "--spectrum-badge-icon-only-spacing-horizontal",
-    "--spectrum-badge-icon-spacing-horizontal",
-    "--spectrum-badge-icon-spacing-vertical-top",
-    "--spectrum-badge-icon-text-spacing",
-    "--spectrum-badge-label-icon-color",
-    "--spectrum-badge-label-spacing-horizontal",
-    "--spectrum-badge-label-spacing-vertical-bottom",
-    "--spectrum-badge-label-spacing-vertical-top",
-    "--spectrum-badge-line-height",
-    "--spectrum-badge-line-height-cjk",
-    "--spectrum-badge-outline-background-color",
-    "--spectrum-badge-outline-border-color-accent",
-    "--spectrum-badge-outline-border-color-informative",
-    "--spectrum-badge-outline-border-color-negative",
-    "--spectrum-badge-outline-border-color-neutral",
-    "--spectrum-badge-outline-border-color-notice",
-    "--spectrum-badge-outline-border-color-positive",
-    "--spectrum-badge-outline-label-icon-color",
-    "--spectrum-badge-subtle-background-color-accent",
-    "--spectrum-badge-subtle-background-color-blue",
-    "--spectrum-badge-subtle-background-color-brown",
-    "--spectrum-badge-subtle-background-color-celery",
-    "--spectrum-badge-subtle-background-color-chartreuse",
-    "--spectrum-badge-subtle-background-color-cinnamon",
-    "--spectrum-badge-subtle-background-color-cyan",
-    "--spectrum-badge-subtle-background-color-default",
-    "--spectrum-badge-subtle-background-color-fuchsia",
-    "--spectrum-badge-subtle-background-color-gray",
-    "--spectrum-badge-subtle-background-color-green",
-    "--spectrum-badge-subtle-background-color-indigo",
-    "--spectrum-badge-subtle-background-color-informative",
-    "--spectrum-badge-subtle-background-color-magenta",
-    "--spectrum-badge-subtle-background-color-negative",
-    "--spectrum-badge-subtle-background-color-notice",
-    "--spectrum-badge-subtle-background-color-orange",
-    "--spectrum-badge-subtle-background-color-pink",
-    "--spectrum-badge-subtle-background-color-positive",
-    "--spectrum-badge-subtle-background-color-purple",
-    "--spectrum-badge-subtle-background-color-red",
-    "--spectrum-badge-subtle-background-color-seafoam",
-    "--spectrum-badge-subtle-background-color-silver",
-    "--spectrum-badge-subtle-background-color-turquoise",
-    "--spectrum-badge-subtle-background-color-yellow",
-    "--spectrum-badge-subtle-label-icon-color",
-    "--spectrum-badge-workflow-icon-size"
-  ],
-  "global": [
-    "--spectrum-accent-background-color-default",
-    "--spectrum-accent-subtle-background-color-default",
-    "--spectrum-accent-visual-color",
-    "--spectrum-background-layer-2-color",
-    "--spectrum-black",
-    "--spectrum-blue-background-color-default",
-    "--spectrum-blue-subtle-background-color-default",
-    "--spectrum-border-width-200",
-    "--spectrum-brown-background-color-default",
-    "--spectrum-brown-subtle-background-color-default",
-    "--spectrum-celery-background-color-default",
-    "--spectrum-celery-subtle-background-color-default",
-    "--spectrum-chartreuse-background-color-default",
-    "--spectrum-chartreuse-subtle-background-color-default",
-    "--spectrum-cinnamon-background-color-default",
-    "--spectrum-cinnamon-subtle-background-color-default",
-    "--spectrum-cjk-line-height-100",
-    "--spectrum-component-bottom-to-text-100",
-    "--spectrum-component-bottom-to-text-200",
-    "--spectrum-component-bottom-to-text-300",
-    "--spectrum-component-bottom-to-text-75",
-    "--spectrum-component-edge-to-text-100",
-    "--spectrum-component-edge-to-text-200",
-    "--spectrum-component-edge-to-text-300",
-    "--spectrum-component-edge-to-text-75",
-    "--spectrum-component-edge-to-visual-100",
-    "--spectrum-component-edge-to-visual-200",
-    "--spectrum-component-edge-to-visual-300",
-    "--spectrum-component-edge-to-visual-75",
-    "--spectrum-component-edge-to-visual-only-100",
-    "--spectrum-component-edge-to-visual-only-200",
-    "--spectrum-component-edge-to-visual-only-300",
-    "--spectrum-component-edge-to-visual-only-75",
-    "--spectrum-component-height-100",
-    "--spectrum-component-height-75",
-    "--spectrum-component-top-to-text-100",
-    "--spectrum-component-top-to-text-200",
-    "--spectrum-component-top-to-text-300",
-    "--spectrum-component-top-to-text-75",
-    "--spectrum-component-top-to-workflow-icon-100",
-    "--spectrum-component-top-to-workflow-icon-200",
-    "--spectrum-component-top-to-workflow-icon-300",
-    "--spectrum-component-top-to-workflow-icon-75",
-    "--spectrum-corner-radius-medium-size-extra-large",
-    "--spectrum-corner-radius-medium-size-large",
-    "--spectrum-corner-radius-medium-size-medium",
-    "--spectrum-corner-radius-medium-size-small",
-    "--spectrum-cyan-background-color-default",
-    "--spectrum-cyan-subtle-background-color-default",
-    "--spectrum-font-size-100",
-    "--spectrum-font-size-200",
-    "--spectrum-font-size-300",
-    "--spectrum-font-size-75",
-    "--spectrum-fuchsia-background-color-default",
-    "--spectrum-fuchsia-subtle-background-color-default",
-    "--spectrum-gray-1000",
-    "--spectrum-gray-background-color-default",
-    "--spectrum-gray-subtle-background-color-default",
-    "--spectrum-green-background-color-default",
-    "--spectrum-green-subtle-background-color-default",
-    "--spectrum-indigo-background-color-default",
-    "--spectrum-indigo-subtle-background-color-default",
-    "--spectrum-informative-background-color-default",
-    "--spectrum-informative-subtle-background-color-default",
-    "--spectrum-informative-visual-color",
-    "--spectrum-line-height-100",
-    "--spectrum-magenta-background-color-default",
-    "--spectrum-magenta-subtle-background-color-default",
-    "--spectrum-medium-font-weight",
-    "--spectrum-negative-background-color-default",
-    "--spectrum-negative-subtle-background-color-default",
-    "--spectrum-negative-visual-color",
-    "--spectrum-neutral-subdued-background-color-default",
-    "--spectrum-neutral-subtle-background-color-default",
-    "--spectrum-neutral-visual-color",
-    "--spectrum-notice-background-color-default",
-    "--spectrum-notice-subtle-background-color-default",
-    "--spectrum-notice-visual-color",
-    "--spectrum-orange-background-color-default",
-    "--spectrum-orange-subtle-background-color-default",
-    "--spectrum-pink-background-color-default",
-    "--spectrum-pink-subtle-background-color-default",
-    "--spectrum-positive-background-color-default",
-    "--spectrum-positive-subtle-background-color-default",
-    "--spectrum-positive-visual-color",
-    "--spectrum-purple-background-color-default",
-    "--spectrum-purple-subtle-background-color-default",
-    "--spectrum-red-background-color-default",
-    "--spectrum-red-subtle-background-color-default",
-    "--spectrum-seafoam-background-color-default",
-    "--spectrum-seafoam-subtle-background-color-default",
-    "--spectrum-silver-background-color-default",
-    "--spectrum-silver-subtle-background-color-default",
-    "--spectrum-text-to-visual-100",
-    "--spectrum-text-to-visual-200",
-    "--spectrum-text-to-visual-300",
-    "--spectrum-text-to-visual-75",
-    "--spectrum-turquoise-background-color-default",
-    "--spectrum-turquoise-subtle-background-color-default",
-    "--spectrum-white",
-    "--spectrum-workflow-icon-size-100",
-    "--spectrum-workflow-icon-size-200",
-    "--spectrum-workflow-icon-size-300",
-    "--spectrum-workflow-icon-size-75",
-    "--spectrum-yellow-background-color-default",
-    "--spectrum-yellow-subtle-background-color-default"
-  ],
-  "passthroughs": [],
-  "high-contrast": ["--highcontrast-badge-border-color"]
+  "modifiers": {
+    "mod-badge-border-width": {
+      "description": "Used by `--spectrum-badge-border-width`. <br/>Defaults to `var(--spectrum-border-width-200)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-badge-height": {
+      "description": "Used by `.spectrum-Badge`. <br/>Defaults to `var(--spectrum-badge-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-badge-border-color": {
+      "description": "Used by `.spectrum-Badge`. <br/>Defaults to `var(--spectrum-badge-border-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-corner-radius": {
+      "description": "Used by `.spectrum-Badge`. <br/>Defaults to `var(--spectrum-badge-corner-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-badge-background-color-default": {
+      "description": "Used by `.spectrum-Badge`, `.spectrum-Badge--neutral`. <br/>Defaults to `var(--spectrum-badge-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-label-icon-color": {
+      "description": "Used by `.spectrum-Badge`. <br/>Defaults to `var(--spectrum-badge-label-icon-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-background-color-accent": {
+      "description": "Used by `.spectrum-Badge--accent`. <br/>Defaults to `var(--spectrum-badge-background-color-accent)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-background-color-informative": {
+      "description": "Used by `.spectrum-Badge--informative`. <br/>Defaults to `var(--spectrum-badge-background-color-informative)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-background-color-negative": {
+      "description": "Used by `.spectrum-Badge--negative`. <br/>Defaults to `var(--spectrum-badge-background-color-negative)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-background-color-positive": {
+      "description": "Used by `.spectrum-Badge--positive`. <br/>Defaults to `var(--spectrum-badge-background-color-positive)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-background-color-notice": {
+      "description": "Used by `.spectrum-Badge--notice`. <br/>Defaults to `var(--spectrum-badge-background-color-notice)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-background-color-gray": {
+      "description": "Used by `.spectrum-Badge--gray`. <br/>Defaults to `var(--spectrum-badge-background-color-gray)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-background-color-red": {
+      "description": "Used by `.spectrum-Badge--red`. <br/>Defaults to `var(--spectrum-badge-background-color-red)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-background-color-orange": {
+      "description": "Used by `.spectrum-Badge--orange`. <br/>Defaults to `var(--spectrum-badge-background-color-orange)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-background-color-yellow": {
+      "description": "Used by `.spectrum-Badge--yellow`. <br/>Defaults to `var(--spectrum-badge-background-color-yellow)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-background-color-chartreuse": {
+      "description": "Used by `.spectrum-Badge--chartreuse`. <br/>Defaults to `var(--spectrum-badge-background-color-chartreuse)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-background-color-celery": {
+      "description": "Used by `.spectrum-Badge--celery`. <br/>Defaults to `var(--spectrum-badge-background-color-celery)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-background-color-green": {
+      "description": "Used by `.spectrum-Badge--green`. <br/>Defaults to `var(--spectrum-badge-background-color-green)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-background-color-seafoam": {
+      "description": "Used by `.spectrum-Badge--seafoam`. <br/>Defaults to `var(--spectrum-badge-background-color-seafoam)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-background-color-cyan": {
+      "description": "Used by `.spectrum-Badge--cyan`. <br/>Defaults to `var(--spectrum-badge-background-color-cyan)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-background-color-blue": {
+      "description": "Used by `.spectrum-Badge--blue`. <br/>Defaults to `var(--spectrum-badge-background-color-blue)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-background-color-indigo": {
+      "description": "Used by `.spectrum-Badge--indigo`. <br/>Defaults to `var(--spectrum-badge-background-color-indigo)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-background-color-purple": {
+      "description": "Used by `.spectrum-Badge--purple`. <br/>Defaults to `var(--spectrum-badge-background-color-purple)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-background-color-fuchsia": {
+      "description": "Used by `.spectrum-Badge--fuchsia`. <br/>Defaults to `var(--spectrum-badge-background-color-fuchsia)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-background-color-magenta": {
+      "description": "Used by `.spectrum-Badge--magenta`. <br/>Defaults to `var(--spectrum-badge-background-color-magenta)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-background-color-pink": {
+      "description": "Used by `.spectrum-Badge--pink`. <br/>Defaults to `var(--spectrum-badge-background-color-pink)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-background-color-turquoise": {
+      "description": "Used by `.spectrum-Badge--turquoise`. <br/>Defaults to `var(--spectrum-badge-background-color-turquoise)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-background-color-brown": {
+      "description": "Used by `.spectrum-Badge--brown`. <br/>Defaults to `var(--spectrum-badge-background-color-brown)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-background-color-cinnamon": {
+      "description": "Used by `.spectrum-Badge--cinnamon`. <br/>Defaults to `var(--spectrum-badge-background-color-cinnamon)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-background-color-silver": {
+      "description": "Used by `.spectrum-Badge--silver`. <br/>Defaults to `var(--spectrum-badge-background-color-silver)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-subtle-label-icon-color": {
+      "description": "Used by `.spectrum-Badge--style-subtle`. <br/>Defaults to `var(--spectrum-badge-subtle-label-icon-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-subtle-background-color-default": {
+      "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--neutral`. <br/>Defaults to `var(--spectrum-badge-subtle-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-subtle-background-color-accent": {
+      "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--accent`. <br/>Defaults to `var(--spectrum-badge-subtle-background-color-accent)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-subtle-background-color-informative": {
+      "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--informative`. <br/>Defaults to `var(--spectrum-badge-subtle-background-color-informative)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-subtle-background-color-negative": {
+      "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--negative`. <br/>Defaults to `var(--spectrum-badge-subtle-background-color-negative)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-subtle-background-color-positive": {
+      "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--positive`. <br/>Defaults to `var(--spectrum-badge-subtle-background-color-positive)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-subtle-background-color-notice": {
+      "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--notice`. <br/>Defaults to `var(--spectrum-badge-subtle-background-color-notice)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-subtle-background-color-gray": {
+      "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--gray`. <br/>Defaults to `var(--spectrum-badge-subtle-background-color-gray)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-subtle-background-color-red": {
+      "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--red`. <br/>Defaults to `var(--spectrum-badge-subtle-background-color-red)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-subtle-background-color-orange": {
+      "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--orange`. <br/>Defaults to `var(--spectrum-badge-subtle-background-color-orange)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-subtle-background-color-yellow": {
+      "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--yellow`. <br/>Defaults to `var(--spectrum-badge-subtle-background-color-yellow)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-subtle-background-color-chartreuse": {
+      "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--chartreuse`. <br/>Defaults to `var(--spectrum-badge-subtle-background-color-chartreuse)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-subtle-background-color-celery": {
+      "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--celery`. <br/>Defaults to `var(--spectrum-badge-subtle-background-color-celery)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-subtle-background-color-green": {
+      "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--green`. <br/>Defaults to `var(--spectrum-badge-subtle-background-color-green)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-subtle-background-color-seafoam": {
+      "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--seafoam`. <br/>Defaults to `var(--spectrum-badge-subtle-background-color-seafoam)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-subtle-background-color-cyan": {
+      "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--cyan`. <br/>Defaults to `var(--spectrum-badge-subtle-background-color-cyan)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-subtle-background-color-blue": {
+      "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--blue`. <br/>Defaults to `var(--spectrum-badge-subtle-background-color-blue)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-subtle-background-color-indigo": {
+      "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--indigo`. <br/>Defaults to `var(--spectrum-badge-subtle-background-color-indigo)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-subtle-background-color-purple": {
+      "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--purple`. <br/>Defaults to `var(--spectrum-badge-subtle-background-color-purple)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-subtle-background-color-fuchsia": {
+      "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--fuchsia`. <br/>Defaults to `var(--spectrum-badge-subtle-background-color-fuchsia)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-subtle-background-color-magenta": {
+      "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--magenta`. <br/>Defaults to `var(--spectrum-badge-subtle-background-color-magenta)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-subtle-background-color-pink": {
+      "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--pink`. <br/>Defaults to `var(--spectrum-badge-subtle-background-color-pink)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-subtle-background-color-turquoise": {
+      "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--turquoise`. <br/>Defaults to `var(--spectrum-badge-subtle-background-color-turquoise)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-subtle-background-color-brown": {
+      "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--brown`. <br/>Defaults to `var(--spectrum-badge-subtle-background-color-brown)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-subtle-background-color-cinnamon": {
+      "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--cinnamon`. <br/>Defaults to `var(--spectrum-badge-subtle-background-color-cinnamon)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-subtle-background-color-silver": {
+      "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--silver`. <br/>Defaults to `var(--spectrum-badge-subtle-background-color-silver)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-outline-background-color-default": {
+      "description": "Used by `.spectrum-Badge--style-outline:is(.spectrum-Badge--neutral, .spectrum-Badge--accent, .spectrum-Badge--informative, .spectrum-Badge--negative, .spectrum-Badge--positive, .spectrum-Badge--notice)`. <br/>Defaults to `var(--spectrum-badge-outline-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-outline-label-icon-color": {
+      "description": "Used by `.spectrum-Badge--style-outline:is(.spectrum-Badge--neutral, .spectrum-Badge--accent, .spectrum-Badge--informative, .spectrum-Badge--negative, .spectrum-Badge--positive, .spectrum-Badge--notice)`. <br/>Defaults to `var(--spectrum-badge-outline-label-icon-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-outline-border-color-neutral": {
+      "description": "Used by `.spectrum-Badge--style-outline.spectrum-Badge--neutral`. <br/>Defaults to `var(--spectrum-badge-outline-border-color-neutral)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-outline-border-color-accent": {
+      "description": "Used by `.spectrum-Badge--style-outline.spectrum-Badge--accent`. <br/>Defaults to `var(--spectrum-badge-outline-border-color-accent)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-outline-border-color-informative": {
+      "description": "Used by `.spectrum-Badge--style-outline.spectrum-Badge--informative`. <br/>Defaults to `var(--spectrum-badge-outline-border-color-informative)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-outline-border-color-negative": {
+      "description": "Used by `.spectrum-Badge--style-outline.spectrum-Badge--negative`. <br/>Defaults to `var(--spectrum-badge-outline-border-color-negative)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-outline-border-color-positive": {
+      "description": "Used by `.spectrum-Badge--style-outline.spectrum-Badge--positive`. <br/>Defaults to `var(--spectrum-badge-outline-border-color-positive)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-outline-border-color-notice": {
+      "description": "Used by `.spectrum-Badge--style-outline.spectrum-Badge--notice`. <br/>Defaults to `var(--spectrum-badge-outline-border-color-notice)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-badge-font-size": {
+      "description": "Used by `.spectrum-Badge-label`. <br/>Defaults to `var(--spectrum-badge-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-badge-line-height": {
+      "description": "Used by `.spectrum-Badge-label`. <br/>Defaults to `var(--spectrum-badge-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-badge-label-spacing-horizontal": {
+      "description": "Used by `.spectrum-Badge-label`. <br/>Defaults to `var(--spectrum-badge-label-spacing-horizontal)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-badge-label-spacing-vertical-top": {
+      "description": "Used by `.spectrum-Badge-label`. <br/>Defaults to `var(--spectrum-badge-label-spacing-vertical-top)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-badge-label-spacing-vertical-bottom": {
+      "description": "Used by `.spectrum-Badge-label`. <br/>Defaults to `var(--spectrum-badge-label-spacing-vertical-bottom)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-badge-line-height-cjk": {
+      "description": "Used by `.spectrum-Badge-label:lang(ja), .spectrum-Badge-label:lang(ko), .spectrum-Badge-label:lang(zh)`. <br/>Defaults to `var(--spectrum-badge-line-height-cjk)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-badge-workflow-icon-size": {
+      "description": "Used by `.spectrum-Badge-icon`. <br/>Defaults to `var(--spectrum-badge-workflow-icon-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-badge-icon-spacing-horizontal": {
+      "description": "Used by `.spectrum-Badge-icon`. <br/>Defaults to `var(--spectrum-badge-icon-spacing-horizontal)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-badge-icon-text-spacing": {
+      "description": "Used by `.spectrum-Badge-icon`. <br/>Defaults to `var(--spectrum-badge-icon-text-spacing)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-badge-icon-spacing-vertical-top": {
+      "description": "Used by `.spectrum-Badge-icon`. <br/>Defaults to `var(--spectrum-badge-icon-spacing-vertical-top)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-badge-icon-only-spacing-horizontal": {
+      "description": "Used by `.spectrum-Badge-icon--no-label`. <br/>Defaults to `var(--spectrum-badge-icon-only-spacing-horizontal)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-badge-border-width": {
+      "value": "var(--mod-badge-border-width, var(--spectrum-border-width-200))",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge`, `.spectrum-Badge-label`, `.spectrum-Badge-icon`, `.spectrum-Badge-icon--no-label`. <br/>Defaults to `var(--mod-badge-border-width, var(--spectrum-border-width-200))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-badge-border-color": {
+      "value": "transparent",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge`. <br/>Defaults to `transparent`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-line-height": {
+      "value": "1.3",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge-label`. <br/>Defaults to `var(--spectrum-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-badge-line-height-cjk": {
+      "value": "1.5",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge-label:lang(ja), .spectrum-Badge-label:lang(ko), .spectrum-Badge-label:lang(zh)`. <br/>Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-badge-font-weight": {
+      "value": "500",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge-label`. <br/>Defaults to `var(--spectrum-medium-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-badge-label-icon-color": {
+      "value": "rgb(0, 0, 0)",
+      "description": "Defined in `.spectrum-Badge`, `.spectrum-Badge--celery, .spectrum-Badge--chartreuse, .spectrum-Badge--notice, .spectrum-Badge--orange, .spectrum-Badge--yellow`. <br/>Used by `.spectrum-Badge`. <br/>Defaults to `var(--spectrum-black)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-background-color-default": {
+      "value": "var(--spectrum-gray-700)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge`, `.spectrum-Badge--neutral`. <br/>Defaults to `var(--spectrum-neutral-subdued-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-background-color-accent": {
+      "value": "var(--spectrum-accent-color-900)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--accent`. <br/>Defaults to `var(--spectrum-accent-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-background-color-informative": {
+      "value": "var(--spectrum-informative-color-900)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--informative`. <br/>Defaults to `var(--spectrum-informative-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-background-color-negative": {
+      "value": "var(--spectrum-negative-color-900)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--negative`. <br/>Defaults to `var(--spectrum-negative-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-background-color-positive": {
+      "value": "var(--spectrum-positive-color-900)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--positive`. <br/>Defaults to `var(--spectrum-positive-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-background-color-notice": {
+      "value": "var(--spectrum-notice-color-600)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--notice`. <br/>Defaults to `var(--spectrum-notice-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-background-color-gray": {
+      "value": "var(--spectrum-gray-700)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--gray`. <br/>Defaults to `var(--spectrum-gray-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-background-color-red": {
+      "value": "var(--spectrum-red-900)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--red`. <br/>Defaults to `var(--spectrum-red-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-background-color-orange": {
+      "value": "var(--spectrum-orange-600)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--orange`. <br/>Defaults to `var(--spectrum-orange-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-background-color-yellow": {
+      "value": "var(--spectrum-yellow-400)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--yellow`. <br/>Defaults to `var(--spectrum-yellow-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-background-color-chartreuse": {
+      "value": "var(--spectrum-chartreuse-500)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--chartreuse`. <br/>Defaults to `var(--spectrum-chartreuse-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-background-color-celery": {
+      "value": "var(--spectrum-celery-600)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--celery`. <br/>Defaults to `var(--spectrum-celery-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-background-color-green": {
+      "value": "var(--spectrum-green-900)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--green`. <br/>Defaults to `var(--spectrum-green-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-background-color-seafoam": {
+      "value": "var(--spectrum-seafoam-900)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--seafoam`. <br/>Defaults to `var(--spectrum-seafoam-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-background-color-cyan": {
+      "value": "var(--spectrum-cyan-900)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--cyan`. <br/>Defaults to `var(--spectrum-cyan-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-background-color-blue": {
+      "value": "var(--spectrum-blue-900)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--blue`. <br/>Defaults to `var(--spectrum-blue-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-background-color-indigo": {
+      "value": "var(--spectrum-indigo-900)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--indigo`. <br/>Defaults to `var(--spectrum-indigo-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-background-color-purple": {
+      "value": "var(--spectrum-purple-900)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--purple`. <br/>Defaults to `var(--spectrum-purple-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-background-color-fuchsia": {
+      "value": "var(--spectrum-fuchsia-900)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--fuchsia`. <br/>Defaults to `var(--spectrum-fuchsia-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-background-color-magenta": {
+      "value": "var(--spectrum-magenta-900)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--magenta`. <br/>Defaults to `var(--spectrum-magenta-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-background-color-pink": {
+      "value": "var(--spectrum-pink-900)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--pink`. <br/>Defaults to `var(--spectrum-pink-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-background-color-turquoise": {
+      "value": "var(--spectrum-turquoise-900)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--turquoise`. <br/>Defaults to `var(--spectrum-turquoise-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-background-color-brown": {
+      "value": "var(--spectrum-brown-900)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--brown`. <br/>Defaults to `var(--spectrum-brown-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-background-color-cinnamon": {
+      "value": "var(--spectrum-cinnamon-900)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--cinnamon`. <br/>Defaults to `var(--spectrum-cinnamon-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-background-color-silver": {
+      "value": "var(--spectrum-silver-900)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--silver`. <br/>Defaults to `var(--spectrum-silver-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-subtle-label-icon-color": {
+      "value": "light-dark(rgb(0, 0, 0), rgb(255, 255, 255))",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--style-subtle`. <br/>Defaults to `var(--spectrum-gray-1000)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-subtle-background-color-default": {
+      "value": "var(--spectrum-gray-100)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--style-subtle.spectrum-Badge--neutral`. <br/>Defaults to `var(--spectrum-neutral-subtle-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-subtle-background-color-accent": {
+      "value": "var(--spectrum-accent-color-200)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--style-subtle.spectrum-Badge--accent`. <br/>Defaults to `var(--spectrum-accent-subtle-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-subtle-background-color-informative": {
+      "value": "var(--spectrum-informative-color-200)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--style-subtle.spectrum-Badge--informative`. <br/>Defaults to `var(--spectrum-informative-subtle-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-subtle-background-color-negative": {
+      "value": "var(--spectrum-negative-color-200)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--style-subtle.spectrum-Badge--negative`. <br/>Defaults to `var(--spectrum-negative-subtle-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-subtle-background-color-positive": {
+      "value": "var(--spectrum-positive-color-200)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--style-subtle.spectrum-Badge--positive`. <br/>Defaults to `var(--spectrum-positive-subtle-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-subtle-background-color-notice": {
+      "value": "var(--spectrum-notice-color-200)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--style-subtle.spectrum-Badge--notice`. <br/>Defaults to `var(--spectrum-notice-subtle-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-subtle-background-color-gray": {
+      "value": "var(--spectrum-gray-100)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--style-subtle.spectrum-Badge--gray`. <br/>Defaults to `var(--spectrum-gray-subtle-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-subtle-background-color-red": {
+      "value": "var(--spectrum-red-200)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--style-subtle.spectrum-Badge--red`. <br/>Defaults to `var(--spectrum-red-subtle-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-subtle-background-color-orange": {
+      "value": "var(--spectrum-orange-200)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--style-subtle.spectrum-Badge--orange`. <br/>Defaults to `var(--spectrum-orange-subtle-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-subtle-background-color-yellow": {
+      "value": "var(--spectrum-yellow-200)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--style-subtle.spectrum-Badge--yellow`. <br/>Defaults to `var(--spectrum-yellow-subtle-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-subtle-background-color-chartreuse": {
+      "value": "var(--spectrum-chartreuse-200)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--style-subtle.spectrum-Badge--chartreuse`. <br/>Defaults to `var(--spectrum-chartreuse-subtle-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-subtle-background-color-celery": {
+      "value": "var(--spectrum-celery-200)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--style-subtle.spectrum-Badge--celery`. <br/>Defaults to `var(--spectrum-celery-subtle-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-subtle-background-color-green": {
+      "value": "var(--spectrum-green-200)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--style-subtle.spectrum-Badge--green`. <br/>Defaults to `var(--spectrum-green-subtle-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-subtle-background-color-seafoam": {
+      "value": "var(--spectrum-seafoam-200)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--style-subtle.spectrum-Badge--seafoam`. <br/>Defaults to `var(--spectrum-seafoam-subtle-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-subtle-background-color-cyan": {
+      "value": "var(--spectrum-cyan-200)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--style-subtle.spectrum-Badge--cyan`. <br/>Defaults to `var(--spectrum-cyan-subtle-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-subtle-background-color-blue": {
+      "value": "var(--spectrum-blue-200)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--style-subtle.spectrum-Badge--blue`. <br/>Defaults to `var(--spectrum-blue-subtle-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-subtle-background-color-indigo": {
+      "value": "var(--spectrum-indigo-200)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--style-subtle.spectrum-Badge--indigo`. <br/>Defaults to `var(--spectrum-indigo-subtle-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-subtle-background-color-purple": {
+      "value": "var(--spectrum-purple-200)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--style-subtle.spectrum-Badge--purple`. <br/>Defaults to `var(--spectrum-purple-subtle-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-subtle-background-color-fuchsia": {
+      "value": "var(--spectrum-fuchsia-200)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--style-subtle.spectrum-Badge--fuchsia`. <br/>Defaults to `var(--spectrum-fuchsia-subtle-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-subtle-background-color-magenta": {
+      "value": "var(--spectrum-magenta-200)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--style-subtle.spectrum-Badge--magenta`. <br/>Defaults to `var(--spectrum-magenta-subtle-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-subtle-background-color-pink": {
+      "value": "var(--spectrum-pink-200)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--style-subtle.spectrum-Badge--pink`. <br/>Defaults to `var(--spectrum-pink-subtle-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-subtle-background-color-turquoise": {
+      "value": "var(--spectrum-turquoise-200)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--style-subtle.spectrum-Badge--turquoise`. <br/>Defaults to `var(--spectrum-turquoise-subtle-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-subtle-background-color-brown": {
+      "value": "var(--spectrum-brown-200)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--style-subtle.spectrum-Badge--brown`. <br/>Defaults to `var(--spectrum-brown-subtle-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-subtle-background-color-cinnamon": {
+      "value": "var(--spectrum-cinnamon-200)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--style-subtle.spectrum-Badge--cinnamon`. <br/>Defaults to `var(--spectrum-cinnamon-subtle-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-subtle-background-color-silver": {
+      "value": "var(--spectrum-silver-200)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--style-subtle.spectrum-Badge--silver`. <br/>Defaults to `var(--spectrum-silver-subtle-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-outline-label-icon-color": {
+      "value": "light-dark(rgb(0, 0, 0), rgb(255, 255, 255))",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--style-outline:is(.spectrum-Badge--neutral, .spectrum-Badge--accent, .spectrum-Badge--informative, .spectrum-Badge--negative, .spectrum-Badge--positive, .spectrum-Badge--notice)`. <br/>Defaults to `var(--spectrum-gray-1000)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-outline-background-color": {
+      "value": "var(--spectrum-gray-25)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--style-outline:is(.spectrum-Badge--neutral, .spectrum-Badge--accent, .spectrum-Badge--informative, .spectrum-Badge--negative, .spectrum-Badge--positive, .spectrum-Badge--notice)`. <br/>Defaults to `var(--spectrum-background-layer-2-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-outline-border-color-neutral": {
+      "value": "var(--spectrum-gray-500)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--style-outline.spectrum-Badge--neutral`. <br/>Defaults to `var(--spectrum-neutral-visual-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-outline-border-color-accent": {
+      "value": "var(--spectrum-accent-color-800)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--style-outline.spectrum-Badge--accent`. <br/>Defaults to `var(--spectrum-accent-visual-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-outline-border-color-informative": {
+      "value": "var(--spectrum-informative-color-800)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--style-outline.spectrum-Badge--informative`. <br/>Defaults to `var(--spectrum-informative-visual-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-outline-border-color-negative": {
+      "value": "var(--spectrum-negative-color-800)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--style-outline.spectrum-Badge--negative`. <br/>Defaults to `var(--spectrum-negative-visual-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-outline-border-color-notice": {
+      "value": "var(--spectrum-notice-color-800)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--style-outline.spectrum-Badge--notice`. <br/>Defaults to `var(--spectrum-notice-visual-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-outline-border-color-positive": {
+      "value": "var(--spectrum-positive-color-800)",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge--style-outline.spectrum-Badge--positive`. <br/>Defaults to `var(--spectrum-positive-visual-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-badge-corner-radius": {
+      "value": "10px",
+      "description": "Defined in `.spectrum-Badge`, `.spectrum-Badge--sizeS`, `.spectrum-Badge--sizeL`, `.spectrum-Badge--sizeXL`. <br/>Used by `.spectrum-Badge`. <br/>Defaults to `var(--spectrum-corner-radius-medium-size-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-badge-height": {
+      "value": "32px",
+      "description": "Defined in `.spectrum-Badge`, `.spectrum-Badge--sizeS`, `.spectrum-Badge--sizeL`, `.spectrum-Badge--sizeXL`. <br/>Used by `.spectrum-Badge`. <br/>Defaults to `var(--spectrum-component-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-badge-font-size": {
+      "value": "18px",
+      "description": "Defined in `.spectrum-Badge`, `.spectrum-Badge--sizeS`, `.spectrum-Badge--sizeL`, `.spectrum-Badge--sizeXL`. <br/>Used by `.spectrum-Badge-label`. <br/>Defaults to `var(--spectrum-font-size-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-badge-label-spacing-vertical-top": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-Badge`, `.spectrum-Badge--sizeS`, `.spectrum-Badge--sizeL`, `.spectrum-Badge--sizeXL`. <br/>Used by `.spectrum-Badge-label`. <br/>Defaults to `var(--spectrum-component-top-to-text-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-badge-label-spacing-vertical-bottom": {
+      "value": "14px",
+      "description": "Defined in `.spectrum-Badge`, `.spectrum-Badge--sizeS`, `.spectrum-Badge--sizeL`, `.spectrum-Badge--sizeXL`. <br/>Used by `.spectrum-Badge-label`. <br/>Defaults to `var(--spectrum-component-bottom-to-text-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-badge-label-spacing-horizontal": {
+      "value": "18px",
+      "description": "Defined in `.spectrum-Badge`, `.spectrum-Badge--sizeS`, `.spectrum-Badge--sizeL`, `.spectrum-Badge--sizeXL`. <br/>Used by `.spectrum-Badge-label`. <br/>Defaults to `var(--spectrum-component-edge-to-text-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-badge-workflow-icon-size": {
+      "value": "26px",
+      "description": "Defined in `.spectrum-Badge`, `.spectrum-Badge--sizeS`, `.spectrum-Badge--sizeL`, `.spectrum-Badge--sizeXL`. <br/>Used by `.spectrum-Badge-icon`. <br/>Defaults to `var(--spectrum-workflow-icon-size-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-badge-icon-text-spacing": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-Badge`, `.spectrum-Badge--sizeS`, `.spectrum-Badge--sizeL`, `.spectrum-Badge--sizeXL`. <br/>Used by `.spectrum-Badge-icon`. <br/>Defaults to `var(--spectrum-text-to-visual-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-badge-icon-spacing-horizontal": {
+      "value": "15px",
+      "description": "Defined in `.spectrum-Badge`, `.spectrum-Badge--sizeS`, `.spectrum-Badge--sizeL`, `.spectrum-Badge--sizeXL`. <br/>Used by `.spectrum-Badge-icon`. <br/>Defaults to `var(--spectrum-component-edge-to-visual-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-badge-icon-spacing-vertical-top": {
+      "value": "11px",
+      "description": "Defined in `.spectrum-Badge`, `.spectrum-Badge--sizeS`, `.spectrum-Badge--sizeL`, `.spectrum-Badge--sizeXL`. <br/>Used by `.spectrum-Badge-icon`. <br/>Defaults to `var(--spectrum-component-top-to-workflow-icon-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-badge-icon-only-spacing-horizontal": {
+      "value": "11px",
+      "description": "Defined in `.spectrum-Badge`, `.spectrum-Badge--sizeS`, `.spectrum-Badge--sizeL`, `.spectrum-Badge--sizeXL`. <br/>Used by `.spectrum-Badge-icon--no-label`. <br/>Defaults to `var(--spectrum-component-edge-to-visual-only-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-border-width-200": {
+      "value": "2px",
+      "description": "Used by `--spectrum-badge-border-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-line-height-100": {
+      "value": "1.3",
+      "description": "Used by `--spectrum-badge-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-cjk-line-height-100": {
+      "value": "1.5",
+      "description": "Used by `--spectrum-badge-line-height-cjk`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-medium-font-weight": {
+      "value": "500",
+      "description": "Used by `--spectrum-badge-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-white": {
+      "value": "rgb(255, 255, 255)",
+      "description": "Used by `--spectrum-badge-label-icon-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-subdued-background-color-default": {
+      "value": "var(--spectrum-gray-700)",
+      "description": "Used by `--spectrum-badge-background-color-default`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-accent-background-color-default": {
+      "value": "var(--spectrum-accent-color-900)",
+      "description": "Used by `--spectrum-badge-background-color-accent`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-informative-background-color-default": {
+      "value": "var(--spectrum-informative-color-900)",
+      "description": "Used by `--spectrum-badge-background-color-informative`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-background-color-default": {
+      "value": "var(--spectrum-negative-color-900)",
+      "description": "Used by `--spectrum-badge-background-color-negative`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-positive-background-color-default": {
+      "value": "var(--spectrum-positive-color-900)",
+      "description": "Used by `--spectrum-badge-background-color-positive`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-notice-background-color-default": {
+      "value": "var(--spectrum-notice-color-600)",
+      "description": "Used by `--spectrum-badge-background-color-notice`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-gray-background-color-default": {
+      "value": "var(--spectrum-gray-700)",
+      "description": "Used by `--spectrum-badge-background-color-gray`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-red-background-color-default": {
+      "value": "var(--spectrum-red-900)",
+      "description": "Used by `--spectrum-badge-background-color-red`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-orange-background-color-default": {
+      "value": "var(--spectrum-orange-600)",
+      "description": "Used by `--spectrum-badge-background-color-orange`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-yellow-background-color-default": {
+      "value": "var(--spectrum-yellow-400)",
+      "description": "Used by `--spectrum-badge-background-color-yellow`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-chartreuse-background-color-default": {
+      "value": "var(--spectrum-chartreuse-500)",
+      "description": "Used by `--spectrum-badge-background-color-chartreuse`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-celery-background-color-default": {
+      "value": "var(--spectrum-celery-600)",
+      "description": "Used by `--spectrum-badge-background-color-celery`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-green-background-color-default": {
+      "value": "var(--spectrum-green-900)",
+      "description": "Used by `--spectrum-badge-background-color-green`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-seafoam-background-color-default": {
+      "value": "var(--spectrum-seafoam-900)",
+      "description": "Used by `--spectrum-badge-background-color-seafoam`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-cyan-background-color-default": {
+      "value": "var(--spectrum-cyan-900)",
+      "description": "Used by `--spectrum-badge-background-color-cyan`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-blue-background-color-default": {
+      "value": "var(--spectrum-blue-900)",
+      "description": "Used by `--spectrum-badge-background-color-blue`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-indigo-background-color-default": {
+      "value": "var(--spectrum-indigo-900)",
+      "description": "Used by `--spectrum-badge-background-color-indigo`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-purple-background-color-default": {
+      "value": "var(--spectrum-purple-900)",
+      "description": "Used by `--spectrum-badge-background-color-purple`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-fuchsia-background-color-default": {
+      "value": "var(--spectrum-fuchsia-900)",
+      "description": "Used by `--spectrum-badge-background-color-fuchsia`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-magenta-background-color-default": {
+      "value": "var(--spectrum-magenta-900)",
+      "description": "Used by `--spectrum-badge-background-color-magenta`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-pink-background-color-default": {
+      "value": "var(--spectrum-pink-900)",
+      "description": "Used by `--spectrum-badge-background-color-pink`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-turquoise-background-color-default": {
+      "value": "var(--spectrum-turquoise-900)",
+      "description": "Used by `--spectrum-badge-background-color-turquoise`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-brown-background-color-default": {
+      "value": "var(--spectrum-brown-900)",
+      "description": "Used by `--spectrum-badge-background-color-brown`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-cinnamon-background-color-default": {
+      "value": "var(--spectrum-cinnamon-900)",
+      "description": "Used by `--spectrum-badge-background-color-cinnamon`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-silver-background-color-default": {
+      "value": "var(--spectrum-silver-900)",
+      "description": "Used by `--spectrum-badge-background-color-silver`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-gray-1000": {
+      "value": "light-dark(rgb(0, 0, 0), rgb(255, 255, 255))",
+      "description": "Used by `--spectrum-badge-subtle-label-icon-color`, `--spectrum-badge-outline-label-icon-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-subtle-background-color-default": {
+      "value": "var(--spectrum-gray-100)",
+      "description": "Used by `--spectrum-badge-subtle-background-color-default`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-accent-subtle-background-color-default": {
+      "value": "var(--spectrum-accent-color-200)",
+      "description": "Used by `--spectrum-badge-subtle-background-color-accent`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-informative-subtle-background-color-default": {
+      "value": "var(--spectrum-informative-color-200)",
+      "description": "Used by `--spectrum-badge-subtle-background-color-informative`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-subtle-background-color-default": {
+      "value": "var(--spectrum-negative-color-200)",
+      "description": "Used by `--spectrum-badge-subtle-background-color-negative`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-positive-subtle-background-color-default": {
+      "value": "var(--spectrum-positive-color-200)",
+      "description": "Used by `--spectrum-badge-subtle-background-color-positive`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-notice-subtle-background-color-default": {
+      "value": "var(--spectrum-notice-color-200)",
+      "description": "Used by `--spectrum-badge-subtle-background-color-notice`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-gray-subtle-background-color-default": {
+      "value": "var(--spectrum-gray-100)",
+      "description": "Used by `--spectrum-badge-subtle-background-color-gray`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-red-subtle-background-color-default": {
+      "value": "var(--spectrum-red-200)",
+      "description": "Used by `--spectrum-badge-subtle-background-color-red`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-orange-subtle-background-color-default": {
+      "value": "var(--spectrum-orange-200)",
+      "description": "Used by `--spectrum-badge-subtle-background-color-orange`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-yellow-subtle-background-color-default": {
+      "value": "var(--spectrum-yellow-200)",
+      "description": "Used by `--spectrum-badge-subtle-background-color-yellow`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-chartreuse-subtle-background-color-default": {
+      "value": "var(--spectrum-chartreuse-200)",
+      "description": "Used by `--spectrum-badge-subtle-background-color-chartreuse`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-celery-subtle-background-color-default": {
+      "value": "var(--spectrum-celery-200)",
+      "description": "Used by `--spectrum-badge-subtle-background-color-celery`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-green-subtle-background-color-default": {
+      "value": "var(--spectrum-green-200)",
+      "description": "Used by `--spectrum-badge-subtle-background-color-green`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-seafoam-subtle-background-color-default": {
+      "value": "var(--spectrum-seafoam-200)",
+      "description": "Used by `--spectrum-badge-subtle-background-color-seafoam`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-cyan-subtle-background-color-default": {
+      "value": "var(--spectrum-cyan-200)",
+      "description": "Used by `--spectrum-badge-subtle-background-color-cyan`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-blue-subtle-background-color-default": {
+      "value": "var(--spectrum-blue-200)",
+      "description": "Used by `--spectrum-badge-subtle-background-color-blue`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-indigo-subtle-background-color-default": {
+      "value": "var(--spectrum-indigo-200)",
+      "description": "Used by `--spectrum-badge-subtle-background-color-indigo`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-purple-subtle-background-color-default": {
+      "value": "var(--spectrum-purple-200)",
+      "description": "Used by `--spectrum-badge-subtle-background-color-purple`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-fuchsia-subtle-background-color-default": {
+      "value": "var(--spectrum-fuchsia-200)",
+      "description": "Used by `--spectrum-badge-subtle-background-color-fuchsia`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-magenta-subtle-background-color-default": {
+      "value": "var(--spectrum-magenta-200)",
+      "description": "Used by `--spectrum-badge-subtle-background-color-magenta`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-pink-subtle-background-color-default": {
+      "value": "var(--spectrum-pink-200)",
+      "description": "Used by `--spectrum-badge-subtle-background-color-pink`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-turquoise-subtle-background-color-default": {
+      "value": "var(--spectrum-turquoise-200)",
+      "description": "Used by `--spectrum-badge-subtle-background-color-turquoise`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-brown-subtle-background-color-default": {
+      "value": "var(--spectrum-brown-200)",
+      "description": "Used by `--spectrum-badge-subtle-background-color-brown`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-cinnamon-subtle-background-color-default": {
+      "value": "var(--spectrum-cinnamon-200)",
+      "description": "Used by `--spectrum-badge-subtle-background-color-cinnamon`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-silver-subtle-background-color-default": {
+      "value": "var(--spectrum-silver-200)",
+      "description": "Used by `--spectrum-badge-subtle-background-color-silver`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-background-layer-2-color": {
+      "value": "var(--spectrum-gray-25)",
+      "description": "Used by `--spectrum-badge-outline-background-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-visual-color": {
+      "value": "var(--spectrum-gray-500)",
+      "description": "Used by `--spectrum-badge-outline-border-color-neutral`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-accent-visual-color": {
+      "value": "var(--spectrum-accent-color-800)",
+      "description": "Used by `--spectrum-badge-outline-border-color-accent`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-informative-visual-color": {
+      "value": "var(--spectrum-informative-color-800)",
+      "description": "Used by `--spectrum-badge-outline-border-color-informative`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-visual-color": {
+      "value": "var(--spectrum-negative-color-800)",
+      "description": "Used by `--spectrum-badge-outline-border-color-negative`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-notice-visual-color": {
+      "value": "var(--spectrum-notice-color-800)",
+      "description": "Used by `--spectrum-badge-outline-border-color-notice`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-positive-visual-color": {
+      "value": "var(--spectrum-positive-color-800)",
+      "description": "Used by `--spectrum-badge-outline-border-color-positive`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-medium-size-medium": {
+      "value": "8px",
+      "description": "Used by `--spectrum-badge-corner-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-100": {
+      "value": "32px",
+      "description": "Used by `--spectrum-badge-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-100": {
+      "value": "14px",
+      "description": "Used by `--spectrum-badge-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-badge-label-spacing-vertical-top`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-100": {
+      "value": "9px",
+      "description": "Used by `--spectrum-badge-label-spacing-vertical-bottom`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-text-100": {
+      "value": "12px",
+      "description": "Used by `--spectrum-badge-label-spacing-horizontal`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-100": {
+      "value": "20px",
+      "description": "Used by `--spectrum-badge-workflow-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-badge-icon-text-spacing`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-visual-100": {
+      "value": "10px",
+      "description": "Used by `--spectrum-badge-icon-spacing-horizontal`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-workflow-icon-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-badge-icon-spacing-vertical-top`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-visual-only-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-badge-icon-only-spacing-horizontal`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-black": {
+      "value": "rgb(0, 0, 0)",
+      "description": "Used by `--spectrum-badge-label-icon-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-medium-size-small": {
+      "value": "7px",
+      "description": "Used by `--spectrum-badge-corner-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-75": {
+      "value": "24px",
+      "description": "Used by `--spectrum-badge-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-75": {
+      "value": "12px",
+      "description": "Used by `--spectrum-badge-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-75": {
+      "value": "4px",
+      "description": "Used by `--spectrum-badge-label-spacing-vertical-top`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-75": {
+      "value": "5px",
+      "description": "Used by `--spectrum-badge-label-spacing-vertical-bottom`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-text-75": {
+      "value": "9px",
+      "description": "Used by `--spectrum-badge-label-spacing-horizontal`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-75": {
+      "value": "16px",
+      "description": "Used by `--spectrum-badge-workflow-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-75": {
+      "value": "5px",
+      "description": "Used by `--spectrum-badge-icon-text-spacing`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-visual-75": {
+      "value": "7px",
+      "description": "Used by `--spectrum-badge-icon-spacing-horizontal`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-workflow-icon-75": {
+      "value": "4px",
+      "description": "Used by `--spectrum-badge-icon-spacing-vertical-top`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-visual-only-75": {
+      "value": "4px",
+      "description": "Used by `--spectrum-badge-icon-only-spacing-horizontal`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-medium-size-large": {
+      "value": "9px",
+      "description": "Used by `--spectrum-badge-corner-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-200": {
+      "value": "16px",
+      "description": "Used by `--spectrum-badge-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-200": {
+      "value": "9px",
+      "description": "Used by `--spectrum-badge-label-spacing-vertical-top`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-200": {
+      "value": "11px",
+      "description": "Used by `--spectrum-badge-label-spacing-vertical-bottom`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-text-200": {
+      "value": "15px",
+      "description": "Used by `--spectrum-badge-label-spacing-horizontal`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-200": {
+      "value": "22px",
+      "description": "Used by `--spectrum-badge-workflow-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-200": {
+      "value": "7px",
+      "description": "Used by `--spectrum-badge-icon-text-spacing`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-visual-200": {
+      "value": "13px",
+      "description": "Used by `--spectrum-badge-icon-spacing-horizontal`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-workflow-icon-200": {
+      "value": "9px",
+      "description": "Used by `--spectrum-badge-icon-spacing-vertical-top`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-visual-only-200": {
+      "value": "9px",
+      "description": "Used by `--spectrum-badge-icon-only-spacing-horizontal`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-medium-size-extra-large": {
+      "value": "10px",
+      "description": "Used by `--spectrum-badge-corner-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-300": {
+      "value": "18px",
+      "description": "Used by `--spectrum-badge-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-300": {
+      "value": "12px",
+      "description": "Used by `--spectrum-badge-label-spacing-vertical-top`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-300": {
+      "value": "14px",
+      "description": "Used by `--spectrum-badge-label-spacing-vertical-bottom`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-text-300": {
+      "value": "18px",
+      "description": "Used by `--spectrum-badge-label-spacing-horizontal`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-300": {
+      "value": "26px",
+      "description": "Used by `--spectrum-badge-workflow-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-300": {
+      "value": "8px",
+      "description": "Used by `--spectrum-badge-icon-text-spacing`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-visual-300": {
+      "value": "15px",
+      "description": "Used by `--spectrum-badge-icon-spacing-horizontal`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-workflow-icon-300": {
+      "value": "11px",
+      "description": "Used by `--spectrum-badge-icon-spacing-vertical-top`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-visual-only-300": {
+      "value": "11px",
+      "description": "Used by `--spectrum-badge-icon-only-spacing-horizontal`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {
+    "highcontrast-badge-border-color": {
+      "value": "CanvasText",
+      "description": "Defined in `.spectrum-Badge`. <br/>Used by `.spectrum-Badge`. <br/>Defaults to `CanvasText`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/badge/stories/badge.stories.js b/components/badge/stories/badge.stories.js
index e5027efded1..ef988342cb2 100644
--- a/components/badge/stories/badge.stories.js
+++ b/components/badge/stories/badge.stories.js
@@ -3,11 +3,13 @@ import { ArgGrid } from "@spectrum-css/preview/decorators";
 import { Sizes } from "@spectrum-css/preview/decorators/utilities.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { BadgeGroup } from "./badge.test.js";
 import { ContentOptions, Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * Badges are for showing a small amount of color-categorized metadata. They're ideal for getting a user's attention. There are two additional styles - subtle fill and outline - in addition to the default, bold fill style.
  *
@@ -83,6 +85,10 @@ export default {
 		status: {
 			type: "migrated",
 		},
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 	tags: ["migrated"]
 };
diff --git a/components/breadcrumb/dist/metadata.json b/components/breadcrumb/dist/metadata.json
index 01ed6639e32..e47749fc3cf 100644
--- a/components/breadcrumb/dist/metadata.json
+++ b/components/breadcrumb/dist/metadata.json
@@ -9,16 +9,16 @@
     ".spectrum-Breadcrumbs-item",
     ".spectrum-Breadcrumbs-item > .spectrum-ActionButton",
     ".spectrum-Breadcrumbs-item > .spectrum-ActionButton:disabled",
-    ".spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink:before",
     ".spectrum-Breadcrumbs-item:first-of-type > .spectrum-ActionButton",
     ".spectrum-Breadcrumbs-item:first-of-type > .spectrum-Breadcrumbs-itemLink",
     ".spectrum-Breadcrumbs-item:last-of-type",
     ".spectrum-Breadcrumbs-item:last-of-type .spectrum-Breadcrumbs-itemLink",
     ".spectrum-Breadcrumbs-item:last-of-type .spectrum-Breadcrumbs-itemSeparator",
+    ".spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink:before",
     ".spectrum-Breadcrumbs-itemLink",
     ".spectrum-Breadcrumbs-itemLink + .spectrum-Breadcrumbs-itemSeparator",
-    ".spectrum-Breadcrumbs-itemLink.is-disabled",
     ".spectrum-Breadcrumbs-itemLink:focus-visible:before",
+    ".spectrum-Breadcrumbs-itemLink.is-disabled",
     ".spectrum-Breadcrumbs-itemLink[aria-disabled=\"true\"]",
     ".spectrum-Breadcrumbs-itemLink[href]",
     ".spectrum-Breadcrumbs-itemLink[href]:active",
@@ -31,134 +31,695 @@
     ".spectrum-Breadcrumbs-itemSeparator",
     ".spectrum-Breadcrumbs-itemSeparator:dir(rtl)"
   ],
-  "modifiers": [
-    "--mod-breadcrumbs-action-button-color",
-    "--mod-breadcrumbs-action-button-color-disabled",
-    "--mod-breadcrumbs-action-button-spacing-block",
-    "--mod-breadcrumbs-action-button-spacing-inline",
-    "--mod-breadcrumbs-block-size",
-    "--mod-breadcrumbs-focus-indicator-color",
-    "--mod-breadcrumbs-focus-indicator-gap",
-    "--mod-breadcrumbs-focus-indicator-thickness",
-    "--mod-breadcrumbs-font-family",
-    "--mod-breadcrumbs-font-family-current",
-    "--mod-breadcrumbs-font-size",
-    "--mod-breadcrumbs-font-size-current",
-    "--mod-breadcrumbs-font-style",
-    "--mod-breadcrumbs-font-weight",
-    "--mod-breadcrumbs-font-weight-current",
-    "--mod-breadcrumbs-icon-spacing-block",
-    "--mod-breadcrumbs-inline-end",
-    "--mod-breadcrumbs-inline-start",
-    "--mod-breadcrumbs-inline-start-to-truncated-menu",
-    "--mod-breadcrumbs-item-dragged-background",
-    "--mod-breadcrumbs-item-link-border-radius",
-    "--mod-breadcrumbs-line-height",
-    "--mod-breadcrumbs-separator-color",
-    "--mod-breadcrumbs-separator-spacing-inline",
-    "--mod-breadcrumbs-text-color",
-    "--mod-breadcrumbs-text-color-current",
-    "--mod-breadcrumbs-text-color-disabled",
-    "--mod-breadcrumbs-text-decoration-gap",
-    "--mod-breadcrumbs-text-decoration-thickness",
-    "--mod-breadcrumbs-text-spacing-block-end",
-    "--mod-breadcrumbs-text-spacing-block-start",
-    "--mod-breadcrumbs-title-spacing-block-end",
-    "--mod-breadcrumbs-title-spacing-block-start",
-    "--mod-heading-margin-end",
-    "--mod-heading-margin-start"
-  ],
-  "component": [
-    "--spectrum-breadcrumbs-action-button-color",
-    "--spectrum-breadcrumbs-action-button-color-disabled",
-    "--spectrum-breadcrumbs-action-button-spacing-block",
-    "--spectrum-breadcrumbs-action-button-spacing-inline",
-    "--spectrum-breadcrumbs-block-size",
-    "--spectrum-breadcrumbs-bottom-to-text-multiline",
-    "--spectrum-breadcrumbs-end-edge-to-text",
-    "--spectrum-breadcrumbs-focus-indicator-color",
-    "--spectrum-breadcrumbs-focus-indicator-gap",
-    "--spectrum-breadcrumbs-focus-indicator-thickness",
-    "--spectrum-breadcrumbs-font-family",
-    "--spectrum-breadcrumbs-font-family-current",
-    "--spectrum-breadcrumbs-font-size",
-    "--spectrum-breadcrumbs-font-size-current",
-    "--spectrum-breadcrumbs-font-style",
-    "--spectrum-breadcrumbs-font-weight",
-    "--spectrum-breadcrumbs-font-weight-current",
-    "--spectrum-breadcrumbs-height-multiline",
-    "--spectrum-breadcrumbs-icon-spacing-block",
-    "--spectrum-breadcrumbs-inline-end",
-    "--spectrum-breadcrumbs-inline-start",
-    "--spectrum-breadcrumbs-inline-start-to-truncated-menu",
-    "--spectrum-breadcrumbs-item-dragged-background",
-    "--spectrum-breadcrumbs-item-link-border-radius",
-    "--spectrum-breadcrumbs-line-height",
-    "--spectrum-breadcrumbs-separator-color",
-    "--spectrum-breadcrumbs-separator-spacing-inline",
-    "--spectrum-breadcrumbs-separator-to-bottom-text-multiline",
-    "--spectrum-breadcrumbs-start-edge-to-text-large",
-    "--spectrum-breadcrumbs-start-edge-to-text-medium",
-    "--spectrum-breadcrumbs-start-edge-to-text-multiline",
-    "--spectrum-breadcrumbs-start-edge-to-truncated-menu",
-    "--spectrum-breadcrumbs-text-color",
-    "--spectrum-breadcrumbs-text-color-current",
-    "--spectrum-breadcrumbs-text-color-disabled",
-    "--spectrum-breadcrumbs-text-decoration-gap",
-    "--spectrum-breadcrumbs-text-decoration-thickness",
-    "--spectrum-breadcrumbs-text-spacing-block-end",
-    "--spectrum-breadcrumbs-text-spacing-block-start",
-    "--spectrum-breadcrumbs-text-to-separator-large",
-    "--spectrum-breadcrumbs-text-to-separator-medium",
-    "--spectrum-breadcrumbs-text-to-separator-multiline",
-    "--spectrum-breadcrumbs-title-spacing-block-end",
-    "--spectrum-breadcrumbs-title-spacing-block-start",
-    "--spectrum-breadcrumbs-top-text-to-bottom-text",
-    "--spectrum-breadcrumbs-top-to-separator-large",
-    "--spectrum-breadcrumbs-top-to-separator-medium",
-    "--spectrum-breadcrumbs-top-to-separator-multiline",
-    "--spectrum-breadcrumbs-top-to-text-multiline",
-    "--spectrum-breadcrumbs-top-to-truncated-menu",
-    "--spectrum-breadcrumbs-truncated-menu-to-bottom-text",
-    "--spectrum-breadcrumbs-truncated-menu-to-separator"
-  ],
-  "global": [
-    "--spectrum-bold-font-weight",
-    "--spectrum-component-bottom-to-text-100",
-    "--spectrum-component-bottom-to-text-200",
-    "--spectrum-component-height-100",
-    "--spectrum-component-height-200",
-    "--spectrum-component-top-to-text-100",
-    "--spectrum-component-top-to-text-200",
-    "--spectrum-corner-radius-small-default",
-    "--spectrum-default-font-style",
-    "--spectrum-disabled-content-color",
-    "--spectrum-drop-zone-background-color-opacity",
-    "--spectrum-drop-zone-background-color-rgb",
-    "--spectrum-extra-bold-font-weight",
-    "--spectrum-focus-indicator-color",
-    "--spectrum-focus-indicator-gap",
-    "--spectrum-focus-indicator-thickness",
-    "--spectrum-font-size-100",
-    "--spectrum-font-size-200",
-    "--spectrum-font-size-75",
-    "--spectrum-heading-size-l",
-    "--spectrum-line-height-100",
-    "--spectrum-neutral-content-color-default",
-    "--spectrum-neutral-subdued-content-color-default",
-    "--spectrum-regular-font-weight",
-    "--spectrum-sans-font-family-stack",
-    "--spectrum-text-underline-gap",
-    "--spectrum-text-underline-thickness"
-  ],
-  "passthroughs": [],
-  "high-contrast": [
-    "--highcontrast-breadcrumbs-action-button-color",
-    "--highcontrast-breadcrumbs-action-button-color-disabled",
-    "--highcontrast-breadcrumbs-focus-indicator-color",
-    "--highcontrast-breadcrumbs-separator-color",
-    "--highcontrast-breadcrumbs-text-color",
-    "--highcontrast-breadcrumbs-text-color-current",
-    "--highcontrast-breadcrumbs-text-color-disabled"
-  ]
+  "modifiers": {
+    "mod-heading-margin-end": {
+      "description": "Defined in `.spectrum-Breadcrumbs`. <br/>Defaults to `0px`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-margin-start": {
+      "description": "Defined in `.spectrum-Breadcrumbs`. <br/>Defaults to `0px`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-breadcrumbs-inline-end": {
+      "description": "Used by `.spectrum-Breadcrumbs`. <br/>Defaults to `var(--spectrum-breadcrumbs-inline-end)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-breadcrumbs-block-size": {
+      "description": "Used by `.spectrum-Breadcrumbs`. <br/>Defaults to `var(--spectrum-breadcrumbs-block-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-breadcrumbs-icon-spacing-block": {
+      "description": "Used by `.spectrum-Breadcrumbs-itemSeparator`. <br/>Defaults to `var(--spectrum-breadcrumbs-icon-spacing-block)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-breadcrumbs-separator-color": {
+      "description": "Used by `.spectrum-Breadcrumbs-itemSeparator`. <br/>Defaults to `var(--spectrum-breadcrumbs-separator-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-breadcrumbs-font-family": {
+      "description": "Used by `.spectrum-Breadcrumbs-item`. <br/>Defaults to `var(--spectrum-breadcrumbs-font-family)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-breadcrumbs-font-size": {
+      "description": "Used by `.spectrum-Breadcrumbs-item`. <br/>Defaults to `var(--spectrum-breadcrumbs-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-breadcrumbs-font-weight": {
+      "description": "Used by `.spectrum-Breadcrumbs-item`. <br/>Defaults to `var(--spectrum-breadcrumbs-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-breadcrumbs-font-style": {
+      "description": "Used by `.spectrum-Breadcrumbs-item`. <br/>Defaults to `var(--spectrum-breadcrumbs-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-breadcrumbs-line-height": {
+      "description": "Used by `.spectrum-Breadcrumbs-item`. <br/>Defaults to `var(--spectrum-breadcrumbs-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-breadcrumbs-font-family-current": {
+      "description": "Used by `.spectrum-Breadcrumbs-item:last-of-type`. <br/>Defaults to `var(--spectrum-breadcrumbs-font-family-current)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-breadcrumbs-font-size-current": {
+      "description": "Used by `.spectrum-Breadcrumbs-item:last-of-type`. <br/>Defaults to `var(--spectrum-breadcrumbs-font-size-current)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-breadcrumbs-font-weight-current": {
+      "description": "Used by `.spectrum-Breadcrumbs-item:last-of-type`. <br/>Defaults to `var(--spectrum-breadcrumbs-font-weight-current)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-breadcrumbs-action-button-spacing-inline": {
+      "description": "Used by `.spectrum-Breadcrumbs-item > .spectrum-ActionButton`. <br/>Defaults to `var(--spectrum-breadcrumbs-action-button-spacing-inline)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-breadcrumbs-action-button-spacing-block": {
+      "description": "Used by `.spectrum-Breadcrumbs-item > .spectrum-ActionButton`. <br/>Defaults to `var(--spectrum-breadcrumbs-action-button-spacing-block)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-breadcrumbs-action-button-color": {
+      "description": "Used by `.spectrum-Breadcrumbs-item > .spectrum-ActionButton`. <br/>Defaults to `var(--spectrum-breadcrumbs-action-button-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-breadcrumbs-action-button-color-disabled": {
+      "description": "Used by `.spectrum-Breadcrumbs-item > .spectrum-ActionButton:disabled`. <br/>Defaults to `var(--spectrum-breadcrumbs-action-button-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-breadcrumbs-inline-start": {
+      "description": "Used by `.spectrum-Breadcrumbs-item:first-of-type > .spectrum-Breadcrumbs-itemLink`, `.spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-item:last-of-type > .spectrum-Breadcrumbs-itemLink`. <br/>Defaults to `var(--spectrum-breadcrumbs-inline-start)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-breadcrumbs-inline-start-to-truncated-menu": {
+      "description": "Used by `.spectrum-Breadcrumbs-item:first-of-type > .spectrum-ActionButton`. <br/>Defaults to `var(--spectrum-breadcrumbs-inline-start-to-truncated-menu)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-breadcrumbs-item-link-border-radius": {
+      "description": "Used by `.spectrum-Breadcrumbs-itemLink`, `.spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink:before, .spectrum-Breadcrumbs-itemLink:focus-visible:before`. <br/>Defaults to `var(--spectrum-breadcrumbs-item-link-border-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-breadcrumbs-text-color": {
+      "description": "Used by `.spectrum-Breadcrumbs-itemLink`. <br/>Defaults to `var(--spectrum-breadcrumbs-text-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-breadcrumbs-text-spacing-block-start": {
+      "description": "Used by `.spectrum-Breadcrumbs-itemLink`. <br/>Defaults to `var(--spectrum-breadcrumbs-text-spacing-block-start)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-breadcrumbs-text-spacing-block-end": {
+      "description": "Used by `.spectrum-Breadcrumbs-itemLink`. <br/>Defaults to `var(--spectrum-breadcrumbs-text-spacing-block-end)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-breadcrumbs-separator-spacing-inline": {
+      "description": "Used by `.spectrum-Breadcrumbs-itemLink`, `.spectrum-Breadcrumbs-itemLink + .spectrum-Breadcrumbs-itemSeparator`. <br/>Defaults to `var(--spectrum-breadcrumbs-separator-spacing-inline)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-breadcrumbs-text-color-disabled": {
+      "description": "Used by `.spectrum-Breadcrumbs-itemLink.is-disabled, .spectrum-Breadcrumbs-itemLink[aria-disabled=\"true\"]`. <br/>Defaults to `var(--spectrum-breadcrumbs-text-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-breadcrumbs-text-color-current": {
+      "description": "Used by `.spectrum-Breadcrumbs-item:last-of-type .spectrum-Breadcrumbs-itemLink`. <br/>Defaults to `var(--spectrum-breadcrumbs-text-color-current)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-breadcrumbs-title-spacing-block-start": {
+      "description": "Used by `.spectrum-Breadcrumbs-item:last-of-type .spectrum-Breadcrumbs-itemLink`. <br/>Defaults to `var(--spectrum-breadcrumbs-title-spacing-block-start)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-breadcrumbs-title-spacing-block-end": {
+      "description": "Used by `.spectrum-Breadcrumbs-item:last-of-type .spectrum-Breadcrumbs-itemLink`. <br/>Defaults to `var(--spectrum-breadcrumbs-title-spacing-block-end)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-breadcrumbs-text-decoration-thickness": {
+      "description": "Used by `.spectrum-Breadcrumbs-itemLink[href]:active, .spectrum-Breadcrumbs-itemLink[href]:focus-visible, .spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:active, .spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:focus-visible`, `.spectrum-Breadcrumbs-itemLink[href]:hover, .spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:hover`. <br/>Defaults to `var(--spectrum-breadcrumbs-text-decoration-thickness)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-breadcrumbs-text-decoration-gap": {
+      "description": "Used by `.spectrum-Breadcrumbs-itemLink[href]:active, .spectrum-Breadcrumbs-itemLink[href]:focus-visible, .spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:active, .spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:focus-visible`, `.spectrum-Breadcrumbs-itemLink[href]:hover, .spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:hover`. <br/>Defaults to `var(--spectrum-breadcrumbs-text-decoration-gap)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-breadcrumbs-focus-indicator-gap": {
+      "description": "Used by `.spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink:before, .spectrum-Breadcrumbs-itemLink:focus-visible:before`. <br/>Defaults to `var(--spectrum-breadcrumbs-focus-indicator-gap)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-breadcrumbs-focus-indicator-thickness": {
+      "description": "Used by `.spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink:before, .spectrum-Breadcrumbs-itemLink:focus-visible:before`. <br/>Defaults to `var(--spectrum-breadcrumbs-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-breadcrumbs-focus-indicator-color": {
+      "description": "Used by `.spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink:before, .spectrum-Breadcrumbs-itemLink:focus-visible:before`. <br/>Defaults to `var(--spectrum-breadcrumbs-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-breadcrumbs-item-dragged-background": {
+      "description": "Used by `.spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink:before`. <br/>Defaults to `var(--spectrum-breadcrumbs-item-dragged-background)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-breadcrumbs-block-size": {
+      "value": "72px",
+      "description": "Defined in `.spectrum-Breadcrumbs`, `.spectrum-Breadcrumbs--sizeL`, `.spectrum-Breadcrumbs--multiline`. <br/>Used by `.spectrum-Breadcrumbs`. <br/>Defaults to `var(--spectrum-breadcrumbs-height-multiline)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-line-height": {
+      "value": "1.3",
+      "description": "Defined in `.spectrum-Breadcrumbs`. <br/>Used by `.spectrum-Breadcrumbs-item`. <br/>Defaults to `var(--spectrum-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-font-size": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-Breadcrumbs`, `.spectrum-Breadcrumbs--sizeL`, `.spectrum-Breadcrumbs--multiline`. <br/>Used by `.spectrum-Breadcrumbs-item`. <br/>Defaults to `var(--spectrum-font-size-75)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-font-family": {
+      "value": "var(--spectrum-sans-font-family-stack)",
+      "description": "Defined in `.spectrum-Breadcrumbs`. <br/>Used by `.spectrum-Breadcrumbs-item`. <br/>Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-font-weight": {
+      "value": "400",
+      "description": "Defined in `.spectrum-Breadcrumbs`. <br/>Used by `.spectrum-Breadcrumbs-item`. <br/>Defaults to `var(--spectrum-regular-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-font-style": {
+      "value": "normal",
+      "description": "Defined in `.spectrum-Breadcrumbs`. <br/>Used by `.spectrum-Breadcrumbs-item`. <br/>Defaults to `var(--spectrum-default-font-style)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-font-size-current": {
+      "value": "var(--spectrum-font-size-700)",
+      "description": "Defined in `.spectrum-Breadcrumbs`, `.spectrum-Breadcrumbs--sizeL`, `.spectrum-Breadcrumbs--multiline`. <br/>Used by `.spectrum-Breadcrumbs-item:last-of-type`. <br/>Defaults to `var(--spectrum-heading-size-l)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-font-family-current": {
+      "value": "var(--spectrum-sans-font-family-stack)",
+      "description": "Defined in `.spectrum-Breadcrumbs`. <br/>Used by `.spectrum-Breadcrumbs-item:last-of-type`. <br/>Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-font-weight-current": {
+      "value": "800",
+      "description": "Defined in `.spectrum-Breadcrumbs`, `.spectrum-Breadcrumbs--multiline`. <br/>Used by `.spectrum-Breadcrumbs-item:last-of-type`. <br/>Defaults to `var(--spectrum-extra-bold-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-text-decoration-thickness": {
+      "value": "1px",
+      "description": "Defined in `.spectrum-Breadcrumbs`. <br/>Used by `.spectrum-Breadcrumbs-itemLink[href]:active, .spectrum-Breadcrumbs-itemLink[href]:focus-visible, .spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:active, .spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:focus-visible`, `.spectrum-Breadcrumbs-itemLink[href]:hover, .spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:hover`. <br/>Defaults to `var(--spectrum-text-underline-thickness)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-text-decoration-gap": {
+      "value": "1px",
+      "description": "Defined in `.spectrum-Breadcrumbs`. <br/>Used by `.spectrum-Breadcrumbs-itemLink[href]:active, .spectrum-Breadcrumbs-itemLink[href]:focus-visible, .spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:active, .spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:focus-visible`, `.spectrum-Breadcrumbs-itemLink[href]:hover, .spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:hover`. <br/>Defaults to `var(--spectrum-text-underline-gap)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-separator-spacing-inline": {
+      "value": "4px",
+      "description": "Defined in `.spectrum-Breadcrumbs`, `.spectrum-Breadcrumbs--sizeL`, `.spectrum-Breadcrumbs--multiline`. <br/>Used by `.spectrum-Breadcrumbs-itemLink`, `.spectrum-Breadcrumbs-itemLink + .spectrum-Breadcrumbs-itemSeparator`. <br/>Defaults to `var(--spectrum-breadcrumbs-text-to-separator-multiline)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-text-to-separator-medium": {
+      "value": "6px",
+      "description": "Used by `--spectrum-breadcrumbs-separator-spacing-inline`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-text-spacing-block-start": {
+      "value": "4px",
+      "description": "Defined in `.spectrum-Breadcrumbs`, `.spectrum-Breadcrumbs--sizeL`, `.spectrum-Breadcrumbs--multiline`. <br/>Used by `--spectrum-breadcrumbs-title-spacing-block-start`, `.spectrum-Breadcrumbs-itemLink`. <br/>Defaults to `var(--spectrum-breadcrumbs-top-to-text-multiline)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-text-spacing-block-end": {
+      "value": "9px",
+      "description": "Defined in `.spectrum-Breadcrumbs`, `.spectrum-Breadcrumbs--sizeL`, `.spectrum-Breadcrumbs--multiline`. <br/>Used by `--spectrum-breadcrumbs-title-spacing-block-end`, `.spectrum-Breadcrumbs-itemLink`. <br/>Defaults to `var(--spectrum-breadcrumbs-top-text-to-bottom-text)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-icon-spacing-block": {
+      "value": "var(--spectrum-breadcrumbs-top-to-separator-multiline) var(--spectrum-breadcrumbs-separator-to-bottom-text-multiline)",
+      "description": "Defined in `.spectrum-Breadcrumbs`, `.spectrum-Breadcrumbs--sizeL`, `.spectrum-Breadcrumbs--multiline`. <br/>Used by `.spectrum-Breadcrumbs-itemSeparator`. <br/>Defaults to `var(--spectrum-breadcrumbs-top-to-separator-multiline) var(--spectrum-breadcrumbs-separator-to-bottom-text-multiline)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-top-to-separator-medium": {
+      "value": "11px",
+      "description": "Used by `--spectrum-breadcrumbs-icon-spacing-block`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-title-spacing-block-start": {
+      "value": "0",
+      "description": "Defined in `.spectrum-Breadcrumbs`, `.spectrum-Breadcrumbs--multiline`. <br/>Used by `.spectrum-Breadcrumbs-item:last-of-type .spectrum-Breadcrumbs-itemLink`. <br/>Defaults to `0`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-title-spacing-block-end": {
+      "value": "9px",
+      "description": "Defined in `.spectrum-Breadcrumbs`, `.spectrum-Breadcrumbs--multiline`. <br/>Used by `.spectrum-Breadcrumbs-item:last-of-type .spectrum-Breadcrumbs-itemLink`. <br/>Defaults to `var(--spectrum-breadcrumbs-bottom-to-text-multiline)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-inline-start": {
+      "value": "4px",
+      "description": "Defined in `.spectrum-Breadcrumbs`, `.spectrum-Breadcrumbs--sizeL`, `.spectrum-Breadcrumbs--multiline`. <br/>Used by `.spectrum-Breadcrumbs-item:first-of-type > .spectrum-Breadcrumbs-itemLink`, `.spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-item:last-of-type > .spectrum-Breadcrumbs-itemLink`. <br/>Defaults to `var(--spectrum-breadcrumbs-start-edge-to-text-multiline)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-start-edge-to-text-medium": {
+      "value": "6px",
+      "description": "Used by `--spectrum-breadcrumbs-inline-start`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-inline-end": {
+      "value": "0px",
+      "description": "Defined in `.spectrum-Breadcrumbs`. <br/>Used by `.spectrum-Breadcrumbs`. <br/>Defaults to `var(--spectrum-breadcrumbs-end-edge-to-text)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-end-edge-to-text": {
+      "value": "0px",
+      "description": "Used by `--spectrum-breadcrumbs-inline-end`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-inline-start-to-truncated-menu": {
+      "value": "0px",
+      "description": "Defined in `.spectrum-Breadcrumbs`. <br/>Used by `.spectrum-Breadcrumbs-item:first-of-type > .spectrum-ActionButton`. <br/>Defaults to `var(--spectrum-breadcrumbs-start-edge-to-truncated-menu)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-start-edge-to-truncated-menu": {
+      "value": "0px",
+      "description": "Used by `--spectrum-breadcrumbs-inline-start-to-truncated-menu`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-action-button-spacing-inline": {
+      "value": "0px",
+      "description": "Defined in `.spectrum-Breadcrumbs`. <br/>Used by `.spectrum-Breadcrumbs-item > .spectrum-ActionButton`. <br/>Defaults to `var(--spectrum-breadcrumbs-truncated-menu-to-separator)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-truncated-menu-to-separator": {
+      "value": "0px",
+      "description": "Used by `--spectrum-breadcrumbs-action-button-spacing-inline`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-action-button-spacing-block": {
+      "value": "var(--spectrum-breadcrumbs-top-to-truncated-menu) var(--spectrum-breadcrumbs-truncated-menu-to-bottom-text)",
+      "description": "Defined in `.spectrum-Breadcrumbs`, `.spectrum-Breadcrumbs--multiline`. <br/>Used by `.spectrum-Breadcrumbs-item > .spectrum-ActionButton`. <br/>Defaults to `var(--spectrum-breadcrumbs-top-to-truncated-menu) var(--spectrum-breadcrumbs-truncated-menu-to-bottom-text)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-top-to-truncated-menu": {
+      "value": "0px",
+      "description": "Used by `--spectrum-breadcrumbs-action-button-spacing-block`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Breadcrumbs`. <br/>Used by `.spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink:before, .spectrum-Breadcrumbs-itemLink:focus-visible:before`. <br/>Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-focus-indicator-gap": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Breadcrumbs`. <br/>Used by `.spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink:before, .spectrum-Breadcrumbs-itemLink:focus-visible:before`. <br/>Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-item-link-border-radius": {
+      "value": "4px",
+      "description": "Defined in `.spectrum-Breadcrumbs`. <br/>Used by `.spectrum-Breadcrumbs-itemLink`, `.spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink:before, .spectrum-Breadcrumbs-itemLink:focus-visible:before`. <br/>Defaults to `var(--spectrum-corner-radius-small-default)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-text-color": {
+      "value": "var(--spectrum-gray-700)",
+      "description": "Defined in `.spectrum-Breadcrumbs`. <br/>Used by `.spectrum-Breadcrumbs-itemLink`. <br/>Defaults to `var(--spectrum-neutral-subdued-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-text-color-current": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-Breadcrumbs`. <br/>Used by `.spectrum-Breadcrumbs-item:last-of-type .spectrum-Breadcrumbs-itemLink`. <br/>Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-text-color-disabled": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Defined in `.spectrum-Breadcrumbs`. <br/>Used by `.spectrum-Breadcrumbs-itemLink.is-disabled, .spectrum-Breadcrumbs-itemLink[aria-disabled=\"true\"]`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-separator-color": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-Breadcrumbs`. <br/>Used by `.spectrum-Breadcrumbs-itemSeparator`. <br/>Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-action-button-color": {
+      "value": "var(--spectrum-gray-700)",
+      "description": "Defined in `.spectrum-Breadcrumbs`. <br/>Used by `.spectrum-Breadcrumbs-item > .spectrum-ActionButton`. <br/>Defaults to `var(--spectrum-neutral-subdued-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-action-button-color-disabled": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Defined in `.spectrum-Breadcrumbs`. <br/>Used by `.spectrum-Breadcrumbs-item > .spectrum-ActionButton:disabled`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-focus-indicator-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Defined in `.spectrum-Breadcrumbs`. <br/>Used by `.spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink:before, .spectrum-Breadcrumbs-itemLink:focus-visible:before`. <br/>Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-item-dragged-background": {
+      "value": "rgb(var(--spectrum-drop-zone-background-color-rgb), var(--spectrum-drop-zone-background-color-opacity))",
+      "description": "Defined in `.spectrum-Breadcrumbs`. <br/>Used by `.spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink:before`. <br/>Defaults to `rgb(var(--spectrum-drop-zone-background-color-rgb), var(--spectrum-drop-zone-background-color-opacity))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-text-to-separator-large": {
+      "value": "9px",
+      "description": "Used by `--spectrum-breadcrumbs-separator-spacing-inline`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-top-to-separator-large": {
+      "value": "15px",
+      "description": "Used by `--spectrum-breadcrumbs-icon-spacing-block`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-start-edge-to-text-large": {
+      "value": "9px",
+      "description": "Used by `--spectrum-breadcrumbs-inline-start`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-height-multiline": {
+      "value": "72px",
+      "description": "Used by `--spectrum-breadcrumbs-block-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-text-to-separator-multiline": {
+      "value": "4px",
+      "description": "Used by `--spectrum-breadcrumbs-separator-spacing-inline`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-top-to-text-multiline": {
+      "value": "4px",
+      "description": "Used by `--spectrum-breadcrumbs-text-spacing-block-start`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-top-text-to-bottom-text": {
+      "value": "9px",
+      "description": "Used by `--spectrum-breadcrumbs-text-spacing-block-end`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-top-to-separator-multiline": {
+      "value": "7px",
+      "description": "Used by `--spectrum-breadcrumbs-icon-spacing-block`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-separator-to-bottom-text-multiline": {
+      "value": "11px",
+      "description": "Used by `--spectrum-breadcrumbs-icon-spacing-block`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-bottom-to-text-multiline": {
+      "value": "9px",
+      "description": "Used by `--spectrum-breadcrumbs-title-spacing-block-end`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-start-edge-to-text-multiline": {
+      "value": "4px",
+      "description": "Used by `--spectrum-breadcrumbs-inline-start`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-breadcrumbs-truncated-menu-to-bottom-text": {
+      "value": "4px",
+      "description": "Used by `--spectrum-breadcrumbs-action-button-spacing-block`.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-component-height-100": {
+      "value": "32px",
+      "description": "Used by `--spectrum-breadcrumbs-block-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-line-height-100": {
+      "value": "1.3",
+      "description": "Used by `--spectrum-breadcrumbs-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-100": {
+      "value": "14px",
+      "description": "Used by `--spectrum-breadcrumbs-font-size`, `--spectrum-breadcrumbs-font-size-current`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-sans-font-family-stack": {
+      "description": "Used by `--spectrum-breadcrumbs-font-family`, `--spectrum-breadcrumbs-font-family-current`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-regular-font-weight": {
+      "value": "400",
+      "description": "Used by `--spectrum-breadcrumbs-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-default-font-style": {
+      "value": "normal",
+      "description": "Used by `--spectrum-breadcrumbs-font-style`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-bold-font-weight": {
+      "value": "700",
+      "description": "Used by `--spectrum-breadcrumbs-font-weight-current`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-underline-thickness": {
+      "value": "1px",
+      "description": "Used by `--spectrum-breadcrumbs-text-decoration-thickness`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-underline-gap": {
+      "value": "1px",
+      "description": "Used by `--spectrum-breadcrumbs-text-decoration-gap`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-breadcrumbs-text-spacing-block-start`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-100": {
+      "value": "9px",
+      "description": "Used by `--spectrum-breadcrumbs-text-spacing-block-end`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Used by `--spectrum-breadcrumbs-focus-indicator-thickness`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-gap": {
+      "value": "2px",
+      "description": "Used by `--spectrum-breadcrumbs-focus-indicator-gap`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-small-default": {
+      "value": "4px",
+      "description": "Used by `--spectrum-breadcrumbs-item-link-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-subdued-content-color-default": {
+      "value": "var(--spectrum-gray-700)",
+      "description": "Used by `--spectrum-breadcrumbs-text-color`, `--spectrum-breadcrumbs-action-button-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-breadcrumbs-text-color-current`, `--spectrum-breadcrumbs-separator-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-disabled-content-color": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Used by `--spectrum-breadcrumbs-text-color-disabled`, `--spectrum-breadcrumbs-action-button-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Used by `--spectrum-breadcrumbs-focus-indicator-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-drop-zone-background-color-rgb": {
+      "description": "Used by `--spectrum-breadcrumbs-item-dragged-background`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-drop-zone-background-color-opacity": {
+      "value": "0.1",
+      "description": "Used by `--spectrum-breadcrumbs-item-dragged-background`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-component-height-200": {
+      "value": "40px",
+      "description": "Used by `--spectrum-breadcrumbs-block-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-200": {
+      "value": "16px",
+      "description": "Used by `--spectrum-breadcrumbs-font-size`, `--spectrum-breadcrumbs-font-size-current`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-200": {
+      "value": "9px",
+      "description": "Used by `--spectrum-breadcrumbs-text-spacing-block-start`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-200": {
+      "value": "11px",
+      "description": "Used by `--spectrum-breadcrumbs-text-spacing-block-end`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-75": {
+      "value": "12px",
+      "description": "Used by `--spectrum-breadcrumbs-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-size-l": {
+      "value": "var(--spectrum-font-size-700)",
+      "description": "Used by `--spectrum-breadcrumbs-font-size-current`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-extra-bold-font-weight": {
+      "value": "800",
+      "description": "Used by `--spectrum-breadcrumbs-font-weight-current`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {
+    "highcontrast-breadcrumbs-separator-color": {
+      "value": "var(--mod-breadcrumbs-separator-color, var(--spectrum-breadcrumbs-separator-color))",
+      "description": "Defined in `.spectrum-Breadcrumbs`. <br/>Used by `.spectrum-Breadcrumbs-itemSeparator`. <br/>Defaults to `var(--mod-breadcrumbs-separator-color, var(--spectrum-breadcrumbs-separator-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-breadcrumbs-action-button-color": {
+      "value": "var(--mod-breadcrumbs-action-button-color, var(--spectrum-breadcrumbs-action-button-color))",
+      "description": "Defined in `.spectrum-Breadcrumbs`. <br/>Used by `.spectrum-Breadcrumbs-item > .spectrum-ActionButton`. <br/>Defaults to `var(--mod-breadcrumbs-action-button-color, var(--spectrum-breadcrumbs-action-button-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-breadcrumbs-action-button-color-disabled": {
+      "value": "var(--mod-breadcrumbs-action-button-color-disabled, var(--spectrum-breadcrumbs-action-button-color-disabled))",
+      "description": "Defined in `.spectrum-Breadcrumbs`. <br/>Used by `.spectrum-Breadcrumbs-item > .spectrum-ActionButton:disabled`. <br/>Defaults to `var(--mod-breadcrumbs-action-button-color-disabled, var(--spectrum-breadcrumbs-action-button-color-disabled))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-breadcrumbs-text-color": {
+      "value": "var(--mod-breadcrumbs-text-color, var(--spectrum-breadcrumbs-text-color))",
+      "description": "Defined in `.spectrum-Breadcrumbs`. <br/>Used by `.spectrum-Breadcrumbs-itemLink`. <br/>Defaults to `var(--mod-breadcrumbs-text-color, var(--spectrum-breadcrumbs-text-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-breadcrumbs-text-color-disabled": {
+      "value": "var(--mod-breadcrumbs-text-color-disabled, var(--spectrum-breadcrumbs-text-color-disabled))",
+      "description": "Defined in `.spectrum-Breadcrumbs`. <br/>Used by `.spectrum-Breadcrumbs-itemLink.is-disabled, .spectrum-Breadcrumbs-itemLink[aria-disabled=\"true\"]`. <br/>Defaults to `var(--mod-breadcrumbs-text-color-disabled, var(--spectrum-breadcrumbs-text-color-disabled))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-breadcrumbs-text-color-current": {
+      "value": "var(--mod-breadcrumbs-text-color-current, var(--spectrum-breadcrumbs-text-color-current))",
+      "description": "Defined in `.spectrum-Breadcrumbs`. <br/>Used by `.spectrum-Breadcrumbs-item:last-of-type .spectrum-Breadcrumbs-itemLink`. <br/>Defaults to `var(--mod-breadcrumbs-text-color-current, var(--spectrum-breadcrumbs-text-color-current))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-breadcrumbs-focus-indicator-color": {
+      "value": "var(--mod-breadcrumbs-focus-indicator-color, var(--spectrum-breadcrumbs-focus-indicator-color))",
+      "description": "Defined in `.spectrum-Breadcrumbs`. <br/>Used by `.spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink:before, .spectrum-Breadcrumbs-itemLink:focus-visible:before`. <br/>Defaults to `var(--mod-breadcrumbs-focus-indicator-color, var(--spectrum-breadcrumbs-focus-indicator-color))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/breadcrumb/stories/breadcrumb.stories.js b/components/breadcrumb/stories/breadcrumb.stories.js
index 33faf477ad0..8a4a92b7282 100644
--- a/components/breadcrumb/stories/breadcrumb.stories.js
+++ b/components/breadcrumb/stories/breadcrumb.stories.js
@@ -1,10 +1,12 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDragged, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { BreadcrumbGroup } from "./breadcrumb.test.js";
 import { BreadcrumbTitleHeadings, Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * Breadcrumbs show hierarchy and navigational context for a user's location within an app.
  */
@@ -141,7 +143,11 @@ export default {
 		metadata,
 		status: {
 			type: "migrated",
-		}
+		},
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 	tags: ["migrated"],
 };
diff --git a/components/breadcrumb/stories/template.js b/components/breadcrumb/stories/template.js
index 0a0ad48c0d9..d725f66e683 100644
--- a/components/breadcrumb/stories/template.js
+++ b/components/breadcrumb/stories/template.js
@@ -1,16 +1,19 @@
 import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js";
 import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
-import { Container } from "@spectrum-css/preview/decorators";
+import { Container, getRandomId } from "@spectrum-css/preview/decorators";
 import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
 import { when } from "lit/directives/when.js";
 
 import "../index.css";
 
 export const Template = ({
 	rootClass = "spectrum-Breadcrumbs",
+	id = getRandomId("breadcrumbs"),
+	customStyles = {},
 	customClasses = [],
 	items = [],
 	size = "m",
@@ -48,6 +51,8 @@ export const Template = ({
 					[`${rootClass}--${variant}`]: typeof variant !== "undefined",
 					...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 				})}
+				id=${ifDefined(id)}
+				style=${styleMap(customStyles)}
 			>
 				${breadcrumbItems.map((item, idx, arr) => {
 					const { label, isDisabled, iconName, iconSet } = item;
diff --git a/components/button/dist/metadata.json b/components/button/dist/metadata.json
index 660dfcc6d96..6b737777551 100644
--- a/components/button/dist/metadata.json
+++ b/components/button/dist/metadata.json
@@ -13,6 +13,16 @@
     ".spectrum-Button--sizeXL",
     ".spectrum-Button-label",
     ".spectrum-Button-label:empty",
+    ".spectrum-Button::-moz-focus-inner",
+    ".spectrum-Button:active",
+    ".spectrum-Button:after",
+    ".spectrum-Button:disabled",
+    ".spectrum-Button:focus",
+    ".spectrum-Button:focus-visible",
+    ".spectrum-Button:focus-visible:after",
+    ".spectrum-Button:hover",
+    ".spectrum-Button:not(.spectrum-Button--primary, .spectrum-Button--negative, .spectrum-Button--secondary, .spectrum-Button--staticBlack, .spectrum-Button--staticWhite)",
+    ".spectrum-Button:not(.spectrum-Button--primary, .spectrum-Button--negative, .spectrum-Button--secondary, .spectrum-Button--staticBlack, .spectrum-Button--staticWhite) .spectrum-Button-label",
     ".spectrum-Button.is-disabled",
     ".spectrum-Button.is-focused",
     ".spectrum-Button.is-focused:after",
@@ -38,234 +48,1162 @@
     ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline",
     ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary",
     ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline",
-    ".spectrum-Button::-moz-focus-inner",
-    ".spectrum-Button:active",
-    ".spectrum-Button:after",
-    ".spectrum-Button:disabled",
-    ".spectrum-Button:focus",
-    ".spectrum-Button:focus-visible",
-    ".spectrum-Button:focus-visible:after",
-    ".spectrum-Button:hover",
-    ".spectrum-Button:not(.spectrum-Button--primary, .spectrum-Button--negative, .spectrum-Button--secondary, .spectrum-Button--staticBlack, .spectrum-Button--staticWhite)",
-    ".spectrum-Button:not(.spectrum-Button--primary, .spectrum-Button--negative, .spectrum-Button--secondary, .spectrum-Button--staticBlack, .spectrum-Button--staticWhite) .spectrum-Button-label",
     ".spectrum-Button[pending]",
     ".spectrum-Button[pending] .spectrum-Button-label",
     ".spectrum-Button[pending] .spectrum-Icon",
     ".spectrum-Button[pending] .spectrum-ProgressCircle",
     "a.spectrum-Button"
   ],
-  "modifiers": [
-    "--mod-button-animation-duration",
-    "--mod-button-background-color-default",
-    "--mod-button-background-color-disabled",
-    "--mod-button-background-color-down",
-    "--mod-button-background-color-focus",
-    "--mod-button-background-color-hover",
-    "--mod-button-border-color-default",
-    "--mod-button-border-color-disabled",
-    "--mod-button-border-color-down",
-    "--mod-button-border-color-focus",
-    "--mod-button-border-color-hover",
-    "--mod-button-border-radius",
-    "--mod-button-border-width",
-    "--mod-button-bottom-to-text",
-    "--mod-button-content-color-default",
-    "--mod-button-content-color-disabled",
-    "--mod-button-content-color-down",
-    "--mod-button-content-color-focus",
-    "--mod-button-content-color-hover",
-    "--mod-button-edge-to-text",
-    "--mod-button-edge-to-visual",
-    "--mod-button-edge-to-visual-only",
-    "--mod-button-focus-ring-border-radius",
-    "--mod-button-focus-ring-color",
-    "--mod-button-focus-ring-gap",
-    "--mod-button-focus-ring-thickness",
-    "--mod-button-font-family",
-    "--mod-button-font-size",
-    "--mod-button-font-weight",
-    "--mod-button-height",
-    "--mod-button-icon-margin-block-start",
-    "--mod-button-line-height",
-    "--mod-button-margin-block",
-    "--mod-button-margin-left",
-    "--mod-button-margin-right",
-    "--mod-button-max-inline-size",
-    "--mod-button-min-width",
-    "--mod-button-padding-label-to-icon",
-    "--mod-button-text-align",
-    "--mod-button-text-align-with-icon",
-    "--mod-button-top-to-icon",
-    "--mod-button-top-to-text"
-  ],
-  "component": [
-    "--spectrum-button-animation-duration",
-    "--spectrum-button-background-color-default",
-    "--spectrum-button-background-color-disabled",
-    "--spectrum-button-background-color-down",
-    "--spectrum-button-background-color-focus",
-    "--spectrum-button-background-color-hover",
-    "--spectrum-button-border-color-default",
-    "--spectrum-button-border-color-disabled",
-    "--spectrum-button-border-color-down",
-    "--spectrum-button-border-color-focus",
-    "--spectrum-button-border-color-hover",
-    "--spectrum-button-border-radius",
-    "--spectrum-button-border-width",
-    "--spectrum-button-bottom-to-text",
-    "--spectrum-button-bottom-to-text-extra-large",
-    "--spectrum-button-bottom-to-text-large",
-    "--spectrum-button-bottom-to-text-medium",
-    "--spectrum-button-bottom-to-text-small",
-    "--spectrum-button-content-color-default",
-    "--spectrum-button-content-color-disabled",
-    "--spectrum-button-content-color-down",
-    "--spectrum-button-content-color-focus",
-    "--spectrum-button-content-color-hover",
-    "--spectrum-button-edge-to-text",
-    "--spectrum-button-edge-to-visual",
-    "--spectrum-button-edge-to-visual-only",
-    "--spectrum-button-focus-indicator-color",
-    "--spectrum-button-focus-ring-gap",
-    "--spectrum-button-focus-ring-thickness",
-    "--spectrum-button-font-size",
-    "--spectrum-button-font-weight",
-    "--spectrum-button-height",
-    "--spectrum-button-intended-icon-size",
-    "--spectrum-button-line-height",
-    "--spectrum-button-min-width",
-    "--spectrum-button-minimum-width-multiplier",
-    "--spectrum-button-padding-label-to-icon",
-    "--spectrum-button-top-to-icon",
-    "--spectrum-button-top-to-text",
-    "--spectrum-button-top-to-text-extra-large",
-    "--spectrum-button-top-to-text-large",
-    "--spectrum-button-top-to-text-medium",
-    "--spectrum-button-top-to-text-small"
-  ],
-  "global": [
-    "--spectrum-accent-background-color-default",
-    "--spectrum-accent-background-color-down",
-    "--spectrum-accent-background-color-hover",
-    "--spectrum-accent-background-color-key-focus",
-    "--spectrum-animation-duration-100",
-    "--spectrum-black",
-    "--spectrum-bold-font-weight",
-    "--spectrum-border-width-200",
-    "--spectrum-component-height-100",
-    "--spectrum-component-height-200",
-    "--spectrum-component-height-300",
-    "--spectrum-component-height-75",
-    "--spectrum-component-pill-edge-to-text-100",
-    "--spectrum-component-pill-edge-to-text-200",
-    "--spectrum-component-pill-edge-to-text-300",
-    "--spectrum-component-pill-edge-to-text-75",
-    "--spectrum-component-pill-edge-to-visual-100",
-    "--spectrum-component-pill-edge-to-visual-200",
-    "--spectrum-component-pill-edge-to-visual-300",
-    "--spectrum-component-pill-edge-to-visual-75",
-    "--spectrum-component-pill-edge-to-visual-only-100",
-    "--spectrum-component-pill-edge-to-visual-only-200",
-    "--spectrum-component-pill-edge-to-visual-only-300",
-    "--spectrum-component-pill-edge-to-visual-only-75",
-    "--spectrum-component-size-difference-down",
-    "--spectrum-component-size-minimum-perspective-down",
-    "--spectrum-component-size-width-ratio-down",
-    "--spectrum-component-top-to-workflow-icon-100",
-    "--spectrum-component-top-to-workflow-icon-200",
-    "--spectrum-component-top-to-workflow-icon-300",
-    "--spectrum-component-top-to-workflow-icon-75",
-    "--spectrum-corner-radius-full",
-    "--spectrum-disabled-background-color",
-    "--spectrum-disabled-border-color",
-    "--spectrum-disabled-content-color",
-    "--spectrum-disabled-static-black-background-color",
-    "--spectrum-disabled-static-black-border-color",
-    "--spectrum-disabled-static-black-content-color",
-    "--spectrum-disabled-static-white-background-color",
-    "--spectrum-disabled-static-white-border-color",
-    "--spectrum-disabled-static-white-content-color",
-    "--spectrum-downstate-height",
-    "--spectrum-downstate-perspective",
-    "--spectrum-downstate-width",
-    "--spectrum-focus-indicator-color",
-    "--spectrum-focus-indicator-gap",
-    "--spectrum-focus-indicator-thickness",
-    "--spectrum-font-size-100",
-    "--spectrum-font-size-200",
-    "--spectrum-font-size-300",
-    "--spectrum-font-size-75",
-    "--spectrum-gray-100",
-    "--spectrum-gray-200",
-    "--spectrum-gray-25",
-    "--spectrum-gray-300",
-    "--spectrum-gray-400",
-    "--spectrum-gray-800",
-    "--spectrum-gray-900",
-    "--spectrum-icon-block-size",
-    "--spectrum-line-height-100",
-    "--spectrum-negative-background-color-default",
-    "--spectrum-negative-background-color-down",
-    "--spectrum-negative-background-color-hover",
-    "--spectrum-negative-background-color-key-focus",
-    "--spectrum-neutral-background-color-default",
-    "--spectrum-neutral-background-color-down",
-    "--spectrum-neutral-background-color-hover",
-    "--spectrum-neutral-background-color-key-focus",
-    "--spectrum-neutral-content-color-default",
-    "--spectrum-neutral-content-color-down",
-    "--spectrum-neutral-content-color-hover",
-    "--spectrum-neutral-content-color-key-focus",
-    "--spectrum-progress-circle-thickness-medium",
-    "--spectrum-sans-font-family-stack",
-    "--spectrum-static-black-focus-indicator-color",
-    "--spectrum-static-white-focus-indicator-color",
-    "--spectrum-text-to-visual-100",
-    "--spectrum-text-to-visual-200",
-    "--spectrum-text-to-visual-300",
-    "--spectrum-text-to-visual-75",
-    "--spectrum-transparent-black-100",
-    "--spectrum-transparent-black-200",
-    "--spectrum-transparent-black-25",
-    "--spectrum-transparent-black-300",
-    "--spectrum-transparent-black-400",
-    "--spectrum-transparent-black-800",
-    "--spectrum-transparent-black-900",
-    "--spectrum-transparent-white-100",
-    "--spectrum-transparent-white-200",
-    "--spectrum-transparent-white-25",
-    "--spectrum-transparent-white-300",
-    "--spectrum-transparent-white-400",
-    "--spectrum-transparent-white-800",
-    "--spectrum-transparent-white-900",
-    "--spectrum-white",
-    "--spectrum-workflow-icon-size-100",
-    "--spectrum-workflow-icon-size-200",
-    "--spectrum-workflow-icon-size-300",
-    "--spectrum-workflow-icon-size-75"
-  ],
-  "passthroughs": [
-    "--mod-progress-circle-position",
-    "--mod-progress-circle-thickness",
-    "--mod-progress-circle-track-border-color",
-    "--mod-progress-circle-track-border-color-over-background"
-  ],
-  "high-contrast": [
-    "--highcontrast-button-background-color-default",
-    "--highcontrast-button-background-color-disabled",
-    "--highcontrast-button-background-color-down",
-    "--highcontrast-button-background-color-focus",
-    "--highcontrast-button-background-color-hover",
-    "--highcontrast-button-border-color-default",
-    "--highcontrast-button-border-color-disabled",
-    "--highcontrast-button-border-color-down",
-    "--highcontrast-button-border-color-focus",
-    "--highcontrast-button-border-color-hover",
-    "--highcontrast-button-content-color-default",
-    "--highcontrast-button-content-color-disabled",
-    "--highcontrast-button-content-color-down",
-    "--highcontrast-button-content-color-focus",
-    "--highcontrast-button-content-color-hover",
-    "--highcontrast-button-focus-ring-color"
-  ]
+  "modifiers": {
+    "mod-button-font-family": {
+      "description": "Used by `.spectrum-Button`. <br/>Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-button-line-height": {
+      "description": "Used by `.spectrum-Button`, `.spectrum-Button-label`. <br/>Defaults to `var(--spectrum-button-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-button-animation-duration": {
+      "description": "Used by `.spectrum-Button`, `.spectrum-Button:after`, `.spectrum-Button .spectrum-Button-label, .spectrum-Button .spectrum-Icon`, `.spectrum-Button .spectrum-ProgressCircle`, `.spectrum-Button.is-pending .spectrum-Button-label, .spectrum-Button.is-pending .spectrum-Icon, .spectrum-Button[pending] .spectrum-Button-label, .spectrum-Button[pending] .spectrum-Icon`, `.spectrum-Button.is-pending .spectrum-ProgressCircle, .spectrum-Button[pending] .spectrum-ProgressCircle`. <br/>Defaults to `var(--spectrum-button-animation-duration, 0.13s)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-button-border-width": {
+      "description": "Used by `--spectrum-button-edge-to-visual`, `--spectrum-button-edge-to-visual-only`, `--spectrum-button-edge-to-text`, `.spectrum-Button`, `.spectrum-Button .spectrum-Icon`, `.spectrum-Button:after`, `.spectrum-Button-label`. <br/>Defaults to `var(--spectrum-button-border-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-button-border-radius": {
+      "description": "Used by `.spectrum-Button`, `.spectrum-Button:after`. <br/>Defaults to `var(--spectrum-button-border-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-button-font-size": {
+      "description": "Used by `.spectrum-Button`. <br/>Defaults to `var(--spectrum-button-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-button-font-weight": {
+      "description": "Used by `.spectrum-Button`. <br/>Defaults to `var(--spectrum-button-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-button-padding-label-to-icon": {
+      "description": "Used by `.spectrum-Button`. <br/>Defaults to `var(--spectrum-button-padding-label-to-icon)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-button-max-inline-size": {
+      "description": "Used by `.spectrum-Button`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-button-min-width": {
+      "description": "Used by `.spectrum-Button`. <br/>Defaults to `var(--spectrum-button-min-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-button-height": {
+      "description": "Used by `.spectrum-Button`. <br/>Defaults to `var(--spectrum-button-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-button-edge-to-text": {
+      "description": "Used by `.spectrum-Button`, `.spectrum-Button .spectrum-Icon`. <br/>Defaults to `var(--spectrum-button-edge-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-button-background-color-default": {
+      "description": "Used by `.spectrum-Button`. <br/>Defaults to `var(--spectrum-button-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-button-border-color-default": {
+      "description": "Used by `.spectrum-Button`. <br/>Defaults to `var(--spectrum-button-border-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-button-content-color-default": {
+      "description": "Used by `.spectrum-Button`. <br/>Defaults to `var(--spectrum-button-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-button-margin-block": {
+      "description": "Used by `.spectrum-Button`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-button-margin-right": {
+      "description": "Used by `.spectrum-Button`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-button-margin-left": {
+      "description": "Used by `.spectrum-Button`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-button-icon-margin-block-start": {
+      "description": "Used by `.spectrum-Button .spectrum-Icon`. <br/>Defaults to `max(0px, var(--mod-button-top-to-icon, var(--spectrum-button-top-to-icon)) - var(--mod-button-border-width, var(--spectrum-button-border-width)) + (var(--_icon-size-difference, 0px) / 2))`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-button-top-to-icon": {
+      "description": "Used by `.spectrum-Button .spectrum-Icon`. <br/>Defaults to `var(--spectrum-button-top-to-icon)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-button-edge-to-visual": {
+      "description": "Used by `.spectrum-Button .spectrum-Icon`. <br/>Defaults to `var(--spectrum-button-edge-to-visual)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-button-focus-ring-gap": {
+      "description": "Used by `.spectrum-Button:after`. <br/>Defaults to `var(--spectrum-button-focus-ring-gap)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-button-focus-ring-border-radius": {
+      "description": "Used by `.spectrum-Button:after`. <br/>Defaults to `calc(var(--mod-button-border-radius, var(--spectrum-button-border-radius)) + var(--mod-button-focus-ring-gap, var(--spectrum-button-focus-ring-gap)))`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-button-focus-ring-thickness": {
+      "description": "Used by `.spectrum-Button.is-focused:after, .spectrum-Button:focus-visible:after`. <br/>Defaults to `var(--spectrum-button-focus-ring-thickness)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-button-focus-ring-color": {
+      "description": "Used by `.spectrum-Button.is-focused:after, .spectrum-Button:focus-visible:after`. <br/>Defaults to `var(--spectrum-button-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-button-background-color-hover": {
+      "description": "Used by `.spectrum-Button:hover`. <br/>Defaults to `var(--spectrum-button-background-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-button-border-color-hover": {
+      "description": "Used by `.spectrum-Button:hover`. <br/>Defaults to `var(--spectrum-button-border-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-button-content-color-hover": {
+      "description": "Used by `.spectrum-Button:hover`. <br/>Defaults to `var(--spectrum-button-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-button-background-color-focus": {
+      "description": "Used by `.spectrum-Button:focus-visible`. <br/>Defaults to `var(--spectrum-button-background-color-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-button-border-color-focus": {
+      "description": "Used by `.spectrum-Button:focus-visible`. <br/>Defaults to `var(--spectrum-button-border-color-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-button-content-color-focus": {
+      "description": "Used by `.spectrum-Button:focus-visible`. <br/>Defaults to `var(--spectrum-button-content-color-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-button-background-color-down": {
+      "description": "Used by `.spectrum-Button:active`. <br/>Defaults to `var(--spectrum-button-background-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-button-border-color-down": {
+      "description": "Used by `.spectrum-Button:active`. <br/>Defaults to `var(--spectrum-button-border-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-button-content-color-down": {
+      "description": "Used by `.spectrum-Button:active`. <br/>Defaults to `var(--spectrum-button-content-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-button-background-color-disabled": {
+      "description": "Used by `.spectrum-Button.is-disabled, .spectrum-Button.is-pending, .spectrum-Button:disabled, .spectrum-Button[pending]`. <br/>Defaults to `var(--spectrum-button-background-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-button-border-color-disabled": {
+      "description": "Used by `.spectrum-Button.is-disabled, .spectrum-Button.is-pending, .spectrum-Button:disabled, .spectrum-Button[pending]`. <br/>Defaults to `var(--spectrum-button-border-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-button-content-color-disabled": {
+      "description": "Used by `.spectrum-Button.is-disabled, .spectrum-Button.is-pending, .spectrum-Button:disabled, .spectrum-Button[pending]`. <br/>Defaults to `var(--spectrum-button-content-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-button-top-to-text": {
+      "description": "Used by `.spectrum-Button-label`. <br/>Defaults to `var(--spectrum-button-top-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-button-bottom-to-text": {
+      "description": "Used by `.spectrum-Button-label`. <br/>Defaults to `var(--spectrum-button-bottom-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-button-text-align": {
+      "description": "Used by `.spectrum-Button-label`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-button-text-align-with-icon": {
+      "description": "Used by `.spectrum-Button .spectrum-Icon + .spectrum-Button-label`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-button-edge-to-visual-only": {
+      "description": "Used by `.spectrum-Button.spectrum-Button--iconOnly`. <br/>Defaults to `var(--spectrum-button-edge-to-visual-only)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-button-animation-duration": {
+      "value": "var(--spectrum-animation-duration-100)",
+      "description": "Defined in `.spectrum-Button`. <br/>Used by `.spectrum-Button`, `.spectrum-Button:after`, `.spectrum-Button .spectrum-Button-label, .spectrum-Button .spectrum-Icon`, `.spectrum-Button .spectrum-ProgressCircle`, `.spectrum-Button.is-pending .spectrum-Button-label, .spectrum-Button.is-pending .spectrum-Icon, .spectrum-Button[pending] .spectrum-Button-label, .spectrum-Button[pending] .spectrum-Icon`, `.spectrum-Button.is-pending .spectrum-ProgressCircle, .spectrum-Button[pending] .spectrum-ProgressCircle`. <br/>Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-button-focus-ring-gap": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Button`. <br/>Used by `.spectrum-Button:after`. <br/>Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-button-focus-ring-thickness": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Button`. <br/>Used by `.spectrum-Button.is-focused:after, .spectrum-Button:focus-visible:after`. <br/>Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-button-focus-indicator-color": {
+      "value": "rgb(0, 0, 0)",
+      "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticBlack`. <br/>Used by `.spectrum-Button.is-focused:after, .spectrum-Button:focus-visible:after`. <br/>Defaults to `var(--spectrum-static-black-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-button-min-width": {
+      "value": "calc(var(--spectrum-component-height-300) * var(--spectrum-button-minimum-width-multiplier))",
+      "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`. <br/>Used by `.spectrum-Button`. <br/>Defaults to `calc(var(--spectrum-component-height-300) * var(--spectrum-button-minimum-width-multiplier))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-button-minimum-width-multiplier": {
+      "value": "2.25",
+      "description": "Used by `--spectrum-button-min-width`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-button-height": {
+      "value": "48px",
+      "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`. <br/>Used by `--spectrum-button-border-radius`, `.spectrum-Button`. <br/>Defaults to `var(--spectrum-component-height-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-button-border-radius": {
+      "value": "9999px",
+      "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--iconOnly`. <br/>Used by `.spectrum-Button`, `.spectrum-Button:after`. <br/>Defaults to `var(--spectrum-corner-radius-full)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-button-border-width": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Button`. <br/>Used by `--spectrum-button-edge-to-visual`, `--spectrum-button-edge-to-visual-only`, `--spectrum-button-edge-to-text`, `.spectrum-Button`, `.spectrum-Button .spectrum-Icon`, `.spectrum-Button:after`, `.spectrum-Button-label`. <br/>Defaults to `var(--spectrum-border-width-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-button-line-height": {
+      "value": "1.2",
+      "description": "Defined in `.spectrum-Button`. <br/>Used by `.spectrum-Button-label`. <br/>Defaults to `1.2`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-button-font-weight": {
+      "value": "700",
+      "description": "Defined in `.spectrum-Button`. <br/>Used by `.spectrum-Button`. <br/>Defaults to `var(--spectrum-bold-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-button-font-size": {
+      "value": "18px",
+      "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`. <br/>Used by `.spectrum-Button`. <br/>Defaults to `var(--spectrum-font-size-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-button-edge-to-visual": {
+      "value": "calc(var(--spectrum-component-pill-edge-to-visual-300) - var(--mod-button-border-width, var(--spectrum-button-border-width)))",
+      "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`. <br/>Used by `.spectrum-Button .spectrum-Icon`. <br/>Defaults to `calc(var(--spectrum-component-pill-edge-to-visual-300) - var(--mod-button-border-width, var(--spectrum-button-border-width)))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-button-edge-to-visual-only": {
+      "value": "calc(var(--spectrum-component-pill-edge-to-visual-only-300) - var(--mod-button-border-width, var(--spectrum-button-border-width)))",
+      "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`. <br/>Used by `.spectrum-Button.spectrum-Button--iconOnly`. <br/>Defaults to `calc(var(--spectrum-component-pill-edge-to-visual-only-300) - var(--mod-button-border-width, var(--spectrum-button-border-width)))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-button-edge-to-text": {
+      "value": "calc(var(--spectrum-component-pill-edge-to-text-300) - var(--mod-button-border-width, var(--spectrum-button-border-width)))",
+      "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`. <br/>Used by `.spectrum-Button`, `.spectrum-Button .spectrum-Icon`. <br/>Defaults to `calc(var(--spectrum-component-pill-edge-to-text-300) - var(--mod-button-border-width, var(--spectrum-button-border-width)))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-button-padding-label-to-icon": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`. <br/>Used by `.spectrum-Button`. <br/>Defaults to `var(--spectrum-text-to-visual-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-button-top-to-text": {
+      "value": "var(--spectrum-button-top-to-text-extra-large)",
+      "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`. <br/>Used by `.spectrum-Button-label`. <br/>Defaults to `var(--spectrum-button-top-to-text-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-button-top-to-text-medium": {
+      "description": "Used by `--spectrum-button-top-to-text`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-button-bottom-to-text": {
+      "value": "var(--spectrum-button-bottom-to-text-extra-large)",
+      "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`. <br/>Used by `.spectrum-Button-label`. <br/>Defaults to `var(--spectrum-button-bottom-to-text-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-button-bottom-to-text-medium": {
+      "description": "Used by `--spectrum-button-bottom-to-text`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-button-top-to-icon": {
+      "value": "11px",
+      "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`. <br/>Used by `.spectrum-Button .spectrum-Icon`. <br/>Defaults to `var(--spectrum-component-top-to-workflow-icon-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-button-intended-icon-size": {
+      "value": "26px",
+      "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`. <br/>Used by `--_icon-size-difference`. <br/>Defaults to `var(--spectrum-workflow-icon-size-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-button-top-to-text-small": {
+      "description": "Used by `--spectrum-button-top-to-text`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-button-bottom-to-text-small": {
+      "description": "Used by `--spectrum-button-bottom-to-text`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-button-top-to-text-large": {
+      "description": "Used by `--spectrum-button-top-to-text`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-button-bottom-to-text-large": {
+      "description": "Used by `--spectrum-button-bottom-to-text`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-button-top-to-text-extra-large": {
+      "description": "Used by `--spectrum-button-top-to-text`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-button-bottom-to-text-extra-large": {
+      "description": "Used by `--spectrum-button-bottom-to-text`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-button-border-color-default": {
+      "value": "rgba(0, 0, 0, 0.15)",
+      "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline`. <br/>Used by `.spectrum-Button`. <br/>Defaults to `var(--spectrum-transparent-black-300)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-button-border-color-hover": {
+      "value": "rgba(0, 0, 0, 0.22)",
+      "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline`. <br/>Used by `.spectrum-Button:hover`. <br/>Defaults to `var(--spectrum-transparent-black-400)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-button-border-color-down": {
+      "value": "rgba(0, 0, 0, 0.22)",
+      "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline`. <br/>Used by `.spectrum-Button:active`. <br/>Defaults to `var(--spectrum-transparent-black-400)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-button-border-color-focus": {
+      "value": "rgba(0, 0, 0, 0.22)",
+      "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline`. <br/>Used by `.spectrum-Button:focus-visible`. <br/>Defaults to `var(--spectrum-transparent-black-400)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-button-content-color-default": {
+      "value": "rgba(0, 0, 0, 0.84)",
+      "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--primary`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticBlack`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary`. <br/>Used by `.spectrum-Button`. <br/>Defaults to `var(--spectrum-transparent-black-800)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-button-content-color-hover": {
+      "value": "rgba(0, 0, 0, 0.93)",
+      "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--primary`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticBlack`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary`. <br/>Used by `.spectrum-Button:hover`. <br/>Defaults to `var(--spectrum-transparent-black-900)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-button-content-color-down": {
+      "value": "rgba(0, 0, 0, 0.93)",
+      "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--primary`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticBlack`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary`. <br/>Used by `.spectrum-Button:active`. <br/>Defaults to `var(--spectrum-transparent-black-900)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-button-content-color-focus": {
+      "value": "rgba(0, 0, 0, 0.93)",
+      "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--primary`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticBlack`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary`. <br/>Used by `.spectrum-Button:focus-visible`. <br/>Defaults to `var(--spectrum-transparent-black-900)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-button-background-color-disabled": {
+      "value": "rgba(0, 0, 0, 0)",
+      "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`. <br/>Used by `.spectrum-Button.is-disabled, .spectrum-Button.is-pending, .spectrum-Button:disabled, .spectrum-Button[pending]`. <br/>Defaults to `var(--spectrum-transparent-black-25)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-button-border-color-disabled": {
+      "value": "rgba(0, 0, 0, 0.15)",
+      "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`. <br/>Used by `.spectrum-Button.is-disabled, .spectrum-Button.is-pending, .spectrum-Button:disabled, .spectrum-Button[pending]`. <br/>Defaults to `var(--spectrum-disabled-static-black-border-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-button-content-color-disabled": {
+      "value": "rgba(0, 0, 0, 0.22)",
+      "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`. <br/>Used by `.spectrum-Button.is-disabled, .spectrum-Button.is-pending, .spectrum-Button:disabled, .spectrum-Button[pending]`. <br/>Defaults to `var(--spectrum-disabled-static-black-content-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-button-background-color-default": {
+      "value": "rgba(0, 0, 0, 0)",
+      "description": "Defined in `.spectrum-Button, .spectrum-Button.spectrum-Button--accent`, `.spectrum-Button.spectrum-Button--negative`, `.spectrum-Button.spectrum-Button--primary`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline`. <br/>Used by `.spectrum-Button`. <br/>Defaults to `var(--spectrum-transparent-black-25)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-button-background-color-hover": {
+      "value": "rgba(0, 0, 0, 0.09)",
+      "description": "Defined in `.spectrum-Button, .spectrum-Button.spectrum-Button--accent`, `.spectrum-Button.spectrum-Button--negative`, `.spectrum-Button.spectrum-Button--primary`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline`. <br/>Used by `.spectrum-Button:hover`. <br/>Defaults to `var(--spectrum-transparent-black-100)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-button-background-color-down": {
+      "value": "rgba(0, 0, 0, 0.09)",
+      "description": "Defined in `.spectrum-Button, .spectrum-Button.spectrum-Button--accent`, `.spectrum-Button.spectrum-Button--negative`, `.spectrum-Button.spectrum-Button--primary`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline`. <br/>Used by `.spectrum-Button:active`. <br/>Defaults to `var(--spectrum-transparent-black-100)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-button-background-color-focus": {
+      "value": "rgba(0, 0, 0, 0.09)",
+      "description": "Defined in `.spectrum-Button, .spectrum-Button.spectrum-Button--accent`, `.spectrum-Button.spectrum-Button--negative`, `.spectrum-Button.spectrum-Button--primary`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline`. <br/>Used by `.spectrum-Button:focus-visible`. <br/>Defaults to `var(--spectrum-transparent-black-100)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-sans-font-family-stack": {
+      "description": "Used by `.spectrum-Button`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-line-height-100": {
+      "value": "1.3",
+      "description": "Used by `.spectrum-Button`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-animation-duration-100": {
+      "description": "Used by `.spectrum-Button`, `--spectrum-button-animation-duration`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-gap": {
+      "value": "2px",
+      "description": "Used by `--spectrum-button-focus-ring-gap`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Used by `--spectrum-button-focus-ring-thickness`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Used by `--spectrum-button-focus-indicator-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-component-height-100": {
+      "value": "32px",
+      "description": "Used by `--spectrum-button-min-width`, `--spectrum-button-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-border-width-200": {
+      "value": "2px",
+      "description": "Used by `--spectrum-button-border-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-bold-font-weight": {
+      "value": "700",
+      "description": "Used by `--spectrum-button-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-100": {
+      "value": "14px",
+      "description": "Used by `--spectrum-button-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-pill-edge-to-visual-100": {
+      "value": "14px",
+      "description": "Used by `--spectrum-button-edge-to-visual`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-pill-edge-to-visual-only-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-button-edge-to-visual-only`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-pill-edge-to-text-100": {
+      "value": "16px",
+      "description": "Used by `--spectrum-button-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-button-padding-label-to-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-workflow-icon-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-button-top-to-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-100": {
+      "value": "20px",
+      "description": "Used by `--spectrum-button-intended-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-downstate-perspective": {
+      "value": "24px",
+      "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS.spectrum-Button--iconOnly`. <br/>Used by `.spectrum-Button:active`. <br/>Defaults to `var(--spectrum-component-size-minimum-perspective-down)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-downstate-height": {
+      "description": "Used by `--spectrum-downstate-perspective`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-downstate-width": {
+      "description": "Used by `--spectrum-downstate-perspective`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-size-width-ratio-down": {
+      "value": "0.3333",
+      "description": "Used by `--spectrum-downstate-perspective`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-full": {
+      "value": "9999px",
+      "description": "Used by `--spectrum-button-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-75": {
+      "value": "24px",
+      "description": "Used by `--spectrum-button-min-width`, `--spectrum-button-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-75": {
+      "value": "12px",
+      "description": "Used by `--spectrum-button-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-pill-edge-to-visual-75": {
+      "value": "10px",
+      "description": "Used by `--spectrum-button-edge-to-visual`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-pill-edge-to-visual-only-75": {
+      "value": "4px",
+      "description": "Used by `--spectrum-button-edge-to-visual-only`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-pill-edge-to-text-75": {
+      "value": "12px",
+      "description": "Used by `--spectrum-button-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-75": {
+      "value": "5px",
+      "description": "Used by `--spectrum-button-padding-label-to-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-workflow-icon-75": {
+      "value": "4px",
+      "description": "Used by `--spectrum-button-top-to-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-75": {
+      "value": "16px",
+      "description": "Used by `--spectrum-button-intended-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-size-minimum-perspective-down": {
+      "value": "24px",
+      "description": "Used by `--spectrum-downstate-perspective`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-200": {
+      "value": "40px",
+      "description": "Used by `--spectrum-button-min-width`, `--spectrum-button-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-200": {
+      "value": "16px",
+      "description": "Used by `--spectrum-button-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-pill-edge-to-visual-200": {
+      "value": "18px",
+      "description": "Used by `--spectrum-button-edge-to-visual`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-pill-edge-to-visual-only-200": {
+      "value": "9px",
+      "description": "Used by `--spectrum-button-edge-to-visual-only`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-pill-edge-to-text-200": {
+      "value": "20px",
+      "description": "Used by `--spectrum-button-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-200": {
+      "value": "7px",
+      "description": "Used by `--spectrum-button-padding-label-to-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-workflow-icon-200": {
+      "value": "9px",
+      "description": "Used by `--spectrum-button-top-to-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-200": {
+      "value": "22px",
+      "description": "Used by `--spectrum-button-intended-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-300": {
+      "value": "48px",
+      "description": "Used by `--spectrum-button-min-width`, `--spectrum-button-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-300": {
+      "value": "18px",
+      "description": "Used by `--spectrum-button-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-pill-edge-to-visual-300": {
+      "value": "21px",
+      "description": "Used by `--spectrum-button-edge-to-visual`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-pill-edge-to-visual-only-300": {
+      "value": "11px",
+      "description": "Used by `--spectrum-button-edge-to-visual-only`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-pill-edge-to-text-300": {
+      "value": "24px",
+      "description": "Used by `--spectrum-button-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-300": {
+      "value": "8px",
+      "description": "Used by `--spectrum-button-padding-label-to-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-workflow-icon-300": {
+      "value": "11px",
+      "description": "Used by `--spectrum-button-top-to-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-300": {
+      "value": "26px",
+      "description": "Used by `--spectrum-button-intended-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-white": {
+      "value": "rgb(255, 255, 255)",
+      "description": "Used by `--spectrum-button-content-color-default`, `--spectrum-button-content-color-hover`, `--spectrum-button-content-color-down`, `--spectrum-button-content-color-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-disabled-background-color": {
+      "value": "var(--spectrum-gray-100)",
+      "description": "Used by `--spectrum-button-background-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-disabled-content-color": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Used by `--spectrum-button-content-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-disabled-border-color": {
+      "value": "var(--spectrum-gray-300)",
+      "description": "Used by `--spectrum-button-border-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-accent-background-color-default": {
+      "value": "var(--spectrum-accent-color-900)",
+      "description": "Used by `--spectrum-button-background-color-default`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-accent-background-color-hover": {
+      "value": "var(--spectrum-accent-color-1000)",
+      "description": "Used by `--spectrum-button-background-color-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-accent-background-color-down": {
+      "value": "var(--spectrum-accent-color-1000)",
+      "description": "Used by `--spectrum-button-background-color-down`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-accent-background-color-key-focus": {
+      "value": "var(--spectrum-accent-color-1000)",
+      "description": "Used by `--spectrum-button-background-color-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-background-color-default": {
+      "value": "var(--spectrum-negative-color-900)",
+      "description": "Used by `--spectrum-button-background-color-default`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-background-color-hover": {
+      "value": "var(--spectrum-negative-color-1000)",
+      "description": "Used by `--spectrum-button-background-color-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-background-color-down": {
+      "value": "var(--spectrum-negative-color-1000)",
+      "description": "Used by `--spectrum-button-background-color-down`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-background-color-key-focus": {
+      "value": "var(--spectrum-negative-color-1000)",
+      "description": "Used by `--spectrum-button-background-color-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-gray-25": {
+      "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+      "description": "Used by `--spectrum-button-content-color-default`, `--spectrum-button-content-color-hover`, `--spectrum-button-content-color-down`, `--spectrum-button-content-color-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-background-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-button-background-color-default`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-background-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-button-background-color-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-background-color-down": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-button-background-color-down`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-background-color-key-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-button-background-color-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-gray-100": {
+      "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+      "description": "Used by `--spectrum-button-background-color-hover`, `--spectrum-button-background-color-down`, `--spectrum-button-background-color-focus`, `--spectrum-button-background-color-default`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-800": {
+      "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+      "description": "Used by `--spectrum-button-border-color-default`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-900": {
+      "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+      "description": "Used by `--spectrum-button-border-color-hover`, `--spectrum-button-border-color-down`, `--spectrum-button-border-color-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-button-content-color-default`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-button-content-color-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-down": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-button-content-color-down`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-key-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-button-content-color-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-gray-200": {
+      "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+      "description": "Used by `--spectrum-button-background-color-hover`, `--spectrum-button-background-color-down`, `--spectrum-button-background-color-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-300": {
+      "value": "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))",
+      "description": "Used by `--spectrum-button-border-color-default`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-400": {
+      "value": "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))",
+      "description": "Used by `--spectrum-button-border-color-hover`, `--spectrum-button-border-color-down`, `--spectrum-button-border-color-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-transparent-white-800": {
+      "value": "rgba(255, 255, 255, 0.85)",
+      "description": "Used by `--spectrum-button-background-color-default`, `--spectrum-button-border-color-default`, `--spectrum-button-content-color-default`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-transparent-white-900": {
+      "value": "rgba(255, 255, 255, 0.94)",
+      "description": "Used by `--spectrum-button-background-color-hover`, `--spectrum-button-background-color-down`, `--spectrum-button-background-color-focus`, `--spectrum-button-border-color-hover`, `--spectrum-button-border-color-down`, `--spectrum-button-border-color-focus`, `--spectrum-button-content-color-hover`, `--spectrum-button-content-color-down`, `--spectrum-button-content-color-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-black": {
+      "value": "rgb(0, 0, 0)",
+      "description": "Used by `--spectrum-button-content-color-default`, `--spectrum-button-content-color-hover`, `--spectrum-button-content-color-down`, `--spectrum-button-content-color-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-static-white-focus-indicator-color": {
+      "value": "rgb(255, 255, 255)",
+      "description": "Used by `--spectrum-button-focus-indicator-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-disabled-static-white-background-color": {
+      "value": "rgba(255, 255, 255, 0.11)",
+      "description": "Used by `--spectrum-button-background-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-disabled-static-white-content-color": {
+      "value": "rgba(255, 255, 255, 0.21)",
+      "description": "Used by `--spectrum-button-content-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-transparent-white-25": {
+      "value": "rgba(255, 255, 255, 0)",
+      "description": "Used by `--spectrum-button-background-color-default`, `--spectrum-button-background-color-disabled`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-transparent-white-100": {
+      "value": "rgba(255, 255, 255, 0.11)",
+      "description": "Used by `--spectrum-button-background-color-hover`, `--spectrum-button-background-color-down`, `--spectrum-button-background-color-focus`, `--spectrum-button-background-color-default`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-disabled-static-white-border-color": {
+      "value": "rgba(255, 255, 255, 0.17)",
+      "description": "Used by `--spectrum-button-border-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-transparent-white-200": {
+      "value": "rgba(255, 255, 255, 0.14)",
+      "description": "Used by `--spectrum-button-background-color-hover`, `--spectrum-button-background-color-down`, `--spectrum-button-background-color-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-transparent-white-300": {
+      "value": "rgba(255, 255, 255, 0.17)",
+      "description": "Used by `--spectrum-button-border-color-default`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-transparent-white-400": {
+      "value": "rgba(255, 255, 255, 0.21)",
+      "description": "Used by `--spectrum-button-border-color-hover`, `--spectrum-button-border-color-down`, `--spectrum-button-border-color-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-transparent-black-800": {
+      "value": "rgba(0, 0, 0, 0.84)",
+      "description": "Used by `--spectrum-button-background-color-default`, `--spectrum-button-border-color-default`, `--spectrum-button-content-color-default`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-transparent-black-900": {
+      "value": "rgba(0, 0, 0, 0.93)",
+      "description": "Used by `--spectrum-button-background-color-hover`, `--spectrum-button-background-color-down`, `--spectrum-button-background-color-focus`, `--spectrum-button-border-color-hover`, `--spectrum-button-border-color-down`, `--spectrum-button-border-color-focus`, `--spectrum-button-content-color-hover`, `--spectrum-button-content-color-down`, `--spectrum-button-content-color-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-static-black-focus-indicator-color": {
+      "value": "rgb(0, 0, 0)",
+      "description": "Used by `--spectrum-button-focus-indicator-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-disabled-static-black-background-color": {
+      "value": "rgba(0, 0, 0, 0.09)",
+      "description": "Used by `--spectrum-button-background-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-disabled-static-black-content-color": {
+      "value": "rgba(0, 0, 0, 0.22)",
+      "description": "Used by `--spectrum-button-content-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-transparent-black-25": {
+      "value": "rgba(0, 0, 0, 0)",
+      "description": "Used by `--spectrum-button-background-color-default`, `--spectrum-button-background-color-disabled`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-transparent-black-100": {
+      "value": "rgba(0, 0, 0, 0.09)",
+      "description": "Used by `--spectrum-button-background-color-hover`, `--spectrum-button-background-color-down`, `--spectrum-button-background-color-focus`, `--spectrum-button-background-color-default`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-disabled-static-black-border-color": {
+      "value": "rgba(0, 0, 0, 0.15)",
+      "description": "Used by `--spectrum-button-border-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-transparent-black-200": {
+      "value": "rgba(0, 0, 0, 0.12)",
+      "description": "Used by `--spectrum-button-background-color-hover`, `--spectrum-button-background-color-down`, `--spectrum-button-background-color-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-transparent-black-300": {
+      "value": "rgba(0, 0, 0, 0.15)",
+      "description": "Used by `--spectrum-button-border-color-default`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-transparent-black-400": {
+      "value": "rgba(0, 0, 0, 0.22)",
+      "description": "Used by `--spectrum-button-border-color-hover`, `--spectrum-button-border-color-down`, `--spectrum-button-border-color-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-icon-block-size": {
+      "value": "var(--spectrum-button-intended-icon-size)",
+      "description": "Used by `--_icon-size-difference`. <br/>Defaults to `var(--spectrum-button-intended-icon-size)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-size-difference-down": {
+      "value": "-2px",
+      "description": "Used by `.spectrum-Button:active`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-progress-circle-thickness-medium": {
+      "value": "3px",
+      "description": "Used by `--mod-progress-circle-thickness`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {
+    "mod-progress-circle-position": {
+      "category": "Passthrough"
+    },
+    "mod-progress-circle-track-border-color": {
+      "category": "Passthrough"
+    },
+    "mod-progress-circle-track-border-color-over-background": {
+      "category": "Passthrough"
+    },
+    "mod-progress-circle-thickness": {
+      "category": "Passthrough"
+    }
+  },
+  "high-contrast": {
+    "highcontrast-button-background-color-default": {
+      "value": "var(--mod-button-background-color-default, var(--spectrum-button-background-color-default))",
+      "description": "Defined in `.spectrum-Button.spectrum-Button--accent, .spectrum-Button:not(.spectrum-Button--primary, .spectrum-Button--negative, .spectrum-Button--secondary, .spectrum-Button--staticBlack, .spectrum-Button--staticWhite)`. <br/>Used by `.spectrum-Button`. <br/>Defaults to `var(--mod-button-background-color-default, var(--spectrum-button-background-color-default))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-button-border-color-default": {
+      "value": "var(--mod-button-border-color-default, var(--spectrum-button-border-color-default))",
+      "description": "Defined in `.spectrum-Button`. <br/>Used by `.spectrum-Button`. <br/>Defaults to `var(--mod-button-border-color-default, var(--spectrum-button-border-color-default))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-button-content-color-default": {
+      "value": "var(--mod-button-content-color-default, var(--spectrum-button-content-color-default))",
+      "description": "Defined in `.spectrum-Button.spectrum-Button--accent, .spectrum-Button:not(.spectrum-Button--primary, .spectrum-Button--negative, .spectrum-Button--secondary, .spectrum-Button--staticBlack, .spectrum-Button--staticWhite)`. <br/>Used by `.spectrum-Button`. <br/>Defaults to `var(--mod-button-content-color-default, var(--spectrum-button-content-color-default))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-button-focus-ring-color": {
+      "value": "var(--mod-button-focus-ring-color, var(--spectrum-button-focus-indicator-color))",
+      "description": "Defined in `.spectrum-Button`. <br/>Used by `.spectrum-Button.is-focused:after, .spectrum-Button:focus-visible:after`. <br/>Defaults to `var(--mod-button-focus-ring-color, var(--spectrum-button-focus-indicator-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-button-background-color-hover": {
+      "value": "var(--mod-button-background-color-hover, var(--spectrum-button-background-color-hover))",
+      "description": "Defined in `.spectrum-Button.spectrum-Button--accent, .spectrum-Button:not(.spectrum-Button--primary, .spectrum-Button--negative, .spectrum-Button--secondary, .spectrum-Button--staticBlack, .spectrum-Button--staticWhite)`. <br/>Used by `.spectrum-Button:hover`. <br/>Defaults to `var(--mod-button-background-color-hover, var(--spectrum-button-background-color-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-button-border-color-hover": {
+      "value": "var(--mod-button-border-color-hover, var(--spectrum-button-border-color-hover))",
+      "description": "Defined in `.spectrum-Button`. <br/>Used by `.spectrum-Button:hover`. <br/>Defaults to `var(--mod-button-border-color-hover, var(--spectrum-button-border-color-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-button-content-color-hover": {
+      "value": "var(--mod-button-content-color-hover, var(--spectrum-button-content-color-hover))",
+      "description": "Defined in `.spectrum-Button.spectrum-Button--accent, .spectrum-Button:not(.spectrum-Button--primary, .spectrum-Button--negative, .spectrum-Button--secondary, .spectrum-Button--staticBlack, .spectrum-Button--staticWhite)`. <br/>Used by `.spectrum-Button:hover`. <br/>Defaults to `var(--mod-button-content-color-hover, var(--spectrum-button-content-color-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-button-background-color-focus": {
+      "value": "var(--mod-button-background-color-focus, var(--spectrum-button-background-color-focus))",
+      "description": "Defined in `.spectrum-Button.spectrum-Button--accent, .spectrum-Button:not(.spectrum-Button--primary, .spectrum-Button--negative, .spectrum-Button--secondary, .spectrum-Button--staticBlack, .spectrum-Button--staticWhite)`. <br/>Used by `.spectrum-Button:focus-visible`. <br/>Defaults to `var(--mod-button-background-color-focus, var(--spectrum-button-background-color-focus))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-button-border-color-focus": {
+      "value": "var(--mod-button-border-color-focus, var(--spectrum-button-border-color-focus))",
+      "description": "Defined in `.spectrum-Button`. <br/>Used by `.spectrum-Button:focus-visible`. <br/>Defaults to `var(--mod-button-border-color-focus, var(--spectrum-button-border-color-focus))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-button-content-color-focus": {
+      "value": "var(--mod-button-content-color-focus, var(--spectrum-button-content-color-focus))",
+      "description": "Defined in `.spectrum-Button.spectrum-Button--accent, .spectrum-Button:not(.spectrum-Button--primary, .spectrum-Button--negative, .spectrum-Button--secondary, .spectrum-Button--staticBlack, .spectrum-Button--staticWhite)`. <br/>Used by `.spectrum-Button:focus-visible`. <br/>Defaults to `var(--mod-button-content-color-focus, var(--spectrum-button-content-color-focus))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-button-background-color-down": {
+      "value": "var(--mod-button-background-color-down, var(--spectrum-button-background-color-down))",
+      "description": "Defined in `.spectrum-Button.spectrum-Button--accent, .spectrum-Button:not(.spectrum-Button--primary, .spectrum-Button--negative, .spectrum-Button--secondary, .spectrum-Button--staticBlack, .spectrum-Button--staticWhite)`. <br/>Used by `.spectrum-Button:active`. <br/>Defaults to `var(--mod-button-background-color-down, var(--spectrum-button-background-color-down))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-button-border-color-down": {
+      "value": "var(--mod-button-border-color-down, var(--spectrum-button-border-color-down))",
+      "description": "Defined in `.spectrum-Button`. <br/>Used by `.spectrum-Button:active`. <br/>Defaults to `var(--mod-button-border-color-down, var(--spectrum-button-border-color-down))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-button-content-color-down": {
+      "value": "var(--mod-button-content-color-down, var(--spectrum-button-content-color-down))",
+      "description": "Defined in `.spectrum-Button.spectrum-Button--accent, .spectrum-Button:not(.spectrum-Button--primary, .spectrum-Button--negative, .spectrum-Button--secondary, .spectrum-Button--staticBlack, .spectrum-Button--staticWhite)`. <br/>Used by `.spectrum-Button:active`. <br/>Defaults to `var(--mod-button-content-color-down, var(--spectrum-button-content-color-down))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-button-background-color-disabled": {
+      "value": "var(--mod-button-background-color-disabled, var(--spectrum-button-background-color-disabled))",
+      "description": "Defined in `.spectrum-Button`. <br/>Used by `.spectrum-Button.is-disabled, .spectrum-Button.is-pending, .spectrum-Button:disabled, .spectrum-Button[pending]`. <br/>Defaults to `var(--mod-button-background-color-disabled, var(--spectrum-button-background-color-disabled))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-button-border-color-disabled": {
+      "value": "var(--mod-button-border-color-disabled, var(--spectrum-button-border-color-disabled))",
+      "description": "Defined in `.spectrum-Button`. <br/>Used by `.spectrum-Button.is-disabled, .spectrum-Button.is-pending, .spectrum-Button:disabled, .spectrum-Button[pending]`. <br/>Defaults to `var(--mod-button-border-color-disabled, var(--spectrum-button-border-color-disabled))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-button-content-color-disabled": {
+      "value": "var(--mod-button-content-color-disabled, var(--spectrum-button-content-color-disabled))",
+      "description": "Defined in `.spectrum-Button`. <br/>Used by `.spectrum-Button.is-disabled, .spectrum-Button.is-pending, .spectrum-Button:disabled, .spectrum-Button[pending]`. <br/>Defaults to `var(--mod-button-content-color-disabled, var(--spectrum-button-content-color-disabled))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/button/stories/button.stories.js b/components/button/stories/button.stories.js
index 4f3b09d5928..b48d0850ca9 100644
--- a/components/button/stories/button.stories.js
+++ b/components/button/stories/button.stories.js
@@ -2,11 +2,13 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.
 import { Sizes, withDownStateDimensionCapture } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isActive, isDisabled, isFocused, isHovered, isPending, size, staticColor } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { ButtonGroups } from "./button.test.js";
 import { ButtonsWithIconOptions, TextOverflowTemplate, TextWrapTemplate, TreatmentTemplate } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow.
  *
@@ -104,6 +106,10 @@ export default {
 		status: {
 			type: "migrated",
 		},
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 	decorators: [
 		withDownStateDimensionCapture,
diff --git a/components/buttongroup/dist/metadata.json b/components/buttongroup/dist/metadata.json
index 04dc22bce0f..904ab5fb64a 100644
--- a/components/buttongroup/dist/metadata.json
+++ b/components/buttongroup/dist/metadata.json
@@ -6,20 +6,73 @@
     ".spectrum-ButtonGroup.spectrum-ButtonGroup--sizeS",
     ".spectrum-ButtonGroup.spectrum-ButtonGroup--vertical"
   ],
-  "modifiers": [
-    "--mod-buttongroup-flex-wrap",
-    "--mod-buttongroup-justify-content",
-    "--mod-buttongroup-spacing",
-    "--mod-buttongroup-spacing-horizontal",
-    "--mod-buttongroup-spacing-vertical"
-  ],
-  "component": [
-    "--spectrum-buttongroup-display",
-    "--spectrum-buttongroup-flex-direction",
-    "--spectrum-buttongroup-justify-content",
-    "--spectrum-buttongroup-spacing"
-  ],
-  "global": ["--spectrum-spacing-200", "--spectrum-spacing-300"],
-  "passthroughs": [],
-  "high-contrast": []
+  "modifiers": {
+    "mod-buttongroup-spacing": {
+      "description": "Defined in `.spectrum-ButtonGroup.spectrum-ButtonGroup--vertical`. <br/>Used by `--spectrum-buttongroup-spacing`. <br/>Defaults to `var(--mod-buttongroup-spacing-horizontal, var(--spectrum-spacing-200))`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-buttongroup-spacing-horizontal": {
+      "description": "Used by `--spectrum-buttongroup-spacing`. <br/>Defaults to `var(--spectrum-spacing-200)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-buttongroup-justify-content": {
+      "description": "Used by `--spectrum-buttongroup-justify-content`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-buttongroup-spacing-vertical": {
+      "description": "Used by `--mod-buttongroup-spacing`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-buttongroup-flex-wrap": {
+      "description": "Used by `.spectrum-ButtonGroup`.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-buttongroup-spacing": {
+      "value": "var(--mod-buttongroup-spacing, var(--mod-buttongroup-spacing-horizontal, var(--spectrum-spacing-200)))",
+      "description": "Defined in `.spectrum-ButtonGroup`, `.spectrum-ButtonGroup.spectrum-ButtonGroup--sizeS`. <br/>Used by `.spectrum-ButtonGroup`. <br/>Defaults to `var(--mod-buttongroup-spacing, var(--mod-buttongroup-spacing-horizontal, var(--spectrum-spacing-200)))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-buttongroup-display": {
+      "value": "inline-flex",
+      "description": "Defined in `.spectrum-ButtonGroup`, `.spectrum-ButtonGroup.spectrum-ButtonGroup--vertical`. <br/>Used by `.spectrum-ButtonGroup`. <br/>Defaults to `inline-flex`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-buttongroup-flex-direction": {
+      "value": "column",
+      "description": "Defined in `.spectrum-ButtonGroup`, `.spectrum-ButtonGroup.spectrum-ButtonGroup--vertical`. <br/>Used by `.spectrum-ButtonGroup`. <br/>Defaults to `column`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-buttongroup-justify-content": {
+      "value": "var(--mod-buttongroup-justify-content, normal)",
+      "description": "Defined in `.spectrum-ButtonGroup`. <br/>Used by `.spectrum-ButtonGroup`. <br/>Defaults to `var(--mod-buttongroup-justify-content, normal)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-spacing-300": {
+      "value": "16px",
+      "description": "Used by `--spectrum-buttongroup-spacing`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-200": {
+      "value": "12px",
+      "description": "Used by `--spectrum-buttongroup-spacing`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {}
 }
diff --git a/components/buttongroup/stories/buttongroup.stories.js b/components/buttongroup/stories/buttongroup.stories.js
index ae0cab736cb..c5c433cfe8b 100644
--- a/components/buttongroup/stories/buttongroup.stories.js
+++ b/components/buttongroup/stories/buttongroup.stories.js
@@ -1,11 +1,13 @@
 import { default as Icon } from "@spectrum-css/icon/stories/icon.stories.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { ButtonGroup } from "./buttongroup.test.js";
 import { Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * A button group is a grouping of buttons whose actions are related to each other.
  */
@@ -67,6 +69,10 @@ export default {
 		status: {
 			type: "migrated",
 		},
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 	tags: ["migrated"],
 };
diff --git a/components/calendar/dist/metadata.json b/components/calendar/dist/metadata.json
index cc1fb80035c..e33299dd2d2 100644
--- a/components/calendar/dist/metadata.json
+++ b/components/calendar/dist/metadata.json
@@ -5,46 +5,46 @@
     ".spectrum-Calendar--padded",
     ".spectrum-Calendar-body",
     ".spectrum-Calendar-date",
+    ".spectrum-Calendar-date:active",
+    ".spectrum-Calendar-date:after",
+    ".spectrum-Calendar-date:before",
+    ".spectrum-Calendar-date:hover",
+    ".spectrum-Calendar-date:hover:not(.is-selection-end, .is-selection-start)",
+    ".spectrum-Calendar-date:lang(ja)",
+    ".spectrum-Calendar-date:lang(ko)",
+    ".spectrum-Calendar-date:lang(zh)",
     ".spectrum-Calendar-date.is-disabled",
     ".spectrum-Calendar-date.is-disabled.is-selected",
     ".spectrum-Calendar-date.is-focused",
+    ".spectrum-Calendar-date.is-focused:not(.is-range-selection)",
+    ".spectrum-Calendar-date.is-focused:not(.is-range-selection):active",
     ".spectrum-Calendar-date.is-focused.is-range-selection",
     ".spectrum-Calendar-date.is-focused.is-selected",
     ".spectrum-Calendar-date.is-focused.is-selected:not(.is-range-selection)",
-    ".spectrum-Calendar-date.is-focused:not(.is-range-selection)",
-    ".spectrum-Calendar-date.is-focused:not(.is-range-selection):active",
     ".spectrum-Calendar-date.is-outsideMonth",
     ".spectrum-Calendar-date.is-range-selection",
+    ".spectrum-Calendar-date.is-range-selection:hover",
     ".spectrum-Calendar-date.is-range-selection.is-range-end",
     ".spectrum-Calendar-date.is-range-selection.is-range-end:after",
     ".spectrum-Calendar-date.is-range-selection.is-range-end:before",
     ".spectrum-Calendar-date.is-range-selection.is-range-start",
-    ".spectrum-Calendar-date.is-range-selection.is-range-start.is-range-end",
     ".spectrum-Calendar-date.is-range-selection.is-range-start:after",
     ".spectrum-Calendar-date.is-range-selection.is-range-start:before",
+    ".spectrum-Calendar-date.is-range-selection.is-range-start.is-range-end",
     ".spectrum-Calendar-date.is-range-selection.is-selection-end",
-    ".spectrum-Calendar-date.is-range-selection.is-selection-end.is-range-start",
     ".spectrum-Calendar-date.is-range-selection.is-selection-end:after",
     ".spectrum-Calendar-date.is-range-selection.is-selection-end:before",
+    ".spectrum-Calendar-date.is-range-selection.is-selection-end.is-range-start",
     ".spectrum-Calendar-date.is-range-selection.is-selection-start",
-    ".spectrum-Calendar-date.is-range-selection.is-selection-start.is-range-end",
-    ".spectrum-Calendar-date.is-range-selection.is-selection-start.is-selection-end",
     ".spectrum-Calendar-date.is-range-selection.is-selection-start:after",
     ".spectrum-Calendar-date.is-range-selection.is-selection-start:before",
-    ".spectrum-Calendar-date.is-range-selection:hover",
+    ".spectrum-Calendar-date.is-range-selection.is-selection-start.is-range-end",
+    ".spectrum-Calendar-date.is-range-selection.is-selection-start.is-selection-end",
     ".spectrum-Calendar-date.is-selected",
     ".spectrum-Calendar-date.is-selected:hover:not(.is-selection-end, .is-selection-start)",
     ".spectrum-Calendar-date.is-selected:not(.is-range-selection)",
     ".spectrum-Calendar-date.is-today",
     ".spectrum-Calendar-date.is-today.is-selected:not(.is-range-selection)",
-    ".spectrum-Calendar-date:active",
-    ".spectrum-Calendar-date:after",
-    ".spectrum-Calendar-date:before",
-    ".spectrum-Calendar-date:hover",
-    ".spectrum-Calendar-date:hover:not(.is-selection-end, .is-selection-start)",
-    ".spectrum-Calendar-date:lang(ja)",
-    ".spectrum-Calendar-date:lang(ko)",
-    ".spectrum-Calendar-date:lang(zh)",
     ".spectrum-Calendar-dayOfWeek",
     ".spectrum-Calendar-dayOfWeek[title]",
     ".spectrum-Calendar-header",
@@ -56,145 +56,721 @@
     ".spectrum-Calendar-title",
     ".spectrum-Calendar:dir(rtl)"
   ],
-  "modifiers": [
-    "--mod-calendar-border-radius-reset",
-    "--mod-calendar-border-width-reset",
-    "--mod-calendar-button-icon-color",
-    "--mod-calendar-day-background-color",
-    "--mod-calendar-day-background-color-cap-selected",
-    "--mod-calendar-day-background-color-down",
-    "--mod-calendar-day-background-color-focus",
-    "--mod-calendar-day-background-color-hover",
-    "--mod-calendar-day-background-color-key-focus",
-    "--mod-calendar-day-background-color-selected",
-    "--mod-calendar-day-background-color-selected-hover",
-    "--mod-calendar-day-background-layer-color",
-    "--mod-calendar-day-border-color",
-    "--mod-calendar-day-border-color-key-focus",
-    "--mod-calendar-day-border-size",
-    "--mod-calendar-day-fill-content",
-    "--mod-calendar-day-fill-display",
-    "--mod-calendar-day-height",
-    "--mod-calendar-day-padding",
-    "--mod-calendar-day-text-color",
-    "--mod-calendar-day-text-color-cap-selected",
-    "--mod-calendar-day-text-color-disabled",
-    "--mod-calendar-day-text-color-hover",
-    "--mod-calendar-day-text-color-key-focus",
-    "--mod-calendar-day-text-color-selected",
-    "--mod-calendar-day-text-font-weight",
-    "--mod-calendar-day-text-font-weight-cap-selected",
-    "--mod-calendar-day-text-font-weight-selected",
-    "--mod-calendar-day-text-size",
-    "--mod-calendar-day-text-size-han",
-    "--mod-calendar-day-title-text-color",
-    "--mod-calendar-day-title-text-font-weight",
-    "--mod-calendar-day-title-text-size",
-    "--mod-calendar-day-today-background-color-selected-hover",
-    "--mod-calendar-day-today-border-color",
-    "--mod-calendar-day-today-border-color-disabled",
-    "--mod-calendar-day-today-text-color",
-    "--mod-calendar-day-today-text-font-weight",
-    "--mod-calendar-day-visibility",
-    "--mod-calendar-day-width",
-    "--mod-calendar-margin-x",
-    "--mod-calendar-margin-y",
-    "--mod-calendar-title-height",
-    "--mod-calendar-title-text-letter-spacing",
-    "--mod-calendar-title-text-size",
-    "--mod-calendar-width"
-  ],
-  "component": [
-    "--spectrum-calendar-border-radius-reset",
-    "--spectrum-calendar-border-width-reset",
-    "--spectrum-calendar-button-icon-color",
-    "--spectrum-calendar-day-background",
-    "--spectrum-calendar-day-background-cap-selected",
-    "--spectrum-calendar-day-background-color-cap-selected",
-    "--spectrum-calendar-day-background-color-down",
-    "--spectrum-calendar-day-background-color-hover",
-    "--spectrum-calendar-day-background-color-key-focus",
-    "--spectrum-calendar-day-background-color-selected",
-    "--spectrum-calendar-day-background-color-selected-disabled",
-    "--spectrum-calendar-day-background-color-selected-hover",
-    "--spectrum-calendar-day-background-down",
-    "--spectrum-calendar-day-background-focus",
-    "--spectrum-calendar-day-background-hover",
-    "--spectrum-calendar-day-background-layer-color",
-    "--spectrum-calendar-day-background-selected",
-    "--spectrum-calendar-day-background-selected-hover",
-    "--spectrum-calendar-day-border-color",
-    "--spectrum-calendar-day-border-color-focus",
-    "--spectrum-calendar-day-border-color-key-focus",
-    "--spectrum-calendar-day-border-size",
-    "--spectrum-calendar-day-height",
-    "--spectrum-calendar-day-padding",
-    "--spectrum-calendar-day-text-color",
-    "--spectrum-calendar-day-text-color-cap-selected",
-    "--spectrum-calendar-day-text-color-disabled",
-    "--spectrum-calendar-day-text-color-hover",
-    "--spectrum-calendar-day-text-color-key-focus",
-    "--spectrum-calendar-day-text-color-selected",
-    "--spectrum-calendar-day-text-font-weight",
-    "--spectrum-calendar-day-text-font-weight-cap-selected",
-    "--spectrum-calendar-day-text-font-weight-selected",
-    "--spectrum-calendar-day-text-size",
-    "--spectrum-calendar-day-today-background-color-selected-hover",
-    "--spectrum-calendar-day-today-background-selected-hover",
-    "--spectrum-calendar-day-today-border-color",
-    "--spectrum-calendar-day-today-border-color-disabled",
-    "--spectrum-calendar-day-today-text-color",
-    "--spectrum-calendar-day-today-text-font-weight",
-    "--spectrum-calendar-day-width",
-    "--spectrum-calendar-heading-text-size",
-    "--spectrum-calendar-margin-x",
-    "--spectrum-calendar-margin-y",
-    "--spectrum-calendar-title-height",
-    "--spectrum-calendar-title-text-color",
-    "--spectrum-calendar-title-text-font-weight",
-    "--spectrum-calendar-title-text-letter-spacing",
-    "--spectrum-calendar-title-text-size",
-    "--spectrum-calendar-width"
-  ],
-  "global": [
-    "--spectrum-bold-font-weight",
-    "--spectrum-border-width-200",
-    "--spectrum-component-height-100",
-    "--spectrum-disabled-border-color",
-    "--spectrum-disabled-content-color",
-    "--spectrum-font-size-100",
-    "--spectrum-font-size-300",
-    "--spectrum-font-size-50",
-    "--spectrum-gray-100-rgb",
-    "--spectrum-gray-800",
-    "--spectrum-logical-rotation",
-    "--spectrum-neutral-content-color-default",
-    "--spectrum-neutral-content-color-down",
-    "--spectrum-neutral-content-color-hover",
-    "--spectrum-neutral-content-color-key-focus",
-    "--spectrum-neutral-subdued-content-color-default",
-    "--spectrum-regular-font-weight"
-  ],
-  "passthroughs": [
-    "--mod-actionbutton-content-color-default",
-    "--mod-actionbutton-edge-to-text",
-    "--mod-actionbutton-min-width"
-  ],
-  "high-contrast": [
-    "--highcontrast-calendar-day-background-cap-selected",
-    "--highcontrast-calendar-day-background-down",
-    "--highcontrast-calendar-day-background-focus",
-    "--highcontrast-calendar-day-background-hover",
-    "--highcontrast-calendar-day-background-selected",
-    "--highcontrast-calendar-day-background-selected-hover",
-    "--highcontrast-calendar-day-border-color-focus",
-    "--highcontrast-calendar-day-text-color-cap-selected",
-    "--highcontrast-calendar-day-text-color-hover",
-    "--highcontrast-calendar-day-text-color-key-focus",
-    "--highcontrast-calendar-day-text-color-selected",
-    "--highcontrast-calendar-day-title-text-color",
-    "--highcontrast-calendar-day-today-background-selected-hover",
-    "--highcontrast-calendar-day-today-border-color",
-    "--highcontrast-calendar-day-today-text-color"
-  ]
+  "modifiers": {
+    "mod-calendar-day-width": {
+      "description": "Used by `--spectrum-calendar-day-width`. <br/>Defaults to `var(--spectrum-component-height-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-calendar-day-height": {
+      "description": "Used by `--spectrum-calendar-day-height`. <br/>Defaults to `var(--spectrum-component-height-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-calendar-day-border-size": {
+      "description": "Used by `--spectrum-calendar-day-border-size`. <br/>Defaults to `var(--spectrum-border-width-200)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-calendar-day-padding": {
+      "description": "Used by `--spectrum-calendar-day-padding`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-calendar-border-radius-reset": {
+      "description": "Used by `--spectrum-calendar-border-radius-reset`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-calendar-border-width-reset": {
+      "description": "Used by `--spectrum-calendar-border-width-reset`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-calendar-margin-y": {
+      "description": "Used by `--spectrum-calendar-margin-y`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-calendar-margin-x": {
+      "description": "Used by `--spectrum-calendar-margin-x`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-calendar-width": {
+      "description": "Used by `--spectrum-calendar-width`. <br/>Defaults to `calc((var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding) * 2) * 7)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-calendar-title-text-letter-spacing": {
+      "description": "Used by `--spectrum-calendar-title-text-letter-spacing`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-calendar-title-height": {
+      "description": "Used by `--spectrum-calendar-title-height`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-calendar-title-text-size": {
+      "description": "Used by `--spectrum-calendar-title-text-size`. <br/>Defaults to `var(--spectrum-font-size-300)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-calendar-day-title-text-font-weight": {
+      "description": "Used by `--spectrum-calendar-title-text-font-weight`. <br/>Defaults to `var(--spectrum-bold-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-calendar-day-title-text-color": {
+      "description": "Used by `--spectrum-calendar-title-text-color`. <br/>Defaults to `var(--spectrum-neutral-subdued-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-calendar-day-title-text-size": {
+      "description": "Used by `--spectrum-calendar-heading-text-size`. <br/>Defaults to `var(--spectrum-font-size-50)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-calendar-button-icon-color": {
+      "description": "Used by `--spectrum-calendar-button-icon-color`. <br/>Defaults to `var(--spectrum-neutral-subdued-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-calendar-day-background-color": {
+      "description": "Defined in `.spectrum-Calendar-date:hover:not(.is-selection-end, .is-selection-start)`, `.spectrum-Calendar-date.is-range-selection:hover, .spectrum-Calendar-date.is-selected:hover:not(.is-selection-end, .is-selection-start)`, `.spectrum-Calendar-date.is-focused.is-range-selection, .spectrum-Calendar-date.is-focused.is-selected`, `.spectrum-Calendar-date.is-focused:not(.is-range-selection)`, `.spectrum-Calendar-date.is-selected:not(.is-range-selection)`, `.spectrum-Calendar-date.is-selected`. <br/>Used by `--spectrum-calendar-day-background`. <br/>Defaults to `var(--spectrum-calendar-day-background-cap-selected)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-calendar-day-background-color-selected": {
+      "description": "Defined in `.spectrum-Calendar-date.is-disabled`. <br/>Used by `--spectrum-calendar-day-background-selected`. <br/>Defaults to `var(--spectrum-calendar-day-background-color-selected)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-calendar-day-background-color-selected-hover": {
+      "description": "Defined in `.spectrum-Calendar-date.is-disabled`. <br/>Used by `--spectrum-calendar-day-background-selected-hover`. <br/>Defaults to `var(--spectrum-calendar-day-background-color-selected-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-calendar-day-background-color-cap-selected": {
+      "description": "Defined in `.spectrum-Calendar-date.is-disabled`. <br/>Used by `--spectrum-calendar-day-background-cap-selected`. <br/>Defaults to `var(--spectrum-calendar-day-background-color-cap-selected)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-calendar-day-background-color-hover": {
+      "description": "Defined in `.spectrum-Calendar-date.is-today.is-selected:not(.is-range-selection)`, `.spectrum-Calendar-date.is-disabled`. <br/>Used by `--spectrum-calendar-day-background-hover`. <br/>Defaults to `var(--spectrum-calendar-day-background-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-calendar-day-background-color-key-focus": {
+      "description": "Defined in `.spectrum-Calendar-date.is-focused.is-selected:not(.is-range-selection), .spectrum-Calendar-date.is-focused:not(.is-range-selection):active`. <br/>Used by `--spectrum-calendar-day-background-focus`. <br/>Defaults to `var(--spectrum-calendar-day-background-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-calendar-day-background-color-down": {
+      "description": "Defined in `.spectrum-Calendar-date.is-disabled`. <br/>Used by `--spectrum-calendar-day-background-down`. <br/>Defaults to `var(--spectrum-calendar-day-background-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-calendar-day-background-layer-color": {
+      "description": "Defined in `.spectrum-Calendar-date:active`, `.spectrum-Calendar-date.is-selected:not(.is-range-selection)`, `.spectrum-Calendar-date.is-selected`, `.spectrum-Calendar-date.is-disabled.is-selected`. <br/>Used by `--spectrum-calendar-day-background-layer-color`. <br/>Defaults to `var(--spectrum-calendar-day-background-selected)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-calendar-day-border-color": {
+      "description": "Defined in `.spectrum-Calendar-date.is-focused`, `.spectrum-Calendar-date.is-focused:not(.is-range-selection)`, `.spectrum-Calendar-date.is-today`. <br/>Used by `--spectrum-calendar-day-border-color`, `.spectrum-Calendar-date:before`. <br/>Defaults to `var(--spectrum-calendar-day-today-border-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-calendar-day-border-color-key-focus": {
+      "description": "Defined in `.spectrum-Calendar-date.is-disabled`. <br/>Used by `--spectrum-calendar-day-border-color-focus`. <br/>Defaults to `var(--spectrum-calendar-day-border-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-calendar-day-text-size": {
+      "description": "Used by `--spectrum-calendar-day-text-size`. <br/>Defaults to `var(--spectrum-font-size-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-calendar-day-text-font-weight": {
+      "description": "Defined in `.spectrum-Calendar-date.is-range-selection.is-selection-end, .spectrum-Calendar-date.is-range-selection.is-selection-start`, `.spectrum-Calendar-date.is-selected:not(.is-range-selection)`, `.spectrum-Calendar-date.is-today`, `.spectrum-Calendar-date.is-disabled`. <br/>Used by `--spectrum-calendar-day-text-font-weight`. <br/>Defaults to `var(--spectrum-regular-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-calendar-day-text-font-weight-selected": {
+      "description": "Defined in `.spectrum-Calendar-date.is-disabled`. <br/>Used by `--spectrum-calendar-day-text-font-weight-selected`. <br/>Defaults to `var(--spectrum-bold-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-calendar-day-text-font-weight-cap-selected": {
+      "description": "Defined in `.spectrum-Calendar-date.is-disabled`. <br/>Used by `--spectrum-calendar-day-text-font-weight-cap-selected`. <br/>Defaults to `var(--spectrum-bold-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-calendar-day-today-background-color-selected-hover": {
+      "description": "Used by `--spectrum-calendar-day-today-background-selected-hover`. <br/>Defaults to `var(--spectrum-calendar-day-today-background-color-selected-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-calendar-day-today-text-font-weight": {
+      "description": "Used by `--spectrum-calendar-day-today-text-font-weight`. <br/>Defaults to `var(--spectrum-bold-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-calendar-day-today-text-color": {
+      "description": "Used by `--spectrum-calendar-day-today-text-color`. <br/>Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-calendar-day-today-border-color": {
+      "description": "Defined in `.spectrum-Calendar-date.is-disabled`. <br/>Used by `--spectrum-calendar-day-today-border-color`. <br/>Defaults to `var(--spectrum-gray-800)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-calendar-day-text-color": {
+      "description": "Defined in `.spectrum-Calendar-date:hover`, `.spectrum-Calendar-date.is-range-selection.is-selection-end, .spectrum-Calendar-date.is-range-selection.is-selection-start`, `.spectrum-Calendar-date.is-focused:not(.is-range-selection)`, `.spectrum-Calendar-date.is-selected:not(.is-range-selection)`, `.spectrum-Calendar-date.is-selected`, `.spectrum-Calendar-date.is-today`, `.spectrum-Calendar-date.is-disabled`. <br/>Used by `--spectrum-calendar-day-text-color`. <br/>Defaults to `var(--spectrum-neutral-subdued-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-calendar-day-text-color-selected": {
+      "description": "Defined in `.spectrum-Calendar-date.is-disabled`. <br/>Used by `--spectrum-calendar-day-text-color-selected`. <br/>Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-calendar-day-text-color-cap-selected": {
+      "description": "Defined in `.spectrum-Calendar-date.is-disabled`. <br/>Used by `--spectrum-calendar-day-text-color-cap-selected`. <br/>Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-calendar-day-text-color-hover": {
+      "description": "Defined in `.spectrum-Calendar-date.is-disabled`. <br/>Used by `--spectrum-calendar-day-text-color-hover`. <br/>Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-calendar-day-text-color-key-focus": {
+      "description": "Defined in `.spectrum-Calendar-date.is-focused.is-selected:not(.is-range-selection), .spectrum-Calendar-date.is-focused:not(.is-range-selection):active`, `.spectrum-Calendar-date.is-disabled`. <br/>Used by `--spectrum-calendar-day-text-color-key-focus`. <br/>Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-calendar-day-text-color-disabled": {
+      "description": "Used by `--spectrum-calendar-day-text-color-disabled`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-calendar-day-today-border-color-disabled": {
+      "description": "Used by `--spectrum-calendar-day-today-border-color-disabled`. <br/>Defaults to `var(--spectrum-disabled-border-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-calendar-day-text-size-han": {
+      "description": "Used by `--spectrum-calendar-day-text-size`. <br/>Defaults to `var(--spectrum-font-size-50)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-calendar-day-fill-content": {
+      "description": "Defined in `.spectrum-Calendar-date.is-range-selection.is-selection-end, .spectrum-Calendar-date.is-range-selection.is-selection-start`. <br/>Used by `.spectrum-Calendar-date:after`. <br/>Defaults to `none`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-calendar-day-visibility": {
+      "description": "Defined in `.spectrum-Calendar-date.is-outsideMonth`. <br/>Used by `.spectrum-Calendar-date`. <br/>Defaults to `none`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-calendar-day-fill-display": {
+      "description": "Defined in `.spectrum-Calendar-date.is-range-selection.is-selection-end, .spectrum-Calendar-date.is-range-selection.is-selection-start`. <br/>Used by `.spectrum-Calendar-date:after`. <br/>Defaults to `block`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-calendar-day-background-color-focus": {
+      "description": "Defined in `.spectrum-Calendar-date.is-disabled`. <br/>Defaults to `transparent`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-calendar-day-background-color-selected-disabled": {
+      "value": "rgb(var(--spectrum-gray-100-rgb), 0.4)",
+      "description": "Defined in `.spectrum-Calendar`, `.spectrum-Calendar-date`. <br/>Used by `--mod-calendar-day-background-color-selected`. <br/>Defaults to `rgb(var(--spectrum-gray-100-rgb), 0.4)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-calendar-day-width": {
+      "value": "var(--mod-calendar-day-width, var(--spectrum-component-height-100))",
+      "description": "Defined in `.spectrum-Calendar`. <br/>Used by `--spectrum-calendar-width`, `--mod-actionbutton-min-width`, `.spectrum-Calendar-dayOfWeek`, `.spectrum-Calendar-tableCell`, `.spectrum-Calendar-date`, `.spectrum-Calendar-date, .spectrum-Calendar-date:before`, `.spectrum-Calendar-date:before`, `.spectrum-Calendar-date:after`, `.spectrum-Calendar-date.is-range-selection`, `.spectrum-Calendar-date.is-range-selection.is-range-start, .spectrum-Calendar-date.is-range-selection.is-selection-end, .spectrum-Calendar-date.is-range-selection.is-selection-start`, `.spectrum-Calendar-date.is-range-selection.is-range-start, .spectrum-Calendar-date.is-range-selection.is-selection-start`, `.spectrum-Calendar-date.is-range-selection.is-range-end, .spectrum-Calendar-date.is-range-selection.is-selection-end`, `.spectrum-Calendar-date.is-range-selection.is-range-start.is-range-end, .spectrum-Calendar-date.is-range-selection.is-selection-end.is-range-start, .spectrum-Calendar-date.is-range-selection.is-selection-start.is-range-end, .spectrum-Calendar-date.is-range-selection.is-selection-start.is-selection-end`. <br/>Defaults to `var(--mod-calendar-day-width, var(--spectrum-component-height-100))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-calendar-day-height": {
+      "value": "var(--mod-calendar-day-height, var(--spectrum-component-height-100))",
+      "description": "Defined in `.spectrum-Calendar`. <br/>Used by `.spectrum-Calendar-tableCell`, `.spectrum-Calendar-date, .spectrum-Calendar-date:before`, `.spectrum-Calendar-date:after`, `.spectrum-Calendar-date.is-range-selection`. <br/>Defaults to `var(--mod-calendar-day-height, var(--spectrum-component-height-100))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-calendar-day-border-size": {
+      "value": "var(--mod-calendar-day-border-size, var(--spectrum-border-width-200))",
+      "description": "Defined in `.spectrum-Calendar`. <br/>Used by `.spectrum-Calendar-date`, `.spectrum-Calendar-date:before`. <br/>Defaults to `var(--mod-calendar-day-border-size, var(--spectrum-border-width-200))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-calendar-day-padding": {
+      "value": "var(--mod-calendar-day-padding, 4px)",
+      "description": "Defined in `.spectrum-Calendar`. <br/>Used by `--spectrum-calendar-width`, `--mod-actionbutton-edge-to-text`, `.spectrum-Calendar-tableCell`, `.spectrum-Calendar-date`, `.spectrum-Calendar-date.is-range-selection`, `.spectrum-Calendar-date.is-range-selection.is-range-start, .spectrum-Calendar-date.is-range-selection.is-selection-end, .spectrum-Calendar-date.is-range-selection.is-selection-start`, `.spectrum-Calendar-date.is-range-selection.is-range-start, .spectrum-Calendar-date.is-range-selection.is-selection-start`, `.spectrum-Calendar-date.is-range-selection.is-range-end, .spectrum-Calendar-date.is-range-selection.is-selection-end`. <br/>Defaults to `var(--mod-calendar-day-padding, 4px)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-calendar-border-radius-reset": {
+      "value": "var(--mod-calendar-border-radius-reset, 0)",
+      "description": "Defined in `.spectrum-Calendar`. <br/>Used by `.spectrum-Calendar-date.is-range-selection`. <br/>Defaults to `var(--mod-calendar-border-radius-reset, 0)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-calendar-border-width-reset": {
+      "value": "var(--mod-calendar-border-width-reset, 0)",
+      "description": "Defined in `.spectrum-Calendar`. <br/>Used by `.spectrum-Calendar-date.is-range-selection`. <br/>Defaults to `var(--mod-calendar-border-width-reset, 0)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-calendar-margin-y": {
+      "value": "var(--mod-calendar-margin-y, 24px)",
+      "description": "Defined in `.spectrum-Calendar`. <br/>Used by `.spectrum-Calendar--padded`. <br/>Defaults to `var(--mod-calendar-margin-y, 24px)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-calendar-margin-x": {
+      "value": "var(--mod-calendar-margin-x, 32px)",
+      "description": "Defined in `.spectrum-Calendar`. <br/>Used by `.spectrum-Calendar--padded`. <br/>Defaults to `var(--mod-calendar-margin-x, 32px)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-calendar-width": {
+      "value": "var(--mod-calendar-width, calc((var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding) * 2) * 7))",
+      "description": "Defined in `.spectrum-Calendar`. <br/>Used by `.spectrum-Calendar`. <br/>Defaults to `var(--mod-calendar-width, calc((var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding) * 2) * 7))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-calendar-title-text-letter-spacing": {
+      "value": "var(--mod-calendar-title-text-letter-spacing, 0.06em)",
+      "description": "Defined in `.spectrum-Calendar`. <br/>Used by `.spectrum-Calendar-dayOfWeek[title]`. <br/>Defaults to `var(--mod-calendar-title-text-letter-spacing, 0.06em)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-calendar-title-height": {
+      "value": "var(--mod-calendar-title-height, 32px)",
+      "description": "Defined in `.spectrum-Calendar`. <br/>Used by `.spectrum-Calendar-title`. <br/>Defaults to `var(--mod-calendar-title-height, 32px)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-calendar-title-text-size": {
+      "value": "var(--mod-calendar-title-text-size, var(--spectrum-font-size-300))",
+      "description": "Defined in `.spectrum-Calendar`. <br/>Used by `.spectrum-Calendar-title`. <br/>Defaults to `var(--mod-calendar-title-text-size, var(--spectrum-font-size-300))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-calendar-title-text-font-weight": {
+      "value": "var(--mod-calendar-day-title-text-font-weight, var(--spectrum-bold-font-weight))",
+      "description": "Defined in `.spectrum-Calendar`. <br/>Used by `.spectrum-Calendar-title`, `.spectrum-Calendar-dayOfWeek`. <br/>Defaults to `var(--mod-calendar-day-title-text-font-weight, var(--spectrum-bold-font-weight))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-calendar-title-text-color": {
+      "value": "var(--highcontrast-calendar-day-title-text-color, var(--mod-calendar-day-title-text-color, var(--spectrum-neutral-subdued-content-color-default)))",
+      "description": "Defined in `.spectrum-Calendar`. <br/>Used by `.spectrum-Calendar-title`, `.spectrum-Calendar-dayOfWeek`. <br/>Defaults to `var(--highcontrast-calendar-day-title-text-color, var(--mod-calendar-day-title-text-color, var(--spectrum-neutral-subdued-content-color-default)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-calendar-heading-text-size": {
+      "value": "var(--mod-calendar-day-title-text-size, var(--spectrum-font-size-50))",
+      "description": "Defined in `.spectrum-Calendar`. <br/>Used by `.spectrum-Calendar-dayOfWeek`. <br/>Defaults to `var(--mod-calendar-day-title-text-size, var(--spectrum-font-size-50))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-calendar-button-icon-color": {
+      "value": "var(--mod-calendar-button-icon-color, var(--spectrum-neutral-subdued-content-color-default))",
+      "description": "Defined in `.spectrum-Calendar`. <br/>Used by `--mod-actionbutton-content-color-default`. <br/>Defaults to `var(--mod-calendar-button-icon-color, var(--spectrum-neutral-subdued-content-color-default))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-calendar-day-background": {
+      "value": "var(--mod-calendar-day-background-color, transparent)",
+      "description": "Defined in `.spectrum-Calendar-date`. <br/>Used by `.spectrum-Calendar-date:before`. <br/>Defaults to `var(--mod-calendar-day-background-color, transparent)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-calendar-day-background-selected": {
+      "value": "var(--highcontrast-calendar-day-background-selected, var(--mod-calendar-day-background-color-selected, var(--spectrum-calendar-day-background-color-selected)))",
+      "description": "Defined in `.spectrum-Calendar-date`. <br/>Used by `--mod-calendar-day-background-color`, `--mod-calendar-day-background-layer-color`. <br/>Defaults to `var(--highcontrast-calendar-day-background-selected, var(--mod-calendar-day-background-color-selected, var(--spectrum-calendar-day-background-color-selected)))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-calendar-day-background-color-selected": {
+      "description": "Used by `--spectrum-calendar-day-background-selected`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-calendar-day-background-selected-hover": {
+      "value": "var(--highcontrast-calendar-day-background-selected-hover, var(--mod-calendar-day-background-color-selected-hover, var(--spectrum-calendar-day-background-color-selected-hover)))",
+      "description": "Defined in `.spectrum-Calendar-date`. <br/>Used by `--mod-calendar-day-background-color`. <br/>Defaults to `var(--highcontrast-calendar-day-background-selected-hover, var(--mod-calendar-day-background-color-selected-hover, var(--spectrum-calendar-day-background-color-selected-hover)))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-calendar-day-background-color-selected-hover": {
+      "description": "Used by `--spectrum-calendar-day-background-selected-hover`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-calendar-day-background-cap-selected": {
+      "value": "var(--highcontrast-calendar-day-background-cap-selected, var(--mod-calendar-day-background-color-cap-selected, var(--spectrum-calendar-day-background-color-cap-selected)))",
+      "description": "Defined in `.spectrum-Calendar-date`. <br/>Used by `--mod-calendar-day-background-color-key-focus`, `--mod-calendar-day-background-color`. <br/>Defaults to `var(--highcontrast-calendar-day-background-cap-selected, var(--mod-calendar-day-background-color-cap-selected, var(--spectrum-calendar-day-background-color-cap-selected)))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-calendar-day-background-color-cap-selected": {
+      "description": "Used by `--spectrum-calendar-day-background-cap-selected`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-calendar-day-background-hover": {
+      "value": "var(--highcontrast-calendar-day-background-hover, var(--mod-calendar-day-background-color-hover, var(--spectrum-calendar-day-background-color-hover)))",
+      "description": "Defined in `.spectrum-Calendar-date`. <br/>Used by `--mod-calendar-day-background-color`. <br/>Defaults to `var(--highcontrast-calendar-day-background-hover, var(--mod-calendar-day-background-color-hover, var(--spectrum-calendar-day-background-color-hover)))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-calendar-day-background-color-hover": {
+      "description": "Used by `--spectrum-calendar-day-background-hover`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-calendar-day-background-focus": {
+      "value": "var(--highcontrast-calendar-day-background-focus, var(--mod-calendar-day-background-color-key-focus, var(--spectrum-calendar-day-background-color-key-focus)))",
+      "description": "Defined in `.spectrum-Calendar-date`. <br/>Used by `--mod-calendar-day-background-color`. <br/>Defaults to `var(--highcontrast-calendar-day-background-focus, var(--mod-calendar-day-background-color-key-focus, var(--spectrum-calendar-day-background-color-key-focus)))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-calendar-day-background-color-key-focus": {
+      "description": "Used by `--spectrum-calendar-day-background-focus`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-calendar-day-background-down": {
+      "value": "var(--highcontrast-calendar-day-background-down, var(--mod-calendar-day-background-color-down, var(--spectrum-calendar-day-background-color-down)))",
+      "description": "Defined in `.spectrum-Calendar-date`. <br/>Used by `--mod-calendar-day-background-layer-color`. <br/>Defaults to `var(--highcontrast-calendar-day-background-down, var(--mod-calendar-day-background-color-down, var(--spectrum-calendar-day-background-color-down)))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-calendar-day-background-color-down": {
+      "description": "Used by `--spectrum-calendar-day-background-down`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-calendar-day-background-layer-color": {
+      "value": "var(--mod-calendar-day-background-layer-color, transparent)",
+      "description": "Defined in `.spectrum-Calendar-date`. <br/>Used by `.spectrum-Calendar-date`. <br/>Defaults to `var(--mod-calendar-day-background-layer-color, transparent)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-calendar-day-border-color": {
+      "value": "var(--mod-calendar-day-border-color, transparent)",
+      "description": "Defined in `.spectrum-Calendar-date`. <br/>Used by `.spectrum-Calendar-date`. <br/>Defaults to `var(--mod-calendar-day-border-color, transparent)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-calendar-day-border-color-focus": {
+      "value": "var(--highcontrast-calendar-day-border-color-focus, var(--mod-calendar-day-border-color-key-focus, var(--spectrum-calendar-day-border-color-key-focus)))",
+      "description": "Defined in `.spectrum-Calendar-date`. <br/>Used by `--mod-calendar-day-border-color`. <br/>Defaults to `var(--highcontrast-calendar-day-border-color-focus, var(--mod-calendar-day-border-color-key-focus, var(--spectrum-calendar-day-border-color-key-focus)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-calendar-day-border-color-key-focus": {
+      "description": "Used by `--spectrum-calendar-day-border-color-focus`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-calendar-day-text-size": {
+      "value": "var(--mod-calendar-day-text-size-han, var(--spectrum-font-size-50))",
+      "description": "Defined in `.spectrum-Calendar-date`, `.spectrum-Calendar-date:lang(ja), .spectrum-Calendar-date:lang(ko), .spectrum-Calendar-date:lang(zh)`. <br/>Used by `.spectrum-Calendar-date`. <br/>Defaults to `var(--mod-calendar-day-text-size-han, var(--spectrum-font-size-50))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-calendar-day-text-font-weight": {
+      "value": "var(--mod-calendar-day-text-font-weight, var(--spectrum-regular-font-weight))",
+      "description": "Defined in `.spectrum-Calendar-date`. <br/>Used by `.spectrum-Calendar-date`. <br/>Defaults to `var(--mod-calendar-day-text-font-weight, var(--spectrum-regular-font-weight))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-calendar-day-text-font-weight-selected": {
+      "value": "var(--mod-calendar-day-text-font-weight-selected, var(--spectrum-bold-font-weight))",
+      "description": "Defined in `.spectrum-Calendar-date`. <br/>Used by `--mod-calendar-day-text-font-weight`. <br/>Defaults to `var(--mod-calendar-day-text-font-weight-selected, var(--spectrum-bold-font-weight))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-calendar-day-text-font-weight-cap-selected": {
+      "value": "var(--mod-calendar-day-text-font-weight-cap-selected, var(--spectrum-bold-font-weight))",
+      "description": "Defined in `.spectrum-Calendar-date`. <br/>Used by `--mod-calendar-day-text-font-weight`. <br/>Defaults to `var(--mod-calendar-day-text-font-weight-cap-selected, var(--spectrum-bold-font-weight))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-calendar-day-today-background-selected-hover": {
+      "value": "var(--highcontrast-calendar-day-today-background-selected-hover, var(--mod-calendar-day-today-background-color-selected-hover, var(--spectrum-calendar-day-today-background-color-selected-hover)))",
+      "description": "Defined in `.spectrum-Calendar-date`. <br/>Used by `--mod-calendar-day-background-color-hover`. <br/>Defaults to `var(--highcontrast-calendar-day-today-background-selected-hover, var(--mod-calendar-day-today-background-color-selected-hover, var(--spectrum-calendar-day-today-background-color-selected-hover)))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-calendar-day-today-background-color-selected-hover": {
+      "description": "Used by `--spectrum-calendar-day-today-background-selected-hover`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-calendar-day-today-text-font-weight": {
+      "value": "var(--mod-calendar-day-today-text-font-weight, var(--spectrum-bold-font-weight))",
+      "description": "Defined in `.spectrum-Calendar-date`. <br/>Used by `--mod-calendar-day-text-font-weight`. <br/>Defaults to `var(--mod-calendar-day-today-text-font-weight, var(--spectrum-bold-font-weight))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-calendar-day-today-text-color": {
+      "value": "var(--highcontrast-calendar-day-today-text-color, var(--mod-calendar-day-today-text-color, var(--spectrum-neutral-content-color-default)))",
+      "description": "Defined in `.spectrum-Calendar-date`. <br/>Used by `--mod-calendar-day-text-color`. <br/>Defaults to `var(--highcontrast-calendar-day-today-text-color, var(--mod-calendar-day-today-text-color, var(--spectrum-neutral-content-color-default)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-calendar-day-today-border-color": {
+      "value": "var(--highcontrast-calendar-day-today-border-color, var(--mod-calendar-day-today-border-color, var(--spectrum-gray-800)))",
+      "description": "Defined in `.spectrum-Calendar-date`. <br/>Used by `--mod-calendar-day-border-color`. <br/>Defaults to `var(--highcontrast-calendar-day-today-border-color, var(--mod-calendar-day-today-border-color, var(--spectrum-gray-800)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-calendar-day-text-color": {
+      "value": "var(--mod-calendar-day-text-color, var(--spectrum-neutral-subdued-content-color-default))",
+      "description": "Defined in `.spectrum-Calendar-date`. <br/>Used by `.spectrum-Calendar-date`. <br/>Defaults to `var(--mod-calendar-day-text-color, var(--spectrum-neutral-subdued-content-color-default))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-calendar-day-text-color-selected": {
+      "value": "var(--highcontrast-calendar-day-text-color-selected, var(--mod-calendar-day-text-color-selected, var(--spectrum-neutral-content-color-down)))",
+      "description": "Defined in `.spectrum-Calendar-date`. <br/>Used by `--mod-calendar-day-text-color`. <br/>Defaults to `var(--highcontrast-calendar-day-text-color-selected, var(--mod-calendar-day-text-color-selected, var(--spectrum-neutral-content-color-down)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-calendar-day-text-color-cap-selected": {
+      "value": "var(--highcontrast-calendar-day-text-color-cap-selected, var(--mod-calendar-day-text-color-cap-selected, var(--spectrum-neutral-content-color-down)))",
+      "description": "Defined in `.spectrum-Calendar-date`. <br/>Used by `--mod-calendar-day-text-color`, `--mod-calendar-day-text-color-key-focus`. <br/>Defaults to `var(--highcontrast-calendar-day-text-color-cap-selected, var(--mod-calendar-day-text-color-cap-selected, var(--spectrum-neutral-content-color-down)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-calendar-day-text-color-hover": {
+      "value": "var(--highcontrast-calendar-day-text-color-hover, var(--mod-calendar-day-text-color-hover, var(--spectrum-neutral-content-color-hover)))",
+      "description": "Defined in `.spectrum-Calendar-date`. <br/>Used by `--mod-calendar-day-text-color`. <br/>Defaults to `var(--highcontrast-calendar-day-text-color-hover, var(--mod-calendar-day-text-color-hover, var(--spectrum-neutral-content-color-hover)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-calendar-day-text-color-key-focus": {
+      "value": "var(--highcontrast-calendar-day-text-color-key-focus, var(--mod-calendar-day-text-color-key-focus, var(--spectrum-neutral-content-color-key-focus)))",
+      "description": "Defined in `.spectrum-Calendar-date`. <br/>Used by `--mod-calendar-day-text-color`. <br/>Defaults to `var(--highcontrast-calendar-day-text-color-key-focus, var(--mod-calendar-day-text-color-key-focus, var(--spectrum-neutral-content-color-key-focus)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-calendar-day-text-color-disabled": {
+      "value": "var(--mod-calendar-day-text-color-disabled, var(--spectrum-disabled-content-color))",
+      "description": "Defined in `.spectrum-Calendar-date`. <br/>Used by `--mod-calendar-day-text-color`, `--mod-calendar-day-text-color-selected`, `--mod-calendar-day-text-color-cap-selected`, `--mod-calendar-day-text-color-hover`, `--mod-calendar-day-text-color-key-focus`. <br/>Defaults to `var(--mod-calendar-day-text-color-disabled, var(--spectrum-disabled-content-color))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-calendar-day-today-border-color-disabled": {
+      "value": "var(--mod-calendar-day-today-border-color-disabled, var(--spectrum-disabled-border-color))",
+      "description": "Defined in `.spectrum-Calendar-date`. <br/>Used by `--mod-calendar-day-today-border-color`. <br/>Defaults to `var(--mod-calendar-day-today-border-color-disabled, var(--spectrum-disabled-border-color))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-gray-100-rgb": {
+      "description": "Used by `--spectrum-calendar-day-background-color-selected-disabled`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-100": {
+      "value": "32px",
+      "description": "Used by `--spectrum-calendar-day-width`, `--spectrum-calendar-day-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-border-width-200": {
+      "value": "2px",
+      "description": "Used by `--spectrum-calendar-day-border-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-300": {
+      "value": "18px",
+      "description": "Used by `--spectrum-calendar-title-text-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-bold-font-weight": {
+      "value": "700",
+      "description": "Used by `--spectrum-calendar-title-text-font-weight`, `--spectrum-calendar-day-text-font-weight-selected`, `--spectrum-calendar-day-text-font-weight-cap-selected`, `--spectrum-calendar-day-today-text-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-subdued-content-color-default": {
+      "value": "var(--spectrum-gray-700)",
+      "description": "Used by `--spectrum-calendar-title-text-color`, `--spectrum-calendar-button-icon-color`, `--spectrum-calendar-day-text-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-font-size-50": {
+      "value": "11px",
+      "description": "Used by `--spectrum-calendar-heading-text-size`, `--spectrum-calendar-day-text-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-logical-rotation": {
+      "value": "matrix(-1, 0, 0, 1, 0, 0)",
+      "description": "Defined in `.spectrum-Calendar:dir(rtl)`. <br/>Used by `.spectrum-Calendar-nextMonth, .spectrum-Calendar-prevMonth`. <br/>Defaults to `matrix(-1, 0, 0, 1, 0, 0)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-100": {
+      "value": "14px",
+      "description": "Used by `--spectrum-calendar-day-text-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-regular-font-weight": {
+      "value": "400",
+      "description": "Used by `--spectrum-calendar-day-text-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-calendar-day-today-text-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-gray-800": {
+      "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+      "description": "Used by `--spectrum-calendar-day-today-border-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-down": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-calendar-day-text-color-selected`, `--spectrum-calendar-day-text-color-cap-selected`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-calendar-day-text-color-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-key-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-calendar-day-text-color-key-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-disabled-content-color": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Used by `--spectrum-calendar-day-text-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-disabled-border-color": {
+      "value": "var(--spectrum-gray-300)",
+      "description": "Used by `--spectrum-calendar-day-today-border-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {
+    "mod-actionbutton-edge-to-text": {
+      "category": "Passthrough"
+    },
+    "mod-actionbutton-min-width": {
+      "category": "Passthrough"
+    },
+    "mod-actionbutton-content-color-default": {
+      "category": "Passthrough"
+    }
+  },
+  "high-contrast": {
+    "highcontrast-calendar-day-title-text-color": {
+      "value": "var(--mod-calendar-day-title-text-color, var(--spectrum-neutral-subdued-content-color-default))",
+      "description": "Defined in `.spectrum-Calendar-date`, `.spectrum-Calendar-date.is-disabled`. <br/>Used by `--spectrum-calendar-title-text-color`. <br/>Defaults to `var(--mod-calendar-day-title-text-color, var(--spectrum-neutral-subdued-content-color-default))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-calendar-day-background-selected": {
+      "value": "var(--mod-calendar-day-background-color-selected, var(--spectrum-calendar-day-background-color-selected))",
+      "description": "Defined in `.spectrum-Calendar-date`. <br/>Used by `--spectrum-calendar-day-background-selected`. <br/>Defaults to `var(--mod-calendar-day-background-color-selected, var(--spectrum-calendar-day-background-color-selected))`, if not set.",
+      "control": "text"
+    },
+    "highcontrast-calendar-day-background-selected-hover": {
+      "value": "var(--mod-calendar-day-background-color-selected-hover, var(--spectrum-calendar-day-background-color-selected-hover))",
+      "description": "Defined in `.spectrum-Calendar-date`. <br/>Used by `--spectrum-calendar-day-background-selected-hover`. <br/>Defaults to `var(--mod-calendar-day-background-color-selected-hover, var(--spectrum-calendar-day-background-color-selected-hover))`, if not set.",
+      "control": "text"
+    },
+    "highcontrast-calendar-day-background-cap-selected": {
+      "value": "var(--mod-calendar-day-background-color-cap-selected, var(--spectrum-calendar-day-background-color-cap-selected))",
+      "description": "Defined in `.spectrum-Calendar-date`. <br/>Used by `--spectrum-calendar-day-background-cap-selected`. <br/>Defaults to `var(--mod-calendar-day-background-color-cap-selected, var(--spectrum-calendar-day-background-color-cap-selected))`, if not set.",
+      "control": "text"
+    },
+    "highcontrast-calendar-day-background-hover": {
+      "value": "var(--mod-calendar-day-background-color-hover, var(--spectrum-calendar-day-background-color-hover))",
+      "description": "Defined in `.spectrum-Calendar-date`. <br/>Used by `--spectrum-calendar-day-background-hover`. <br/>Defaults to `var(--mod-calendar-day-background-color-hover, var(--spectrum-calendar-day-background-color-hover))`, if not set.",
+      "control": "text"
+    },
+    "highcontrast-calendar-day-background-focus": {
+      "value": "var(--mod-calendar-day-background-color-key-focus, var(--spectrum-calendar-day-background-color-key-focus))",
+      "description": "Defined in `.spectrum-Calendar-date`. <br/>Used by `--spectrum-calendar-day-background-focus`. <br/>Defaults to `var(--mod-calendar-day-background-color-key-focus, var(--spectrum-calendar-day-background-color-key-focus))`, if not set.",
+      "control": "text"
+    },
+    "highcontrast-calendar-day-background-down": {
+      "value": "var(--mod-calendar-day-background-color-down, var(--spectrum-calendar-day-background-color-down))",
+      "description": "Defined in `.spectrum-Calendar-date`. <br/>Used by `--spectrum-calendar-day-background-down`. <br/>Defaults to `var(--mod-calendar-day-background-color-down, var(--spectrum-calendar-day-background-color-down))`, if not set.",
+      "control": "text"
+    },
+    "highcontrast-calendar-day-border-color-focus": {
+      "value": "var(--mod-calendar-day-border-color-key-focus, var(--spectrum-calendar-day-border-color-key-focus))",
+      "description": "Defined in `.spectrum-Calendar-date`. <br/>Used by `--spectrum-calendar-day-border-color-focus`. <br/>Defaults to `var(--mod-calendar-day-border-color-key-focus, var(--spectrum-calendar-day-border-color-key-focus))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-calendar-day-today-background-selected-hover": {
+      "value": "var(--mod-calendar-day-today-background-color-selected-hover, var(--spectrum-calendar-day-today-background-color-selected-hover))",
+      "description": "Defined in `.spectrum-Calendar-date`. <br/>Used by `--spectrum-calendar-day-today-background-selected-hover`. <br/>Defaults to `var(--mod-calendar-day-today-background-color-selected-hover, var(--spectrum-calendar-day-today-background-color-selected-hover))`, if not set.",
+      "control": "text"
+    },
+    "highcontrast-calendar-day-today-text-color": {
+      "value": "var(--mod-calendar-day-today-text-color, var(--spectrum-neutral-content-color-default))",
+      "description": "Defined in `.spectrum-Calendar-date`, `.spectrum-Calendar-date.is-disabled`. <br/>Used by `--spectrum-calendar-day-today-text-color`. <br/>Defaults to `var(--mod-calendar-day-today-text-color, var(--spectrum-neutral-content-color-default))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-calendar-day-today-border-color": {
+      "value": "var(--mod-calendar-day-today-border-color, var(--spectrum-gray-800))",
+      "description": "Defined in `.spectrum-Calendar-date`, `.spectrum-Calendar-date.is-disabled`. <br/>Used by `--spectrum-calendar-day-today-border-color`. <br/>Defaults to `var(--mod-calendar-day-today-border-color, var(--spectrum-gray-800))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-calendar-day-text-color-selected": {
+      "value": "var(--mod-calendar-day-text-color-selected, var(--spectrum-neutral-content-color-down))",
+      "description": "Defined in `.spectrum-Calendar-date`. <br/>Used by `--spectrum-calendar-day-text-color-selected`. <br/>Defaults to `var(--mod-calendar-day-text-color-selected, var(--spectrum-neutral-content-color-down))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-calendar-day-text-color-cap-selected": {
+      "value": "var(--mod-calendar-day-text-color-cap-selected, var(--spectrum-neutral-content-color-down))",
+      "description": "Defined in `.spectrum-Calendar-date`. <br/>Used by `--spectrum-calendar-day-text-color-cap-selected`. <br/>Defaults to `var(--mod-calendar-day-text-color-cap-selected, var(--spectrum-neutral-content-color-down))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-calendar-day-text-color-hover": {
+      "value": "var(--mod-calendar-day-text-color-hover, var(--spectrum-neutral-content-color-hover))",
+      "description": "Defined in `.spectrum-Calendar-date`, `.spectrum-Calendar-date.is-disabled`. <br/>Used by `--spectrum-calendar-day-text-color-hover`. <br/>Defaults to `var(--mod-calendar-day-text-color-hover, var(--spectrum-neutral-content-color-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-calendar-day-text-color-key-focus": {
+      "value": "var(--mod-calendar-day-text-color-key-focus, var(--spectrum-neutral-content-color-key-focus))",
+      "description": "Defined in `.spectrum-Calendar-date`, `.spectrum-Calendar-date.is-disabled`. <br/>Used by `--spectrum-calendar-day-text-color-key-focus`. <br/>Defaults to `var(--mod-calendar-day-text-color-key-focus, var(--spectrum-neutral-content-color-key-focus))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/calendar/stories/calendar.stories.js b/components/calendar/stories/calendar.stories.js
index 303121e9610..62af6245e07 100644
--- a/components/calendar/stories/calendar.stories.js
+++ b/components/calendar/stories/calendar.stories.js
@@ -1,11 +1,13 @@
 import ActionButtonStories from "@spectrum-css/actionbutton/stories/actionbutton.stories.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, isFocused } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { CalendarGroup } from "./calendar.test.js";
 import { Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 const months = [...Array(12).keys()].map((key) =>
 	new Date(0, key).toLocaleString("en", { month: "long" })
 );
@@ -117,6 +119,10 @@ export default {
 		},
 		packageJson,
 		metadata,
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 };
 
diff --git a/components/card/dist/metadata.json b/components/card/dist/metadata.json
index d1d22100c30..048da5e2128 100644
--- a/components/card/dist/metadata.json
+++ b/components/card/dist/metadata.json
@@ -9,12 +9,12 @@
     ".spectrum-Card--gallery .spectrum-Card-preview",
     ".spectrum-Card--gallery .spectrum-Card-preview:after",
     ".spectrum-Card--gallery .spectrum-Card-preview:before",
+    ".spectrum-Card--gallery:before",
+    ".spectrum-Card--gallery:hover .spectrum-Card-preview",
     ".spectrum-Card--gallery.is-drop-target",
     ".spectrum-Card--gallery.is-drop-target .spectrum-Card-preview",
     ".spectrum-Card--gallery.is-drop-target .spectrum-Card-preview:before",
     ".spectrum-Card--gallery.is-selected .spectrum-Card-preview:before",
-    ".spectrum-Card--gallery:before",
-    ".spectrum-Card--gallery:hover .spectrum-Card-preview",
     ".spectrum-Card--horizontal",
     ".spectrum-Card--horizontal .spectrum-Card-body",
     ".spectrum-Card--horizontal .spectrum-Card-content",
@@ -35,14 +35,6 @@
     ".spectrum-Card-subtitle",
     ".spectrum-Card-subtitle + .spectrum-Card-description:before",
     ".spectrum-Card-title",
-    ".spectrum-Card.is-drop-target",
-    ".spectrum-Card.is-focused .spectrum-Card-actions",
-    ".spectrum-Card.is-focused .spectrum-Card-quickActions",
-    ".spectrum-Card.is-selected",
-    ".spectrum-Card.is-selected .spectrum-Card-actions",
-    ".spectrum-Card.is-selected .spectrum-Card-quickActions",
-    ".spectrum-Card.is-selected:before",
-    ".spectrum-Card.spectrum-Card--gallery",
     ".spectrum-Card:after",
     ".spectrum-Card:before",
     ".spectrum-Card:focus .spectrum-Card-actions",
@@ -53,143 +45,738 @@
     ".spectrum-Card:focus-visible:after",
     ".spectrum-Card:hover",
     ".spectrum-Card:hover .spectrum-Card-actions",
-    ".spectrum-Card:hover .spectrum-Card-quickActions"
-  ],
-  "modifiers": [
-    "--mod-animation-duration-100",
-    "--mod-card-actions-border-radius",
-    "--mod-card-actions-drop-shadow-blur",
-    "--mod-card-actions-drop-shadow-color",
-    "--mod-card-actions-drop-shadow-x",
-    "--mod-card-actions-drop-shadow-y",
-    "--mod-card-actions-size",
-    "--mod-card-actions-spacing",
-    "--mod-card-animation-duration",
-    "--mod-card-background-color",
-    "--mod-card-background-color-hover",
-    "--mod-card-background-color-selected",
-    "--mod-card-body-font-color",
-    "--mod-card-body-font-family",
-    "--mod-card-body-font-size",
-    "--mod-card-body-font-style",
-    "--mod-card-body-font-weight",
-    "--mod-card-body-line-height",
-    "--mod-card-body-padding-block-end",
-    "--mod-card-body-padding-block-start",
-    "--mod-card-body-padding-inline-end",
-    "--mod-card-body-padding-inline-start",
-    "--mod-card-body-spacing",
-    "--mod-card-border-color",
-    "--mod-card-border-color-hover",
-    "--mod-card-border-color-selected",
-    "--mod-card-border-width",
-    "--mod-card-content-margin-bottom",
-    "--mod-card-content-margin-top",
-    "--mod-card-corner-radius",
-    "--mod-card-divider-color",
-    "--mod-card-focus-indicator-color",
-    "--mod-card-focus-indicator-width",
-    "--mod-card-footer-margin-block-start",
-    "--mod-card-footer-margin-inline-end",
-    "--mod-card-footer-margin-inline-start",
-    "--mod-card-footer-padding-block-end",
-    "--mod-card-footer-padding-block-start",
-    "--mod-card-horizontal-body-padding",
-    "--mod-card-horizontal-preview-padding",
-    "--mod-card-minimum-width",
-    "--mod-card-preview-background-color",
-    "--mod-card-preview-background-color-hover",
-    "--mod-card-preview-minimum-height",
-    "--mod-card-selected-background-color-rgb",
-    "--mod-card-selected-background-opacity",
-    "--mod-card-subtitle-padding-right",
-    "--mod-card-title-font-color",
-    "--mod-card-title-font-family",
-    "--mod-card-title-font-size",
-    "--mod-card-title-font-style",
-    "--mod-card-title-font-weight",
-    "--mod-card-title-line-height",
-    "--mod-card-title-padding-right",
-    "--mod-overlay-animation-duration"
-  ],
-  "component": [
-    "--spectrum-card-actions-border-radius",
-    "--spectrum-card-actions-drop-shadow-blur",
-    "--spectrum-card-actions-drop-shadow-color",
-    "--spectrum-card-actions-drop-shadow-x",
-    "--spectrum-card-actions-drop-shadow-y",
-    "--spectrum-card-actions-size",
-    "--spectrum-card-actions-spacing",
-    "--spectrum-card-background-color",
-    "--spectrum-card-body-font-color",
-    "--spectrum-card-body-font-family",
-    "--spectrum-card-body-font-size",
-    "--spectrum-card-body-font-style",
-    "--spectrum-card-body-font-weight",
-    "--spectrum-card-body-line-height",
-    "--spectrum-card-body-padding-block-start",
-    "--spectrum-card-body-spacing",
-    "--spectrum-card-border-color",
-    "--spectrum-card-border-color-hover",
-    "--spectrum-card-border-color-selected",
-    "--spectrum-card-border-width",
-    "--spectrum-card-content-margin-bottom",
-    "--spectrum-card-content-margin-top",
-    "--spectrum-card-corner-radius",
-    "--spectrum-card-divider-color",
-    "--spectrum-card-focus-indicator-color",
-    "--spectrum-card-focus-indicator-width",
-    "--spectrum-card-footer-padding-top",
-    "--spectrum-card-horizontal-body-padding",
-    "--spectrum-card-horizontal-preview-padding",
-    "--spectrum-card-minimum-width",
-    "--spectrum-card-preview-background-color",
-    "--spectrum-card-preview-background-color-hover",
-    "--spectrum-card-preview-minimum-height",
-    "--spectrum-card-selected-background-color-rgb",
-    "--spectrum-card-selected-background-opacity",
-    "--spectrum-card-selection-background-color",
-    "--spectrum-card-selection-background-size",
-    "--spectrum-card-subtitle-padding-right",
-    "--spectrum-card-title-font-color",
-    "--spectrum-card-title-font-family",
-    "--spectrum-card-title-font-size",
-    "--spectrum-card-title-font-style",
-    "--spectrum-card-title-font-weight",
-    "--spectrum-card-title-line-height",
-    "--spectrum-card-title-padding-right"
-  ],
-  "global": [
-    "--spectrum-animation-duration-100",
-    "--spectrum-background-base-color",
-    "--spectrum-background-layer-2-color",
-    "--spectrum-blue-700",
-    "--spectrum-body-color",
-    "--spectrum-body-line-height",
-    "--spectrum-body-sans-serif-font-style",
-    "--spectrum-body-sans-serif-font-weight",
-    "--spectrum-body-size-s",
-    "--spectrum-border-width-100",
-    "--spectrum-corner-radius-100",
-    "--spectrum-drop-shadow-blur",
-    "--spectrum-drop-shadow-color",
-    "--spectrum-drop-shadow-x",
-    "--spectrum-drop-shadow-y",
-    "--spectrum-focus-indicator-color",
-    "--spectrum-focus-indicator-thickness",
-    "--spectrum-gray-100",
-    "--spectrum-gray-200",
-    "--spectrum-heading-color",
-    "--spectrum-heading-line-height",
-    "--spectrum-heading-sans-serif-font-style",
-    "--spectrum-heading-sans-serif-font-weight",
-    "--spectrum-heading-size-xxs",
-    "--spectrum-sans-font-family-stack",
-    "--spectrum-spacing-100",
-    "--spectrum-spacing-200",
-    "--spectrum-spacing-300",
-    "--spectrum-spacing-400"
+    ".spectrum-Card:hover .spectrum-Card-quickActions",
+    ".spectrum-Card.is-drop-target",
+    ".spectrum-Card.is-focused .spectrum-Card-actions",
+    ".spectrum-Card.is-focused .spectrum-Card-quickActions",
+    ".spectrum-Card.is-selected",
+    ".spectrum-Card.is-selected .spectrum-Card-actions",
+    ".spectrum-Card.is-selected .spectrum-Card-quickActions",
+    ".spectrum-Card.is-selected:before",
+    ".spectrum-Card.spectrum-Card--gallery"
   ],
-  "passthroughs": [],
-  "high-contrast": []
+  "modifiers": {
+    "mod-card-border-color": {
+      "description": "Defined in `.spectrum-Card.is-selected`, `.spectrum-Card:hover`, `.spectrum-Card--horizontal:hover .spectrum-Card-preview`. <br/>Used by `--spectrum-card-border-color`. <br/>Defaults to `var(--spectrum-gray-100)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-card-border-color-hover": {
+      "description": "Defined in `.spectrum-Card--gallery`. <br/>Used by `--spectrum-card-border-color-hover`. <br/>Defaults to `var(--spectrum-gray-200)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-card-border-color-selected": {
+      "description": "Used by `--spectrum-card-border-color-selected`. <br/>Defaults to `var(--spectrum-blue-700)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-card-divider-color": {
+      "description": "Used by `--spectrum-card-divider-color`. <br/>Defaults to `var(--spectrum-gray-200)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-card-preview-background-color": {
+      "description": "Used by `--spectrum-card-preview-background-color`. <br/>Defaults to `var(--mod-card-background-color, var(--spectrum-gray-100))`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-card-background-color": {
+      "description": "Defined in `.spectrum-Card.is-drop-target`. <br/>Used by `--spectrum-card-preview-background-color`, `--spectrum-card-background-color`. <br/>Defaults to `var(--spectrum-background-layer-2-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-card-preview-background-color-hover": {
+      "description": "Used by `--spectrum-card-preview-background-color-hover`. <br/>Defaults to `var(--mod-card-background-color-hover, var(--spectrum-gray-200))`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-card-background-color-hover": {
+      "description": "Used by `--spectrum-card-preview-background-color-hover`. <br/>Defaults to `var(--spectrum-gray-200)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-card-body-spacing": {
+      "description": "Used by `--spectrum-card-body-spacing`. <br/>Defaults to `var(--spectrum-spacing-400)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-card-body-padding-block-start": {
+      "description": "Used by `--spectrum-card-body-padding-block-start`. <br/>Defaults to `var(--spectrum-spacing-300)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-card-title-padding-right": {
+      "description": "Used by `--spectrum-card-title-padding-right`. <br/>Defaults to `var(--spectrum-spacing-400)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-card-content-margin-top": {
+      "description": "Used by `--spectrum-card-content-margin-top`. <br/>Defaults to `var(--spectrum-spacing-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-card-content-margin-bottom": {
+      "description": "Used by `--spectrum-card-content-margin-bottom`. <br/>Defaults to `var(--spectrum-spacing-300)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-card-footer-padding-block-start": {
+      "description": "Used by `--spectrum-card-footer-padding-top`. <br/>Defaults to `var(--spectrum-spacing-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-card-subtitle-padding-right": {
+      "description": "Used by `--spectrum-card-subtitle-padding-right`. <br/>Defaults to `var(--spectrum-spacing-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-card-border-width": {
+      "description": "Used by `--spectrum-card-border-width`. <br/>Defaults to `var(--spectrum-border-width-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-card-corner-radius": {
+      "description": "Used by `--spectrum-card-corner-radius`. <br/>Defaults to `var(--spectrum-corner-radius-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-card-title-font-family": {
+      "description": "Used by `--spectrum-card-title-font-family`. <br/>Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-card-title-font-size": {
+      "description": "Used by `--spectrum-card-title-font-size`. <br/>Defaults to `var(--spectrum-heading-size-xxs)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-card-title-font-weight": {
+      "description": "Used by `--spectrum-card-title-font-weight`. <br/>Defaults to `var(--spectrum-heading-sans-serif-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-card-title-font-style": {
+      "description": "Used by `--spectrum-card-title-font-style`. <br/>Defaults to `var(--spectrum-heading-sans-serif-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-card-title-line-height": {
+      "description": "Used by `--spectrum-card-title-line-height`. <br/>Defaults to `var(--spectrum-heading-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-card-title-font-color": {
+      "description": "Used by `--spectrum-card-title-font-color`. <br/>Defaults to `var(--spectrum-heading-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-card-body-font-family": {
+      "description": "Used by `--spectrum-card-body-font-family`. <br/>Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-card-body-font-size": {
+      "description": "Used by `--spectrum-card-body-font-size`. <br/>Defaults to `var(--spectrum-body-size-s)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-card-body-font-weight": {
+      "description": "Used by `--spectrum-card-body-font-weight`. <br/>Defaults to `var(--spectrum-body-sans-serif-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-card-body-font-style": {
+      "description": "Used by `--spectrum-card-body-font-style`. <br/>Defaults to `var(--spectrum-body-sans-serif-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-card-body-line-height": {
+      "description": "Used by `--spectrum-card-body-line-height`. <br/>Defaults to `var(--spectrum-body-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-card-body-font-color": {
+      "description": "Used by `--spectrum-card-body-font-color`. <br/>Defaults to `var(--spectrum-body-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-card-actions-spacing": {
+      "description": "Used by `--spectrum-card-actions-spacing`. <br/>Defaults to `var(--spectrum-spacing-300)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-card-actions-size": {
+      "description": "Used by `--spectrum-card-actions-size`. <br/>Defaults to `var(--spectrum-card-selection-background-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-card-actions-border-radius": {
+      "description": "Used by `--spectrum-card-actions-border-radius`. <br/>Defaults to `var(--spectrum-corner-radius-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-card-actions-drop-shadow-color": {
+      "description": "Used by `--spectrum-card-actions-drop-shadow-color`. <br/>Defaults to `var(--spectrum-drop-shadow-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-card-actions-drop-shadow-x": {
+      "description": "Used by `--spectrum-card-actions-drop-shadow-x`. <br/>Defaults to `var(--spectrum-drop-shadow-x)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-card-actions-drop-shadow-y": {
+      "description": "Used by `--spectrum-card-actions-drop-shadow-y`. <br/>Defaults to `var(--spectrum-drop-shadow-y)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-card-actions-drop-shadow-blur": {
+      "description": "Used by `--spectrum-card-actions-drop-shadow-blur`. <br/>Defaults to `var(--spectrum-drop-shadow-blur)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-card-focus-indicator-color": {
+      "description": "Used by `--spectrum-card-focus-indicator-color`. <br/>Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-card-focus-indicator-width": {
+      "description": "Used by `--spectrum-card-focus-indicator-width`. <br/>Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-card-selected-background-opacity": {
+      "description": "Used by `--spectrum-card-selected-background-opacity`, `.spectrum-Card--gallery.is-selected .spectrum-Card-preview:before`. <br/>Defaults to `var(--spectrum-card-selected-background-opacity)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-card-horizontal-body-padding": {
+      "description": "Used by `--spectrum-card-horizontal-body-padding`. <br/>Defaults to `var(--spectrum-spacing-300)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-card-horizontal-preview-padding": {
+      "description": "Used by `--spectrum-card-horizontal-preview-padding`. <br/>Defaults to `var(--spectrum-spacing-200)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-card-minimum-width": {
+      "description": "Used by `.spectrum-Card`. <br/>Defaults to `var(--spectrum-card-minimum-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-card-background-color-selected": {
+      "description": "Used by `.spectrum-Card.is-selected:before`. <br/>Defaults to `var(--spectrum-card-selection-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-overlay-animation-duration": {
+      "description": "Used by `.spectrum-Card-quickActions`. <br/>Defaults to `var(--spectrum-animation-duration-100, 0.13s)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-card-preview-minimum-height": {
+      "description": "Used by `.spectrum-Card-coverPhoto`, `.spectrum-Card--gallery .spectrum-Card-preview`. <br/>Defaults to `var(--spectrum-card-preview-minimum-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-card-body-padding-inline-end": {
+      "description": "Used by `.spectrum-Card-body`. <br/>Defaults to `calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width))`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-card-body-padding-inline-start": {
+      "description": "Used by `.spectrum-Card-body`. <br/>Defaults to `calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width))`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-card-body-padding-block-end": {
+      "description": "Used by `.spectrum-Card-body`. <br/>Defaults to `calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width))`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-card-footer-margin-block-start": {
+      "description": "Used by `.spectrum-Card-footer`. <br/>Defaults to `calc((var(--spectrum-card-body-spacing) - var(--spectrum-card-content-margin-bottom)) * -1)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-card-footer-margin-inline-start": {
+      "description": "Used by `.spectrum-Card-footer`. <br/>Defaults to `var(--spectrum-card-body-spacing)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-card-footer-margin-inline-end": {
+      "description": "Used by `.spectrum-Card-footer`. <br/>Defaults to `var(--spectrum-card-body-spacing)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-card-footer-padding-block-end": {
+      "description": "Used by `.spectrum-Card-footer`. <br/>Defaults to `calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width))`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-card-animation-duration": {
+      "description": "Used by `.spectrum-Card--gallery .spectrum-Card-preview`. <br/>Defaults to `var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-animation-duration-100": {
+      "description": "Used by `.spectrum-Card--gallery .spectrum-Card-preview`. <br/>Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-card-selected-background-color-rgb": {
+      "description": "Used by `.spectrum-Card--gallery.is-selected .spectrum-Card-preview:before`. <br/>Defaults to `var(--spectrum-card-selected-background-color-rgb)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-card-border-color": {
+      "value": "var(--mod-card-border-color, var(--spectrum-gray-100))",
+      "description": "Defined in `.spectrum-Card`. <br/>Used by `.spectrum-Card`, `.spectrum-Card.is-drop-target`, `.spectrum-Card-coverPhoto`, `.spectrum-Card--horizontal .spectrum-Card-preview`. <br/>Defaults to `var(--mod-card-border-color, var(--spectrum-gray-100))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-card-border-color-hover": {
+      "value": "var(--mod-card-border-color-hover, var(--spectrum-gray-200))",
+      "description": "Defined in `.spectrum-Card`. <br/>Used by `--mod-card-border-color`. <br/>Defaults to `var(--mod-card-border-color-hover, var(--spectrum-gray-200))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-card-border-color-selected": {
+      "value": "var(--mod-card-border-color-selected, var(--spectrum-blue-700))",
+      "description": "Defined in `.spectrum-Card`. <br/>Used by `--mod-card-border-color`. <br/>Defaults to `var(--mod-card-border-color-selected, var(--spectrum-blue-700))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-card-divider-color": {
+      "value": "var(--mod-card-divider-color, var(--spectrum-gray-200))",
+      "description": "Defined in `.spectrum-Card`. <br/>Used by `.spectrum-Card-footer`. <br/>Defaults to `var(--mod-card-divider-color, var(--spectrum-gray-200))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-card-preview-background-color": {
+      "value": "var(--mod-card-preview-background-color, var(--mod-card-background-color, var(--spectrum-gray-100)))",
+      "description": "Defined in `.spectrum-Card`. <br/>Used by `.spectrum-Card-coverPhoto`, `.spectrum-Card--gallery .spectrum-Card-preview`, `.spectrum-Card--gallery.is-drop-target .spectrum-Card-preview`, `.spectrum-Card--horizontal .spectrum-Card-preview`. <br/>Defaults to `var(--mod-card-preview-background-color, var(--mod-card-background-color, var(--spectrum-gray-100)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-card-preview-background-color-hover": {
+      "value": "var(--mod-card-preview-background-color-hover, var(--mod-card-background-color-hover, var(--spectrum-gray-200)))",
+      "description": "Defined in `.spectrum-Card`. <br/>Used by `.spectrum-Card--gallery:hover .spectrum-Card-preview`. <br/>Defaults to `var(--mod-card-preview-background-color-hover, var(--mod-card-background-color-hover, var(--spectrum-gray-200)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-card-background-color": {
+      "value": "var(--mod-card-background-color, var(--spectrum-background-layer-2-color))",
+      "description": "Defined in `.spectrum-Card`. <br/>Used by `.spectrum-Card`. <br/>Defaults to `var(--mod-card-background-color, var(--spectrum-background-layer-2-color))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-card-body-spacing": {
+      "value": "var(--mod-card-body-spacing, var(--spectrum-spacing-400))",
+      "description": "Defined in `.spectrum-Card`. <br/>Used by `.spectrum-Card-body`, `.spectrum-Card-footer`. <br/>Defaults to `var(--mod-card-body-spacing, var(--spectrum-spacing-400))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-card-body-padding-block-start": {
+      "value": "var(--mod-card-body-padding-block-start, var(--spectrum-spacing-300))",
+      "description": "Defined in `.spectrum-Card`. <br/>Used by `.spectrum-Card-body`. <br/>Defaults to `var(--mod-card-body-padding-block-start, var(--spectrum-spacing-300))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-card-title-padding-right": {
+      "value": "var(--mod-card-title-padding-right, var(--spectrum-spacing-400))",
+      "description": "Defined in `.spectrum-Card`. <br/>Used by `.spectrum-Card-title`. <br/>Defaults to `var(--mod-card-title-padding-right, var(--spectrum-spacing-400))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-card-content-margin-top": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-Card`, `.spectrum-Card.spectrum-Card--gallery`. <br/>Used by `.spectrum-Card-content`, `.spectrum-Card--gallery .spectrum-Card-body`. <br/>Defaults to `var(--spectrum-spacing-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-card-content-margin-bottom": {
+      "value": "var(--mod-card-content-margin-bottom, var(--spectrum-spacing-300))",
+      "description": "Defined in `.spectrum-Card`. <br/>Used by `.spectrum-Card-footer`. <br/>Defaults to `var(--mod-card-content-margin-bottom, var(--spectrum-spacing-300))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-card-footer-padding-top": {
+      "value": "var(--mod-card-footer-padding-block-start, var(--spectrum-spacing-100))",
+      "description": "Defined in `.spectrum-Card`. <br/>Used by `.spectrum-Card-footer`. <br/>Defaults to `var(--mod-card-footer-padding-block-start, var(--spectrum-spacing-100))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-card-subtitle-padding-right": {
+      "value": "var(--mod-card-subtitle-padding-right, var(--spectrum-spacing-100))",
+      "description": "Defined in `.spectrum-Card`. <br/>Used by `.spectrum-Card-subtitle`, `.spectrum-Card-subtitle + .spectrum-Card-description:before`. <br/>Defaults to `var(--mod-card-subtitle-padding-right, var(--spectrum-spacing-100))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-card-border-width": {
+      "value": "var(--mod-card-border-width, var(--spectrum-border-width-100))",
+      "description": "Defined in `.spectrum-Card`. <br/>Used by `.spectrum-Card`, `.spectrum-Card-quickActions`, `.spectrum-Card-coverPhoto`, `.spectrum-Card-body`, `.spectrum-Card-footer`, `.spectrum-Card--horizontal .spectrum-Card-preview`. <br/>Defaults to `var(--mod-card-border-width, var(--spectrum-border-width-100))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-card-corner-radius": {
+      "value": "var(--mod-card-corner-radius, var(--spectrum-corner-radius-100))",
+      "description": "Defined in `.spectrum-Card`. <br/>Used by `.spectrum-Card`, `.spectrum-Card:after`, `.spectrum-Card:focus-visible .spectrum-Card-coverPhoto, .spectrum-Card:focus-visible .spectrum-Card-preview`, `.spectrum-Card-coverPhoto`, `.spectrum-Card-preview`, `.spectrum-Card--gallery .spectrum-Card-preview`, `.spectrum-Card--gallery .spectrum-Card-preview:after`, `.spectrum-Card--horizontal .spectrum-Card-preview`. <br/>Defaults to `var(--mod-card-corner-radius, var(--spectrum-corner-radius-100))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-card-title-font-family": {
+      "value": "var(--mod-card-title-font-family, var(--spectrum-sans-font-family-stack))",
+      "description": "Defined in `.spectrum-Card`. <br/>Used by `.spectrum-Card-title`. <br/>Defaults to `var(--mod-card-title-font-family, var(--spectrum-sans-font-family-stack))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-card-title-font-size": {
+      "value": "var(--mod-card-title-font-size, var(--spectrum-heading-size-xxs))",
+      "description": "Defined in `.spectrum-Card`. <br/>Used by `.spectrum-Card-title`. <br/>Defaults to `var(--mod-card-title-font-size, var(--spectrum-heading-size-xxs))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-card-title-font-weight": {
+      "value": "var(--mod-card-title-font-weight, var(--spectrum-heading-sans-serif-font-weight))",
+      "description": "Defined in `.spectrum-Card`. <br/>Used by `.spectrum-Card-title`. <br/>Defaults to `var(--mod-card-title-font-weight, var(--spectrum-heading-sans-serif-font-weight))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-card-title-font-style": {
+      "value": "var(--mod-card-title-font-style, var(--spectrum-heading-sans-serif-font-style))",
+      "description": "Defined in `.spectrum-Card`. <br/>Used by `.spectrum-Card-title`. <br/>Defaults to `var(--mod-card-title-font-style, var(--spectrum-heading-sans-serif-font-style))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-card-title-line-height": {
+      "value": "var(--mod-card-title-line-height, var(--spectrum-heading-line-height))",
+      "description": "Defined in `.spectrum-Card`. <br/>Used by `.spectrum-Card-title`. <br/>Defaults to `var(--mod-card-title-line-height, var(--spectrum-heading-line-height))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-card-title-font-color": {
+      "value": "var(--mod-card-title-font-color, var(--spectrum-heading-color))",
+      "description": "Defined in `.spectrum-Card`. <br/>Used by `.spectrum-Card-title`, `.spectrum-Card-subtitle`. <br/>Defaults to `var(--mod-card-title-font-color, var(--spectrum-heading-color))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-card-body-font-family": {
+      "value": "var(--mod-card-body-font-family, var(--spectrum-sans-font-family-stack))",
+      "description": "Defined in `.spectrum-Card`. <br/>Used by `.spectrum-Card-description`. <br/>Defaults to `var(--mod-card-body-font-family, var(--spectrum-sans-font-family-stack))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-card-body-font-size": {
+      "value": "var(--mod-card-body-font-size, var(--spectrum-body-size-s))",
+      "description": "Defined in `.spectrum-Card`. <br/>Used by `.spectrum-Card-description`. <br/>Defaults to `var(--mod-card-body-font-size, var(--spectrum-body-size-s))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-card-body-font-weight": {
+      "value": "var(--mod-card-body-font-weight, var(--spectrum-body-sans-serif-font-weight))",
+      "description": "Defined in `.spectrum-Card`. <br/>Used by `.spectrum-Card-description`. <br/>Defaults to `var(--mod-card-body-font-weight, var(--spectrum-body-sans-serif-font-weight))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-card-body-font-style": {
+      "value": "var(--mod-card-body-font-style, var(--spectrum-body-sans-serif-font-style))",
+      "description": "Defined in `.spectrum-Card`. <br/>Used by `.spectrum-Card-description`. <br/>Defaults to `var(--mod-card-body-font-style, var(--spectrum-body-sans-serif-font-style))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-card-body-line-height": {
+      "value": "var(--mod-card-body-line-height, var(--spectrum-body-line-height))",
+      "description": "Defined in `.spectrum-Card`. <br/>Used by `.spectrum-Card-description, .spectrum-Card-footer`. <br/>Defaults to `var(--mod-card-body-line-height, var(--spectrum-body-line-height))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-card-body-font-color": {
+      "value": "var(--mod-card-body-font-color, var(--spectrum-body-color))",
+      "description": "Defined in `.spectrum-Card`. <br/>Used by `.spectrum-Card-preview`, `.spectrum-Card-description, .spectrum-Card-footer`. <br/>Defaults to `var(--mod-card-body-font-color, var(--spectrum-body-color))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-card-actions-spacing": {
+      "value": "var(--mod-card-actions-spacing, var(--spectrum-spacing-300))",
+      "description": "Defined in `.spectrum-Card`. <br/>Used by `.spectrum-Card-quickActions`, `.spectrum-Card-actions`. <br/>Defaults to `var(--mod-card-actions-spacing, var(--spectrum-spacing-300))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-card-actions-size": {
+      "value": "var(--mod-card-actions-size, var(--spectrum-card-selection-background-size))",
+      "description": "Defined in `.spectrum-Card`. <br/>Used by `.spectrum-Card-quickActions`. <br/>Defaults to `var(--mod-card-actions-size, var(--spectrum-card-selection-background-size))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-card-selection-background-size": {
+      "value": "40px",
+      "description": "Used by `--spectrum-card-actions-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-card-actions-border-radius": {
+      "value": "var(--mod-card-actions-border-radius, var(--spectrum-corner-radius-100))",
+      "description": "Defined in `.spectrum-Card`. <br/>Used by `.spectrum-Card-quickActions`. <br/>Defaults to `var(--mod-card-actions-border-radius, var(--spectrum-corner-radius-100))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-card-actions-drop-shadow-color": {
+      "value": "var(--mod-card-actions-drop-shadow-color, var(--spectrum-drop-shadow-color))",
+      "description": "Defined in `.spectrum-Card`. <br/>Used by `.spectrum-Card-quickActions`. <br/>Defaults to `var(--mod-card-actions-drop-shadow-color, var(--spectrum-drop-shadow-color))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-card-actions-drop-shadow-x": {
+      "value": "var(--mod-card-actions-drop-shadow-x, var(--spectrum-drop-shadow-x))",
+      "description": "Defined in `.spectrum-Card`. <br/>Used by `.spectrum-Card-quickActions`. <br/>Defaults to `var(--mod-card-actions-drop-shadow-x, var(--spectrum-drop-shadow-x))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-card-actions-drop-shadow-y": {
+      "value": "var(--mod-card-actions-drop-shadow-y, var(--spectrum-drop-shadow-y))",
+      "description": "Defined in `.spectrum-Card`. <br/>Used by `.spectrum-Card-quickActions`. <br/>Defaults to `var(--mod-card-actions-drop-shadow-y, var(--spectrum-drop-shadow-y))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-card-actions-drop-shadow-blur": {
+      "value": "var(--mod-card-actions-drop-shadow-blur, var(--spectrum-drop-shadow-blur))",
+      "description": "Defined in `.spectrum-Card`. <br/>Used by `.spectrum-Card-quickActions`. <br/>Defaults to `var(--mod-card-actions-drop-shadow-blur, var(--spectrum-drop-shadow-blur))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-card-focus-indicator-color": {
+      "value": "var(--mod-card-focus-indicator-color, var(--spectrum-focus-indicator-color))",
+      "description": "Defined in `.spectrum-Card`. <br/>Used by `.spectrum-Card:focus-visible:after`, `.spectrum-Card--gallery.is-drop-target .spectrum-Card-preview:before`. <br/>Defaults to `var(--mod-card-focus-indicator-color, var(--spectrum-focus-indicator-color))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-card-focus-indicator-width": {
+      "value": "var(--mod-card-focus-indicator-width, var(--spectrum-focus-indicator-thickness))",
+      "description": "Defined in `.spectrum-Card`. <br/>Used by `.spectrum-Card:after`, `.spectrum-Card:focus-visible:after`, `.spectrum-Card:focus-visible .spectrum-Card-coverPhoto, .spectrum-Card:focus-visible .spectrum-Card-preview`, `.spectrum-Card--gallery .spectrum-Card-preview:after`. <br/>Defaults to `var(--mod-card-focus-indicator-width, var(--spectrum-focus-indicator-thickness))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-card-selected-background-opacity": {
+      "value": "var(--mod-card-selected-background-opacity, 0.1)",
+      "description": "Defined in `.spectrum-Card`. <br/>Used by `.spectrum-Card--gallery.is-selected .spectrum-Card-preview:before`. <br/>Defaults to `var(--mod-card-selected-background-opacity, 0.1)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-card-horizontal-body-padding": {
+      "value": "var(--mod-card-horizontal-body-padding, var(--spectrum-spacing-300))",
+      "description": "Defined in `.spectrum-Card`. <br/>Used by `.spectrum-Card--horizontal .spectrum-Card-body`. <br/>Defaults to `var(--mod-card-horizontal-body-padding, var(--spectrum-spacing-300))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-card-horizontal-preview-padding": {
+      "value": "var(--mod-card-horizontal-preview-padding, var(--spectrum-spacing-200))",
+      "description": "Defined in `.spectrum-Card`. <br/>Used by `.spectrum-Card--horizontal .spectrum-Card-preview`. <br/>Defaults to `var(--mod-card-horizontal-preview-padding, var(--spectrum-spacing-200))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-card-minimum-width": {
+      "value": "100px",
+      "description": "Used by `.spectrum-Card`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-card-selection-background-color": {
+      "value": "rgba(0, 0, 0, 0.56)",
+      "description": "Used by `.spectrum-Card.is-selected:before`, `.spectrum-Card-quickActions`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-card-preview-minimum-height": {
+      "value": "130px",
+      "description": "Used by `.spectrum-Card-coverPhoto`, `.spectrum-Card--gallery .spectrum-Card-preview`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-card-selected-background-color-rgb": {
+      "description": "Used by `.spectrum-Card--gallery.is-selected .spectrum-Card-preview:before`.",
+      "control": "color",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-gray-100": {
+      "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+      "description": "Used by `--spectrum-card-border-color`, `--spectrum-card-preview-background-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-200": {
+      "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+      "description": "Used by `--spectrum-card-border-color-hover`, `--spectrum-card-divider-color`, `--spectrum-card-preview-background-color-hover`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-blue-700": {
+      "value": "light-dark(rgb(93, 137, 255), rgb(52, 91, 248))",
+      "description": "Used by `--spectrum-card-border-color-selected`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-background-layer-2-color": {
+      "value": "var(--spectrum-gray-25)",
+      "description": "Used by `--spectrum-card-background-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-spacing-400": {
+      "value": "24px",
+      "description": "Used by `--spectrum-card-body-spacing`, `--spectrum-card-title-padding-right`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-300": {
+      "value": "16px",
+      "description": "Used by `--spectrum-card-body-padding-block-start`, `--spectrum-card-content-margin-bottom`, `--spectrum-card-actions-spacing`, `--spectrum-card-horizontal-body-padding`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-100": {
+      "value": "8px",
+      "description": "Used by `--spectrum-card-content-margin-top`, `--spectrum-card-footer-padding-top`, `--spectrum-card-subtitle-padding-right`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-border-width-100": {
+      "value": "1px",
+      "description": "Used by `--spectrum-card-border-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-100": {
+      "value": "4px",
+      "description": "Used by `--spectrum-card-corner-radius`, `--spectrum-card-actions-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-sans-font-family-stack": {
+      "description": "Used by `--spectrum-card-title-font-family`, `--spectrum-card-body-font-family`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-size-xxs": {
+      "value": "var(--spectrum-font-size-100)",
+      "description": "Used by `--spectrum-card-title-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-sans-serif-font-weight": {
+      "value": "800",
+      "description": "Used by `--spectrum-card-title-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-sans-serif-font-style": {
+      "value": "normal",
+      "description": "Used by `--spectrum-card-title-font-style`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-line-height": {
+      "value": "1.3",
+      "description": "Used by `--spectrum-card-title-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-color": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-card-title-font-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-body-size-s": {
+      "value": "var(--spectrum-font-size-100)",
+      "description": "Used by `--spectrum-card-body-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-sans-serif-font-weight": {
+      "value": "400",
+      "description": "Used by `--spectrum-card-body-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-sans-serif-font-style": {
+      "value": "normal",
+      "description": "Used by `--spectrum-card-body-font-style`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-line-height": {
+      "value": "1.5",
+      "description": "Used by `--spectrum-card-body-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-color": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-card-body-font-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-drop-shadow-color": {
+      "value": "var(--spectrum-drop-shadow-color-100)",
+      "description": "Used by `--spectrum-card-actions-drop-shadow-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-drop-shadow-x": {
+      "value": "0px",
+      "description": "Used by `--spectrum-card-actions-drop-shadow-x`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-drop-shadow-y": {
+      "value": "1px",
+      "description": "Used by `--spectrum-card-actions-drop-shadow-y`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-drop-shadow-blur": {
+      "value": "6px",
+      "description": "Used by `--spectrum-card-actions-drop-shadow-blur`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Used by `--spectrum-card-focus-indicator-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Used by `--spectrum-card-focus-indicator-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-200": {
+      "value": "12px",
+      "description": "Used by `--spectrum-card-horizontal-preview-padding`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-background-base-color": {
+      "value": "var(--spectrum-gray-25)",
+      "description": "Used by `--mod-card-background-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-animation-duration-100": {
+      "description": "Used by `.spectrum-Card-quickActions`, `.spectrum-Card--gallery .spectrum-Card-preview`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {}
 }
diff --git a/components/card/stories/card.stories.js b/components/card/stories/card.stories.js
index 5afad0c1c20..dc5564f5777 100644
--- a/components/card/stories/card.stories.js
+++ b/components/card/stories/card.stories.js
@@ -2,11 +2,13 @@ import { default as ActionButton } from "@spectrum-css/actionbutton/stories/acti
 import { default as Checkbox } from "@spectrum-css/checkbox/stories/checkbox.stories.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isFocused, isSelected } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { CardGroup } from "./card.test.js";
 import { Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * A card represents a rectangular space to contain text or images. Cards are typically used to encapsulate units of a data set, such as a gallery of image/caption pairs.
  */
@@ -125,6 +127,10 @@ export default {
 		},
 		packageJson,
 		metadata,
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 };
 
diff --git a/components/checkbox/dist/metadata.json b/components/checkbox/dist/metadata.json
index daf35c48fa3..452e693242e 100644
--- a/components/checkbox/dist/metadata.json
+++ b/components/checkbox/dist/metadata.json
@@ -21,13 +21,24 @@
     ".spectrum-Checkbox .spectrum-Checkbox-input:hover:disabled + .spectrum-Checkbox-box:before",
     ".spectrum-Checkbox .spectrum-Checkbox-label",
     ".spectrum-Checkbox .spectrum-Checkbox-partialCheckmark",
+    ".spectrum-Checkbox--emphasized:not(.is-invalid) .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before",
     ".spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-box:before",
     ".spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
     ".spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-box:before",
     ".spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
     ".spectrum-Checkbox--emphasized.is-indeterminate:not(.is-invalid) .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before",
-    ".spectrum-Checkbox--emphasized:not(.is-invalid) .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before",
     ".spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box",
+    ".spectrum-Checkbox:active .spectrum-Checkbox-box:before",
+    ".spectrum-Checkbox:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
+    ".spectrum-Checkbox:active .spectrum-Checkbox-label",
+    ".spectrum-Checkbox:hover .spectrum-Checkbox-box:before",
+    ".spectrum-Checkbox:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
+    ".spectrum-Checkbox:hover .spectrum-Checkbox-label",
+    ".spectrum-Checkbox:lang(ja)",
+    ".spectrum-Checkbox:lang(ko)",
+    ".spectrum-Checkbox:lang(zh)",
+    ".spectrum-Checkbox:not(.is-readOnly) .spectrum-Checkbox-input:active:not(:disabled) + .spectrum-Checkbox-box",
+    ".spectrum-Checkbox:not(.is-readOnly):active .spectrum-Checkbox-input:not(:disabled) + .spectrum-Checkbox-box",
     ".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box .spectrum-Checkbox-checkmark",
     ".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box .spectrum-Checkbox-partialCheckmark",
     ".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box:before",
@@ -43,164 +54,799 @@
     ".spectrum-Checkbox.spectrum-Checkbox--emphasized",
     ".spectrum-Checkbox.spectrum-Checkbox--sizeL",
     ".spectrum-Checkbox.spectrum-Checkbox--sizeS",
-    ".spectrum-Checkbox.spectrum-Checkbox--sizeXL",
-    ".spectrum-Checkbox:active .spectrum-Checkbox-box:before",
-    ".spectrum-Checkbox:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
-    ".spectrum-Checkbox:active .spectrum-Checkbox-label",
-    ".spectrum-Checkbox:hover .spectrum-Checkbox-box:before",
-    ".spectrum-Checkbox:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
-    ".spectrum-Checkbox:hover .spectrum-Checkbox-label",
-    ".spectrum-Checkbox:lang(ja)",
-    ".spectrum-Checkbox:lang(ko)",
-    ".spectrum-Checkbox:lang(zh)",
-    ".spectrum-Checkbox:not(.is-readOnly) .spectrum-Checkbox-input:active:not(:disabled) + .spectrum-Checkbox-box",
-    ".spectrum-Checkbox:not(.is-readOnly):active .spectrum-Checkbox-input:not(:disabled) + .spectrum-Checkbox-box"
-  ],
-  "modifiers": [
-    "--mod-checkbox-animation-duration",
-    "--mod-checkbox-border-width",
-    "--mod-checkbox-bottom-to-text",
-    "--mod-checkbox-checkmark-color",
-    "--mod-checkbox-content-color-default",
-    "--mod-checkbox-content-color-disabled",
-    "--mod-checkbox-content-color-down",
-    "--mod-checkbox-content-color-focus",
-    "--mod-checkbox-content-color-hover",
-    "--mod-checkbox-control-color-default",
-    "--mod-checkbox-control-color-disabled",
-    "--mod-checkbox-control-color-down",
-    "--mod-checkbox-control-color-focus",
-    "--mod-checkbox-control-color-hover",
-    "--mod-checkbox-control-corner-radius",
-    "--mod-checkbox-control-selected-color-default",
-    "--mod-checkbox-control-selected-color-down",
-    "--mod-checkbox-control-selected-color-hover",
-    "--mod-checkbox-control-size",
-    "--mod-checkbox-focus-indicator-color",
-    "--mod-checkbox-focus-indicator-gap",
-    "--mod-checkbox-focus-indicator-thickness",
-    "--mod-checkbox-font-size",
-    "--mod-checkbox-height",
-    "--mod-checkbox-line-height",
-    "--mod-checkbox-line-height-cjk",
-    "--mod-checkbox-margin-block",
-    "--mod-checkbox-selected-border-width",
-    "--mod-checkbox-text-to-control",
-    "--mod-checkbox-top-to-text",
-    "--mod-focus-indicator-thickness"
-  ],
-  "component": [
-    "--spectrum-checkbox-animation-duration",
-    "--spectrum-checkbox-background-color",
-    "--spectrum-checkbox-border-width",
-    "--spectrum-checkbox-bottom-to-text",
-    "--spectrum-checkbox-checkmark-color",
-    "--spectrum-checkbox-content-color-default",
-    "--spectrum-checkbox-content-color-down",
-    "--spectrum-checkbox-content-color-focus",
-    "--spectrum-checkbox-content-color-hover",
-    "--spectrum-checkbox-control-color-default",
-    "--spectrum-checkbox-control-color-disabled",
-    "--spectrum-checkbox-control-color-down",
-    "--spectrum-checkbox-control-color-focus",
-    "--spectrum-checkbox-control-color-hover",
-    "--spectrum-checkbox-control-corner-radius",
-    "--spectrum-checkbox-control-selected-color-default",
-    "--spectrum-checkbox-control-selected-color-down",
-    "--spectrum-checkbox-control-selected-color-hover",
-    "--spectrum-checkbox-control-size",
-    "--spectrum-checkbox-control-size-extra-large",
-    "--spectrum-checkbox-control-size-large",
-    "--spectrum-checkbox-control-size-medium",
-    "--spectrum-checkbox-control-size-small",
-    "--spectrum-checkbox-emphasized-color-default",
-    "--spectrum-checkbox-emphasized-color-down",
-    "--spectrum-checkbox-emphasized-color-focus",
-    "--spectrum-checkbox-emphasized-color-hover",
-    "--spectrum-checkbox-focus-indicator-color",
-    "--spectrum-checkbox-focus-indicator-gap",
-    "--spectrum-checkbox-focus-indicator-thickness",
-    "--spectrum-checkbox-font-size",
-    "--spectrum-checkbox-height",
-    "--spectrum-checkbox-invalid-color-default",
-    "--spectrum-checkbox-invalid-color-down",
-    "--spectrum-checkbox-invalid-color-focus",
-    "--spectrum-checkbox-invalid-color-hover",
-    "--spectrum-checkbox-line-height",
-    "--spectrum-checkbox-line-height-cjk",
-    "--spectrum-checkbox-selected-border-width",
-    "--spectrum-checkbox-text-font-style",
-    "--spectrum-checkbox-text-font-weight",
-    "--spectrum-checkbox-text-to-control",
-    "--spectrum-checkbox-top-to-control",
-    "--spectrum-checkbox-top-to-control-extra-large",
-    "--spectrum-checkbox-top-to-control-large",
-    "--spectrum-checkbox-top-to-control-medium",
-    "--spectrum-checkbox-top-to-control-small",
-    "--spectrum-checkbox-top-to-text"
-  ],
-  "global": [
-    "--spectrum-accent-content-color-default",
-    "--spectrum-accent-content-color-down",
-    "--spectrum-accent-content-color-hover",
-    "--spectrum-accent-content-color-key-focus",
-    "--spectrum-animation-duration-100",
-    "--spectrum-border-width-200",
-    "--spectrum-cjk-line-height-100",
-    "--spectrum-component-bottom-to-text-100",
-    "--spectrum-component-bottom-to-text-200",
-    "--spectrum-component-bottom-to-text-300",
-    "--spectrum-component-bottom-to-text-75",
-    "--spectrum-component-height-100",
-    "--spectrum-component-height-200",
-    "--spectrum-component-height-300",
-    "--spectrum-component-height-75",
-    "--spectrum-component-size-difference-down",
-    "--spectrum-component-size-minimum-perspective-down",
-    "--spectrum-component-top-to-text-100",
-    "--spectrum-component-top-to-text-200",
-    "--spectrum-component-top-to-text-300",
-    "--spectrum-component-top-to-text-75",
-    "--spectrum-corner-radius-small-size-extra-large",
-    "--spectrum-corner-radius-small-size-large",
-    "--spectrum-corner-radius-small-size-medium",
-    "--spectrum-corner-radius-small-size-small",
-    "--spectrum-default-font-style",
-    "--spectrum-disabled-content-color",
-    "--spectrum-focus-indicator-color",
-    "--spectrum-focus-indicator-gap",
-    "--spectrum-focus-indicator-thickness",
-    "--spectrum-font-size-100",
-    "--spectrum-font-size-200",
-    "--spectrum-font-size-300",
-    "--spectrum-font-size-75",
-    "--spectrum-gray-25",
-    "--spectrum-line-height-100",
-    "--spectrum-negative-color-1000",
-    "--spectrum-negative-color-900",
-    "--spectrum-neutral-content-color-default",
-    "--spectrum-neutral-content-color-down",
-    "--spectrum-neutral-content-color-hover",
-    "--spectrum-neutral-content-color-key-focus",
-    "--spectrum-regular-font-weight",
-    "--spectrum-text-to-control-100",
-    "--spectrum-text-to-control-200",
-    "--spectrum-text-to-control-300",
-    "--spectrum-text-to-control-75"
+    ".spectrum-Checkbox.spectrum-Checkbox--sizeXL"
   ],
-  "passthroughs": [],
-  "high-contrast": [
-    "--highcontrast-checkbox-background-color-default",
-    "--highcontrast-checkbox-color-default",
-    "--highcontrast-checkbox-color-focus",
-    "--highcontrast-checkbox-content-color-default",
-    "--highcontrast-checkbox-content-color-down",
-    "--highcontrast-checkbox-content-color-focus",
-    "--highcontrast-checkbox-content-color-hover",
-    "--highcontrast-checkbox-disabled-color-default",
-    "--highcontrast-checkbox-focus-indicator-color",
-    "--highcontrast-checkbox-highlight-color-default",
-    "--highcontrast-checkbox-highlight-color-down",
-    "--highcontrast-checkbox-highlight-color-hover"
-  ]
+  "modifiers": {
+    "mod-checkbox-line-height": {
+      "description": "Defined in `.spectrum-Checkbox:lang(ja), .spectrum-Checkbox:lang(ko), .spectrum-Checkbox:lang(zh)`. <br/>Used by `.spectrum-Checkbox .spectrum-Checkbox-label`. <br/>Defaults to `var(--spectrum-checkbox-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-checkbox-line-height-cjk": {
+      "description": "Used by `--mod-checkbox-line-height`. <br/>Defaults to `var(--spectrum-checkbox-line-height-cjk)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-checkbox-content-color-default": {
+      "description": "Used by `.spectrum-Checkbox`. <br/>Defaults to `var(--spectrum-checkbox-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-checkbox-height": {
+      "description": "Used by `.spectrum-Checkbox`. <br/>Defaults to `var(--spectrum-checkbox-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-checkbox-control-color-down": {
+      "description": "Used by `.spectrum-Checkbox:active .spectrum-Checkbox-box:before`. <br/>Defaults to `var(--spectrum-checkbox-control-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-checkbox-control-selected-color-down": {
+      "description": "Used by `.spectrum-Checkbox:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`. <br/>Defaults to `var(--spectrum-checkbox-control-selected-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-checkbox-content-color-down": {
+      "description": "Used by `.spectrum-Checkbox:active .spectrum-Checkbox-label`. <br/>Defaults to `var(--spectrum-checkbox-content-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-checkbox-animation-duration": {
+      "description": "Used by `.spectrum-Checkbox .spectrum-Checkbox-checkmark, .spectrum-Checkbox .spectrum-Checkbox-partialCheckmark`, `.spectrum-Checkbox .spectrum-Checkbox-label`, `.spectrum-Checkbox .spectrum-Checkbox-box:before`, `.spectrum-Checkbox .spectrum-Checkbox-box:after`. <br/>Defaults to `var(--spectrum-checkbox-animation-duration)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-checkbox-text-to-control": {
+      "description": "Used by `.spectrum-Checkbox .spectrum-Checkbox-label`. <br/>Defaults to `var(--spectrum-checkbox-text-to-control)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-checkbox-top-to-text": {
+      "description": "Used by `.spectrum-Checkbox .spectrum-Checkbox-label`. <br/>Defaults to `var(--spectrum-checkbox-top-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-checkbox-bottom-to-text": {
+      "description": "Used by `.spectrum-Checkbox .spectrum-Checkbox-label`. <br/>Defaults to `var(--spectrum-checkbox-bottom-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-checkbox-font-size": {
+      "description": "Used by `.spectrum-Checkbox .spectrum-Checkbox-label`. <br/>Defaults to `var(--spectrum-checkbox-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-checkbox-control-color-default": {
+      "description": "Used by `.spectrum-Checkbox .spectrum-Checkbox-input`, `.spectrum-Checkbox .spectrum-Checkbox-box:before`. <br/>Defaults to `var(--spectrum-checkbox-control-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-checkbox-control-selected-color-default": {
+      "description": "Used by `.spectrum-Checkbox .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`. <br/>Defaults to `var(--spectrum-checkbox-control-selected-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-checkbox-checkmark-color": {
+      "description": "Used by `.spectrum-Checkbox .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`. <br/>Defaults to `var(--spectrum-checkbox-checkmark-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-checkbox-selected-border-width": {
+      "description": "Used by `.spectrum-Checkbox .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`. <br/>Defaults to `var(--spectrum-checkbox-selected-border-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-checkbox-control-color-focus": {
+      "description": "Defined in `.spectrum-Checkbox--emphasized:not(.is-invalid) .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before`. <br/>Used by `.spectrum-Checkbox .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before`. <br/>Defaults to `var(--spectrum-checkbox-control-color-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-checkbox-focus-indicator-thickness": {
+      "description": "Used by `.spectrum-Checkbox .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:after`. <br/>Defaults to `var(--spectrum-checkbox-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-checkbox-focus-indicator-color": {
+      "description": "Used by `.spectrum-Checkbox .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:after`, `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box`. <br/>Defaults to `var(--spectrum-checkbox-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-checkbox-focus-indicator-gap": {
+      "description": "Used by `.spectrum-Checkbox .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:after`, `.spectrum-Checkbox .spectrum-Checkbox-box:after`, `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box`. <br/>Defaults to `var(--spectrum-checkbox-focus-indicator-gap)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-checkbox-content-color-focus": {
+      "description": "Used by `.spectrum-Checkbox .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-label`. <br/>Defaults to `var(--spectrum-checkbox-content-color-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-checkbox-margin-block": {
+      "description": "Used by `.spectrum-Checkbox .spectrum-Checkbox-box`. <br/>Defaults to `var(--spectrum-checkbox-top-to-control)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-checkbox-control-size": {
+      "description": "Used by `.spectrum-Checkbox .spectrum-Checkbox-box, .spectrum-Checkbox .spectrum-Checkbox-box:before`. <br/>Defaults to `var(--spectrum-checkbox-control-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-checkbox-control-corner-radius": {
+      "description": "Used by `.spectrum-Checkbox .spectrum-Checkbox-box:before`, `.spectrum-Checkbox .spectrum-Checkbox-box:after`. <br/>Defaults to `var(--spectrum-checkbox-control-corner-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-checkbox-border-width": {
+      "description": "Used by `.spectrum-Checkbox .spectrum-Checkbox-box:before`. <br/>Defaults to `var(--spectrum-checkbox-border-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-checkbox-control-color-disabled": {
+      "description": "Used by `.spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before, .spectrum-Checkbox .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox .spectrum-Checkbox-input:checked:hover:disabled + .spectrum-Checkbox-box:before, .spectrum-Checkbox .spectrum-Checkbox-input:hover:disabled + .spectrum-Checkbox-box:before`. <br/>Defaults to `var(--spectrum-checkbox-control-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-checkbox-control-color-hover": {
+      "description": "Used by `.spectrum-Checkbox:hover .spectrum-Checkbox-box:before`. <br/>Defaults to `var(--spectrum-checkbox-control-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-checkbox-control-selected-color-hover": {
+      "description": "Used by `.spectrum-Checkbox:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`. <br/>Defaults to `var(--spectrum-checkbox-control-selected-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-checkbox-content-color-hover": {
+      "description": "Used by `.spectrum-Checkbox:hover .spectrum-Checkbox-label`. <br/>Defaults to `var(--spectrum-checkbox-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-checkbox-content-color-disabled": {
+      "description": "Used by `.spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled ~ .spectrum-Checkbox-label, .spectrum-Checkbox .spectrum-Checkbox-input:disabled ~ .spectrum-Checkbox-label`. <br/>Defaults to `var(--spectrum-checkbox-control-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-focus-indicator-thickness": {
+      "description": "Used by `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box`. <br/>Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-checkbox-checkmark-color": {
+      "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+      "description": "Defined in `.spectrum-Checkbox`. <br/>Used by `.spectrum-Checkbox .spectrum-Checkbox-checkmark, .spectrum-Checkbox .spectrum-Checkbox-partialCheckmark`, `.spectrum-Checkbox .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`. <br/>Defaults to `var(--spectrum-gray-25)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-checkbox-background-color": {
+      "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+      "description": "Defined in `.spectrum-Checkbox`. <br/>Used by `.spectrum-Checkbox .spectrum-Checkbox-box:before`, `.spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before, .spectrum-Checkbox .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before`. <br/>Defaults to `var(--spectrum-gray-25)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-checkbox-content-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-Checkbox`. <br/>Used by `.spectrum-Checkbox`. <br/>Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-checkbox-content-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Checkbox`. <br/>Used by `.spectrum-Checkbox:hover .spectrum-Checkbox-label`. <br/>Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-checkbox-content-color-down": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Checkbox`. <br/>Used by `.spectrum-Checkbox:active .spectrum-Checkbox-label`. <br/>Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-checkbox-content-color-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Checkbox`. <br/>Used by `.spectrum-Checkbox .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-label`. <br/>Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-checkbox-control-color-default": {
+      "value": "var(--spectrum-checkbox-invalid-color-default)",
+      "description": "Defined in `.spectrum-Checkbox`, `.spectrum-Checkbox.is-invalid`. <br/>Used by `.spectrum-Checkbox .spectrum-Checkbox-input`, `.spectrum-Checkbox .spectrum-Checkbox-box:before`. <br/>Defaults to `var(--spectrum-checkbox-invalid-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-checkbox-control-color-hover": {
+      "value": "var(--spectrum-checkbox-invalid-color-hover)",
+      "description": "Defined in `.spectrum-Checkbox`, `.spectrum-Checkbox.is-invalid`. <br/>Used by `.spectrum-Checkbox:hover .spectrum-Checkbox-box:before`. <br/>Defaults to `var(--spectrum-checkbox-invalid-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-checkbox-control-color-down": {
+      "value": "var(--spectrum-checkbox-invalid-color-down)",
+      "description": "Defined in `.spectrum-Checkbox`, `.spectrum-Checkbox.is-invalid`. <br/>Used by `.spectrum-Checkbox:active .spectrum-Checkbox-box:before`. <br/>Defaults to `var(--spectrum-checkbox-invalid-color-down)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-checkbox-control-color-focus": {
+      "value": "var(--spectrum-checkbox-invalid-color-focus)",
+      "description": "Defined in `.spectrum-Checkbox`, `.spectrum-Checkbox.is-invalid`. <br/>Used by `.spectrum-Checkbox .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before`. <br/>Defaults to `var(--spectrum-checkbox-invalid-color-focus)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-checkbox-focus-indicator-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Defined in `.spectrum-Checkbox`. <br/>Used by `.spectrum-Checkbox .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:after`, `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box`. <br/>Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-checkbox-control-color-disabled": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Defined in `.spectrum-Checkbox`. <br/>Used by `.spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before, .spectrum-Checkbox .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox .spectrum-Checkbox-input:checked:hover:disabled + .spectrum-Checkbox-box:before, .spectrum-Checkbox .spectrum-Checkbox-input:hover:disabled + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled ~ .spectrum-Checkbox-label, .spectrum-Checkbox .spectrum-Checkbox-input:disabled ~ .spectrum-Checkbox-label`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-checkbox-invalid-color-default": {
+      "value": "var(--spectrum-red-900)",
+      "description": "Defined in `.spectrum-Checkbox`. <br/>Used by `--spectrum-checkbox-control-color-default`, `--spectrum-checkbox-control-selected-color-default`. <br/>Defaults to `var(--spectrum-negative-color-900)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-checkbox-invalid-color-hover": {
+      "value": "var(--spectrum-red-1000)",
+      "description": "Defined in `.spectrum-Checkbox`. <br/>Used by `--spectrum-checkbox-control-color-hover`, `--spectrum-checkbox-control-selected-color-hover`. <br/>Defaults to `var(--spectrum-negative-color-1000)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-checkbox-invalid-color-down": {
+      "value": "var(--spectrum-red-1000)",
+      "description": "Defined in `.spectrum-Checkbox`. <br/>Used by `--spectrum-checkbox-control-color-down`, `--spectrum-checkbox-control-selected-color-down`. <br/>Defaults to `var(--spectrum-negative-color-1000)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-checkbox-invalid-color-focus": {
+      "value": "var(--spectrum-red-1000)",
+      "description": "Defined in `.spectrum-Checkbox`. <br/>Used by `--spectrum-checkbox-control-color-focus`. <br/>Defaults to `var(--spectrum-negative-color-1000)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-checkbox-emphasized-color-default": {
+      "value": "var(--spectrum-accent-color-900)",
+      "description": "Defined in `.spectrum-Checkbox`. <br/>Used by `--spectrum-checkbox-control-selected-color-default`. <br/>Defaults to `var(--spectrum-accent-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-checkbox-emphasized-color-hover": {
+      "value": "var(--spectrum-accent-color-1000)",
+      "description": "Defined in `.spectrum-Checkbox`. <br/>Used by `--spectrum-checkbox-control-selected-color-hover`. <br/>Defaults to `var(--spectrum-accent-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-checkbox-emphasized-color-down": {
+      "value": "var(--spectrum-accent-color-1000)",
+      "description": "Defined in `.spectrum-Checkbox`. <br/>Used by `--spectrum-checkbox-control-selected-color-down`. <br/>Defaults to `var(--spectrum-accent-content-color-down)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-checkbox-emphasized-color-focus": {
+      "value": "var(--spectrum-accent-color-1000)",
+      "description": "Defined in `.spectrum-Checkbox`. <br/>Used by `.spectrum-Checkbox--emphasized.is-indeterminate:not(.is-invalid) .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before`, `--mod-checkbox-control-color-focus`. <br/>Defaults to `var(--spectrum-accent-content-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-checkbox-control-selected-color-default": {
+      "value": "var(--spectrum-checkbox-invalid-color-default)",
+      "description": "Defined in `.spectrum-Checkbox`, `.spectrum-Checkbox.spectrum-Checkbox--emphasized`, `.spectrum-Checkbox.is-invalid`. <br/>Used by `.spectrum-Checkbox .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:checked:not(:disabled) + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`. <br/>Defaults to `var(--spectrum-checkbox-invalid-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-checkbox-control-selected-color-hover": {
+      "value": "var(--spectrum-checkbox-invalid-color-hover)",
+      "description": "Defined in `.spectrum-Checkbox`, `.spectrum-Checkbox.spectrum-Checkbox--emphasized`, `.spectrum-Checkbox.is-invalid`. <br/>Used by `.spectrum-Checkbox:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-input:checked:not(:disabled) + .spectrum-Checkbox-box:before`. <br/>Defaults to `var(--spectrum-checkbox-invalid-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-checkbox-control-selected-color-down": {
+      "value": "var(--spectrum-checkbox-invalid-color-down)",
+      "description": "Defined in `.spectrum-Checkbox`, `.spectrum-Checkbox.spectrum-Checkbox--emphasized`, `.spectrum-Checkbox.is-invalid`. <br/>Used by `.spectrum-Checkbox:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`. <br/>Defaults to `var(--spectrum-checkbox-invalid-color-down)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-checkbox-font-size": {
+      "value": "18px",
+      "description": "Defined in `.spectrum-Checkbox`, `.spectrum-Checkbox.spectrum-Checkbox--sizeS`, `.spectrum-Checkbox.spectrum-Checkbox--sizeL`, `.spectrum-Checkbox.spectrum-Checkbox--sizeXL`. <br/>Used by `.spectrum-Checkbox .spectrum-Checkbox-label`. <br/>Defaults to `var(--spectrum-font-size-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-checkbox-line-height": {
+      "value": "1.3",
+      "description": "Defined in `.spectrum-Checkbox`. <br/>Used by `.spectrum-Checkbox .spectrum-Checkbox-label`. <br/>Defaults to `var(--spectrum-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-checkbox-line-height-cjk": {
+      "value": "1.5",
+      "description": "Defined in `.spectrum-Checkbox`. <br/>Used by `--mod-checkbox-line-height`. <br/>Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-checkbox-text-font-weight": {
+      "value": "400",
+      "description": "Defined in `.spectrum-Checkbox`. <br/>Used by `.spectrum-Checkbox .spectrum-Checkbox-label`. <br/>Defaults to `var(--spectrum-regular-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-checkbox-text-font-style": {
+      "value": "normal",
+      "description": "Defined in `.spectrum-Checkbox`. <br/>Used by `.spectrum-Checkbox .spectrum-Checkbox-label`. <br/>Defaults to `var(--spectrum-default-font-style)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-checkbox-height": {
+      "value": "48px",
+      "description": "Defined in `.spectrum-Checkbox`, `.spectrum-Checkbox.spectrum-Checkbox--sizeS`, `.spectrum-Checkbox.spectrum-Checkbox--sizeL`, `.spectrum-Checkbox.spectrum-Checkbox--sizeXL`. <br/>Used by `.spectrum-Checkbox`. <br/>Defaults to `var(--spectrum-component-height-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-checkbox-control-size": {
+      "value": "20px",
+      "description": "Defined in `.spectrum-Checkbox`, `.spectrum-Checkbox.spectrum-Checkbox--sizeS`, `.spectrum-Checkbox.spectrum-Checkbox--sizeL`, `.spectrum-Checkbox.spectrum-Checkbox--sizeXL`. <br/>Used by `--spectrum-checkbox-selected-border-width`, `.spectrum-Checkbox .spectrum-Checkbox-box, .spectrum-Checkbox .spectrum-Checkbox-box:before`. <br/>Defaults to `var(--spectrum-checkbox-control-size-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-checkbox-control-size-medium": {
+      "value": "16px",
+      "description": "Used by `--spectrum-checkbox-control-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-checkbox-control-corner-radius": {
+      "value": "6px",
+      "description": "Defined in `.spectrum-Checkbox`, `.spectrum-Checkbox.spectrum-Checkbox--sizeS`, `.spectrum-Checkbox.spectrum-Checkbox--sizeL`, `.spectrum-Checkbox.spectrum-Checkbox--sizeXL`. <br/>Used by `.spectrum-Checkbox .spectrum-Checkbox-box:before`, `.spectrum-Checkbox .spectrum-Checkbox-box:after`. <br/>Defaults to `var(--spectrum-corner-radius-small-size-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-checkbox-focus-indicator-gap": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Checkbox`. <br/>Used by `.spectrum-Checkbox .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:after`, `.spectrum-Checkbox .spectrum-Checkbox-box:after`, `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box`. <br/>Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-checkbox-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Checkbox`. <br/>Used by `.spectrum-Checkbox .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:after`. <br/>Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-checkbox-border-width": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Checkbox`. <br/>Used by `.spectrum-Checkbox .spectrum-Checkbox-box:before`. <br/>Defaults to `var(--spectrum-border-width-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-checkbox-animation-duration": {
+      "value": "var(--spectrum-animation-duration-100)",
+      "description": "Defined in `.spectrum-Checkbox`. <br/>Used by `.spectrum-Checkbox .spectrum-Checkbox-checkmark, .spectrum-Checkbox .spectrum-Checkbox-partialCheckmark`, `.spectrum-Checkbox .spectrum-Checkbox-label`, `.spectrum-Checkbox .spectrum-Checkbox-box:before`, `.spectrum-Checkbox .spectrum-Checkbox-box:after`. <br/>Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-checkbox-top-to-text": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-Checkbox`, `.spectrum-Checkbox.spectrum-Checkbox--sizeS`, `.spectrum-Checkbox.spectrum-Checkbox--sizeL`, `.spectrum-Checkbox.spectrum-Checkbox--sizeXL`. <br/>Used by `.spectrum-Checkbox .spectrum-Checkbox-label`. <br/>Defaults to `var(--spectrum-component-top-to-text-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-checkbox-bottom-to-text": {
+      "value": "14px",
+      "description": "Defined in `.spectrum-Checkbox`, `.spectrum-Checkbox.spectrum-Checkbox--sizeS`, `.spectrum-Checkbox.spectrum-Checkbox--sizeL`, `.spectrum-Checkbox.spectrum-Checkbox--sizeXL`. <br/>Used by `.spectrum-Checkbox .spectrum-Checkbox-label`. <br/>Defaults to `var(--spectrum-component-bottom-to-text-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-checkbox-text-to-control": {
+      "value": "13px",
+      "description": "Defined in `.spectrum-Checkbox`, `.spectrum-Checkbox.spectrum-Checkbox--sizeS`, `.spectrum-Checkbox.spectrum-Checkbox--sizeL`, `.spectrum-Checkbox.spectrum-Checkbox--sizeXL`. <br/>Used by `.spectrum-Checkbox .spectrum-Checkbox-label`. <br/>Defaults to `var(--spectrum-text-to-control-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-checkbox-top-to-control": {
+      "value": "14px",
+      "description": "Defined in `.spectrum-Checkbox`, `.spectrum-Checkbox.spectrum-Checkbox--sizeS`, `.spectrum-Checkbox.spectrum-Checkbox--sizeL`, `.spectrum-Checkbox.spectrum-Checkbox--sizeXL`. <br/>Used by `.spectrum-Checkbox .spectrum-Checkbox-box`. <br/>Defaults to `var(--spectrum-checkbox-top-to-control-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-checkbox-top-to-control-medium": {
+      "value": "8px",
+      "description": "Used by `--spectrum-checkbox-top-to-control`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-checkbox-selected-border-width": {
+      "value": "calc(var(--spectrum-checkbox-control-size) / 2)",
+      "description": "Defined in `.spectrum-Checkbox`. <br/>Used by `.spectrum-Checkbox .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`. <br/>Defaults to `calc(var(--spectrum-checkbox-control-size) / 2)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-checkbox-control-size-small": {
+      "value": "14px",
+      "description": "Used by `--spectrum-checkbox-control-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-checkbox-top-to-control-small": {
+      "value": "5px",
+      "description": "Used by `--spectrum-checkbox-top-to-control`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-checkbox-control-size-large": {
+      "value": "18px",
+      "description": "Used by `--spectrum-checkbox-control-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-checkbox-top-to-control-large": {
+      "value": "11px",
+      "description": "Used by `--spectrum-checkbox-top-to-control`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-checkbox-control-size-extra-large": {
+      "value": "20px",
+      "description": "Used by `--spectrum-checkbox-control-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-checkbox-top-to-control-extra-large": {
+      "value": "14px",
+      "description": "Used by `--spectrum-checkbox-top-to-control`.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-gray-25": {
+      "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+      "description": "Used by `--spectrum-checkbox-checkmark-color`, `--spectrum-checkbox-background-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-checkbox-content-color-default`, `--spectrum-checkbox-control-color-default`, `--spectrum-checkbox-control-selected-color-default`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-checkbox-content-color-hover`, `--spectrum-checkbox-control-color-hover`, `--spectrum-checkbox-control-selected-color-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-down": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-checkbox-content-color-down`, `--spectrum-checkbox-control-color-down`, `--spectrum-checkbox-control-selected-color-down`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-key-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-checkbox-content-color-focus`, `--spectrum-checkbox-control-color-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Used by `--spectrum-checkbox-focus-indicator-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-disabled-content-color": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Used by `--spectrum-checkbox-control-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-color-900": {
+      "value": "var(--spectrum-red-900)",
+      "description": "Used by `--spectrum-checkbox-invalid-color-default`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-color-1000": {
+      "value": "var(--spectrum-red-1000)",
+      "description": "Used by `--spectrum-checkbox-invalid-color-hover`, `--spectrum-checkbox-invalid-color-down`, `--spectrum-checkbox-invalid-color-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-accent-content-color-default": {
+      "value": "var(--spectrum-accent-color-900)",
+      "description": "Used by `--spectrum-checkbox-emphasized-color-default`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-accent-content-color-hover": {
+      "value": "var(--spectrum-accent-color-1000)",
+      "description": "Used by `--spectrum-checkbox-emphasized-color-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-accent-content-color-down": {
+      "value": "var(--spectrum-accent-color-1000)",
+      "description": "Used by `--spectrum-checkbox-emphasized-color-down`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-accent-content-color-key-focus": {
+      "value": "var(--spectrum-accent-color-1000)",
+      "description": "Used by `--spectrum-checkbox-emphasized-color-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-font-size-100": {
+      "value": "14px",
+      "description": "Used by `--spectrum-checkbox-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-line-height-100": {
+      "value": "1.3",
+      "description": "Used by `--spectrum-checkbox-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-cjk-line-height-100": {
+      "value": "1.5",
+      "description": "Used by `--spectrum-checkbox-line-height-cjk`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-regular-font-weight": {
+      "value": "400",
+      "description": "Used by `--spectrum-checkbox-text-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-default-font-style": {
+      "value": "normal",
+      "description": "Used by `--spectrum-checkbox-text-font-style`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-100": {
+      "value": "32px",
+      "description": "Used by `--spectrum-checkbox-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-small-size-medium": {
+      "value": "4px",
+      "description": "Used by `--spectrum-checkbox-control-corner-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-gap": {
+      "value": "2px",
+      "description": "Used by `--spectrum-checkbox-focus-indicator-gap`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Used by `--spectrum-checkbox-focus-indicator-thickness`, `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-border-width-200": {
+      "value": "2px",
+      "description": "Used by `--spectrum-checkbox-border-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-animation-duration-100": {
+      "description": "Used by `--spectrum-checkbox-animation-duration`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-checkbox-top-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-100": {
+      "value": "9px",
+      "description": "Used by `--spectrum-checkbox-bottom-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-control-100": {
+      "value": "10px",
+      "description": "Used by `--spectrum-checkbox-text-to-control`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-small-size-small": {
+      "value": "3px",
+      "description": "Used by `--spectrum-checkbox-control-corner-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-75": {
+      "value": "12px",
+      "description": "Used by `--spectrum-checkbox-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-75": {
+      "value": "24px",
+      "description": "Used by `--spectrum-checkbox-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-75": {
+      "value": "4px",
+      "description": "Used by `--spectrum-checkbox-top-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-75": {
+      "value": "5px",
+      "description": "Used by `--spectrum-checkbox-bottom-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-control-75": {
+      "value": "9px",
+      "description": "Used by `--spectrum-checkbox-text-to-control`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-small-size-large": {
+      "value": "5px",
+      "description": "Used by `--spectrum-checkbox-control-corner-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-200": {
+      "value": "16px",
+      "description": "Used by `--spectrum-checkbox-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-200": {
+      "value": "40px",
+      "description": "Used by `--spectrum-checkbox-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-200": {
+      "value": "9px",
+      "description": "Used by `--spectrum-checkbox-top-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-200": {
+      "value": "11px",
+      "description": "Used by `--spectrum-checkbox-bottom-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-control-200": {
+      "value": "11px",
+      "description": "Used by `--spectrum-checkbox-text-to-control`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-small-size-extra-large": {
+      "value": "6px",
+      "description": "Used by `--spectrum-checkbox-control-corner-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-300": {
+      "value": "18px",
+      "description": "Used by `--spectrum-checkbox-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-300": {
+      "value": "48px",
+      "description": "Used by `--spectrum-checkbox-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-300": {
+      "value": "12px",
+      "description": "Used by `--spectrum-checkbox-top-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-300": {
+      "value": "14px",
+      "description": "Used by `--spectrum-checkbox-bottom-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-control-300": {
+      "value": "13px",
+      "description": "Used by `--spectrum-checkbox-text-to-control`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-size-minimum-perspective-down": {
+      "value": "24px",
+      "description": "Used by `.spectrum-Checkbox:not(.is-readOnly) .spectrum-Checkbox-input:active:not(:disabled) + .spectrum-Checkbox-box, .spectrum-Checkbox:not(.is-readOnly):active .spectrum-Checkbox-input:not(:disabled) + .spectrum-Checkbox-box`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-size-difference-down": {
+      "value": "-2px",
+      "description": "Used by `.spectrum-Checkbox:not(.is-readOnly) .spectrum-Checkbox-input:active:not(:disabled) + .spectrum-Checkbox-box, .spectrum-Checkbox:not(.is-readOnly):active .spectrum-Checkbox-input:not(:disabled) + .spectrum-Checkbox-box`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {
+    "highcontrast-checkbox-content-color-default": {
+      "value": "var(--mod-checkbox-content-color-default, var(--spectrum-checkbox-content-color-default))",
+      "description": "Defined in `.spectrum-Checkbox`. <br/>Used by `.spectrum-Checkbox`. <br/>Defaults to `var(--mod-checkbox-content-color-default, var(--spectrum-checkbox-content-color-default))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-checkbox-highlight-color-down": {
+      "value": "var(--mod-checkbox-control-selected-color-down, var(--spectrum-checkbox-control-selected-color-down))",
+      "description": "Defined in `.spectrum-Checkbox`. <br/>Used by `.spectrum-Checkbox:active .spectrum-Checkbox-box:before`, `.spectrum-Checkbox:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`. <br/>Defaults to `var(--mod-checkbox-control-selected-color-down, var(--spectrum-checkbox-control-selected-color-down))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-checkbox-content-color-down": {
+      "value": "var(--mod-checkbox-content-color-down, var(--spectrum-checkbox-content-color-down))",
+      "description": "Defined in `.spectrum-Checkbox`. <br/>Used by `.spectrum-Checkbox:active .spectrum-Checkbox-label`. <br/>Defaults to `var(--mod-checkbox-content-color-down, var(--spectrum-checkbox-content-color-down))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-checkbox-background-color-default": {
+      "value": "var(--spectrum-checkbox-background-color)",
+      "description": "Defined in `.spectrum-Checkbox`. <br/>Used by `.spectrum-Checkbox .spectrum-Checkbox-checkmark, .spectrum-Checkbox .spectrum-Checkbox-partialCheckmark`, `.spectrum-Checkbox .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox .spectrum-Checkbox-box:before`, `.spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before, .spectrum-Checkbox .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before`. <br/>Defaults to `var(--spectrum-checkbox-background-color)`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-checkbox-highlight-color-default": {
+      "value": "var(--spectrum-checkbox-control-selected-color-default)",
+      "description": "Defined in `.spectrum-Checkbox`. <br/>Used by `.spectrum-Checkbox .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:checked:not(:disabled) + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`. <br/>Defaults to `var(--spectrum-checkbox-control-selected-color-default)`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-checkbox-color-focus": {
+      "value": "var(--spectrum-checkbox-emphasized-color-focus)",
+      "description": "Defined in `.spectrum-Checkbox`. <br/>Used by `.spectrum-Checkbox .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox--emphasized.is-indeterminate:not(.is-invalid) .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before`, `--mod-checkbox-control-color-focus`. <br/>Defaults to `var(--spectrum-checkbox-emphasized-color-focus)`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-checkbox-focus-indicator-color": {
+      "value": "var(--mod-checkbox-focus-indicator-color, var(--spectrum-checkbox-focus-indicator-color))",
+      "description": "Defined in `.spectrum-Checkbox`. <br/>Used by `.spectrum-Checkbox .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:after`, `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box`. <br/>Defaults to `var(--mod-checkbox-focus-indicator-color, var(--spectrum-checkbox-focus-indicator-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-checkbox-content-color-focus": {
+      "value": "var(--mod-checkbox-content-color-focus, var(--spectrum-checkbox-content-color-focus))",
+      "description": "Defined in `.spectrum-Checkbox`. <br/>Used by `.spectrum-Checkbox .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-label`. <br/>Defaults to `var(--mod-checkbox-content-color-focus, var(--spectrum-checkbox-content-color-focus))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-checkbox-color-default": {
+      "value": "var(--mod-checkbox-control-color-default, var(--spectrum-checkbox-control-color-default))",
+      "description": "Defined in `.spectrum-Checkbox`. <br/>Used by `.spectrum-Checkbox .spectrum-Checkbox-box:before`. <br/>Defaults to `var(--mod-checkbox-control-color-default, var(--spectrum-checkbox-control-color-default))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-checkbox-disabled-color-default": {
+      "value": "var(--mod-checkbox-content-color-disabled, var(--spectrum-checkbox-control-color-disabled))",
+      "description": "Defined in `.spectrum-Checkbox`. <br/>Used by `.spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before, .spectrum-Checkbox .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox .spectrum-Checkbox-input:checked:hover:disabled + .spectrum-Checkbox-box:before, .spectrum-Checkbox .spectrum-Checkbox-input:hover:disabled + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled ~ .spectrum-Checkbox-label, .spectrum-Checkbox .spectrum-Checkbox-input:disabled ~ .spectrum-Checkbox-label`. <br/>Defaults to `var(--mod-checkbox-content-color-disabled, var(--spectrum-checkbox-control-color-disabled))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-checkbox-highlight-color-hover": {
+      "value": "var(--spectrum-checkbox-control-selected-color-hover)",
+      "description": "Defined in `.spectrum-Checkbox`. <br/>Used by `.spectrum-Checkbox:hover .spectrum-Checkbox-box:before`, `.spectrum-Checkbox:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-input:checked:not(:disabled) + .spectrum-Checkbox-box:before`. <br/>Defaults to `var(--spectrum-checkbox-control-selected-color-hover)`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-checkbox-content-color-hover": {
+      "value": "var(--mod-checkbox-content-color-hover, var(--spectrum-checkbox-content-color-hover))",
+      "description": "Defined in `.spectrum-Checkbox`. <br/>Used by `.spectrum-Checkbox:hover .spectrum-Checkbox-label`. <br/>Defaults to `var(--mod-checkbox-content-color-hover, var(--spectrum-checkbox-content-color-hover))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/checkbox/stories/checkbox.stories.js b/components/checkbox/stories/checkbox.stories.js
index 1941061d619..d788e820cc9 100644
--- a/components/checkbox/stories/checkbox.stories.js
+++ b/components/checkbox/stories/checkbox.stories.js
@@ -1,11 +1,13 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isActive, isChecked, isDisabled, isEmphasized, isHovered, isIndeterminate, isInvalid, isReadOnly, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { CheckboxGroup } from "./checkbox.test.js";
 import { AllVariantsCheckboxGroup, DocsCheckboxGroup, Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * Checkboxes allow users to select multiple items from a list of individual items, or mark one individual item as selected.
  *
@@ -64,6 +66,10 @@ export default {
 		status: {
 			type: "migrated",
 		},
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 	tags: ["migrated"],
 };
diff --git a/components/clearbutton/dist/metadata.json b/components/clearbutton/dist/metadata.json
index dd50b142662..ab1b6510664 100644
--- a/components/clearbutton/dist/metadata.json
+++ b/components/clearbutton/dist/metadata.json
@@ -5,10 +5,6 @@
     ".spectrum-ClearButton > .spectrum-Icon",
     ".spectrum-ClearButton-fill",
     ".spectrum-ClearButton-icon",
-    ".spectrum-ClearButton.is-disabled",
-    ".spectrum-ClearButton.spectrum-ClearButton--sizeL",
-    ".spectrum-ClearButton.spectrum-ClearButton--sizeS",
-    ".spectrum-ClearButton.spectrum-ClearButton--sizeXL",
     ".spectrum-ClearButton:disabled",
     ".spectrum-ClearButton:focus-visible",
     ".spectrum-ClearButton:not(:disabled)",
@@ -19,53 +15,245 @@
     ".spectrum-ClearButton:not(:disabled):focus-within",
     ".spectrum-ClearButton:not(:disabled):focus-within .spectrum-ClearButton-fill",
     ".spectrum-ClearButton:not(:disabled):hover",
-    ".spectrum-ClearButton:not(:disabled):hover .spectrum-ClearButton-fill"
-  ],
-  "modifiers": [
-    "--mod-clear-button-background-color",
-    "--mod-clear-button-background-color-disabled",
-    "--mod-clear-button-background-color-down",
-    "--mod-clear-button-background-color-hover",
-    "--mod-clear-button-background-color-key-focus",
-    "--mod-clear-button-height",
-    "--mod-clear-button-icon-color",
-    "--mod-clear-button-icon-color-disabled",
-    "--mod-clear-button-icon-color-down",
-    "--mod-clear-button-icon-color-hover",
-    "--mod-clear-button-icon-color-key-focus",
-    "--mod-clear-button-padding",
-    "--mod-clear-button-width"
-  ],
-  "component": [
-    "--spectrum-clear-button-background-color",
-    "--spectrum-clear-button-background-color-down",
-    "--spectrum-clear-button-background-color-hover",
-    "--spectrum-clear-button-background-color-key-focus",
-    "--spectrum-clear-button-height",
-    "--spectrum-clear-button-icon-color",
-    "--spectrum-clear-button-icon-color-down",
-    "--spectrum-clear-button-icon-color-hover",
-    "--spectrum-clear-button-icon-color-key-focus",
-    "--spectrum-clear-button-padding",
-    "--spectrum-clear-button-width"
-  ],
-  "global": [
-    "--spectrum-component-height-100",
-    "--spectrum-component-height-200",
-    "--spectrum-component-height-300",
-    "--spectrum-component-height-75",
-    "--spectrum-component-size-difference-down",
-    "--spectrum-component-size-minimum-perspective-down",
-    "--spectrum-disabled-content-color",
-    "--spectrum-in-field-button-edge-to-fill-extra-large",
-    "--spectrum-in-field-button-edge-to-fill-large",
-    "--spectrum-in-field-button-edge-to-fill-medium",
-    "--spectrum-in-field-button-edge-to-fill-small",
-    "--spectrum-neutral-content-color-default",
-    "--spectrum-neutral-content-color-down",
-    "--spectrum-neutral-content-color-hover",
-    "--spectrum-neutral-content-color-key-focus"
+    ".spectrum-ClearButton:not(:disabled):hover .spectrum-ClearButton-fill",
+    ".spectrum-ClearButton.is-disabled",
+    ".spectrum-ClearButton.spectrum-ClearButton--sizeL",
+    ".spectrum-ClearButton.spectrum-ClearButton--sizeS",
+    ".spectrum-ClearButton.spectrum-ClearButton--sizeXL"
   ],
-  "passthroughs": [],
-  "high-contrast": ["--highcontrast-clear-button-icon-color-hover"]
+  "modifiers": {
+    "mod-clear-button-icon-color": {
+      "description": "Defined in `.spectrum-ClearButton.is-disabled, .spectrum-ClearButton:disabled`. <br/>Used by `.spectrum-ClearButton`. <br/>Defaults to `var(--spectrum-clear-button-icon-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-clear-button-icon-color-disabled": {
+      "description": "Used by `--mod-clear-button-icon-color`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-clear-button-icon-color-hover": {
+      "description": "Defined in `.spectrum-ClearButton.is-disabled, .spectrum-ClearButton:disabled`. <br/>Used by `.spectrum-ClearButton:not(:disabled):hover`. <br/>Defaults to `var(--spectrum-clear-button-icon-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-clear-button-icon-color-down": {
+      "description": "Defined in `.spectrum-ClearButton.is-disabled, .spectrum-ClearButton:disabled`. <br/>Used by `.spectrum-ClearButton:not(:disabled):active`. <br/>Defaults to `var(--spectrum-clear-button-icon-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-clear-button-background-color": {
+      "description": "Defined in `.spectrum-ClearButton.is-disabled, .spectrum-ClearButton:disabled`. <br/>Used by `.spectrum-ClearButton-fill`. <br/>Defaults to `var(--spectrum-clear-button-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-clear-button-background-color-disabled": {
+      "description": "Used by `--mod-clear-button-background-color`.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-clear-button-height": {
+      "description": "Used by `.spectrum-ClearButton`. <br/>Defaults to `var(--spectrum-clear-button-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-clear-button-width": {
+      "description": "Used by `.spectrum-ClearButton`. <br/>Defaults to `var(--spectrum-clear-button-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-clear-button-padding": {
+      "description": "Used by `.spectrum-ClearButton`. <br/>Defaults to `var(--spectrum-clear-button-padding)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-clear-button-background-color-hover": {
+      "description": "Used by `.spectrum-ClearButton:not(:disabled):hover .spectrum-ClearButton-fill`. <br/>Defaults to `var(--spectrum-clear-button-background-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-clear-button-background-color-down": {
+      "description": "Used by `.spectrum-ClearButton:not(:disabled):active .spectrum-ClearButton-fill`. <br/>Defaults to `var(--spectrum-clear-button-background-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-clear-button-icon-color-key-focus": {
+      "description": "Used by `.spectrum-ClearButton:not(:disabled):focus-visible, .spectrum-ClearButton:not(:disabled):focus-within`. <br/>Defaults to `var(--spectrum-clear-button-icon-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-clear-button-background-color-key-focus": {
+      "description": "Used by `.spectrum-ClearButton:not(:disabled):focus-visible .spectrum-ClearButton-fill, .spectrum-ClearButton:not(:disabled):focus-within .spectrum-ClearButton-fill`. <br/>Defaults to `var(--spectrum-clear-button-background-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-clear-button-height": {
+      "value": "48px",
+      "description": "Defined in `.spectrum-ClearButton`, `.spectrum-ClearButton.spectrum-ClearButton--sizeS`, `.spectrum-ClearButton.spectrum-ClearButton--sizeL`, `.spectrum-ClearButton.spectrum-ClearButton--sizeXL`. <br/>Used by `.spectrum-ClearButton`. <br/>Defaults to `var(--spectrum-component-height-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-clear-button-width": {
+      "value": "48px",
+      "description": "Defined in `.spectrum-ClearButton`, `.spectrum-ClearButton.spectrum-ClearButton--sizeS`, `.spectrum-ClearButton.spectrum-ClearButton--sizeL`, `.spectrum-ClearButton.spectrum-ClearButton--sizeXL`. <br/>Used by `.spectrum-ClearButton`. <br/>Defaults to `var(--spectrum-component-height-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-clear-button-padding": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-ClearButton`, `.spectrum-ClearButton.spectrum-ClearButton--sizeS`, `.spectrum-ClearButton.spectrum-ClearButton--sizeL`, `.spectrum-ClearButton.spectrum-ClearButton--sizeXL`. <br/>Used by `.spectrum-ClearButton`. <br/>Defaults to `var(--spectrum-in-field-button-edge-to-fill-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-clear-button-icon-color": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-ClearButton`. <br/>Used by `.spectrum-ClearButton`. <br/>Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-clear-button-icon-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-ClearButton`. <br/>Used by `.spectrum-ClearButton:not(:disabled):hover`. <br/>Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-clear-button-icon-color-down": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-ClearButton`. <br/>Used by `.spectrum-ClearButton:not(:disabled):active`. <br/>Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-clear-button-icon-color-key-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-ClearButton`. <br/>Used by `.spectrum-ClearButton:not(:disabled):focus-visible, .spectrum-ClearButton:not(:disabled):focus-within`. <br/>Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-clear-button-background-color": {
+      "value": "transparent",
+      "description": "Defined in `.spectrum-ClearButton`. <br/>Used by `.spectrum-ClearButton-fill`. <br/>Defaults to `transparent`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-clear-button-background-color-hover": {
+      "value": "transparent",
+      "description": "Defined in `.spectrum-ClearButton`. <br/>Used by `.spectrum-ClearButton:not(:disabled):hover .spectrum-ClearButton-fill`. <br/>Defaults to `transparent`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-clear-button-background-color-down": {
+      "value": "transparent",
+      "description": "Defined in `.spectrum-ClearButton`. <br/>Used by `.spectrum-ClearButton:not(:disabled):active .spectrum-ClearButton-fill`. <br/>Defaults to `transparent`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-clear-button-background-color-key-focus": {
+      "value": "transparent",
+      "description": "Defined in `.spectrum-ClearButton`. <br/>Used by `.spectrum-ClearButton:not(:disabled):focus-visible .spectrum-ClearButton-fill, .spectrum-ClearButton:not(:disabled):focus-within .spectrum-ClearButton-fill`. <br/>Defaults to `transparent`, if not set.",
+      "control": "color",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-component-height-100": {
+      "value": "32px",
+      "description": "Used by `--spectrum-clear-button-height`, `--spectrum-clear-button-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-in-field-button-edge-to-fill-medium": {
+      "value": "6px",
+      "description": "Used by `--spectrum-clear-button-padding`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-clear-button-icon-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-clear-button-icon-color-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-down": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-clear-button-icon-color-down`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-key-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-clear-button-icon-color-key-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-component-height-75": {
+      "value": "24px",
+      "description": "Used by `--spectrum-clear-button-height`, `--spectrum-clear-button-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-in-field-button-edge-to-fill-small": {
+      "value": "4px",
+      "description": "Used by `--spectrum-clear-button-padding`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-200": {
+      "value": "40px",
+      "description": "Used by `--spectrum-clear-button-height`, `--spectrum-clear-button-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-in-field-button-edge-to-fill-large": {
+      "value": "8px",
+      "description": "Used by `--spectrum-clear-button-padding`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-300": {
+      "value": "48px",
+      "description": "Used by `--spectrum-clear-button-height`, `--spectrum-clear-button-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-in-field-button-edge-to-fill-extra-large": {
+      "value": "8px",
+      "description": "Used by `--spectrum-clear-button-padding`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-disabled-content-color": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Used by `--mod-clear-button-icon-color`, `--mod-clear-button-icon-color-hover`, `--mod-clear-button-icon-color-down`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-component-size-minimum-perspective-down": {
+      "value": "24px",
+      "description": "Used by `.spectrum-ClearButton:not(:disabled):active`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-size-difference-down": {
+      "value": "-2px",
+      "description": "Used by `.spectrum-ClearButton:not(:disabled):active`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {
+    "highcontrast-clear-button-icon-color-hover": {
+      "value": "var(--mod-clear-button-icon-color-hover, var(--spectrum-clear-button-icon-color-hover))",
+      "description": "Defined in `.spectrum-ClearButton:not(:disabled)`. <br/>Used by `.spectrum-ClearButton:not(:disabled):hover`. <br/>Defaults to `var(--mod-clear-button-icon-color-hover, var(--spectrum-clear-button-icon-color-hover))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/clearbutton/stories/clearbutton.stories.js b/components/clearbutton/stories/clearbutton.stories.js
index 8b91f40d16b..4692edec7a7 100644
--- a/components/clearbutton/stories/clearbutton.stories.js
+++ b/components/clearbutton/stories/clearbutton.stories.js
@@ -1,11 +1,13 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isActive, isDisabled, isHovered, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { ClearButtonGroup } from "./clearbutton.test.js";
 import { Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * The clear button component is an in-field button used in [search](/docs/components-search-field--docs) and [tags](/docs/components-tag--docs).
  */
@@ -35,8 +37,12 @@ export default {
 		status: {
 			type: "migrated",
 		},
-		tags: ["migrated"],
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
+	tags: ["migrated"],
 };
 
 export const Default = ClearButtonGroup.bind({});
diff --git a/components/closebutton/dist/metadata.json b/components/closebutton/dist/metadata.json
index 6c74f8bf61f..21254180377 100644
--- a/components/closebutton/dist/metadata.json
+++ b/components/closebutton/dist/metadata.json
@@ -8,10 +8,6 @@
     ".spectrum-CloseButton--staticBlack",
     ".spectrum-CloseButton--staticWhite",
     ".spectrum-CloseButton-UIIcon",
-    ".spectrum-CloseButton.is-disabled",
-    ".spectrum-CloseButton.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon",
-    ".spectrum-CloseButton.is-keyboardFocused:not(:disabled)",
-    ".spectrum-CloseButton.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon",
     ".spectrum-CloseButton::-moz-focus-inner",
     ".spectrum-CloseButton:after",
     ".spectrum-CloseButton:disabled",
@@ -28,86 +24,404 @@
     ".spectrum-CloseButton:not(:disabled):focus-visible .spectrum-CloseButton-UIIcon",
     ".spectrum-CloseButton:not(:disabled):hover",
     ".spectrum-CloseButton:not(:disabled):hover .spectrum-CloseButton-UIIcon",
+    ".spectrum-CloseButton.is-disabled",
+    ".spectrum-CloseButton.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon",
+    ".spectrum-CloseButton.is-keyboardFocused:not(:disabled)",
+    ".spectrum-CloseButton.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon",
     "a.spectrum-CloseButton"
   ],
-  "modifiers": [
-    "--mod-closebutton-align-self",
-    "--mod-closebutton-animation-duraction",
-    "--mod-closebutton-animation-duration",
-    "--mod-closebutton-background-color-default",
-    "--mod-closebutton-background-color-down",
-    "--mod-closebutton-background-color-focus",
-    "--mod-closebutton-background-color-hover",
-    "--mod-closebutton-border-radius",
-    "--mod-closebutton-focus-indicator-color",
-    "--mod-closebutton-focus-indicator-gap",
-    "--mod-closebutton-focus-indicator-thickness",
-    "--mod-closebutton-icon-color-default",
-    "--mod-closebutton-icon-color-disabled",
-    "--mod-closebutton-icon-color-down",
-    "--mod-closebutton-icon-color-focus",
-    "--mod-closebutton-icon-color-hover",
-    "--mod-closebutton-margin-inline",
-    "--mod-closebutton-margin-top",
-    "--mod-closebutton-size"
-  ],
-  "component": [
-    "--spectrum-closebutton-animation-duration",
-    "--spectrum-closebutton-background-color-default",
-    "--spectrum-closebutton-background-color-down",
-    "--spectrum-closebutton-background-color-focus",
-    "--spectrum-closebutton-background-color-hover",
-    "--spectrum-closebutton-border-radius",
-    "--spectrum-closebutton-focus-indicator-color",
-    "--spectrum-closebutton-focus-indicator-gap",
-    "--spectrum-closebutton-focus-indicator-thickness",
-    "--spectrum-closebutton-icon-color-default",
-    "--spectrum-closebutton-icon-color-disabled",
-    "--spectrum-closebutton-icon-color-down",
-    "--spectrum-closebutton-icon-color-focus",
-    "--spectrum-closebutton-icon-color-hover",
-    "--spectrum-closebutton-size"
-  ],
-  "global": [
-    "--spectrum-animation-duration-100",
-    "--spectrum-component-height-100",
-    "--spectrum-component-height-200",
-    "--spectrum-component-height-300",
-    "--spectrum-component-height-75",
-    "--spectrum-corner-radius-full",
-    "--spectrum-disabled-content-color",
-    "--spectrum-disabled-static-black-background-color",
-    "--spectrum-disabled-static-white-background-color",
-    "--spectrum-focus-indicator-color",
-    "--spectrum-focus-indicator-gap",
-    "--spectrum-focus-indicator-thickness",
-    "--spectrum-gray-100",
-    "--spectrum-line-height-100",
-    "--spectrum-neutral-content-color-default",
-    "--spectrum-neutral-content-color-down",
-    "--spectrum-neutral-content-color-hover",
-    "--spectrum-neutral-content-color-key-focus",
-    "--spectrum-sans-font-family-stack",
-    "--spectrum-static-black-focus-indicator-color",
-    "--spectrum-static-white-focus-indicator-color",
-    "--spectrum-transparent-black-100",
-    "--spectrum-transparent-black-800",
-    "--spectrum-transparent-black-900",
-    "--spectrum-transparent-white-100",
-    "--spectrum-transparent-white-800",
-    "--spectrum-transparent-white-900"
-  ],
-  "passthroughs": [
-    "--mod-button-animation-duration",
-    "--mod-button-font-family",
-    "--mod-button-line-height"
-  ],
-  "high-contrast": [
-    "--highcontrast-closebutton-background-color-default",
-    "--highcontrast-closebutton-focus-indicator-color",
-    "--highcontrast-closebutton-icon-color-disabled",
-    "--highcontrast-closebutton-icon-color-down",
-    "--highcontrast-closebutton-icon-color-focus",
-    "--highcontrast-closebutton-icon-color-hover"
-  ]
+  "modifiers": {
+    "mod-closebutton-focus-indicator-gap": {
+      "description": "Used by `.spectrum-CloseButton:focus-visible:after`, `.spectrum-CloseButton:after`. <br/>Defaults to `var(--spectrum-closebutton-focus-indicator-gap)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-closebutton-animation-duration": {
+      "description": "Used by `.spectrum-CloseButton:focus-visible:after`, `.spectrum-CloseButton`, `.spectrum-CloseButton:after`. <br/>Defaults to `var(--spectrum-closebutton-animation-duration)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-closebutton-animation-duraction": {
+      "description": "Used by `.spectrum-CloseButton:focus-visible:after`. <br/>Defaults to `var(--spectrum-closebutton-animation-duration)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-closebutton-size": {
+      "description": "Used by `.spectrum-CloseButton`. <br/>Defaults to `var(--spectrum-closebutton-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-closebutton-border-radius": {
+      "description": "Used by `.spectrum-CloseButton`, `.spectrum-CloseButton:after`. <br/>Defaults to `var(--spectrum-closebutton-border-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-closebutton-margin-inline": {
+      "description": "Used by `.spectrum-CloseButton`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-closebutton-margin-top": {
+      "description": "Used by `.spectrum-CloseButton`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-closebutton-align-self": {
+      "description": "Used by `.spectrum-CloseButton`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-closebutton-focus-indicator-thickness": {
+      "description": "Used by `.spectrum-CloseButton:focus-visible:after`. <br/>Defaults to `var(--spectrum-closebutton-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-closebutton-focus-indicator-color": {
+      "description": "Used by `.spectrum-CloseButton:focus-visible:after`. <br/>Defaults to `var(--spectrum-closebutton-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-closebutton-background-color-default": {
+      "description": "Used by `.spectrum-CloseButton:not(:disabled)`, `.spectrum-CloseButton:disabled`. <br/>Defaults to `var(--spectrum-closebutton-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-closebutton-background-color-hover": {
+      "description": "Used by `.spectrum-CloseButton:not(:disabled):hover`. <br/>Defaults to `var(--spectrum-closebutton-background-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-closebutton-icon-color-hover": {
+      "description": "Used by `.spectrum-CloseButton:not(:disabled):hover .spectrum-CloseButton-UIIcon`. <br/>Defaults to `var(--spectrum-closebutton-icon-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-closebutton-background-color-down": {
+      "description": "Used by `.spectrum-CloseButton:not(:disabled):active`. <br/>Defaults to `var(--spectrum-closebutton-background-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-closebutton-icon-color-down": {
+      "description": "Used by `.spectrum-CloseButton:not(:disabled):active .spectrum-CloseButton-UIIcon`. <br/>Defaults to `var(--spectrum-closebutton-icon-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-closebutton-background-color-focus": {
+      "description": "Used by `.spectrum-CloseButton.is-keyboardFocused:not(:disabled), .spectrum-CloseButton:not(:disabled):focus-visible`. <br/>Defaults to `var(--spectrum-closebutton-background-color-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-closebutton-icon-color-focus": {
+      "description": "Used by `.spectrum-CloseButton.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton:not(:disabled):focus-visible .spectrum-CloseButton-UIIcon`, `.spectrum-CloseButton.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton:not(:disabled):focus .spectrum-CloseButton-UIIcon`. <br/>Defaults to `var(--spectrum-closebutton-icon-color-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-closebutton-icon-color-default": {
+      "description": "Used by `.spectrum-CloseButton:not(:disabled) .spectrum-CloseButton-UIIcon`. <br/>Defaults to `var(--spectrum-closebutton-icon-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-closebutton-icon-color-disabled": {
+      "description": "Used by `.spectrum-CloseButton:disabled .spectrum-CloseButton-UIIcon`. <br/>Defaults to `var(--spectrum-closebutton-icon-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-closebutton-border-radius": {
+      "value": "9999px",
+      "description": "Defined in `.spectrum-CloseButton`. <br/>Used by `.spectrum-CloseButton`, `.spectrum-CloseButton:after`. <br/>Defaults to `var(--spectrum-corner-radius-full)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-closebutton-icon-color-default": {
+      "value": "rgba(0, 0, 0, 0.84)",
+      "description": "Defined in `.spectrum-CloseButton`, `.spectrum-CloseButton--staticWhite`, `.spectrum-CloseButton--staticBlack`. <br/>Used by `.spectrum-CloseButton:not(:disabled) .spectrum-CloseButton-UIIcon`. <br/>Defaults to `var(--spectrum-transparent-black-800)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-closebutton-icon-color-hover": {
+      "value": "rgba(0, 0, 0, 0.93)",
+      "description": "Defined in `.spectrum-CloseButton`, `.spectrum-CloseButton--staticWhite`, `.spectrum-CloseButton--staticBlack`. <br/>Used by `.spectrum-CloseButton:not(:disabled):hover .spectrum-CloseButton-UIIcon`. <br/>Defaults to `var(--spectrum-transparent-black-900)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-closebutton-icon-color-down": {
+      "value": "rgba(0, 0, 0, 0.93)",
+      "description": "Defined in `.spectrum-CloseButton`, `.spectrum-CloseButton--staticWhite`, `.spectrum-CloseButton--staticBlack`. <br/>Used by `.spectrum-CloseButton:not(:disabled):active .spectrum-CloseButton-UIIcon`. <br/>Defaults to `var(--spectrum-transparent-black-900)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-closebutton-icon-color-focus": {
+      "value": "rgba(0, 0, 0, 0.93)",
+      "description": "Defined in `.spectrum-CloseButton`, `.spectrum-CloseButton--staticWhite`, `.spectrum-CloseButton--staticBlack`. <br/>Used by `.spectrum-CloseButton.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton:not(:disabled):focus-visible .spectrum-CloseButton-UIIcon`, `.spectrum-CloseButton.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton:not(:disabled):focus .spectrum-CloseButton-UIIcon`. <br/>Defaults to `var(--spectrum-transparent-black-900)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-closebutton-icon-color-disabled": {
+      "value": "rgba(0, 0, 0, 0.09)",
+      "description": "Defined in `.spectrum-CloseButton`, `.spectrum-CloseButton--staticWhite`, `.spectrum-CloseButton--staticBlack`. <br/>Used by `.spectrum-CloseButton:disabled .spectrum-CloseButton-UIIcon`. <br/>Defaults to `var(--spectrum-disabled-static-black-background-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-closebutton-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-CloseButton`. <br/>Used by `.spectrum-CloseButton:focus-visible:after`. <br/>Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-closebutton-focus-indicator-gap": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-CloseButton`. <br/>Used by `.spectrum-CloseButton:focus-visible:after`, `.spectrum-CloseButton:after`. <br/>Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-closebutton-focus-indicator-color": {
+      "value": "rgb(0, 0, 0)",
+      "description": "Defined in `.spectrum-CloseButton`, `.spectrum-CloseButton--staticWhite`, `.spectrum-CloseButton--staticBlack`. <br/>Used by `.spectrum-CloseButton:focus-visible:after`. <br/>Defaults to `var(--spectrum-static-black-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-closebutton-size": {
+      "value": "48px",
+      "description": "Defined in `.spectrum-CloseButton`, `.spectrum-CloseButton--sizeS`, `.spectrum-CloseButton--sizeL`, `.spectrum-CloseButton--sizeXL`. <br/>Used by `.spectrum-CloseButton`. <br/>Defaults to `var(--spectrum-component-height-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-closebutton-animation-duration": {
+      "value": "var(--spectrum-animation-duration-100)",
+      "description": "Defined in `.spectrum-CloseButton`. <br/>Used by `.spectrum-CloseButton:focus-visible:after`, `.spectrum-CloseButton`, `.spectrum-CloseButton:after`. <br/>Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-closebutton-background-color-default": {
+      "value": "transparent",
+      "description": "Defined in `.spectrum-CloseButton`, `.spectrum-CloseButton--staticWhite`, `.spectrum-CloseButton--staticBlack`. <br/>Used by `.spectrum-CloseButton:not(:disabled)`, `.spectrum-CloseButton:disabled`. <br/>Defaults to `transparent`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-closebutton-background-color-hover": {
+      "value": "rgba(0, 0, 0, 0.09)",
+      "description": "Defined in `.spectrum-CloseButton`, `.spectrum-CloseButton--staticWhite`, `.spectrum-CloseButton--staticBlack`. <br/>Used by `.spectrum-CloseButton:not(:disabled):hover`. <br/>Defaults to `var(--spectrum-transparent-black-100)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-closebutton-background-color-down": {
+      "value": "rgba(0, 0, 0, 0.09)",
+      "description": "Defined in `.spectrum-CloseButton`, `.spectrum-CloseButton--staticWhite`, `.spectrum-CloseButton--staticBlack`. <br/>Used by `.spectrum-CloseButton:not(:disabled):active`. <br/>Defaults to `var(--spectrum-transparent-black-100)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-closebutton-background-color-focus": {
+      "value": "rgba(0, 0, 0, 0.09)",
+      "description": "Defined in `.spectrum-CloseButton`, `.spectrum-CloseButton--staticWhite`, `.spectrum-CloseButton--staticBlack`. <br/>Used by `.spectrum-CloseButton.is-keyboardFocused:not(:disabled), .spectrum-CloseButton:not(:disabled):focus-visible`. <br/>Defaults to `var(--spectrum-transparent-black-100)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-sans-font-family-stack": {
+      "description": "Used by `.spectrum-CloseButton`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-line-height-100": {
+      "value": "1.3",
+      "description": "Used by `.spectrum-CloseButton`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-animation-duration-100": {
+      "description": "Used by `.spectrum-CloseButton`, `--spectrum-closebutton-animation-duration`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-full": {
+      "value": "9999px",
+      "description": "Used by `--spectrum-closebutton-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-closebutton-icon-color-default`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-closebutton-icon-color-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-down": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-closebutton-icon-color-down`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-key-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-closebutton-icon-color-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-disabled-content-color": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Used by `--spectrum-closebutton-icon-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Used by `--spectrum-closebutton-focus-indicator-thickness`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-gap": {
+      "value": "2px",
+      "description": "Used by `--spectrum-closebutton-focus-indicator-gap`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Used by `--spectrum-closebutton-focus-indicator-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-component-height-100": {
+      "value": "32px",
+      "description": "Used by `--spectrum-closebutton-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-100": {
+      "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+      "description": "Used by `--spectrum-closebutton-background-color-hover`, `--spectrum-closebutton-background-color-down`, `--spectrum-closebutton-background-color-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-75": {
+      "value": "24px",
+      "description": "Used by `--spectrum-closebutton-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-200": {
+      "value": "40px",
+      "description": "Used by `--spectrum-closebutton-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-300": {
+      "value": "48px",
+      "description": "Used by `--spectrum-closebutton-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-transparent-white-800": {
+      "value": "rgba(255, 255, 255, 0.85)",
+      "description": "Used by `--spectrum-closebutton-icon-color-default`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-transparent-white-900": {
+      "value": "rgba(255, 255, 255, 0.94)",
+      "description": "Used by `--spectrum-closebutton-icon-color-hover`, `--spectrum-closebutton-icon-color-down`, `--spectrum-closebutton-icon-color-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-disabled-static-white-background-color": {
+      "value": "rgba(255, 255, 255, 0.11)",
+      "description": "Used by `--spectrum-closebutton-icon-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-transparent-white-100": {
+      "value": "rgba(255, 255, 255, 0.11)",
+      "description": "Used by `--spectrum-closebutton-background-color-hover`, `--spectrum-closebutton-background-color-down`, `--spectrum-closebutton-background-color-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-static-white-focus-indicator-color": {
+      "value": "rgb(255, 255, 255)",
+      "description": "Used by `--spectrum-closebutton-focus-indicator-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-transparent-black-800": {
+      "value": "rgba(0, 0, 0, 0.84)",
+      "description": "Used by `--spectrum-closebutton-icon-color-default`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-transparent-black-900": {
+      "value": "rgba(0, 0, 0, 0.93)",
+      "description": "Used by `--spectrum-closebutton-icon-color-hover`, `--spectrum-closebutton-icon-color-down`, `--spectrum-closebutton-icon-color-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-disabled-static-black-background-color": {
+      "value": "rgba(0, 0, 0, 0.09)",
+      "description": "Used by `--spectrum-closebutton-icon-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-transparent-black-100": {
+      "value": "rgba(0, 0, 0, 0.09)",
+      "description": "Used by `--spectrum-closebutton-background-color-hover`, `--spectrum-closebutton-background-color-down`, `--spectrum-closebutton-background-color-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-static-black-focus-indicator-color": {
+      "value": "rgb(0, 0, 0)",
+      "description": "Used by `--spectrum-closebutton-focus-indicator-color`.",
+      "control": "color",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {
+    "mod-button-font-family": {
+      "category": "Passthrough"
+    },
+    "mod-button-line-height": {
+      "category": "Passthrough"
+    },
+    "mod-button-animation-duration": {
+      "category": "Passthrough"
+    }
+  },
+  "high-contrast": {
+    "highcontrast-closebutton-icon-color-disabled": {
+      "value": "var(--mod-closebutton-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled))",
+      "description": "Defined in `.spectrum-CloseButton`, `.spectrum-CloseButton--staticWhite`. <br/>Used by `.spectrum-CloseButton:disabled .spectrum-CloseButton-UIIcon`. <br/>Defaults to `var(--mod-closebutton-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-closebutton-icon-color-down": {
+      "value": "var(--mod-closebutton-icon-color-down, var(--spectrum-closebutton-icon-color-down))",
+      "description": "Defined in `.spectrum-CloseButton`. <br/>Used by `.spectrum-CloseButton:not(:disabled):active .spectrum-CloseButton-UIIcon`. <br/>Defaults to `var(--mod-closebutton-icon-color-down, var(--spectrum-closebutton-icon-color-down))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-closebutton-icon-color-hover": {
+      "value": "var(--mod-closebutton-icon-color-hover, var(--spectrum-closebutton-icon-color-hover))",
+      "description": "Defined in `.spectrum-CloseButton`. <br/>Used by `.spectrum-CloseButton:not(:disabled):hover .spectrum-CloseButton-UIIcon`. <br/>Defaults to `var(--mod-closebutton-icon-color-hover, var(--spectrum-closebutton-icon-color-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-closebutton-icon-color-focus": {
+      "value": "var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus))",
+      "description": "Defined in `.spectrum-CloseButton`. <br/>Used by `.spectrum-CloseButton.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton:not(:disabled):focus-visible .spectrum-CloseButton-UIIcon`, `.spectrum-CloseButton.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton:not(:disabled):focus .spectrum-CloseButton-UIIcon`. <br/>Defaults to `var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-closebutton-background-color-default": {
+      "value": "var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default))",
+      "description": "Defined in `.spectrum-CloseButton`. <br/>Used by `.spectrum-CloseButton:not(:disabled)`. <br/>Defaults to `var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-closebutton-focus-indicator-color": {
+      "value": "var(--mod-closebutton-focus-indicator-color, var(--spectrum-closebutton-focus-indicator-color))",
+      "description": "Defined in `.spectrum-CloseButton`. <br/>Used by `.spectrum-CloseButton:focus-visible:after`. <br/>Defaults to `var(--mod-closebutton-focus-indicator-color, var(--spectrum-closebutton-focus-indicator-color))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/closebutton/stories/closebutton.stories.js b/components/closebutton/stories/closebutton.stories.js
index a991b559cb3..e9a05eb461e 100644
--- a/components/closebutton/stories/closebutton.stories.js
+++ b/components/closebutton/stories/closebutton.stories.js
@@ -1,11 +1,13 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, isFocused, isHovered, isKeyboardFocused, size, staticColor } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { CloseButtonGroup } from "./closebutton.test.js";
 import { CloseButtonExample, Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * Close button is used to close or dismiss its parent component. It is used inside of other components such
  * as [toast](?path=/docs/components-toast--docs) and [action bar](?path=/docs/components-action-bar--docs).
@@ -55,6 +57,10 @@ export default {
 		status: {
 			type: "migrated",
 		},
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 	tags: ["migrated"],
 };
@@ -139,7 +145,6 @@ StaticBlack.parameters = {
 	chromatic: { disableSnapshot: true },
 };
 
-
 // ********* VRT ONLY ********* //
 export const WithForcedColors = CloseButtonGroup.bind({});
 WithForcedColors.tags = ["!autodocs", "!dev"];
diff --git a/components/closebutton/stories/template.js b/components/closebutton/stories/template.js
index 4f6c5d8c00e..8ebbcfd1f08 100644
--- a/components/closebutton/stories/template.js
+++ b/components/closebutton/stories/template.js
@@ -9,6 +9,7 @@ import "../index.css";
 
 export const Template = ({
 	rootClass = "spectrum-CloseButton",
+	id = getRandomId("close-button"),
 	size = "m",
 	iconSize = "regular",
 	label = "Close",
@@ -18,7 +19,6 @@ export const Template = ({
 	isFocused = false,
 	isKeyboardFocused = false,
 	customClasses = [],
-	id = getRandomId("closebutton"),
 	onclick,
 } = {}, context = {}) => {
 	return html`
diff --git a/components/coachindicator/dist/metadata.json b/components/coachindicator/dist/metadata.json
index 0bed4172eef..850441f881a 100644
--- a/components/coachindicator/dist/metadata.json
+++ b/components/coachindicator/dist/metadata.json
@@ -10,49 +10,211 @@
     ".spectrum-CoachIndicator.spectrum-CoachIndicator--staticBlack",
     ".spectrum-CoachIndicator.spectrum-CoachIndicator--staticWhite"
   ],
-  "modifiers": [
-    "--mod-coach-animation-indicator-ring-center-delay-multiple",
-    "--mod-coach-animation-indicator-ring-duration",
-    "--mod-coach-animation-indicator-ring-outer-delay-multiple",
-    "--mod-coach-indicator-animation-name",
-    "--mod-coach-indicator-block-size",
-    "--mod-coach-indicator-gap",
-    "--mod-coach-indicator-inline-size",
-    "--mod-coach-indicator-inner-animation-delay-multiple",
-    "--mod-coach-indicator-left",
-    "--mod-coach-indicator-min-block-size",
-    "--mod-coach-indicator-min-inline-size",
-    "--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple",
-    "--mod-coach-indicator-quiet-ring-diameter",
-    "--mod-coach-indicator-ring-block-size",
-    "--mod-coach-indicator-ring-border-size",
-    "--mod-coach-indicator-ring-default-color",
-    "--mod-coach-indicator-ring-diameter",
-    "--mod-coach-indicator-ring-inline-size",
-    "--mod-coach-indicator-top"
-  ],
-  "component": [
-    "--spectrum-coach-indicator-animation-keyframe-scale-initial",
-    "--spectrum-coach-indicator-animation-ring-inner-delay-multiple",
-    "--spectrum-coach-indicator-block-size",
-    "--spectrum-coach-indicator-gap",
-    "--spectrum-coach-indicator-inline-size",
-    "--spectrum-coach-indicator-min-block-size",
-    "--spectrum-coach-indicator-min-inline-size",
-    "--spectrum-coach-indicator-quiet-ring-diameter",
-    "--spectrum-coach-indicator-ring-border-size",
-    "--spectrum-coach-indicator-ring-default-color",
-    "--spectrum-coach-indicator-ring-diameter",
-    "--spectrum-coach-indicator-ring-diameter-size",
-    "--spectrum-coach-indicator-sizing-multiple"
-  ],
-  "global": [
-    "--spectrum-animation-duration-6000",
-    "--spectrum-black",
-    "--spectrum-border-width-200",
-    "--spectrum-coach-animation-indicator-ring-duration",
-    "--spectrum-white"
-  ],
-  "passthroughs": [],
-  "high-contrast": []
+  "modifiers": {
+    "mod-coach-indicator-ring-diameter": {
+      "description": "Used by `--spectrum-coach-indicator-ring-diameter-size`. <br/>Defaults to `var(--spectrum-coach-indicator-ring-diameter)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coach-indicator-inline-size": {
+      "description": "Used by `--spectrum-coach-indicator-inline-size`. <br/>Defaults to `var(--spectrum-coach-indicator-min-inline-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coach-indicator-block-size": {
+      "description": "Used by `--spectrum-coach-indicator-block-size`. <br/>Defaults to `var(--spectrum-coach-indicator-min-block-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coach-indicator-inner-animation-delay-multiple": {
+      "description": "Used by `--spectrum-coach-indicator-animation-ring-inner-delay-multiple`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coach-indicator-gap": {
+      "description": "Used by `.spectrum-CoachIndicator`. <br/>Defaults to `var(--spectrum-coach-indicator-gap)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coach-indicator-min-inline-size": {
+      "description": "Used by `.spectrum-CoachIndicator`. <br/>Defaults to `var(--spectrum-coach-indicator-min-inline-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coach-indicator-min-block-size": {
+      "description": "Used by `.spectrum-CoachIndicator`. <br/>Defaults to `var(--spectrum-coach-indicator-min-block-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coach-indicator-quiet-ring-diameter": {
+      "description": "Used by `--spectrum-coach-indicator-ring-diameter-size`. <br/>Defaults to `var(--spectrum-coach-indicator-quiet-ring-diameter)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coach-indicator-quiet-animation-ring-inner-delay-multiple": {
+      "description": "Used by `--spectrum-coach-indicator-animation-ring-inner-delay-multiple`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coach-indicator-ring-border-size": {
+      "description": "Used by `.spectrum-CoachIndicator-ring`. <br/>Defaults to `var(--spectrum-coach-indicator-ring-border-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coach-indicator-ring-default-color": {
+      "description": "Used by `.spectrum-CoachIndicator-ring`. <br/>Defaults to `var(--spectrum-coach-indicator-ring-default-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-coach-indicator-top": {
+      "description": "Used by `.spectrum-CoachIndicator-ring`. <br/>Defaults to `calc(var(--spectrum-coach-indicator-block-size) / 3 - var(--spectrum-coach-indicator-ring-border-size))`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coach-indicator-left": {
+      "description": "Used by `.spectrum-CoachIndicator-ring`. <br/>Defaults to `calc(var(--spectrum-coach-indicator-inline-size) / 3 - var(--spectrum-coach-indicator-ring-border-size))`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coach-indicator-ring-inline-size": {
+      "description": "Used by `.spectrum-CoachIndicator-ring`. <br/>Defaults to `var(--spectrum-coach-indicator-ring-diameter-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coach-indicator-ring-block-size": {
+      "description": "Used by `.spectrum-CoachIndicator-ring`. <br/>Defaults to `var(--spectrum-coach-indicator-ring-diameter-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coach-indicator-animation-name": {
+      "description": "Used by `.spectrum-CoachIndicator-ring`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coach-animation-indicator-ring-duration": {
+      "description": "Used by `.spectrum-CoachIndicator-ring`, `.spectrum-CoachIndicator-ring:first-child`, `.spectrum-CoachIndicator-ring:nth-child(2)`, `.spectrum-CoachIndicator-ring:nth-child(3)`. <br/>Defaults to `var(--spectrum-coach-animation-indicator-ring-duration)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coach-animation-indicator-ring-center-delay-multiple": {
+      "description": "Used by `.spectrum-CoachIndicator-ring:nth-child(2)`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coach-animation-indicator-ring-outer-delay-multiple": {
+      "description": "Used by `.spectrum-CoachIndicator-ring:nth-child(3)`.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-coach-indicator-ring-border-size": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-CoachIndicator`. <br/>Used by `.spectrum-CoachIndicator-ring`. <br/>Defaults to `var(--spectrum-border-width-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coach-indicator-sizing-multiple": {
+      "value": "2.75",
+      "description": "Defined in `.spectrum-CoachIndicator`, `.spectrum-CoachIndicator.spectrum-CoachIndicator--quiet`. <br/>Used by `--spectrum-coach-indicator-min-inline-size`, `--spectrum-coach-indicator-min-block-size`. <br/>Defaults to `2.75`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coach-indicator-ring-diameter-size": {
+      "value": "var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter))",
+      "description": "Defined in `.spectrum-CoachIndicator`, `.spectrum-CoachIndicator.spectrum-CoachIndicator--quiet`. <br/>Used by `--spectrum-coach-indicator-min-inline-size`, `--spectrum-coach-indicator-min-block-size`, `.spectrum-CoachIndicator-ring`. <br/>Defaults to `var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coach-indicator-ring-diameter": {
+      "description": "Used by `--spectrum-coach-indicator-ring-diameter-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coach-indicator-min-inline-size": {
+      "value": "calc(var(--spectrum-coach-indicator-ring-diameter-size) * var(--spectrum-coach-indicator-sizing-multiple))",
+      "description": "Defined in `.spectrum-CoachIndicator`. <br/>Used by `--spectrum-coach-indicator-inline-size`, `.spectrum-CoachIndicator`. <br/>Defaults to `calc(var(--spectrum-coach-indicator-ring-diameter-size) * var(--spectrum-coach-indicator-sizing-multiple))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coach-indicator-min-block-size": {
+      "value": "calc(var(--spectrum-coach-indicator-ring-diameter-size) * var(--spectrum-coach-indicator-sizing-multiple))",
+      "description": "Defined in `.spectrum-CoachIndicator`. <br/>Used by `--spectrum-coach-indicator-block-size`, `.spectrum-CoachIndicator`. <br/>Defaults to `calc(var(--spectrum-coach-indicator-ring-diameter-size) * var(--spectrum-coach-indicator-sizing-multiple))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coach-indicator-inline-size": {
+      "value": "var(--mod-coach-indicator-inline-size, var(--spectrum-coach-indicator-min-inline-size))",
+      "description": "Defined in `.spectrum-CoachIndicator`. <br/>Used by `.spectrum-CoachIndicator`, `.spectrum-CoachIndicator-ring`. <br/>Defaults to `var(--mod-coach-indicator-inline-size, var(--spectrum-coach-indicator-min-inline-size))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coach-indicator-block-size": {
+      "value": "var(--mod-coach-indicator-block-size, var(--spectrum-coach-indicator-min-block-size))",
+      "description": "Defined in `.spectrum-CoachIndicator`. <br/>Used by `.spectrum-CoachIndicator`, `.spectrum-CoachIndicator-ring`. <br/>Defaults to `var(--mod-coach-indicator-block-size, var(--spectrum-coach-indicator-min-block-size))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coach-indicator-animation-keyframe-scale-initial": {
+      "value": "0.8",
+      "description": "Defined in `.spectrum-CoachIndicator`, `.spectrum-CoachIndicator.spectrum-CoachIndicator--quiet`. <br/>Used by `0%`. <br/>Defaults to `0.8`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coach-indicator-animation-ring-inner-delay-multiple": {
+      "value": "var(--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple, -0.33)",
+      "description": "Defined in `.spectrum-CoachIndicator`, `.spectrum-CoachIndicator.spectrum-CoachIndicator--quiet`. <br/>Used by `.spectrum-CoachIndicator-ring:first-child`. <br/>Defaults to `var(--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple, -0.33)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coach-indicator-gap": {
+      "description": "Used by `.spectrum-CoachIndicator`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coach-indicator-quiet-ring-diameter": {
+      "description": "Used by `--spectrum-coach-indicator-ring-diameter-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coach-indicator-ring-default-color": {
+      "value": "rgb(0, 0, 0)",
+      "description": "Defined in `.spectrum-CoachIndicator.spectrum-CoachIndicator--staticWhite`, `.spectrum-CoachIndicator.spectrum-CoachIndicator--staticBlack`. <br/>Used by `.spectrum-CoachIndicator-ring`. <br/>Defaults to `var(--spectrum-black)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-border-width-200": {
+      "value": "2px",
+      "description": "Used by `--spectrum-coach-indicator-ring-border-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-coach-animation-indicator-ring-duration": {
+      "value": "var(--spectrum-animation-duration-6000)",
+      "description": "Defined in `.spectrum-CoachIndicator`. <br/>Used by `.spectrum-CoachIndicator-ring`, `.spectrum-CoachIndicator-ring:first-child`, `.spectrum-CoachIndicator-ring:nth-child(2)`, `.spectrum-CoachIndicator-ring:nth-child(3)`. <br/>Defaults to `var(--spectrum-animation-duration-6000)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-animation-duration-6000": {
+      "description": "Used by `--spectrum-coach-animation-indicator-ring-duration`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-white": {
+      "value": "rgb(255, 255, 255)",
+      "description": "Used by `--spectrum-coach-indicator-ring-default-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-black": {
+      "value": "rgb(0, 0, 0)",
+      "description": "Used by `--spectrum-coach-indicator-ring-default-color`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {}
 }
diff --git a/components/coachindicator/stories/coachindicator.stories.js b/components/coachindicator/stories/coachindicator.stories.js
index f206b3bef9a..316a83cb56e 100644
--- a/components/coachindicator/stories/coachindicator.stories.js
+++ b/components/coachindicator/stories/coachindicator.stories.js
@@ -1,10 +1,12 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isQuiet, staticColor } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { CoachIndicatorGroup } from "./coachindicator.test.js";
 import { Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * The coach indicator component can be used to bring added attention to specific parts of a page.
  *
@@ -30,6 +32,10 @@ export default {
 		},
 		packageJson,
 		metadata,
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 };
 
diff --git a/components/coachmark/dist/metadata.json b/components/coachmark/dist/metadata.json
index 9286c817c5f..70e75b2840c 100644
--- a/components/coachmark/dist/metadata.json
+++ b/components/coachmark/dist/metadata.json
@@ -16,109 +16,536 @@
     ".spectrum-CoachMark-step",
     ".spectrum-CoachMark-title"
   ],
-  "modifiers": [
-    "--mod-coachmark-action-menu-vertical-offset",
-    "--mod-coachmark-body-to-footer",
-    "--mod-coachmark-border-radius",
-    "--mod-coachmark-border-size",
-    "--mod-coachmark-content-font-color",
-    "--mod-coachmark-content-font-family",
-    "--mod-coachmark-content-font-size",
-    "--mod-coachmark-content-font-style",
-    "--mod-coachmark-content-font-weight",
-    "--mod-coachmark-content-line-height",
-    "--mod-coachmark-header-to-body",
-    "--mod-coachmark-heading-to-action-button",
-    "--mod-coachmark-image-to-heading",
-    "--mod-coachmark-max-width",
-    "--mod-coachmark-media-fixed-height",
-    "--mod-coachmark-media-min-height",
-    "--mod-coachmark-min-width",
-    "--mod-coachmark-padding",
-    "--mod-coachmark-step-color",
-    "--mod-coachmark-step-font-size",
-    "--mod-coachmark-step-font-style",
-    "--mod-coachmark-step-text-font-weight",
-    "--mod-coachmark-step-text-line-height",
-    "--mod-coachmark-step-to-bottom",
-    "--mod-coachmark-title-color",
-    "--mod-coachmark-title-font-family",
-    "--mod-coachmark-title-font-size",
-    "--mod-coachmark-title-font-style",
-    "--mod-coachmark-title-text-font-weight",
-    "--mod-coachmark-title-text-line-height",
-    "--mod-coachmark-width"
-  ],
-  "component": [
-    "--spectrum-coach-mark-body-font-size",
-    "--spectrum-coach-mark-edge-to-content",
-    "--spectrum-coach-mark-maximum-width",
-    "--spectrum-coach-mark-media-height",
-    "--spectrum-coach-mark-media-minimum-height",
-    "--spectrum-coach-mark-minimum-width",
-    "--spectrum-coach-mark-pagination-body-font-size",
-    "--spectrum-coach-mark-pagination-color",
-    "--spectrum-coach-mark-pagination-text-to-bottom-edge",
-    "--spectrum-coach-mark-title-font-size",
-    "--spectrum-coach-mark-width",
-    "--spectrum-coachmark-action-menu-vertical-offset",
-    "--spectrum-coachmark-body-to-footer",
-    "--spectrum-coachmark-border-radius",
-    "--spectrum-coachmark-border-size",
-    "--spectrum-coachmark-buttongroup-display",
-    "--spectrum-coachmark-buttongroup-mobile-display",
-    "--spectrum-coachmark-content-font-size",
-    "--spectrum-coachmark-content-font-weight",
-    "--spectrum-coachmark-header-to-body",
-    "--spectrum-coachmark-image-to-heading",
-    "--spectrum-coachmark-max-width",
-    "--spectrum-coachmark-media-fixed-height",
-    "--spectrum-coachmark-media-min-height",
-    "--spectrum-coachmark-menu-display",
-    "--spectrum-coachmark-menu-mobile-display",
-    "--spectrum-coachmark-min-width",
-    "--spectrum-coachmark-padding",
-    "--spectrum-coachmark-step-color",
-    "--spectrum-coachmark-step-font-size",
-    "--spectrum-coachmark-step-font-style",
-    "--spectrum-coachmark-step-text-font-weight",
-    "--spectrum-coachmark-step-text-line-height",
-    "--spectrum-coachmark-step-to-bottom",
-    "--spectrum-coachmark-title-color",
-    "--spectrum-coachmark-title-font-family",
-    "--spectrum-coachmark-title-font-size",
-    "--spectrum-coachmark-title-font-style",
-    "--spectrum-coachmark-title-text-font-weight",
-    "--spectrum-coachmark-title-text-line-height",
-    "--spectrum-coachmark-width"
-  ],
-  "global": [
-    "--spectrum-body-color",
-    "--spectrum-body-line-height",
-    "--spectrum-body-sans-serif-font-style",
-    "--spectrum-body-sans-serif-font-weight",
-    "--spectrum-body-serif-font-style",
-    "--spectrum-border-width-100",
-    "--spectrum-corner-radius-large-default",
-    "--spectrum-heading-color",
-    "--spectrum-line-height-200",
-    "--spectrum-medium-font-weight",
-    "--spectrum-popover-edge-to-content-area",
-    "--spectrum-sans-serif-font",
-    "--spectrum-spacing-100",
-    "--spectrum-spacing-200",
-    "--spectrum-spacing-300",
-    "--spectrum-title-line-height",
-    "--spectrum-title-sans-serif-font-weight",
-    "--spectrum-title-serif-font-style"
-  ],
-  "passthroughs": [
-    "--mod-button-edge-to-visual-only",
-    "--mod-buttongroup-justify-content",
-    "--mod-buttongroup-spacing",
-    "--mod-popover-border-width",
-    "--mod-popover-content-area-spacing",
-    "--mod-popover-corner-radius"
-  ],
-  "high-contrast": []
+  "modifiers": {
+    "mod-coachmark-border-size": {
+      "description": "Used by `--spectrum-coachmark-border-size`. <br/>Defaults to `var(--mod-popover-border-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coachmark-border-radius": {
+      "description": "Used by `--spectrum-coachmark-border-radius`. <br/>Defaults to `var(--mod-popover-corner-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coachmark-min-width": {
+      "description": "Used by `.spectrum-CoachMark`. <br/>Defaults to `var(--spectrum-coachmark-min-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coachmark-max-width": {
+      "description": "Used by `.spectrum-CoachMark`. <br/>Defaults to `var(--spectrum-coachmark-max-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coachmark-width": {
+      "description": "Used by `.spectrum-CoachMark`, `.spectrum-CoachMark-image-wrapper`. <br/>Defaults to `var(--spectrum-coach-mark-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coachmark-media-min-height": {
+      "description": "Used by `.spectrum-CoachMark-image-wrapper`, `.spectrum-CoachMark-image`. <br/>Defaults to `var(--spectrum-coachmark-media-min-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coachmark-media-fixed-height": {
+      "description": "Used by `.spectrum-CoachMark-image-wrapper--fixedHeight`. <br/>Defaults to `var(--spectrum-coachmark-media-fixed-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coachmark-padding": {
+      "description": "Used by `.spectrum-CoachMark-content, .spectrum-CoachMark-footer, .spectrum-CoachMark-header`, `.spectrum-CoachMark-footer`, `.spectrum-CoachMark-step`. <br/>Defaults to `var(--spectrum-coachmark-padding)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coachmark-image-to-heading": {
+      "description": "Used by `.spectrum-CoachMark-header`. <br/>Defaults to `var(--spectrum-coachmark-image-to-heading)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coachmark-header-to-body": {
+      "description": "Used by `.spectrum-CoachMark-header`. <br/>Defaults to `var(--spectrum-coachmark-header-to-body)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coachmark-title-color": {
+      "description": "Used by `.spectrum-CoachMark-title`. <br/>Defaults to `var(--spectrum-coachmark-title-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-coachmark-title-font-size": {
+      "description": "Used by `.spectrum-CoachMark-title`. <br/>Defaults to `var(--spectrum-coachmark-title-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coachmark-title-text-font-weight": {
+      "description": "Used by `.spectrum-CoachMark-title`. <br/>Defaults to `var(--spectrum-coachmark-title-text-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coachmark-title-font-family": {
+      "description": "Used by `.spectrum-CoachMark-title`. <br/>Defaults to `var(--spectrum-coachmark-title-font-family)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coachmark-title-font-style": {
+      "description": "Used by `.spectrum-CoachMark-title`. <br/>Defaults to `var(--spectrum-coachmark-title-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coachmark-title-text-line-height": {
+      "description": "Used by `.spectrum-CoachMark-title`. <br/>Defaults to `var(--spectrum-coachmark-title-text-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coachmark-heading-to-action-button": {
+      "description": "Used by `.spectrum-CoachMark-action-menu`. <br/>Defaults to `var(--spectrum-spacing-300)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coachmark-action-menu-vertical-offset": {
+      "description": "Used by `.spectrum-CoachMark-action-menu`. <br/>Defaults to `var(--spectrum-coachmark-action-menu-vertical-offset)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coachmark-body-to-footer": {
+      "description": "Used by `.spectrum-CoachMark-content`. <br/>Defaults to `var(--spectrum-coachmark-body-to-footer)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coachmark-content-font-color": {
+      "description": "Used by `.spectrum-CoachMark-content`. <br/>Defaults to `var(--spectrum-body-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-coachmark-content-font-size": {
+      "description": "Used by `.spectrum-CoachMark-content`. <br/>Defaults to `var(--spectrum-coachmark-content-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coachmark-content-font-weight": {
+      "description": "Used by `.spectrum-CoachMark-content`. <br/>Defaults to `var(--spectrum-coachmark-content-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coachmark-content-font-family": {
+      "description": "Used by `.spectrum-CoachMark-content`. <br/>Defaults to `var(--spectrum-sans-serif-font)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coachmark-content-font-style": {
+      "description": "Used by `.spectrum-CoachMark-content`. <br/>Defaults to `var(--spectrum-body-sans-serif-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coachmark-content-line-height": {
+      "description": "Used by `.spectrum-CoachMark-content`. <br/>Defaults to `var(--spectrum-body-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coachmark-step-to-bottom": {
+      "description": "Used by `.spectrum-CoachMark-step`. <br/>Defaults to `var(--spectrum-coachmark-step-to-bottom)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coachmark-step-color": {
+      "description": "Used by `.spectrum-CoachMark-step`. <br/>Defaults to `var(--spectrum-coachmark-step-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-coachmark-step-font-size": {
+      "description": "Used by `.spectrum-CoachMark-step`. <br/>Defaults to `var(--spectrum-coachmark-step-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coachmark-step-text-font-weight": {
+      "description": "Used by `.spectrum-CoachMark-step`. <br/>Defaults to `var(--spectrum-coachmark-step-text-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coachmark-step-font-style": {
+      "description": "Used by `.spectrum-CoachMark-step`. <br/>Defaults to `var(--spectrum-coachmark-step-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-coachmark-step-text-line-height": {
+      "description": "Used by `.spectrum-CoachMark-step`. <br/>Defaults to `var(--spectrum-coachmark-step-text-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-coachmark-width": {
+      "value": "296px",
+      "description": "Defined in `.spectrum-CoachMark`. <br/>Used by `.spectrum-CoachMark`. <br/>Defaults to `var(--spectrum-coach-mark-width)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coach-mark-width": {
+      "value": "296px",
+      "description": "Used by `--spectrum-coachmark-width`, `.spectrum-CoachMark-image-wrapper`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coachmark-min-width": {
+      "value": "296px",
+      "description": "Defined in `.spectrum-CoachMark`. <br/>Used by `.spectrum-CoachMark`. <br/>Defaults to `var(--spectrum-coach-mark-minimum-width)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coach-mark-minimum-width": {
+      "value": "296px",
+      "description": "Used by `--spectrum-coachmark-min-width`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coachmark-max-width": {
+      "value": "380px",
+      "description": "Defined in `.spectrum-CoachMark`. <br/>Used by `.spectrum-CoachMark`. <br/>Defaults to `var(--spectrum-coach-mark-maximum-width)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coach-mark-maximum-width": {
+      "value": "380px",
+      "description": "Used by `--spectrum-coachmark-max-width`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coachmark-media-min-height": {
+      "value": "166px",
+      "description": "Defined in `.spectrum-CoachMark`. <br/>Used by `.spectrum-CoachMark-image-wrapper`, `.spectrum-CoachMark-image`. <br/>Defaults to `var(--spectrum-coach-mark-media-minimum-height)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coach-mark-media-minimum-height": {
+      "value": "166px",
+      "description": "Used by `--spectrum-coachmark-media-min-height`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coachmark-border-size": {
+      "value": "var(--mod-coachmark-border-size, var(--mod-popover-border-width))",
+      "description": "Defined in `.spectrum-CoachMark`. <br/>Used by `.spectrum-CoachMark-image-wrapper`, `.spectrum-CoachMark-image`. <br/>Defaults to `var(--mod-coachmark-border-size, var(--mod-popover-border-width))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coachmark-border-radius": {
+      "value": "var(--mod-coachmark-border-radius, var(--mod-popover-corner-radius))",
+      "description": "Defined in `.spectrum-CoachMark`. <br/>Used by `.spectrum-CoachMark-image`. <br/>Defaults to `var(--mod-coachmark-border-radius, var(--mod-popover-corner-radius))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coachmark-media-fixed-height": {
+      "value": "222px",
+      "description": "Defined in `.spectrum-CoachMark`. <br/>Used by `.spectrum-CoachMark-image-wrapper--fixedHeight`. <br/>Defaults to `var(--spectrum-coach-mark-media-height)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coach-mark-media-height": {
+      "value": "222px",
+      "description": "Used by `--spectrum-coachmark-media-fixed-height`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coachmark-padding": {
+      "value": "16px",
+      "description": "Defined in `.spectrum-CoachMark`. <br/>Used by `.spectrum-CoachMark-content, .spectrum-CoachMark-footer, .spectrum-CoachMark-header`, `.spectrum-CoachMark-footer`, `.spectrum-CoachMark-step`. <br/>Defaults to `var(--spectrum-coach-mark-edge-to-content)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coach-mark-edge-to-content": {
+      "value": "16px",
+      "description": "Used by `--spectrum-coachmark-padding`, `--spectrum-coachmark-image-to-heading`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coachmark-image-to-heading": {
+      "value": "16px",
+      "description": "Defined in `.spectrum-CoachMark`. <br/>Used by `.spectrum-CoachMark-header`. <br/>Defaults to `var(--spectrum-coach-mark-edge-to-content)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coachmark-header-to-body": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-CoachMark`. <br/>Used by `.spectrum-CoachMark-header`. <br/>Defaults to `var(--spectrum-spacing-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coachmark-body-to-footer": {
+      "value": "16px",
+      "description": "Defined in `.spectrum-CoachMark`. <br/>Used by `.spectrum-CoachMark-content`. <br/>Defaults to `var(--spectrum-spacing-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coachmark-title-color": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-CoachMark`. <br/>Used by `.spectrum-CoachMark-title`. <br/>Defaults to `var(--spectrum-heading-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-coachmark-title-font-family": {
+      "value": "var(--spectrum-sans-serif-font)",
+      "description": "Defined in `.spectrum-CoachMark`. <br/>Used by `.spectrum-CoachMark-title`. <br/>Defaults to `var(--spectrum-sans-serif-font)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coachmark-title-font-size": {
+      "value": "var(--spectrum-title-size-s)",
+      "description": "Defined in `.spectrum-CoachMark`. <br/>Used by `.spectrum-CoachMark-title`. <br/>Defaults to `var(--spectrum-coach-mark-title-font-size)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coach-mark-title-font-size": {
+      "value": "var(--spectrum-title-size-s)",
+      "description": "Used by `--spectrum-coachmark-title-font-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coachmark-title-font-style": {
+      "value": "normal",
+      "description": "Defined in `.spectrum-CoachMark`. <br/>Used by `.spectrum-CoachMark-title`. <br/>Defaults to `var(--spectrum-title-serif-font-style)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coachmark-title-text-font-weight": {
+      "value": "700",
+      "description": "Defined in `.spectrum-CoachMark`. <br/>Used by `.spectrum-CoachMark-title`. <br/>Defaults to `var(--spectrum-title-sans-serif-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coachmark-title-text-line-height": {
+      "value": "1.3",
+      "description": "Defined in `.spectrum-CoachMark`. <br/>Used by `.spectrum-CoachMark-title`. <br/>Defaults to `var(--spectrum-title-line-height)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coachmark-content-font-size": {
+      "value": "var(--spectrum-body-size-s)",
+      "description": "Defined in `.spectrum-CoachMark`. <br/>Used by `.spectrum-CoachMark-content`. <br/>Defaults to `var(--spectrum-coach-mark-body-font-size)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coach-mark-body-font-size": {
+      "value": "var(--spectrum-body-size-s)",
+      "description": "Used by `--spectrum-coachmark-content-font-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coachmark-content-font-weight": {
+      "value": "400",
+      "description": "Defined in `.spectrum-CoachMark`. <br/>Used by `.spectrum-CoachMark-content`. <br/>Defaults to `var(--spectrum-body-sans-serif-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coachmark-step-color": {
+      "value": "var(--spectrum-gray-600)",
+      "description": "Defined in `.spectrum-CoachMark`. <br/>Used by `.spectrum-CoachMark-step`. <br/>Defaults to `var(--spectrum-coach-mark-pagination-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-coach-mark-pagination-color": {
+      "value": "var(--spectrum-gray-600)",
+      "description": "Used by `--spectrum-coachmark-step-color`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-coachmark-step-font-style": {
+      "value": "normal",
+      "description": "Defined in `.spectrum-CoachMark`. <br/>Used by `.spectrum-CoachMark-step`. <br/>Defaults to `var(--spectrum-body-serif-font-style)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coachmark-step-font-size": {
+      "value": "var(--spectrum-body-size-xs)",
+      "description": "Defined in `.spectrum-CoachMark`. <br/>Used by `.spectrum-CoachMark-step`. <br/>Defaults to `var(--spectrum-coach-mark-pagination-body-font-size)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coach-mark-pagination-body-font-size": {
+      "value": "var(--spectrum-body-size-xs)",
+      "description": "Used by `--spectrum-coachmark-step-font-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coachmark-step-text-font-weight": {
+      "value": "500",
+      "description": "Defined in `.spectrum-CoachMark`. <br/>Used by `.spectrum-CoachMark-step`. <br/>Defaults to `var(--spectrum-medium-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coachmark-step-text-line-height": {
+      "value": "1.5",
+      "description": "Defined in `.spectrum-CoachMark`. <br/>Used by `.spectrum-CoachMark-step`. <br/>Defaults to `var(--spectrum-line-height-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coachmark-step-to-bottom": {
+      "value": "33px",
+      "description": "Defined in `.spectrum-CoachMark`. <br/>Used by `.spectrum-CoachMark-step`. <br/>Defaults to `var(--spectrum-coach-mark-pagination-text-to-bottom-edge)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coach-mark-pagination-text-to-bottom-edge": {
+      "value": "33px",
+      "description": "Used by `--spectrum-coachmark-step-to-bottom`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coachmark-action-menu-vertical-offset": {
+      "description": "Used by `.spectrum-CoachMark-action-menu`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coachmark-menu-display": {
+      "value": "var(--spectrum-coachmark-menu-mobile-display)",
+      "description": "Defined in `.spectrum-CoachMark-menu--mobile`. <br/>Used by `.spectrum-CoachMark-menu`. <br/>Defaults to `var(--spectrum-coachmark-menu-mobile-display)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coachmark-menu-mobile-display": {
+      "description": "Used by `--spectrum-coachmark-menu-display`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coachmark-buttongroup-display": {
+      "value": "var(--spectrum-coachmark-buttongroup-mobile-display)",
+      "description": "Defined in `.spectrum-CoachMark-buttongroup--mobile`. <br/>Used by `.spectrum-CoachMark-buttongroup`. <br/>Defaults to `var(--spectrum-coachmark-buttongroup-mobile-display)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-coachmark-buttongroup-mobile-display": {
+      "description": "Used by `--spectrum-coachmark-buttongroup-display`.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-spacing-200": {
+      "value": "12px",
+      "description": "Used by `--spectrum-coachmark-header-to-body`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-300": {
+      "value": "16px",
+      "description": "Used by `--spectrum-coachmark-body-to-footer`, `.spectrum-CoachMark-action-menu`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-color": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-coachmark-title-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-sans-serif-font": {
+      "description": "Used by `--spectrum-coachmark-title-font-family`, `.spectrum-CoachMark-content`, `.spectrum-CoachMark-step`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-title-serif-font-style": {
+      "value": "normal",
+      "description": "Used by `--spectrum-coachmark-title-font-style`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-title-sans-serif-font-weight": {
+      "value": "700",
+      "description": "Used by `--spectrum-coachmark-title-text-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-title-line-height": {
+      "value": "1.3",
+      "description": "Used by `--spectrum-coachmark-title-text-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-sans-serif-font-weight": {
+      "value": "400",
+      "description": "Used by `--spectrum-coachmark-content-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-serif-font-style": {
+      "value": "normal",
+      "description": "Used by `--spectrum-coachmark-step-font-style`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-medium-font-weight": {
+      "value": "500",
+      "description": "Used by `--spectrum-coachmark-step-text-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-line-height-200": {
+      "value": "1.5",
+      "description": "Used by `--spectrum-coachmark-step-text-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-border-width-100": {
+      "value": "1px",
+      "description": "Used by `--mod-popover-border-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-large-default": {
+      "value": "10px",
+      "description": "Used by `--mod-popover-corner-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-popover-edge-to-content-area": {
+      "value": "8px",
+      "description": "Used by `--mod-popover-content-area-spacing`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-color": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `.spectrum-CoachMark-content`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-body-sans-serif-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-CoachMark-content`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-line-height": {
+      "value": "1.5",
+      "description": "Used by `.spectrum-CoachMark-content`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-100": {
+      "value": "8px",
+      "description": "Used by `--mod-buttongroup-spacing`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {
+    "mod-popover-border-width": {
+      "category": "Passthrough"
+    },
+    "mod-popover-corner-radius": {
+      "category": "Passthrough"
+    },
+    "mod-buttongroup-justify-content": {
+      "category": "Passthrough"
+    },
+    "mod-popover-content-area-spacing": {
+      "category": "Passthrough"
+    },
+    "mod-button-edge-to-visual-only": {
+      "category": "Passthrough"
+    },
+    "mod-buttongroup-spacing": {
+      "category": "Passthrough"
+    }
+  },
+  "high-contrast": {}
 }
diff --git a/components/coachmark/stories/coachmark.stories.js b/components/coachmark/stories/coachmark.stories.js
index 7bac386bc38..1591837bae9 100644
--- a/components/coachmark/stories/coachmark.stories.js
+++ b/components/coachmark/stories/coachmark.stories.js
@@ -1,8 +1,6 @@
 import { default as ActionButton } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js";
 import { default as Menu } from "@spectrum-css/menu/stories/menu.stories.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { CoachMarkGroup } from "./coachmark.test.js";
 import {
 	CoachMarkMediaOptionsTemplate,
@@ -10,6 +8,10 @@ import {
 	Template,
 } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * The coach mark component can be used to bring added attention to specific parts of a page, like during a tour. It is a separate component from [the coach indicator](/docs/components-coach-indicator--docs) and similar to [a popover](/docs/components-purpose--docs).
  */
@@ -94,6 +96,10 @@ export default {
 		},
 		packageJson,
 		metadata,
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 		docs: {
 			story: {
 				height: "525px",
diff --git a/components/colorarea/dist/metadata.json b/components/colorarea/dist/metadata.json
index 2580a3d0eab..c65c5c763db 100644
--- a/components/colorarea/dist/metadata.json
+++ b/components/colorarea/dist/metadata.json
@@ -11,42 +11,175 @@
     ".spectrum-ColorArea.is-focused",
     ".spectrum-ColorHandle-color"
   ],
-  "modifiers": [
-    "--mod-colorarea-border-color",
-    "--mod-colorarea-border-radius",
-    "--mod-colorarea-border-width",
-    "--mod-colorarea-disabled-background-color",
-    "--mod-colorarea-height",
-    "--mod-colorarea-min-height",
-    "--mod-colorarea-min-width",
-    "--mod-colorarea-width"
-  ],
-  "component": [
-    "--spectrum-color-area-border-opacity",
-    "--spectrum-color-area-border-rounding",
-    "--spectrum-color-area-border-width",
-    "--spectrum-color-area-height",
-    "--spectrum-color-area-minimum-height",
-    "--spectrum-color-area-minimum-width",
-    "--spectrum-color-area-width",
-    "--spectrum-colorarea-border-color",
-    "--spectrum-colorarea-border-color-rgb",
-    "--spectrum-colorarea-border-radius",
-    "--spectrum-colorarea-border-width",
-    "--spectrum-colorarea-disabled-background-color",
-    "--spectrum-colorarea-height",
-    "--spectrum-colorarea-min-height",
-    "--spectrum-colorarea-min-width",
-    "--spectrum-colorarea-width"
-  ],
-  "global": [
-    "--spectrum-disabled-background-color",
-    "--spectrum-gray-1000-rgb"
-  ],
-  "passthroughs": [],
-  "high-contrast": [
-    "--highcontrast-colorarea-border-color",
-    "--highcontrast-colorarea-border-color-disabled",
-    "--highcontrast-colorarea-fill-color-disabled"
-  ]
+  "modifiers": {
+    "mod-colorarea-min-width": {
+      "description": "Used by `.spectrum-ColorArea`. <br/>Defaults to `var(--spectrum-colorarea-min-width)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-colorarea-min-height": {
+      "description": "Used by `.spectrum-ColorArea`. <br/>Defaults to `var(--spectrum-colorarea-min-height)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-colorarea-width": {
+      "description": "Used by `.spectrum-ColorArea`, `.spectrum-ColorArea-handle`. <br/>Defaults to `var(--spectrum-colorarea-width)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-colorarea-height": {
+      "description": "Used by `.spectrum-ColorArea`. <br/>Defaults to `var(--spectrum-colorarea-height)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-colorarea-border-radius": {
+      "description": "Used by `.spectrum-ColorArea`, `.spectrum-ColorArea-gradient`. <br/>Defaults to `var(--spectrum-colorarea-border-radius)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-colorarea-border-width": {
+      "description": "Used by `.spectrum-ColorArea`, `.spectrum-ColorArea.is-disabled`, `.spectrum-ColorArea-gradient`. <br/>Defaults to `var(--spectrum-colorarea-border-width)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-colorarea-border-color": {
+      "description": "Used by `.spectrum-ColorArea`. <br/>Defaults to `var(--spectrum-colorarea-border-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-colorarea-disabled-background-color": {
+      "description": "Used by `.spectrum-ColorArea.is-disabled`. <br/>Defaults to `var(--spectrum-colorarea-disabled-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-colorarea-border-radius": {
+      "value": "7px",
+      "description": "Defined in `.spectrum-ColorArea`. <br/>Used by `.spectrum-ColorArea`, `.spectrum-ColorArea-gradient`. <br/>Defaults to `var(--spectrum-color-area-border-rounding)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-color-area-border-rounding": {
+      "value": "7px",
+      "description": "Used by `--spectrum-colorarea-border-radius`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-colorarea-border-color-rgb": {
+      "value": "var(--spectrum-gray-1000-rgb)",
+      "description": "Defined in `.spectrum-ColorArea`. <br/>Used by `--spectrum-colorarea-border-color`. <br/>Defaults to `var(--spectrum-gray-1000-rgb)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-colorarea-border-color": {
+      "value": "rgb(var(--spectrum-colorarea-border-color-rgb), var(--spectrum-color-area-border-opacity))",
+      "description": "Defined in `.spectrum-ColorArea`. <br/>Used by `.spectrum-ColorArea`. <br/>Defaults to `rgb(var(--spectrum-colorarea-border-color-rgb), var(--spectrum-color-area-border-opacity))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-color-area-border-opacity": {
+      "value": "0.1",
+      "description": "Used by `--spectrum-colorarea-border-color`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-colorarea-border-width": {
+      "value": "1px",
+      "description": "Defined in `.spectrum-ColorArea`. <br/>Used by `.spectrum-ColorArea`, `.spectrum-ColorArea.is-disabled`, `.spectrum-ColorArea-handle`, `.spectrum-ColorArea-gradient`. <br/>Defaults to `var(--spectrum-color-area-border-width)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-color-area-border-width": {
+      "value": "1px",
+      "description": "Used by `--spectrum-colorarea-border-width`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-colorarea-disabled-background-color": {
+      "value": "var(--spectrum-gray-100)",
+      "description": "Defined in `.spectrum-ColorArea`. <br/>Used by `.spectrum-ColorArea.is-disabled`. <br/>Defaults to `var(--spectrum-disabled-background-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-colorarea-height": {
+      "value": "192px",
+      "description": "Defined in `.spectrum-ColorArea`. <br/>Used by `.spectrum-ColorArea`. <br/>Defaults to `var(--spectrum-color-area-height)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-color-area-height": {
+      "value": "192px",
+      "description": "Used by `--spectrum-colorarea-height`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-colorarea-width": {
+      "value": "192px",
+      "description": "Defined in `.spectrum-ColorArea`. <br/>Used by `.spectrum-ColorArea`, `.spectrum-ColorArea-handle`. <br/>Defaults to `var(--spectrum-color-area-width)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-color-area-width": {
+      "value": "192px",
+      "description": "Used by `--spectrum-colorarea-width`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-colorarea-min-width": {
+      "value": "64px",
+      "description": "Defined in `.spectrum-ColorArea`. <br/>Used by `.spectrum-ColorArea`. <br/>Defaults to `var(--spectrum-color-area-minimum-width)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-color-area-minimum-width": {
+      "value": "64px",
+      "description": "Used by `--spectrum-colorarea-min-width`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-colorarea-min-height": {
+      "value": "64px",
+      "description": "Defined in `.spectrum-ColorArea`. <br/>Used by `.spectrum-ColorArea`. <br/>Defaults to `var(--spectrum-color-area-minimum-height)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-color-area-minimum-height": {
+      "value": "64px",
+      "description": "Used by `--spectrum-colorarea-min-height`.",
+      "control": "color",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-gray-1000-rgb": {
+      "description": "Used by `--spectrum-colorarea-border-color-rgb`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-disabled-background-color": {
+      "value": "var(--spectrum-gray-100)",
+      "description": "Used by `--spectrum-colorarea-disabled-background-color`.",
+      "control": "color",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {
+    "highcontrast-colorarea-border-color": {
+      "value": "var(--mod-colorarea-border-color, var(--spectrum-colorarea-border-color))",
+      "description": "Defined in `.spectrum-ColorArea`. <br/>Used by `.spectrum-ColorArea`. <br/>Defaults to `var(--mod-colorarea-border-color, var(--spectrum-colorarea-border-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-colorarea-fill-color-disabled": {
+      "value": "var(--mod-colorarea-disabled-background-color, var(--spectrum-colorarea-disabled-background-color))",
+      "description": "Defined in `.spectrum-ColorArea`. <br/>Used by `.spectrum-ColorArea.is-disabled`. <br/>Defaults to `var(--mod-colorarea-disabled-background-color, var(--spectrum-colorarea-disabled-background-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-colorarea-border-color-disabled": {
+      "value": "GrayText",
+      "description": "Defined in `.spectrum-ColorArea`. <br/>Used by `.spectrum-ColorArea.is-disabled`. <br/>Defaults to `GrayText`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/colorarea/stories/colorarea.stories.js b/components/colorarea/stories/colorarea.stories.js
index a29245bcff2..07848741b49 100644
--- a/components/colorarea/stories/colorarea.stories.js
+++ b/components/colorarea/stories/colorarea.stories.js
@@ -1,10 +1,12 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, isFocused } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { ColorAreaGroup } from "./colorarea.test.js";
 import { Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * The color area component allows users to visually select two properties of a color simultaneously. It's commonly used together with a [color slider](/docs/components-color-slider--docs) or [color wheel](/docs/components-color-wheel--docs).
  *
@@ -52,6 +54,10 @@ export default {
 		status: {
 			type: "migrated",
 		},
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 	tags: ["migrated"],
 };
diff --git a/components/colorhandle/dist/metadata.json b/components/colorhandle/dist/metadata.json
index cbd2b5d599f..45c9f3ad2da 100644
--- a/components/colorhandle/dist/metadata.json
+++ b/components/colorhandle/dist/metadata.json
@@ -3,52 +3,202 @@
   "selectors": [
     ".spectrum-ColorHandle",
     ".spectrum-ColorHandle-inner",
+    ".spectrum-ColorHandle:after",
+    ".spectrum-ColorHandle:focus-visible",
     ".spectrum-ColorHandle.is-disabled",
     ".spectrum-ColorHandle.is-disabled .spectrum-ColorHandle-inner",
-    ".spectrum-ColorHandle.is-focused",
-    ".spectrum-ColorHandle:after",
-    ".spectrum-ColorHandle:focus-visible"
-  ],
-  "modifiers": [
-    "--mod-colorhandle-animation-duration",
-    "--mod-colorhandle-animation-easing",
-    "--mod-colorhandle-border-color",
-    "--mod-colorhandle-border-color-disabled",
-    "--mod-colorhandle-border-width",
-    "--mod-colorhandle-fill-color-disabled",
-    "--mod-colorhandle-focused-size",
-    "--mod-colorhandle-hitarea-border-radius",
-    "--mod-colorhandle-hitarea-size",
-    "--mod-colorhandle-inner-border-color",
-    "--mod-colorhandle-inner-border-width",
-    "--mod-colorhandle-outer-border-color",
-    "--mod-colorhandle-outer-border-width",
-    "--mod-colorhandle-size"
-  ],
-  "component": [
-    "--spectrum-color-handle-border-width",
-    "--spectrum-color-handle-inner-border-opacity",
-    "--spectrum-color-handle-inner-border-width",
-    "--spectrum-color-handle-outer-border-opacity",
-    "--spectrum-color-handle-outer-border-width",
-    "--spectrum-color-handle-size",
-    "--spectrum-color-handle-size-key-focus",
-    "--spectrum-colorhandle-inner-border-color",
-    "--spectrum-colorhandle-outer-border-color",
-    "--spectrum-colorhandle-outer-border-width"
-  ],
-  "global": [
-    "--spectrum-animation-duration-100",
-    "--spectrum-black-rgb",
-    "--spectrum-color-control-track-width",
-    "--spectrum-disabled-background-color",
-    "--spectrum-disabled-content-color",
-    "--spectrum-picked-color",
-    "--spectrum-white"
+    ".spectrum-ColorHandle.is-focused"
   ],
-  "passthroughs": ["--mod-opacity-checkerboard-position"],
-  "high-contrast": [
-    "--highcontrast-colorhandle-border-color-disabled",
-    "--highcontrast-colorhandle-fill-color-disabled"
-  ]
+  "modifiers": {
+    "mod-colorhandle-size": {
+      "description": "Used by `.spectrum-ColorHandle`, `.spectrum-ColorHandle.is-focused, .spectrum-ColorHandle:focus-visible`. <br/>Defaults to `var(--spectrum-color-handle-size)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-colorhandle-border-width": {
+      "description": "Used by `.spectrum-ColorHandle`. <br/>Defaults to `var(--spectrum-color-handle-border-width)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-colorhandle-border-color": {
+      "description": "Used by `.spectrum-ColorHandle`. <br/>Defaults to `var(--spectrum-white)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-colorhandle-outer-border-width": {
+      "description": "Used by `.spectrum-ColorHandle`. <br/>Defaults to `var(--spectrum-colorhandle-outer-border-width)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-colorhandle-outer-border-color": {
+      "description": "Used by `.spectrum-ColorHandle`. <br/>Defaults to `var(--spectrum-colorhandle-outer-border-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-colorhandle-animation-duration": {
+      "description": "Used by `.spectrum-ColorHandle`. <br/>Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-colorhandle-animation-easing": {
+      "description": "Used by `.spectrum-ColorHandle`.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-colorhandle-hitarea-size": {
+      "description": "Used by `.spectrum-ColorHandle:after`. <br/>Defaults to `var(--spectrum-color-control-track-width)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-colorhandle-hitarea-border-radius": {
+      "description": "Used by `.spectrum-ColorHandle:after`.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-colorhandle-focused-size": {
+      "description": "Used by `.spectrum-ColorHandle.is-focused, .spectrum-ColorHandle:focus-visible`. <br/>Defaults to `var(--spectrum-color-handle-size-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-colorhandle-border-color-disabled": {
+      "description": "Used by `.spectrum-ColorHandle.is-disabled`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-colorhandle-fill-color-disabled": {
+      "description": "Used by `.spectrum-ColorHandle.is-disabled`. <br/>Defaults to `var(--spectrum-disabled-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-colorhandle-inner-border-width": {
+      "description": "Used by `.spectrum-ColorHandle-inner`. <br/>Defaults to `var(--spectrum-color-handle-inner-border-width)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-colorhandle-inner-border-color": {
+      "description": "Used by `.spectrum-ColorHandle-inner`. <br/>Defaults to `var(--spectrum-colorhandle-inner-border-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-colorhandle-outer-border-color": {
+      "value": "rgb(var(--spectrum-black-rgb), var(--spectrum-color-handle-outer-border-opacity))",
+      "description": "Defined in `.spectrum-ColorHandle`. <br/>Used by `.spectrum-ColorHandle`. <br/>Defaults to `rgb(var(--spectrum-black-rgb), var(--spectrum-color-handle-outer-border-opacity))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-color-handle-outer-border-opacity": {
+      "value": "0.42",
+      "description": "Used by `--spectrum-colorhandle-outer-border-color`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-colorhandle-outer-border-width": {
+      "value": "1px",
+      "description": "Defined in `.spectrum-ColorHandle`. <br/>Used by `.spectrum-ColorHandle`. <br/>Defaults to `var(--spectrum-color-handle-outer-border-width)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-color-handle-outer-border-width": {
+      "value": "1px",
+      "description": "Used by `--spectrum-colorhandle-outer-border-width`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-colorhandle-inner-border-color": {
+      "value": "rgb(var(--spectrum-black-rgb), var(--spectrum-color-handle-inner-border-opacity))",
+      "description": "Defined in `.spectrum-ColorHandle`. <br/>Used by `.spectrum-ColorHandle-inner`. <br/>Defaults to `rgb(var(--spectrum-black-rgb), var(--spectrum-color-handle-inner-border-opacity))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-color-handle-inner-border-opacity": {
+      "value": "0.42",
+      "description": "Used by `--spectrum-colorhandle-inner-border-color`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-color-handle-size": {
+      "value": "16px",
+      "description": "Used by `.spectrum-ColorHandle`, `.spectrum-ColorHandle.is-focused, .spectrum-ColorHandle:focus-visible`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-color-handle-border-width": {
+      "value": "2px",
+      "description": "Used by `.spectrum-ColorHandle`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-color-handle-size-key-focus": {
+      "value": "32px",
+      "description": "Used by `.spectrum-ColorHandle.is-focused, .spectrum-ColorHandle:focus-visible`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-color-handle-inner-border-width": {
+      "value": "1px",
+      "description": "Used by `.spectrum-ColorHandle-inner`.",
+      "control": "color",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-black-rgb": {
+      "description": "Used by `--spectrum-colorhandle-outer-border-color`, `--spectrum-colorhandle-inner-border-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-white": {
+      "value": "rgb(255, 255, 255)",
+      "description": "Used by `.spectrum-ColorHandle`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-animation-duration-100": {
+      "description": "Used by `.spectrum-ColorHandle`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-color-control-track-width": {
+      "value": "24px",
+      "description": "Used by `.spectrum-ColorHandle:after`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-disabled-content-color": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Used by `.spectrum-ColorHandle.is-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-disabled-background-color": {
+      "value": "var(--spectrum-gray-100)",
+      "description": "Used by `.spectrum-ColorHandle.is-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-picked-color": {
+      "description": "Used by `.spectrum-ColorHandle-inner`.",
+      "control": "color",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {
+    "mod-opacity-checkerboard-position": {
+      "category": "Passthrough"
+    }
+  },
+  "high-contrast": {
+    "highcontrast-colorhandle-border-color-disabled": {
+      "value": "var(--mod-colorhandle-border-color-disabled, var(--spectrum-disabled-content-color))",
+      "description": "Defined in `.spectrum-ColorHandle.is-disabled`. <br/>Used by `.spectrum-ColorHandle.is-disabled`. <br/>Defaults to `var(--mod-colorhandle-border-color-disabled, var(--spectrum-disabled-content-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-colorhandle-fill-color-disabled": {
+      "value": "var(--mod-colorhandle-fill-color-disabled, var(--spectrum-disabled-background-color))",
+      "description": "Defined in `.spectrum-ColorHandle.is-disabled`. <br/>Used by `.spectrum-ColorHandle.is-disabled`. <br/>Defaults to `var(--mod-colorhandle-fill-color-disabled, var(--spectrum-disabled-background-color))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/colorhandle/stories/colorhandle.stories.js b/components/colorhandle/stories/colorhandle.stories.js
index ff525d51d6d..2957824c238 100644
--- a/components/colorhandle/stories/colorhandle.stories.js
+++ b/components/colorhandle/stories/colorhandle.stories.js
@@ -1,10 +1,12 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, isFocused } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { ColorHandleGroup } from "./colorhandle.test.js";
 import { Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * The color handle component is used with [color area](/docs/components-color-area--docs), [color slider](/docs/components-color-slider--docs) and [color wheel](/docs/components-color-wheel--docs) as the color selector.
  */
@@ -55,6 +57,10 @@ export default {
 		status: {
 			type: "migrated",
 		},
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 	tags: ["migrated"],
 };
diff --git a/components/colorloupe/dist/metadata.json b/components/colorloupe/dist/metadata.json
index 8ec7836e2ed..784ea6126c7 100644
--- a/components/colorloupe/dist/metadata.json
+++ b/components/colorloupe/dist/metadata.json
@@ -7,57 +7,256 @@
     ".spectrum-ColorLoupe-checkerboard-pattern",
     ".spectrum-ColorLoupe-inner-border",
     ".spectrum-ColorLoupe-outer-border",
+    ".spectrum-ColorLoupe:dir(rtl)",
     ".spectrum-ColorLoupe.is-disabled",
-    ".spectrum-ColorLoupe.is-open",
-    ".spectrum-ColorLoupe:dir(rtl)"
+    ".spectrum-ColorLoupe.is-open"
   ],
-  "modifiers": [
-    "--mod-colorloupe-animation-distance",
-    "--mod-colorloupe-drop-shadow-blur",
-    "--mod-colorloupe-drop-shadow-color",
-    "--mod-colorloupe-drop-shadow-x",
-    "--mod-colorloupe-drop-shadow-y",
-    "--mod-colorloupe-inner-border-color",
-    "--mod-colorloupe-inner-border-width",
-    "--mod-colorloupe-offset",
-    "--mod-colorloupe-outer-border-color",
-    "--mod-colorloupe-outer-border-width"
-  ],
-  "component": [
-    "--spectrum-color-loupe-bottom-to-color-handle",
-    "--spectrum-color-loupe-height",
-    "--spectrum-color-loupe-inner-border",
-    "--spectrum-color-loupe-inner-border-width",
-    "--spectrum-color-loupe-outer-border",
-    "--spectrum-color-loupe-outer-border-width",
-    "--spectrum-color-loupe-width",
-    "--spectrum-colorloupe-animation-distance",
-    "--spectrum-colorloupe-checkerboard-dark-color",
-    "--spectrum-colorloupe-checkerboard-fill",
-    "--spectrum-colorloupe-checkerboard-light-color",
-    "--spectrum-colorloupe-drop-shadow-blur",
-    "--spectrum-colorloupe-drop-shadow-color",
-    "--spectrum-colorloupe-drop-shadow-x",
-    "--spectrum-colorloupe-drop-shadow-y",
-    "--spectrum-colorloupe-height",
-    "--spectrum-colorloupe-inner-border-color",
-    "--spectrum-colorloupe-inner-border-width",
-    "--spectrum-colorloupe-offset",
-    "--spectrum-colorloupe-outer-border-color",
-    "--spectrum-colorloupe-outer-border-width",
-    "--spectrum-colorloupe-width"
-  ],
-  "global": [
-    "--spectrum-color-handle-outer-border-width",
-    "--spectrum-color-handle-size",
-    "--spectrum-drop-shadow-elevated-blur",
-    "--spectrum-drop-shadow-elevated-color",
-    "--spectrum-drop-shadow-elevated-x",
-    "--spectrum-drop-shadow-elevated-y",
-    "--spectrum-opacity-checkerboard-square-dark",
-    "--spectrum-opacity-checkerboard-square-light",
-    "--spectrum-picked-color"
-  ],
-  "passthroughs": [],
-  "high-contrast": ["--highcontrast-colorloupe-outer-border-color"]
+  "modifiers": {
+    "mod-colorloupe-animation-distance": {
+      "description": "Used by `.spectrum-ColorLoupe`. <br/>Defaults to `var(--spectrum-colorloupe-animation-distance)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-colorloupe-offset": {
+      "description": "Used by `.spectrum-ColorLoupe`. <br/>Defaults to `var(--spectrum-colorloupe-offset)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-colorloupe-drop-shadow-x": {
+      "description": "Used by `.spectrum-ColorLoupe`. <br/>Defaults to `var(--spectrum-colorloupe-drop-shadow-x)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-colorloupe-drop-shadow-y": {
+      "description": "Used by `.spectrum-ColorLoupe`. <br/>Defaults to `var(--spectrum-colorloupe-drop-shadow-y)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-colorloupe-drop-shadow-blur": {
+      "description": "Used by `.spectrum-ColorLoupe`. <br/>Defaults to `var(--spectrum-colorloupe-drop-shadow-blur)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-colorloupe-drop-shadow-color": {
+      "description": "Used by `.spectrum-ColorLoupe`. <br/>Defaults to `var(--spectrum-colorloupe-drop-shadow-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-colorloupe-inner-border-color": {
+      "description": "Used by `.spectrum-ColorLoupe-inner-border`. <br/>Defaults to `var(--spectrum-colorloupe-inner-border-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-colorloupe-inner-border-width": {
+      "description": "Used by `.spectrum-ColorLoupe-inner-border`. <br/>Defaults to `var(--spectrum-colorloupe-inner-border-width)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-colorloupe-outer-border-color": {
+      "description": "Used by `.spectrum-ColorLoupe-outer-border`. <br/>Defaults to `var(--spectrum-colorloupe-outer-border-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-colorloupe-outer-border-width": {
+      "description": "Used by `.spectrum-ColorLoupe-outer-border`. <br/>Defaults to `var(--spectrum-colorloupe-outer-border-width)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-colorloupe-width": {
+      "value": "48px",
+      "description": "Defined in `.spectrum-ColorLoupe`. <br/>Used by `.spectrum-ColorLoupe`, `.spectrum-ColorLoupe:dir(rtl)`. <br/>Defaults to `var(--spectrum-color-loupe-width)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-color-loupe-width": {
+      "value": "48px",
+      "description": "Used by `--spectrum-colorloupe-width`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-colorloupe-height": {
+      "value": "64px",
+      "description": "Defined in `.spectrum-ColorLoupe`. <br/>Used by `.spectrum-ColorLoupe`. <br/>Defaults to `var(--spectrum-color-loupe-height)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-color-loupe-height": {
+      "value": "64px",
+      "description": "Used by `--spectrum-colorloupe-height`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-colorloupe-offset": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-ColorLoupe`. <br/>Used by `.spectrum-ColorLoupe`. <br/>Defaults to `var(--spectrum-color-loupe-bottom-to-color-handle)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-color-loupe-bottom-to-color-handle": {
+      "value": "12px",
+      "description": "Used by `--spectrum-colorloupe-offset`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-colorloupe-animation-distance": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-ColorLoupe`. <br/>Used by `.spectrum-ColorLoupe`. <br/>Defaults to `8px`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-colorloupe-drop-shadow-x": {
+      "value": "0px",
+      "description": "Defined in `.spectrum-ColorLoupe`. <br/>Used by `.spectrum-ColorLoupe`. <br/>Defaults to `var(--spectrum-drop-shadow-elevated-x)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-colorloupe-drop-shadow-y": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-ColorLoupe`. <br/>Used by `.spectrum-ColorLoupe`. <br/>Defaults to `var(--spectrum-drop-shadow-elevated-y)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-colorloupe-drop-shadow-blur": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-ColorLoupe`. <br/>Used by `.spectrum-ColorLoupe`. <br/>Defaults to `var(--spectrum-drop-shadow-elevated-blur)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-colorloupe-drop-shadow-color": {
+      "value": "var(--spectrum-drop-shadow-color-200)",
+      "description": "Defined in `.spectrum-ColorLoupe`. <br/>Used by `.spectrum-ColorLoupe`. <br/>Defaults to `var(--spectrum-drop-shadow-elevated-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-colorloupe-outer-border-width": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-ColorLoupe`. <br/>Used by `.spectrum-ColorLoupe-outer-border`. <br/>Defaults to `var(--spectrum-color-loupe-outer-border-width)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-color-loupe-outer-border-width": {
+      "value": "2px",
+      "description": "Used by `--spectrum-colorloupe-outer-border-width`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-colorloupe-inner-border-width": {
+      "value": "1px",
+      "description": "Defined in `.spectrum-ColorLoupe`. <br/>Used by `.spectrum-ColorLoupe-inner-border`. <br/>Defaults to `var(--spectrum-color-loupe-inner-border-width)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-color-loupe-inner-border-width": {
+      "value": "1px",
+      "description": "Used by `--spectrum-colorloupe-inner-border-width`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-colorloupe-outer-border-color": {
+      "value": "rgb(255, 255, 255)",
+      "description": "Defined in `.spectrum-ColorLoupe`. <br/>Used by `.spectrum-ColorLoupe-outer-border`. <br/>Defaults to `var(--spectrum-color-loupe-outer-border)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-color-loupe-outer-border": {
+      "value": "rgb(255, 255, 255)",
+      "description": "Used by `--spectrum-colorloupe-outer-border-color`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-colorloupe-inner-border-color": {
+      "value": "rgba(0, 0, 0, 0.12)",
+      "description": "Defined in `.spectrum-ColorLoupe`. <br/>Used by `.spectrum-ColorLoupe-inner-border`. <br/>Defaults to `var(--spectrum-color-loupe-inner-border)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-color-loupe-inner-border": {
+      "value": "rgba(0, 0, 0, 0.12)",
+      "description": "Used by `--spectrum-colorloupe-inner-border-color`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-colorloupe-checkerboard-dark-color": {
+      "value": "var(--spectrum-gray-200)",
+      "description": "Defined in `.spectrum-ColorLoupe`. <br/>Used by `.spectrum-ColorLoupe-checkerboard-pattern`. <br/>Defaults to `var(--spectrum-opacity-checkerboard-square-dark)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-colorloupe-checkerboard-light-color": {
+      "value": "rgb(255, 255, 255)",
+      "description": "Defined in `.spectrum-ColorLoupe`. <br/>Used by `.spectrum-ColorLoupe-checkerboard-background`. <br/>Defaults to `var(--spectrum-opacity-checkerboard-square-light)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-colorloupe-checkerboard-fill": {
+      "description": "Used by `.spectrum-ColorLoupe-checkerboard-fill`.",
+      "control": "color",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-drop-shadow-elevated-x": {
+      "value": "0px",
+      "description": "Used by `--spectrum-colorloupe-drop-shadow-x`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-drop-shadow-elevated-y": {
+      "value": "2px",
+      "description": "Used by `--spectrum-colorloupe-drop-shadow-y`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-drop-shadow-elevated-blur": {
+      "value": "8px",
+      "description": "Used by `--spectrum-colorloupe-drop-shadow-blur`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-drop-shadow-elevated-color": {
+      "value": "var(--spectrum-drop-shadow-color-200)",
+      "description": "Used by `--spectrum-colorloupe-drop-shadow-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-opacity-checkerboard-square-dark": {
+      "value": "var(--spectrum-gray-200)",
+      "description": "Used by `--spectrum-colorloupe-checkerboard-dark-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-opacity-checkerboard-square-light": {
+      "value": "rgb(255, 255, 255)",
+      "description": "Used by `--spectrum-colorloupe-checkerboard-light-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-color-handle-size": {
+      "value": "16px",
+      "description": "Used by `.spectrum-ColorLoupe`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-color-handle-outer-border-width": {
+      "value": "1px",
+      "description": "Used by `.spectrum-ColorLoupe`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-picked-color": {
+      "description": "Used by `.spectrum-ColorLoupe-inner-border`.",
+      "control": "color",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {
+    "highcontrast-colorloupe-outer-border-color": {
+      "value": "var(--mod-colorloupe-outer-border-color, var(--spectrum-colorloupe-outer-border-color))",
+      "description": "Defined in `.spectrum-ColorLoupe`. <br/>Used by `.spectrum-ColorLoupe-outer-border`. <br/>Defaults to `var(--mod-colorloupe-outer-border-color, var(--spectrum-colorloupe-outer-border-color))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/colorloupe/stories/colorloupe.stories.js b/components/colorloupe/stories/colorloupe.stories.js
index 242a4bf82bf..0fa244193dc 100644
--- a/components/colorloupe/stories/colorloupe.stories.js
+++ b/components/colorloupe/stories/colorloupe.stories.js
@@ -1,8 +1,10 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, isOpen } from "@spectrum-css/preview/types";
+import { ColorLoupeGroup } from "./colorloupe.test.js";
+
+// Local assets to render the component styles and structure
 import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
-import { ColorLoupeGroup } from "./colorloupe.test.js";
 
 /**
  * The color loupe component shows the output color that would otherwise be covered by a cursor, stylus, or finger during color selection.
@@ -48,6 +50,10 @@ export default {
 		status: {
 			type: "migrated",
 		},
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 	tags: ["migrated"],
 };
diff --git a/components/colorslider/dist/metadata.json b/components/colorslider/dist/metadata.json
index aad9494baf6..98386ce44ec 100644
--- a/components/colorslider/dist/metadata.json
+++ b/components/colorslider/dist/metadata.json
@@ -15,41 +15,168 @@
     ".spectrum-ColorSlider.is-disabled .spectrum-ColorSlider-gradient",
     ".spectrum-ColorSlider.is-focused"
   ],
-  "modifiers": [
-    "--mod-color-slider-background-color-disabled",
-    "--mod-color-slider-border-color",
-    "--mod-color-slider-border-color-disabled",
-    "--mod-color-slider-border-rounding",
-    "--mod-color-slider-border-width",
-    "--mod-color-slider-control-track-height",
-    "--mod-color-slider-control-track-width",
-    "--mod-color-slider-handle-hitarea-border-radius",
-    "--mod-color-slider-length",
-    "--mod-color-slider-minimum-length",
-    "--mod-color-slider-vertical-control-track-width",
-    "--mod-color-slider-vertical-height",
-    "--mod-color-slider-vertical-minimum-height"
-  ],
-  "component": [
-    "--spectrum-color-slider-border-color-default",
-    "--spectrum-color-slider-border-color-local",
-    "--spectrum-color-slider-border-opacity",
-    "--spectrum-color-slider-border-rounding",
-    "--spectrum-color-slider-border-width",
-    "--spectrum-color-slider-control-track-width",
-    "--spectrum-color-slider-fill-color-disabled",
-    "--spectrum-color-slider-length",
-    "--spectrum-color-slider-minimum-length"
-  ],
-  "global": [
-    "--spectrum-color-control-track-width",
-    "--spectrum-disabled-background-color",
-    "--spectrum-gray-1000-rgb"
-  ],
-  "passthroughs": ["--mod-colorhandle-hitarea-border-radius"],
-  "high-contrast": [
-    "--highcontrast-color-slider-background-color-disabled",
-    "--highcontrast-color-slider-border-color",
-    "--highcontrast-color-slider-border-color-disabled"
-  ]
+  "modifiers": {
+    "mod-color-slider-handle-hitarea-border-radius": {
+      "description": "Used by `--mod-colorhandle-hitarea-border-radius`.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-color-slider-minimum-length": {
+      "description": "Used by `.spectrum-ColorSlider`, `.spectrum-ColorSlider--vertical`. <br/>Defaults to `var(--spectrum-color-slider-minimum-length)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-color-slider-length": {
+      "description": "Used by `.spectrum-ColorSlider`, `.spectrum-ColorSlider--vertical`. <br/>Defaults to `var(--spectrum-color-slider-length)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-color-slider-control-track-width": {
+      "description": "Used by `.spectrum-ColorSlider`. <br/>Defaults to `var(--spectrum-color-slider-control-track-width)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-color-slider-vertical-minimum-height": {
+      "description": "Used by `.spectrum-ColorSlider--vertical`. <br/>Defaults to `var(--mod-color-slider-minimum-length, var(--spectrum-color-slider-minimum-length))`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-color-slider-vertical-height": {
+      "description": "Used by `.spectrum-ColorSlider--vertical`. <br/>Defaults to `var(--mod-color-slider-length, var(--spectrum-color-slider-length))`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-color-slider-vertical-control-track-width": {
+      "description": "Used by `.spectrum-ColorSlider--vertical`. <br/>Defaults to `var(--mod-color-slider-control-track-height, var(--spectrum-color-slider-control-track-width))`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-color-slider-control-track-height": {
+      "description": "Used by `.spectrum-ColorSlider--vertical`. <br/>Defaults to `var(--spectrum-color-slider-control-track-width)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-color-slider-border-color": {
+      "description": "Used by `--spectrum-color-slider-border-color-local`. <br/>Defaults to `var(--spectrum-color-slider-border-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-color-slider-border-width": {
+      "description": "Used by `.spectrum-ColorSlider-checkerboard:before`. <br/>Defaults to `var(--spectrum-color-slider-border-width)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-color-slider-border-rounding": {
+      "description": "Used by `.spectrum-ColorSlider-checkerboard:before`, `.spectrum-ColorSlider-checkerboard, .spectrum-ColorSlider-gradient`. <br/>Defaults to `var(--spectrum-color-slider-border-rounding)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-color-slider-border-color-disabled": {
+      "description": "Used by `--spectrum-color-slider-border-color-local`. <br/>Defaults to `var(--spectrum-color-slider-fill-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-color-slider-background-color-disabled": {
+      "description": "Used by `.spectrum-ColorSlider.is-disabled .spectrum-ColorSlider-checkerboard`. <br/>Defaults to `var(--spectrum-color-slider-fill-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-color-slider-control-track-width": {
+      "value": "24px",
+      "description": "Defined in `.spectrum-ColorSlider`. <br/>Used by `.spectrum-ColorSlider`, `.spectrum-ColorSlider--vertical`. <br/>Defaults to `var(--spectrum-color-control-track-width)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-color-slider-border-color-default": {
+      "value": "rgb(var(--spectrum-gray-1000-rgb), var(--spectrum-color-slider-border-opacity))",
+      "description": "Defined in `.spectrum-ColorSlider`. <br/>Used by `--spectrum-color-slider-border-color-local`. <br/>Defaults to `rgb(var(--spectrum-gray-1000-rgb), var(--spectrum-color-slider-border-opacity))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-color-slider-border-opacity": {
+      "value": "0.1",
+      "description": "Used by `--spectrum-color-slider-border-color-default`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-color-slider-fill-color-disabled": {
+      "value": "var(--spectrum-gray-100)",
+      "description": "Defined in `.spectrum-ColorSlider`. <br/>Used by `--spectrum-color-slider-border-color-local`, `.spectrum-ColorSlider.is-disabled .spectrum-ColorSlider-checkerboard`. <br/>Defaults to `var(--spectrum-disabled-background-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-color-slider-minimum-length": {
+      "value": "80px",
+      "description": "Used by `.spectrum-ColorSlider`, `.spectrum-ColorSlider--vertical`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-color-slider-length": {
+      "value": "192px",
+      "description": "Used by `.spectrum-ColorSlider`, `.spectrum-ColorSlider--vertical`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-color-slider-border-color-local": {
+      "value": "var(--highcontrast-color-slider-border-color-disabled, var(--mod-color-slider-border-color-disabled, var(--spectrum-color-slider-fill-color-disabled)))",
+      "description": "Defined in `.spectrum-ColorSlider-checkerboard`, `.spectrum-ColorSlider.is-disabled .spectrum-ColorSlider-checkerboard`. <br/>Used by `.spectrum-ColorSlider-checkerboard:before`. <br/>Defaults to `var(--highcontrast-color-slider-border-color-disabled, var(--mod-color-slider-border-color-disabled, var(--spectrum-color-slider-fill-color-disabled)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-color-slider-border-width": {
+      "value": "1px",
+      "description": "Used by `.spectrum-ColorSlider-checkerboard:before`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-color-slider-border-rounding": {
+      "value": "7px",
+      "description": "Used by `.spectrum-ColorSlider-checkerboard:before`, `.spectrum-ColorSlider-checkerboard, .spectrum-ColorSlider-gradient`.",
+      "control": "color",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-color-control-track-width": {
+      "value": "24px",
+      "description": "Used by `--spectrum-color-slider-control-track-width`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-gray-1000-rgb": {
+      "description": "Used by `--spectrum-color-slider-border-color-default`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-disabled-background-color": {
+      "value": "var(--spectrum-gray-100)",
+      "description": "Used by `--spectrum-color-slider-fill-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {
+    "mod-colorhandle-hitarea-border-radius": {
+      "category": "Passthrough"
+    }
+  },
+  "high-contrast": {
+    "highcontrast-color-slider-border-color": {
+      "value": "var(--mod-color-slider-border-color, var(--spectrum-color-slider-border-color-default))",
+      "description": "Defined in `.spectrum-ColorSlider`. <br/>Used by `--spectrum-color-slider-border-color-local`. <br/>Defaults to `var(--mod-color-slider-border-color, var(--spectrum-color-slider-border-color-default))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-color-slider-border-color-disabled": {
+      "value": "var(--mod-color-slider-border-color-disabled, var(--spectrum-color-slider-fill-color-disabled))",
+      "description": "Defined in `.spectrum-ColorSlider`. <br/>Used by `--spectrum-color-slider-border-color-local`. <br/>Defaults to `var(--mod-color-slider-border-color-disabled, var(--spectrum-color-slider-fill-color-disabled))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-color-slider-background-color-disabled": {
+      "value": "var(--mod-color-slider-background-color-disabled, var(--spectrum-color-slider-fill-color-disabled))",
+      "description": "Defined in `.spectrum-ColorSlider`. <br/>Used by `.spectrum-ColorSlider.is-disabled .spectrum-ColorSlider-checkerboard`. <br/>Defaults to `var(--mod-color-slider-background-color-disabled, var(--spectrum-color-slider-fill-color-disabled))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/colorslider/stories/colorslider.stories.js b/components/colorslider/stories/colorslider.stories.js
index d6aed7a33be..12a6c4b4d41 100644
--- a/components/colorslider/stories/colorslider.stories.js
+++ b/components/colorslider/stories/colorslider.stories.js
@@ -1,10 +1,12 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, isFocused } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { ColorSliderGroup } from "./colorslider.test.js";
 import { Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * The color slider component lets users visually change an individual channel of a color.
  *
@@ -74,6 +76,10 @@ export default {
 		status: {
 			type: "migrated",
 		},
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 	tags: ["migrated"],
 };
diff --git a/components/colorwheel/dist/metadata.json b/components/colorwheel/dist/metadata.json
index 1c087a7f50f..9e73c82f3ac 100644
--- a/components/colorwheel/dist/metadata.json
+++ b/components/colorwheel/dist/metadata.json
@@ -2,58 +2,185 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-ColorWheel",
+    ".spectrum-ColorWheel-colorarea-container",
     ".spectrum-ColorWheel-ColorArea-handle",
     ".spectrum-ColorWheel-ColorArea-handle:dir(rtl)",
-    ".spectrum-ColorWheel-colorarea-container",
     ".spectrum-ColorWheel-handle",
     ".spectrum-ColorWheel-inner",
     ".spectrum-ColorWheel-slider",
     ".spectrum-ColorWheel-wheel",
     ".spectrum-ColorWheel-wheel.is-disabled",
+    ".spectrum-ColorWheel:after",
+    ".spectrum-ColorWheel:before",
     ".spectrum-ColorWheel.is-disabled",
     ".spectrum-ColorWheel.is-disabled .spectrum-ColorWheel-inner:before",
     ".spectrum-ColorWheel.is-disabled:after",
     ".spectrum-ColorWheel.is-disabled:before",
     ".spectrum-ColorWheel.is-dragged",
-    ".spectrum-ColorWheel.is-focused",
-    ".spectrum-ColorWheel:after",
-    ".spectrum-ColorWheel:before"
-  ],
-  "modifiers": [
-    "--mod-colorwheel-block-size",
-    "--mod-colorwheel-border-color",
-    "--mod-colorwheel-colorarea-container-size",
-    "--mod-colorwheel-fill-color-disabled",
-    "--mod-colorwheel-inline-size",
-    "--mod-colorwheel-min-inline-size",
-    "--mod-colorwheel-path",
-    "--mod-colorwheel-track-width"
-  ],
-  "component": [
-    "--spectrum-color-wheel-border-opacity",
-    "--spectrum-color-wheel-minimum-width",
-    "--spectrum-color-wheel-width",
-    "--spectrum-colorwheel-block-size",
-    "--spectrum-colorwheel-border-color",
-    "--spectrum-colorwheel-border-color-rgb",
-    "--spectrum-colorwheel-border-opacity",
-    "--spectrum-colorwheel-border-width",
-    "--spectrum-colorwheel-colorarea-container-size",
-    "--spectrum-colorwheel-fill-color-disabled",
-    "--spectrum-colorwheel-inline-size",
-    "--spectrum-colorwheel-min-inline-size",
-    "--spectrum-colorwheel-path",
-    "--spectrum-colorwheel-track-width"
-  ],
-  "global": [
-    "--spectrum-border-width-100",
-    "--spectrum-color-control-track-width",
-    "--spectrum-disabled-background-color",
-    "--spectrum-gray-1000-rgb"
+    ".spectrum-ColorWheel.is-focused"
   ],
-  "passthroughs": [],
-  "high-contrast": [
-    "--highcontrast-colorwheel-border-color-disabled",
-    "--highcontrast-colorwheel-fill-color-disabled"
-  ]
+  "modifiers": {
+    "mod-colorwheel-track-width": {
+      "description": "Used by `--_track-width`, `.spectrum-ColorWheel:after`, `.spectrum-ColorWheel-handle`. <br/>Defaults to `var(--spectrum-colorwheel-track-width)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-colorwheel-min-inline-size": {
+      "description": "Used by `.spectrum-ColorWheel`. <br/>Defaults to `var(--spectrum-colorwheel-min-inline-size)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-colorwheel-inline-size": {
+      "description": "Used by `.spectrum-ColorWheel`, `.spectrum-ColorWheel:before`, `.spectrum-ColorWheel-handle`. <br/>Defaults to `var(--spectrum-colorwheel-inline-size)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-colorwheel-block-size": {
+      "description": "Used by `.spectrum-ColorWheel`. <br/>Defaults to `var(--spectrum-colorwheel-block-size)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-colorwheel-border-color": {
+      "description": "Used by `.spectrum-ColorWheel:after, .spectrum-ColorWheel:before`. <br/>Defaults to `var(--spectrum-colorwheel-border-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-colorwheel-colorarea-container-size": {
+      "description": "Used by `.spectrum-ColorWheel-inner`. <br/>Defaults to `var(--spectrum-colorwheel-colorarea-container-size)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-colorwheel-path": {
+      "description": "Used by `.spectrum-ColorWheel-wheel`. <br/>Defaults to `var(--spectrum-colorwheel-path)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-colorwheel-fill-color-disabled": {
+      "description": "Used by `.spectrum-ColorWheel-wheel.is-disabled`. <br/>Defaults to `var(--spectrum-colorwheel-fill-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-colorwheel-inline-size": {
+      "value": "192px",
+      "description": "Defined in `.spectrum-ColorWheel`. <br/>Used by `.spectrum-ColorWheel`, `.spectrum-ColorWheel:before`, `.spectrum-ColorWheel-handle`. <br/>Defaults to `var(--spectrum-color-wheel-width)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-color-wheel-width": {
+      "value": "192px",
+      "description": "Used by `--spectrum-colorwheel-inline-size`, `--spectrum-colorwheel-block-size`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-colorwheel-block-size": {
+      "value": "192px",
+      "description": "Defined in `.spectrum-ColorWheel`. <br/>Used by `.spectrum-ColorWheel`. <br/>Defaults to `var(--spectrum-color-wheel-width)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-colorwheel-min-inline-size": {
+      "value": "175px",
+      "description": "Defined in `.spectrum-ColorWheel`. <br/>Used by `.spectrum-ColorWheel`. <br/>Defaults to `var(--spectrum-color-wheel-minimum-width)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-color-wheel-minimum-width": {
+      "value": "175px",
+      "description": "Used by `--spectrum-colorwheel-min-inline-size`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-colorwheel-border-color-rgb": {
+      "value": "var(--spectrum-gray-1000-rgb)",
+      "description": "Defined in `.spectrum-ColorWheel`. <br/>Used by `--spectrum-colorwheel-border-color`. <br/>Defaults to `var(--spectrum-gray-1000-rgb)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-colorwheel-border-opacity": {
+      "value": "0.1",
+      "description": "Defined in `.spectrum-ColorWheel`. <br/>Used by `--spectrum-colorwheel-border-color`. <br/>Defaults to `var(--spectrum-color-wheel-border-opacity)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-color-wheel-border-opacity": {
+      "value": "0.1",
+      "description": "Used by `--spectrum-colorwheel-border-opacity`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-colorwheel-border-color": {
+      "value": "rgb(var(--spectrum-colorwheel-border-color-rgb), var(--spectrum-colorwheel-border-opacity))",
+      "description": "Defined in `.spectrum-ColorWheel`. <br/>Used by `.spectrum-ColorWheel:after, .spectrum-ColorWheel:before`. <br/>Defaults to `rgb(var(--spectrum-colorwheel-border-color-rgb), var(--spectrum-colorwheel-border-opacity))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-colorwheel-border-width": {
+      "value": "1px",
+      "description": "Defined in `.spectrum-ColorWheel`. <br/>Used by `--_border-width`, `.spectrum-ColorWheel:before`, `.spectrum-ColorWheel:after, .spectrum-ColorWheel:before`, `.spectrum-ColorWheel:after`, `.spectrum-ColorWheel-wheel`. <br/>Defaults to `var(--spectrum-border-width-100)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-colorwheel-track-width": {
+      "value": "24px",
+      "description": "Defined in `.spectrum-ColorWheel`. <br/>Used by `--_track-width`, `.spectrum-ColorWheel:after`, `.spectrum-ColorWheel-handle`. <br/>Defaults to `var(--spectrum-color-control-track-width)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-colorwheel-fill-color-disabled": {
+      "value": "var(--spectrum-gray-100)",
+      "description": "Defined in `.spectrum-ColorWheel`. <br/>Used by `.spectrum-ColorWheel-wheel.is-disabled`. <br/>Defaults to `var(--spectrum-disabled-background-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-colorwheel-colorarea-container-size": {
+      "description": "Used by `.spectrum-ColorWheel-inner`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-colorwheel-path": {
+      "description": "Used by `.spectrum-ColorWheel-wheel`.",
+      "control": "color",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-gray-1000-rgb": {
+      "description": "Used by `--spectrum-colorwheel-border-color-rgb`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-border-width-100": {
+      "value": "1px",
+      "description": "Used by `--spectrum-colorwheel-border-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-color-control-track-width": {
+      "value": "24px",
+      "description": "Used by `--spectrum-colorwheel-track-width`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-disabled-background-color": {
+      "value": "var(--spectrum-gray-100)",
+      "description": "Used by `--spectrum-colorwheel-fill-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {
+    "highcontrast-colorwheel-border-color-disabled": {
+      "value": "GrayText",
+      "description": "Defined in `.spectrum-ColorWheel`. <br/>Used by `.spectrum-ColorWheel.is-disabled .spectrum-ColorWheel-inner:before, .spectrum-ColorWheel.is-disabled:after, .spectrum-ColorWheel.is-disabled:before`. <br/>Defaults to `GrayText`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-colorwheel-fill-color-disabled": {
+      "value": "var(--mod-colorwheel-fill-color-disabled, var(--spectrum-colorwheel-fill-color-disabled))",
+      "description": "Defined in `.spectrum-ColorWheel`. <br/>Used by `.spectrum-ColorWheel-wheel.is-disabled`. <br/>Defaults to `var(--mod-colorwheel-fill-color-disabled, var(--spectrum-colorwheel-fill-color-disabled))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/colorwheel/stories/colorwheel.stories.js b/components/colorwheel/stories/colorwheel.stories.js
index f55a704ff03..8d45463a584 100644
--- a/components/colorwheel/stories/colorwheel.stories.js
+++ b/components/colorwheel/stories/colorwheel.stories.js
@@ -1,10 +1,12 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, isFocused } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { ColorWheelGroup } from "./colorwheel.test.js";
 import { Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * The color wheel component lets users visually change an individual channel of a color on a circular track.
  *
@@ -66,6 +68,10 @@ export default {
 		status: {
 			type: "migrated",
 		},
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 	tags: ["migrated"],
 };
diff --git a/components/combobox/dist/metadata.json b/components/combobox/dist/metadata.json
index ee4f97630eb..ea13f308e31 100644
--- a/components/combobox/dist/metadata.json
+++ b/components/combobox/dist/metadata.json
@@ -15,30 +15,28 @@
     ".spectrum-Combobox--sizeS",
     ".spectrum-Combobox--sizeXL",
     ".spectrum-Combobox-button",
+    ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
+    ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):active",
+    ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):focus",
+    ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):focus-visible",
+    ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):focus:hover",
+    ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):hover",
     ".spectrum-Combobox-button.is-focused:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
     ".spectrum-Combobox-button.is-focused:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):hover",
-    ".spectrum-Combobox-button.is-invalid.is-focused:not(:disabled, .spectrum-PickerButton--quiet)",
-    ".spectrum-Combobox-button.is-invalid.is-focused:not(:disabled, .spectrum-PickerButton--quiet):hover",
-    ".spectrum-Combobox-button.is-invalid.is-keyboardFocused:not(:disabled, .spectrum-PickerButton--quiet)",
     ".spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",
     ".spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet):active",
     ".spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet):focus",
     ".spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet):focus-visible",
     ".spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet):focus:hover",
     ".spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet):hover",
+    ".spectrum-Combobox-button.is-invalid.is-focused:not(:disabled, .spectrum-PickerButton--quiet)",
+    ".spectrum-Combobox-button.is-invalid.is-focused:not(:disabled, .spectrum-PickerButton--quiet):hover",
+    ".spectrum-Combobox-button.is-invalid.is-keyboardFocused:not(:disabled, .spectrum-PickerButton--quiet)",
     ".spectrum-Combobox-button.is-keyboardFocused:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
-    ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
-    ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):active",
-    ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):focus",
-    ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):focus-visible",
-    ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):focus:hover",
-    ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):hover",
     ".spectrum-Combobox-content",
     ".spectrum-Combobox-helptext",
     ".spectrum-Combobox-helptext .spectrum-HelpText-text",
     ".spectrum-Combobox-input",
-    ".spectrum-Combobox-input.spectrum-Combobox-autocomplete",
-    ".spectrum-Combobox-input.spectrum-Combobox-autocomplete::selection",
     ".spectrum-Combobox-input:-internal-autofill-selected",
     ".spectrum-Combobox-input:-internal-autofill-selected::selection",
     ".spectrum-Combobox-input:-webkit-autofill",
@@ -57,264 +55,1172 @@
     ".spectrum-Combobox-input:lang(ja)",
     ".spectrum-Combobox-input:lang(ko)",
     ".spectrum-Combobox-input:lang(zh)",
+    ".spectrum-Combobox-input.spectrum-Combobox-autocomplete",
+    ".spectrum-Combobox-input.spectrum-Combobox-autocomplete::selection",
     ".spectrum-Combobox-label",
     ".spectrum-Combobox-progress-circle",
     ".spectrum-Combobox-progress-circle:dir(rtl)",
+    ".spectrum-Combobox-textfield:hover .spectrum-Combobox-input",
     ".spectrum-Combobox-textfield.is-focused .spectrum-Combobox-input",
     ".spectrum-Combobox-textfield.is-focused .spectrum-Combobox-input:hover",
     ".spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input",
     ".spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon",
     ".spectrum-Combobox-textfield.is-keyboardFocused .spectrum-Combobox-input",
     ".spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input",
-    ".spectrum-Combobox-textfield:hover .spectrum-Combobox-input",
-    ".spectrum-Combobox.is-focused .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",
+    ".spectrum-Combobox:has(:active) .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
+    ".spectrum-Combobox:has(:active) .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",
+    ".spectrum-Combobox:has(:focus) .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
+    ".spectrum-Combobox:has(:focus) .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",
+    ".spectrum-Combobox:hover .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
+    ".spectrum-Combobox:hover .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",
+    ".spectrum-Combobox:hover:has(:focus) .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
+    ".spectrum-Combobox:hover:has(:focus) .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",
     ".spectrum-Combobox.is-focused .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
-    ".spectrum-Combobox.is-focused:hover .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",
+    ".spectrum-Combobox.is-focused .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",
     ".spectrum-Combobox.is-focused:hover .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
-    ".spectrum-Combobox.is-keyboardFocused .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",
+    ".spectrum-Combobox.is-focused:hover .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",
     ".spectrum-Combobox.is-keyboardFocused .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
+    ".spectrum-Combobox.is-keyboardFocused .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",
     ".spectrum-Combobox.is-readOnly .spectrum-Combobox-input:read-only",
     ".spectrum-Combobox.is-readOnly .spectrum-Combobox-input:read-only:hover",
     ".spectrum-Combobox.is-readOnly .spectrum-Combobox-textfield.is-keyboardFocused .spectrum-Combobox-input",
     ".spectrum-Combobox.is-readOnly.is-disabled .spectrum-Combobox-input:read-only",
     ".spectrum-Combobox.is-readOnly.is-disabled .spectrum-Combobox-input:read-only:hover",
     ".spectrum-Combobox.is-readOnly.is-invalid .spectrum-Combobox-input:read-only",
-    ".spectrum-Combobox:has(:active) .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",
-    ".spectrum-Combobox:has(:active) .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
-    ".spectrum-Combobox:has(:focus) .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",
-    ".spectrum-Combobox:has(:focus) .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
-    ".spectrum-Combobox:hover .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",
-    ".spectrum-Combobox:hover .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
-    ".spectrum-Combobox:hover:has(:focus) .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",
-    ".spectrum-Combobox:hover:has(:focus) .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
     ".spectrum-Textfield.is-disabled .spectrum-Textfield-validationIcon",
     ".spectrum-Textfield.is-loading .spectrum-Textfield-validationIcon",
     ".spectrum-Textfield.is-readOnly .spectrum-Textfield-validationIcon"
   ],
-  "modifiers": [
-    "--mod-combobox-alert-icon-color",
-    "--mod-combobox-background-color-default",
-    "--mod-combobox-background-color-disabled",
-    "--mod-combobox-background-color-focus",
-    "--mod-combobox-background-color-focus-hover",
-    "--mod-combobox-background-color-hover",
-    "--mod-combobox-background-color-key-focus",
-    "--mod-combobox-block-size",
-    "--mod-combobox-block-spacing-edge-to-icon",
-    "--mod-combobox-block-spacing-edge-to-progress-circle",
-    "--mod-combobox-border-color-default",
-    "--mod-combobox-border-color-disabled",
-    "--mod-combobox-border-color-focus",
-    "--mod-combobox-border-color-focus-hover",
-    "--mod-combobox-border-color-hover",
-    "--mod-combobox-border-color-invalid-default",
-    "--mod-combobox-border-color-invalid-focus",
-    "--mod-combobox-border-color-invalid-focus-hover",
-    "--mod-combobox-border-color-invalid-hover",
-    "--mod-combobox-border-color-invalid-key-focus",
-    "--mod-combobox-border-color-key-focus",
-    "--mod-combobox-border-radius",
-    "--mod-combobox-border-width",
-    "--mod-combobox-button-width",
-    "--mod-combobox-focus-indicator-color",
-    "--mod-combobox-focus-indicator-gap",
-    "--mod-combobox-focus-indicator-thickness",
-    "--mod-combobox-font-color-default",
-    "--mod-combobox-font-color-disabled",
-    "--mod-combobox-font-color-focus",
-    "--mod-combobox-font-color-focus-hover",
-    "--mod-combobox-font-color-hover",
-    "--mod-combobox-font-color-key-focus",
-    "--mod-combobox-font-color-placeholder",
-    "--mod-combobox-font-family",
-    "--mod-combobox-icon-size",
-    "--mod-combobox-inline-size",
-    "--mod-combobox-line-height",
-    "--mod-combobox-line-height-cjk",
-    "--mod-combobox-min-inline-size",
-    "--mod-combobox-popover-animation-distance",
-    "--mod-combobox-readonly-border-color-disabled",
-    "--mod-combobox-spacing-alert-icon-to-text",
-    "--mod-combobox-spacing-block-end-edge-to-text",
-    "--mod-combobox-spacing-block-start-edge-to-text",
-    "--mod-combobox-spacing-inline-icon-to-button",
-    "--mod-combobox-spacing-inline-icon-to-text",
-    "--mod-combobox-spacing-inline-start-edge-to-text",
-    "--mod-combobox-spacing-label-to-combobox",
-    "--mod-combobox-spacing-side-label-to-field",
-    "--mod-combobox-spacing-to-help-text",
-    "--mod-combobox-textfield-background-color"
-  ],
-  "component": [
-    "--spectrum-combo-box-minimum-width-multiplier",
-    "--spectrum-combo-box-visual-to-field-button",
-    "--spectrum-combobox-background-color-autofill",
-    "--spectrum-combobox-background-color-default",
-    "--spectrum-combobox-background-color-disabled",
-    "--spectrum-combobox-block-size",
-    "--spectrum-combobox-block-spacing-edge-to-icon",
-    "--spectrum-combobox-block-spacing-edge-to-progress-circle",
-    "--spectrum-combobox-border-color-default",
-    "--spectrum-combobox-border-color-disabled",
-    "--spectrum-combobox-border-color-focus",
-    "--spectrum-combobox-border-color-focus-hover",
-    "--spectrum-combobox-border-color-hover",
-    "--spectrum-combobox-border-color-invalid-default",
-    "--spectrum-combobox-border-color-invalid-focus",
-    "--spectrum-combobox-border-color-invalid-focus-hover",
-    "--spectrum-combobox-border-color-invalid-hover",
-    "--spectrum-combobox-border-color-invalid-key-focus",
-    "--spectrum-combobox-border-color-key-focus",
-    "--spectrum-combobox-border-radius",
-    "--spectrum-combobox-border-width",
-    "--spectrum-combobox-button-width",
-    "--spectrum-combobox-focus-indicator-color",
-    "--spectrum-combobox-focus-indicator-gap",
-    "--spectrum-combobox-focus-indicator-thickness",
-    "--spectrum-combobox-font-size",
-    "--spectrum-combobox-font-style",
-    "--spectrum-combobox-font-weight",
-    "--spectrum-combobox-icon-size",
-    "--spectrum-combobox-inline-size",
-    "--spectrum-combobox-line-height",
-    "--spectrum-combobox-line-height-cjk",
-    "--spectrum-combobox-min-inline-size",
-    "--spectrum-combobox-readonly-background-color-disabled",
-    "--spectrum-combobox-readonly-border-color-disabled",
-    "--spectrum-combobox-readonly-border-color-invalid-default",
-    "--spectrum-combobox-readonly-input-background-color",
-    "--spectrum-combobox-readonly-input-border-color",
-    "--spectrum-combobox-readonly-text-color-disabled",
-    "--spectrum-combobox-spacing-block-end-edge-to-text",
-    "--spectrum-combobox-spacing-block-start-edge-to-text",
-    "--spectrum-combobox-spacing-inline-icon-to-button",
-    "--spectrum-combobox-spacing-inline-icon-to-text",
-    "--spectrum-combobox-spacing-inline-start-edge-to-text",
-    "--spectrum-combobox-spacing-label-to-combobox",
-    "--spectrum-combobox-spacing-side-label-to-field",
-    "--spectrum-combobox-spacing-to-help-text"
-  ],
-  "global": [
-    "--spectrum-blue-900-rgb",
-    "--spectrum-border-width-200",
-    "--spectrum-cjk-line-height-100",
-    "--spectrum-component-bottom-to-text-100",
-    "--spectrum-component-bottom-to-text-200",
-    "--spectrum-component-bottom-to-text-300",
-    "--spectrum-component-bottom-to-text-75",
-    "--spectrum-component-edge-to-text-100",
-    "--spectrum-component-edge-to-text-200",
-    "--spectrum-component-edge-to-text-300",
-    "--spectrum-component-edge-to-text-75",
-    "--spectrum-component-height-100",
-    "--spectrum-component-height-200",
-    "--spectrum-component-height-300",
-    "--spectrum-component-height-75",
-    "--spectrum-component-to-menu-extra-large",
-    "--spectrum-component-to-menu-large",
-    "--spectrum-component-to-menu-medium",
-    "--spectrum-component-to-menu-small",
-    "--spectrum-component-top-to-text-100",
-    "--spectrum-component-top-to-text-200",
-    "--spectrum-component-top-to-text-300",
-    "--spectrum-component-top-to-text-75",
-    "--spectrum-component-top-to-workflow-icon-100",
-    "--spectrum-component-top-to-workflow-icon-200",
-    "--spectrum-component-top-to-workflow-icon-300",
-    "--spectrum-component-top-to-workflow-icon-75",
-    "--spectrum-corner-radius-medium-size-extra-large",
-    "--spectrum-corner-radius-medium-size-large",
-    "--spectrum-corner-radius-medium-size-medium",
-    "--spectrum-corner-radius-medium-size-small",
-    "--spectrum-default-font-style",
-    "--spectrum-disabled-background-color",
-    "--spectrum-disabled-border-color",
-    "--spectrum-disabled-content-color",
-    "--spectrum-field-label-to-component",
-    "--spectrum-field-top-to-progress-circle-extra-large",
-    "--spectrum-field-top-to-progress-circle-large",
-    "--spectrum-field-top-to-progress-circle-medium",
-    "--spectrum-field-top-to-progress-circle-small",
-    "--spectrum-field-width-extra-large",
-    "--spectrum-field-width-large",
-    "--spectrum-field-width-medium",
-    "--spectrum-field-width-small",
-    "--spectrum-focus-indicator-color",
-    "--spectrum-focus-indicator-gap",
-    "--spectrum-focus-indicator-thickness",
-    "--spectrum-font-size-100",
-    "--spectrum-font-size-200",
-    "--spectrum-font-size-300",
-    "--spectrum-font-size-75",
-    "--spectrum-gray-25",
-    "--spectrum-gray-300",
-    "--spectrum-gray-400",
-    "--spectrum-gray-800",
-    "--spectrum-gray-900",
-    "--spectrum-help-text-to-component",
-    "--spectrum-line-height-100",
-    "--spectrum-negative-border-color-default",
-    "--spectrum-negative-border-color-focus",
-    "--spectrum-negative-border-color-focus-hover",
-    "--spectrum-negative-border-color-hover",
-    "--spectrum-negative-border-color-key-focus",
-    "--spectrum-neutral-content-color-default",
-    "--spectrum-regular-font-weight",
-    "--spectrum-spacing-200",
-    "--spectrum-text-to-visual-100",
-    "--spectrum-text-to-visual-200",
-    "--spectrum-text-to-visual-300",
-    "--spectrum-text-to-visual-75",
-    "--spectrum-workflow-icon-size-100",
-    "--spectrum-workflow-icon-size-200",
-    "--spectrum-workflow-icon-size-300",
-    "--spectrum-workflow-icon-size-75"
-  ],
-  "passthroughs": [
-    "--mod-divider-inline-minimum-size",
-    "--mod-picker-button-background-color",
-    "--mod-picker-button-background-color-disabled",
-    "--mod-picker-button-border-color",
-    "--mod-picker-button-border-color-disabled",
-    "--mod-picker-button-border-width",
-    "--mod-picker-button-font-color-disabled",
-    "--mod-popover-animation-distance",
-    "--mod-textfield-background-color",
-    "--mod-textfield-background-color-disabled",
-    "--mod-textfield-border-color",
-    "--mod-textfield-border-color-disabled",
-    "--mod-textfield-border-color-focus",
-    "--mod-textfield-border-color-focus-hover",
-    "--mod-textfield-border-color-hover",
-    "--mod-textfield-border-color-invalid-default",
-    "--mod-textfield-border-color-invalid-focus",
-    "--mod-textfield-border-color-invalid-focus-hover",
-    "--mod-textfield-border-color-invalid-hover",
-    "--mod-textfield-border-color-invalid-keyboard-focus",
-    "--mod-textfield-border-color-keyboard-focus",
-    "--mod-textfield-border-width",
-    "--mod-textfield-corner-radius",
-    "--mod-textfield-focus-indicator-color",
-    "--mod-textfield-focus-indicator-gap",
-    "--mod-textfield-focus-indicator-width",
-    "--mod-textfield-font-family",
-    "--mod-textfield-font-size",
-    "--mod-textfield-font-style",
-    "--mod-textfield-font-weight",
-    "--mod-textfield-icon-color-invalid",
-    "--mod-textfield-spacing-block-end",
-    "--mod-textfield-spacing-block-start",
-    "--mod-textfield-text-color-default",
-    "--mod-textfield-text-color-disabled",
-    "--mod-textfield-text-color-focus",
-    "--mod-textfield-text-color-focus-hover",
-    "--mod-textfield-text-color-hover",
-    "--mod-textfield-text-color-keyboard-focus"
-  ],
-  "high-contrast": [
-    "--highcontrast-combobox-background-color-default",
-    "--highcontrast-combobox-border-color-highlight",
-    "--highcontrast-combobox-border-color-invalid",
-    "--highcontrast-combobox-readonly-border-color"
-  ]
+  "modifiers": {
+    "mod-combobox-popover-animation-distance": {
+      "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`. <br/>Used by `--mod-popover-animation-distance`. <br/>Defaults to `var(--spectrum-component-to-menu-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-combobox-focus-indicator-gap": {
+      "description": "Used by `--mod-textfield-focus-indicator-gap`. <br/>Defaults to `var(--spectrum-combobox-focus-indicator-gap)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-combobox-focus-indicator-thickness": {
+      "description": "Used by `--mod-textfield-focus-indicator-width`. <br/>Defaults to `var(--spectrum-combobox-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-combobox-focus-indicator-color": {
+      "description": "Used by `--mod-textfield-focus-indicator-color`. <br/>Defaults to `var(--spectrum-combobox-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-combobox-background-color-default": {
+      "description": "Used by `--mod-textfield-background-color`, `--mod-picker-button-background-color`.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-combobox-background-color-disabled": {
+      "description": "Used by `--mod-textfield-background-color-disabled`, `--mod-picker-button-background-color-disabled`. <br/>Defaults to `var(--spectrum-combobox-background-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-combobox-font-family": {
+      "description": "Used by `--mod-textfield-font-family`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-combobox-spacing-block-start-edge-to-text": {
+      "description": "Used by `--mod-textfield-spacing-block-start`. <br/>Defaults to `var(--spectrum-combobox-spacing-block-start-edge-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-combobox-spacing-block-end-edge-to-text": {
+      "description": "Used by `--mod-textfield-spacing-block-end`. <br/>Defaults to `var(--spectrum-combobox-spacing-block-end-edge-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-combobox-font-color-default": {
+      "description": "Used by `--mod-textfield-text-color-default`.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-combobox-font-color-hover": {
+      "description": "Used by `--mod-textfield-text-color-hover`.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-combobox-font-color-focus": {
+      "description": "Used by `--mod-textfield-text-color-focus`.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-combobox-font-color-focus-hover": {
+      "description": "Used by `--mod-textfield-text-color-focus-hover`.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-combobox-font-color-key-focus": {
+      "description": "Used by `--mod-textfield-text-color-keyboard-focus`.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-combobox-font-color-disabled": {
+      "description": "Used by `--mod-textfield-text-color-disabled`, `--mod-picker-button-font-color-disabled`.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-combobox-border-width": {
+      "description": "Used by `--mod-textfield-border-width`, `--mod-picker-button-border-width`, `.spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`. <br/>Defaults to `var(--spectrum-combobox-border-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-combobox-border-color-default": {
+      "description": "Defined in `.spectrum-Combobox-input:focus, .spectrum-Combobox-textfield.is-focused .spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-keyboardFocused .spectrum-Combobox-input`, `.spectrum-Combobox-input:focus:hover, .spectrum-Combobox-textfield.is-focused .spectrum-Combobox-input:hover`. <br/>Used by `--mod-textfield-border-color`, `--mod-picker-button-border-color`. <br/>Defaults to `var(--spectrum-combobox-border-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-combobox-border-color-disabled": {
+      "description": "Used by `--mod-textfield-border-color-disabled`, `--mod-picker-button-border-color-disabled`. <br/>Defaults to `var(--spectrum-combobox-border-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-combobox-border-color-focus": {
+      "description": "Used by `--mod-textfield-border-color-focus`, `--mod-picker-button-border-color`. <br/>Defaults to `var(--spectrum-combobox-border-color-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-combobox-border-color-focus-hover": {
+      "description": "Used by `--mod-textfield-border-color-focus-hover`, `--mod-picker-button-border-color`. <br/>Defaults to `var(--spectrum-combobox-border-color-focus-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-combobox-border-color-hover": {
+      "description": "Used by `--mod-textfield-border-color-hover`, `--mod-picker-button-border-color`. <br/>Defaults to `var(--spectrum-combobox-border-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-combobox-border-color-key-focus": {
+      "description": "Used by `--mod-textfield-border-color-keyboard-focus`, `--mod-picker-button-border-color`. <br/>Defaults to `var(--spectrum-combobox-border-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-combobox-border-radius": {
+      "description": "Used by `--mod-textfield-corner-radius`. <br/>Defaults to `var(--spectrum-combobox-border-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-combobox-border-color-invalid-default": {
+      "description": "Used by `--mod-textfield-border-color-invalid-default`, `--mod-picker-button-border-color`. <br/>Defaults to `var(--spectrum-combobox-border-color-invalid-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-combobox-border-color-invalid-hover": {
+      "description": "Used by `--mod-textfield-border-color-invalid-hover`, `--mod-picker-button-border-color`. <br/>Defaults to `var(--spectrum-combobox-border-color-invalid-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-combobox-border-color-invalid-focus": {
+      "description": "Used by `--mod-textfield-border-color-invalid-focus`, `--mod-picker-button-border-color`. <br/>Defaults to `var(--spectrum-combobox-border-color-invalid-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-combobox-border-color-invalid-focus-hover": {
+      "description": "Used by `--mod-textfield-border-color-invalid-focus-hover`, `--mod-picker-button-border-color`. <br/>Defaults to `var(--spectrum-combobox-border-color-invalid-focus-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-combobox-border-color-invalid-key-focus": {
+      "description": "Used by `--mod-textfield-border-color-invalid-keyboard-focus`, `--mod-picker-button-border-color`. <br/>Defaults to `var(--spectrum-combobox-border-color-invalid-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-combobox-alert-icon-color": {
+      "description": "Used by `--mod-textfield-icon-color-invalid`.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-combobox-inline-size": {
+      "description": "Used by `.spectrum-Combobox`. <br/>Defaults to `var(--spectrum-combobox-inline-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-combobox-spacing-label-to-combobox": {
+      "description": "Used by `.spectrum-Combobox`. <br/>Defaults to `var(--spectrum-combobox-spacing-label-to-combobox)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-combobox-min-inline-size": {
+      "description": "Used by `.spectrum-Combobox .spectrum-Combobox-content, .spectrum-Combobox .spectrum-Combobox-label`. <br/>Defaults to `var(--spectrum-combobox-min-inline-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-combobox-readonly-border-color-disabled": {
+      "description": "Used by `.spectrum-Combobox.is-readOnly.is-disabled .spectrum-Combobox-input:read-only`. <br/>Defaults to `var(--spectrum-combobox-readonly-border-color-disabled, transparent)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-combobox-spacing-inline-icon-to-button": {
+      "description": "Used by `.spectrum-Combobox-progress-circle`, `.spectrum-Combobox-progress-circle:dir(rtl)`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon`. <br/>Defaults to `var(--spectrum-combobox-spacing-inline-icon-to-button)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-combobox-button-width": {
+      "description": "Used by `.spectrum-Combobox-progress-circle`, `.spectrum-Combobox-progress-circle:dir(rtl)`, `.spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon`. <br/>Defaults to `var(--spectrum-combobox-button-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-combobox-block-spacing-edge-to-progress-circle": {
+      "description": "Used by `.spectrum-Combobox-progress-circle`. <br/>Defaults to `var(--spectrum-combobox-block-spacing-edge-to-progress-circle)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-combobox-block-spacing-edge-to-icon": {
+      "description": "Used by `.spectrum-Combobox-progress-circle`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon`. <br/>Defaults to `var(--spectrum-combobox-block-spacing-edge-to-icon)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-combobox-spacing-inline-icon-to-text": {
+      "description": "Used by `.spectrum-Combobox-progress-circle`, `.spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon`. <br/>Defaults to `var(--spectrum-combobox-spacing-inline-icon-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-combobox-block-size": {
+      "description": "Used by `.spectrum-Combobox-content`. <br/>Defaults to `var(--spectrum-combobox-block-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-combobox-textfield-background-color": {
+      "description": "Used by `.spectrum-Combobox-input`. <br/>Defaults to `var(--spectrum-combobox-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-combobox-spacing-inline-start-edge-to-text": {
+      "description": "Used by `.spectrum-Combobox-input`. <br/>Defaults to `var(--spectrum-combobox-spacing-inline-start-edge-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-combobox-line-height": {
+      "description": "Defined in `.spectrum-Combobox-input:lang(ja), .spectrum-Combobox-input:lang(ko), .spectrum-Combobox-input:lang(zh)`. <br/>Used by `.spectrum-Combobox-input`. <br/>Defaults to `var(--spectrum-combobox-block-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-combobox-font-color-placeholder": {
+      "description": "Used by `--mod-textfield-text-color-default`.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-combobox-background-color-hover": {
+      "description": "Used by `--mod-textfield-background-color`.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-combobox-background-color-focus": {
+      "description": "Used by `--mod-textfield-background-color`.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-combobox-background-color-key-focus": {
+      "description": "Used by `--mod-textfield-background-color`.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-combobox-icon-size": {
+      "description": "Used by `.spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon`. <br/>Defaults to `var(--spectrum-combobox-icon-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-combobox-spacing-alert-icon-to-text": {
+      "description": "Used by `.spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`. <br/>Defaults to `var(--spectrum-combobox-spacing-inline-icon-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-combobox-line-height-cjk": {
+      "description": "Used by `--mod-combobox-line-height`. <br/>Defaults to `var(--spectrum-combobox-line-height-cjk)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-combobox-background-color-focus-hover": {
+      "description": "Used by `--mod-textfield-background-color`.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-combobox-spacing-to-help-text": {
+      "description": "Used by `.spectrum-Combobox-helptext`. <br/>Defaults to `var(--spectrum-combobox-spacing-to-help-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-combobox-spacing-side-label-to-field": {
+      "description": "Used by `.spectrum-Combobox--sideLabel .spectrum-Combobox-label`. <br/>Defaults to `var(--spectrum-combobox-spacing-side-label-to-field)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-combobox-block-size": {
+      "value": "48px",
+      "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`. <br/>Used by `--spectrum-combobox-min-inline-size`, `--spectrum-combobox-button-width`, `.spectrum-Combobox-content`, `.spectrum-Combobox-input`. <br/>Defaults to `var(--spectrum-component-height-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-combobox-icon-size": {
+      "value": "26px",
+      "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`. <br/>Used by `.spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon`. <br/>Defaults to `var(--spectrum-workflow-icon-size-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-combobox-font-size": {
+      "value": "18px",
+      "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`. <br/>Used by `--mod-textfield-font-size`. <br/>Defaults to `var(--spectrum-font-size-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-combobox-line-height": {
+      "value": "1.3",
+      "description": "Defined in `.spectrum-Combobox`. <br/>Used by `.spectrum-Combobox-input.spectrum-Combobox-autocomplete, .spectrum-Combobox-input:-internal-autofill-selected, .spectrum-Combobox-input:-webkit-autofill, .spectrum-Combobox-input:-webkit-autofill:active, .spectrum-Combobox-input:-webkit-autofill:focus`, `.spectrum-Combobox-input:-webkit-autofill:hover`. <br/>Defaults to `var(--spectrum-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-combobox-spacing-inline-icon-to-button": {
+      "value": "0px",
+      "description": "Defined in `.spectrum-Combobox`. <br/>Used by `.spectrum-Combobox-progress-circle`, `.spectrum-Combobox-progress-circle:dir(rtl)`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon`. <br/>Defaults to `var(--spectrum-combo-box-visual-to-field-button)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-combo-box-visual-to-field-button": {
+      "value": "0px",
+      "description": "Used by `--spectrum-combobox-spacing-inline-icon-to-button`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-combobox-block-spacing-edge-to-progress-circle": {
+      "value": "11px",
+      "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`. <br/>Used by `.spectrum-Combobox-progress-circle`. <br/>Defaults to `var(--spectrum-field-top-to-progress-circle-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-combobox-block-spacing-edge-to-icon": {
+      "value": "11px",
+      "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`. <br/>Used by `.spectrum-Combobox-progress-circle`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon`. <br/>Defaults to `var(--spectrum-component-top-to-workflow-icon-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-combobox-spacing-block-start-edge-to-text": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`. <br/>Used by `--mod-textfield-spacing-block-start`. <br/>Defaults to `var(--spectrum-component-top-to-text-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-combobox-spacing-block-end-edge-to-text": {
+      "value": "14px",
+      "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`. <br/>Used by `--mod-textfield-spacing-block-end`. <br/>Defaults to `var(--spectrum-component-bottom-to-text-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-combobox-spacing-inline-start-edge-to-text": {
+      "value": "18px",
+      "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`. <br/>Used by `.spectrum-Combobox-input`. <br/>Defaults to `var(--spectrum-component-edge-to-text-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-combobox-spacing-inline-icon-to-text": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`. <br/>Used by `.spectrum-Combobox-progress-circle`, `.spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon`. <br/>Defaults to `var(--spectrum-text-to-visual-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-combobox-spacing-to-help-text": {
+      "value": "0px",
+      "description": "Defined in `.spectrum-Combobox`. <br/>Used by `.spectrum-Combobox-helptext`. <br/>Defaults to `var(--spectrum-help-text-to-component)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-combobox-inline-size": {
+      "value": "var(--spectrum-field-default-width-extra-large)",
+      "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`. <br/>Used by `.spectrum-Combobox`. <br/>Defaults to `var(--spectrum-field-width-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-combobox-min-inline-size": {
+      "value": "calc(var(--spectrum-combo-box-minimum-width-multiplier) * var(--spectrum-combobox-block-size))",
+      "description": "Defined in `.spectrum-Combobox`. <br/>Used by `.spectrum-Combobox .spectrum-Combobox-content, .spectrum-Combobox .spectrum-Combobox-label`. <br/>Defaults to `calc(var(--spectrum-combo-box-minimum-width-multiplier) * var(--spectrum-combobox-block-size))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-combo-box-minimum-width-multiplier": {
+      "value": "2.5",
+      "description": "Used by `--spectrum-combobox-min-inline-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-combobox-button-width": {
+      "value": "var(--spectrum-combobox-block-size)",
+      "description": "Defined in `.spectrum-Combobox`. <br/>Used by `.spectrum-Combobox-progress-circle`, `.spectrum-Combobox-progress-circle:dir(rtl)`, `.spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon`. <br/>Defaults to `var(--spectrum-combobox-block-size)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-combobox-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Combobox`. <br/>Used by `--mod-textfield-focus-indicator-width`. <br/>Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-combobox-focus-indicator-gap": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Combobox`. <br/>Used by `--mod-textfield-focus-indicator-gap`. <br/>Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-combobox-focus-indicator-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Defined in `.spectrum-Combobox`. <br/>Used by `--mod-textfield-focus-indicator-color`. <br/>Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-combobox-border-radius": {
+      "value": "10px",
+      "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`. <br/>Used by `--mod-textfield-corner-radius`. <br/>Defaults to `var(--spectrum-corner-radius-medium-size-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-combobox-border-width": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Combobox`. <br/>Used by `--mod-textfield-border-width`, `--mod-picker-button-border-width`, `.spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`. <br/>Defaults to `var(--spectrum-border-width-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-combobox-spacing-label-to-combobox": {
+      "value": "0px",
+      "description": "Defined in `.spectrum-Combobox`. <br/>Used by `.spectrum-Combobox`. <br/>Defaults to `var(--spectrum-field-label-to-component)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-combobox-spacing-side-label-to-field": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-Combobox`. <br/>Used by `.spectrum-Combobox--sideLabel .spectrum-Combobox-label`. <br/>Defaults to `var(--spectrum-spacing-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-combobox-font-style": {
+      "value": "normal",
+      "description": "Defined in `.spectrum-Combobox`. <br/>Used by `--mod-textfield-font-style`. <br/>Defaults to `var(--spectrum-default-font-style)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-combobox-font-weight": {
+      "value": "400",
+      "description": "Defined in `.spectrum-Combobox`. <br/>Used by `--mod-textfield-font-weight`. <br/>Defaults to `var(--spectrum-regular-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-combobox-line-height-cjk": {
+      "value": "1.5",
+      "description": "Defined in `.spectrum-Combobox`. <br/>Used by `--mod-combobox-line-height`. <br/>Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-combobox-background-color-disabled": {
+      "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+      "description": "Defined in `.spectrum-Combobox`. <br/>Used by `--mod-textfield-background-color-disabled`. <br/>Defaults to `var(--spectrum-gray-25)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-combobox-background-color-default": {
+      "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+      "description": "Defined in `.spectrum-Combobox`. <br/>Used by `--spectrum-combobox-readonly-input-background-color`, `.spectrum-Combobox-input`, `.spectrum-Combobox-input.spectrum-Combobox-autocomplete, .spectrum-Combobox-input:-internal-autofill-selected, .spectrum-Combobox-input:-webkit-autofill, .spectrum-Combobox-input:-webkit-autofill:active, .spectrum-Combobox-input:-webkit-autofill:focus`, `.spectrum-Combobox-input:-webkit-autofill:hover`. <br/>Defaults to `var(--spectrum-gray-25)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-combobox-border-color-default": {
+      "value": "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))",
+      "description": "Defined in `.spectrum-Combobox`. <br/>Used by `--mod-textfield-border-color`, `--mod-picker-button-border-color`, `--spectrum-combobox-readonly-input-border-color`, `.spectrum-Combobox-input.spectrum-Combobox-autocomplete, .spectrum-Combobox-input:-internal-autofill-selected, .spectrum-Combobox-input:-webkit-autofill, .spectrum-Combobox-input:-webkit-autofill:active, .spectrum-Combobox-input:-webkit-autofill:focus`, `.spectrum-Combobox-input:-webkit-autofill:hover`. <br/>Defaults to `var(--spectrum-gray-300)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-combobox-border-color-hover": {
+      "value": "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))",
+      "description": "Defined in `.spectrum-Combobox`. <br/>Used by `--mod-textfield-border-color-hover`, `--mod-picker-button-border-color`. <br/>Defaults to `var(--spectrum-gray-400)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-combobox-border-color-focus": {
+      "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+      "description": "Defined in `.spectrum-Combobox`. <br/>Used by `--mod-textfield-border-color-focus`, `--mod-picker-button-border-color`, `--mod-combobox-border-color-default`. <br/>Defaults to `var(--spectrum-gray-800)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-combobox-border-color-focus-hover": {
+      "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+      "description": "Defined in `.spectrum-Combobox`. <br/>Used by `--mod-textfield-border-color-focus-hover`, `--mod-picker-button-border-color`, `--mod-combobox-border-color-default`. <br/>Defaults to `var(--spectrum-gray-900)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-combobox-border-color-key-focus": {
+      "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+      "description": "Defined in `.spectrum-Combobox`. <br/>Used by `--mod-textfield-border-color-keyboard-focus`, `--mod-picker-button-border-color`, `--mod-combobox-border-color-default`. <br/>Defaults to `var(--spectrum-gray-800)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-combobox-border-color-disabled": {
+      "value": "var(--spectrum-gray-300)",
+      "description": "Defined in `.spectrum-Combobox`. <br/>Used by `--mod-textfield-border-color-disabled`, `--mod-picker-button-border-color-disabled`. <br/>Defaults to `var(--spectrum-disabled-border-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-combobox-border-color-invalid-default": {
+      "value": "var(--spectrum-negative-color-900)",
+      "description": "Defined in `.spectrum-Combobox`. <br/>Used by `--mod-textfield-border-color-invalid-default`, `--mod-picker-button-border-color`. <br/>Defaults to `var(--spectrum-negative-border-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-combobox-border-color-invalid-hover": {
+      "value": "var(--spectrum-negative-color-1000)",
+      "description": "Defined in `.spectrum-Combobox`. <br/>Used by `--mod-textfield-border-color-invalid-hover`, `--mod-picker-button-border-color`. <br/>Defaults to `var(--spectrum-negative-border-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-combobox-border-color-invalid-focus": {
+      "value": "var(--spectrum-negative-color-1000)",
+      "description": "Defined in `.spectrum-Combobox`. <br/>Used by `--mod-textfield-border-color-invalid-focus`, `--mod-picker-button-border-color`. <br/>Defaults to `var(--spectrum-negative-border-color-focus)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-combobox-border-color-invalid-focus-hover": {
+      "value": "var(--spectrum-negative-border-color-down)",
+      "description": "Defined in `.spectrum-Combobox`. <br/>Used by `--mod-textfield-border-color-invalid-focus-hover`, `--mod-picker-button-border-color`. <br/>Defaults to `var(--spectrum-negative-border-color-focus-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-combobox-border-color-invalid-key-focus": {
+      "value": "var(--spectrum-negative-color-1000)",
+      "description": "Defined in `.spectrum-Combobox`. <br/>Used by `--mod-textfield-border-color-invalid-keyboard-focus`, `--mod-picker-button-border-color`. <br/>Defaults to `var(--spectrum-negative-border-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-combobox-background-color-autofill": {
+      "value": "rgb(var(--spectrum-blue-900-rgb), 0.3)",
+      "description": "Defined in `.spectrum-Combobox`. <br/>Used by `.spectrum-Combobox-input.spectrum-Combobox-autocomplete::selection, .spectrum-Combobox-input:-internal-autofill-selected::selection, .spectrum-Combobox-input:-webkit-autofill::selection, .spectrum-Combobox-input:-webkit-autofill:active::selection, .spectrum-Combobox-input:-webkit-autofill:focus::selection`, `.spectrum-Combobox-input:-webkit-autofill:hover::selection`. <br/>Defaults to `rgb(var(--spectrum-blue-900-rgb), 0.3)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-combobox-readonly-input-background-color": {
+      "value": "var(--spectrum-combobox-background-color-default)",
+      "description": "Defined in `.spectrum-Combobox`. <br/>Used by `.spectrum-Combobox.is-readOnly .spectrum-Combobox-input:read-only`. <br/>Defaults to `var(--spectrum-combobox-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-combobox-readonly-border-color-invalid-default": {
+      "value": "var(--spectrum-negative-color-900)",
+      "description": "Defined in `.spectrum-Combobox`. <br/>Used by `.spectrum-Combobox.is-readOnly.is-invalid .spectrum-Combobox-input:read-only`. <br/>Defaults to `var(--spectrum-negative-border-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-combobox-readonly-background-color-disabled": {
+      "value": "var(--spectrum-gray-100)",
+      "description": "Defined in `.spectrum-Combobox`. <br/>Used by `.spectrum-Combobox.is-readOnly.is-disabled .spectrum-Combobox-input:read-only`, `.spectrum-Combobox.is-readOnly.is-disabled .spectrum-Combobox-input:read-only:hover`. <br/>Defaults to `var(--spectrum-disabled-background-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-combobox-readonly-text-color-disabled": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Defined in `.spectrum-Combobox`. <br/>Used by `.spectrum-Combobox.is-readOnly.is-disabled .spectrum-Combobox-input:read-only`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-combobox-readonly-border-color-disabled": {
+      "value": "var(--spectrum-gray-300)",
+      "description": "Defined in `.spectrum-Combobox`. <br/>Used by `.spectrum-Combobox.is-readOnly.is-disabled .spectrum-Combobox-input:read-only`. <br/>Defaults to `var(--spectrum-disabled-border-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-combobox-readonly-input-border-color": {
+      "value": "var(--spectrum-combobox-border-color-default)",
+      "description": "Defined in `.spectrum-Combobox`. <br/>Used by `.spectrum-Combobox.is-readOnly .spectrum-Combobox-input:read-only`. <br/>Defaults to `var(--spectrum-combobox-border-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-component-height-100": {
+      "value": "32px",
+      "description": "Used by `--spectrum-combobox-block-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-100": {
+      "value": "20px",
+      "description": "Used by `--spectrum-combobox-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-100": {
+      "value": "14px",
+      "description": "Used by `--spectrum-combobox-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-line-height-100": {
+      "value": "1.3",
+      "description": "Used by `--spectrum-combobox-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-top-to-progress-circle-medium": {
+      "value": "6px",
+      "description": "Used by `--spectrum-combobox-block-spacing-edge-to-progress-circle`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-workflow-icon-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-combobox-block-spacing-edge-to-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-combobox-spacing-block-start-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-100": {
+      "value": "9px",
+      "description": "Used by `--spectrum-combobox-spacing-block-end-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-text-100": {
+      "value": "12px",
+      "description": "Used by `--spectrum-combobox-spacing-inline-start-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-combobox-spacing-inline-icon-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-help-text-to-component": {
+      "value": "0px",
+      "description": "Used by `--spectrum-combobox-spacing-to-help-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-width-medium": {
+      "value": "var(--spectrum-field-default-width-medium)",
+      "description": "Used by `--spectrum-combobox-inline-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Used by `--spectrum-combobox-focus-indicator-thickness`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-gap": {
+      "value": "2px",
+      "description": "Used by `--spectrum-combobox-focus-indicator-gap`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Used by `--spectrum-combobox-focus-indicator-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-medium-size-medium": {
+      "value": "8px",
+      "description": "Used by `--spectrum-combobox-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-border-width-200": {
+      "value": "2px",
+      "description": "Used by `--spectrum-combobox-border-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-label-to-component": {
+      "value": "0px",
+      "description": "Used by `--spectrum-combobox-spacing-label-to-combobox`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-200": {
+      "value": "12px",
+      "description": "Used by `--spectrum-combobox-spacing-side-label-to-field`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-default-font-style": {
+      "value": "normal",
+      "description": "Used by `--spectrum-combobox-font-style`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-regular-font-weight": {
+      "value": "400",
+      "description": "Used by `--spectrum-combobox-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-cjk-line-height-100": {
+      "value": "1.5",
+      "description": "Used by `--spectrum-combobox-line-height-cjk`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-25": {
+      "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+      "description": "Used by `--spectrum-combobox-background-color-disabled`, `--spectrum-combobox-background-color-default`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-300": {
+      "value": "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))",
+      "description": "Used by `--spectrum-combobox-border-color-default`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-400": {
+      "value": "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))",
+      "description": "Used by `--spectrum-combobox-border-color-hover`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-800": {
+      "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+      "description": "Used by `--spectrum-combobox-border-color-focus`, `--spectrum-combobox-border-color-key-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-900": {
+      "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+      "description": "Used by `--spectrum-combobox-border-color-focus-hover`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-disabled-border-color": {
+      "value": "var(--spectrum-gray-300)",
+      "description": "Used by `--spectrum-combobox-border-color-disabled`, `--spectrum-combobox-readonly-border-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-border-color-default": {
+      "value": "var(--spectrum-negative-color-900)",
+      "description": "Used by `--spectrum-combobox-border-color-invalid-default`, `--spectrum-combobox-readonly-border-color-invalid-default`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-border-color-hover": {
+      "value": "var(--spectrum-negative-color-1000)",
+      "description": "Used by `--spectrum-combobox-border-color-invalid-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-border-color-focus": {
+      "value": "var(--spectrum-negative-color-1000)",
+      "description": "Used by `--spectrum-combobox-border-color-invalid-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-border-color-focus-hover": {
+      "value": "var(--spectrum-negative-border-color-down)",
+      "description": "Used by `--spectrum-combobox-border-color-invalid-focus-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-border-color-key-focus": {
+      "value": "var(--spectrum-negative-color-1000)",
+      "description": "Used by `--spectrum-combobox-border-color-invalid-key-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-blue-900-rgb": {
+      "description": "Used by `--spectrum-combobox-background-color-autofill`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-to-menu-medium": {
+      "value": "6px",
+      "description": "Used by `--mod-combobox-popover-animation-distance`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-disabled-background-color": {
+      "value": "var(--spectrum-gray-100)",
+      "description": "Used by `--spectrum-combobox-readonly-background-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-disabled-content-color": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Used by `--spectrum-combobox-readonly-text-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-component-height-75": {
+      "value": "24px",
+      "description": "Used by `--spectrum-combobox-block-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-75": {
+      "value": "16px",
+      "description": "Used by `--spectrum-combobox-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-75": {
+      "value": "12px",
+      "description": "Used by `--spectrum-combobox-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-top-to-progress-circle-small": {
+      "value": "4px",
+      "description": "Used by `--spectrum-combobox-block-spacing-edge-to-progress-circle`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-workflow-icon-75": {
+      "value": "4px",
+      "description": "Used by `--spectrum-combobox-block-spacing-edge-to-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-75": {
+      "value": "4px",
+      "description": "Used by `--spectrum-combobox-spacing-block-start-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-75": {
+      "value": "5px",
+      "description": "Used by `--spectrum-combobox-spacing-block-end-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-text-75": {
+      "value": "9px",
+      "description": "Used by `--spectrum-combobox-spacing-inline-start-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-75": {
+      "value": "5px",
+      "description": "Used by `--spectrum-combobox-spacing-inline-icon-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-width-small": {
+      "value": "var(--spectrum-field-default-width-small)",
+      "description": "Used by `--spectrum-combobox-inline-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-medium-size-small": {
+      "value": "7px",
+      "description": "Used by `--spectrum-combobox-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-to-menu-small": {
+      "value": "6px",
+      "description": "Used by `--mod-combobox-popover-animation-distance`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-200": {
+      "value": "40px",
+      "description": "Used by `--spectrum-combobox-block-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-200": {
+      "value": "22px",
+      "description": "Used by `--spectrum-combobox-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-200": {
+      "value": "16px",
+      "description": "Used by `--spectrum-combobox-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-top-to-progress-circle-large": {
+      "value": "9px",
+      "description": "Used by `--spectrum-combobox-block-spacing-edge-to-progress-circle`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-workflow-icon-200": {
+      "value": "9px",
+      "description": "Used by `--spectrum-combobox-block-spacing-edge-to-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-200": {
+      "value": "9px",
+      "description": "Used by `--spectrum-combobox-spacing-block-start-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-200": {
+      "value": "11px",
+      "description": "Used by `--spectrum-combobox-spacing-block-end-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-text-200": {
+      "value": "15px",
+      "description": "Used by `--spectrum-combobox-spacing-inline-start-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-200": {
+      "value": "7px",
+      "description": "Used by `--spectrum-combobox-spacing-inline-icon-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-width-large": {
+      "value": "var(--spectrum-field-default-width-large)",
+      "description": "Used by `--spectrum-combobox-inline-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-medium-size-large": {
+      "value": "9px",
+      "description": "Used by `--spectrum-combobox-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-to-menu-large": {
+      "value": "7px",
+      "description": "Used by `--mod-combobox-popover-animation-distance`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-300": {
+      "value": "48px",
+      "description": "Used by `--spectrum-combobox-block-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-300": {
+      "value": "26px",
+      "description": "Used by `--spectrum-combobox-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-300": {
+      "value": "18px",
+      "description": "Used by `--spectrum-combobox-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-top-to-progress-circle-extra-large": {
+      "value": "11px",
+      "description": "Used by `--spectrum-combobox-block-spacing-edge-to-progress-circle`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-workflow-icon-300": {
+      "value": "11px",
+      "description": "Used by `--spectrum-combobox-block-spacing-edge-to-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-300": {
+      "value": "12px",
+      "description": "Used by `--spectrum-combobox-spacing-block-start-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-300": {
+      "value": "14px",
+      "description": "Used by `--spectrum-combobox-spacing-block-end-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-text-300": {
+      "value": "18px",
+      "description": "Used by `--spectrum-combobox-spacing-inline-start-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-300": {
+      "value": "8px",
+      "description": "Used by `--spectrum-combobox-spacing-inline-icon-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-width-extra-large": {
+      "value": "var(--spectrum-field-default-width-extra-large)",
+      "description": "Used by `--spectrum-combobox-inline-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-medium-size-extra-large": {
+      "value": "10px",
+      "description": "Used by `--spectrum-combobox-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-to-menu-extra-large": {
+      "value": "8px",
+      "description": "Used by `--mod-combobox-popover-animation-distance`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `.spectrum-Combobox-input.spectrum-Combobox-autocomplete, .spectrum-Combobox-input:-internal-autofill-selected, .spectrum-Combobox-input:-webkit-autofill, .spectrum-Combobox-input:-webkit-autofill:active, .spectrum-Combobox-input:-webkit-autofill:focus`, `.spectrum-Combobox-input:-webkit-autofill:hover`.",
+      "control": "color",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {
+    "mod-textfield-focus-indicator-gap": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-focus-indicator-width": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-focus-indicator-color": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-background-color": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-background-color-disabled": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-font-family": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-font-weight": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-font-size": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-font-style": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-spacing-block-start": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-spacing-block-end": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-text-color-default": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-text-color-hover": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-text-color-focus": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-text-color-focus-hover": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-text-color-keyboard-focus": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-text-color-disabled": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-border-width": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-border-color": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-border-color-disabled": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-border-color-focus": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-border-color-focus-hover": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-border-color-hover": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-border-color-keyboard-focus": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-corner-radius": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-border-color-invalid-default": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-border-color-invalid-hover": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-border-color-invalid-focus": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-border-color-invalid-focus-hover": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-border-color-invalid-keyboard-focus": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-icon-color-invalid": {
+      "category": "Passthrough"
+    },
+    "mod-picker-button-border-width": {
+      "category": "Passthrough"
+    },
+    "mod-picker-button-border-color": {
+      "category": "Passthrough"
+    },
+    "mod-picker-button-background-color": {
+      "category": "Passthrough"
+    },
+    "mod-picker-button-background-color-disabled": {
+      "category": "Passthrough"
+    },
+    "mod-picker-button-font-color-disabled": {
+      "category": "Passthrough"
+    },
+    "mod-picker-button-border-color-disabled": {
+      "category": "Passthrough"
+    },
+    "mod-divider-inline-minimum-size": {
+      "category": "Passthrough"
+    },
+    "mod-popover-animation-distance": {
+      "category": "Passthrough"
+    }
+  },
+  "high-contrast": {
+    "highcontrast-combobox-background-color-default": {
+      "value": "var(--spectrum-combobox-background-color-default)",
+      "description": "Defined in `.spectrum-Combobox`. <br/>Used by `.spectrum-Combobox.is-readOnly .spectrum-Combobox-input:read-only`, `.spectrum-Combobox-input`, `.spectrum-Combobox-input.spectrum-Combobox-autocomplete, .spectrum-Combobox-input:-internal-autofill-selected, .spectrum-Combobox-input:-webkit-autofill, .spectrum-Combobox-input:-webkit-autofill:active, .spectrum-Combobox-input:-webkit-autofill:focus`, `.spectrum-Combobox-input:-webkit-autofill:hover`. <br/>Defaults to `var(--spectrum-combobox-background-color-default)`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-combobox-readonly-border-color": {
+      "value": "var(--spectrum-combobox-readonly-input-border-color)",
+      "description": "Defined in `.spectrum-Combobox`. <br/>Used by `.spectrum-Combobox.is-readOnly .spectrum-Combobox-input:read-only`. <br/>Defaults to `var(--spectrum-combobox-readonly-input-border-color)`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-combobox-border-color-invalid": {
+      "value": "var(--mod-combobox-border-color-invalid-focus-hover, var(--spectrum-combobox-border-color-invalid-focus-hover))",
+      "description": "Defined in `.spectrum-Combobox`. <br/>Used by `.spectrum-Combobox.is-readOnly.is-invalid .spectrum-Combobox-input:read-only`, `--mod-picker-button-border-color`. <br/>Defaults to `var(--mod-combobox-border-color-invalid-focus-hover, var(--spectrum-combobox-border-color-invalid-focus-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-combobox-border-color-highlight": {
+      "value": "var(--mod-combobox-border-color-focus-hover, var(--spectrum-combobox-border-color-focus-hover))",
+      "description": "Defined in `.spectrum-Combobox`. <br/>Used by `--mod-picker-button-border-color`. <br/>Defaults to `var(--mod-combobox-border-color-focus-hover, var(--spectrum-combobox-border-color-focus-hover))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/combobox/stories/combobox.stories.js b/components/combobox/stories/combobox.stories.js
index b1552e7264e..64d4a03560f 100644
--- a/components/combobox/stories/combobox.stories.js
+++ b/components/combobox/stories/combobox.stories.js
@@ -3,11 +3,13 @@ import { Sizes, withDownStateDimensionCapture } from "@spectrum-css/preview/deco
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, isFocused, isHovered, isInvalid, isKeyboardFocused, isLoading, isOpen, isReadOnly, size } from "@spectrum-css/preview/types";
 import { within } from "@storybook/test";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { ComboBoxGroup } from "./combobox.test.js";
 import { HelpTextTemplate, Template, VariantGroup } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * Comboboxes combine a text entry with a picker menu, allowing users to filter longer lists to only the selections matching a query.
  *
@@ -181,13 +183,17 @@ export default {
 		status: {
 			type: "migrated",
 		},
-		tags: ["migrated"],
 		packageJson,
 		metadata,
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 	decorators: [
 		withDownStateDimensionCapture,
 	],
+	tags: ["migrated"],
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
 
diff --git a/components/commons/package.json b/components/commons/package.json
index a6e1a1dbb29..614ccace802 100644
--- a/components/commons/package.json
+++ b/components/commons/package.json
@@ -18,8 +18,7 @@
 		"./*.css": "./*.css",
 		"./CHANGELOG.md": "./CHANGELOG.md",
 		"./README.md": "./README.md",
-		"./package.json": "./package.json",
-		"./stories/*": "./stories/*"
+		"./package.json": "./package.json"
 	},
 	"main": "index.css",
 	"files": [
diff --git a/components/contextualhelp/dist/metadata.json b/components/contextualhelp/dist/metadata.json
index a64ded05750..4a2ebd25e76 100644
--- a/components/contextualhelp/dist/metadata.json
+++ b/components/contextualhelp/dist/metadata.json
@@ -8,65 +8,293 @@
     ".spectrum-ContextualHelp-popover .spectrum-ContextualHelp-body",
     ".spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading"
   ],
-  "modifiers": [
-    "--mod-contextual-help-body-color",
-    "--mod-contextual-help-body-line-height",
-    "--mod-contextual-help-body-sans-serif-font-family",
-    "--mod-contextual-help-body-sans-serif-font-style",
-    "--mod-contextual-help-body-sans-serif-font-weight",
-    "--mod-contextual-help-body-size",
-    "--mod-contextual-help-content-spacing",
-    "--mod-contextual-help-heading-size",
-    "--mod-contextual-help-link-spacing",
-    "--mod-contextual-help-min-inline-size",
-    "--mod-contextual-help-padding",
-    "--mod-contextual-help-popover-maximum-width",
-    "--mod-contextual-help-title-color",
-    "--mod-contextual-help-title-font-style",
-    "--mod-contextual-help-title-font-weight",
-    "--mod-contextual-help-title-line-height",
-    "--mod-contextual-help-title-sans-serif-font-family"
-  ],
-  "component": [
-    "--spectrum-contextual-help-body-color",
-    "--spectrum-contextual-help-body-line-height",
-    "--spectrum-contextual-help-body-sans-serif-font-family",
-    "--spectrum-contextual-help-body-sans-serif-font-style",
-    "--spectrum-contextual-help-body-sans-serif-font-weight",
-    "--spectrum-contextual-help-body-size",
-    "--spectrum-contextual-help-content-spacing",
-    "--spectrum-contextual-help-link-spacing",
-    "--spectrum-contextual-help-min-inline-size",
-    "--spectrum-contextual-help-minimum-width",
-    "--spectrum-contextual-help-padding",
-    "--spectrum-contextual-help-title-color",
-    "--spectrum-contextual-help-title-font-style",
-    "--spectrum-contextual-help-title-font-weight",
-    "--spectrum-contextual-help-title-line-height",
-    "--spectrum-contextual-help-title-sans-serif-font-family",
-    "--spectrum-contextual-help-title-size"
-  ],
-  "global": [
-    "--spectrum-body-color",
-    "--spectrum-body-sans-serif-font-style",
-    "--spectrum-body-sans-serif-font-weight",
-    "--spectrum-corner-radius-large-default",
-    "--spectrum-line-height-200",
-    "--spectrum-sans-font-family-stack",
-    "--spectrum-spacing-100",
-    "--spectrum-spacing-300",
-    "--spectrum-spacing-400",
-    "--spectrum-title-color",
-    "--spectrum-title-line-height",
-    "--spectrum-title-sans-serif-font-style",
-    "--spectrum-title-sans-serif-font-weight"
-  ],
-  "passthroughs": [
-    "--mod-popover-animation-distance",
-    "--mod-popover-corner-radius"
-  ],
-  "high-contrast": [
-    "--highcontrast-contextual-help-body-color",
-    "--highcontrast-contextual-help-title-color"
-  ]
+  "modifiers": {
+    "mod-contextual-help-min-inline-size": {
+      "description": "Used by `.spectrum-ContextualHelp`. <br/>Defaults to `var(--spectrum-contextual-help-min-inline-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-contextual-help-padding": {
+      "description": "Used by `.spectrum-ContextualHelp-popover`. <br/>Defaults to `var(--spectrum-contextual-help-padding)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-contextual-help-body-size": {
+      "description": "Used by `.spectrum-ContextualHelp-popover`, `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-body`. <br/>Defaults to `var(--spectrum-contextual-help-body-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-contextual-help-body-color": {
+      "description": "Used by `.spectrum-ContextualHelp-popover`, `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-body`. <br/>Defaults to `var(--spectrum-contextual-help-body-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-contextual-help-popover-maximum-width": {
+      "description": "Used by `.spectrum-ContextualHelp-popover`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-contextual-help-title-sans-serif-font-family": {
+      "description": "Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`. <br/>Defaults to `var(--spectrum-contextual-help-title-sans-serif-font-family)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-contextual-help-title-font-weight": {
+      "description": "Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`. <br/>Defaults to `var(--spectrum-contextual-help-title-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-contextual-help-heading-size": {
+      "description": "Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`. <br/>Defaults to `var(--spectrum-contextual-help-title-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-contextual-help-title-font-style": {
+      "description": "Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`. <br/>Defaults to `var(--spectrum-contextual-help-title-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-contextual-help-title-line-height": {
+      "description": "Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`. <br/>Defaults to `var(--spectrum-contextual-help-title-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-contextual-help-title-color": {
+      "description": "Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`. <br/>Defaults to `var(--spectrum-contextual-help-title-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-contextual-help-content-spacing": {
+      "description": "Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`. <br/>Defaults to `var(--spectrum-contextual-help-content-spacing)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-contextual-help-body-sans-serif-font-family": {
+      "description": "Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-body`. <br/>Defaults to `var(--spectrum-contextual-help-body-sans-serif-font-family)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-contextual-help-body-sans-serif-font-weight": {
+      "description": "Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-body`. <br/>Defaults to `var(--spectrum-contextual-help-body-sans-serif-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-contextual-help-body-sans-serif-font-style": {
+      "description": "Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-body`. <br/>Defaults to `var(--spectrum-contextual-help-body-sans-serif-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-contextual-help-body-line-height": {
+      "description": "Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-body`. <br/>Defaults to `var(--spectrum-contextual-help-body-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-contextual-help-link-spacing": {
+      "description": "Used by `.spectrum-ContextualHelp-link`. <br/>Defaults to `var(--spectrum-contextual-help-link-spacing)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-contextual-help-title-sans-serif-font-family": {
+      "value": "var(--spectrum-sans-font-family-stack)",
+      "description": "Defined in `.spectrum-ContextualHelp`. <br/>Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`. <br/>Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-contextual-help-title-font-weight": {
+      "value": "700",
+      "description": "Defined in `.spectrum-ContextualHelp`. <br/>Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`. <br/>Defaults to `var(--spectrum-title-sans-serif-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-contextual-help-title-font-style": {
+      "value": "normal",
+      "description": "Defined in `.spectrum-ContextualHelp`. <br/>Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`. <br/>Defaults to `var(--spectrum-title-sans-serif-font-style)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-contextual-help-title-line-height": {
+      "value": "1.3",
+      "description": "Defined in `.spectrum-ContextualHelp`. <br/>Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`. <br/>Defaults to `var(--spectrum-title-line-height)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-contextual-help-title-color": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-ContextualHelp`. <br/>Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`. <br/>Defaults to `var(--spectrum-title-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-contextual-help-body-sans-serif-font-family": {
+      "value": "var(--spectrum-sans-font-family-stack)",
+      "description": "Defined in `.spectrum-ContextualHelp`. <br/>Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-body`. <br/>Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-contextual-help-body-sans-serif-font-weight": {
+      "value": "400",
+      "description": "Defined in `.spectrum-ContextualHelp`. <br/>Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-body`. <br/>Defaults to `var(--spectrum-body-sans-serif-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-contextual-help-body-sans-serif-font-style": {
+      "value": "normal",
+      "description": "Defined in `.spectrum-ContextualHelp`. <br/>Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-body`. <br/>Defaults to `var(--spectrum-body-sans-serif-font-style)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-contextual-help-body-line-height": {
+      "value": "1.5",
+      "description": "Defined in `.spectrum-ContextualHelp`. <br/>Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-body`. <br/>Defaults to `var(--spectrum-line-height-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-contextual-help-body-color": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-ContextualHelp`. <br/>Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-body`. <br/>Defaults to `var(--spectrum-body-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-contextual-help-min-inline-size": {
+      "value": "268px",
+      "description": "Defined in `.spectrum-ContextualHelp`. <br/>Used by `.spectrum-ContextualHelp`. <br/>Defaults to `var(--spectrum-contextual-help-minimum-width)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-contextual-help-minimum-width": {
+      "value": "268px",
+      "description": "Used by `--spectrum-contextual-help-min-inline-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-contextual-help-link-spacing": {
+      "value": "16px",
+      "description": "Defined in `.spectrum-ContextualHelp`. <br/>Used by `.spectrum-ContextualHelp-link`. <br/>Defaults to `var(--spectrum-spacing-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-contextual-help-padding": {
+      "value": "24px",
+      "description": "Defined in `.spectrum-ContextualHelp`. <br/>Used by `.spectrum-ContextualHelp-popover`. <br/>Defaults to `var(--spectrum-spacing-400)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-contextual-help-body-size": {
+      "value": "var(--spectrum-contextual-help-body-font-size)",
+      "description": "Used by `.spectrum-ContextualHelp-popover`, `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-body`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-contextual-help-title-size": {
+      "value": "var(--spectrum-contextual-help-title-font-size)",
+      "description": "Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-contextual-help-content-spacing": {
+      "description": "Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-sans-font-family-stack": {
+      "description": "Used by `--spectrum-contextual-help-title-sans-serif-font-family`, `--spectrum-contextual-help-body-sans-serif-font-family`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-title-sans-serif-font-weight": {
+      "value": "700",
+      "description": "Used by `--spectrum-contextual-help-title-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-title-sans-serif-font-style": {
+      "value": "normal",
+      "description": "Used by `--spectrum-contextual-help-title-font-style`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-title-line-height": {
+      "value": "1.3",
+      "description": "Used by `--spectrum-contextual-help-title-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-title-color": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-contextual-help-title-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-body-sans-serif-font-weight": {
+      "value": "400",
+      "description": "Used by `--spectrum-contextual-help-body-sans-serif-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-sans-serif-font-style": {
+      "value": "normal",
+      "description": "Used by `--spectrum-contextual-help-body-sans-serif-font-style`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-line-height-200": {
+      "value": "1.5",
+      "description": "Used by `--spectrum-contextual-help-body-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-color": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-contextual-help-body-color`, `.spectrum-ContextualHelp-popover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-spacing-300": {
+      "value": "16px",
+      "description": "Used by `--spectrum-contextual-help-link-spacing`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-400": {
+      "value": "24px",
+      "description": "Used by `--spectrum-contextual-help-padding`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-100": {
+      "value": "8px",
+      "description": "Used by `--mod-popover-animation-distance`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-large-default": {
+      "value": "10px",
+      "description": "Used by `--mod-popover-corner-radius`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {
+    "mod-popover-animation-distance": {
+      "category": "Passthrough"
+    },
+    "mod-popover-corner-radius": {
+      "category": "Passthrough"
+    }
+  },
+  "high-contrast": {
+    "highcontrast-contextual-help-body-color": {
+      "value": "var(--mod-contextual-help-body-color, var(--spectrum-body-color))",
+      "description": "Defined in `.spectrum-ContextualHelp`. <br/>Used by `.spectrum-ContextualHelp-popover`. <br/>Defaults to `var(--mod-contextual-help-body-color, var(--spectrum-body-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-contextual-help-title-color": {
+      "value": "var(--mod-contextual-help-title-color, var(--spectrum-contextual-help-title-color))",
+      "description": "Defined in `.spectrum-ContextualHelp`. <br/>Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`. <br/>Defaults to `var(--mod-contextual-help-title-color, var(--spectrum-contextual-help-title-color))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/contextualhelp/stories/contextualhelp.stories.js b/components/contextualhelp/stories/contextualhelp.stories.js
index 117912f633b..389b9ace63f 100644
--- a/components/contextualhelp/stories/contextualhelp.stories.js
+++ b/components/contextualhelp/stories/contextualhelp.stories.js
@@ -1,10 +1,12 @@
 import { default as ActionButtonStories } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { ContextualHelpGroup } from "./contextualhelp.test.js";
 import { Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * Contextual help shows a user extra information in relation to another component or view.
  */
@@ -107,6 +109,10 @@ export default {
 		},
 		packageJson,
 		metadata,
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 		docs: {
 			story: {
 				height: "200px",
diff --git a/components/contextualhelp/stories/template.js b/components/contextualhelp/stories/template.js
index f6097cfd151..9e1ccfe2fb2 100644
--- a/components/contextualhelp/stories/template.js
+++ b/components/contextualhelp/stories/template.js
@@ -11,7 +11,7 @@ import "../index.css";
 
 export const Template = ({
 	rootClass = "spectrum-ContextualHelp",
-	id = getRandomId("contextualhelp"),
+	id = getRandomId("contextual-help"),
 	iconName,
 	iconSet = "workflow",
 	title,
diff --git a/components/datepicker/dist/metadata.json b/components/datepicker/dist/metadata.json
index cf8fffe86db..809146fcd6a 100644
--- a/components/datepicker/dist/metadata.json
+++ b/components/datepicker/dist/metadata.json
@@ -4,15 +4,16 @@
     ".spectrum-DatePicker",
     ".spectrum-DatePicker--quiet",
     ".spectrum-DatePicker--quiet .spectrum-DatePicker-button",
-    ".spectrum-DatePicker--quiet .spectrum-DatePicker-button:not(.is-open)",
     ".spectrum-DatePicker--quiet .spectrum-DatePicker-button:not(:disabled, .is-open)",
+    ".spectrum-DatePicker--quiet .spectrum-DatePicker-button:not(.is-open)",
+    ".spectrum-DatePicker--quiet:hover:not(.is-focused, .is-keyboardFocused, .is-disabled, .is-invalid)",
     ".spectrum-DatePicker--quiet.is-disabled",
     ".spectrum-DatePicker--quiet.is-invalid",
     ".spectrum-DatePicker--quiet.is-invalid .spectrum-DatePicker-input:not(.spectrum-DatePicker-startField)",
-    ".spectrum-DatePicker--quiet:hover:not(.is-focused, .is-keyboardFocused, .is-disabled, .is-invalid)",
     ".spectrum-DatePicker--range",
     ".spectrum-DatePicker--range .spectrum-DatePicker-textfield",
     ".spectrum-DatePicker--range .spectrum-DatePicker-textfield:first-of-type",
+    ".spectrum-DatePicker--range:after",
     ".spectrum-DatePicker--range.is-keyboardFocused:not(.spectrum-DatePicker--quiet) .spectrum-DatePicker-textfield:after",
     ".spectrum-DatePicker--range.is-keyboardFocused:not(.spectrum-DatePicker--quiet):after",
     ".spectrum-DatePicker--range.spectrum-DatePicker--datetimeRange .spectrum-DatePicker-textfield",
@@ -23,135 +24,607 @@
     ".spectrum-DatePicker--range.spectrum-DatePicker--quiet .spectrum-DatePicker-textfield",
     ".spectrum-DatePicker--range.spectrum-DatePicker--quiet .spectrum-DatePicker-textfield:first-of-type",
     ".spectrum-DatePicker--range.spectrum-DatePicker--quiet.is-keyboardFocused:after",
-    ".spectrum-DatePicker--range:after",
     ".spectrum-DatePicker-button",
     ".spectrum-DatePicker-input",
     ".spectrum-DatePicker-input.spectrum-DatePicker-endField",
     ".spectrum-DatePicker-input.spectrum-DatePicker-startField",
     ".spectrum-DatePicker-rangeDash",
     ".spectrum-DatePicker-rangeDash:before",
+    ".spectrum-DatePicker:not(.spectrum-DatePicker--quiet, .is-disabled)",
     ".spectrum-DatePicker.is-disabled",
     ".spectrum-DatePicker.is-invalid",
     ".spectrum-DatePicker.is-invalid:not(.spectrum-DatePicker--quiet, .is-disabled)",
-    ".spectrum-DatePicker.spectrum-DatePicker--quiet.is-invalid",
-    ".spectrum-DatePicker:not(.spectrum-DatePicker--quiet, .is-disabled)"
-  ],
-  "modifiers": [
-    "--mod-datepicker-border-color-disabled",
-    "--mod-datepicker-border-radius",
-    "--mod-datepicker-border-radius-quiet",
-    "--mod-datepicker-dash-color",
-    "--mod-datepicker-dash-color-disabled",
-    "--mod-datepicker-dash-font-size",
-    "--mod-datepicker-dash-line-height",
-    "--mod-datepicker-datetime-input-width",
-    "--mod-datepicker-datetime-input-width-first",
-    "--mod-datepicker-datetime-quiet-input-width",
-    "--mod-datepicker-datetime-quiet-input-width-first",
-    "--mod-datepicker-focus-animation",
-    "--mod-datepicker-focus-line-gap",
-    "--mod-datepicker-focus-ring-color",
-    "--mod-datepicker-focus-ring-gap",
-    "--mod-datepicker-focus-ring-width",
-    "--mod-datepicker-focus-thickness",
-    "--mod-datepicker-generic-padding",
-    "--mod-datepicker-input-width",
-    "--mod-datepicker-input-width-quiet",
-    "--mod-datepicker-invalid-quiet-color",
-    "--mod-datepicker-min-width",
-    "--mod-datepicker-padding-inline",
-    "--mod-datepicker-padding-inline-end-invalid-quiet",
-    "--mod-datepicker-padding-inline-quiet",
-    "--mod-datepicker-pickerbutton-border-color",
-    "--mod-datepicker-pickerbutton-border-color-invalid",
-    "--mod-datepicker-quiet-border-color-hover",
-    "--mod-datepicker-quiet-button-offset",
-    "--mod-datepicker-range-dash-margin-left",
-    "--mod-datepicker-range-dash-padding-top",
-    "--mod-datepicker-range-input-width-first",
-    "--mod-datepicker-range-input-width-quiet-first"
-  ],
-  "component": [
-    "--spectrum-datepicker-border-color-disabled",
-    "--spectrum-datepicker-border-radius",
-    "--spectrum-datepicker-border-radius-quiet",
-    "--spectrum-datepicker-border-width",
-    "--spectrum-datepicker-dash-color",
-    "--spectrum-datepicker-dash-font-size",
-    "--spectrum-datepicker-dash-line-height",
-    "--spectrum-datepicker-datetime-input-width",
-    "--spectrum-datepicker-datetime-input-width-first",
-    "--spectrum-datepicker-datetime-quiet-input-width",
-    "--spectrum-datepicker-datetime-quiet-input-width-first",
-    "--spectrum-datepicker-datetime-width-first",
-    "--spectrum-datepicker-focus-animation",
-    "--spectrum-datepicker-focus-line-gap",
-    "--spectrum-datepicker-focus-ring-color",
-    "--spectrum-datepicker-focus-ring-gap",
-    "--spectrum-datepicker-focus-ring-width",
-    "--spectrum-datepicker-focus-thickness",
-    "--spectrum-datepicker-generic-padding",
-    "--spectrum-datepicker-icon-size",
-    "--spectrum-datepicker-icon-to-text",
-    "--spectrum-datepicker-initial-height",
-    "--spectrum-datepicker-initial-width",
-    "--spectrum-datepicker-input-datetime-width",
-    "--spectrum-datepicker-input-width",
-    "--spectrum-datepicker-input-width-base",
-    "--spectrum-datepicker-input-width-quiet",
-    "--spectrum-datepicker-invalid-icon-to-button",
-    "--spectrum-datepicker-invalid-icon-to-button-quiet",
-    "--spectrum-datepicker-invalid-quiet-color",
-    "--spectrum-datepicker-min-width",
-    "--spectrum-datepicker-padding-inline-end",
-    "--spectrum-datepicker-padding-inline-end-invalid-quiet",
-    "--spectrum-datepicker-padding-inline-end-quiet",
-    "--spectrum-datepicker-pickerbutton-border-color",
-    "--spectrum-datepicker-pickerbutton-border-color-invalid",
-    "--spectrum-datepicker-pickerbutton-width",
-    "--spectrum-datepicker-pickerbutton-width-quiet",
-    "--spectrum-datepicker-quiet-border-color-hover",
-    "--spectrum-datepicker-quiet-button-offset",
-    "--spectrum-datepicker-range-dash-marin-inline-start",
-    "--spectrum-datepicker-range-dash-padding-top",
-    "--spectrum-datepicker-range-input-width-first",
-    "--spectrum-datepicker-range-input-width-quiet-first",
-    "--spectrum-datepicker-width-quiet-first",
-    "--spectrum-datepicker-width-quiet-second"
-  ],
-  "global": [
-    "--spectrum-animation-duration-100",
-    "--spectrum-border-width-100",
-    "--spectrum-component-edge-to-text-100",
-    "--spectrum-component-height-100",
-    "--spectrum-corner-radius-100",
-    "--spectrum-disabled-border-color",
-    "--spectrum-disabled-content-color",
-    "--spectrum-field-edge-to-disclosure-icon-100",
-    "--spectrum-field-width",
-    "--spectrum-focus-indicator-color",
-    "--spectrum-focus-indicator-gap",
-    "--spectrum-focus-indicator-thickness",
-    "--spectrum-font-size-100",
-    "--spectrum-gray-500",
-    "--spectrum-negative-border-color-default",
-    "--spectrum-neutral-content-color-default",
-    "--spectrum-spacing-75",
-    "--spectrum-text-to-visual-100",
-    "--spectrum-workflow-icon-size-100"
-  ],
-  "passthroughs": [
-    "--mod-picker-button-background-color",
-    "--mod-picker-button-background-color-hover-disabled",
-    "--mod-picker-button-border-color",
-    "--mod-picker-button-border-color-disabled",
-    "--mod-textfield-border-color-disabled",
-    "--mod-textfield-icon-spacing-inline-end-invalid",
-    "--mod-textfield-icon-spacing-inline-end-quiet-invalid"
+    ".spectrum-DatePicker.spectrum-DatePicker--quiet.is-invalid"
   ],
-  "high-contrast": [
-    "--highcontrast-datepicker-dash-color",
-    "--highcontrast-datepicker-focus-ring-color",
-    "--highcontrast-datepicker-pickerbutton-border-color"
-  ]
+  "modifiers": {
+    "mod-datepicker-border-radius": {
+      "description": "Defined in `.spectrum-DatePicker--quiet`, `.spectrum-DatePicker--range`, `.spectrum-DatePicker--range.spectrum-DatePicker--quiet`. <br/>Used by `--spectrum-datepicker-border-radius`. <br/>Defaults to `var(--spectrum-corner-radius-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-datepicker-border-radius-quiet": {
+      "description": "Used by `--spectrum-datepicker-border-radius-quiet`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-datepicker-min-width": {
+      "description": "Used by `--spectrum-datepicker-min-width`. <br/>Defaults to `var(--spectrum-field-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-datepicker-pickerbutton-border-color": {
+      "description": "Used by `--spectrum-datepicker-pickerbutton-border-color`. <br/>Defaults to `var(--spectrum-gray-500)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-datepicker-pickerbutton-border-color-invalid": {
+      "description": "Used by `--spectrum-datepicker-pickerbutton-border-color-invalid`. <br/>Defaults to `var(--spectrum-negative-border-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-datepicker-quiet-button-offset": {
+      "description": "Used by `--spectrum-datepicker-quiet-button-offset`. <br/>Defaults to `var(--spectrum-text-to-visual-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-datepicker-focus-ring-gap": {
+      "description": "Used by `--spectrum-datepicker-focus-ring-gap`. <br/>Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-datepicker-focus-thickness": {
+      "description": "Used by `--spectrum-datepicker-focus-thickness`. <br/>Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-datepicker-focus-animation": {
+      "description": "Used by `--spectrum-datepicker-focus-animation`. <br/>Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-datepicker-focus-ring-width": {
+      "description": "Used by `--spectrum-datepicker-focus-ring-width`. <br/>Defaults to `var(--spectrum-border-width-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-datepicker-focus-ring-color": {
+      "description": "Used by `--spectrum-datepicker-focus-ring-color`. <br/>Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-datepicker-focus-line-gap": {
+      "description": "Used by `--spectrum-datepicker-focus-line-gap`. <br/>Defaults to `var(--spectrum-spacing-75)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-datepicker-invalid-quiet-color": {
+      "description": "Used by `--spectrum-datepicker-invalid-quiet-color`. <br/>Defaults to `var(--spectrum-negative-border-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-datepicker-quiet-border-color-hover": {
+      "description": "Used by `--spectrum-datepicker-quiet-border-color-hover`. <br/>Defaults to `var(--spectrum-gray-500)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-datepicker-border-color-disabled": {
+      "description": "Used by `--spectrum-datepicker-border-color-disabled`. <br/>Defaults to `var(--spectrum-disabled-border-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-datepicker-dash-font-size": {
+      "description": "Used by `--spectrum-datepicker-dash-font-size`. <br/>Defaults to `var(--spectrum-font-size-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-datepicker-dash-color": {
+      "description": "Defined in `.spectrum-DatePicker.is-disabled`. <br/>Used by `--spectrum-datepicker-dash-color`. <br/>Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-datepicker-range-dash-padding-top": {
+      "description": "Used by `--spectrum-datepicker-range-dash-padding-top`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-datepicker-range-dash-margin-left": {
+      "description": "Used by `--spectrum-datepicker-range-dash-marin-inline-start`. <br/>Defaults to `calc(var(--spectrum-datepicker-dash-font-size) * -0.5)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-datepicker-range-input-width-first": {
+      "description": "Used by `--spectrum-datepicker-range-input-width-first`. <br/>Defaults to `calc(var(--spectrum-datepicker-initial-width) - var(--spectrum-datepicker-generic-padding) * 2)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-datepicker-input-width": {
+      "description": "Used by `--spectrum-datepicker-input-width`. <br/>Defaults to `calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-initial-height))`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-datepicker-range-input-width-quiet-first": {
+      "description": "Used by `--spectrum-datepicker-range-input-width-quiet-first`. <br/>Defaults to `calc(var(--spectrum-datepicker-width-quiet-first) + var(--spectrum-datepicker-width-quiet-second))`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-datepicker-input-width-quiet": {
+      "description": "Used by `--spectrum-datepicker-input-width-quiet`. <br/>Defaults to `calc(var(--spectrum-datepicker-range-input-width-quiet-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height))`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-datepicker-datetime-input-width-first": {
+      "description": "Used by `--spectrum-datepicker-datetime-input-width-first`. <br/>Defaults to `calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-datetime-width-first))`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-datepicker-datetime-input-width": {
+      "description": "Used by `--spectrum-datepicker-datetime-input-width`. <br/>Defaults to `calc(var(--spectrum-datepicker-datetime-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height))`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-datepicker-datetime-quiet-input-width-first": {
+      "description": "Used by `--spectrum-datepicker-datetime-quiet-input-width-first`. <br/>Defaults to `calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-input-datetime-width))`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-datepicker-datetime-quiet-input-width": {
+      "description": "Used by `--spectrum-datepicker-datetime-quiet-input-width`. <br/>Defaults to `calc(var(--spectrum-datepicker-datetime-quiet-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height))`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-datepicker-padding-inline": {
+      "description": "Defined in `.spectrum-DatePicker--quiet`. <br/>Used by `--spectrum-datepicker-padding-inline-end`. <br/>Defaults to `calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - var(--spectrum-datepicker-border-width) * 2)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-datepicker-padding-inline-quiet": {
+      "description": "Used by `--spectrum-datepicker-padding-inline-end-quiet`. <br/>Defaults to `calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - var(--spectrum-datepicker-quiet-button-offset))`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-datepicker-padding-inline-end-invalid-quiet": {
+      "description": "Used by `--spectrum-datepicker-padding-inline-end-invalid-quiet`. <br/>Defaults to `calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-icon-to-text))`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-datepicker-dash-color-disabled": {
+      "description": "Used by `--mod-datepicker-dash-color`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-datepicker-generic-padding": {
+      "description": "Used by `.spectrum-DatePicker-input.spectrum-DatePicker-startField`, `.spectrum-DatePicker-input.spectrum-DatePicker-endField`. <br/>Defaults to `var(--spectrum-datepicker-generic-padding)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-datepicker-dash-line-height": {
+      "description": "Used by `.spectrum-DatePicker-rangeDash`. <br/>Defaults to `var(--spectrum-datepicker-dash-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-datepicker-border-radius": {
+      "value": "var(--mod-datepicker-border-radius, var(--spectrum-corner-radius-100))",
+      "description": "Defined in `.spectrum-DatePicker`. <br/>Used by `.spectrum-DatePicker`, `--mod-datepicker-border-radius`, `.spectrum-DatePicker--range:after`. <br/>Defaults to `var(--mod-datepicker-border-radius, var(--spectrum-corner-radius-100))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-datepicker-border-radius-quiet": {
+      "value": "var(--mod-datepicker-border-radius-quiet, 0)",
+      "description": "Defined in `.spectrum-DatePicker`. <br/>Used by `--mod-datepicker-border-radius`. <br/>Defaults to `var(--mod-datepicker-border-radius-quiet, 0)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-datepicker-border-width": {
+      "value": "1px",
+      "description": "Defined in `.spectrum-DatePicker`. <br/>Used by `--spectrum-datepicker-padding-inline-end`. <br/>Defaults to `var(--spectrum-border-width-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-datepicker-min-width": {
+      "value": "var(--mod-datepicker-min-width, var(--spectrum-field-width))",
+      "description": "Defined in `.spectrum-DatePicker`. <br/>Used by `.spectrum-DatePicker`. <br/>Defaults to `var(--mod-datepicker-min-width, var(--spectrum-field-width))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-datepicker-initial-height": {
+      "value": "32px",
+      "description": "Defined in `.spectrum-DatePicker`. <br/>Used by `--spectrum-datepicker-input-width`, `--spectrum-datepicker-input-width-quiet`, `--spectrum-datepicker-datetime-input-width`, `--spectrum-datepicker-datetime-quiet-input-width`. <br/>Defaults to `var(--spectrum-component-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-datepicker-icon-size": {
+      "value": "20px",
+      "description": "Defined in `.spectrum-DatePicker`. <br/>Used by `--spectrum-datepicker-input-width-base`, `--spectrum-datepicker-input-width-quiet`, `--spectrum-datepicker-datetime-input-width`, `--spectrum-datepicker-datetime-quiet-input-width`, `--spectrum-datepicker-padding-inline-end-invalid-quiet`. <br/>Defaults to `var(--spectrum-workflow-icon-size-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-datepicker-pickerbutton-border-color": {
+      "value": "var(--highcontrast-datepicker-pickerbutton-border-color, var(--mod-datepicker-pickerbutton-border-color, var(--spectrum-gray-500)))",
+      "description": "Defined in `.spectrum-DatePicker`. <br/>Used by `--mod-picker-button-border-color`. <br/>Defaults to `var(--highcontrast-datepicker-pickerbutton-border-color, var(--mod-datepicker-pickerbutton-border-color, var(--spectrum-gray-500)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-datepicker-pickerbutton-border-color-invalid": {
+      "value": "var(--highcontrast-datepicker-pickerbutton-border-color, var(--mod-datepicker-pickerbutton-border-color-invalid, var(--spectrum-negative-border-color-default)))",
+      "description": "Defined in `.spectrum-DatePicker`. <br/>Used by `--mod-picker-button-border-color`. <br/>Defaults to `var(--highcontrast-datepicker-pickerbutton-border-color, var(--mod-datepicker-pickerbutton-border-color-invalid, var(--spectrum-negative-border-color-default)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-datepicker-pickerbutton-width": {
+      "value": "calc(var(--spectrum-field-edge-to-disclosure-icon-100) * 2 + var(--spectrum-workflow-icon-size-100))",
+      "description": "Defined in `.spectrum-DatePicker`. <br/>Used by `--spectrum-datepicker-pickerbutton-width-quiet`, `--spectrum-datepicker-padding-inline-end`, `--spectrum-datepicker-padding-inline-end-quiet`, `--mod-textfield-icon-spacing-inline-end-invalid`. <br/>Defaults to `calc(var(--spectrum-field-edge-to-disclosure-icon-100) * 2 + var(--spectrum-workflow-icon-size-100))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-datepicker-quiet-button-offset": {
+      "value": "var(--mod-datepicker-quiet-button-offset, var(--spectrum-text-to-visual-100))",
+      "description": "Defined in `.spectrum-DatePicker`. <br/>Used by `--spectrum-datepicker-pickerbutton-width-quiet`, `--spectrum-datepicker-padding-inline-end-quiet`, `.spectrum-DatePicker--quiet .spectrum-DatePicker-button`. <br/>Defaults to `var(--mod-datepicker-quiet-button-offset, var(--spectrum-text-to-visual-100))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-datepicker-icon-to-text": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-DatePicker`. <br/>Used by `--spectrum-datepicker-padding-inline-end-invalid-quiet`. <br/>Defaults to `var(--spectrum-component-edge-to-text-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-datepicker-pickerbutton-width-quiet": {
+      "value": "calc(var(--spectrum-datepicker-pickerbutton-width) - var(--spectrum-datepicker-quiet-button-offset))",
+      "description": "Defined in `.spectrum-DatePicker`. <br/>Used by `--spectrum-datepicker-padding-inline-end-invalid-quiet`, `--mod-textfield-icon-spacing-inline-end-quiet-invalid`. <br/>Defaults to `calc(var(--spectrum-datepicker-pickerbutton-width) - var(--spectrum-datepicker-quiet-button-offset))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-datepicker-focus-ring-gap": {
+      "value": "var(--mod-datepicker-focus-ring-gap, var(--spectrum-focus-indicator-gap))",
+      "description": "Defined in `.spectrum-DatePicker`. <br/>Used by `.spectrum-DatePicker--range:after`. <br/>Defaults to `var(--mod-datepicker-focus-ring-gap, var(--spectrum-focus-indicator-gap))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-datepicker-focus-thickness": {
+      "value": "var(--mod-datepicker-focus-thickness, var(--spectrum-focus-indicator-thickness))",
+      "description": "Defined in `.spectrum-DatePicker`. <br/>Used by `.spectrum-DatePicker--range.spectrum-DatePicker--quiet.is-keyboardFocused:after`. <br/>Defaults to `var(--mod-datepicker-focus-thickness, var(--spectrum-focus-indicator-thickness))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-datepicker-focus-animation": {
+      "value": "var(--mod-datepicker-focus-animation, var(--spectrum-animation-duration-100))",
+      "description": "Defined in `.spectrum-DatePicker`. <br/>Used by `.spectrum-DatePicker--range:after`. <br/>Defaults to `var(--mod-datepicker-focus-animation, var(--spectrum-animation-duration-100))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-datepicker-focus-ring-width": {
+      "value": "var(--mod-datepicker-focus-ring-width, var(--spectrum-border-width-100))",
+      "description": "Defined in `.spectrum-DatePicker`. <br/>Used by `.spectrum-DatePicker--range.is-keyboardFocused:not(.spectrum-DatePicker--quiet):after`. <br/>Defaults to `var(--mod-datepicker-focus-ring-width, var(--spectrum-border-width-100))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-datepicker-focus-ring-color": {
+      "value": "var(--highcontrast-datepicker-focus-ring-color, var(--mod-datepicker-focus-ring-color, var(--spectrum-focus-indicator-color)))",
+      "description": "Defined in `.spectrum-DatePicker`. <br/>Used by `.spectrum-DatePicker--range.is-keyboardFocused:not(.spectrum-DatePicker--quiet):after`, `.spectrum-DatePicker--range.spectrum-DatePicker--quiet.is-keyboardFocused:after`. <br/>Defaults to `var(--highcontrast-datepicker-focus-ring-color, var(--mod-datepicker-focus-ring-color, var(--spectrum-focus-indicator-color)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-datepicker-focus-line-gap": {
+      "value": "var(--mod-datepicker-focus-line-gap, var(--spectrum-spacing-75))",
+      "description": "Defined in `.spectrum-DatePicker`. <br/>Used by `.spectrum-DatePicker--range.spectrum-DatePicker--quiet.is-keyboardFocused:after`. <br/>Defaults to `var(--mod-datepicker-focus-line-gap, var(--spectrum-spacing-75))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-datepicker-invalid-quiet-color": {
+      "value": "var(--mod-datepicker-invalid-quiet-color, var(--spectrum-negative-border-color-default))",
+      "description": "Defined in `.spectrum-DatePicker`. <br/>Used by `--mod-picker-button-border-color`. <br/>Defaults to `var(--mod-datepicker-invalid-quiet-color, var(--spectrum-negative-border-color-default))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-datepicker-quiet-border-color-hover": {
+      "value": "var(--mod-datepicker-quiet-border-color-hover, var(--spectrum-gray-500))",
+      "description": "Defined in `.spectrum-DatePicker`. <br/>Used by `--mod-picker-button-border-color`. <br/>Defaults to `var(--mod-datepicker-quiet-border-color-hover, var(--spectrum-gray-500))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-datepicker-border-color-disabled": {
+      "value": "var(--mod-datepicker-border-color-disabled, var(--spectrum-disabled-border-color))",
+      "description": "Defined in `.spectrum-DatePicker`. <br/>Used by `--mod-picker-button-border-color-disabled`, `--mod-picker-button-background-color-hover-disabled`, `--mod-textfield-border-color-disabled`. <br/>Defaults to `var(--mod-datepicker-border-color-disabled, var(--spectrum-disabled-border-color))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-datepicker-dash-font-size": {
+      "value": "var(--mod-datepicker-dash-font-size, var(--spectrum-font-size-100))",
+      "description": "Defined in `.spectrum-DatePicker`. <br/>Used by `--spectrum-datepicker-range-dash-marin-inline-start`, `.spectrum-DatePicker-rangeDash:before`. <br/>Defaults to `var(--mod-datepicker-dash-font-size, var(--spectrum-font-size-100))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-datepicker-dash-color": {
+      "value": "var(--highcontrast-datepicker-dash-color, var(--mod-datepicker-dash-color, var(--spectrum-neutral-content-color-default)))",
+      "description": "Defined in `.spectrum-DatePicker`. <br/>Used by `.spectrum-DatePicker-rangeDash`. <br/>Defaults to `var(--highcontrast-datepicker-dash-color, var(--mod-datepicker-dash-color, var(--spectrum-neutral-content-color-default)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-datepicker-range-dash-padding-top": {
+      "value": "var(--mod-datepicker-range-dash-padding-top, 0)",
+      "description": "Defined in `.spectrum-DatePicker`. <br/>Used by `.spectrum-DatePicker-rangeDash`. <br/>Defaults to `var(--mod-datepicker-range-dash-padding-top, 0)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-datepicker-range-dash-marin-inline-start": {
+      "value": "var(--mod-datepicker-range-dash-margin-left, calc(var(--spectrum-datepicker-dash-font-size) * -0.5))",
+      "description": "Defined in `.spectrum-DatePicker`. <br/>Used by `.spectrum-DatePicker-rangeDash:before`. <br/>Defaults to `var(--mod-datepicker-range-dash-margin-left, calc(var(--spectrum-datepicker-dash-font-size) * -0.5))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-datepicker-range-input-width-first": {
+      "value": "var(--mod-datepicker-range-input-width-first, calc(var(--spectrum-datepicker-initial-width) - var(--spectrum-datepicker-generic-padding) * 2))",
+      "description": "Defined in `.spectrum-DatePicker`. <br/>Used by `--spectrum-datepicker-input-width-base`, `.spectrum-DatePicker--range .spectrum-DatePicker-textfield:first-of-type`. <br/>Defaults to `var(--mod-datepicker-range-input-width-first, calc(var(--spectrum-datepicker-initial-width) - var(--spectrum-datepicker-generic-padding) * 2))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-datepicker-initial-width": {
+      "description": "Used by `--spectrum-datepicker-range-input-width-first`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-datepicker-generic-padding": {
+      "description": "Used by `--spectrum-datepicker-range-input-width-first`, `.spectrum-DatePicker-input.spectrum-DatePicker-startField`, `.spectrum-DatePicker-input.spectrum-DatePicker-endField`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-datepicker-input-width-base": {
+      "value": "calc(var(--spectrum-datepicker-range-input-width-first) + var(--spectrum-datepicker-icon-size))",
+      "description": "Defined in `.spectrum-DatePicker`. <br/>Used by `--spectrum-datepicker-input-width`, `--spectrum-datepicker-datetime-input-width-first`, `--spectrum-datepicker-datetime-quiet-input-width-first`. <br/>Defaults to `calc(var(--spectrum-datepicker-range-input-width-first) + var(--spectrum-datepicker-icon-size))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-datepicker-input-width": {
+      "value": "var(--mod-datepicker-input-width, calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-initial-height)))",
+      "description": "Defined in `.spectrum-DatePicker`. <br/>Used by `.spectrum-DatePicker--range .spectrum-DatePicker-textfield`. <br/>Defaults to `var(--mod-datepicker-input-width, calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-initial-height)))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-datepicker-range-input-width-quiet-first": {
+      "value": "var(--mod-datepicker-range-input-width-quiet-first, calc(var(--spectrum-datepicker-width-quiet-first) + var(--spectrum-datepicker-width-quiet-second)))",
+      "description": "Defined in `.spectrum-DatePicker`. <br/>Used by `--spectrum-datepicker-input-width-quiet`, `.spectrum-DatePicker--range.spectrum-DatePicker--quiet .spectrum-DatePicker-textfield:first-of-type`. <br/>Defaults to `var(--mod-datepicker-range-input-width-quiet-first, calc(var(--spectrum-datepicker-width-quiet-first) + var(--spectrum-datepicker-width-quiet-second)))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-datepicker-width-quiet-first": {
+      "description": "Used by `--spectrum-datepicker-range-input-width-quiet-first`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-datepicker-width-quiet-second": {
+      "description": "Used by `--spectrum-datepicker-range-input-width-quiet-first`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-datepicker-input-width-quiet": {
+      "value": "var(--mod-datepicker-input-width-quiet, calc(var(--spectrum-datepicker-range-input-width-quiet-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height)))",
+      "description": "Defined in `.spectrum-DatePicker`. <br/>Used by `.spectrum-DatePicker--range.spectrum-DatePicker--quiet .spectrum-DatePicker-textfield`. <br/>Defaults to `var(--mod-datepicker-input-width-quiet, calc(var(--spectrum-datepicker-range-input-width-quiet-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height)))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-datepicker-datetime-input-width-first": {
+      "value": "var(--mod-datepicker-datetime-input-width-first, calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-datetime-width-first)))",
+      "description": "Defined in `.spectrum-DatePicker`. <br/>Used by `--spectrum-datepicker-datetime-input-width`, `.spectrum-DatePicker--range.spectrum-DatePicker--datetimeRange .spectrum-DatePicker-textfield:first-of-type`. <br/>Defaults to `var(--mod-datepicker-datetime-input-width-first, calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-datetime-width-first)))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-datepicker-datetime-width-first": {
+      "description": "Used by `--spectrum-datepicker-datetime-input-width-first`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-datepicker-datetime-input-width": {
+      "value": "var(--mod-datepicker-datetime-input-width, calc(var(--spectrum-datepicker-datetime-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height)))",
+      "description": "Defined in `.spectrum-DatePicker`. <br/>Used by `.spectrum-DatePicker--range.spectrum-DatePicker--datetimeRange .spectrum-DatePicker-textfield`. <br/>Defaults to `var(--mod-datepicker-datetime-input-width, calc(var(--spectrum-datepicker-datetime-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height)))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-datepicker-datetime-quiet-input-width-first": {
+      "value": "var(--mod-datepicker-datetime-quiet-input-width-first, calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-input-datetime-width)))",
+      "description": "Defined in `.spectrum-DatePicker`. <br/>Used by `--spectrum-datepicker-datetime-quiet-input-width`, `.spectrum-DatePicker--range.spectrum-DatePicker--datetimeRange.spectrum-DatePicker--quiet .spectrum-DatePicker-textfield:first-of-type`. <br/>Defaults to `var(--mod-datepicker-datetime-quiet-input-width-first, calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-input-datetime-width)))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-datepicker-input-datetime-width": {
+      "description": "Used by `--spectrum-datepicker-datetime-quiet-input-width-first`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-datepicker-datetime-quiet-input-width": {
+      "value": "var(--mod-datepicker-datetime-quiet-input-width, calc(var(--spectrum-datepicker-datetime-quiet-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height)))",
+      "description": "Defined in `.spectrum-DatePicker`. <br/>Used by `.spectrum-DatePicker--range.spectrum-DatePicker--datetimeRange.spectrum-DatePicker--quiet .spectrum-DatePicker-textfield`. <br/>Defaults to `var(--mod-datepicker-datetime-quiet-input-width, calc(var(--spectrum-datepicker-datetime-quiet-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height)))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-datepicker-padding-inline-end": {
+      "value": "var(--mod-datepicker-padding-inline, calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - var(--spectrum-datepicker-border-width) * 2))",
+      "description": "Defined in `.spectrum-DatePicker`. <br/>Used by `.spectrum-DatePicker-input`. <br/>Defaults to `var(--mod-datepicker-padding-inline, calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - var(--spectrum-datepicker-border-width) * 2))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-datepicker-padding-inline-end-quiet": {
+      "value": "var(--mod-datepicker-padding-inline-quiet, calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - var(--spectrum-datepicker-quiet-button-offset)))",
+      "description": "Defined in `.spectrum-DatePicker`. <br/>Used by `--mod-datepicker-padding-inline`. <br/>Defaults to `var(--mod-datepicker-padding-inline-quiet, calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - var(--spectrum-datepicker-quiet-button-offset)))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-datepicker-padding-inline-end-invalid-quiet": {
+      "value": "var(--mod-datepicker-padding-inline-end-invalid-quiet, calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-icon-to-text)))",
+      "description": "Defined in `.spectrum-DatePicker`. <br/>Used by `.spectrum-DatePicker--quiet.is-invalid .spectrum-DatePicker-input:not(.spectrum-DatePicker-startField)`. <br/>Defaults to `var(--mod-datepicker-padding-inline-end-invalid-quiet, calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-icon-to-text)))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-datepicker-invalid-icon-to-button": {
+      "description": "Used by `--mod-textfield-icon-spacing-inline-end-invalid`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-datepicker-invalid-icon-to-button-quiet": {
+      "description": "Used by `--mod-textfield-icon-spacing-inline-end-quiet-invalid`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-datepicker-dash-line-height": {
+      "description": "Used by `.spectrum-DatePicker-rangeDash`.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-corner-radius-100": {
+      "value": "4px",
+      "description": "Used by `--spectrum-datepicker-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-border-width-100": {
+      "value": "1px",
+      "description": "Used by `--spectrum-datepicker-border-width`, `--spectrum-datepicker-focus-ring-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-width": {
+      "value": "var(--spectrum-field-width-small)",
+      "description": "Used by `--spectrum-datepicker-min-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-100": {
+      "value": "32px",
+      "description": "Used by `--spectrum-datepicker-initial-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-100": {
+      "value": "20px",
+      "description": "Used by `--spectrum-datepicker-icon-size`, `--spectrum-datepicker-pickerbutton-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-500": {
+      "value": "light-dark(rgb(143, 143, 143), rgb(109, 109, 109))",
+      "description": "Used by `--spectrum-datepicker-pickerbutton-border-color`, `--spectrum-datepicker-quiet-border-color-hover`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-negative-border-color-default": {
+      "value": "var(--spectrum-negative-color-900)",
+      "description": "Used by `--spectrum-datepicker-pickerbutton-border-color-invalid`, `--spectrum-datepicker-invalid-quiet-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-field-edge-to-disclosure-icon-100": {
+      "value": "11px",
+      "description": "Used by `--spectrum-datepicker-pickerbutton-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-datepicker-quiet-button-offset`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-text-100": {
+      "value": "12px",
+      "description": "Used by `--spectrum-datepicker-icon-to-text`, `--spectrum-datepicker-padding-inline-end`, `--spectrum-datepicker-padding-inline-end-quiet`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-gap": {
+      "value": "2px",
+      "description": "Used by `--spectrum-datepicker-focus-ring-gap`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Used by `--spectrum-datepicker-focus-thickness`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-animation-duration-100": {
+      "description": "Used by `--spectrum-datepicker-focus-animation`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Used by `--spectrum-datepicker-focus-ring-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-spacing-75": {
+      "value": "4px",
+      "description": "Used by `--spectrum-datepicker-focus-line-gap`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-disabled-border-color": {
+      "value": "var(--spectrum-gray-300)",
+      "description": "Used by `--spectrum-datepicker-border-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-font-size-100": {
+      "value": "14px",
+      "description": "Used by `--spectrum-datepicker-dash-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-datepicker-dash-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-disabled-content-color": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Used by `--mod-datepicker-dash-color`.",
+      "control": "color",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {
+    "mod-textfield-border-color-disabled": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-icon-spacing-inline-end-invalid": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-icon-spacing-inline-end-quiet-invalid": {
+      "category": "Passthrough"
+    },
+    "mod-picker-button-border-color": {
+      "category": "Passthrough"
+    },
+    "mod-picker-button-border-color-disabled": {
+      "category": "Passthrough"
+    },
+    "mod-picker-button-background-color-hover-disabled": {
+      "category": "Passthrough"
+    },
+    "mod-picker-button-background-color": {
+      "category": "Passthrough"
+    }
+  },
+  "high-contrast": {
+    "highcontrast-datepicker-pickerbutton-border-color": {
+      "value": "var(--mod-datepicker-pickerbutton-border-color-invalid, var(--spectrum-negative-border-color-default))",
+      "description": "Defined in `.spectrum-DatePicker`, `.spectrum-DatePicker.spectrum-DatePicker--quiet.is-invalid`. <br/>Used by `--spectrum-datepicker-pickerbutton-border-color`, `--spectrum-datepicker-pickerbutton-border-color-invalid`. <br/>Defaults to `var(--mod-datepicker-pickerbutton-border-color-invalid, var(--spectrum-negative-border-color-default))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-datepicker-focus-ring-color": {
+      "value": "var(--mod-datepicker-focus-ring-color, var(--spectrum-focus-indicator-color))",
+      "description": "Defined in `.spectrum-DatePicker`. <br/>Used by `--spectrum-datepicker-focus-ring-color`. <br/>Defaults to `var(--mod-datepicker-focus-ring-color, var(--spectrum-focus-indicator-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-datepicker-dash-color": {
+      "value": "var(--mod-datepicker-dash-color, var(--spectrum-neutral-content-color-default))",
+      "description": "Defined in `.spectrum-DatePicker`, `.spectrum-DatePicker.is-disabled`. <br/>Used by `--spectrum-datepicker-dash-color`. <br/>Defaults to `var(--mod-datepicker-dash-color, var(--spectrum-neutral-content-color-default))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/datepicker/stories/datepicker.stories.js b/components/datepicker/stories/datepicker.stories.js
index 0d40c563888..a9a8eecd724 100644
--- a/components/datepicker/stories/datepicker.stories.js
+++ b/components/datepicker/stories/datepicker.stories.js
@@ -2,11 +2,13 @@ import { default as CalendarStories } from "@spectrum-css/calendar/stories/calen
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, isInvalid, isOpen, isQuiet, isReadOnly, isRequired, isValid } from "@spectrum-css/preview/types";
 import { within } from "@storybook/test";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { DatePickerGroup } from "./datepicker.test.js";
 import { OpenClosedTemplate, Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * A date picker displays a text field input with a button next to it, and can display two text fields next to each other for choosing a date range.
  *
@@ -77,6 +79,10 @@ export default {
 		},
 		packageJson,
 		metadata,
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
diff --git a/components/datepicker/stories/template.js b/components/datepicker/stories/template.js
index eebb928df80..fca0580d3da 100644
--- a/components/datepicker/stories/template.js
+++ b/components/datepicker/stories/template.js
@@ -12,7 +12,7 @@ import "../index.css";
 
 export const DatePicker = ({
 	rootClass = "spectrum-DatePicker",
-	id = getRandomId("datepicker"),
+	id = getRandomId("date-picker"),
 	customClasses = [],
 	isOpen = true,
 	isInvalid = false,
diff --git a/components/dial/dist/metadata.json b/components/dial/dist/metadata.json
index 1d91c2bb539..b039cdee39c 100644
--- a/components/dial/dist/metadata.json
+++ b/components/dial/dist/metadata.json
@@ -6,8 +6,6 @@
     ".spectrum-Dial-controls:after",
     ".spectrum-Dial-controls:before",
     ".spectrum-Dial-handle",
-    ".spectrum-Dial-handle.is-dragged",
-    ".spectrum-Dial-handle.is-dragged:after",
     ".spectrum-Dial-handle:active",
     ".spectrum-Dial-handle:active:after",
     ".spectrum-Dial-handle:after",
@@ -18,6 +16,8 @@
     ".spectrum-Dial-handle:focus-within:after",
     ".spectrum-Dial-handle:hover",
     ".spectrum-Dial-handle:hover:after",
+    ".spectrum-Dial-handle.is-dragged",
+    ".spectrum-Dial-handle.is-dragged:after",
     ".spectrum-Dial-input",
     ".spectrum-Dial-input:focus",
     ".spectrum-Dial-label",
@@ -35,92 +35,441 @@
     ".u-isGrabbing .spectrum-Dial .spectrum-Dial-label",
     ".u-isGrabbing .spectrum-Dial .spectrum-Dial-value"
   ],
-  "modifiers": [
-    "--mod-dial-background-color-default",
-    "--mod-dial-border-color",
-    "--mod-dial-border-color-hover",
-    "--mod-dial-border-radius",
-    "--mod-dial-container-width",
-    "--mod-dial-controls-margin",
-    "--mod-dial-controls-min-height",
-    "--mod-dial-handle-block-margin",
-    "--mod-dial-handle-border-color-disabled",
-    "--mod-dial-handle-border-size",
-    "--mod-dial-handle-inline-margin",
-    "--mod-dial-handle-marker-border-radius",
-    "--mod-dial-handle-marker-color",
-    "--mod-dial-handle-marker-color-hover",
-    "--mod-dial-handle-marker-color-key-focus",
-    "--mod-dial-handle-marker-color-mouse-focus",
-    "--mod-dial-handle-marker-height",
-    "--mod-dial-handle-marker-width",
-    "--mod-dial-handle-position",
-    "--mod-dial-handle-size",
-    "--mod-dial-height",
-    "--mod-dial-label-container-top-to-text",
-    "--mod-dial-label-gap-y",
-    "--mod-dial-label-line-height",
-    "--mod-dial-label-text-color",
-    "--mod-dial-label-text-color-disabled",
-    "--mod-dial-label-text-size",
-    "--mod-dial-min-height",
-    "--mod-dial-min-max-tick-angles",
-    "--mod-dial-min-max-tick-color",
-    "--mod-dial-width"
-  ],
-  "component": [
-    "--spectrum-dial-background-color-default",
-    "--spectrum-dial-border-color",
-    "--spectrum-dial-border-color-hover",
-    "--spectrum-dial-border-radius",
-    "--spectrum-dial-container-width",
-    "--spectrum-dial-controls-margin",
-    "--spectrum-dial-controls-min-height",
-    "--spectrum-dial-handle-block-margin",
-    "--spectrum-dial-handle-border-color-disabled",
-    "--spectrum-dial-handle-border-size",
-    "--spectrum-dial-handle-inline-margin",
-    "--spectrum-dial-handle-marker-border-radius",
-    "--spectrum-dial-handle-marker-color",
-    "--spectrum-dial-handle-marker-color-hover",
-    "--spectrum-dial-handle-marker-color-key-focus",
-    "--spectrum-dial-handle-marker-color-mouse-focus",
-    "--spectrum-dial-handle-marker-height",
-    "--spectrum-dial-handle-marker-width",
-    "--spectrum-dial-handle-position",
-    "--spectrum-dial-handle-size",
-    "--spectrum-dial-height",
-    "--spectrum-dial-label-container-top-to-text",
-    "--spectrum-dial-label-gap-y",
-    "--spectrum-dial-label-line-height",
-    "--spectrum-dial-label-text-color",
-    "--spectrum-dial-label-text-color-disabled",
-    "--spectrum-dial-label-text-size",
-    "--spectrum-dial-min-height",
-    "--spectrum-dial-min-max-tick-angles",
-    "--spectrum-dial-min-max-tick-color",
-    "--spectrum-dial-width"
-  ],
-  "global": [
-    "--spectrum-border-width-200",
-    "--spectrum-font-size-75",
-    "--spectrum-gray-25",
-    "--spectrum-gray-400",
-    "--spectrum-gray-600",
-    "--spectrum-gray-700",
-    "--spectrum-gray-75",
-    "--spectrum-gray-800",
-    "--spectrum-line-height-200"
-  ],
-  "passthroughs": [],
-  "high-contrast": [
-    "--highcontrast-dial-border-color",
-    "--highcontrast-dial-border-color-hover",
-    "--highcontrast-dial-handle-border-color-disabled",
-    "--highcontrast-dial-handle-marker-color",
-    "--highcontrast-dial-handle-marker-color-hover",
-    "--highcontrast-dial-handle-marker-color-key-focus",
-    "--highcontrast-dial-label-text-color-disabled",
-    "--highcontrast-dial-min-max-tick-color"
-  ]
+  "modifiers": {
+    "mod-dial-min-height": {
+      "description": "Used by `.spectrum-Dial`. <br/>Defaults to `var(--spectrum-dial-min-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-dial-container-width": {
+      "description": "Used by `.spectrum-Dial`. <br/>Defaults to `var(--spectrum-dial-container-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-dial-label-text-color-disabled": {
+      "description": "Used by `.spectrum-Dial.is-disabled .spectrum-Dial-labelContainer`. <br/>Defaults to `var(--spectrum-dial-label-text-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-dial-handle-border-color-disabled": {
+      "description": "Used by `.spectrum-Dial.is-disabled .spectrum-Dial-controls:after, .spectrum-Dial.is-disabled .spectrum-Dial-controls:before`, `.spectrum-Dial.is-disabled .spectrum-Dial-handle`, `.spectrum-Dial.is-disabled .spectrum-Dial-handle:after, .spectrum-Dial.is-disabled .spectrum-Dial-handle:before`. <br/>Defaults to `var(--spectrum-dial-handle-border-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-dial-background-color-default": {
+      "description": "Used by `.spectrum-Dial.is-disabled .spectrum-Dial-handle`. <br/>Defaults to `var(--spectrum-dial-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-dial-label-text-color": {
+      "description": "Used by `.spectrum-Dial-labelContainer`. <br/>Defaults to `var(--spectrum-dial-label-text-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-dial-label-container-top-to-text": {
+      "description": "Used by `.spectrum-Dial-labelContainer`. <br/>Defaults to `var(--spectrum-dial-label-container-top-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-dial-label-text-size": {
+      "description": "Used by `.spectrum-Dial-labelContainer`. <br/>Defaults to `var(--spectrum-dial-label-text-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-dial-label-line-height": {
+      "description": "Used by `.spectrum-Dial-labelContainer`. <br/>Defaults to `var(--spectrum-dial-label-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-dial-label-gap-y": {
+      "description": "Used by `.spectrum-Dial-labelContainer`. <br/>Defaults to `var(--spectrum-dial-label-gap-y)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-dial-width": {
+      "description": "Used by `.spectrum-Dial-controls`. <br/>Defaults to `var(--spectrum-dial-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-dial-height": {
+      "description": "Used by `.spectrum-Dial-controls`. <br/>Defaults to `var(--spectrum-dial-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-dial-controls-min-height": {
+      "description": "Used by `.spectrum-Dial-controls`. <br/>Defaults to `var(--spectrum-dial-controls-min-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-dial-controls-margin": {
+      "description": "Used by `.spectrum-Dial-controls`. <br/>Defaults to `var(--spectrum-dial-controls-margin)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-dial-border-radius": {
+      "description": "Used by `.spectrum-Dial-controls`, `.spectrum-Dial-handle`. <br/>Defaults to `var(--spectrum-dial-border-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-dial-min-max-tick-color": {
+      "description": "Used by `.spectrum-Dial-controls:after, .spectrum-Dial-controls:before`. <br/>Defaults to `var(--spectrum-dial-min-max-tick-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-dial-handle-marker-height": {
+      "description": "Used by `.spectrum-Dial-controls:after, .spectrum-Dial-controls:before`, `.spectrum-Dial-controls:before`, `.spectrum-Dial-controls:after`, `.spectrum-Dial-handle:after`. <br/>Defaults to `var(--spectrum-dial-handle-marker-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-dial-handle-marker-border-radius": {
+      "description": "Used by `.spectrum-Dial-controls:after, .spectrum-Dial-controls:before`, `.spectrum-Dial-handle:after`. <br/>Defaults to `var(--spectrum-dial-handle-marker-border-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-dial-min-max-tick-angles": {
+      "description": "Used by `.spectrum-Dial-controls:before`, `.spectrum-Dial-controls:after, .spectrum-Dial-handle`. <br/>Defaults to `var(--spectrum-dial-min-max-tick-angles)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-dial-border-color": {
+      "description": "Used by `.spectrum-Dial-handle`. <br/>Defaults to `var(--spectrum-dial-border-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-dial-handle-block-margin": {
+      "description": "Used by `.spectrum-Dial-handle`. <br/>Defaults to `var(--spectrum-dial-handle-block-margin)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-dial-handle-inline-margin": {
+      "description": "Used by `.spectrum-Dial-handle`. <br/>Defaults to `var(--spectrum-dial-handle-inline-margin)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-dial-handle-size": {
+      "description": "Used by `.spectrum-Dial-handle`. <br/>Defaults to `var(--spectrum-dial-handle-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-dial-handle-border-size": {
+      "description": "Used by `.spectrum-Dial-handle`, `.spectrum-Dial-handle.is-dragged, .spectrum-Dial-handle:active, .spectrum-Dial-handle:focus-visible, .spectrum-Dial-handle:focus-within`. <br/>Defaults to `var(--spectrum-dial-handle-border-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-dial-handle-position": {
+      "description": "Used by `.spectrum-Dial-handle`. <br/>Defaults to `var(--spectrum-dial-handle-position)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-dial-handle-marker-width": {
+      "description": "Used by `.spectrum-Dial-handle:after`. <br/>Defaults to `var(--spectrum-dial-handle-marker-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-dial-handle-marker-color": {
+      "description": "Used by `.spectrum-Dial-handle:after`. <br/>Defaults to `var(--spectrum-dial-handle-marker-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-dial-border-color-hover": {
+      "description": "Used by `.spectrum-Dial-handle:hover`, `.spectrum-Dial-handle.is-dragged, .spectrum-Dial-handle:active`. <br/>Defaults to `var(--spectrum-dial-border-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-dial-handle-marker-color-hover": {
+      "description": "Used by `.spectrum-Dial-handle:hover:after`. <br/>Defaults to `var(--spectrum-dial-handle-marker-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-dial-handle-marker-color-mouse-focus": {
+      "description": "Used by `.spectrum-Dial-handle:focus-visible, .spectrum-Dial-handle:focus-within`. <br/>Defaults to `var(--spectrum-dial-handle-marker-color-mouse-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-dial-handle-marker-color-key-focus": {
+      "description": "Used by `.spectrum-Dial-handle:focus-visible:after, .spectrum-Dial-handle:focus-within:after`, `.spectrum-Dial-handle.is-dragged:after, .spectrum-Dial-handle:active:after`. <br/>Defaults to `var(--spectrum-dial-handle-marker-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-dial-background-color-default": {
+      "value": "light-dark(rgb(243, 243, 243), rgb(34, 34, 34))",
+      "description": "Defined in `.spectrum-Dial`. <br/>Used by `.spectrum-Dial.is-disabled .spectrum-Dial-handle`. <br/>Defaults to `var(--spectrum-gray-75)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-dial-handle-marker-color-key-focus": {
+      "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+      "description": "Defined in `.spectrum-Dial`. <br/>Used by `.spectrum-Dial-handle:focus-visible:after, .spectrum-Dial-handle:focus-within:after`, `.spectrum-Dial-handle.is-dragged:after, .spectrum-Dial-handle:active:after`. <br/>Defaults to `var(--spectrum-gray-25)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-dial-handle-marker-color": {
+      "value": "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))",
+      "description": "Defined in `.spectrum-Dial`. <br/>Used by `.spectrum-Dial-handle:after`. <br/>Defaults to `var(--spectrum-gray-700)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-dial-border-color": {
+      "value": "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))",
+      "description": "Defined in `.spectrum-Dial`. <br/>Used by `.spectrum-Dial-handle`. <br/>Defaults to `var(--spectrum-gray-700)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-dial-handle-marker-color-hover": {
+      "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+      "description": "Defined in `.spectrum-Dial`. <br/>Used by `.spectrum-Dial-handle:hover:after`. <br/>Defaults to `var(--spectrum-gray-800)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-dial-border-color-hover": {
+      "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+      "description": "Defined in `.spectrum-Dial`. <br/>Used by `.spectrum-Dial-handle:hover`, `.spectrum-Dial-handle.is-dragged, .spectrum-Dial-handle:active`. <br/>Defaults to `var(--spectrum-gray-800)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-dial-handle-marker-color-mouse-focus": {
+      "value": "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))",
+      "description": "Defined in `.spectrum-Dial`. <br/>Used by `.spectrum-Dial-handle:focus-visible, .spectrum-Dial-handle:focus-within`. <br/>Defaults to `var(--spectrum-gray-700)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-dial-min-max-tick-color": {
+      "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))",
+      "description": "Defined in `.spectrum-Dial`. <br/>Used by `.spectrum-Dial-controls:after, .spectrum-Dial-controls:before`. <br/>Defaults to `var(--spectrum-gray-600)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-dial-label-text-color": {
+      "value": "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))",
+      "description": "Defined in `.spectrum-Dial`. <br/>Used by `.spectrum-Dial-labelContainer`. <br/>Defaults to `var(--spectrum-gray-700)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-dial-label-text-color-disabled": {
+      "value": "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))",
+      "description": "Defined in `.spectrum-Dial`. <br/>Used by `.spectrum-Dial.is-disabled .spectrum-Dial-labelContainer`. <br/>Defaults to `var(--spectrum-gray-700)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-dial-handle-border-color-disabled": {
+      "value": "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))",
+      "description": "Defined in `.spectrum-Dial`. <br/>Used by `.spectrum-Dial.is-disabled .spectrum-Dial-controls:after, .spectrum-Dial.is-disabled .spectrum-Dial-controls:before`, `.spectrum-Dial.is-disabled .spectrum-Dial-handle`, `.spectrum-Dial.is-disabled .spectrum-Dial-handle:after, .spectrum-Dial.is-disabled .spectrum-Dial-handle:before`. <br/>Defaults to `var(--spectrum-gray-400)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-dial-container-width": {
+      "value": "48px",
+      "description": "Defined in `.spectrum-Dial`. <br/>Used by `.spectrum-Dial`. <br/>Defaults to `48px`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-dial-handle-marker-width": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-Dial`. <br/>Used by `.spectrum-Dial-handle:after`. <br/>Defaults to `12px`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-dial-handle-marker-height": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Dial`. <br/>Used by `.spectrum-Dial-controls:after, .spectrum-Dial-controls:before`, `.spectrum-Dial-controls:before`, `.spectrum-Dial-controls:after`, `.spectrum-Dial-handle:after`. <br/>Defaults to `2px`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-dial-handle-marker-border-radius": {
+      "value": "1px",
+      "description": "Defined in `.spectrum-Dial`. <br/>Used by `.spectrum-Dial-controls:after, .spectrum-Dial-controls:before`, `.spectrum-Dial-handle:after`. <br/>Defaults to `1px`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-dial-handle-size": {
+      "value": "100%",
+      "description": "Defined in `.spectrum-Dial`. <br/>Used by `.spectrum-Dial-handle`, `.spectrum-Dial-input`. <br/>Defaults to `100%`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-dial-min-height": {
+      "value": "0",
+      "description": "Defined in `.spectrum-Dial`. <br/>Used by `.spectrum-Dial`. <br/>Defaults to `0`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-dial-controls-min-height": {
+      "value": "0",
+      "description": "Defined in `.spectrum-Dial`. <br/>Used by `.spectrum-Dial-controls`. <br/>Defaults to `0`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-dial-min-max-tick-angles": {
+      "value": "45deg",
+      "description": "Defined in `.spectrum-Dial`. <br/>Used by `.spectrum-Dial-controls:before`, `.spectrum-Dial-controls:after, .spectrum-Dial-handle`. <br/>Defaults to `45deg`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-dial-width": {
+      "value": "24px",
+      "description": "Defined in `.spectrum-Dial`, `.spectrum-Dial.spectrum-Dial--small`. <br/>Used by `.spectrum-Dial-controls`. <br/>Defaults to `24px`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-dial-height": {
+      "value": "24px",
+      "description": "Defined in `.spectrum-Dial`, `.spectrum-Dial.spectrum-Dial--small`. <br/>Used by `.spectrum-Dial-controls`. <br/>Defaults to `24px`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-dial-handle-border-size": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Dial`. <br/>Used by `.spectrum-Dial-handle`, `.spectrum-Dial-handle.is-dragged, .spectrum-Dial-handle:active, .spectrum-Dial-handle:focus-visible, .spectrum-Dial-handle:focus-within`. <br/>Defaults to `var(--spectrum-border-width-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-dial-label-text-size": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-Dial`. <br/>Used by `.spectrum-Dial-labelContainer`. <br/>Defaults to `var(--spectrum-font-size-75)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-dial-label-line-height": {
+      "value": "1.5",
+      "description": "Defined in `.spectrum-Dial`. <br/>Used by `.spectrum-Dial-labelContainer`. <br/>Defaults to `var(--spectrum-line-height-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-dial-label-container-top-to-text": {
+      "description": "Used by `.spectrum-Dial-labelContainer`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-dial-label-gap-y": {
+      "description": "Used by `.spectrum-Dial-labelContainer`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-dial-controls-margin": {
+      "description": "Used by `.spectrum-Dial-controls`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-dial-border-radius": {
+      "description": "Used by `.spectrum-Dial-controls`, `.spectrum-Dial-handle`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-dial-handle-block-margin": {
+      "description": "Used by `.spectrum-Dial-handle`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-dial-handle-inline-margin": {
+      "description": "Used by `.spectrum-Dial-handle`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-dial-handle-position": {
+      "description": "Used by `.spectrum-Dial-handle`.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-gray-75": {
+      "value": "light-dark(rgb(243, 243, 243), rgb(34, 34, 34))",
+      "description": "Used by `--spectrum-dial-background-color-default`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-25": {
+      "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+      "description": "Used by `--spectrum-dial-handle-marker-color-key-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-700": {
+      "value": "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))",
+      "description": "Used by `--spectrum-dial-handle-marker-color`, `--spectrum-dial-border-color`, `--spectrum-dial-handle-marker-color-mouse-focus`, `--spectrum-dial-label-text-color`, `--spectrum-dial-label-text-color-disabled`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-800": {
+      "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+      "description": "Used by `--spectrum-dial-handle-marker-color-hover`, `--spectrum-dial-border-color-hover`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-600": {
+      "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))",
+      "description": "Used by `--spectrum-dial-min-max-tick-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-400": {
+      "value": "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))",
+      "description": "Used by `--spectrum-dial-handle-border-color-disabled`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-border-width-200": {
+      "value": "2px",
+      "description": "Used by `--spectrum-dial-handle-border-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-75": {
+      "value": "12px",
+      "description": "Used by `--spectrum-dial-label-text-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-line-height-200": {
+      "value": "1.5",
+      "description": "Used by `--spectrum-dial-label-line-height`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {
+    "highcontrast-dial-label-text-color-disabled": {
+      "value": "var(--mod-dial-label-text-color-disabled, var(--spectrum-dial-label-text-color-disabled))",
+      "description": "Defined in `.spectrum-Dial`. <br/>Used by `.spectrum-Dial.is-disabled .spectrum-Dial-labelContainer`. <br/>Defaults to `var(--mod-dial-label-text-color-disabled, var(--spectrum-dial-label-text-color-disabled))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-dial-handle-border-color-disabled": {
+      "value": "var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled))",
+      "description": "Defined in `.spectrum-Dial`. <br/>Used by `.spectrum-Dial.is-disabled .spectrum-Dial-controls:after, .spectrum-Dial.is-disabled .spectrum-Dial-controls:before`, `.spectrum-Dial.is-disabled .spectrum-Dial-handle`, `.spectrum-Dial.is-disabled .spectrum-Dial-handle:after, .spectrum-Dial.is-disabled .spectrum-Dial-handle:before`. <br/>Defaults to `var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-dial-min-max-tick-color": {
+      "value": "var(--mod-dial-min-max-tick-color, var(--spectrum-dial-min-max-tick-color))",
+      "description": "Defined in `.spectrum-Dial`. <br/>Used by `.spectrum-Dial-controls:after, .spectrum-Dial-controls:before`. <br/>Defaults to `var(--mod-dial-min-max-tick-color, var(--spectrum-dial-min-max-tick-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-dial-border-color": {
+      "value": "var(--mod-dial-border-color, var(--spectrum-dial-border-color))",
+      "description": "Defined in `.spectrum-Dial`. <br/>Used by `.spectrum-Dial-handle`. <br/>Defaults to `var(--mod-dial-border-color, var(--spectrum-dial-border-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-dial-handle-marker-color": {
+      "value": "var(--mod-dial-handle-marker-color, var(--spectrum-dial-handle-marker-color))",
+      "description": "Defined in `.spectrum-Dial`. <br/>Used by `.spectrum-Dial-handle:after`. <br/>Defaults to `var(--mod-dial-handle-marker-color, var(--spectrum-dial-handle-marker-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-dial-border-color-hover": {
+      "value": "var(--mod-dial-border-color-hover, var(--spectrum-dial-border-color-hover))",
+      "description": "Defined in `.spectrum-Dial`. <br/>Used by `.spectrum-Dial-handle:hover`, `.spectrum-Dial-handle.is-dragged, .spectrum-Dial-handle:active`. <br/>Defaults to `var(--mod-dial-border-color-hover, var(--spectrum-dial-border-color-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-dial-handle-marker-color-hover": {
+      "value": "var(--mod-dial-handle-marker-color-hover, var(--spectrum-dial-handle-marker-color-hover))",
+      "description": "Defined in `.spectrum-Dial`. <br/>Used by `.spectrum-Dial-handle:hover:after`. <br/>Defaults to `var(--mod-dial-handle-marker-color-hover, var(--spectrum-dial-handle-marker-color-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-dial-handle-marker-color-key-focus": {
+      "value": "var(--mod-dial-handle-marker-color-key-focus, var(--spectrum-dial-handle-marker-color-key-focus))",
+      "description": "Defined in `.spectrum-Dial`. <br/>Used by `.spectrum-Dial-handle:focus-visible:after, .spectrum-Dial-handle:focus-within:after`, `.spectrum-Dial-handle.is-dragged:after, .spectrum-Dial-handle:active:after`. <br/>Defaults to `var(--mod-dial-handle-marker-color-key-focus, var(--spectrum-dial-handle-marker-color-key-focus))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/dial/stories/dial.stories.js b/components/dial/stories/dial.stories.js
index 4491aa2b861..00bf7a7b21a 100644
--- a/components/dial/stories/dial.stories.js
+++ b/components/dial/stories/dial.stories.js
@@ -1,10 +1,12 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, isDragged, isFocused, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { DialGroup } from "./dial.test.js";
 import { Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * A dial is an input control used for selecting a value within a range, similar to a slider. It's often used in audio and video mixing and editing applications, where horizontal space is limited.
  */
@@ -38,6 +40,10 @@ export default {
 		status: {
 			type: "migrated",
 		},
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 	tags: ["migrated"],
 };
diff --git a/components/dialog/dist/metadata.json b/components/dialog/dist/metadata.json
index 738156392db..28af442d9b0 100644
--- a/components/dialog/dist/metadata.json
+++ b/components/dialog/dist/metadata.json
@@ -41,101 +41,509 @@
     ".spectrum-Dialog-heading",
     ".spectrum-Dialog-hero"
   ],
-  "modifiers": [
-    "--mod-standard-dialog-background-color",
-    "--mod-standard-dialog-border-radius",
-    "--mod-standard-dialog-description-font-size",
-    "--mod-standard-dialog-description-font-weight",
-    "--mod-standard-dialog-description-line-height",
-    "--mod-standard-dialog-description-text-color",
-    "--mod-standard-dialog-header-content-font-size",
-    "--mod-standard-dialog-heading-font-size",
-    "--mod-standard-dialog-heading-font-weight",
-    "--mod-standard-dialog-heading-line-height",
-    "--mod-standard-dialog-heading-text-color",
-    "--mod-standard-dialog-hero-block-size",
-    "--mod-standard-dialog-max-width",
-    "--mod-standard-dialog-max-width-large",
-    "--mod-standard-dialog-max-width-small",
-    "--mod-standard-dialog-min-inline-size",
-    "--mod-standard-dialog-spacing-description-to-footer",
-    "--mod-standard-dialog-spacing-edge-to-close-button",
-    "--mod-standard-dialog-spacing-footer-to-button-group",
-    "--mod-standard-dialog-spacing-grid-padding",
-    "--mod-standard-dialog-spacing-title-to-description",
-    "--mod-standard-dialog-spacing-title-to-header-content",
-    "--mod-takeover-dialog-grid-spacing",
-    "--mod-takeover-dialog-spacing-header-content-gap",
-    "--mod-takeover-dialog-title-font-size"
-  ],
-  "component": [],
-  "global": [
-    "--spectrum-background-layer-2-color",
-    "--spectrum-black-rgb",
-    "--spectrum-body-color",
-    "--spectrum-body-sans-serif-font-style",
-    "--spectrum-body-sans-serif-font-weight",
-    "--spectrum-corner-radius-extra-large-default",
-    "--spectrum-heading-color",
-    "--spectrum-line-height-200",
-    "--spectrum-overlay-opacity",
-    "--spectrum-sans-font-family-stack",
-    "--spectrum-spacing-200",
-    "--spectrum-spacing-300",
-    "--spectrum-spacing-400",
-    "--spectrum-spacing-500",
-    "--spectrum-standard-dialog-background-color",
-    "--spectrum-standard-dialog-body-font-size",
-    "--spectrum-standard-dialog-border-radius",
-    "--spectrum-standard-dialog-description-font-family",
-    "--spectrum-standard-dialog-description-font-size",
-    "--spectrum-standard-dialog-description-font-style",
-    "--spectrum-standard-dialog-description-font-weight",
-    "--spectrum-standard-dialog-description-line-height",
-    "--spectrum-standard-dialog-description-text-color",
-    "--spectrum-standard-dialog-header-content-font-size",
-    "--spectrum-standard-dialog-heading-font-family",
-    "--spectrum-standard-dialog-heading-font-size",
-    "--spectrum-standard-dialog-heading-font-style",
-    "--spectrum-standard-dialog-heading-font-weight",
-    "--spectrum-standard-dialog-heading-line-height",
-    "--spectrum-standard-dialog-heading-text-color",
-    "--spectrum-standard-dialog-hero-block-size",
-    "--spectrum-standard-dialog-max-width",
-    "--spectrum-standard-dialog-maximum-width-large",
-    "--spectrum-standard-dialog-maximum-width-medium",
-    "--spectrum-standard-dialog-maximum-width-small",
-    "--spectrum-standard-dialog-min-inline-size",
-    "--spectrum-standard-dialog-minimum-width",
-    "--spectrum-standard-dialog-padding",
-    "--spectrum-standard-dialog-spacing-description-to-footer",
-    "--spectrum-standard-dialog-spacing-edge-to-close-button",
-    "--spectrum-standard-dialog-spacing-edge-to-content",
-    "--spectrum-standard-dialog-spacing-edge-to-header-content-inline-end",
-    "--spectrum-standard-dialog-spacing-footer-to-button-group",
-    "--spectrum-standard-dialog-spacing-grid-padding",
-    "--spectrum-standard-dialog-spacing-title-to-description",
-    "--spectrum-standard-dialog-spacing-title-to-header-content",
-    "--spectrum-standard-dialog-title-font-size",
-    "--spectrum-takeover-dialog-block-size",
-    "--spectrum-takeover-dialog-grid-spacing",
-    "--spectrum-takeover-dialog-height",
-    "--spectrum-takeover-dialog-inline-size",
-    "--spectrum-takeover-dialog-spacing-grid-padding",
-    "--spectrum-takeover-dialog-spacing-header-content-gap",
-    "--spectrum-takeover-dialog-spacing-header-gap",
-    "--spectrum-takeover-dialog-spacing-title-to-body",
-    "--spectrum-takeover-dialog-spacing-title-to-content",
-    "--spectrum-takeover-dialog-title-font-size",
-    "--spectrum-takeover-dialog-width",
-    "--spectrum-title-line-height",
-    "--spectrum-title-sans-serif-font-style",
-    "--spectrum-title-sans-serif-font-weight",
-    "--spectrum-title-size-xxl"
-  ],
-  "passthroughs": [
-    "--mod-buttongroup-flex-wrap",
-    "--mod-buttongroup-justify-content"
-  ],
-  "high-contrast": []
+  "modifiers": {
+    "mod-standard-dialog-max-width-small": {
+      "description": "Used by `--spectrum-standard-dialog-max-width`. <br/>Defaults to `var(--spectrum-standard-dialog-maximum-width-small)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-standard-dialog-max-width-large": {
+      "description": "Used by `--spectrum-standard-dialog-max-width`. <br/>Defaults to `var(--spectrum-standard-dialog-maximum-width-large)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-standard-dialog-max-width": {
+      "description": "Used by `.spectrum-Dialog`. <br/>Defaults to `var(--spectrum-standard-dialog-max-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-standard-dialog-min-inline-size": {
+      "description": "Used by `.spectrum-Dialog`. <br/>Defaults to `var(--spectrum-standard-dialog-min-inline-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-standard-dialog-background-color": {
+      "description": "Used by `.spectrum-Dialog`. <br/>Defaults to `var(--spectrum-standard-dialog-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-standard-dialog-border-radius": {
+      "description": "Used by `.spectrum-Dialog`. <br/>Defaults to `var(--spectrum-standard-dialog-border-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-standard-dialog-hero-block-size": {
+      "description": "Used by `.spectrum-Dialog-hero`. <br/>Defaults to `var(--spectrum-standard-dialog-hero-block-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-standard-dialog-spacing-grid-padding": {
+      "description": "Used by `.spectrum-Dialog-grid`, `.spectrum-Dialog--dismissible .spectrum-Dialog-grid`, `.spectrum-Dialog--fullscreen.spectrum-Dialog .spectrum-Dialog-grid, .spectrum-Dialog--fullscreenTakeover.spectrum-Dialog .spectrum-Dialog-grid`. <br/>Defaults to `var(--spectrum-standard-dialog-spacing-grid-padding)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-standard-dialog-heading-font-size": {
+      "description": "Used by `.spectrum-Dialog-heading`. <br/>Defaults to `var(--spectrum-standard-dialog-heading-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-standard-dialog-heading-font-weight": {
+      "description": "Used by `.spectrum-Dialog-heading`. <br/>Defaults to `var(--spectrum-standard-dialog-heading-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-standard-dialog-heading-line-height": {
+      "description": "Used by `.spectrum-Dialog-heading`. <br/>Defaults to `var(--spectrum-standard-dialog-heading-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-standard-dialog-heading-text-color": {
+      "description": "Used by `.spectrum-Dialog-heading`. <br/>Defaults to `var(--spectrum-standard-dialog-heading-text-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-standard-dialog-spacing-title-to-description": {
+      "description": "Used by `.spectrum-Dialog-header`, `.spectrum-Dialog-heading`. <br/>Defaults to `var(--spectrum-standard-dialog-spacing-title-to-description)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-standard-dialog-spacing-title-to-header-content": {
+      "description": "Used by `.spectrum-Dialog-header`. <br/>Defaults to `var(--spectrum-standard-dialog-spacing-title-to-header-content)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-standard-dialog-header-content-font-size": {
+      "description": "Used by `.spectrum-Dialog-header > .spectrum-Dialog-headerContentWrapper`. <br/>Defaults to `var(--spectrum-standard-dialog-header-content-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-standard-dialog-description-font-size": {
+      "description": "Used by `.spectrum-Dialog-content`. <br/>Defaults to `var(--spectrum-standard-dialog-description-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-standard-dialog-description-font-weight": {
+      "description": "Used by `.spectrum-Dialog-content`. <br/>Defaults to `var(--spectrum-standard-dialog-description-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-standard-dialog-description-line-height": {
+      "description": "Used by `.spectrum-Dialog-content`. <br/>Defaults to `var(--spectrum-standard-dialog-description-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-standard-dialog-description-text-color": {
+      "description": "Used by `.spectrum-Dialog-content`. <br/>Defaults to `var(--spectrum-standard-dialog-description-text-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-standard-dialog-spacing-footer-to-button-group": {
+      "description": "Used by `.spectrum-Dialog-footer`. <br/>Defaults to `var(--spectrum-standard-dialog-spacing-footer-to-button-group)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-standard-dialog-spacing-description-to-footer": {
+      "description": "Used by `.spectrum-Dialog-footer`, `.spectrum-Dialog-buttonGroup--noFooter`. <br/>Defaults to `var(--spectrum-standard-dialog-spacing-description-to-footer)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-standard-dialog-spacing-edge-to-close-button": {
+      "description": "Used by `.spectrum-Dialog-closeButton`. <br/>Defaults to `var(--spectrum-standard-dialog-spacing-edge-to-close-button)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-takeover-dialog-grid-spacing": {
+      "description": "Used by `.spectrum-Dialog--fullscreen .spectrum-Dialog-grid, .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-grid`. <br/>Defaults to `var(--spectrum-takeover-dialog-grid-spacing)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-takeover-dialog-spacing-header-content-gap": {
+      "description": "Used by `.spectrum-Dialog--fullscreen .spectrum-Dialog-header, .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-header`, `.spectrum-Dialog--fullscreen .spectrum-Dialog-header, .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-header`. <br/>Defaults to `var(--spectrum-takeover-dialog-spacing-header-content-gap)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-takeover-dialog-title-font-size": {
+      "description": "Used by `.spectrum-Dialog--fullscreen .spectrum-Dialog-heading, .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-heading`. <br/>Defaults to `var(--spectrum-takeover-dialog-title-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {},
+  "global": {
+    "spectrum-standard-dialog-max-width": {
+      "value": "var(--mod-standard-dialog-max-width-large, var(--spectrum-standard-dialog-maximum-width-large))",
+      "description": "Defined in `.spectrum-Dialog`, `.spectrum-Dialog--sizeS`, `.spectrum-Dialog--sizeL`. <br/>Used by `.spectrum-Dialog`. <br/>Defaults to `var(--mod-standard-dialog-max-width-large, var(--spectrum-standard-dialog-maximum-width-large))`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-standard-dialog-maximum-width-medium": {
+      "value": "480px",
+      "description": "Used by `--spectrum-standard-dialog-max-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-standard-dialog-min-inline-size": {
+      "value": "288px",
+      "description": "Defined in `.spectrum-Dialog`. <br/>Used by `.spectrum-Dialog`. <br/>Defaults to `var(--spectrum-standard-dialog-minimum-width)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-standard-dialog-minimum-width": {
+      "value": "288px",
+      "description": "Used by `--spectrum-standard-dialog-min-inline-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-standard-dialog-border-radius": {
+      "value": "16px",
+      "description": "Defined in `.spectrum-Dialog`. <br/>Used by `.spectrum-Dialog`. <br/>Defaults to `var(--spectrum-corner-radius-extra-large-default)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-extra-large-default": {
+      "value": "16px",
+      "description": "Used by `--spectrum-standard-dialog-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-standard-dialog-heading-font-weight": {
+      "value": "700",
+      "description": "Defined in `.spectrum-Dialog`. <br/>Used by `.spectrum-Dialog-heading`. <br/>Defaults to `var(--spectrum-title-sans-serif-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-title-sans-serif-font-weight": {
+      "value": "700",
+      "description": "Used by `--spectrum-standard-dialog-heading-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-standard-dialog-heading-font-size": {
+      "value": "var(--spectrum-title-size-xl)",
+      "description": "Defined in `.spectrum-Dialog`. <br/>Used by `.spectrum-Dialog-heading`. <br/>Defaults to `var(--spectrum-standard-dialog-title-font-size)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-standard-dialog-title-font-size": {
+      "value": "var(--spectrum-title-size-xl)",
+      "description": "Used by `--spectrum-standard-dialog-heading-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-standard-dialog-heading-font-style": {
+      "value": "normal",
+      "description": "Defined in `.spectrum-Dialog`. <br/>Used by `.spectrum-Dialog-heading`. <br/>Defaults to `var(--spectrum-title-sans-serif-font-style)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-title-sans-serif-font-style": {
+      "value": "normal",
+      "description": "Used by `--spectrum-standard-dialog-heading-font-style`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-standard-dialog-heading-font-family": {
+      "value": "var(--spectrum-sans-font-family-stack)",
+      "description": "Defined in `.spectrum-Dialog`. <br/>Used by `.spectrum-Dialog-heading`. <br/>Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-sans-font-family-stack": {
+      "description": "Used by `--spectrum-standard-dialog-heading-font-family`, `--spectrum-standard-dialog-description-font-family`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-standard-dialog-description-font-weight": {
+      "value": "400",
+      "description": "Defined in `.spectrum-Dialog`. <br/>Used by `.spectrum-Dialog-content`. <br/>Defaults to `var(--spectrum-body-sans-serif-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-sans-serif-font-weight": {
+      "value": "400",
+      "description": "Used by `--spectrum-standard-dialog-description-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-standard-dialog-description-font-size": {
+      "value": "var(--spectrum-body-size-s)",
+      "description": "Defined in `.spectrum-Dialog`. <br/>Used by `.spectrum-Dialog-content`. <br/>Defaults to `var(--spectrum-standard-dialog-body-font-size)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-standard-dialog-body-font-size": {
+      "value": "var(--spectrum-body-size-s)",
+      "description": "Used by `--spectrum-standard-dialog-description-font-size`, `--spectrum-standard-dialog-header-content-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-standard-dialog-description-font-style": {
+      "value": "normal",
+      "description": "Defined in `.spectrum-Dialog`. <br/>Used by `.spectrum-Dialog-content`. <br/>Defaults to `var(--spectrum-body-sans-serif-font-style)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-sans-serif-font-style": {
+      "value": "normal",
+      "description": "Used by `--spectrum-standard-dialog-description-font-style`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-standard-dialog-description-font-family": {
+      "value": "var(--spectrum-sans-font-family-stack)",
+      "description": "Defined in `.spectrum-Dialog`. <br/>Used by `.spectrum-Dialog-content`. <br/>Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-standard-dialog-header-content-font-size": {
+      "value": "var(--spectrum-body-size-s)",
+      "description": "Defined in `.spectrum-Dialog`. <br/>Used by `.spectrum-Dialog-header > .spectrum-Dialog-headerContentWrapper`. <br/>Defaults to `var(--spectrum-standard-dialog-body-font-size)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-standard-dialog-heading-line-height": {
+      "value": "1.3",
+      "description": "Defined in `.spectrum-Dialog`. <br/>Used by `.spectrum-Dialog-heading`. <br/>Defaults to `var(--spectrum-title-line-height)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-title-line-height": {
+      "value": "1.3",
+      "description": "Used by `--spectrum-standard-dialog-heading-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-standard-dialog-description-line-height": {
+      "value": "1.5",
+      "description": "Defined in `.spectrum-Dialog`. <br/>Used by `.spectrum-Dialog-content`. <br/>Defaults to `var(--spectrum-line-height-200)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-line-height-200": {
+      "value": "1.5",
+      "description": "Used by `--spectrum-standard-dialog-description-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-standard-dialog-heading-text-color": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Dialog`. <br/>Used by `.spectrum-Dialog-heading`. <br/>Defaults to `var(--spectrum-heading-color)`, if not set.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-heading-color": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-standard-dialog-heading-text-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-standard-dialog-description-text-color": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-Dialog`. <br/>Used by `.spectrum-Dialog-content`. <br/>Defaults to `var(--spectrum-body-color)`, if not set.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-body-color": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-standard-dialog-description-text-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-standard-dialog-background-color": {
+      "value": "var(--spectrum-gray-25)",
+      "description": "Defined in `.spectrum-Dialog`. <br/>Used by `.spectrum-Dialog`. <br/>Defaults to `var(--spectrum-background-layer-2-color)`, if not set.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-background-layer-2-color": {
+      "value": "var(--spectrum-gray-25)",
+      "description": "Used by `--spectrum-standard-dialog-background-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-standard-dialog-padding": {
+      "value": "var(--spectrum-standard-dialog-spacing-edge-to-content)",
+      "description": "Defined in `.spectrum-Dialog`. <br/>Used by `--spectrum-standard-dialog-spacing-grid-padding`. <br/>Defaults to `var(--spectrum-standard-dialog-spacing-edge-to-content)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-standard-dialog-spacing-edge-to-content": {
+      "description": "Used by `--spectrum-standard-dialog-padding`, `.spectrum-Dialog--dismissible .spectrum-Dialog-grid`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-standard-dialog-spacing-title-to-description": {
+      "value": "16px",
+      "description": "Defined in `.spectrum-Dialog`. <br/>Used by `.spectrum-Dialog-header`, `.spectrum-Dialog-heading`. <br/>Defaults to `var(--spectrum-spacing-300)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-300": {
+      "value": "16px",
+      "description": "Used by `--spectrum-standard-dialog-spacing-title-to-description`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-standard-dialog-spacing-description-to-footer": {
+      "value": "32px",
+      "description": "Defined in `.spectrum-Dialog`. <br/>Used by `.spectrum-Dialog-footer`, `.spectrum-Dialog-buttonGroup--noFooter`. <br/>Defaults to `var(--spectrum-spacing-500)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-500": {
+      "value": "32px",
+      "description": "Used by `--spectrum-standard-dialog-spacing-description-to-footer`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-standard-dialog-spacing-title-to-header-content": {
+      "value": "24px",
+      "description": "Defined in `.spectrum-Dialog`. <br/>Used by `.spectrum-Dialog-header`. <br/>Defaults to `var(--spectrum-spacing-400)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-400": {
+      "value": "24px",
+      "description": "Used by `--spectrum-standard-dialog-spacing-title-to-header-content`, `--spectrum-standard-dialog-spacing-edge-to-header-content-inline-end`, `--spectrum-standard-dialog-spacing-footer-to-button-group`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-standard-dialog-spacing-edge-to-header-content-inline-end": {
+      "value": "24px",
+      "description": "Defined in `.spectrum-Dialog`. <br/>Used by `.spectrum-Dialog--dismissible .spectrum-Dialog-grid`. <br/>Defaults to `var(--spectrum-spacing-400)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-standard-dialog-spacing-footer-to-button-group": {
+      "value": "24px",
+      "description": "Defined in `.spectrum-Dialog`. <br/>Used by `.spectrum-Dialog-footer`. <br/>Defaults to `var(--spectrum-spacing-400)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-standard-dialog-spacing-grid-padding": {
+      "value": "var(--spectrum-standard-dialog-padding)",
+      "description": "Defined in `.spectrum-Dialog`. <br/>Used by `.spectrum-Dialog-grid`, `.spectrum-Dialog--dismissible .spectrum-Dialog-grid`, `.spectrum-Dialog--fullscreen.spectrum-Dialog .spectrum-Dialog-grid, .spectrum-Dialog--fullscreenTakeover.spectrum-Dialog .spectrum-Dialog-grid`. <br/>Defaults to `var(--spectrum-standard-dialog-padding)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-standard-dialog-spacing-edge-to-close-button": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-Dialog`. <br/>Used by `.spectrum-Dialog-closeButton`, `.spectrum-Dialog--dismissible .spectrum-Dialog-grid`. <br/>Defaults to `var(--spectrum-spacing-200)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-200": {
+      "value": "12px",
+      "description": "Used by `--spectrum-standard-dialog-spacing-edge-to-close-button`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-standard-dialog-hero-block-size": {
+      "value": "140px",
+      "description": "Defined in `.spectrum-Dialog`. <br/>Used by `.spectrum-Dialog-hero`. <br/>Defaults to `140px`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-takeover-dialog-title-font-size": {
+      "value": "var(--spectrum-font-size-500)",
+      "description": "Defined in `.spectrum-Dialog`. <br/>Used by `.spectrum-Dialog--fullscreen .spectrum-Dialog-heading, .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-heading`. <br/>Defaults to `var(--spectrum-title-size-xxl)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-title-size-xxl": {
+      "value": "var(--spectrum-font-size-500)",
+      "description": "Used by `--spectrum-takeover-dialog-title-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-takeover-dialog-grid-spacing": {
+      "value": "var(--spectrum-takeover-dialog-spacing-grid-padding)",
+      "description": "Defined in `.spectrum-Dialog`. <br/>Used by `.spectrum-Dialog--fullscreen .spectrum-Dialog-grid, .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-grid`. <br/>Defaults to `var(--spectrum-takeover-dialog-spacing-grid-padding)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-takeover-dialog-spacing-grid-padding": {
+      "description": "Used by `--spectrum-takeover-dialog-grid-spacing`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-takeover-dialog-spacing-header-content-gap": {
+      "value": "var(--spectrum-takeover-dialog-spacing-header-gap)",
+      "description": "Defined in `.spectrum-Dialog`. <br/>Used by `.spectrum-Dialog--fullscreen .spectrum-Dialog-header, .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-header`, `.spectrum-Dialog--fullscreen .spectrum-Dialog-header, .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-header`. <br/>Defaults to `var(--spectrum-takeover-dialog-spacing-header-gap)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-takeover-dialog-spacing-header-gap": {
+      "description": "Used by `--spectrum-takeover-dialog-spacing-header-content-gap`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-takeover-dialog-spacing-title-to-content": {
+      "value": "var(--spectrum-takeover-dialog-spacing-title-to-body)",
+      "description": "Defined in `.spectrum-Dialog`. <br/>Used by `.spectrum-Dialog--fullscreen .spectrum-Dialog-header, .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-header`. <br/>Defaults to `var(--spectrum-takeover-dialog-spacing-title-to-body)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-takeover-dialog-spacing-title-to-body": {
+      "description": "Used by `--spectrum-takeover-dialog-spacing-title-to-content`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-takeover-dialog-inline-size": {
+      "value": "100%",
+      "description": "Defined in `.spectrum-Dialog`. <br/>Used by `.spectrum-Dialog--fullscreen, .spectrum-Dialog--fullscreenTakeover`. <br/>Defaults to `var(--spectrum-takeover-dialog-width)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-takeover-dialog-width": {
+      "value": "100%",
+      "description": "Used by `--spectrum-takeover-dialog-inline-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-takeover-dialog-block-size": {
+      "value": "100%",
+      "description": "Defined in `.spectrum-Dialog`. <br/>Used by `.spectrum-Dialog--fullscreen, .spectrum-Dialog--fullscreenTakeover`. <br/>Defaults to `var(--spectrum-takeover-dialog-height)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-takeover-dialog-height": {
+      "value": "100%",
+      "description": "Used by `--spectrum-takeover-dialog-block-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-standard-dialog-maximum-width-small": {
+      "value": "400px",
+      "description": "Used by `--spectrum-standard-dialog-max-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-standard-dialog-maximum-width-large": {
+      "value": "640px",
+      "description": "Used by `--spectrum-standard-dialog-max-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-black-rgb": {
+      "description": "Used by `.spectrum-Dialog`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-overlay-opacity": {
+      "value": "light-dark(0.4, 0.6)",
+      "description": "Used by `.spectrum-Dialog`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {
+    "mod-buttongroup-justify-content": {
+      "category": "Passthrough"
+    },
+    "mod-buttongroup-flex-wrap": {
+      "category": "Passthrough"
+    }
+  },
+  "high-contrast": {}
 }
diff --git a/components/dialog/stories/dialog.stories.js b/components/dialog/stories/dialog.stories.js
index 791316711fd..4dbc697b9c6 100644
--- a/components/dialog/stories/dialog.stories.js
+++ b/components/dialog/stories/dialog.stories.js
@@ -4,11 +4,13 @@ import { isOpen, size } from "@spectrum-css/preview/types";
 import { Template as Steplist } from "@spectrum-css/steplist/stories/template.js";
 import { Template as Table } from "@spectrum-css/table/stories/template.js";
 import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { DialogFullscreen, DialogFullscreenTakeover, DialogGroup } from "./dialog.test.js";
 import { Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * A dialog displays important information that users need to acknowledge. They appear over the interface and block further interactions. Standard dialogs are the most frequent type of dialogs. They appear in the center of the screen over the interface and should be used for moderately complex tasks. Takeover dialogs are large types of dialogs. They use the totality of the screen and should be used for modal experiences with complex workflows.
  *
@@ -166,6 +168,10 @@ export default {
 		status: {
 			type: "migrated",
 		},
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 	decorators: [
 		withUnderlayWrapper,
diff --git a/components/divider/dist/metadata.json b/components/divider/dist/metadata.json
index 94ce19f83fd..340772408e5 100644
--- a/components/divider/dist/metadata.json
+++ b/components/divider/dist/metadata.json
@@ -11,34 +11,143 @@
     ".spectrum-Divider--vertical",
     ".spectrum-Divider:not(.spectrum-Divider.spectrum-Divider--vertical)"
   ],
-  "modifiers": [
-    "--mod-divider-background-color",
-    "--mod-divider-block-minimum-size",
-    "--mod-divider-inline-minimum-size",
-    "--mod-divider-thickness",
-    "--mod-divider-vertical-align",
-    "--mod-divider-vertical-height",
-    "--mod-divider-vertical-margin"
-  ],
-  "component": [
-    "--spectrum-divider-background-color",
-    "--spectrum-divider-block-minimum-size",
-    "--spectrum-divider-horizontal-minimum-width",
-    "--spectrum-divider-inline-minimum-size",
-    "--spectrum-divider-thickness",
-    "--spectrum-divider-thickness-large",
-    "--spectrum-divider-thickness-medium",
-    "--spectrum-divider-thickness-small",
-    "--spectrum-divider-vertical-minimum-height"
-  ],
-  "global": [
-    "--spectrum-gray-200",
-    "--spectrum-gray-800",
-    "--spectrum-transparent-black-200",
-    "--spectrum-transparent-black-800",
-    "--spectrum-transparent-white-200",
-    "--spectrum-transparent-white-800"
-  ],
-  "passthroughs": [],
-  "high-contrast": ["--highcontrast-divider-background-color"]
+  "modifiers": {
+    "mod-divider-thickness": {
+      "description": "Used by `.spectrum-Divider`, `.spectrum-Divider--vertical`. <br/>Defaults to `var(--spectrum-divider-thickness)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-divider-background-color": {
+      "description": "Used by `.spectrum-Divider`. <br/>Defaults to `var(--spectrum-divider-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-divider-inline-minimum-size": {
+      "description": "Used by `.spectrum-Divider:not(.spectrum-Divider.spectrum-Divider--vertical)`. <br/>Defaults to `var(--spectrum-divider-inline-minimum-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-divider-block-minimum-size": {
+      "description": "Used by `.spectrum-Divider--vertical`. <br/>Defaults to `var(--spectrum-divider-block-minimum-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-divider-vertical-margin": {
+      "description": "Used by `.spectrum-Divider--vertical`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-divider-vertical-height": {
+      "description": "Used by `.spectrum-Divider--vertical`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-divider-vertical-align": {
+      "description": "Used by `.spectrum-Divider--vertical`.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-divider-background-color": {
+      "value": "rgba(0, 0, 0, 0.84)",
+      "description": "Defined in `.spectrum-Divider`, `.spectrum-Divider--sizeL`, `.spectrum-Divider--staticWhite`, `.spectrum-Divider--staticWhite.spectrum-Divider--sizeL`, `.spectrum-Divider--staticBlack`, `.spectrum-Divider--staticBlack.spectrum-Divider--sizeL`. <br/>Used by `.spectrum-Divider`. <br/>Defaults to `var(--spectrum-transparent-black-800)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-divider-thickness": {
+      "value": "4px",
+      "description": "Defined in `.spectrum-Divider`, `.spectrum-Divider--sizeS`, `.spectrum-Divider--sizeL`. <br/>Used by `.spectrum-Divider`, `.spectrum-Divider--vertical`. <br/>Defaults to `var(--spectrum-divider-thickness-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-divider-thickness-medium": {
+      "value": "2px",
+      "description": "Used by `--spectrum-divider-thickness`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-divider-inline-minimum-size": {
+      "value": "200px",
+      "description": "Defined in `.spectrum-Divider`. <br/>Used by `.spectrum-Divider:not(.spectrum-Divider.spectrum-Divider--vertical)`. <br/>Defaults to `var(--spectrum-divider-horizontal-minimum-width)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-divider-horizontal-minimum-width": {
+      "value": "200px",
+      "description": "Used by `--spectrum-divider-inline-minimum-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-divider-block-minimum-size": {
+      "value": "200px",
+      "description": "Defined in `.spectrum-Divider`. <br/>Used by `.spectrum-Divider--vertical`. <br/>Defaults to `var(--spectrum-divider-vertical-minimum-height)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-divider-vertical-minimum-height": {
+      "value": "200px",
+      "description": "Used by `--spectrum-divider-block-minimum-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-divider-thickness-small": {
+      "value": "1px",
+      "description": "Used by `--spectrum-divider-thickness`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-divider-thickness-large": {
+      "value": "4px",
+      "description": "Used by `--spectrum-divider-thickness`.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-gray-200": {
+      "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+      "description": "Used by `--spectrum-divider-background-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-800": {
+      "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+      "description": "Used by `--spectrum-divider-background-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-transparent-white-200": {
+      "value": "rgba(255, 255, 255, 0.14)",
+      "description": "Used by `--spectrum-divider-background-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-transparent-white-800": {
+      "value": "rgba(255, 255, 255, 0.85)",
+      "description": "Used by `--spectrum-divider-background-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-transparent-black-200": {
+      "value": "rgba(0, 0, 0, 0.12)",
+      "description": "Used by `--spectrum-divider-background-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-transparent-black-800": {
+      "value": "rgba(0, 0, 0, 0.84)",
+      "description": "Used by `--spectrum-divider-background-color`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {
+    "highcontrast-divider-background-color": {
+      "value": "var(--mod-divider-background-color, var(--spectrum-divider-background-color))",
+      "description": "Defined in `.spectrum-Divider`. <br/>Used by `.spectrum-Divider`. <br/>Defaults to `var(--mod-divider-background-color, var(--spectrum-divider-background-color))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/divider/stories/divider.stories.js b/components/divider/stories/divider.stories.js
index fe5696c1371..0c15c4cc2d8 100644
--- a/components/divider/stories/divider.stories.js
+++ b/components/divider/stories/divider.stories.js
@@ -1,11 +1,13 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { size, staticColor } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { DividerGroup } from "./divider.test.js";
 import { Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * Dividers bring clarity to a layout by grouping and dividing content that exists in close proximity. It can also be used to establish rhythm and hierarchy.
  */
@@ -41,6 +43,10 @@ export default {
 		status: {
 			type: "migrated",
 		},
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 	tags: ["migrated"],
 };
diff --git a/components/dropindicator/dist/metadata.json b/components/dropindicator/dist/metadata.json
index 294d6ad70bb..fb0409ada7c 100644
--- a/components/dropindicator/dist/metadata.json
+++ b/components/dropindicator/dist/metadata.json
@@ -11,18 +11,61 @@
     ".spectrum-DropIndicator:after",
     ".spectrum-DropIndicator:before"
   ],
-  "modifiers": [
-    "--mod-dropindicator-border-color",
-    "--mod-dropindicator-border-size",
-    "--mod-dropindicator-circle-color",
-    "--mod-dropindicator-circle-size"
-  ],
-  "component": [
-    "--spectrum-dropindicator-border-size",
-    "--spectrum-dropindicator-circle-size",
-    "--spectrum-dropindicator-color"
-  ],
-  "global": ["--spectrum-border-width-200"],
-  "passthroughs": [],
-  "high-contrast": ["--highcontrast-dropindicator-color"]
+  "modifiers": {
+    "mod-dropindicator-border-color": {
+      "description": "Used by `.spectrum-DropIndicator`. <br/>Defaults to `var(--spectrum-dropindicator-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-dropindicator-circle-size": {
+      "description": "Used by `.spectrum-DropIndicator:after, .spectrum-DropIndicator:before`, `.spectrum-DropIndicator--horizontal`, `.spectrum-DropIndicator--horizontal:after, .spectrum-DropIndicator--horizontal:before`, `.spectrum-DropIndicator--horizontal:before`, `.spectrum-DropIndicator--horizontal:after`, `.spectrum-DropIndicator--vertical`, `.spectrum-DropIndicator--vertical:after, .spectrum-DropIndicator--vertical:before`, `.spectrum-DropIndicator--vertical:before`, `.spectrum-DropIndicator--vertical:after`. <br/>Defaults to `var(--spectrum-dropindicator-circle-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-dropindicator-border-size": {
+      "description": "Used by `.spectrum-DropIndicator:after, .spectrum-DropIndicator:before`, `.spectrum-DropIndicator--horizontal`, `.spectrum-DropIndicator--horizontal:after, .spectrum-DropIndicator--horizontal:before`, `.spectrum-DropIndicator--vertical`, `.spectrum-DropIndicator--vertical:after, .spectrum-DropIndicator--vertical:before`. <br/>Defaults to `var(--spectrum-dropindicator-border-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-dropindicator-circle-color": {
+      "description": "Used by `.spectrum-DropIndicator:after, .spectrum-DropIndicator:before`. <br/>Defaults to `var(--spectrum-dropindicator-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-dropindicator-border-size": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-DropIndicator`. <br/>Used by `.spectrum-DropIndicator:after, .spectrum-DropIndicator:before`, `.spectrum-DropIndicator--horizontal`, `.spectrum-DropIndicator--horizontal:after, .spectrum-DropIndicator--horizontal:before`, `.spectrum-DropIndicator--vertical`, `.spectrum-DropIndicator--vertical:after, .spectrum-DropIndicator--vertical:before`. <br/>Defaults to `var(--spectrum-border-width-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-dropindicator-circle-size": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-DropIndicator`. <br/>Used by `.spectrum-DropIndicator:after, .spectrum-DropIndicator:before`, `.spectrum-DropIndicator--horizontal`, `.spectrum-DropIndicator--horizontal:after, .spectrum-DropIndicator--horizontal:before`, `.spectrum-DropIndicator--horizontal:before`, `.spectrum-DropIndicator--horizontal:after`, `.spectrum-DropIndicator--vertical`, `.spectrum-DropIndicator--vertical:after, .spectrum-DropIndicator--vertical:before`, `.spectrum-DropIndicator--vertical:before`, `.spectrum-DropIndicator--vertical:after`. <br/>Defaults to `12px`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-dropindicator-color": {
+      "description": "Used by `.spectrum-DropIndicator`, `.spectrum-DropIndicator:after, .spectrum-DropIndicator:before`.",
+      "control": "color",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-border-width-200": {
+      "value": "2px",
+      "description": "Used by `--spectrum-dropindicator-border-size`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {
+    "highcontrast-dropindicator-color": {
+      "value": "var(--mod-dropindicator-circle-color, var(--spectrum-dropindicator-color))",
+      "description": "Defined in `.spectrum-DropIndicator`. <br/>Used by `.spectrum-DropIndicator`, `.spectrum-DropIndicator:after, .spectrum-DropIndicator:before`. <br/>Defaults to `var(--mod-dropindicator-circle-color, var(--spectrum-dropindicator-color))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/dropindicator/stories/dropindicator.stories.js b/components/dropindicator/stories/dropindicator.stories.js
index ea28cb3b5f1..576db99579e 100644
--- a/components/dropindicator/stories/dropindicator.stories.js
+++ b/components/dropindicator/stories/dropindicator.stories.js
@@ -1,9 +1,11 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { DropIndicatorGroup } from "./dropindicator.test.js";
 import { DocsDropIndicatorGroup } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * The drop indicator component is used to show the insertion position into a list or table.
  */
@@ -41,6 +43,10 @@ export default {
 	parameters: {
 		packageJson,
 		metadata,
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 };
 
diff --git a/components/dropzone/dist/metadata.json b/components/dropzone/dist/metadata.json
index e91812f2d27..19dff183084 100644
--- a/components/dropzone/dist/metadata.json
+++ b/components/dropzone/dist/metadata.json
@@ -11,107 +11,471 @@
     ".spectrum-DropZone-content",
     ".spectrum-DropZone-stroke",
     ".spectrum-DropZone-strokePath",
+    ".spectrum-DropZone:focus-visible",
+    ".spectrum-DropZone:has(.spectrum-DropZone-stroke)",
     ".spectrum-DropZone.is-dragged",
     ".spectrum-DropZone.is-dragged .spectrum-DropZone-strokePath",
     ".spectrum-DropZone.is-filled",
     ".spectrum-DropZone.is-filled.is-dragged",
     ".spectrum-DropZone.is-filled.is-dragged .spectrum-DropZone-actions",
-    ".spectrum-DropZone.is-filled.is-dragged .spectrum-DropZone-content",
-    ".spectrum-DropZone:focus-visible",
-    ".spectrum-DropZone:has(.spectrum-DropZone-stroke)"
-  ],
-  "modifiers": [
-    "--mod-drop-zone-background-color",
-    "--mod-drop-zone-background-color-opacity",
-    "--mod-drop-zone-background-color-opacity-filled",
-    "--mod-drop-zone-body-font-size",
-    "--mod-drop-zone-body-to-action",
-    "--mod-drop-zone-border-color",
-    "--mod-drop-zone-border-color-hover",
-    "--mod-drop-zone-border-dash-gap",
-    "--mod-drop-zone-border-dash-length",
-    "--mod-drop-zone-border-style",
-    "--mod-drop-zone-border-style-dragged",
-    "--mod-drop-zone-border-width",
-    "--mod-drop-zone-content-background-color",
-    "--mod-drop-zone-content-bottom-to-text",
-    "--mod-drop-zone-content-font-family",
-    "--mod-drop-zone-content-font-size",
-    "--mod-drop-zone-content-font-weight",
-    "--mod-drop-zone-content-height",
-    "--mod-drop-zone-content-max-width",
-    "--mod-drop-zone-content-maximum-width",
-    "--mod-drop-zone-content-top-to-text",
-    "--mod-drop-zone-corner-radius",
-    "--mod-drop-zone-edge-to-text",
-    "--mod-drop-zone-illustration-color-hover",
-    "--mod-drop-zone-inline-size",
-    "--mod-drop-zone-padding",
-    "--mod-drop-zone-title-line-height"
-  ],
-  "component": [
-    "--spectrum-drop-zone-background-color",
-    "--spectrum-drop-zone-background-color-opacity",
-    "--spectrum-drop-zone-background-color-opacity-filled",
-    "--spectrum-drop-zone-background-color-rgb",
-    "--spectrum-drop-zone-body-font-size",
-    "--spectrum-drop-zone-body-to-action",
-    "--spectrum-drop-zone-border-color",
-    "--spectrum-drop-zone-border-color-hover",
-    "--spectrum-drop-zone-border-dash-gap",
-    "--spectrum-drop-zone-border-dash-length",
-    "--spectrum-drop-zone-border-width",
-    "--spectrum-drop-zone-component-height",
-    "--spectrum-drop-zone-content-background-color",
-    "--spectrum-drop-zone-content-bottom-to-text",
-    "--spectrum-drop-zone-content-font-family",
-    "--spectrum-drop-zone-content-font-size",
-    "--spectrum-drop-zone-content-font-weight",
-    "--spectrum-drop-zone-content-max-width",
-    "--spectrum-drop-zone-content-maximum-width",
-    "--spectrum-drop-zone-content-top-to-text",
-    "--spectrum-drop-zone-corner-radius",
-    "--spectrum-drop-zone-dragged-background-color",
-    "--spectrum-drop-zone-edge-to-text",
-    "--spectrum-drop-zone-illustration-color-hover",
-    "--spectrum-drop-zone-inline-size",
-    "--spectrum-drop-zone-padding",
-    "--spectrum-drop-zone-stroke-dash-gap",
-    "--spectrum-drop-zone-stroke-dash-length",
-    "--spectrum-drop-zone-title-line-height",
-    "--spectrum-drop-zone-width"
-  ],
-  "global": [
-    "--spectrum-accent-content-color-default",
-    "--spectrum-accent-visual-color",
-    "--spectrum-bold-font-weight",
-    "--spectrum-border-width-200",
-    "--spectrum-component-bottom-to-text-300",
-    "--spectrum-component-edge-to-text-300",
-    "--spectrum-component-height-300",
-    "--spectrum-component-top-to-text-300",
-    "--spectrum-corner-radius-500",
-    "--spectrum-corner-radius-700",
-    "--spectrum-font-size-300",
-    "--spectrum-gray-300",
-    "--spectrum-line-height-100",
-    "--spectrum-sans-font-family-stack",
-    "--spectrum-spacing-300",
-    "--spectrum-spacing-400"
-  ],
-  "passthroughs": [
-    "--mod-button-border-radius",
-    "--mod-illustrated-message-description-font-size",
-    "--mod-illustrated-message-description-position",
-    "--mod-illustrated-message-description-to-action",
-    "--mod-illustrated-message-description-z-index",
-    "--mod-illustrated-message-display",
-    "--mod-illustrated-message-illustration-color",
-    "--mod-illustrated-message-vertical-maximum-width"
+    ".spectrum-DropZone.is-filled.is-dragged .spectrum-DropZone-content"
   ],
-  "high-contrast": [
-    "--highcontrast-drop-zone-border-color",
-    "--highcontrast-drop-zone-border-color-hover",
-    "--highcontrast-drop-zone-button-color"
-  ]
+  "modifiers": {
+    "mod-drop-zone-content-maximum-width": {
+      "description": "Used by `--mod-illustrated-message-vertical-maximum-width`. <br/>Defaults to `var(--spectrum-drop-zone-content-maximum-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-drop-zone-body-to-action": {
+      "description": "Used by `--mod-illustrated-message-description-to-action`. <br/>Defaults to `var(--spectrum-drop-zone-body-to-action)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-drop-zone-body-font-size": {
+      "description": "Used by `--mod-illustrated-message-description-font-size`. <br/>Defaults to `var(--spectrum-drop-zone-body-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-drop-zone-content-height": {
+      "description": "Defined in `.spectrum-DropZone`. <br/>Used by `.spectrum-DropZone.is-filled.is-dragged`. <br/>Defaults to `280px`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-drop-zone-inline-size": {
+      "description": "Used by `.spectrum-DropZone`. <br/>Defaults to `var(--spectrum-drop-zone-inline-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-drop-zone-padding": {
+      "description": "Used by `.spectrum-DropZone`. <br/>Defaults to `var(--spectrum-drop-zone-padding)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-drop-zone-border-width": {
+      "description": "Used by `.spectrum-DropZone`, `.spectrum-DropZone-strokePath`. <br/>Defaults to `var(--spectrum-drop-zone-border-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-drop-zone-corner-radius": {
+      "description": "Used by `.spectrum-DropZone`. <br/>Defaults to `var(--spectrum-drop-zone-corner-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-drop-zone-background-color": {
+      "description": "Defined in `.spectrum-DropZone.is-dragged`, `.spectrum-DropZone.is-filled`. <br/>Used by `.spectrum-DropZone`. <br/>Defaults to `var(--spectrum-drop-zone-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-drop-zone-border-color": {
+      "description": "Used by `.spectrum-DropZone`, `.spectrum-DropZone-strokePath`. <br/>Defaults to `var(--spectrum-drop-zone-border-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-drop-zone-border-style": {
+      "description": "Defined in `.spectrum-DropZone.is-dragged`. <br/>Defaults to `var(--mod-drop-zone-border-style-dragged, solid)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-drop-zone-border-style-dragged": {
+      "description": "Used by `--mod-drop-zone-border-style`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-drop-zone-background-color-opacity": {
+      "description": "Used by `--mod-drop-zone-background-color`. <br/>Defaults to `var(--spectrum-drop-zone-dragged-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-drop-zone-border-color-hover": {
+      "description": "Used by `--spectrum-drop-zone-border-color`. <br/>Defaults to `var(--spectrum-drop-zone-border-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-drop-zone-illustration-color-hover": {
+      "description": "Used by `--mod-illustrated-message-illustration-color`. <br/>Defaults to `var(--spectrum-drop-zone-illustration-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-drop-zone-background-color-opacity-filled": {
+      "description": "Used by `--mod-drop-zone-background-color`. <br/>Defaults to `var(--spectrum-drop-zone-background-color-opacity-filled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-drop-zone-border-dash-length": {
+      "description": "Used by `.spectrum-DropZone-strokePath`. <br/>Defaults to `var(--spectrum-drop-zone-stroke-dash-length)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-drop-zone-border-dash-gap": {
+      "description": "Used by `.spectrum-DropZone-strokePath`. <br/>Defaults to `var(--spectrum-drop-zone-stroke-dash-gap)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-drop-zone-content-max-width": {
+      "description": "Used by `.spectrum-DropZone-button`. <br/>Defaults to `var(--spectrum-drop-zone-content-max-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-drop-zone-content-top-to-text": {
+      "description": "Used by `.spectrum-DropZone-button`. <br/>Defaults to `var(--spectrum-drop-zone-content-top-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-drop-zone-content-bottom-to-text": {
+      "description": "Used by `.spectrum-DropZone-button`. <br/>Defaults to `var(--spectrum-drop-zone-content-bottom-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-drop-zone-edge-to-text": {
+      "description": "Used by `.spectrum-DropZone-button`. <br/>Defaults to `var(--spectrum-drop-zone-edge-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-drop-zone-content-background-color": {
+      "description": "Used by `.spectrum-DropZone-button`, `.spectrum-DropZone-button:focus`, `.spectrum-DropZone-button:hover`. <br/>Defaults to `var(--spectrum-drop-zone-content-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-drop-zone-content-font-family": {
+      "description": "Used by `.spectrum-DropZone-button`. <br/>Defaults to `var(--spectrum-drop-zone-content-font-family)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-drop-zone-content-font-weight": {
+      "description": "Used by `.spectrum-DropZone-button`. <br/>Defaults to `var(--spectrum-drop-zone-content-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-drop-zone-title-line-height": {
+      "description": "Used by `.spectrum-DropZone-button`. <br/>Defaults to `var(--spectrum-drop-zone-title-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-drop-zone-content-font-size": {
+      "description": "Used by `.spectrum-DropZone-button .spectrum-Button-label`. <br/>Defaults to `var(--spectrum-drop-zone-content-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-drop-zone-padding": {
+      "value": "24px",
+      "description": "Defined in `.spectrum-DropZone`. <br/>Used by `.spectrum-DropZone`. <br/>Defaults to `var(--spectrum-spacing-400)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-drop-zone-border-width": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-DropZone`. <br/>Used by `.spectrum-DropZone`, `.spectrum-DropZone-strokePath`. <br/>Defaults to `var(--spectrum-border-width-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-drop-zone-corner-radius": {
+      "value": "10px",
+      "description": "Defined in `.spectrum-DropZone`. <br/>Used by `.spectrum-DropZone`, `.spectrum-DropZone-strokePath`. <br/>Defaults to `var(--spectrum-corner-radius-700)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-drop-zone-border-color": {
+      "value": "var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover)))",
+      "description": "Defined in `.spectrum-DropZone`, `.spectrum-DropZone.is-dragged`, `.spectrum-DropZone:focus-visible`. <br/>Used by `.spectrum-DropZone`, `.spectrum-DropZone-strokePath`. <br/>Defaults to `var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-drop-zone-inline-size": {
+      "value": "428px",
+      "description": "Defined in `.spectrum-DropZone`. <br/>Used by `.spectrum-DropZone`. <br/>Defaults to `var(--spectrum-drop-zone-width)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-drop-zone-width": {
+      "value": "428px",
+      "description": "Used by `--spectrum-drop-zone-inline-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-drop-zone-background-color": {
+      "value": "var(--spectrum-accent-visual-color)",
+      "description": "Defined in `.spectrum-DropZone`. <br/>Used by `.spectrum-DropZone`, `--mod-drop-zone-background-color`. <br/>Defaults to `var(--spectrum-drop-zone-background-color-rgb)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-drop-zone-background-color-rgb": {
+      "description": "Used by `--spectrum-drop-zone-background-color`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-drop-zone-border-color-hover": {
+      "value": "var(--spectrum-accent-color-800)",
+      "description": "Defined in `.spectrum-DropZone`. <br/>Used by `--spectrum-drop-zone-border-color`. <br/>Defaults to `var(--spectrum-accent-visual-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-drop-zone-illustration-color-hover": {
+      "value": "var(--spectrum-accent-color-900)",
+      "description": "Defined in `.spectrum-DropZone`. <br/>Used by `--mod-illustrated-message-illustration-color`, `.spectrum-DropZone.is-dragged`. <br/>Defaults to `var(--spectrum-accent-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-drop-zone-body-to-action": {
+      "value": "16px",
+      "description": "Defined in `.spectrum-DropZone`. <br/>Used by `--mod-illustrated-message-description-to-action`, `.spectrum-DropZone-actions`. <br/>Defaults to `var(--spectrum-spacing-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-drop-zone-stroke-dash-gap": {
+      "value": "6px",
+      "description": "Defined in `.spectrum-DropZone`. <br/>Used by `.spectrum-DropZone-strokePath`. <br/>Defaults to `var(--spectrum-drop-zone-border-dash-gap)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-drop-zone-border-dash-gap": {
+      "value": "6px",
+      "description": "Used by `--spectrum-drop-zone-stroke-dash-gap`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-drop-zone-stroke-dash-length": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-DropZone`. <br/>Used by `.spectrum-DropZone-strokePath`. <br/>Defaults to `var(--spectrum-drop-zone-border-dash-length)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-drop-zone-border-dash-length": {
+      "value": "8px",
+      "description": "Used by `--spectrum-drop-zone-stroke-dash-length`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-drop-zone-dragged-background-color": {
+      "value": "0.1",
+      "description": "Defined in `.spectrum-DropZone`. <br/>Used by `--mod-drop-zone-background-color`. <br/>Defaults to `var(--spectrum-drop-zone-background-color-opacity)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-drop-zone-background-color-opacity": {
+      "value": "0.1",
+      "description": "Used by `--spectrum-drop-zone-dragged-background-color`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-drop-zone-content-max-width": {
+      "value": "380px",
+      "description": "Defined in `.spectrum-DropZone`. <br/>Used by `.spectrum-DropZone-button`. <br/>Defaults to `var(--spectrum-drop-zone-content-maximum-width)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-drop-zone-content-maximum-width": {
+      "value": "380px",
+      "description": "Used by `--spectrum-drop-zone-content-max-width`, `--mod-illustrated-message-vertical-maximum-width`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-drop-zone-content-top-to-text": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-DropZone`. <br/>Used by `.spectrum-DropZone-button`. <br/>Defaults to `var(--spectrum-component-top-to-text-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-drop-zone-content-bottom-to-text": {
+      "value": "14px",
+      "description": "Defined in `.spectrum-DropZone`. <br/>Used by `.spectrum-DropZone-button`. <br/>Defaults to `var(--spectrum-component-bottom-to-text-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-drop-zone-component-height": {
+      "value": "48px",
+      "description": "Defined in `.spectrum-DropZone`. <br/>Used by `.spectrum-DropZone-button`. <br/>Defaults to `var(--spectrum-component-height-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-drop-zone-edge-to-text": {
+      "value": "18px",
+      "description": "Defined in `.spectrum-DropZone`. <br/>Used by `.spectrum-DropZone-button`. <br/>Defaults to `var(--spectrum-component-edge-to-text-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-drop-zone-content-font-family": {
+      "value": "var(--spectrum-sans-font-family-stack)",
+      "description": "Defined in `.spectrum-DropZone`. <br/>Used by `.spectrum-DropZone-button`. <br/>Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-drop-zone-content-font-weight": {
+      "value": "700",
+      "description": "Defined in `.spectrum-DropZone`. <br/>Used by `.spectrum-DropZone-button`. <br/>Defaults to `var(--spectrum-bold-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-drop-zone-content-font-size": {
+      "value": "18px",
+      "description": "Defined in `.spectrum-DropZone`. <br/>Used by `.spectrum-DropZone-button .spectrum-Button-label`. <br/>Defaults to `var(--spectrum-font-size-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-drop-zone-title-line-height": {
+      "value": "1.3",
+      "description": "Defined in `.spectrum-DropZone`. <br/>Used by `.spectrum-DropZone-button`. <br/>Defaults to `var(--spectrum-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-drop-zone-content-background-color": {
+      "value": "var(--spectrum-accent-color-800)",
+      "description": "Defined in `.spectrum-DropZone`. <br/>Used by `.spectrum-DropZone-button`, `.spectrum-DropZone-button:focus`, `.spectrum-DropZone-button:hover`. <br/>Defaults to `var(--spectrum-accent-visual-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-drop-zone-body-font-size": {
+      "value": "var(--spectrum-illustrated-message-medium-body-font-size)",
+      "description": "Used by `--mod-illustrated-message-description-font-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-drop-zone-background-color-opacity-filled": {
+      "value": "0.3",
+      "description": "Used by `--mod-drop-zone-background-color`.",
+      "control": "color",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-spacing-400": {
+      "value": "24px",
+      "description": "Used by `--spectrum-drop-zone-padding`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-border-width-200": {
+      "value": "2px",
+      "description": "Used by `--spectrum-drop-zone-border-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-700": {
+      "value": "10px",
+      "description": "Used by `--spectrum-drop-zone-corner-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-300": {
+      "value": "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))",
+      "description": "Used by `--spectrum-drop-zone-border-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-accent-visual-color": {
+      "value": "var(--spectrum-accent-color-800)",
+      "description": "Used by `--spectrum-drop-zone-border-color-hover`, `--spectrum-drop-zone-content-background-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-accent-content-color-default": {
+      "value": "var(--spectrum-accent-color-900)",
+      "description": "Used by `--spectrum-drop-zone-illustration-color-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-spacing-300": {
+      "value": "16px",
+      "description": "Used by `--spectrum-drop-zone-body-to-action`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-300": {
+      "value": "12px",
+      "description": "Used by `--spectrum-drop-zone-content-top-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-300": {
+      "value": "14px",
+      "description": "Used by `--spectrum-drop-zone-content-bottom-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-300": {
+      "value": "48px",
+      "description": "Used by `--spectrum-drop-zone-component-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-text-300": {
+      "value": "18px",
+      "description": "Used by `--spectrum-drop-zone-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-sans-font-family-stack": {
+      "description": "Used by `--spectrum-drop-zone-content-font-family`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-bold-font-weight": {
+      "value": "700",
+      "description": "Used by `--spectrum-drop-zone-content-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-300": {
+      "value": "18px",
+      "description": "Used by `--spectrum-drop-zone-content-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-line-height-100": {
+      "value": "1.3",
+      "description": "Used by `--spectrum-drop-zone-title-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-500": {
+      "value": "8px",
+      "description": "Used by `--mod-button-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {
+    "mod-illustrated-message-vertical-maximum-width": {
+      "category": "Passthrough"
+    },
+    "mod-illustrated-message-description-to-action": {
+      "category": "Passthrough"
+    },
+    "mod-illustrated-message-description-position": {
+      "category": "Passthrough"
+    },
+    "mod-illustrated-message-description-z-index": {
+      "category": "Passthrough"
+    },
+    "mod-illustrated-message-description-font-size": {
+      "category": "Passthrough"
+    },
+    "mod-illustrated-message-illustration-color": {
+      "category": "Passthrough"
+    },
+    "mod-illustrated-message-display": {
+      "category": "Passthrough"
+    },
+    "mod-button-border-radius": {
+      "category": "Passthrough"
+    }
+  },
+  "high-contrast": {
+    "highcontrast-drop-zone-border-color": {
+      "value": "var(--mod-drop-zone-border-color, var(--spectrum-drop-zone-border-color))",
+      "description": "Defined in `.spectrum-DropZone`. <br/>Used by `.spectrum-DropZone`, `.spectrum-DropZone-strokePath`. <br/>Defaults to `var(--mod-drop-zone-border-color, var(--spectrum-drop-zone-border-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-drop-zone-border-color-hover": {
+      "value": "var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover))",
+      "description": "Defined in `.spectrum-DropZone`. <br/>Used by `--spectrum-drop-zone-border-color`, `.spectrum-DropZone.is-dragged`, `.spectrum-DropZone.is-dragged .spectrum-DropZone-strokePath`. <br/>Defaults to `var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-drop-zone-button-color": {
+      "value": "var(--mod-drop-zone-content-background-color, var(--spectrum-drop-zone-content-background-color))",
+      "description": "Defined in `.spectrum-DropZone`. <br/>Used by `.spectrum-DropZone-button`, `.spectrum-DropZone-button:focus`, `.spectrum-DropZone-button:hover`. <br/>Defaults to `var(--mod-drop-zone-content-background-color, var(--spectrum-drop-zone-content-background-color))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/dropzone/stories/dropzone.stories.js b/components/dropzone/stories/dropzone.stories.js
index 97e6bf7bd65..7031deb84df 100644
--- a/components/dropzone/stories/dropzone.stories.js
+++ b/components/dropzone/stories/dropzone.stories.js
@@ -3,11 +3,13 @@ import { default as IllustratedMessage } from "@spectrum-css/illustratedmessage/
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDragged } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { DropzoneGroup } from "./dropzone.test.js";
 import { Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * A drop zone is an area on the screen into a which an object can be dragged and dropped to accomplish a task. It's a common interaction in uploading and file management workflows. For example, a drop zone might be used in an upload workflow to enable the user to simply drop a file from their operating system into the drop zone, which is a more efficient and intuitive action, rather than utilizing the standard "Choose file" dialog.
  */
@@ -46,8 +48,9 @@ export default {
 		},
 		packageJson,
 		metadata,
-		status: {
-			type: "migrated",
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
 		},
 	},
 	tags: ["migrated"],
diff --git a/components/fieldgroup/dist/metadata.json b/components/fieldgroup/dist/metadata.json
index 3c2343b1019..05659b523db 100644
--- a/components/fieldgroup/dist/metadata.json
+++ b/components/fieldgroup/dist/metadata.json
@@ -10,9 +10,16 @@
     ".spectrum-FieldGroup--vertical .spectrum-FieldGroupInputLayout",
     ".spectrum-FieldGroupInputLayout"
   ],
-  "modifiers": [],
-  "component": [],
-  "global": ["--spectrum-spacing-300"],
-  "passthroughs": [],
-  "high-contrast": []
+  "modifiers": {},
+  "component": {},
+  "global": {
+    "spectrum-spacing-300": {
+      "value": "16px",
+      "description": "Used by `.spectrum-FieldGroup--horizontal .spectrum-FieldGroupInputLayout .spectrum-FieldGroup-item:not(:last-child)`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {}
 }
diff --git a/components/fieldgroup/stories/fieldgroup.stories.js b/components/fieldgroup/stories/fieldgroup.stories.js
index c49e4990598..5590d2999ff 100644
--- a/components/fieldgroup/stories/fieldgroup.stories.js
+++ b/components/fieldgroup/stories/fieldgroup.stories.js
@@ -1,11 +1,13 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isInvalid, isReadOnly, isRequired } from "@spectrum-css/preview/types";
 import { default as RadioSettings } from "@spectrum-css/radio/stories/radio.stories.js";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { FieldGroupSet } from "./fieldgroup.test.js";
 import { InputOptionsFieldGroupTemplate, NecessityIndicatorFieldGroupTemplate, Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * A field group is a group of fields which are usually radios (also known as a radio group) or checkboxes (also known as a checkbox group). It is composed of a [field label](/docs/components-field-label--docs), a group of [radio inputs](/docs/components-radio--docs) or [checkboxes](/docs/components-checkbox--docs), and [an optional help text component](/docs/components-help-text--docs).
  *
@@ -99,6 +101,10 @@ export default {
 		status: {
 			type: "migrated",
 		},
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 	tags: ["migrated"],
 };
diff --git a/components/fieldlabel/dist/metadata.json b/components/fieldlabel/dist/metadata.json
index 2a55dbd82f4..4aec0787049 100644
--- a/components/fieldlabel/dist/metadata.json
+++ b/components/fieldlabel/dist/metadata.json
@@ -10,72 +10,341 @@
     ".spectrum-FieldLabel--staticBlack",
     ".spectrum-FieldLabel--staticWhite",
     ".spectrum-FieldLabel-requiredIcon",
-    ".spectrum-FieldLabel.is-disabled",
     ".spectrum-FieldLabel:lang(ja)",
     ".spectrum-FieldLabel:lang(ko)",
-    ".spectrum-FieldLabel:lang(zh)"
+    ".spectrum-FieldLabel:lang(zh)",
+    ".spectrum-FieldLabel.is-disabled"
   ],
-  "modifiers": [
-    "--mod-fieldlabel-asterisk-vertical-align",
-    "--mod-fieldlabel-bottom-to-text",
-    "--mod-fieldlabel-font-size",
-    "--mod-fieldlabel-font-weight",
-    "--mod-fieldlabel-line-height",
-    "--mod-fieldlabel-line-height-cjk",
-    "--mod-fieldlabel-min-height",
-    "--mod-fieldlabel-padding-inline",
-    "--mod-fieldlabel-side-margin-block-start",
-    "--mod-fieldlabel-side-padding-right",
-    "--mod-fieldlabel-text-to-asterisk",
-    "--mod-fieldlabel-top-to-text"
-  ],
-  "component": [
-    "--spectrum-field-label-text-to-asterisk-extra-large",
-    "--spectrum-field-label-text-to-asterisk-large",
-    "--spectrum-field-label-text-to-asterisk-medium",
-    "--spectrum-field-label-text-to-asterisk-small",
-    "--spectrum-field-label-top-margin-extra-large",
-    "--spectrum-field-label-top-margin-large",
-    "--spectrum-field-label-top-margin-medium",
-    "--spectrum-field-label-top-margin-small",
-    "--spectrum-fieldlabel-bottom-to-text",
-    "--spectrum-fieldlabel-color",
-    "--spectrum-fieldlabel-font-size",
-    "--spectrum-fieldlabel-font-weight",
-    "--spectrum-fieldlabel-line-height",
-    "--spectrum-fieldlabel-min-height",
-    "--spectrum-fieldlabel-side-margin-block-start",
-    "--spectrum-fieldlabel-side-padding-right",
-    "--spectrum-fieldlabel-text-to-asterisk",
-    "--spectrum-fieldlabel-top-to-text"
-  ],
-  "global": [
-    "--spectrum-black",
-    "--spectrum-cjk-line-height-100",
-    "--spectrum-component-bottom-to-text-100",
-    "--spectrum-component-bottom-to-text-200",
-    "--spectrum-component-bottom-to-text-300",
-    "--spectrum-component-bottom-to-text-75",
-    "--spectrum-component-height-100",
-    "--spectrum-component-height-200",
-    "--spectrum-component-height-300",
-    "--spectrum-component-height-75",
-    "--spectrum-component-top-to-text-100",
-    "--spectrum-component-top-to-text-200",
-    "--spectrum-component-top-to-text-300",
-    "--spectrum-component-top-to-text-75",
-    "--spectrum-disabled-content-color",
-    "--spectrum-font-size-100",
-    "--spectrum-font-size-200",
-    "--spectrum-font-size-300",
-    "--spectrum-font-size-75",
-    "--spectrum-line-height-100",
-    "--spectrum-neutral-subdued-content-color-default",
-    "--spectrum-regular-font-weight",
-    "--spectrum-spacing-100",
-    "--spectrum-spacing-200",
-    "--spectrum-white"
-  ],
-  "passthroughs": [],
-  "high-contrast": ["--highcontrast-fieldlabel-disabled-content-color"]
+  "modifiers": {
+    "mod-fieldlabel-line-height": {
+      "description": "Defined in `.spectrum-FieldLabel:lang(ja), .spectrum-FieldLabel:lang(ko), .spectrum-FieldLabel:lang(zh)`. <br/>Used by `.spectrum-FieldLabel`. <br/>Defaults to `var(--spectrum-fieldlabel-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-fieldlabel-line-height-cjk": {
+      "description": "Used by `--mod-fieldlabel-line-height`. <br/>Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-fieldlabel-min-height": {
+      "description": "Used by `.spectrum-FieldLabel`. <br/>Defaults to `var(--spectrum-fieldlabel-min-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-fieldlabel-top-to-text": {
+      "description": "Used by `.spectrum-FieldLabel`. <br/>Defaults to `var(--spectrum-fieldlabel-top-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-fieldlabel-bottom-to-text": {
+      "description": "Used by `.spectrum-FieldLabel`. <br/>Defaults to `var(--spectrum-fieldlabel-bottom-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-fieldlabel-padding-inline": {
+      "description": "Used by `.spectrum-FieldLabel`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-fieldlabel-font-size": {
+      "description": "Used by `.spectrum-FieldLabel`. <br/>Defaults to `var(--spectrum-fieldlabel-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-fieldlabel-font-weight": {
+      "description": "Used by `.spectrum-FieldLabel`. <br/>Defaults to `var(--spectrum-fieldlabel-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-fieldlabel-text-to-asterisk": {
+      "description": "Used by `.spectrum-FieldLabel-requiredIcon`. <br/>Defaults to `var(--spectrum-fieldlabel-text-to-asterisk)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-fieldlabel-asterisk-vertical-align": {
+      "description": "Used by `.spectrum-FieldLabel-requiredIcon`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-fieldlabel-side-margin-block-start": {
+      "description": "Used by `.spectrum-FieldLabel--left, .spectrum-FieldLabel--right`. <br/>Defaults to `var(--spectrum-fieldlabel-side-margin-block-start)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-fieldlabel-side-padding-right": {
+      "description": "Used by `.spectrum-FieldLabel--left, .spectrum-FieldLabel--right`. <br/>Defaults to `var(--spectrum-fieldlabel-side-padding-right)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-fieldlabel-min-height": {
+      "value": "48px",
+      "description": "Defined in `.spectrum-FieldLabel`, `.spectrum-FieldLabel--sizeS`, `.spectrum-FieldLabel--sizeL`, `.spectrum-FieldLabel--sizeXL`. <br/>Used by `.spectrum-FieldLabel`. <br/>Defaults to `var(--spectrum-component-height-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-fieldlabel-color": {
+      "value": "rgb(255, 255, 255)",
+      "description": "Defined in `.spectrum-FieldLabel`, `.spectrum-FieldLabel.is-disabled`, `.spectrum-FieldLabel--staticBlack`, `.spectrum-FieldLabel--staticWhite`. <br/>Used by `.spectrum-FieldLabel`. <br/>Defaults to `var(--spectrum-white)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-fieldlabel-top-to-text": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-FieldLabel`, `.spectrum-FieldLabel--sizeS`, `.spectrum-FieldLabel--sizeL`, `.spectrum-FieldLabel--sizeXL`. <br/>Used by `.spectrum-FieldLabel`. <br/>Defaults to `var(--spectrum-component-top-to-text-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-fieldlabel-bottom-to-text": {
+      "value": "14px",
+      "description": "Defined in `.spectrum-FieldLabel`, `.spectrum-FieldLabel--sizeS`, `.spectrum-FieldLabel--sizeL`, `.spectrum-FieldLabel--sizeXL`. <br/>Used by `.spectrum-FieldLabel`. <br/>Defaults to `var(--spectrum-component-bottom-to-text-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-fieldlabel-text-to-asterisk": {
+      "value": "5px",
+      "description": "Defined in `.spectrum-FieldLabel`, `.spectrum-FieldLabel--sizeS`, `.spectrum-FieldLabel--sizeL`, `.spectrum-FieldLabel--sizeXL`. <br/>Used by `.spectrum-FieldLabel-requiredIcon`. <br/>Defaults to `var(--spectrum-field-label-text-to-asterisk-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-field-label-text-to-asterisk-medium": {
+      "value": "4px",
+      "description": "Used by `--spectrum-fieldlabel-text-to-asterisk`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-fieldlabel-font-size": {
+      "value": "18px",
+      "description": "Defined in `.spectrum-FieldLabel`, `.spectrum-FieldLabel--sizeS`, `.spectrum-FieldLabel--sizeL`, `.spectrum-FieldLabel--sizeXL`. <br/>Used by `.spectrum-FieldLabel`. <br/>Defaults to `var(--spectrum-font-size-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-fieldlabel-font-weight": {
+      "value": "400",
+      "description": "Defined in `.spectrum-FieldLabel`. <br/>Used by `.spectrum-FieldLabel`. <br/>Defaults to `var(--spectrum-regular-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-fieldlabel-line-height": {
+      "value": "1.3",
+      "description": "Defined in `.spectrum-FieldLabel`. <br/>Used by `.spectrum-FieldLabel`. <br/>Defaults to `var(--spectrum-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-fieldlabel-side-margin-block-start": {
+      "value": "0px",
+      "description": "Defined in `.spectrum-FieldLabel`, `.spectrum-FieldLabel--sizeS`, `.spectrum-FieldLabel--sizeL`, `.spectrum-FieldLabel--sizeXL`. <br/>Used by `.spectrum-FieldLabel--left, .spectrum-FieldLabel--right`. <br/>Defaults to `var(--spectrum-field-label-top-margin-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-field-label-top-margin-medium": {
+      "value": "0px",
+      "description": "Used by `--spectrum-fieldlabel-side-margin-block-start`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-fieldlabel-side-padding-right": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-FieldLabel`, `.spectrum-FieldLabel--sizeS`, `.spectrum-FieldLabel--sizeL`, `.spectrum-FieldLabel--sizeXL`. <br/>Used by `.spectrum-FieldLabel--left, .spectrum-FieldLabel--right`. <br/>Defaults to `var(--spectrum-spacing-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-field-label-text-to-asterisk-small": {
+      "value": "4px",
+      "description": "Used by `--spectrum-fieldlabel-text-to-asterisk`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-field-label-top-margin-small": {
+      "value": "0px",
+      "description": "Used by `--spectrum-fieldlabel-side-margin-block-start`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-field-label-text-to-asterisk-large": {
+      "value": "5px",
+      "description": "Used by `--spectrum-fieldlabel-text-to-asterisk`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-field-label-top-margin-large": {
+      "value": "0px",
+      "description": "Used by `--spectrum-fieldlabel-side-margin-block-start`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-field-label-text-to-asterisk-extra-large": {
+      "value": "5px",
+      "description": "Used by `--spectrum-fieldlabel-text-to-asterisk`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-field-label-top-margin-extra-large": {
+      "value": "0px",
+      "description": "Used by `--spectrum-fieldlabel-side-margin-block-start`.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-component-height-100": {
+      "value": "32px",
+      "description": "Used by `--spectrum-fieldlabel-min-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-subdued-content-color-default": {
+      "value": "var(--spectrum-gray-700)",
+      "description": "Used by `--spectrum-fieldlabel-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-fieldlabel-top-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-100": {
+      "value": "9px",
+      "description": "Used by `--spectrum-fieldlabel-bottom-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-100": {
+      "value": "14px",
+      "description": "Used by `--spectrum-fieldlabel-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-regular-font-weight": {
+      "value": "400",
+      "description": "Used by `--spectrum-fieldlabel-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-line-height-100": {
+      "value": "1.3",
+      "description": "Used by `--spectrum-fieldlabel-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-200": {
+      "value": "12px",
+      "description": "Used by `--spectrum-fieldlabel-side-padding-right`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-cjk-line-height-100": {
+      "value": "1.5",
+      "description": "Used by `--mod-fieldlabel-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-disabled-content-color": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Used by `--spectrum-fieldlabel-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-component-height-75": {
+      "value": "24px",
+      "description": "Used by `--spectrum-fieldlabel-min-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-75": {
+      "value": "4px",
+      "description": "Used by `--spectrum-fieldlabel-top-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-75": {
+      "value": "5px",
+      "description": "Used by `--spectrum-fieldlabel-bottom-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-75": {
+      "value": "12px",
+      "description": "Used by `--spectrum-fieldlabel-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-100": {
+      "value": "8px",
+      "description": "Used by `--spectrum-fieldlabel-side-padding-right`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-200": {
+      "value": "40px",
+      "description": "Used by `--spectrum-fieldlabel-min-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-200": {
+      "value": "9px",
+      "description": "Used by `--spectrum-fieldlabel-top-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-200": {
+      "value": "11px",
+      "description": "Used by `--spectrum-fieldlabel-bottom-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-200": {
+      "value": "16px",
+      "description": "Used by `--spectrum-fieldlabel-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-300": {
+      "value": "48px",
+      "description": "Used by `--spectrum-fieldlabel-min-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-300": {
+      "value": "12px",
+      "description": "Used by `--spectrum-fieldlabel-top-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-300": {
+      "value": "14px",
+      "description": "Used by `--spectrum-fieldlabel-bottom-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-300": {
+      "value": "18px",
+      "description": "Used by `--spectrum-fieldlabel-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-black": {
+      "value": "rgb(0, 0, 0)",
+      "description": "Used by `--spectrum-fieldlabel-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-white": {
+      "value": "rgb(255, 255, 255)",
+      "description": "Used by `--spectrum-fieldlabel-color`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {
+    "highcontrast-fieldlabel-disabled-content-color": {
+      "value": "var(--spectrum-disabled-content-color)",
+      "description": "Defined in `.spectrum-FieldLabel`. <br/>Used by `--spectrum-fieldlabel-color`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/fieldlabel/stories/fieldlabel.stories.js b/components/fieldlabel/stories/fieldlabel.stories.js
index 426e0a699c2..c425463d24a 100644
--- a/components/fieldlabel/stories/fieldlabel.stories.js
+++ b/components/fieldlabel/stories/fieldlabel.stories.js
@@ -1,11 +1,13 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, isRequired, size, staticColor } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { FieldLabelGroup } from "./fieldlabel.test.js";
 import { Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * The field label component is used along with inputs to display a label for that input.
  */
@@ -55,6 +57,10 @@ export default {
 		status: {
 			type: "migrated",
 		},
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 	tags: ["migrated"],
 };
diff --git a/components/fieldlabel/stories/template.js b/components/fieldlabel/stories/template.js
index 3420504c4d7..04ed96fb54c 100644
--- a/components/fieldlabel/stories/template.js
+++ b/components/fieldlabel/stories/template.js
@@ -15,7 +15,7 @@ export const Template = ({
 	customStyles = {},
 	size = "m",
 	label,
-	id = getRandomId("fieldlabel"),
+	id = getRandomId("field-label"),
 	testId,
 	forInput,
 	alignment,
diff --git a/components/floatingactionbutton/dist/metadata.json b/components/floatingactionbutton/dist/metadata.json
index 0ddd22d190a..0a209f436d6 100644
--- a/components/floatingactionbutton/dist/metadata.json
+++ b/components/floatingactionbutton/dist/metadata.json
@@ -13,74 +13,351 @@
     ".spectrum-FloatingActionButton:hover .spectrum-FloatingActionButton-icon",
     ".spectrum-Icon.spectrum-FloatingActionButton-icon"
   ],
-  "modifiers": [
-    "--mod-afloating-action-button-focus-ring-color",
-    "--mod-floating-action-button-background-color",
-    "--mod-floating-action-button-background-color-down",
-    "--mod-floating-action-button-background-color-hover",
-    "--mod-floating-action-button-background-color-key-focus",
-    "--mod-floating-action-button-border-radius",
-    "--mod-floating-action-button-drop-shadow-blur",
-    "--mod-floating-action-button-drop-shadow-color",
-    "--mod-floating-action-button-drop-shadow-x",
-    "--mod-floating-action-button-drop-shadow-y",
-    "--mod-floating-action-button-focus-ring-gap",
-    "--mod-floating-action-button-focus-ring-width",
-    "--mod-floating-action-button-icon-color",
-    "--mod-floating-action-button-icon-color-down",
-    "--mod-floating-action-button-icon-color-hover",
-    "--mod-floating-action-button-icon-color-key-focus",
-    "--mod-floating-action-button-icon-size",
-    "--mod-floating-action-button-margin",
-    "--mod-floating-action-button-padding",
-    "--mod-floating-action-button-size"
-  ],
-  "component": [
-    "--spectrum-floating-action-button-background-color",
-    "--spectrum-floating-action-button-background-color-down",
-    "--spectrum-floating-action-button-background-color-hover",
-    "--spectrum-floating-action-button-background-color-key-focus",
-    "--spectrum-floating-action-button-drop-shadow-blur",
-    "--spectrum-floating-action-button-drop-shadow-color",
-    "--spectrum-floating-action-button-drop-shadow-y",
-    "--spectrum-floating-action-button-icon-color",
-    "--spectrum-floating-action-button-icon-color-down",
-    "--spectrum-floating-action-button-icon-color-hover",
-    "--spectrum-floating-action-button-icon-color-key-focus",
-    "--spectrum-floating-action-button-icon-size",
-    "--spectrum-floating-action-button-margin",
-    "--spectrum-floating-action-button-padding",
-    "--spectrum-floating-action-button-size"
-  ],
-  "global": [
-    "--spectrum-accent-background-color-default",
-    "--spectrum-accent-background-color-down",
-    "--spectrum-accent-background-color-hover",
-    "--spectrum-accent-background-color-key-focus",
-    "--spectrum-background-layer-2-color",
-    "--spectrum-component-height-200",
-    "--spectrum-component-pill-edge-to-visual-only-200",
-    "--spectrum-drop-shadow-x",
-    "--spectrum-focus-indicator-color",
-    "--spectrum-focus-indicator-gap",
-    "--spectrum-focus-indicator-thickness",
-    "--spectrum-neutral-subdued-content-color-default",
-    "--spectrum-neutral-subdued-content-color-down",
-    "--spectrum-neutral-subdued-content-color-hover",
-    "--spectrum-neutral-subdued-content-color-key-focus",
-    "--spectrum-spacing-200",
-    "--spectrum-white",
-    "--spectrum-workflow-icon-size-200"
-  ],
-  "passthroughs": [],
-  "high-contrast": [
-    "--highcontrast-floating-action-button-background-color",
-    "--highcontrast-floating-action-button-background-color-down",
-    "--highcontrast-floating-action-button-background-color-hover",
-    "--highcontrast-floating-action-button-background-color-key-focus",
-    "--highcontrast-floating-action-button-icon-color",
-    "--highcontrast-floating-action-button-icon-color-down",
-    "--highcontrast-floating-action-button-icon-color-hover",
-    "--highcontrast-floating-action-button-icon-color-key-focus"
-  ]
+  "modifiers": {
+    "mod-floating-action-button-size": {
+      "description": "Used by `.spectrum-FloatingActionButton`. <br/>Defaults to `var(--spectrum-floating-action-button-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-floating-action-button-border-radius": {
+      "description": "Used by `.spectrum-FloatingActionButton`, `.spectrum-FloatingActionButton:focus-visible:after`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-floating-action-button-padding": {
+      "description": "Used by `.spectrum-FloatingActionButton`. <br/>Defaults to `var(--spectrum-floating-action-button-padding)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-floating-action-button-margin": {
+      "description": "Used by `.spectrum-FloatingActionButton`. <br/>Defaults to `var(--spectrum-floating-action-button-margin)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-floating-action-button-drop-shadow-x": {
+      "description": "Used by `.spectrum-FloatingActionButton`. <br/>Defaults to `var(--spectrum-drop-shadow-x)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-floating-action-button-drop-shadow-y": {
+      "description": "Used by `.spectrum-FloatingActionButton`. <br/>Defaults to `var(--spectrum-floating-action-button-drop-shadow-y)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-floating-action-button-drop-shadow-blur": {
+      "description": "Used by `.spectrum-FloatingActionButton`. <br/>Defaults to `var(--spectrum-floating-action-button-drop-shadow-blur)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-floating-action-button-drop-shadow-color": {
+      "description": "Used by `.spectrum-FloatingActionButton`. <br/>Defaults to `var(--spectrum-floating-action-button-drop-shadow-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-floating-action-button-background-color": {
+      "description": "Used by `.spectrum-FloatingActionButton`. <br/>Defaults to `var(--spectrum-floating-action-button-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-floating-action-button-background-color-hover": {
+      "description": "Used by `.spectrum-FloatingActionButton:hover`. <br/>Defaults to `var(--spectrum-floating-action-button-background-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-floating-action-button-icon-color-hover": {
+      "description": "Used by `.spectrum-FloatingActionButton:hover .spectrum-FloatingActionButton-icon`. <br/>Defaults to `var(--spectrum-floating-action-button-icon-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-floating-action-button-background-color-down": {
+      "description": "Used by `.spectrum-FloatingActionButton:active`. <br/>Defaults to `var(--spectrum-floating-action-button-background-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-floating-action-button-icon-color-down": {
+      "description": "Used by `.spectrum-FloatingActionButton:active .spectrum-FloatingActionButton-icon`. <br/>Defaults to `var(--spectrum-floating-action-button-icon-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-floating-action-button-background-color-key-focus": {
+      "description": "Used by `.spectrum-FloatingActionButton:focus-visible`. <br/>Defaults to `var(--spectrum-floating-action-button-background-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-floating-action-button-icon-color-key-focus": {
+      "description": "Used by `.spectrum-FloatingActionButton:focus-visible .spectrum-FloatingActionButton-icon`. <br/>Defaults to `var(--spectrum-floating-action-button-icon-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-floating-action-button-focus-ring-gap": {
+      "description": "Used by `.spectrum-FloatingActionButton:focus-visible:after`. <br/>Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-floating-action-button-focus-ring-width": {
+      "description": "Used by `.spectrum-FloatingActionButton:focus-visible:after`. <br/>Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-afloating-action-button-focus-ring-color": {
+      "description": "Used by `.spectrum-FloatingActionButton:focus-visible:after`. <br/>Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-floating-action-button-icon-size": {
+      "description": "Used by `.spectrum-Icon.spectrum-FloatingActionButton-icon`. <br/>Defaults to `var(--spectrum-floating-action-button-icon-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-floating-action-button-icon-color": {
+      "description": "Used by `.spectrum-Icon.spectrum-FloatingActionButton-icon`. <br/>Defaults to `var(--spectrum-floating-action-button-icon-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-floating-action-button-size": {
+      "value": "40px",
+      "description": "Defined in `.spectrum-FloatingActionButton`. <br/>Used by `.spectrum-FloatingActionButton`. <br/>Defaults to `var(--spectrum-component-height-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-floating-action-button-icon-size": {
+      "value": "22px",
+      "description": "Defined in `.spectrum-FloatingActionButton`. <br/>Used by `.spectrum-Icon.spectrum-FloatingActionButton-icon`. <br/>Defaults to `var(--spectrum-workflow-icon-size-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-floating-action-button-padding": {
+      "value": "9px",
+      "description": "Defined in `.spectrum-FloatingActionButton`. <br/>Used by `.spectrum-FloatingActionButton`. <br/>Defaults to `var(--spectrum-component-pill-edge-to-visual-only-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-floating-action-button-margin": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-FloatingActionButton`. <br/>Used by `.spectrum-FloatingActionButton`. <br/>Defaults to `var(--spectrum-spacing-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-floating-action-button-background-color": {
+      "value": "var(--spectrum-gray-25)",
+      "description": "Defined in `.spectrum-FloatingActionButton`, `.spectrum-FloatingActionButton--secondary`. <br/>Used by `.spectrum-FloatingActionButton`. <br/>Defaults to `var(--spectrum-background-layer-2-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-floating-action-button-background-color-hover": {
+      "value": "var(--spectrum-gray-25)",
+      "description": "Defined in `.spectrum-FloatingActionButton`, `.spectrum-FloatingActionButton--secondary`. <br/>Used by `.spectrum-FloatingActionButton:hover`. <br/>Defaults to `var(--spectrum-background-layer-2-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-floating-action-button-background-color-down": {
+      "value": "var(--spectrum-gray-25)",
+      "description": "Defined in `.spectrum-FloatingActionButton`, `.spectrum-FloatingActionButton--secondary`. <br/>Used by `.spectrum-FloatingActionButton:active`. <br/>Defaults to `var(--spectrum-background-layer-2-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-floating-action-button-background-color-key-focus": {
+      "value": "var(--spectrum-gray-25)",
+      "description": "Defined in `.spectrum-FloatingActionButton`, `.spectrum-FloatingActionButton--secondary`. <br/>Used by `.spectrum-FloatingActionButton:focus-visible`. <br/>Defaults to `var(--spectrum-background-layer-2-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-floating-action-button-icon-color": {
+      "value": "var(--spectrum-gray-700)",
+      "description": "Defined in `.spectrum-FloatingActionButton`, `.spectrum-FloatingActionButton--secondary`. <br/>Used by `.spectrum-Icon.spectrum-FloatingActionButton-icon`. <br/>Defaults to `var(--spectrum-neutral-subdued-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-floating-action-button-icon-color-hover": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-FloatingActionButton`, `.spectrum-FloatingActionButton--secondary`. <br/>Used by `.spectrum-FloatingActionButton:hover .spectrum-FloatingActionButton-icon`. <br/>Defaults to `var(--spectrum-neutral-subdued-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-floating-action-button-icon-color-down": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-FloatingActionButton`, `.spectrum-FloatingActionButton--secondary`. <br/>Used by `.spectrum-FloatingActionButton:active .spectrum-FloatingActionButton-icon`. <br/>Defaults to `var(--spectrum-neutral-subdued-content-color-down)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-floating-action-button-icon-color-key-focus": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-FloatingActionButton`, `.spectrum-FloatingActionButton--secondary`. <br/>Used by `.spectrum-FloatingActionButton:focus-visible .spectrum-FloatingActionButton-icon`. <br/>Defaults to `var(--spectrum-neutral-subdued-content-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-floating-action-button-drop-shadow-y": {
+      "value": "4px",
+      "description": "Used by `.spectrum-FloatingActionButton`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-floating-action-button-drop-shadow-blur": {
+      "value": "12px",
+      "description": "Used by `.spectrum-FloatingActionButton`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-floating-action-button-drop-shadow-color": {
+      "value": "rgba(0, 0, 0, 0.15)",
+      "description": "Used by `.spectrum-FloatingActionButton`.",
+      "control": "color",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-component-height-200": {
+      "value": "40px",
+      "description": "Used by `--spectrum-floating-action-button-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-200": {
+      "value": "22px",
+      "description": "Used by `--spectrum-floating-action-button-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-pill-edge-to-visual-only-200": {
+      "value": "9px",
+      "description": "Used by `--spectrum-floating-action-button-padding`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-200": {
+      "value": "12px",
+      "description": "Used by `--spectrum-floating-action-button-margin`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-accent-background-color-default": {
+      "value": "var(--spectrum-accent-color-900)",
+      "description": "Used by `--spectrum-floating-action-button-background-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-accent-background-color-hover": {
+      "value": "var(--spectrum-accent-color-1000)",
+      "description": "Used by `--spectrum-floating-action-button-background-color-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-accent-background-color-down": {
+      "value": "var(--spectrum-accent-color-1000)",
+      "description": "Used by `--spectrum-floating-action-button-background-color-down`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-accent-background-color-key-focus": {
+      "value": "var(--spectrum-accent-color-1000)",
+      "description": "Used by `--spectrum-floating-action-button-background-color-key-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-white": {
+      "value": "rgb(255, 255, 255)",
+      "description": "Used by `--spectrum-floating-action-button-icon-color`, `--spectrum-floating-action-button-icon-color-hover`, `--spectrum-floating-action-button-icon-color-down`, `--spectrum-floating-action-button-icon-color-key-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-background-layer-2-color": {
+      "value": "var(--spectrum-gray-25)",
+      "description": "Used by `--spectrum-floating-action-button-background-color`, `--spectrum-floating-action-button-background-color-hover`, `--spectrum-floating-action-button-background-color-down`, `--spectrum-floating-action-button-background-color-key-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-subdued-content-color-default": {
+      "value": "var(--spectrum-gray-700)",
+      "description": "Used by `--spectrum-floating-action-button-icon-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-subdued-content-color-hover": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-floating-action-button-icon-color-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-subdued-content-color-down": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-floating-action-button-icon-color-down`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-subdued-content-color-key-focus": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-floating-action-button-icon-color-key-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-drop-shadow-x": {
+      "value": "0px",
+      "description": "Used by `.spectrum-FloatingActionButton`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-gap": {
+      "value": "2px",
+      "description": "Used by `.spectrum-FloatingActionButton:focus-visible:after`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Used by `.spectrum-FloatingActionButton:focus-visible:after`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Used by `.spectrum-FloatingActionButton:focus-visible:after`.",
+      "control": "color",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {
+    "highcontrast-floating-action-button-background-color": {
+      "value": "var(--mod-floating-action-button-background-color, var(--spectrum-floating-action-button-background-color))",
+      "description": "Defined in `.spectrum-FloatingActionButton`. <br/>Used by `.spectrum-FloatingActionButton`. <br/>Defaults to `var(--mod-floating-action-button-background-color, var(--spectrum-floating-action-button-background-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-floating-action-button-background-color-hover": {
+      "value": "var(--mod-floating-action-button-background-color-hover, var(--spectrum-floating-action-button-background-color-hover))",
+      "description": "Defined in `.spectrum-FloatingActionButton`. <br/>Used by `.spectrum-FloatingActionButton:hover`. <br/>Defaults to `var(--mod-floating-action-button-background-color-hover, var(--spectrum-floating-action-button-background-color-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-floating-action-button-background-color-down": {
+      "value": "var(--mod-floating-action-button-background-color-down, var(--spectrum-floating-action-button-background-color-down))",
+      "description": "Defined in `.spectrum-FloatingActionButton`. <br/>Used by `.spectrum-FloatingActionButton:active`. <br/>Defaults to `var(--mod-floating-action-button-background-color-down, var(--spectrum-floating-action-button-background-color-down))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-floating-action-button-background-color-key-focus": {
+      "value": "var(--mod-floating-action-button-background-color-key-focus, var(--spectrum-floating-action-button-background-color-key-focus))",
+      "description": "Defined in `.spectrum-FloatingActionButton`. <br/>Used by `.spectrum-FloatingActionButton:focus-visible`. <br/>Defaults to `var(--mod-floating-action-button-background-color-key-focus, var(--spectrum-floating-action-button-background-color-key-focus))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-floating-action-button-icon-color": {
+      "value": "var(--mod-floating-action-button-icon-color, var(--spectrum-floating-action-button-icon-color))",
+      "description": "Defined in `.spectrum-FloatingActionButton`. <br/>Used by `.spectrum-Icon.spectrum-FloatingActionButton-icon`. <br/>Defaults to `var(--mod-floating-action-button-icon-color, var(--spectrum-floating-action-button-icon-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-floating-action-button-icon-color-hover": {
+      "value": "var(--mod-floating-action-button-icon-color-hover, var(--spectrum-floating-action-button-icon-color-hover))",
+      "description": "Defined in `.spectrum-FloatingActionButton`. <br/>Used by `.spectrum-FloatingActionButton:hover .spectrum-FloatingActionButton-icon`. <br/>Defaults to `var(--mod-floating-action-button-icon-color-hover, var(--spectrum-floating-action-button-icon-color-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-floating-action-button-icon-color-down": {
+      "value": "var(--mod-floating-action-button-icon-color-down, var(--spectrum-floating-action-button-icon-color-down))",
+      "description": "Defined in `.spectrum-FloatingActionButton`. <br/>Used by `.spectrum-FloatingActionButton:active .spectrum-FloatingActionButton-icon`. <br/>Defaults to `var(--mod-floating-action-button-icon-color-down, var(--spectrum-floating-action-button-icon-color-down))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-floating-action-button-icon-color-key-focus": {
+      "value": "var(--mod-floating-action-button-icon-color-key-focus, var(--spectrum-floating-action-button-icon-color-key-focus))",
+      "description": "Defined in `.spectrum-FloatingActionButton`. <br/>Used by `.spectrum-FloatingActionButton:focus-visible .spectrum-FloatingActionButton-icon`. <br/>Defaults to `var(--mod-floating-action-button-icon-color-key-focus, var(--spectrum-floating-action-button-icon-color-key-focus))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/floatingactionbutton/stories/floatingactionbutton.stories.js b/components/floatingactionbutton/stories/floatingactionbutton.stories.js
index 3d96790255d..262c6834b5d 100644
--- a/components/floatingactionbutton/stories/floatingactionbutton.stories.js
+++ b/components/floatingactionbutton/stories/floatingactionbutton.stories.js
@@ -1,11 +1,13 @@
 import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isActive, isFocused, isHovered } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { FloatingActionButtonGroup } from "./floatingactionbutton.test.js";
 import { Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * The floating action button component is used to give users a more prominent button for high frequency actions.
  *
@@ -49,6 +51,10 @@ export default {
 	parameters: {
 		packageJson,
 		metadata,
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 };
 
diff --git a/components/form/dist/metadata.json b/components/form/dist/metadata.json
index c07dfdca8d9..399c40bbfd6 100644
--- a/components/form/dist/metadata.json
+++ b/components/form/dist/metadata.json
@@ -11,26 +11,96 @@
     ".spectrum-Form-itemLabel.is-disabled",
     ".spectrum-Form-itemLabel.is-disabled .spectrum-FieldLabel-requiredIcon"
   ],
-  "modifiers": [
-    "--mod-disabled-content-color",
-    "--mod-form-grid-template-columns",
-    "--mod-form-grid-template-columns-labels-above",
-    "--mod-form-inline-size",
-    "--mod-form-item-block-spacing",
-    "--mod-form-item-block-spacing-labels-above"
-  ],
-  "component": [
-    "--spectrum-form-grid-template-columns",
-    "--spectrum-form-grid-template-columns-labels-above",
-    "--spectrum-form-item-block-spacing",
-    "--spectrum-form-item-block-spacing-labels-above",
-    "--spectrum-form-item-disabled-content-color"
-  ],
-  "global": [
-    "--spectrum-disabled-content-color",
-    "--spectrum-spacing-200",
-    "--spectrum-spacing-300"
-  ],
-  "passthroughs": [],
-  "high-contrast": ["--highcontrast-form-item-disabled-content-color"]
+  "modifiers": {
+    "mod-form-grid-template-columns": {
+      "description": "Defined in `.spectrum-Form--labelsAbove`. <br/>Used by `.spectrum-Form`. <br/>Defaults to `var(--spectrum-form-grid-template-columns)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-form-inline-size": {
+      "description": "Used by `.spectrum-Form`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-form-item-block-spacing": {
+      "description": "Defined in `.spectrum-Form--labelsAbove`. <br/>Used by `.spectrum-Form`. <br/>Defaults to `var(--spectrum-form-item-block-spacing)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-form-item-block-spacing-labels-above": {
+      "description": "Used by `--mod-form-item-block-spacing`. <br/>Defaults to `var(--spectrum-form-item-block-spacing-labels-above)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-form-grid-template-columns-labels-above": {
+      "description": "Used by `--mod-form-grid-template-columns`. <br/>Defaults to `var(--spectrum-form-grid-template-columns-labels-above)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-disabled-content-color": {
+      "description": "Used by `.spectrum-Form-itemLabel.is-disabled, .spectrum-Form-itemLabel.is-disabled .spectrum-FieldLabel-requiredIcon`. <br/>Defaults to `var(--spectrum-form-item-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-form-item-block-spacing": {
+      "value": "16px",
+      "description": "Defined in `.spectrum-Form`. <br/>Used by `.spectrum-Form`. <br/>Defaults to `var(--spectrum-spacing-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-form-item-block-spacing-labels-above": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-Form`. <br/>Used by `--mod-form-item-block-spacing`. <br/>Defaults to `var(--spectrum-spacing-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-form-grid-template-columns": {
+      "value": "auto auto",
+      "description": "Defined in `.spectrum-Form`. <br/>Used by `.spectrum-Form`. <br/>Defaults to `auto auto`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-form-grid-template-columns-labels-above": {
+      "value": "auto",
+      "description": "Defined in `.spectrum-Form`. <br/>Used by `--mod-form-grid-template-columns`. <br/>Defaults to `auto`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-form-item-disabled-content-color": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Defined in `.spectrum-Form`. <br/>Used by `.spectrum-Form-itemLabel.is-disabled, .spectrum-Form-itemLabel.is-disabled .spectrum-FieldLabel-requiredIcon`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-spacing-300": {
+      "value": "16px",
+      "description": "Used by `--spectrum-form-item-block-spacing`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-200": {
+      "value": "12px",
+      "description": "Used by `--spectrum-form-item-block-spacing-labels-above`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-disabled-content-color": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Used by `--spectrum-form-item-disabled-content-color`.",
+      "control": "color",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {
+    "highcontrast-form-item-disabled-content-color": {
+      "value": "var(--mod-disabled-content-color, var(--spectrum-form-item-disabled-content-color))",
+      "description": "Defined in `.spectrum-Form`. <br/>Used by `.spectrum-Form-itemLabel.is-disabled, .spectrum-Form-itemLabel.is-disabled .spectrum-FieldLabel-requiredIcon`. <br/>Defaults to `var(--mod-disabled-content-color, var(--spectrum-form-item-disabled-content-color))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/form/stories/form.stories.js b/components/form/stories/form.stories.js
index ab7af9d944b..b78750f70a4 100644
--- a/components/form/stories/form.stories.js
+++ b/components/form/stories/form.stories.js
@@ -3,11 +3,13 @@ import { Template as Picker } from "@spectrum-css/picker/stories/template.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { Template as NumberField } from "@spectrum-css/stepper/stories/template.js";
 import { Template as TextField } from "@spectrum-css/textfield/stories/template.js";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { FormGroup } from "./form.test.js";
 import { Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * The form component is used for aligning multiple inputs and field groups within a form. It provides structure and spacing for your form fields.
  */
@@ -110,6 +112,10 @@ export default {
 		status: {
 			type: "migrated",
 		},
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 	tags: ["migrated"],
 };
diff --git a/components/helptext/dist/metadata.json b/components/helptext/dist/metadata.json
index 4ed0075bb8c..651f6b3791b 100644
--- a/components/helptext/dist/metadata.json
+++ b/components/helptext/dist/metadata.json
@@ -4,6 +4,9 @@
     ".spectrum-HelpText",
     ".spectrum-HelpText .spectrum-HelpText-text",
     ".spectrum-HelpText .spectrum-HelpText-validationIcon",
+    ".spectrum-HelpText:lang(ja)",
+    ".spectrum-HelpText:lang(ko)",
+    ".spectrum-HelpText:lang(zh)",
     ".spectrum-HelpText.is-disabled",
     ".spectrum-HelpText.is-disabled .spectrum-HelpText-text",
     ".spectrum-HelpText.is-disabled .spectrum-HelpText-validationIcon",
@@ -15,86 +18,403 @@
     ".spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-validationIcon",
     ".spectrum-HelpText.spectrum-HelpText--sizeL",
     ".spectrum-HelpText.spectrum-HelpText--sizeS",
-    ".spectrum-HelpText.spectrum-HelpText--sizeXL",
-    ".spectrum-HelpText:lang(ja)",
-    ".spectrum-HelpText:lang(ko)",
-    ".spectrum-HelpText:lang(zh)"
-  ],
-  "modifiers": [
-    "--mod-helptext-bottom-edge-to-workflow-icon",
-    "--mod-helptext-bottom-to-text",
-    "--mod-helptext-content-color-default",
-    "--mod-helptext-font-family",
-    "--mod-helptext-font-size",
-    "--mod-helptext-font-style",
-    "--mod-helptext-font-weight",
-    "--mod-helptext-icon-color-default",
-    "--mod-helptext-icon-size",
-    "--mod-helptext-line-height",
-    "--mod-helptext-line-height-cjk",
-    "--mod-helptext-min-height",
-    "--mod-helptext-text-to-visual",
-    "--mod-helptext-top-edge-to-workflow-icon",
-    "--mod-helptext-top-to-text"
-  ],
-  "component": [
-    "--spectrum-helptext-bottom-to-text",
-    "--spectrum-helptext-content-color-default",
-    "--spectrum-helptext-edge-to-workflow-icon",
-    "--spectrum-helptext-font-family",
-    "--spectrum-helptext-font-size",
-    "--spectrum-helptext-font-style",
-    "--spectrum-helptext-font-weight",
-    "--spectrum-helptext-icon-color-default",
-    "--spectrum-helptext-icon-size",
-    "--spectrum-helptext-line-height",
-    "--spectrum-helptext-min-height",
-    "--spectrum-helptext-text-to-visual",
-    "--spectrum-helptext-top-to-text"
-  ],
-  "global": [
-    "--spectrum-cjk-line-height-100",
-    "--spectrum-component-bottom-to-text-100",
-    "--spectrum-component-bottom-to-text-200",
-    "--spectrum-component-bottom-to-text-300",
-    "--spectrum-component-bottom-to-text-75",
-    "--spectrum-component-height-100",
-    "--spectrum-component-height-200",
-    "--spectrum-component-height-300",
-    "--spectrum-component-height-75",
-    "--spectrum-component-top-to-text-100",
-    "--spectrum-component-top-to-text-200",
-    "--spectrum-component-top-to-text-300",
-    "--spectrum-component-top-to-text-75",
-    "--spectrum-component-top-to-workflow-icon-100",
-    "--spectrum-component-top-to-workflow-icon-200",
-    "--spectrum-component-top-to-workflow-icon-300",
-    "--spectrum-component-top-to-workflow-icon-75",
-    "--spectrum-default-font-style",
-    "--spectrum-disabled-content-color",
-    "--spectrum-font-size-100",
-    "--spectrum-font-size-200",
-    "--spectrum-font-size-300",
-    "--spectrum-font-size-75",
-    "--spectrum-line-height-100",
-    "--spectrum-negative-content-color-default",
-    "--spectrum-neutral-subdued-content-color-default",
-    "--spectrum-regular-font-weight",
-    "--spectrum-sans-font-family-stack",
-    "--spectrum-text-to-visual-100",
-    "--spectrum-text-to-visual-200",
-    "--spectrum-text-to-visual-300",
-    "--spectrum-text-to-visual-75",
-    "--spectrum-workflow-icon-size-100",
-    "--spectrum-workflow-icon-size-200",
-    "--spectrum-workflow-icon-size-300",
-    "--spectrum-workflow-icon-size-75"
+    ".spectrum-HelpText.spectrum-HelpText--sizeXL"
   ],
-  "passthroughs": [],
-  "high-contrast": [
-    "--highcontrast-helptext-content-color-default",
-    "--highcontrast-helptext-content-color-disabled",
-    "--highcontrast-helptext-icon-color-default",
-    "--highcontrast-helptext-icon-color-disabled"
-  ]
+  "modifiers": {
+    "mod-helptext-line-height": {
+      "description": "Defined in `.spectrum-HelpText:lang(ja), .spectrum-HelpText:lang(ko), .spectrum-HelpText:lang(zh)`. <br/>Used by `.spectrum-HelpText .spectrum-HelpText-text`. <br/>Defaults to `var(--spectrum-helptext-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-helptext-line-height-cjk": {
+      "description": "Used by `--mod-helptext-line-height`. <br/>Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-helptext-content-color-default": {
+      "description": "Used by `.spectrum-HelpText`, `.spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-text`, `.spectrum-HelpText.spectrum-HelpText--negative .spectrum-HelpText-text`, `.spectrum-HelpText.is-disabled .spectrum-HelpText-text`. <br/>Defaults to `var(--spectrum-helptext-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-helptext-font-size": {
+      "description": "Used by `.spectrum-HelpText`. <br/>Defaults to `var(--spectrum-helptext-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-helptext-min-height": {
+      "description": "Used by `.spectrum-HelpText`. <br/>Defaults to `var(--spectrum-helptext-min-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-helptext-text-to-visual": {
+      "description": "Used by `.spectrum-HelpText .spectrum-HelpText-validationIcon`. <br/>Defaults to `var(--spectrum-helptext-text-to-visual)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-helptext-top-edge-to-workflow-icon": {
+      "description": "Used by `.spectrum-HelpText .spectrum-HelpText-validationIcon`. <br/>Defaults to `var(--spectrum-helptext-edge-to-workflow-icon)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-helptext-bottom-edge-to-workflow-icon": {
+      "description": "Used by `.spectrum-HelpText .spectrum-HelpText-validationIcon`. <br/>Defaults to `var(--spectrum-helptext-edge-to-workflow-icon)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-helptext-icon-size": {
+      "description": "Used by `.spectrum-HelpText .spectrum-HelpText-validationIcon`. <br/>Defaults to `var(--spectrum-helptext-icon-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-helptext-top-to-text": {
+      "description": "Used by `.spectrum-HelpText .spectrum-HelpText-text`. <br/>Defaults to `var(--spectrum-helptext-top-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-helptext-bottom-to-text": {
+      "description": "Used by `.spectrum-HelpText .spectrum-HelpText-text`. <br/>Defaults to `var(--spectrum-helptext-bottom-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-helptext-font-family": {
+      "description": "Used by `.spectrum-HelpText .spectrum-HelpText-text`. <br/>Defaults to `var(--spectrum-helptext-font-family)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-helptext-font-style": {
+      "description": "Used by `.spectrum-HelpText .spectrum-HelpText-text`. <br/>Defaults to `var(--spectrum-helptext-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-helptext-font-weight": {
+      "description": "Used by `.spectrum-HelpText .spectrum-HelpText-text`. <br/>Defaults to `var(--spectrum-helptext-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-helptext-icon-color-default": {
+      "description": "Used by `.spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-validationIcon`, `.spectrum-HelpText.spectrum-HelpText--negative .spectrum-HelpText-validationIcon`, `.spectrum-HelpText.is-disabled .spectrum-HelpText-validationIcon`. <br/>Defaults to `var(--spectrum-helptext-icon-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-helptext-min-height": {
+      "value": "48px",
+      "description": "Defined in `.spectrum-HelpText`, `.spectrum-HelpText.spectrum-HelpText--sizeS`, `.spectrum-HelpText.spectrum-HelpText--sizeL`, `.spectrum-HelpText.spectrum-HelpText--sizeXL`. <br/>Used by `.spectrum-HelpText`. <br/>Defaults to `var(--spectrum-component-height-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-helptext-icon-size": {
+      "value": "26px",
+      "description": "Defined in `.spectrum-HelpText`, `.spectrum-HelpText.spectrum-HelpText--sizeS`, `.spectrum-HelpText.spectrum-HelpText--sizeL`, `.spectrum-HelpText.spectrum-HelpText--sizeXL`. <br/>Used by `.spectrum-HelpText .spectrum-HelpText-validationIcon`. <br/>Defaults to `var(--spectrum-workflow-icon-size-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-helptext-text-to-visual": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-HelpText`, `.spectrum-HelpText.spectrum-HelpText--sizeS`, `.spectrum-HelpText.spectrum-HelpText--sizeL`, `.spectrum-HelpText.spectrum-HelpText--sizeXL`. <br/>Used by `.spectrum-HelpText .spectrum-HelpText-validationIcon`. <br/>Defaults to `var(--spectrum-text-to-visual-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-helptext-edge-to-workflow-icon": {
+      "value": "11px",
+      "description": "Defined in `.spectrum-HelpText`, `.spectrum-HelpText.spectrum-HelpText--sizeS`, `.spectrum-HelpText.spectrum-HelpText--sizeL`, `.spectrum-HelpText.spectrum-HelpText--sizeXL`. <br/>Used by `.spectrum-HelpText .spectrum-HelpText-validationIcon`. <br/>Defaults to `var(--spectrum-component-top-to-workflow-icon-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-helptext-top-to-text": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-HelpText`, `.spectrum-HelpText.spectrum-HelpText--sizeS`, `.spectrum-HelpText.spectrum-HelpText--sizeL`, `.spectrum-HelpText.spectrum-HelpText--sizeXL`. <br/>Used by `.spectrum-HelpText .spectrum-HelpText-text`. <br/>Defaults to `var(--spectrum-component-top-to-text-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-helptext-bottom-to-text": {
+      "value": "14px",
+      "description": "Defined in `.spectrum-HelpText`, `.spectrum-HelpText.spectrum-HelpText--sizeS`, `.spectrum-HelpText.spectrum-HelpText--sizeL`, `.spectrum-HelpText.spectrum-HelpText--sizeXL`. <br/>Used by `.spectrum-HelpText .spectrum-HelpText-text`. <br/>Defaults to `var(--spectrum-component-bottom-to-text-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-helptext-font-size": {
+      "value": "18px",
+      "description": "Defined in `.spectrum-HelpText`, `.spectrum-HelpText.spectrum-HelpText--sizeS`, `.spectrum-HelpText.spectrum-HelpText--sizeL`, `.spectrum-HelpText.spectrum-HelpText--sizeXL`. <br/>Used by `.spectrum-HelpText`. <br/>Defaults to `var(--spectrum-font-size-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-helptext-font-family": {
+      "value": "var(--spectrum-sans-font-family-stack)",
+      "description": "Defined in `.spectrum-HelpText`. <br/>Used by `.spectrum-HelpText .spectrum-HelpText-text`. <br/>Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-helptext-font-style": {
+      "value": "normal",
+      "description": "Defined in `.spectrum-HelpText`. <br/>Used by `.spectrum-HelpText .spectrum-HelpText-text`. <br/>Defaults to `var(--spectrum-default-font-style)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-helptext-line-height": {
+      "value": "1.3",
+      "description": "Defined in `.spectrum-HelpText`. <br/>Used by `.spectrum-HelpText .spectrum-HelpText-text`. <br/>Defaults to `var(--spectrum-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-helptext-font-weight": {
+      "value": "400",
+      "description": "Defined in `.spectrum-HelpText`. <br/>Used by `.spectrum-HelpText .spectrum-HelpText-text`. <br/>Defaults to `var(--spectrum-regular-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-helptext-content-color-default": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Defined in `.spectrum-HelpText, .spectrum-HelpText.spectrum-HelpText--neutral`, `.spectrum-HelpText.spectrum-HelpText--negative`, `.spectrum-HelpText.is-disabled`. <br/>Used by `.spectrum-HelpText`, `.spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-text`, `.spectrum-HelpText.spectrum-HelpText--negative .spectrum-HelpText-text`, `.spectrum-HelpText.is-disabled .spectrum-HelpText-text`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-helptext-icon-color-default": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Defined in `.spectrum-HelpText, .spectrum-HelpText.spectrum-HelpText--neutral`, `.spectrum-HelpText.spectrum-HelpText--negative`, `.spectrum-HelpText.is-disabled`. <br/>Used by `.spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-validationIcon`, `.spectrum-HelpText.spectrum-HelpText--negative .spectrum-HelpText-validationIcon`, `.spectrum-HelpText.is-disabled .spectrum-HelpText-validationIcon`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-component-height-100": {
+      "value": "32px",
+      "description": "Used by `--spectrum-helptext-min-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-100": {
+      "value": "20px",
+      "description": "Used by `--spectrum-helptext-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-helptext-text-to-visual`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-workflow-icon-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-helptext-edge-to-workflow-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-helptext-top-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-100": {
+      "value": "9px",
+      "description": "Used by `--spectrum-helptext-bottom-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-100": {
+      "value": "14px",
+      "description": "Used by `--spectrum-helptext-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-sans-font-family-stack": {
+      "description": "Used by `--spectrum-helptext-font-family`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-default-font-style": {
+      "value": "normal",
+      "description": "Used by `--spectrum-helptext-font-style`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-line-height-100": {
+      "value": "1.3",
+      "description": "Used by `--spectrum-helptext-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-regular-font-weight": {
+      "value": "400",
+      "description": "Used by `--spectrum-helptext-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-cjk-line-height-100": {
+      "value": "1.5",
+      "description": "Used by `--mod-helptext-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-75": {
+      "value": "24px",
+      "description": "Used by `--spectrum-helptext-min-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-75": {
+      "value": "16px",
+      "description": "Used by `--spectrum-helptext-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-75": {
+      "value": "12px",
+      "description": "Used by `--spectrum-helptext-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-75": {
+      "value": "5px",
+      "description": "Used by `--spectrum-helptext-text-to-visual`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-workflow-icon-75": {
+      "value": "4px",
+      "description": "Used by `--spectrum-helptext-edge-to-workflow-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-75": {
+      "value": "4px",
+      "description": "Used by `--spectrum-helptext-top-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-75": {
+      "value": "5px",
+      "description": "Used by `--spectrum-helptext-bottom-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-200": {
+      "value": "40px",
+      "description": "Used by `--spectrum-helptext-min-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-200": {
+      "value": "22px",
+      "description": "Used by `--spectrum-helptext-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-200": {
+      "value": "16px",
+      "description": "Used by `--spectrum-helptext-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-200": {
+      "value": "7px",
+      "description": "Used by `--spectrum-helptext-text-to-visual`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-workflow-icon-200": {
+      "value": "9px",
+      "description": "Used by `--spectrum-helptext-edge-to-workflow-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-200": {
+      "value": "9px",
+      "description": "Used by `--spectrum-helptext-top-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-200": {
+      "value": "11px",
+      "description": "Used by `--spectrum-helptext-bottom-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-300": {
+      "value": "48px",
+      "description": "Used by `--spectrum-helptext-min-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-300": {
+      "value": "26px",
+      "description": "Used by `--spectrum-helptext-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-300": {
+      "value": "18px",
+      "description": "Used by `--spectrum-helptext-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-300": {
+      "value": "8px",
+      "description": "Used by `--spectrum-helptext-text-to-visual`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-workflow-icon-300": {
+      "value": "11px",
+      "description": "Used by `--spectrum-helptext-edge-to-workflow-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-300": {
+      "value": "12px",
+      "description": "Used by `--spectrum-helptext-top-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-300": {
+      "value": "14px",
+      "description": "Used by `--spectrum-helptext-bottom-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-subdued-content-color-default": {
+      "value": "var(--spectrum-gray-700)",
+      "description": "Used by `--spectrum-helptext-content-color-default`, `--spectrum-helptext-icon-color-default`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-content-color-default": {
+      "value": "var(--spectrum-negative-color-900)",
+      "description": "Used by `--spectrum-helptext-content-color-default`, `--spectrum-helptext-icon-color-default`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-disabled-content-color": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Used by `--spectrum-helptext-content-color-default`, `--spectrum-helptext-icon-color-default`.",
+      "control": "color",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {
+    "highcontrast-helptext-content-color-default": {
+      "value": "var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))",
+      "description": "Defined in `.spectrum-HelpText`. <br/>Used by `.spectrum-HelpText`, `.spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-text`, `.spectrum-HelpText.spectrum-HelpText--negative .spectrum-HelpText-text`. <br/>Defaults to `var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-helptext-icon-color-default": {
+      "value": "var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))",
+      "description": "Defined in `.spectrum-HelpText`. <br/>Used by `.spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-validationIcon`, `.spectrum-HelpText.spectrum-HelpText--negative .spectrum-HelpText-validationIcon`. <br/>Defaults to `var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-helptext-content-color-disabled": {
+      "value": "var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))",
+      "description": "Defined in `.spectrum-HelpText`. <br/>Used by `.spectrum-HelpText.is-disabled .spectrum-HelpText-text`. <br/>Defaults to `var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-helptext-icon-color-disabled": {
+      "value": "var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))",
+      "description": "Defined in `.spectrum-HelpText`. <br/>Used by `.spectrum-HelpText.is-disabled .spectrum-HelpText-validationIcon`. <br/>Defaults to `var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/helptext/stories/helptext.stories.js b/components/helptext/stories/helptext.stories.js
index 01d56bd4f99..f27f769d9b3 100644
--- a/components/helptext/stories/helptext.stories.js
+++ b/components/helptext/stories/helptext.stories.js
@@ -1,11 +1,13 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { HelpTextGroup } from "./helptext.test.js";
 import { NegativeTemplate, Template, VariantsTemplate } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * Help text provides either an informative description or an error message that gives more context about what a user needs to input. It's commonly used in forms.
  */
@@ -66,6 +68,10 @@ export default {
 		status: {
 			type: "migrated",
 		},
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 	tags: ["migrated"],
 };
diff --git a/components/helptext/stories/template.js b/components/helptext/stories/template.js
index 894c60745cb..c7c0217a5ea 100644
--- a/components/helptext/stories/template.js
+++ b/components/helptext/stories/template.js
@@ -15,7 +15,7 @@ export const Template = ({
 	hideIcon = false,
 	text,
 	variant,
-	id = getRandomId("helptext"),
+	id = getRandomId("help-text"),
 	customClasses = [],
 	customStyles = {},
 } = {}, context = {}) => {
diff --git a/components/icon/dist/metadata.json b/components/icon/dist/metadata.json
index 7fcad33c95b..8231f1201c3 100644
--- a/components/icon/dist/metadata.json
+++ b/components/icon/dist/metadata.json
@@ -114,86 +114,450 @@
     ".spectrum-UIIcon-LinkOut400",
     ".spectrum-UIIcon-LinkOut75"
   ],
-  "modifiers": [
-    "--mod-icon-block-size",
-    "--mod-icon-color",
-    "--mod-icon-inline-size",
-    "--mod-icon-size"
-  ],
-  "component": [
-    "--spectrum-icon-block-size",
-    "--spectrum-icon-inline-size",
-    "--spectrum-icon-size"
-  ],
-  "global": [
-    "--spectrum-add-icon-size-100",
-    "--spectrum-add-icon-size-200",
-    "--spectrum-add-icon-size-300",
-    "--spectrum-add-icon-size-50",
-    "--spectrum-add-icon-size-75",
-    "--spectrum-arrow-icon-size-100",
-    "--spectrum-arrow-icon-size-200",
-    "--spectrum-arrow-icon-size-300",
-    "--spectrum-arrow-icon-size-400",
-    "--spectrum-arrow-icon-size-500",
-    "--spectrum-arrow-icon-size-600",
-    "--spectrum-arrow-icon-size-75",
-    "--spectrum-asterisk-icon-size-100",
-    "--spectrum-asterisk-icon-size-200",
-    "--spectrum-asterisk-icon-size-300",
-    "--spectrum-asterisk-icon-size-75",
-    "--spectrum-checkmark-icon-size-100",
-    "--spectrum-checkmark-icon-size-200",
-    "--spectrum-checkmark-icon-size-300",
-    "--spectrum-checkmark-icon-size-400",
-    "--spectrum-checkmark-icon-size-50",
-    "--spectrum-checkmark-icon-size-500",
-    "--spectrum-checkmark-icon-size-600",
-    "--spectrum-checkmark-icon-size-75",
-    "--spectrum-chevron-icon-size-100",
-    "--spectrum-chevron-icon-size-200",
-    "--spectrum-chevron-icon-size-300",
-    "--spectrum-chevron-icon-size-400",
-    "--spectrum-chevron-icon-size-50",
-    "--spectrum-chevron-icon-size-500",
-    "--spectrum-chevron-icon-size-75",
-    "--spectrum-corner-triangle-icon-size-100",
-    "--spectrum-corner-triangle-icon-size-200",
-    "--spectrum-corner-triangle-icon-size-300",
-    "--spectrum-corner-triangle-icon-size-75",
-    "--spectrum-cross-icon-size-100",
-    "--spectrum-cross-icon-size-200",
-    "--spectrum-cross-icon-size-300",
-    "--spectrum-cross-icon-size-400",
-    "--spectrum-cross-icon-size-500",
-    "--spectrum-cross-icon-size-600",
-    "--spectrum-cross-icon-size-75",
-    "--spectrum-dash-icon-size-100",
-    "--spectrum-dash-icon-size-200",
-    "--spectrum-dash-icon-size-300",
-    "--spectrum-dash-icon-size-400",
-    "--spectrum-dash-icon-size-50",
-    "--spectrum-dash-icon-size-500",
-    "--spectrum-dash-icon-size-600",
-    "--spectrum-dash-icon-size-75",
-    "--spectrum-drag-handle-icon-size-100",
-    "--spectrum-drag-handle-icon-size-200",
-    "--spectrum-drag-handle-icon-size-300",
-    "--spectrum-drag-handle-icon-size-75",
-    "--spectrum-gripper-icon-size-100",
-    "--spectrum-link-out-icon-size-100",
-    "--spectrum-link-out-icon-size-200",
-    "--spectrum-link-out-icon-size-300",
-    "--spectrum-link-out-icon-size-400",
-    "--spectrum-link-out-icon-size-75",
-    "--spectrum-workflow-icon-size-100",
-    "--spectrum-workflow-icon-size-200",
-    "--spectrum-workflow-icon-size-300",
-    "--spectrum-workflow-icon-size-50",
-    "--spectrum-workflow-icon-size-75",
-    "--spectrum-workflow-icon-size-xxl",
-    "--spectrum-workflow-icon-size-xxs"
-  ],
-  "passthroughs": [],
-  "high-contrast": []
+  "modifiers": {
+    "mod-icon-color": {
+      "description": "Used by `--iconPrimary`, `.spectrum-Icon, .spectrum-UIIcon`.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-icon-inline-size": {
+      "description": "Used by `--spectrum-icon-inline-size`. <br/>Defaults to `var(--mod-icon-size, var(--spectrum-icon-size))`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-icon-size": {
+      "description": "Used by `--spectrum-icon-inline-size`, `--spectrum-icon-block-size`. <br/>Defaults to `var(--spectrum-icon-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-icon-block-size": {
+      "description": "Used by `--spectrum-icon-block-size`. <br/>Defaults to `var(--mod-icon-size, var(--spectrum-icon-size))`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-icon-inline-size": {
+      "value": "var(--mod-icon-inline-size, var(--mod-icon-size, var(--spectrum-icon-size)))",
+      "description": "Defined in `.spectrum-Icon, .spectrum-UIIcon`. <br/>Used by `.spectrum-Icon, .spectrum-UIIcon`, `.spectrum-Icon img, .spectrum-Icon svg`. <br/>Defaults to `var(--mod-icon-inline-size, var(--mod-icon-size, var(--spectrum-icon-size)))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-icon-size": {
+      "value": "16px",
+      "description": "Defined in `.spectrum-Icon`, `.spectrum-Icon--sizeXXS`, `.spectrum-Icon--sizeXS`, `.spectrum-Icon--sizeS`, `.spectrum-Icon--sizeL`, `.spectrum-Icon--sizeXL`, `.spectrum-Icon--sizeXXL`, `.spectrum-UIIcon-ChevronRight50`, `.spectrum-UIIcon-ChevronRight75`, `.spectrum-UIIcon-ChevronRight100`, `.spectrum-UIIcon-ChevronRight200`, `.spectrum-UIIcon-ChevronRight300`, `.spectrum-UIIcon-ChevronRight400`, `.spectrum-UIIcon-ChevronRight500`, `.spectrum-UIIcon-ChevronDown50`, `.spectrum-UIIcon-ChevronDown75`, `.spectrum-UIIcon-ChevronDown100`, `.spectrum-UIIcon-ChevronDown200`, `.spectrum-UIIcon-ChevronDown300`, `.spectrum-UIIcon-ChevronDown400`, `.spectrum-UIIcon-ChevronDown500`, `.spectrum-UIIcon-ChevronLeft50`, `.spectrum-UIIcon-ChevronLeft75`, `.spectrum-UIIcon-ChevronLeft100`, `.spectrum-UIIcon-ChevronLeft200`, `.spectrum-UIIcon-ChevronLeft300`, `.spectrum-UIIcon-ChevronLeft400`, `.spectrum-UIIcon-ChevronLeft500`, `.spectrum-UIIcon-ChevronUp50`, `.spectrum-UIIcon-ChevronUp75`, `.spectrum-UIIcon-ChevronUp100`, `.spectrum-UIIcon-ChevronUp200`, `.spectrum-UIIcon-ChevronUp300`, `.spectrum-UIIcon-ChevronUp400`, `.spectrum-UIIcon-ChevronUp500`, `.spectrum-UIIcon-ArrowRight75`, `.spectrum-UIIcon-ArrowRight100`, `.spectrum-UIIcon-ArrowRight200`, `.spectrum-UIIcon-ArrowRight300`, `.spectrum-UIIcon-ArrowRight400`, `.spectrum-UIIcon-ArrowRight500`, `.spectrum-UIIcon-ArrowRight600`, `.spectrum-UIIcon-ArrowDown75`, `.spectrum-UIIcon-ArrowDown100`, `.spectrum-UIIcon-ArrowDown200`, `.spectrum-UIIcon-ArrowDown300`, `.spectrum-UIIcon-ArrowDown400`, `.spectrum-UIIcon-ArrowDown500`, `.spectrum-UIIcon-ArrowDown600`, `.spectrum-UIIcon-ArrowLeft75`, `.spectrum-UIIcon-ArrowLeft100`, `.spectrum-UIIcon-ArrowLeft200`, `.spectrum-UIIcon-ArrowLeft300`, `.spectrum-UIIcon-ArrowLeft400`, `.spectrum-UIIcon-ArrowLeft500`, `.spectrum-UIIcon-ArrowLeft600`, `.spectrum-UIIcon-ArrowUp75`, `.spectrum-UIIcon-ArrowUp100`, `.spectrum-UIIcon-ArrowUp200`, `.spectrum-UIIcon-ArrowUp300`, `.spectrum-UIIcon-ArrowUp400`, `.spectrum-UIIcon-ArrowUp500`, `.spectrum-UIIcon-ArrowUp600`, `.spectrum-UIIcon-Checkmark50`, `.spectrum-UIIcon-Checkmark75`, `.spectrum-UIIcon-Checkmark100`, `.spectrum-UIIcon-Checkmark200`, `.spectrum-UIIcon-Checkmark300`, `.spectrum-UIIcon-Checkmark400`, `.spectrum-UIIcon-Checkmark500`, `.spectrum-UIIcon-Checkmark600`, `.spectrum-UIIcon-Dash50`, `.spectrum-UIIcon-Dash75`, `.spectrum-UIIcon-Dash100`, `.spectrum-UIIcon-Dash200`, `.spectrum-UIIcon-Dash300`, `.spectrum-UIIcon-Dash400`, `.spectrum-UIIcon-Dash500`, `.spectrum-UIIcon-Dash600`, `.spectrum-UIIcon-Cross75`, `.spectrum-UIIcon-Cross100`, `.spectrum-UIIcon-Cross200`, `.spectrum-UIIcon-Cross300`, `.spectrum-UIIcon-Cross400`, `.spectrum-UIIcon-Cross500`, `.spectrum-UIIcon-Cross600`, `.spectrum-UIIcon-CornerTriangle75`, `.spectrum-UIIcon-CornerTriangle100`, `.spectrum-UIIcon-CornerTriangle200`, `.spectrum-UIIcon-CornerTriangle300`, `.spectrum-UIIcon-Asterisk75`, `.spectrum-UIIcon-Asterisk100`, `.spectrum-UIIcon-Asterisk200`, `.spectrum-UIIcon-Asterisk300`, `.spectrum-UIIcon-Add50`, `.spectrum-UIIcon-Add75`, `.spectrum-UIIcon-Add100`, `.spectrum-UIIcon-Add200`, `.spectrum-UIIcon-Add300`, `.spectrum-UIIcon-DragHandle75`, `.spectrum-UIIcon-DragHandle100`, `.spectrum-UIIcon-DragHandle200`, `.spectrum-UIIcon-DragHandle300`, `.spectrum-UIIcon-Gripper100`, `.spectrum-UIIcon-LinkOut75`, `.spectrum-UIIcon-LinkOut100`, `.spectrum-UIIcon-LinkOut200`, `.spectrum-UIIcon-LinkOut300`, `.spectrum-UIIcon-LinkOut400`. <br/>Used by `--spectrum-icon-inline-size`, `--spectrum-icon-block-size`. <br/>Defaults to `var(--spectrum-link-out-icon-size-400)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-icon-block-size": {
+      "value": "var(--mod-icon-block-size, var(--mod-icon-size, var(--spectrum-icon-size)))",
+      "description": "Defined in `.spectrum-Icon, .spectrum-UIIcon`. <br/>Used by `.spectrum-Icon, .spectrum-UIIcon`, `.spectrum-Icon img, .spectrum-Icon svg`. <br/>Defaults to `var(--mod-icon-block-size, var(--mod-icon-size, var(--spectrum-icon-size)))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-workflow-icon-size-100": {
+      "value": "20px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-xxs": {
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-50": {
+      "value": "14px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-75": {
+      "value": "16px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-200": {
+      "value": "22px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-300": {
+      "value": "26px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-xxl": {
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-chevron-icon-size-50": {
+      "value": "6px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-chevron-icon-size-75": {
+      "value": "10px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-chevron-icon-size-100": {
+      "value": "10px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-chevron-icon-size-200": {
+      "value": "12px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-chevron-icon-size-300": {
+      "value": "14px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-chevron-icon-size-400": {
+      "value": "16px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-chevron-icon-size-500": {
+      "value": "16px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-arrow-icon-size-75": {
+      "value": "10px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-arrow-icon-size-100": {
+      "value": "10px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-arrow-icon-size-200": {
+      "value": "12px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-arrow-icon-size-300": {
+      "value": "14px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-arrow-icon-size-400": {
+      "value": "16px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-arrow-icon-size-500": {
+      "value": "18px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-arrow-icon-size-600": {
+      "value": "20px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-checkmark-icon-size-50": {
+      "value": "10px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-checkmark-icon-size-75": {
+      "value": "10px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-checkmark-icon-size-100": {
+      "value": "10px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-checkmark-icon-size-200": {
+      "value": "12px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-checkmark-icon-size-300": {
+      "value": "14px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-checkmark-icon-size-400": {
+      "value": "16px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-checkmark-icon-size-500": {
+      "value": "16px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-checkmark-icon-size-600": {
+      "value": "18px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-dash-icon-size-50": {
+      "value": "8px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-dash-icon-size-75": {
+      "value": "8px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-dash-icon-size-100": {
+      "value": "10px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-dash-icon-size-200": {
+      "value": "12px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-dash-icon-size-300": {
+      "value": "12px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-dash-icon-size-400": {
+      "value": "14px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-dash-icon-size-500": {
+      "value": "16px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-dash-icon-size-600": {
+      "value": "18px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-cross-icon-size-75": {
+      "value": "8px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-cross-icon-size-100": {
+      "value": "8px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-cross-icon-size-200": {
+      "value": "10px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-cross-icon-size-300": {
+      "value": "12px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-cross-icon-size-400": {
+      "value": "12px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-cross-icon-size-500": {
+      "value": "14px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-cross-icon-size-600": {
+      "value": "16px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-triangle-icon-size-75": {
+      "value": "5px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-triangle-icon-size-100": {
+      "value": "5px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-triangle-icon-size-200": {
+      "value": "6px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-triangle-icon-size-300": {
+      "value": "7px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-asterisk-icon-size-75": {
+      "value": "8px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-asterisk-icon-size-100": {
+      "value": "8px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-asterisk-icon-size-200": {
+      "value": "10px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-asterisk-icon-size-300": {
+      "value": "10px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-add-icon-size-50": {
+      "value": "8px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-add-icon-size-75": {
+      "value": "8px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-add-icon-size-100": {
+      "value": "10px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-add-icon-size-200": {
+      "value": "12px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-add-icon-size-300": {
+      "value": "12px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-drag-handle-icon-size-75": {
+      "value": "10px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-drag-handle-icon-size-100": {
+      "value": "10px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-drag-handle-icon-size-200": {
+      "value": "12px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-drag-handle-icon-size-300": {
+      "value": "14px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gripper-icon-size-100": {
+      "value": "24px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-link-out-icon-size-75": {
+      "value": "10px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-link-out-icon-size-100": {
+      "value": "12px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-link-out-icon-size-200": {
+      "value": "14px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-link-out-icon-size-300": {
+      "value": "14px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-link-out-icon-size-400": {
+      "value": "16px",
+      "description": "Used by `--spectrum-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {}
 }
diff --git a/components/icon/stories/icon.stories.js b/components/icon/stories/icon.stories.js
index 9287892c250..7bcbdc6ea35 100644
--- a/components/icon/stories/icon.stories.js
+++ b/components/icon/stories/icon.stories.js
@@ -1,12 +1,14 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { IconGroup } from "./icon.test.js";
 import { FullIconSetTemplate, Template, UIArrowsTemplate, UIDefaultTemplate, WorkflowDefaultTemplate } from "./template";
 import { uiIconsWithDirections, workflowIconsCleaned, workflowSizes } from "./utilities.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * The Icon component contains all of the CSS used for displaying both workflow and UI icons.
  *
@@ -101,6 +103,10 @@ export default {
 		status: {
 			type: "migrated",
 		},
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 	tags: ["migrated"],
 };
diff --git a/components/illustratedmessage/dist/metadata.json b/components/illustratedmessage/dist/metadata.json
index 12705f6822e..2bed5e3a048 100644
--- a/components/illustratedmessage/dist/metadata.json
+++ b/components/illustratedmessage/dist/metadata.json
@@ -21,81 +21,409 @@
     ".spectrum-IllustratedMessage:lang(ko)",
     ".spectrum-IllustratedMessage:lang(zh)"
   ],
-  "modifiers": [
-    "--mod-illustrated-message-description-color",
-    "--mod-illustrated-message-description-font-family",
-    "--mod-illustrated-message-description-font-size",
-    "--mod-illustrated-message-description-font-style",
-    "--mod-illustrated-message-description-font-weight",
-    "--mod-illustrated-message-description-line-height",
-    "--mod-illustrated-message-description-pointer-events",
-    "--mod-illustrated-message-description-position",
-    "--mod-illustrated-message-description-to-action",
-    "--mod-illustrated-message-description-z-index",
-    "--mod-illustrated-message-display",
-    "--mod-illustrated-message-heading-to-description",
-    "--mod-illustrated-message-horizontal-maximum-width",
-    "--mod-illustrated-message-illustrated-inline-size",
-    "--mod-illustrated-message-illustration-block-size",
-    "--mod-illustrated-message-illustration-color",
-    "--mod-illustrated-message-illustration-size",
-    "--mod-illustrated-message-illustration-to-heading",
-    "--mod-illustrated-message-pointer-events",
-    "--mod-illustrated-message-title-color",
-    "--mod-illustrated-message-title-font-family",
-    "--mod-illustrated-message-title-font-size",
-    "--mod-illustrated-message-title-font-style",
-    "--mod-illustrated-message-title-font-weight",
-    "--mod-illustrated-message-title-line-height",
-    "--mod-illustrated-message-vertical-maximum-width"
-  ],
-  "component": [
-    "--spectrum-illustrated-message-description-color",
-    "--spectrum-illustrated-message-description-font-family",
-    "--spectrum-illustrated-message-description-font-size",
-    "--spectrum-illustrated-message-description-font-style",
-    "--spectrum-illustrated-message-description-font-weight",
-    "--spectrum-illustrated-message-description-line-height",
-    "--spectrum-illustrated-message-description-to-action",
-    "--spectrum-illustrated-message-heading-to-description",
-    "--spectrum-illustrated-message-horizontal-maximum-width",
-    "--spectrum-illustrated-message-illustration-color",
-    "--spectrum-illustrated-message-illustration-size",
-    "--spectrum-illustrated-message-illustration-to-content",
-    "--spectrum-illustrated-message-illustration-to-heading",
-    "--spectrum-illustrated-message-large-body-font-size",
-    "--spectrum-illustrated-message-large-cjk-title-font-size",
-    "--spectrum-illustrated-message-large-title-font-size",
-    "--spectrum-illustrated-message-medium-body-font-size",
-    "--spectrum-illustrated-message-medium-cjk-title-font-size",
-    "--spectrum-illustrated-message-medium-title-font-size",
-    "--spectrum-illustrated-message-small-body-font-size",
-    "--spectrum-illustrated-message-small-cjk-title-font-size",
-    "--spectrum-illustrated-message-small-title-font-size",
-    "--spectrum-illustrated-message-title-color",
-    "--spectrum-illustrated-message-title-font-family",
-    "--spectrum-illustrated-message-title-font-size",
-    "--spectrum-illustrated-message-title-font-style",
-    "--spectrum-illustrated-message-title-font-weight",
-    "--spectrum-illustrated-message-title-line-height",
-    "--spectrum-illustrated-message-vertical-maximum-width"
-  ],
-  "global": [
-    "--spectrum-body-color",
-    "--spectrum-body-sans-serif-font-style",
-    "--spectrum-body-sans-serif-font-weight",
-    "--spectrum-heading-color",
-    "--spectrum-line-height-200",
-    "--spectrum-neutral-content-color-default",
-    "--spectrum-sans-font-family-stack",
-    "--spectrum-spacing-100",
-    "--spectrum-spacing-200",
-    "--spectrum-spacing-300",
-    "--spectrum-spacing-75",
-    "--spectrum-title-line-height",
-    "--spectrum-title-sans-serif-font-style",
-    "--spectrum-title-sans-serif-font-weight"
-  ],
-  "passthroughs": ["--mod-buttongroup-justify-content"],
-  "high-contrast": ["--highcontrast-illustrated-message-illustration-color"]
+  "modifiers": {
+    "mod-illustrated-message-display": {
+      "description": "Used by `.spectrum-IllustratedMessage`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-illustrated-message-pointer-events": {
+      "description": "Used by `.spectrum-IllustratedMessage`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-illustrated-message-vertical-maximum-width": {
+      "description": "Used by `.spectrum-IllustratedMessage`. <br/>Defaults to `var(--spectrum-illustrated-message-vertical-maximum-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-illustrated-message-illustration-to-heading": {
+      "description": "Used by `.spectrum-IllustratedMessage-illustration`. <br/>Defaults to `var(--spectrum-illustrated-message-illustration-to-heading)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-illustrated-message-illustration-color": {
+      "description": "Used by `.spectrum-IllustratedMessage-illustration`. <br/>Defaults to `var(--spectrum-illustrated-message-illustration-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-illustrated-message-illustration-block-size": {
+      "description": "Used by `.spectrum-IllustratedMessage-illustration`. <br/>Defaults to `var(--mod-illustrated-message-illustration-size, var(--spectrum-illustrated-message-illustration-size))`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-illustrated-message-illustration-size": {
+      "description": "Used by `.spectrum-IllustratedMessage-illustration`. <br/>Defaults to `var(--spectrum-illustrated-message-illustration-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-illustrated-message-illustrated-inline-size": {
+      "description": "Used by `.spectrum-IllustratedMessage-illustration`. <br/>Defaults to `var(--mod-illustrated-message-illustration-size, var(--spectrum-illustrated-message-illustration-size))`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-illustrated-message-title-font-family": {
+      "description": "Used by `.spectrum-IllustratedMessage-heading`. <br/>Defaults to `var(--spectrum-illustrated-message-title-font-family)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-illustrated-message-title-font-weight": {
+      "description": "Used by `.spectrum-IllustratedMessage-heading`. <br/>Defaults to `var(--spectrum-illustrated-message-title-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-illustrated-message-title-font-style": {
+      "description": "Used by `.spectrum-IllustratedMessage-heading`. <br/>Defaults to `var(--spectrum-illustrated-message-title-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-illustrated-message-title-font-size": {
+      "description": "Used by `.spectrum-IllustratedMessage-heading`. <br/>Defaults to `var(--spectrum-illustrated-message-title-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-illustrated-message-title-line-height": {
+      "description": "Used by `.spectrum-IllustratedMessage-heading`. <br/>Defaults to `var(--spectrum-illustrated-message-title-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-illustrated-message-title-color": {
+      "description": "Used by `.spectrum-IllustratedMessage-heading`. <br/>Defaults to `var(--spectrum-illustrated-message-title-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-illustrated-message-heading-to-description": {
+      "description": "Used by `.spectrum-IllustratedMessage-heading`. <br/>Defaults to `var(--spectrum-illustrated-message-heading-to-description)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-illustrated-message-description-position": {
+      "description": "Used by `.spectrum-IllustratedMessage-description`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-illustrated-message-description-z-index": {
+      "description": "Used by `.spectrum-IllustratedMessage-description`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-illustrated-message-description-pointer-events": {
+      "description": "Used by `.spectrum-IllustratedMessage-description`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-illustrated-message-description-font-family": {
+      "description": "Used by `.spectrum-IllustratedMessage-description`. <br/>Defaults to `var(--spectrum-illustrated-message-description-font-family)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-illustrated-message-description-font-weight": {
+      "description": "Used by `.spectrum-IllustratedMessage-description`. <br/>Defaults to `var(--spectrum-illustrated-message-description-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-illustrated-message-description-font-style": {
+      "description": "Used by `.spectrum-IllustratedMessage-description`. <br/>Defaults to `var(--spectrum-illustrated-message-description-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-illustrated-message-description-font-size": {
+      "description": "Used by `.spectrum-IllustratedMessage-description`. <br/>Defaults to `var(--spectrum-illustrated-message-description-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-illustrated-message-description-line-height": {
+      "description": "Used by `.spectrum-IllustratedMessage-description`. <br/>Defaults to `var(--spectrum-illustrated-message-description-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-illustrated-message-description-color": {
+      "description": "Used by `.spectrum-IllustratedMessage-description`. <br/>Defaults to `var(--spectrum-illustrated-message-description-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-illustrated-message-horizontal-maximum-width": {
+      "description": "Used by `.spectrum-IllustratedMessage--horizontal`. <br/>Defaults to `var(--spectrum-illustrated-message-horizontal-maximum-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-illustrated-message-description-to-action": {
+      "description": "Used by `.spectrum-IllustratedMessage-actions`. <br/>Defaults to `var(--spectrum-illustrated-message-description-to-action)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-illustrated-message-heading-to-description": {
+      "value": "4px",
+      "description": "Defined in `.spectrum-IllustratedMessage`. <br/>Used by `.spectrum-IllustratedMessage-heading`. <br/>Defaults to `var(--spectrum-spacing-75)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-illustrated-message-illustration-to-heading": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-IllustratedMessage`, `.spectrum-IllustratedMessage--sizeL`. <br/>Used by `.spectrum-IllustratedMessage-illustration`. <br/>Defaults to `var(--spectrum-spacing-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-illustrated-message-illustration-to-content": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-IllustratedMessage`, `.spectrum-IllustratedMessage--sizeL`. <br/>Used by `.spectrum-IllustratedMessage--horizontal`. <br/>Defaults to `var(--spectrum-spacing-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-illustrated-message-description-to-action": {
+      "value": "16px",
+      "description": "Defined in `.spectrum-IllustratedMessage`. <br/>Used by `.spectrum-IllustratedMessage-actions`. <br/>Defaults to `var(--spectrum-spacing-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-illustrated-message-illustration-color": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-IllustratedMessage`. <br/>Used by `.spectrum-IllustratedMessage-illustration`. <br/>Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-illustrated-message-illustration-size": {
+      "value": "160px",
+      "description": "Defined in `.spectrum-IllustratedMessage`, `.spectrum-IllustratedMessage--sizeL`. <br/>Used by `.spectrum-IllustratedMessage-illustration`. <br/>Defaults to `160px`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-illustrated-message-title-font-family": {
+      "value": "var(--spectrum-sans-font-family-stack)",
+      "description": "Defined in `.spectrum-IllustratedMessage`. <br/>Used by `.spectrum-IllustratedMessage-heading`. <br/>Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-illustrated-message-title-font-weight": {
+      "value": "700",
+      "description": "Defined in `.spectrum-IllustratedMessage`. <br/>Used by `.spectrum-IllustratedMessage-heading`. <br/>Defaults to `var(--spectrum-title-sans-serif-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-illustrated-message-title-font-style": {
+      "value": "normal",
+      "description": "Defined in `.spectrum-IllustratedMessage`. <br/>Used by `.spectrum-IllustratedMessage-heading`. <br/>Defaults to `var(--spectrum-title-sans-serif-font-style)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-illustrated-message-title-font-size": {
+      "value": "var(--spectrum-title-cjk-size-xl)",
+      "description": "Defined in `.spectrum-IllustratedMessage`, `.spectrum-IllustratedMessage:lang(ja), .spectrum-IllustratedMessage:lang(ko), .spectrum-IllustratedMessage:lang(zh)`, `.spectrum-IllustratedMessage--sizeS`, `.spectrum-IllustratedMessage--sizeS:lang(ja), .spectrum-IllustratedMessage--sizeS:lang(ko), .spectrum-IllustratedMessage--sizeS:lang(zh)`, `.spectrum-IllustratedMessage--sizeL`, `.spectrum-IllustratedMessage--sizeL:lang(ja), .spectrum-IllustratedMessage--sizeL:lang(ko), .spectrum-IllustratedMessage--sizeL:lang(zh)`. <br/>Used by `.spectrum-IllustratedMessage-heading`. <br/>Defaults to `var(--spectrum-illustrated-message-large-cjk-title-font-size)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-illustrated-message-medium-title-font-size": {
+      "value": "var(--spectrum-title-size-l)",
+      "description": "Used by `--spectrum-illustrated-message-title-font-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-illustrated-message-title-line-height": {
+      "value": "1.3",
+      "description": "Defined in `.spectrum-IllustratedMessage`. <br/>Used by `.spectrum-IllustratedMessage-heading`. <br/>Defaults to `var(--spectrum-title-line-height)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-illustrated-message-title-color": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-IllustratedMessage`. <br/>Used by `.spectrum-IllustratedMessage-heading`. <br/>Defaults to `var(--spectrum-heading-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-illustrated-message-description-font-family": {
+      "value": "var(--spectrum-sans-font-family-stack)",
+      "description": "Defined in `.spectrum-IllustratedMessage`. <br/>Used by `.spectrum-IllustratedMessage-description`. <br/>Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-illustrated-message-description-font-weight": {
+      "value": "400",
+      "description": "Defined in `.spectrum-IllustratedMessage`. <br/>Used by `.spectrum-IllustratedMessage-description`. <br/>Defaults to `var(--spectrum-body-sans-serif-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-illustrated-message-description-font-style": {
+      "value": "normal",
+      "description": "Defined in `.spectrum-IllustratedMessage`. <br/>Used by `.spectrum-IllustratedMessage-description`. <br/>Defaults to `var(--spectrum-body-sans-serif-font-style)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-illustrated-message-description-font-size": {
+      "value": "var(--spectrum-body-size-xs)",
+      "description": "Defined in `.spectrum-IllustratedMessage`, `.spectrum-IllustratedMessage--sizeS`, `.spectrum-IllustratedMessage--sizeL`. <br/>Used by `.spectrum-IllustratedMessage-description`. <br/>Defaults to `var(--spectrum-illustrated-message-large-body-font-size)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-illustrated-message-medium-body-font-size": {
+      "value": "var(--spectrum-body-size-xs)",
+      "description": "Used by `--spectrum-illustrated-message-description-font-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-illustrated-message-description-line-height": {
+      "value": "1.5",
+      "description": "Defined in `.spectrum-IllustratedMessage`. <br/>Used by `.spectrum-IllustratedMessage-description`. <br/>Defaults to `var(--spectrum-line-height-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-illustrated-message-description-color": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-IllustratedMessage`. <br/>Used by `.spectrum-IllustratedMessage-description`. <br/>Defaults to `var(--spectrum-body-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-illustrated-message-medium-cjk-title-font-size": {
+      "value": "var(--spectrum-title-cjk-size-l)",
+      "description": "Used by `--spectrum-illustrated-message-title-font-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-illustrated-message-small-title-font-size": {
+      "value": "var(--spectrum-title-size-s)",
+      "description": "Used by `--spectrum-illustrated-message-title-font-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-illustrated-message-small-body-font-size": {
+      "value": "var(--spectrum-body-size-xs)",
+      "description": "Used by `--spectrum-illustrated-message-description-font-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-illustrated-message-small-cjk-title-font-size": {
+      "value": "var(--spectrum-title-cjk-size-s)",
+      "description": "Used by `--spectrum-illustrated-message-title-font-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-illustrated-message-large-title-font-size": {
+      "value": "var(--spectrum-title-size-xl)",
+      "description": "Used by `--spectrum-illustrated-message-title-font-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-illustrated-message-large-body-font-size": {
+      "value": "var(--spectrum-body-size-xs)",
+      "description": "Used by `--spectrum-illustrated-message-description-font-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-illustrated-message-large-cjk-title-font-size": {
+      "value": "var(--spectrum-title-cjk-size-xl)",
+      "description": "Used by `--spectrum-illustrated-message-title-font-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-illustrated-message-vertical-maximum-width": {
+      "value": "380px",
+      "description": "Used by `.spectrum-IllustratedMessage`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-illustrated-message-horizontal-maximum-width": {
+      "value": "535px",
+      "description": "Used by `.spectrum-IllustratedMessage--horizontal`.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-spacing-75": {
+      "value": "4px",
+      "description": "Used by `--spectrum-illustrated-message-heading-to-description`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-200": {
+      "value": "12px",
+      "description": "Used by `--spectrum-illustrated-message-illustration-to-heading`, `--spectrum-illustrated-message-illustration-to-content`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-300": {
+      "value": "16px",
+      "description": "Used by `--spectrum-illustrated-message-description-to-action`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-illustrated-message-illustration-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-sans-font-family-stack": {
+      "description": "Used by `--spectrum-illustrated-message-title-font-family`, `--spectrum-illustrated-message-description-font-family`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-title-sans-serif-font-weight": {
+      "value": "700",
+      "description": "Used by `--spectrum-illustrated-message-title-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-title-sans-serif-font-style": {
+      "value": "normal",
+      "description": "Used by `--spectrum-illustrated-message-title-font-style`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-title-line-height": {
+      "value": "1.3",
+      "description": "Used by `--spectrum-illustrated-message-title-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-color": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-illustrated-message-title-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-body-sans-serif-font-weight": {
+      "value": "400",
+      "description": "Used by `--spectrum-illustrated-message-description-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-sans-serif-font-style": {
+      "value": "normal",
+      "description": "Used by `--spectrum-illustrated-message-description-font-style`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-line-height-200": {
+      "value": "1.5",
+      "description": "Used by `--spectrum-illustrated-message-description-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-color": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-illustrated-message-description-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-spacing-100": {
+      "value": "8px",
+      "description": "Used by `--spectrum-illustrated-message-illustration-to-heading`, `--spectrum-illustrated-message-illustration-to-content`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {
+    "mod-buttongroup-justify-content": {
+      "category": "Passthrough"
+    }
+  },
+  "high-contrast": {
+    "highcontrast-illustrated-message-illustration-color": {
+      "value": "var(--mod-illustrated-message-illustration-color, var(--spectrum-illustrated-message-illustration-color))",
+      "description": "Defined in `.spectrum-IllustratedMessage`. <br/>Used by `.spectrum-IllustratedMessage-illustration`. <br/>Defaults to `var(--mod-illustrated-message-illustration-color, var(--spectrum-illustrated-message-illustration-color))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/illustratedmessage/stories/illustratedmessage.stories.js b/components/illustratedmessage/stories/illustratedmessage.stories.js
index b772ad28a22..f70b40d41bc 100644
--- a/components/illustratedmessage/stories/illustratedmessage.stories.js
+++ b/components/illustratedmessage/stories/illustratedmessage.stories.js
@@ -1,10 +1,12 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { IllustratedMessageGroup } from "./illustratedmessage.test.js";
 import { Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * The Illustrated Message displays an illustration along with a heading, description and group of buttons. It can be used for status and errors, or as a call to action. For example, the Drop Zone component makes use of Illustrated Message as an area to drag and drop files.
  */
@@ -69,6 +71,7 @@ export default {
 		description: "This page isn't available. Try checking the URL or visit a different page.",
 	},
 	parameters: {
+		layout: "centered",
 		design: {
 			type: "figma",
 			url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=20032-601",
@@ -78,7 +81,10 @@ export default {
 		status: {
 			type: "migrated",
 		},
-		layout: "centered"
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 	tags: ["migrated"],
 };
diff --git a/components/infieldbutton/dist/metadata.json b/components/infieldbutton/dist/metadata.json
index cf5dfa5f4cc..bec3dd11c18 100644
--- a/components/infieldbutton/dist/metadata.json
+++ b/components/infieldbutton/dist/metadata.json
@@ -12,112 +12,498 @@
     ".spectrum-InfieldButton-inline",
     ".spectrum-InfieldButton-inline .spectrum-InfieldButton",
     ".spectrum-InfieldButton-inline > .spectrum-InfieldButton.spectrum-InfieldButton--sizeS",
-    ".spectrum-InfieldButton.spectrum-InfieldButton--quiet",
-    ".spectrum-InfieldButton.spectrum-InfieldButton--quiet:disabled",
-    ".spectrum-InfieldButton.spectrum-InfieldButton--sizeL",
-    ".spectrum-InfieldButton.spectrum-InfieldButton--sizeS",
-    ".spectrum-InfieldButton.spectrum-InfieldButton--sizeXL",
     ".spectrum-InfieldButton:active",
     ".spectrum-InfieldButton:disabled",
     ".spectrum-InfieldButton:focus-visible",
     ".spectrum-InfieldButton:hover",
     ".spectrum-InfieldButton:not(:disabled):active",
     ".spectrum-InfieldButton:not(:disabled):focus-visible",
-    ".spectrum-InfieldButton:not(:disabled):hover"
-  ],
-  "modifiers": [
-    "--mod-infield-button-background-color",
-    "--mod-infield-button-background-color-disabled",
-    "--mod-infield-button-background-color-down",
-    "--mod-infield-button-background-color-down-disabled",
-    "--mod-infield-button-background-color-down-quiet",
-    "--mod-infield-button-background-color-hover",
-    "--mod-infield-button-background-color-hover-disabled",
-    "--mod-infield-button-background-color-hover-quiet",
-    "--mod-infield-button-background-color-key-focus",
-    "--mod-infield-button-background-color-key-focus-quiet",
-    "--mod-infield-button-background-color-quiet",
-    "--mod-infield-button-background-color-quiet-disabled",
-    "--mod-infield-button-border-color",
-    "--mod-infield-button-border-color-disabled",
-    "--mod-infield-button-border-color-quiet-disabled",
-    "--mod-infield-button-border-radius",
-    "--mod-infield-button-edge-to-fill",
-    "--mod-infield-button-field-edge-to-icon",
-    "--mod-infield-button-fill-justify-content",
-    "--mod-infield-button-fill-padding",
-    "--mod-infield-button-height",
-    "--mod-infield-button-icon-color",
-    "--mod-infield-button-icon-color-disabled",
-    "--mod-infield-button-icon-color-down",
-    "--mod-infield-button-icon-color-down-disabled",
-    "--mod-infield-button-icon-color-hover",
-    "--mod-infield-button-icon-color-hover-disabled",
-    "--mod-infield-button-icon-color-key-focus",
-    "--mod-infield-button-icon-color-key-focus-disabled",
-    "--mod-infield-button-side-edge-to-fill",
-    "--mod-infield-button-width"
-  ],
-  "component": [
-    "--spectrum-in-field-button-edge-to-fill-extra-large",
-    "--spectrum-in-field-button-edge-to-fill-large",
-    "--spectrum-in-field-button-edge-to-fill-medium",
-    "--spectrum-in-field-button-edge-to-fill-small",
-    "--spectrum-in-field-button-side-edge-to-fill-extra-large",
-    "--spectrum-in-field-button-side-edge-to-fill-large",
-    "--spectrum-in-field-button-side-edge-to-fill-medium",
-    "--spectrum-in-field-button-side-edge-to-fill-small",
-    "--spectrum-infield-button-background-color",
-    "--spectrum-infield-button-background-color-down",
-    "--spectrum-infield-button-background-color-hover",
-    "--spectrum-infield-button-border-radius",
-    "--spectrum-infield-button-downstate-perspective",
-    "--spectrum-infield-button-edge-to-fill",
-    "--spectrum-infield-button-field-edge-to-disclosure-icon",
-    "--spectrum-infield-button-fill-justify-content",
-    "--spectrum-infield-button-fill-padding",
-    "--spectrum-infield-button-height",
-    "--spectrum-infield-button-icon-color",
-    "--spectrum-infield-button-icon-color-down",
-    "--spectrum-infield-button-icon-color-hover",
-    "--spectrum-infield-button-inline-edge-to-fill",
-    "--spectrum-infield-button-inline-field-edge-to-icon",
-    "--spectrum-infield-button-width"
-  ],
-  "global": [
-    "--spectrum-animation-duration-100",
-    "--spectrum-component-height-100",
-    "--spectrum-component-height-200",
-    "--spectrum-component-height-300",
-    "--spectrum-component-height-75",
-    "--spectrum-component-size-difference-down",
-    "--spectrum-component-size-minimum-perspective-down",
-    "--spectrum-component-size-width-ratio-down",
-    "--spectrum-corner-radius-small-size-extra-large",
-    "--spectrum-corner-radius-small-size-large",
-    "--spectrum-corner-radius-small-size-medium",
-    "--spectrum-corner-radius-small-size-small",
-    "--spectrum-disabled-background-color",
-    "--spectrum-disabled-content-color",
-    "--spectrum-downstate-height",
-    "--spectrum-downstate-width",
-    "--spectrum-field-edge-to-disclosure-icon-100",
-    "--spectrum-field-edge-to-disclosure-icon-200",
-    "--spectrum-field-edge-to-disclosure-icon-300",
-    "--spectrum-field-edge-to-disclosure-icon-75",
-    "--spectrum-field-edge-to-icon-100",
-    "--spectrum-field-edge-to-icon-200",
-    "--spectrum-field-edge-to-icon-300",
-    "--spectrum-field-edge-to-icon-75",
-    "--spectrum-gray-100",
-    "--spectrum-gray-200",
-    "--spectrum-neutral-content-color-default",
-    "--spectrum-neutral-content-color-down",
-    "--spectrum-neutral-content-color-hover"
+    ".spectrum-InfieldButton:not(:disabled):hover",
+    ".spectrum-InfieldButton.spectrum-InfieldButton--quiet",
+    ".spectrum-InfieldButton.spectrum-InfieldButton--quiet:disabled",
+    ".spectrum-InfieldButton.spectrum-InfieldButton--sizeL",
+    ".spectrum-InfieldButton.spectrum-InfieldButton--sizeS",
+    ".spectrum-InfieldButton.spectrum-InfieldButton--sizeXL"
   ],
-  "passthroughs": [],
-  "high-contrast": [
-    "--highcontrast-infield-button-background-color",
-    "--highcontrast-infield-button-icon-color"
-  ]
+  "modifiers": {
+    "mod-infield-button-background-color": {
+      "description": "Defined in `.spectrum-InfieldButton:disabled`, `.spectrum-InfieldButton.spectrum-InfieldButton--quiet`, `.spectrum-InfieldButton.spectrum-InfieldButton--quiet:disabled`, `.spectrum-InfieldButton:hover`, `.spectrum-InfieldButton:active`. <br/>Used by `.spectrum-InfieldButton-fill`. <br/>Defaults to `var(--spectrum-infield-button-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-infield-button-background-color-disabled": {
+      "description": "Used by `--mod-infield-button-background-color`. <br/>Defaults to `var(--spectrum-disabled-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-infield-button-background-color-hover": {
+      "description": "Defined in `.spectrum-InfieldButton:disabled`, `.spectrum-InfieldButton.spectrum-InfieldButton--quiet`. <br/>Used by `--mod-infield-button-background-color`. <br/>Defaults to `var(--spectrum-infield-button-background-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-infield-button-background-color-hover-disabled": {
+      "description": "Used by `--mod-infield-button-background-color-hover`. <br/>Defaults to `var(--spectrum-disabled-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-infield-button-background-color-down": {
+      "description": "Defined in `.spectrum-InfieldButton:disabled`, `.spectrum-InfieldButton.spectrum-InfieldButton--quiet`. <br/>Used by `--mod-infield-button-background-color`. <br/>Defaults to `var(--spectrum-infield-button-background-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-infield-button-background-color-down-disabled": {
+      "description": "Used by `--mod-infield-button-background-color-down`. <br/>Defaults to `var(--spectrum-disabled-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-infield-button-border-color": {
+      "description": "Defined in `.spectrum-InfieldButton:disabled`, `.spectrum-InfieldButton.spectrum-InfieldButton--quiet:disabled`. <br/>Defaults to `var(--mod-infield-button-border-color-quiet-disabled, transparent)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-infield-button-border-color-disabled": {
+      "description": "Used by `--mod-infield-button-border-color`. <br/>Defaults to `var(--spectrum-disabled-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-infield-button-icon-color": {
+      "description": "Defined in `.spectrum-InfieldButton:disabled`, `.spectrum-InfieldButton:hover`, `.spectrum-InfieldButton:active`. <br/>Used by `.spectrum-InfieldButton-icon`. <br/>Defaults to `var(--spectrum-infield-button-icon-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-infield-button-icon-color-disabled": {
+      "description": "Used by `--mod-infield-button-icon-color`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-infield-button-icon-color-hover": {
+      "description": "Defined in `.spectrum-InfieldButton:disabled`. <br/>Used by `--mod-infield-button-icon-color`. <br/>Defaults to `var(--spectrum-infield-button-icon-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-infield-button-icon-color-hover-disabled": {
+      "description": "Used by `--mod-infield-button-icon-color-hover`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-infield-button-icon-color-down": {
+      "description": "Defined in `.spectrum-InfieldButton:disabled`. <br/>Used by `--mod-infield-button-icon-color`. <br/>Defaults to `var(--spectrum-infield-button-icon-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-infield-button-icon-color-down-disabled": {
+      "description": "Used by `--mod-infield-button-icon-color-down`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-infield-button-icon-color-key-focus": {
+      "description": "Defined in `.spectrum-InfieldButton:disabled`. <br/>Defaults to `var(--mod-infield-button-icon-color-key-focus-disabled, var(--spectrum-disabled-content-color))`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-infield-button-icon-color-key-focus-disabled": {
+      "description": "Used by `--mod-infield-button-icon-color-key-focus`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-infield-button-background-color-quiet": {
+      "description": "Used by `--mod-infield-button-background-color`.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-infield-button-background-color-hover-quiet": {
+      "description": "Used by `--mod-infield-button-background-color-hover`.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-infield-button-background-color-down-quiet": {
+      "description": "Used by `--mod-infield-button-background-color-down`.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-infield-button-background-color-key-focus": {
+      "description": "Defined in `.spectrum-InfieldButton.spectrum-InfieldButton--quiet`. <br/>Defaults to `var(--mod-infield-button-background-color-key-focus-quiet, transparent)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-infield-button-background-color-key-focus-quiet": {
+      "description": "Used by `--mod-infield-button-background-color-key-focus`.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-infield-button-background-color-quiet-disabled": {
+      "description": "Used by `--mod-infield-button-background-color`.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-infield-button-border-color-quiet-disabled": {
+      "description": "Used by `--mod-infield-button-border-color`.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-infield-button-height": {
+      "description": "Used by `.spectrum-InfieldButton`. <br/>Defaults to `var(--spectrum-infield-button-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-infield-button-width": {
+      "description": "Used by `.spectrum-InfieldButton`, `.spectrum-InfieldButton-inline .spectrum-InfieldButton`, `.spectrum-InfieldButton-inline > .spectrum-InfieldButton.spectrum-InfieldButton--sizeS`. <br/>Defaults to `var(--spectrum-infield-button-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-infield-button-edge-to-fill": {
+      "description": "Used by `.spectrum-InfieldButton`, `.spectrum-InfieldButton-inline .spectrum-InfieldButton`. <br/>Defaults to `var(--spectrum-infield-button-edge-to-fill)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-infield-button-field-edge-to-icon": {
+      "description": "Defined in `.spectrum-InfieldButton-inline .spectrum-InfieldButton`. <br/>Used by `.spectrum-InfieldButton-icon`. <br/>Defaults to `var(--spectrum-infield-button-field-edge-to-disclosure-icon)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-infield-button-side-edge-to-fill": {
+      "description": "Used by `.spectrum-InfieldButton-inline .spectrum-InfieldButton`. <br/>Defaults to `var(--spectrum-infield-button-inline-edge-to-fill)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-infield-button-border-radius": {
+      "description": "Used by `.spectrum-InfieldButton-fill`. <br/>Defaults to `var(--spectrum-infield-button-border-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-infield-button-fill-padding": {
+      "description": "Used by `.spectrum-InfieldButton-fill`. <br/>Defaults to `var(--spectrum-infield-button-fill-padding)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-infield-button-fill-justify-content": {
+      "description": "Used by `.spectrum-InfieldButton-fill`. <br/>Defaults to `var(--spectrum-infield-button-fill-justify-content)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-infield-button-background-color": {
+      "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+      "description": "Defined in `.spectrum-InfieldButton`. <br/>Used by `.spectrum-InfieldButton-fill`. <br/>Defaults to `var(--spectrum-gray-100)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-infield-button-background-color-hover": {
+      "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+      "description": "Defined in `.spectrum-InfieldButton`. <br/>Used by `--mod-infield-button-background-color`. <br/>Defaults to `var(--spectrum-gray-200)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-infield-button-background-color-down": {
+      "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+      "description": "Defined in `.spectrum-InfieldButton`. <br/>Used by `--mod-infield-button-background-color`. <br/>Defaults to `var(--spectrum-gray-200)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-infield-button-icon-color": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-InfieldButton`. <br/>Used by `.spectrum-InfieldButton-icon`. <br/>Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-infield-button-icon-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-InfieldButton`. <br/>Used by `--mod-infield-button-icon-color`. <br/>Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-infield-button-icon-color-down": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-InfieldButton`. <br/>Used by `--mod-infield-button-icon-color`. <br/>Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-infield-button-height": {
+      "value": "48px",
+      "description": "Defined in `.spectrum-InfieldButton`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeS`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeL`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeXL`. <br/>Used by `.spectrum-InfieldButton`. <br/>Defaults to `var(--spectrum-component-height-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-infield-button-width": {
+      "value": "48px",
+      "description": "Defined in `.spectrum-InfieldButton`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeS`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeL`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeXL`. <br/>Used by `.spectrum-InfieldButton`, `.spectrum-InfieldButton-inline .spectrum-InfieldButton`, `.spectrum-InfieldButton-inline > .spectrum-InfieldButton.spectrum-InfieldButton--sizeS`. <br/>Defaults to `var(--spectrum-component-height-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-infield-button-border-radius": {
+      "value": "6px",
+      "description": "Defined in `.spectrum-InfieldButton`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeS`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeL`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeXL`. <br/>Used by `.spectrum-InfieldButton-fill`. <br/>Defaults to `var(--spectrum-corner-radius-small-size-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-infield-button-edge-to-fill": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-InfieldButton`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeS`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeL`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeXL`. <br/>Used by `.spectrum-InfieldButton`, `.spectrum-InfieldButton-inline .spectrum-InfieldButton`. <br/>Defaults to `var(--spectrum-in-field-button-edge-to-fill-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-in-field-button-edge-to-fill-medium": {
+      "value": "6px",
+      "description": "Used by `--spectrum-infield-button-edge-to-fill`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-infield-button-inline-field-edge-to-icon": {
+      "value": "var(--spectrum-field-edge-to-icon-300)",
+      "description": "Defined in `.spectrum-InfieldButton`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeS`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeL`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeXL`. <br/>Used by `--mod-infield-button-field-edge-to-icon`. <br/>Defaults to `var(--spectrum-field-edge-to-icon-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-infield-button-inline-edge-to-fill": {
+      "value": "var(--spectrum-in-field-button-side-edge-to-fill-extra-large)",
+      "description": "Defined in `.spectrum-InfieldButton`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeS`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeL`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeXL`. <br/>Used by `.spectrum-InfieldButton-inline .spectrum-InfieldButton`. <br/>Defaults to `var(--spectrum-in-field-button-side-edge-to-fill-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-in-field-button-side-edge-to-fill-medium": {
+      "description": "Used by `--spectrum-infield-button-inline-edge-to-fill`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-infield-button-fill-padding": {
+      "value": "0px",
+      "description": "Defined in `.spectrum-InfieldButton`. <br/>Used by `.spectrum-InfieldButton-fill`. <br/>Defaults to `0px`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-infield-button-field-edge-to-disclosure-icon": {
+      "value": "17px",
+      "description": "Defined in `.spectrum-InfieldButton`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeS`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeL`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeXL`. <br/>Used by `.spectrum-InfieldButton-icon`. <br/>Defaults to `var(--spectrum-field-edge-to-disclosure-icon-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-infield-button-fill-justify-content": {
+      "value": "center",
+      "description": "Defined in `.spectrum-InfieldButton`. <br/>Used by `.spectrum-InfieldButton-fill`. <br/>Defaults to `center`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-infield-button-downstate-perspective": {
+      "value": "24px",
+      "description": "Defined in `.spectrum-InfieldButton`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeS`. <br/>Used by `.spectrum-InfieldButton:active`. <br/>Defaults to `var(--spectrum-component-size-minimum-perspective-down)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-in-field-button-edge-to-fill-small": {
+      "value": "4px",
+      "description": "Used by `--spectrum-infield-button-edge-to-fill`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-in-field-button-side-edge-to-fill-small": {
+      "description": "Used by `--spectrum-infield-button-inline-edge-to-fill`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-in-field-button-edge-to-fill-large": {
+      "value": "8px",
+      "description": "Used by `--spectrum-infield-button-edge-to-fill`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-in-field-button-side-edge-to-fill-large": {
+      "description": "Used by `--spectrum-infield-button-inline-edge-to-fill`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-in-field-button-edge-to-fill-extra-large": {
+      "value": "8px",
+      "description": "Used by `--spectrum-infield-button-edge-to-fill`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-in-field-button-side-edge-to-fill-extra-large": {
+      "description": "Used by `--spectrum-infield-button-inline-edge-to-fill`.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-gray-100": {
+      "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+      "description": "Used by `--spectrum-infield-button-background-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-200": {
+      "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+      "description": "Used by `--spectrum-infield-button-background-color-hover`, `--spectrum-infield-button-background-color-down`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-infield-button-icon-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-infield-button-icon-color-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-down": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-infield-button-icon-color-down`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-component-height-100": {
+      "value": "32px",
+      "description": "Used by `--spectrum-infield-button-height`, `--spectrum-infield-button-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-small-size-medium": {
+      "value": "4px",
+      "description": "Used by `--spectrum-infield-button-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-edge-to-icon-100": {
+      "description": "Used by `--spectrum-infield-button-inline-field-edge-to-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-edge-to-disclosure-icon-100": {
+      "value": "11px",
+      "description": "Used by `--spectrum-infield-button-field-edge-to-disclosure-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-downstate-height": {
+      "description": "Used by `--spectrum-infield-button-downstate-perspective`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-downstate-width": {
+      "description": "Used by `--spectrum-infield-button-downstate-perspective`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-size-width-ratio-down": {
+      "value": "0.3333",
+      "description": "Used by `--spectrum-infield-button-downstate-perspective`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-disabled-background-color": {
+      "value": "var(--spectrum-gray-100)",
+      "description": "Used by `--mod-infield-button-background-color`, `--mod-infield-button-background-color-hover`, `--mod-infield-button-background-color-down`, `--mod-infield-button-border-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-disabled-content-color": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Used by `--mod-infield-button-icon-color`, `--mod-infield-button-icon-color-hover`, `--mod-infield-button-icon-color-down`, `--mod-infield-button-icon-color-key-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-component-height-75": {
+      "value": "24px",
+      "description": "Used by `--spectrum-infield-button-height`, `--spectrum-infield-button-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-small-size-small": {
+      "value": "3px",
+      "description": "Used by `--spectrum-infield-button-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-edge-to-disclosure-icon-75": {
+      "value": "7px",
+      "description": "Used by `--spectrum-infield-button-field-edge-to-disclosure-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-edge-to-icon-75": {
+      "description": "Used by `--spectrum-infield-button-inline-field-edge-to-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-size-minimum-perspective-down": {
+      "value": "24px",
+      "description": "Used by `--spectrum-infield-button-downstate-perspective`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-200": {
+      "value": "40px",
+      "description": "Used by `--spectrum-infield-button-height`, `--spectrum-infield-button-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-small-size-large": {
+      "value": "5px",
+      "description": "Used by `--spectrum-infield-button-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-edge-to-disclosure-icon-200": {
+      "value": "14px",
+      "description": "Used by `--spectrum-infield-button-field-edge-to-disclosure-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-edge-to-icon-200": {
+      "description": "Used by `--spectrum-infield-button-inline-field-edge-to-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-300": {
+      "value": "48px",
+      "description": "Used by `--spectrum-infield-button-height`, `--spectrum-infield-button-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-small-size-extra-large": {
+      "value": "6px",
+      "description": "Used by `--spectrum-infield-button-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-edge-to-disclosure-icon-300": {
+      "value": "17px",
+      "description": "Used by `--spectrum-infield-button-field-edge-to-disclosure-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-edge-to-icon-300": {
+      "description": "Used by `--spectrum-infield-button-inline-field-edge-to-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-size-difference-down": {
+      "value": "-2px",
+      "description": "Used by `.spectrum-InfieldButton:active`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-animation-duration-100": {
+      "description": "Used by `.spectrum-InfieldButton-fill`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {
+    "highcontrast-infield-button-background-color": {
+      "value": "var(--mod-infield-button-background-color, var(--spectrum-infield-button-background-color))",
+      "description": "Defined in `.spectrum-InfieldButton`, `.spectrum-InfieldButton:disabled`, `.spectrum-InfieldButton:not(:disabled):active, .spectrum-InfieldButton:not(:disabled):focus-visible`, `.spectrum-InfieldButton--quiet`, `.spectrum-InfieldButton--quiet:disabled`, `.spectrum-InfieldButton--quiet:not(:disabled):active, .spectrum-InfieldButton--quiet:not(:disabled):focus-visible`, `.spectrum-InfieldButton:not(:disabled):hover`, `.spectrum-InfieldButton--quiet:not(:disabled):hover`. <br/>Used by `.spectrum-InfieldButton-fill`. <br/>Defaults to `var(--mod-infield-button-background-color, var(--spectrum-infield-button-background-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-infield-button-icon-color": {
+      "value": "var(--mod-infield-button-icon-color, var(--spectrum-infield-button-icon-color))",
+      "description": "Defined in `.spectrum-InfieldButton`, `.spectrum-InfieldButton--quiet`, `.spectrum-InfieldButton--quiet:disabled`, `.spectrum-InfieldButton--quiet:not(:disabled):active, .spectrum-InfieldButton--quiet:not(:disabled):focus-visible`, `.spectrum-InfieldButton--quiet:not(:disabled):hover`. <br/>Used by `.spectrum-InfieldButton-icon`. <br/>Defaults to `var(--mod-infield-button-icon-color, var(--spectrum-infield-button-icon-color))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/infieldbutton/stories/infieldbutton.stories.js b/components/infieldbutton/stories/infieldbutton.stories.js
index 2b3a91d6faa..00b3d0e3c66 100644
--- a/components/infieldbutton/stories/infieldbutton.stories.js
+++ b/components/infieldbutton/stories/infieldbutton.stories.js
@@ -2,11 +2,13 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.
 import { Sizes, withDownStateDimensionCapture } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isActive, isDisabled, isHovered, isQuiet, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { InfieldButtonGroup } from "./infieldbutton.test.js";
 import { InfieldButtonGroupVariant, InfieldButtonIcons, Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * In-field buttons are used to represent actions within input fields. They’re currently used inside the [number field](/docs/components-stepper--docs).
  */
@@ -62,6 +64,10 @@ export default {
 		status: {
 			type: "migrated",
 		},
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 	decorators: [
 		withDownStateDimensionCapture,
diff --git a/components/infieldprogresscircle/dist/metadata.json b/components/infieldprogresscircle/dist/metadata.json
index ffc95f11390..3636c6d5520 100644
--- a/components/infieldprogresscircle/dist/metadata.json
+++ b/components/infieldprogresscircle/dist/metadata.json
@@ -7,19 +7,60 @@
     ".spectrum-InfieldProgressCircle--sizeS",
     ".spectrum-InfieldProgressCircle--sizeXL"
   ],
-  "modifiers": [],
-  "component": [
-    "--spectrum-in-field-progress-circle-edge-to-fill",
-    "--spectrum-in-field-progress-circle-size-100",
-    "--spectrum-in-field-progress-circle-size-200",
-    "--spectrum-in-field-progress-circle-size-300",
-    "--spectrum-in-field-progress-circle-size-75",
-    "--spectrum-infieldprogresscircle-padding-block"
-  ],
-  "global": ["--spectrum-progress-circle-thickness-small"],
-  "passthroughs": [
-    "--mod-progress-circle-size",
-    "--mod-progress-circle-thickness"
-  ],
-  "high-contrast": []
+  "modifiers": {},
+  "component": {
+    "spectrum-in-field-progress-circle-size-100": {
+      "value": "20px",
+      "description": "Used by `--mod-progress-circle-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-infieldprogresscircle-padding-block": {
+      "value": "1px",
+      "description": "Defined in `.spectrum-InfieldProgressCircle`. <br/>Used by `.spectrum-InfieldProgressCircle`. <br/>Defaults to `var(--spectrum-in-field-progress-circle-edge-to-fill)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-in-field-progress-circle-edge-to-fill": {
+      "value": "1px",
+      "description": "Used by `--spectrum-infieldprogresscircle-padding-block`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-in-field-progress-circle-size-75": {
+      "value": "16px",
+      "description": "Used by `--mod-progress-circle-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-in-field-progress-circle-size-200": {
+      "value": "22px",
+      "description": "Used by `--mod-progress-circle-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-in-field-progress-circle-size-300": {
+      "value": "26px",
+      "description": "Used by `--mod-progress-circle-size`.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-progress-circle-thickness-small": {
+      "value": "2px",
+      "description": "Used by `--mod-progress-circle-thickness`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {
+    "mod-progress-circle-thickness": {
+      "category": "Passthrough"
+    },
+    "mod-progress-circle-size": {
+      "category": "Passthrough"
+    }
+  },
+  "high-contrast": {}
 }
diff --git a/components/inlinealert/dist/metadata.json b/components/inlinealert/dist/metadata.json
index 81ebe4df638..9adb0b29623 100644
--- a/components/inlinealert/dist/metadata.json
+++ b/components/inlinealert/dist/metadata.json
@@ -26,101 +26,512 @@
     ".spectrum-InLineAlert.spectrum-InLineAlert--positive.spectrum-InLineAlert--subtle",
     ".spectrum-InLineAlert.spectrum-InLineAlert--subtle"
   ],
-  "modifiers": [
-    "--mod-inlinealert-background-color",
-    "--mod-inlinealert-border-and-icon-color",
-    "--mod-inlinealert-border-radius",
-    "--mod-inlinealert-border-width",
-    "--mod-inlinealert-content-color",
-    "--mod-inlinealert-content-font-family",
-    "--mod-inlinealert-content-font-size",
-    "--mod-inlinealert-content-font-style",
-    "--mod-inlinealert-content-font-weight",
-    "--mod-inlinealert-content-line-height",
-    "--mod-inlinealert-header-color",
-    "--mod-inlinealert-header-min-block-size",
-    "--mod-inlinealert-heading-font-family",
-    "--mod-inlinealert-heading-font-size",
-    "--mod-inlinealert-heading-font-style",
-    "--mod-inlinealert-heading-font-weight",
-    "--mod-inlinealert-heading-line-height",
-    "--mod-inlinealert-icon-size",
-    "--mod-inlinealert-min-inline-size",
-    "--mod-inlinealert-min-spacing-header-to-icon",
-    "--mod-inlinealert-spacing-content-link-button",
-    "--mod-inlinealert-spacing-edge-to-text",
-    "--mod-inlinealert-spacing-header-content"
-  ],
-  "component": [
-    "--spectrum-in-line-alert-minimum-width",
-    "--spectrum-inlinealert-background-color",
-    "--spectrum-inlinealert-border-and-icon-color",
-    "--spectrum-inlinealert-border-radius",
-    "--spectrum-inlinealert-border-width",
-    "--spectrum-inlinealert-content-color",
-    "--spectrum-inlinealert-content-font-family",
-    "--spectrum-inlinealert-content-font-size",
-    "--spectrum-inlinealert-content-font-style",
-    "--spectrum-inlinealert-content-font-weight",
-    "--spectrum-inlinealert-content-line-height",
-    "--spectrum-inlinealert-header-color",
-    "--spectrum-inlinealert-header-min-block-size",
-    "--spectrum-inlinealert-heading-font-family",
-    "--spectrum-inlinealert-heading-font-size",
-    "--spectrum-inlinealert-heading-font-style",
-    "--spectrum-inlinealert-heading-font-weight",
-    "--spectrum-inlinealert-heading-line-height",
-    "--spectrum-inlinealert-icon-size",
-    "--spectrum-inlinealert-min-inline-size",
-    "--spectrum-inlinealert-min-spacing-header-to-icon",
-    "--spectrum-inlinealert-spacing-content-link-button",
-    "--spectrum-inlinealert-spacing-edge-to-text",
-    "--spectrum-inlinealert-spacing-header-content"
-  ],
-  "global": [
-    "--spectrum-background-layer-2-color",
-    "--spectrum-black",
-    "--spectrum-body-color",
-    "--spectrum-body-line-height",
-    "--spectrum-body-sans-serif-font-style",
-    "--spectrum-body-sans-serif-font-weight",
-    "--spectrum-body-size-s",
-    "--spectrum-border-width-200",
-    "--spectrum-component-height-50",
-    "--spectrum-corner-radius-700",
-    "--spectrum-heading-color",
-    "--spectrum-heading-line-height",
-    "--spectrum-heading-sans-serif-font-style",
-    "--spectrum-heading-sans-serif-font-weight",
-    "--spectrum-heading-size-xxs",
-    "--spectrum-informative-background-color-default",
-    "--spectrum-informative-subtle-background-color-default",
-    "--spectrum-informative-visual-color",
-    "--spectrum-negative-background-color-default",
-    "--spectrum-negative-subtle-background-color-default",
-    "--spectrum-negative-visual-color",
-    "--spectrum-neutral-background-color-default",
-    "--spectrum-neutral-subtle-background-color-default",
-    "--spectrum-neutral-visual-color",
-    "--spectrum-notice-background-color-default",
-    "--spectrum-notice-subtle-background-color-default",
-    "--spectrum-notice-visual-color",
-    "--spectrum-positive-background-color-default",
-    "--spectrum-positive-subtle-background-color-default",
-    "--spectrum-positive-visual-color",
-    "--spectrum-sans-font-family-stack",
-    "--spectrum-spacing-100",
-    "--spectrum-spacing-200",
-    "--spectrum-spacing-300",
-    "--spectrum-white",
-    "--spectrum-workflow-icon-size-100"
-  ],
-  "passthroughs": [],
-  "high-contrast": [
-    "--highcontrast-inlinealert-background-color",
-    "--highcontrast-inlinealert-border-and-icon-color",
-    "--highcontrast-inlinealert-border-width",
-    "--highcontrast-inlinealert-content-color",
-    "--highcontrast-inlinealert-header-color"
-  ]
+  "modifiers": {
+    "mod-inlinealert-min-inline-size": {
+      "description": "Used by `.spectrum-InLineAlert`. <br/>Defaults to `var(--spectrum-inlinealert-min-inline-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-inlinealert-spacing-edge-to-text": {
+      "description": "Used by `.spectrum-InLineAlert`. <br/>Defaults to `var(--spectrum-inlinealert-spacing-edge-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-inlinealert-border-width": {
+      "description": "Used by `.spectrum-InLineAlert`. <br/>Defaults to `var(--spectrum-inlinealert-border-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-inlinealert-border-radius": {
+      "description": "Used by `.spectrum-InLineAlert`. <br/>Defaults to `var(--spectrum-inlinealert-border-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-inlinealert-background-color": {
+      "description": "Used by `.spectrum-InLineAlert`. <br/>Defaults to `var(--spectrum-inlinealert-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-inlinealert-border-and-icon-color": {
+      "description": "Used by `.spectrum-InLineAlert`. <br/>Defaults to `var(--spectrum-inlinealert-border-and-icon-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-inlinealert-icon-size": {
+      "description": "Used by `.spectrum-InLineAlert-icon`. <br/>Defaults to `var(--spectrum-inlinealert-icon-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-inlinealert-spacing-header-content": {
+      "description": "Used by `.spectrum-InLineAlert-header`. <br/>Defaults to `var(--spectrum-inlinealert-spacing-header-content)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-inlinealert-heading-font-weight": {
+      "description": "Used by `.spectrum-InLineAlert-header`. <br/>Defaults to `var(--spectrum-inlinealert-heading-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-inlinealert-heading-font-family": {
+      "description": "Used by `.spectrum-InLineAlert-header`. <br/>Defaults to `var(--spectrum-inlinealert-heading-font-family)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-inlinealert-heading-font-style": {
+      "description": "Used by `.spectrum-InLineAlert-header`. <br/>Defaults to `var(--spectrum-inlinealert-heading-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-inlinealert-heading-font-size": {
+      "description": "Used by `.spectrum-InLineAlert-header`. <br/>Defaults to `var(--spectrum-inlinealert-heading-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-inlinealert-heading-line-height": {
+      "description": "Used by `.spectrum-InLineAlert-header`. <br/>Defaults to `var(--spectrum-inlinealert-heading-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-inlinealert-header-min-block-size": {
+      "description": "Used by `.spectrum-InLineAlert-header`. <br/>Defaults to `var(--spectrum-inlinealert-header-min-block-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-inlinealert-header-color": {
+      "description": "Used by `.spectrum-InLineAlert-header`. <br/>Defaults to `var(--spectrum-inlinealert-header-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-inlinealert-min-spacing-header-to-icon": {
+      "description": "Used by `.spectrum-InLineAlert-content, .spectrum-InLineAlert-header`. <br/>Defaults to `var(--spectrum-inlinealert-min-spacing-header-to-icon)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-inlinealert-content-font-weight": {
+      "description": "Used by `.spectrum-InLineAlert-content`. <br/>Defaults to `var(--spectrum-inlinealert-content-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-inlinealert-content-font-family": {
+      "description": "Used by `.spectrum-InLineAlert-content`. <br/>Defaults to `var(--spectrum-inlinealert-content-font-family)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-inlinealert-content-font-style": {
+      "description": "Used by `.spectrum-InLineAlert-content`. <br/>Defaults to `var(--spectrum-inlinealert-content-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-inlinealert-content-font-size": {
+      "description": "Used by `.spectrum-InLineAlert-content`. <br/>Defaults to `var(--spectrum-inlinealert-content-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-inlinealert-content-line-height": {
+      "description": "Used by `.spectrum-InLineAlert-content`. <br/>Defaults to `var(--spectrum-inlinealert-content-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-inlinealert-content-color": {
+      "description": "Used by `.spectrum-InLineAlert-content`. <br/>Defaults to `var(--spectrum-inlinealert-content-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-inlinealert-spacing-content-link-button": {
+      "description": "Used by `.spectrum-InLineAlert-footer`. <br/>Defaults to `var(--spectrum-inlinealert-spacing-content-link-button)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-inlinealert-heading-font-family": {
+      "value": "var(--spectrum-sans-font-family-stack)",
+      "description": "Defined in `.spectrum-InLineAlert`. <br/>Used by `.spectrum-InLineAlert-header`. <br/>Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-inlinealert-heading-font-weight": {
+      "value": "800",
+      "description": "Defined in `.spectrum-InLineAlert`. <br/>Used by `.spectrum-InLineAlert-header`. <br/>Defaults to `var(--spectrum-heading-sans-serif-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-inlinealert-heading-font-style": {
+      "value": "normal",
+      "description": "Defined in `.spectrum-InLineAlert`. <br/>Used by `.spectrum-InLineAlert-header`. <br/>Defaults to `var(--spectrum-heading-sans-serif-font-style)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-inlinealert-heading-font-size": {
+      "value": "var(--spectrum-font-size-100)",
+      "description": "Defined in `.spectrum-InLineAlert`. <br/>Used by `.spectrum-InLineAlert-header`. <br/>Defaults to `var(--spectrum-heading-size-xxs)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-inlinealert-heading-line-height": {
+      "value": "1.3",
+      "description": "Defined in `.spectrum-InLineAlert`. <br/>Used by `.spectrum-InLineAlert-header`. <br/>Defaults to `var(--spectrum-heading-line-height)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-inlinealert-content-font-family": {
+      "value": "var(--spectrum-sans-font-family-stack)",
+      "description": "Defined in `.spectrum-InLineAlert`. <br/>Used by `.spectrum-InLineAlert-content`. <br/>Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-inlinealert-content-font-weight": {
+      "value": "400",
+      "description": "Defined in `.spectrum-InLineAlert`. <br/>Used by `.spectrum-InLineAlert-content`. <br/>Defaults to `var(--spectrum-body-sans-serif-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-inlinealert-content-font-style": {
+      "value": "normal",
+      "description": "Defined in `.spectrum-InLineAlert`. <br/>Used by `.spectrum-InLineAlert-content`. <br/>Defaults to `var(--spectrum-body-sans-serif-font-style)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-inlinealert-content-font-size": {
+      "value": "var(--spectrum-font-size-100)",
+      "description": "Defined in `.spectrum-InLineAlert`. <br/>Used by `.spectrum-InLineAlert-content`. <br/>Defaults to `var(--spectrum-body-size-s)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-inlinealert-content-line-height": {
+      "value": "1.5",
+      "description": "Defined in `.spectrum-InLineAlert`. <br/>Used by `.spectrum-InLineAlert-content`. <br/>Defaults to `var(--spectrum-body-line-height)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-inlinealert-border-width": {
+      "value": "0px",
+      "description": "Defined in `.spectrum-InLineAlert`, `.spectrum-InLineAlert.spectrum-InLineAlert--bold, .spectrum-InLineAlert.spectrum-InLineAlert--subtle`. <br/>Used by `.spectrum-InLineAlert`. <br/>Defaults to `0px`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-inlinealert-border-radius": {
+      "value": "10px",
+      "description": "Defined in `.spectrum-InLineAlert`. <br/>Used by `.spectrum-InLineAlert`. <br/>Defaults to `var(--spectrum-corner-radius-700)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-inlinealert-icon-size": {
+      "value": "20px",
+      "description": "Defined in `.spectrum-InLineAlert`. <br/>Used by `.spectrum-InLineAlert-icon`. <br/>Defaults to `var(--spectrum-workflow-icon-size-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-inlinealert-min-inline-size": {
+      "value": "240px",
+      "description": "Defined in `.spectrum-InLineAlert`. <br/>Used by `.spectrum-InLineAlert`. <br/>Defaults to `var(--spectrum-in-line-alert-minimum-width)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-in-line-alert-minimum-width": {
+      "value": "240px",
+      "description": "Used by `--spectrum-inlinealert-min-inline-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-inlinealert-header-min-block-size": {
+      "value": "20px",
+      "description": "Defined in `.spectrum-InLineAlert`. <br/>Used by `.spectrum-InLineAlert-header`. <br/>Defaults to `var(--spectrum-component-height-50)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-inlinealert-spacing-edge-to-text": {
+      "value": "16px",
+      "description": "Defined in `.spectrum-InLineAlert`. <br/>Used by `.spectrum-InLineAlert`. <br/>Defaults to `var(--spectrum-spacing-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-inlinealert-min-spacing-header-to-icon": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-InLineAlert`. <br/>Used by `.spectrum-InLineAlert-content, .spectrum-InLineAlert-header`. <br/>Defaults to `var(--spectrum-spacing-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-inlinealert-spacing-header-content": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-InLineAlert`. <br/>Used by `.spectrum-InLineAlert-header`. <br/>Defaults to `var(--spectrum-spacing-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-inlinealert-spacing-content-link-button": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-InLineAlert`. <br/>Used by `.spectrum-InLineAlert-footer`. <br/>Defaults to `var(--spectrum-spacing-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-inlinealert-background-color": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-InLineAlert`, `.spectrum-InLineAlert.spectrum-InLineAlert--info.spectrum-InLineAlert--subtle`, `.spectrum-InLineAlert.spectrum-InLineAlert--info.spectrum-InLineAlert--bold`, `.spectrum-InLineAlert.spectrum-InLineAlert--notice.spectrum-InLineAlert--subtle`, `.spectrum-InLineAlert.spectrum-InLineAlert--notice.spectrum-InLineAlert--bold`, `.spectrum-InLineAlert.spectrum-InLineAlert--positive.spectrum-InLineAlert--subtle`, `.spectrum-InLineAlert.spectrum-InLineAlert--positive.spectrum-InLineAlert--bold`, `.spectrum-InLineAlert.spectrum-InLineAlert--negative.spectrum-InLineAlert--subtle`, `.spectrum-InLineAlert.spectrum-InLineAlert--negative.spectrum-InLineAlert--bold`, `.spectrum-InLineAlert.spectrum-InLineAlert--neutral.spectrum-InLineAlert--subtle`, `.spectrum-InLineAlert.spectrum-InLineAlert--neutral.spectrum-InLineAlert--bold`. <br/>Used by `.spectrum-InLineAlert`. <br/>Defaults to `var(--spectrum-neutral-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-inlinealert-border-and-icon-color": {
+      "value": "var(--spectrum-gray-500)",
+      "description": "Defined in `.spectrum-InLineAlert`, `.spectrum-InLineAlert.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle, .spectrum-InLineAlert--notice)`, `.spectrum-InLineAlert.spectrum-InLineAlert--info`, `.spectrum-InLineAlert.spectrum-InLineAlert--info.spectrum-InLineAlert--subtle`, `.spectrum-InLineAlert.spectrum-InLineAlert--notice`, `.spectrum-InLineAlert.spectrum-InLineAlert--notice.spectrum-InLineAlert--subtle`, `.spectrum-InLineAlert.spectrum-InLineAlert--notice.spectrum-InLineAlert--bold`, `.spectrum-InLineAlert.spectrum-InLineAlert--positive`, `.spectrum-InLineAlert.spectrum-InLineAlert--positive.spectrum-InLineAlert--subtle`, `.spectrum-InLineAlert.spectrum-InLineAlert--negative`, `.spectrum-InLineAlert.spectrum-InLineAlert--negative.spectrum-InLineAlert--subtle`, `.spectrum-InLineAlert.spectrum-InLineAlert--neutral`, `.spectrum-InLineAlert.spectrum-InLineAlert--neutral.spectrum-InLineAlert--subtle`. <br/>Used by `.spectrum-InLineAlert`, `.spectrum-InLineAlert-icon`. <br/>Defaults to `var(--spectrum-neutral-visual-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-inlinealert-header-color": {
+      "value": "rgb(255, 255, 255)",
+      "description": "Defined in `.spectrum-InLineAlert`, `.spectrum-InLineAlert.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle, .spectrum-InLineAlert--notice)`. <br/>Used by `.spectrum-InLineAlert-header`. <br/>Defaults to `var(--spectrum-white)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-inlinealert-content-color": {
+      "value": "rgb(255, 255, 255)",
+      "description": "Defined in `.spectrum-InLineAlert`, `.spectrum-InLineAlert.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle, .spectrum-InLineAlert--notice)`. <br/>Used by `.spectrum-InLineAlert-content`. <br/>Defaults to `var(--spectrum-white)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-sans-font-family-stack": {
+      "description": "Used by `--spectrum-inlinealert-heading-font-family`, `--spectrum-inlinealert-content-font-family`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-sans-serif-font-weight": {
+      "value": "800",
+      "description": "Used by `--spectrum-inlinealert-heading-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-sans-serif-font-style": {
+      "value": "normal",
+      "description": "Used by `--spectrum-inlinealert-heading-font-style`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-size-xxs": {
+      "value": "var(--spectrum-font-size-100)",
+      "description": "Used by `--spectrum-inlinealert-heading-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-line-height": {
+      "value": "1.3",
+      "description": "Used by `--spectrum-inlinealert-heading-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-sans-serif-font-weight": {
+      "value": "400",
+      "description": "Used by `--spectrum-inlinealert-content-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-sans-serif-font-style": {
+      "value": "normal",
+      "description": "Used by `--spectrum-inlinealert-content-font-style`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-size-s": {
+      "value": "var(--spectrum-font-size-100)",
+      "description": "Used by `--spectrum-inlinealert-content-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-line-height": {
+      "value": "1.5",
+      "description": "Used by `--spectrum-inlinealert-content-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-border-width-200": {
+      "value": "2px",
+      "description": "Used by `--spectrum-inlinealert-border-width`, `--highcontrast-inlinealert-border-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-700": {
+      "value": "10px",
+      "description": "Used by `--spectrum-inlinealert-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-100": {
+      "value": "20px",
+      "description": "Used by `--spectrum-inlinealert-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-50": {
+      "value": "20px",
+      "description": "Used by `--spectrum-inlinealert-header-min-block-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-300": {
+      "value": "16px",
+      "description": "Used by `--spectrum-inlinealert-spacing-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-100": {
+      "value": "8px",
+      "description": "Used by `--spectrum-inlinealert-min-spacing-header-to-icon`, `--spectrum-inlinealert-spacing-header-content`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-200": {
+      "value": "12px",
+      "description": "Used by `--spectrum-inlinealert-spacing-content-link-button`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-background-layer-2-color": {
+      "value": "var(--spectrum-gray-25)",
+      "description": "Used by `--spectrum-inlinealert-background-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-visual-color": {
+      "value": "var(--spectrum-gray-500)",
+      "description": "Used by `--spectrum-inlinealert-border-and-icon-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-heading-color": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-inlinealert-header-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-body-color": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-inlinealert-content-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-white": {
+      "value": "rgb(255, 255, 255)",
+      "description": "Used by `--spectrum-inlinealert-header-color`, `--spectrum-inlinealert-content-color`, `--spectrum-inlinealert-border-and-icon-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-informative-visual-color": {
+      "value": "var(--spectrum-informative-color-800)",
+      "description": "Used by `--spectrum-inlinealert-border-and-icon-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-informative-subtle-background-color-default": {
+      "value": "var(--spectrum-informative-color-200)",
+      "description": "Used by `--spectrum-inlinealert-background-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-informative-background-color-default": {
+      "value": "var(--spectrum-informative-color-900)",
+      "description": "Used by `--spectrum-inlinealert-background-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-notice-visual-color": {
+      "value": "var(--spectrum-notice-color-800)",
+      "description": "Used by `--spectrum-inlinealert-border-and-icon-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-notice-subtle-background-color-default": {
+      "value": "var(--spectrum-notice-color-200)",
+      "description": "Used by `--spectrum-inlinealert-background-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-notice-background-color-default": {
+      "value": "var(--spectrum-notice-color-600)",
+      "description": "Used by `--spectrum-inlinealert-background-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-black": {
+      "value": "rgb(0, 0, 0)",
+      "description": "Used by `--spectrum-inlinealert-border-and-icon-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-positive-visual-color": {
+      "value": "var(--spectrum-positive-color-800)",
+      "description": "Used by `--spectrum-inlinealert-border-and-icon-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-positive-subtle-background-color-default": {
+      "value": "var(--spectrum-positive-color-200)",
+      "description": "Used by `--spectrum-inlinealert-background-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-positive-background-color-default": {
+      "value": "var(--spectrum-positive-color-900)",
+      "description": "Used by `--spectrum-inlinealert-background-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-visual-color": {
+      "value": "var(--spectrum-negative-color-800)",
+      "description": "Used by `--spectrum-inlinealert-border-and-icon-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-subtle-background-color-default": {
+      "value": "var(--spectrum-negative-color-200)",
+      "description": "Used by `--spectrum-inlinealert-background-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-background-color-default": {
+      "value": "var(--spectrum-negative-color-900)",
+      "description": "Used by `--spectrum-inlinealert-background-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-subtle-background-color-default": {
+      "value": "var(--spectrum-gray-100)",
+      "description": "Used by `--spectrum-inlinealert-background-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-background-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-inlinealert-background-color`.",
+      "control": "color",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {
+    "highcontrast-inlinealert-border-width": {
+      "value": "var(--mod-inlinealert-border-width, var(--spectrum-inlinealert-border-width))",
+      "description": "Defined in `.spectrum-InLineAlert.spectrum-InLineAlert--bold, .spectrum-InLineAlert.spectrum-InLineAlert--subtle`. <br/>Used by `.spectrum-InLineAlert`. <br/>Defaults to `var(--mod-inlinealert-border-width, var(--spectrum-inlinealert-border-width))`, if not set.",
+      "control": "text"
+    },
+    "highcontrast-inlinealert-background-color": {
+      "value": "var(--mod-inlinealert-background-color, var(--spectrum-inlinealert-background-color))",
+      "description": "Defined in `.spectrum-InLineAlert`. <br/>Used by `.spectrum-InLineAlert`. <br/>Defaults to `var(--mod-inlinealert-background-color, var(--spectrum-inlinealert-background-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-inlinealert-border-and-icon-color": {
+      "value": "var(--spectrum-inlinealert-border-and-icon-color)",
+      "description": "Defined in `.spectrum-InLineAlert`. <br/>Used by `.spectrum-InLineAlert`, `.spectrum-InLineAlert-icon`. <br/>Defaults to `var(--spectrum-inlinealert-border-and-icon-color)`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-inlinealert-header-color": {
+      "value": "var(--mod-inlinealert-header-color, var(--spectrum-inlinealert-header-color))",
+      "description": "Defined in `.spectrum-InLineAlert`. <br/>Used by `.spectrum-InLineAlert-header`. <br/>Defaults to `var(--mod-inlinealert-header-color, var(--spectrum-inlinealert-header-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-inlinealert-content-color": {
+      "value": "var(--mod-inlinealert-content-color, var(--spectrum-inlinealert-content-color))",
+      "description": "Defined in `.spectrum-InLineAlert`. <br/>Used by `.spectrum-InLineAlert-content`. <br/>Defaults to `var(--mod-inlinealert-content-color, var(--spectrum-inlinealert-content-color))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/inlinealert/stories/inlinealert.stories.js b/components/inlinealert/stories/inlinealert.stories.js
index 31f6ac0414f..45d4f9e679b 100644
--- a/components/inlinealert/stories/inlinealert.stories.js
+++ b/components/inlinealert/stories/inlinealert.stories.js
@@ -1,9 +1,11 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { InlineAlertGroup } from "./inlinealert.test.js";
 import { AlertsWithStyleOptions } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * In-line alerts display a non-modal message associated with objects in a view. These are often used in form validation, providing a place to aggregate feedback related to multiple fields.
  * 
@@ -104,6 +106,10 @@ export default {
 		status: {
 			type: "migrated",
 		},
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 	tags: ["migrated"],
 };
diff --git a/components/link/dist/metadata.json b/components/link/dist/metadata.json
index 9c83915a752..fcf77ccfbe7 100644
--- a/components/link/dist/metadata.json
+++ b/components/link/dist/metadata.json
@@ -15,67 +15,320 @@
     ".spectrum-Link:lang(ko)",
     ".spectrum-Link:lang(zh)"
   ],
-  "modifiers": [
-    "--mod-link-animation-duration",
-    "--mod-link-inline-font-weight",
-    "--mod-link-line-height-cjk",
-    "--mod-link-text-color",
-    "--mod-link-text-color-active",
-    "--mod-link-text-color-black",
-    "--mod-link-text-color-focus",
-    "--mod-link-text-color-hover",
-    "--mod-link-text-color-secondary-active",
-    "--mod-link-text-color-secondary-default",
-    "--mod-link-text-color-secondary-focus",
-    "--mod-link-text-color-secondary-hover",
-    "--mod-link-text-color-white"
-  ],
-  "component": [
-    "--spectrum-link-corner-radius",
-    "--spectrum-link-default-font-family",
-    "--spectrum-link-focus-indicator-color",
-    "--spectrum-link-focus-indicator-gap",
-    "--spectrum-link-focus-indicator-thickness",
-    "--spectrum-link-font-size",
-    "--spectrum-link-font-style",
-    "--spectrum-link-font-weight",
-    "--spectrum-link-inline-font-weight",
-    "--spectrum-link-line-height",
-    "--spectrum-link-line-height-cjk",
-    "--spectrum-link-text-underline-gap",
-    "--spectrum-link-text-underline-thickness"
-  ],
-  "global": [
-    "--spectrum-accent-content-color-default",
-    "--spectrum-accent-content-color-down",
-    "--spectrum-accent-content-color-hover",
-    "--spectrum-accent-content-color-key-focus",
-    "--spectrum-animation-duration-100",
-    "--spectrum-black",
-    "--spectrum-cjk-line-height-100",
-    "--spectrum-corner-radius-100",
-    "--spectrum-default-font-style",
-    "--spectrum-focus-indicator-color",
-    "--spectrum-focus-indicator-gap",
-    "--spectrum-focus-indicator-thickness",
-    "--spectrum-font-size-100",
-    "--spectrum-line-height-100",
-    "--spectrum-medium-font-weight",
-    "--spectrum-neutral-content-color-default",
-    "--spectrum-neutral-content-color-down",
-    "--spectrum-neutral-content-color-hover",
-    "--spectrum-neutral-content-color-key-focus",
-    "--spectrum-regular-font-weight",
-    "--spectrum-sans-font-family-stack",
-    "--spectrum-static-black-focus-indicator-color",
-    "--spectrum-static-white-focus-indicator-color",
-    "--spectrum-text-underline-gap",
-    "--spectrum-text-underline-thickness",
-    "--spectrum-white"
-  ],
-  "passthroughs": [],
-  "high-contrast": [
-    "--highcontrast-link-focus-indicator-color",
-    "--highcontrast-link-text-color"
-  ]
+  "modifiers": {
+    "mod-link-animation-duration": {
+      "description": "Used by `.spectrum-Link`. <br/>Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-link-text-color": {
+      "description": "Defined in `.spectrum-Link:active`, `.spectrum-Link:focus-visible`, `.spectrum-Link--secondary`, `.spectrum-Link:hover`, `.spectrum-Link--staticWhite`, `.spectrum-Link--staticBlack`. <br/>Used by `.spectrum-Link`. <br/>Defaults to `var(--spectrum-accent-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-link-text-color-active": {
+      "description": "Defined in `.spectrum-Link--secondary`, `.spectrum-Link--staticWhite`, `.spectrum-Link--staticBlack`. <br/>Used by `--mod-link-text-color`. <br/>Defaults to `var(--spectrum-accent-content-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-link-text-color-focus": {
+      "description": "Defined in `.spectrum-Link--secondary`, `.spectrum-Link--staticWhite`, `.spectrum-Link--staticBlack`. <br/>Used by `--mod-link-text-color`. <br/>Defaults to `var(--spectrum-accent-content-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-link-line-height-cjk": {
+      "description": "Used by `.spectrum-Link:lang(ja), .spectrum-Link:lang(ko), .spectrum-Link:lang(zh)`. <br/>Defaults to `var(--spectrum-link-line-height-cjk)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-link-text-color-secondary-default": {
+      "description": "Used by `--mod-link-text-color`. <br/>Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-link-text-color-hover": {
+      "description": "Defined in `.spectrum-Link--secondary`, `.spectrum-Link--staticWhite`, `.spectrum-Link--staticBlack`. <br/>Used by `--mod-link-text-color`. <br/>Defaults to `var(--spectrum-accent-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-link-text-color-secondary-hover": {
+      "description": "Used by `--mod-link-text-color-hover`. <br/>Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-link-text-color-secondary-active": {
+      "description": "Used by `--mod-link-text-color-active`. <br/>Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-link-text-color-secondary-focus": {
+      "description": "Used by `--mod-link-text-color-focus`. <br/>Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-link-inline-font-weight": {
+      "description": "Used by `--spectrum-link-font-weight`. <br/>Defaults to `var(--spectrum-link-inline-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-link-text-color-white": {
+      "description": "Used by `--mod-link-text-color`, `--mod-link-text-color-hover`, `--mod-link-text-color-active`, `--mod-link-text-color-focus`. <br/>Defaults to `var(--spectrum-white)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-link-text-color-black": {
+      "description": "Used by `--mod-link-text-color`, `--mod-link-text-color-hover`, `--mod-link-text-color-active`, `--mod-link-text-color-focus`. <br/>Defaults to `var(--spectrum-black)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-link-focus-indicator-color": {
+      "value": "rgb(0, 0, 0)",
+      "description": "Defined in `.spectrum-Link`, `.spectrum-Link--staticWhite`, `.spectrum-Link--staticBlack`. <br/>Used by `.spectrum-Link:focus-visible`. <br/>Defaults to `var(--spectrum-static-black-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-link-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Link`. <br/>Used by `.spectrum-Link:focus-visible`. <br/>Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-link-focus-indicator-gap": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Link`. <br/>Used by `.spectrum-Link:focus-visible`. <br/>Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-link-corner-radius": {
+      "value": "4px",
+      "description": "Defined in `.spectrum-Link`. <br/>Used by `.spectrum-Link:focus-visible`. <br/>Defaults to `var(--spectrum-corner-radius-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-link-default-font-family": {
+      "value": "var(--spectrum-sans-font-family-stack)",
+      "description": "Defined in `.spectrum-Link`. <br/>Used by `.spectrum-Link`. <br/>Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-link-line-height": {
+      "value": "1.3",
+      "description": "Defined in `.spectrum-Link`. <br/>Used by `.spectrum-Link`. <br/>Defaults to `var(--spectrum-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-link-line-height-cjk": {
+      "value": "1.5",
+      "description": "Defined in `.spectrum-Link`. <br/>Used by `.spectrum-Link:lang(ja), .spectrum-Link:lang(ko), .spectrum-Link:lang(zh)`. <br/>Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-link-font-size": {
+      "value": "14px",
+      "description": "Defined in `.spectrum-Link`. <br/>Used by `.spectrum-Link`. <br/>Defaults to `var(--spectrum-font-size-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-link-font-style": {
+      "value": "normal",
+      "description": "Defined in `.spectrum-Link`. <br/>Used by `.spectrum-Link`. <br/>Defaults to `var(--spectrum-default-font-style)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-link-font-weight": {
+      "value": "var(--mod-link-inline-font-weight, var(--spectrum-link-inline-font-weight))",
+      "description": "Defined in `.spectrum-Link`, `.spectrum-Link--inline`. <br/>Used by `.spectrum-Link`. <br/>Defaults to `var(--mod-link-inline-font-weight, var(--spectrum-link-inline-font-weight))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-link-text-underline-thickness": {
+      "value": "1px",
+      "description": "Defined in `.spectrum-Link`. <br/>Used by `.spectrum-Link`. <br/>Defaults to `var(--spectrum-text-underline-thickness)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-link-text-underline-gap": {
+      "value": "1px",
+      "description": "Defined in `.spectrum-Link`. <br/>Used by `.spectrum-Link`. <br/>Defaults to `var(--spectrum-text-underline-gap)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-link-inline-font-weight": {
+      "value": "400",
+      "description": "Defined in `.spectrum-Link`. <br/>Used by `--spectrum-link-font-weight`. <br/>Defaults to `var(--spectrum-regular-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-focus-indicator-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Used by `--spectrum-link-focus-indicator-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Used by `--spectrum-link-focus-indicator-thickness`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-gap": {
+      "value": "2px",
+      "description": "Used by `--spectrum-link-focus-indicator-gap`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-100": {
+      "value": "4px",
+      "description": "Used by `--spectrum-link-corner-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-sans-font-family-stack": {
+      "description": "Used by `--spectrum-link-default-font-family`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-line-height-100": {
+      "value": "1.3",
+      "description": "Used by `--spectrum-link-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-cjk-line-height-100": {
+      "value": "1.5",
+      "description": "Used by `--spectrum-link-line-height-cjk`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-100": {
+      "value": "14px",
+      "description": "Used by `--spectrum-link-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-default-font-style": {
+      "value": "normal",
+      "description": "Used by `--spectrum-link-font-style`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-medium-font-weight": {
+      "value": "500",
+      "description": "Used by `--spectrum-link-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-underline-thickness": {
+      "value": "1px",
+      "description": "Used by `--spectrum-link-text-underline-thickness`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-underline-gap": {
+      "value": "1px",
+      "description": "Used by `--spectrum-link-text-underline-gap`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-regular-font-weight": {
+      "value": "400",
+      "description": "Used by `--spectrum-link-inline-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-animation-duration-100": {
+      "description": "Used by `.spectrum-Link`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-accent-content-color-default": {
+      "value": "var(--spectrum-accent-color-900)",
+      "description": "Used by `.spectrum-Link`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-accent-content-color-down": {
+      "value": "var(--spectrum-accent-color-1000)",
+      "description": "Used by `--mod-link-text-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-accent-content-color-key-focus": {
+      "value": "var(--spectrum-accent-color-1000)",
+      "description": "Used by `--mod-link-text-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--mod-link-text-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--mod-link-text-color-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-down": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--mod-link-text-color-active`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-key-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--mod-link-text-color-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-accent-content-color-hover": {
+      "value": "var(--spectrum-accent-color-1000)",
+      "description": "Used by `--mod-link-text-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-white": {
+      "value": "rgb(255, 255, 255)",
+      "description": "Used by `--mod-link-text-color`, `--mod-link-text-color-hover`, `--mod-link-text-color-active`, `--mod-link-text-color-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-static-white-focus-indicator-color": {
+      "value": "rgb(255, 255, 255)",
+      "description": "Used by `--spectrum-link-focus-indicator-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-black": {
+      "value": "rgb(0, 0, 0)",
+      "description": "Used by `--mod-link-text-color`, `--mod-link-text-color-hover`, `--mod-link-text-color-active`, `--mod-link-text-color-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-static-black-focus-indicator-color": {
+      "value": "rgb(0, 0, 0)",
+      "description": "Used by `--spectrum-link-focus-indicator-color`.",
+      "control": "color",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {
+    "highcontrast-link-text-color": {
+      "value": "var(--mod-link-text-color, var(--spectrum-accent-content-color-default))",
+      "description": "Defined in `.spectrum-Link`. <br/>Used by `.spectrum-Link`. <br/>Defaults to `var(--mod-link-text-color, var(--spectrum-accent-content-color-default))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-link-focus-indicator-color": {
+      "value": "var(--spectrum-link-focus-indicator-color)",
+      "description": "Defined in `.spectrum-Link`. <br/>Used by `.spectrum-Link:focus-visible`. <br/>Defaults to `var(--spectrum-link-focus-indicator-color)`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/link/stories/link.stories.js b/components/link/stories/link.stories.js
index e747752b695..1f51da4dd23 100644
--- a/components/link/stories/link.stories.js
+++ b/components/link/stories/link.stories.js
@@ -1,10 +1,12 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isActive, isFocused, isHovered, isQuiet, staticColor } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { LinkGroup } from "./link.test.js";
 import { LinkGroupText, MultilineText, TemplateWithFillerText } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * A link allows users to navigate to a different location. They can be presented in-line inside a paragraph or as standalone text.
  */
@@ -92,6 +94,10 @@ export default {
 		status: {
 			type: "migrated",
 		},
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 	tags: ["migrated"],
 };
diff --git a/components/logicbutton/dist/metadata.json b/components/logicbutton/dist/metadata.json
index 195d8c87082..0129d11352f 100644
--- a/components/logicbutton/dist/metadata.json
+++ b/components/logicbutton/dist/metadata.json
@@ -6,102 +6,441 @@
     ".spectrum-LogicButton--and:hover:not([disabled])",
     ".spectrum-LogicButton--or",
     ".spectrum-LogicButton--or:hover:not([disabled])",
-    ".spectrum-LogicButton.is-disabled",
     ".spectrum-LogicButton::-moz-focus-inner",
     ".spectrum-LogicButton:after",
     ".spectrum-LogicButton:disabled",
     ".spectrum-LogicButton:focus",
     ".spectrum-LogicButton:focus-visible",
-    ".spectrum-LogicButton:focus-visible:after"
+    ".spectrum-LogicButton:focus-visible:after",
+    ".spectrum-LogicButton.is-disabled"
   ],
-  "modifiers": [
-    "--mod-focus-indicator-gap",
-    "--mod-logic-button-and-background-color",
-    "--mod-logic-button-and-background-color-disabled",
-    "--mod-logic-button-and-background-color-hover",
-    "--mod-logic-button-and-background-color-hover-disabled",
-    "--mod-logic-button-and-border-color",
-    "--mod-logic-button-and-border-color-disabled",
-    "--mod-logic-button-and-border-color-hover",
-    "--mod-logic-button-and-border-color-hover-disabled",
-    "--mod-logic-button-and-text-color",
-    "--mod-logic-button-and-text-color-disabled",
-    "--mod-logic-button-border-radius",
-    "--mod-logic-button-border-width",
-    "--mod-logic-button-focus-indicator-color",
-    "--mod-logic-button-focus-indicator-gap",
-    "--mod-logic-button-focus-indicator-width",
-    "--mod-logic-button-font-size",
-    "--mod-logic-button-font-weight",
-    "--mod-logic-button-height",
-    "--mod-logic-button-or-background-color",
-    "--mod-logic-button-or-background-color-disabled",
-    "--mod-logic-button-or-background-color-hover",
-    "--mod-logic-button-or-background-color-hover-disabled",
-    "--mod-logic-button-or-border-color",
-    "--mod-logic-button-or-border-color-disabled",
-    "--mod-logic-button-or-border-color-hover",
-    "--mod-logic-button-or-border-color-hover-disabled",
-    "--mod-logic-button-or-text-color",
-    "--mod-logic-button-or-text-color-disabled",
-    "--mod-logic-button-padding"
-  ],
-  "component": [
-    "--spectrum-logic-button-and-background-color",
-    "--spectrum-logic-button-and-background-color-disabled",
-    "--spectrum-logic-button-and-background-color-hover",
-    "--spectrum-logic-button-and-background-color-hover-disabled",
-    "--spectrum-logic-button-and-border-color",
-    "--spectrum-logic-button-and-border-color-disabled",
-    "--spectrum-logic-button-and-border-color-hover",
-    "--spectrum-logic-button-and-border-color-hover-disabled",
-    "--spectrum-logic-button-and-text-color",
-    "--spectrum-logic-button-border-radius",
-    "--spectrum-logic-button-or-background-color",
-    "--spectrum-logic-button-or-background-color-disabled",
-    "--spectrum-logic-button-or-background-color-hover",
-    "--spectrum-logic-button-or-background-color-hover-disabled",
-    "--spectrum-logic-button-or-border-color",
-    "--spectrum-logic-button-or-border-color-disabled",
-    "--spectrum-logic-button-or-border-color-hover",
-    "--spectrum-logic-button-or-border-color-hover-disabled",
-    "--spectrum-logic-button-or-text-color",
-    "--spectrum-logic-button-text-color-disabled"
-  ],
-  "global": [
-    "--spectrum-animation-duration-100",
-    "--spectrum-blue-1100",
-    "--spectrum-bold-font-weight",
-    "--spectrum-border-width-200",
-    "--spectrum-component-edge-to-text-50",
-    "--spectrum-corner-radius-100",
-    "--spectrum-focus-indicator-color",
-    "--spectrum-focus-indicator-gap",
-    "--spectrum-focus-indicator-thickness",
-    "--spectrum-font-size-100",
-    "--spectrum-gray-100",
-    "--spectrum-gray-500",
-    "--spectrum-line-height-100",
-    "--spectrum-sans-font-family-stack",
-    "--spectrum-white"
-  ],
-  "passthroughs": [
-    "--mod-button-animation-duration",
-    "--mod-button-focus-indicator-gap",
-    "--mod-button-font-family",
-    "--mod-button-line-height"
-  ],
-  "high-contrast": [
-    "--highcontrast-logic-button-and-background-color",
-    "--highcontrast-logic-button-and-background-color-hover",
-    "--highcontrast-logic-button-and-border-color",
-    "--highcontrast-logic-button-and-border-color-hover",
-    "--highcontrast-logic-button-and-text-color",
-    "--highcontrast-logic-button-focus-indicator-color",
-    "--highcontrast-logic-button-or-background-color",
-    "--highcontrast-logic-button-or-background-color-hover",
-    "--highcontrast-logic-button-or-border-color",
-    "--highcontrast-logic-button-or-border-color-hover",
-    "--highcontrast-logic-button-or-text-color"
-  ]
+  "modifiers": {
+    "mod-focus-indicator-gap": {
+      "description": "Used by `.spectrum-LogicButton:focus-visible:after`. <br/>Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-logic-button-height": {
+      "description": "Used by `.spectrum-LogicButton`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-logic-button-padding": {
+      "description": "Used by `.spectrum-LogicButton`. <br/>Defaults to `var(--spectrum-component-edge-to-text-50)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-logic-button-border-width": {
+      "description": "Used by `.spectrum-LogicButton`. <br/>Defaults to `var(--spectrum-border-width-200)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-logic-button-border-radius": {
+      "description": "Used by `.spectrum-LogicButton`, `.spectrum-LogicButton:after`. <br/>Defaults to `var(--spectrum-logic-button-border-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-logic-button-font-size": {
+      "description": "Used by `.spectrum-LogicButton`. <br/>Defaults to `var(--spectrum-font-size-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-logic-button-font-weight": {
+      "description": "Used by `.spectrum-LogicButton`. <br/>Defaults to `var(--spectrum-bold-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-logic-button-focus-indicator-gap": {
+      "description": "Used by `.spectrum-LogicButton:after`. <br/>Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-logic-button-focus-indicator-width": {
+      "description": "Used by `.spectrum-LogicButton:focus-visible:after`. <br/>Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-logic-button-focus-indicator-color": {
+      "description": "Used by `.spectrum-LogicButton:focus-visible:after`. <br/>Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-logic-button-and-background-color": {
+      "description": "Defined in `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`. <br/>Used by `.spectrum-LogicButton--and`. <br/>Defaults to `var(--spectrum-logic-button-and-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-logic-button-and-background-color-disabled": {
+      "description": "Used by `--mod-logic-button-and-background-color`. <br/>Defaults to `var(--spectrum-logic-button-and-background-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-logic-button-and-border-color": {
+      "description": "Defined in `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`. <br/>Used by `.spectrum-LogicButton--and`. <br/>Defaults to `var(--spectrum-logic-button-and-border-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-logic-button-and-border-color-disabled": {
+      "description": "Used by `--mod-logic-button-and-border-color`. <br/>Defaults to `var(--spectrum-logic-button-and-border-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-logic-button-and-text-color": {
+      "description": "Defined in `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`. <br/>Used by `.spectrum-LogicButton--and`. <br/>Defaults to `var(--spectrum-logic-button-and-text-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-logic-button-and-text-color-disabled": {
+      "description": "Used by `--mod-logic-button-and-text-color`. <br/>Defaults to `var(--spectrum-logic-button-text-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-logic-button-and-background-color-hover": {
+      "description": "Defined in `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`. <br/>Used by `.spectrum-LogicButton--and:hover:not([disabled])`. <br/>Defaults to `var(--spectrum-logic-button-and-background-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-logic-button-and-background-color-hover-disabled": {
+      "description": "Used by `--mod-logic-button-and-background-color-hover`. <br/>Defaults to `var(--spectrum-logic-button-and-background-color-hover-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-logic-button-and-border-color-hover": {
+      "description": "Defined in `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`. <br/>Used by `.spectrum-LogicButton--and:hover:not([disabled])`. <br/>Defaults to `var(--spectrum-logic-button-and-border-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-logic-button-and-border-color-hover-disabled": {
+      "description": "Used by `--mod-logic-button-and-border-color-hover`. <br/>Defaults to `var(--spectrum-logic-button-and-border-color-hover-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-logic-button-or-background-color": {
+      "description": "Defined in `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`. <br/>Used by `.spectrum-LogicButton--or`. <br/>Defaults to `var(--spectrum-logic-button-or-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-logic-button-or-background-color-disabled": {
+      "description": "Used by `--mod-logic-button-or-background-color`. <br/>Defaults to `var(--spectrum-logic-button-or-background-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-logic-button-or-border-color": {
+      "description": "Defined in `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`. <br/>Used by `.spectrum-LogicButton--or`. <br/>Defaults to `var(--spectrum-logic-button-or-border-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-logic-button-or-border-color-disabled": {
+      "description": "Used by `--mod-logic-button-or-border-color`. <br/>Defaults to `var(--spectrum-logic-button-or-border-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-logic-button-or-text-color": {
+      "description": "Defined in `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`. <br/>Used by `.spectrum-LogicButton--or`. <br/>Defaults to `var(--spectrum-logic-button-or-text-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-logic-button-or-text-color-disabled": {
+      "description": "Used by `--mod-logic-button-or-text-color`. <br/>Defaults to `var(--spectrum-logic-button-text-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-logic-button-or-background-color-hover": {
+      "description": "Defined in `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`. <br/>Used by `.spectrum-LogicButton--or:hover:not([disabled])`. <br/>Defaults to `var(--spectrum-logic-button-or-background-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-logic-button-or-background-color-hover-disabled": {
+      "description": "Used by `--mod-logic-button-or-background-color-hover`. <br/>Defaults to `var(--spectrum-logic-button-or-background-color-hover-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-logic-button-or-border-color-hover": {
+      "description": "Defined in `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`. <br/>Used by `.spectrum-LogicButton--or:hover:not([disabled])`. <br/>Defaults to `var(--spectrum-logic-button-or-border-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-logic-button-or-border-color-hover-disabled": {
+      "description": "Used by `--mod-logic-button-or-border-color-hover`. <br/>Defaults to `var(--spectrum-logic-button-or-border-color-hover-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-logic-button-and-background-color-disabled": {
+      "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+      "description": "Defined in `.spectrum-LogicButton`. <br/>Used by `--mod-logic-button-and-background-color`. <br/>Defaults to `var(--spectrum-gray-100)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-logic-button-and-border-color-disabled": {
+      "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+      "description": "Defined in `.spectrum-LogicButton`. <br/>Used by `--mod-logic-button-and-border-color`. <br/>Defaults to `var(--spectrum-gray-100)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-logic-button-and-background-color-hover-disabled": {
+      "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+      "description": "Defined in `.spectrum-LogicButton`. <br/>Used by `--mod-logic-button-and-background-color-hover`. <br/>Defaults to `var(--spectrum-gray-100)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-logic-button-and-border-color-hover-disabled": {
+      "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+      "description": "Defined in `.spectrum-LogicButton`. <br/>Used by `--mod-logic-button-and-border-color-hover`. <br/>Defaults to `var(--spectrum-gray-100)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-logic-button-or-background-color-disabled": {
+      "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+      "description": "Defined in `.spectrum-LogicButton`. <br/>Used by `--mod-logic-button-or-background-color`. <br/>Defaults to `var(--spectrum-gray-100)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-logic-button-or-border-color-disabled": {
+      "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+      "description": "Defined in `.spectrum-LogicButton`. <br/>Used by `--mod-logic-button-or-border-color`. <br/>Defaults to `var(--spectrum-gray-100)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-logic-button-or-background-color-hover-disabled": {
+      "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+      "description": "Defined in `.spectrum-LogicButton`. <br/>Used by `--mod-logic-button-or-background-color-hover`. <br/>Defaults to `var(--spectrum-gray-100)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-logic-button-or-border-color-hover-disabled": {
+      "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+      "description": "Defined in `.spectrum-LogicButton`. <br/>Used by `--mod-logic-button-or-border-color-hover`. <br/>Defaults to `var(--spectrum-gray-100)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-logic-button-border-radius": {
+      "value": "4px",
+      "description": "Defined in `.spectrum-LogicButton`. <br/>Used by `.spectrum-LogicButton`, `.spectrum-LogicButton:after`. <br/>Defaults to `var(--spectrum-corner-radius-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-logic-button-and-text-color": {
+      "value": "rgb(255, 255, 255)",
+      "description": "Defined in `.spectrum-LogicButton`. <br/>Used by `.spectrum-LogicButton--and`. <br/>Defaults to `var(--spectrum-white)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-logic-button-and-background-color-hover": {
+      "value": "light-dark(rgb(29, 62, 207), rgb(124, 169, 252))",
+      "description": "Defined in `.spectrum-LogicButton`. <br/>Used by `.spectrum-LogicButton--and:hover:not([disabled])`. <br/>Defaults to `var(--spectrum-blue-1100)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-logic-button-and-border-color-hover": {
+      "value": "light-dark(rgb(29, 62, 207), rgb(124, 169, 252))",
+      "description": "Defined in `.spectrum-LogicButton`. <br/>Used by `.spectrum-LogicButton--and:hover:not([disabled])`. <br/>Defaults to `var(--spectrum-blue-1100)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-logic-button-or-text-color": {
+      "value": "rgb(255, 255, 255)",
+      "description": "Defined in `.spectrum-LogicButton`. <br/>Used by `.spectrum-LogicButton--or`. <br/>Defaults to `var(--spectrum-white)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-logic-button-text-color-disabled": {
+      "value": "light-dark(rgb(143, 143, 143), rgb(109, 109, 109))",
+      "description": "Defined in `.spectrum-LogicButton`. <br/>Used by `--mod-logic-button-and-text-color`, `--mod-logic-button-or-text-color`. <br/>Defaults to `var(--spectrum-gray-500)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-logic-button-and-background-color": {
+      "description": "Used by `.spectrum-LogicButton--and`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-logic-button-and-border-color": {
+      "description": "Used by `.spectrum-LogicButton--and`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-logic-button-or-background-color": {
+      "description": "Used by `.spectrum-LogicButton--or`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-logic-button-or-border-color": {
+      "description": "Used by `.spectrum-LogicButton--or`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-logic-button-or-background-color-hover": {
+      "description": "Used by `.spectrum-LogicButton--or:hover:not([disabled])`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-logic-button-or-border-color-hover": {
+      "description": "Used by `.spectrum-LogicButton--or:hover:not([disabled])`.",
+      "control": "color",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-sans-font-family-stack": {
+      "description": "Used by `.spectrum-LogicButton`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-line-height-100": {
+      "value": "1.3",
+      "description": "Used by `.spectrum-LogicButton`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-animation-duration-100": {
+      "description": "Used by `.spectrum-LogicButton`, `.spectrum-LogicButton:after`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-gap": {
+      "value": "2px",
+      "description": "Used by `.spectrum-LogicButton:after`, `.spectrum-LogicButton:focus-visible:after`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-100": {
+      "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+      "description": "Used by `--spectrum-logic-button-and-background-color-disabled`, `--spectrum-logic-button-and-border-color-disabled`, `--spectrum-logic-button-and-background-color-hover-disabled`, `--spectrum-logic-button-and-border-color-hover-disabled`, `--spectrum-logic-button-or-background-color-disabled`, `--spectrum-logic-button-or-border-color-disabled`, `--spectrum-logic-button-or-background-color-hover-disabled`, `--spectrum-logic-button-or-border-color-hover-disabled`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-100": {
+      "value": "4px",
+      "description": "Used by `--spectrum-logic-button-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-white": {
+      "value": "rgb(255, 255, 255)",
+      "description": "Used by `--spectrum-logic-button-and-text-color`, `--spectrum-logic-button-or-text-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-blue-1100": {
+      "value": "light-dark(rgb(29, 62, 207), rgb(124, 169, 252))",
+      "description": "Used by `--spectrum-logic-button-and-background-color-hover`, `--spectrum-logic-button-and-border-color-hover`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-500": {
+      "value": "light-dark(rgb(143, 143, 143), rgb(109, 109, 109))",
+      "description": "Used by `--spectrum-logic-button-text-color-disabled`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-text-50": {
+      "value": "8px",
+      "description": "Used by `.spectrum-LogicButton`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-border-width-200": {
+      "value": "2px",
+      "description": "Used by `.spectrum-LogicButton`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-100": {
+      "value": "14px",
+      "description": "Used by `.spectrum-LogicButton`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-bold-font-weight": {
+      "value": "700",
+      "description": "Used by `.spectrum-LogicButton`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Used by `.spectrum-LogicButton:focus-visible:after`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Used by `.spectrum-LogicButton:focus-visible:after`.",
+      "control": "color",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {
+    "mod-button-font-family": {
+      "category": "Passthrough"
+    },
+    "mod-button-line-height": {
+      "category": "Passthrough"
+    },
+    "mod-button-animation-duration": {
+      "category": "Passthrough"
+    },
+    "mod-button-focus-indicator-gap": {
+      "category": "Passthrough"
+    }
+  },
+  "high-contrast": {
+    "highcontrast-logic-button-focus-indicator-color": {
+      "value": "var(--mod-logic-button-focus-indicator-color, var(--spectrum-focus-indicator-color))",
+      "description": "Defined in `.spectrum-LogicButton:after`. <br/>Used by `.spectrum-LogicButton:focus-visible:after`. <br/>Defaults to `var(--mod-logic-button-focus-indicator-color, var(--spectrum-focus-indicator-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-logic-button-and-background-color": {
+      "value": "var(--mod-logic-button-and-background-color, var(--spectrum-logic-button-and-background-color))",
+      "description": "Defined in `.spectrum-LogicButton`, `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`. <br/>Used by `.spectrum-LogicButton--and`. <br/>Defaults to `var(--mod-logic-button-and-background-color, var(--spectrum-logic-button-and-background-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-logic-button-and-border-color": {
+      "value": "var(--mod-logic-button-and-border-color, var(--spectrum-logic-button-and-border-color))",
+      "description": "Defined in `.spectrum-LogicButton`, `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`. <br/>Used by `.spectrum-LogicButton--and`. <br/>Defaults to `var(--mod-logic-button-and-border-color, var(--spectrum-logic-button-and-border-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-logic-button-and-text-color": {
+      "value": "var(--mod-logic-button-and-text-color, var(--spectrum-logic-button-and-text-color))",
+      "description": "Defined in `.spectrum-LogicButton`, `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`. <br/>Used by `.spectrum-LogicButton--and`. <br/>Defaults to `var(--mod-logic-button-and-text-color, var(--spectrum-logic-button-and-text-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-logic-button-or-background-color": {
+      "value": "var(--mod-logic-button-or-background-color, var(--spectrum-logic-button-or-background-color))",
+      "description": "Defined in `.spectrum-LogicButton`, `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`. <br/>Used by `.spectrum-LogicButton--or`. <br/>Defaults to `var(--mod-logic-button-or-background-color, var(--spectrum-logic-button-or-background-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-logic-button-or-border-color": {
+      "value": "var(--mod-logic-button-or-border-color, var(--spectrum-logic-button-or-border-color))",
+      "description": "Defined in `.spectrum-LogicButton`, `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`. <br/>Used by `.spectrum-LogicButton--or`. <br/>Defaults to `var(--mod-logic-button-or-border-color, var(--spectrum-logic-button-or-border-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-logic-button-or-text-color": {
+      "value": "var(--mod-logic-button-or-text-color, var(--spectrum-logic-button-or-text-color))",
+      "description": "Defined in `.spectrum-LogicButton`, `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`. <br/>Used by `.spectrum-LogicButton--or`. <br/>Defaults to `var(--mod-logic-button-or-text-color, var(--spectrum-logic-button-or-text-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-logic-button-and-background-color-hover": {
+      "value": "var(--mod-logic-button-and-background-color-hover, var(--spectrum-logic-button-and-background-color-hover))",
+      "description": "Defined in `.spectrum-LogicButton`. <br/>Used by `.spectrum-LogicButton--and:hover:not([disabled])`. <br/>Defaults to `var(--mod-logic-button-and-background-color-hover, var(--spectrum-logic-button-and-background-color-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-logic-button-and-border-color-hover": {
+      "value": "var(--mod-logic-button-and-border-color-hover, var(--spectrum-logic-button-and-border-color-hover))",
+      "description": "Defined in `.spectrum-LogicButton`. <br/>Used by `.spectrum-LogicButton--and:hover:not([disabled])`. <br/>Defaults to `var(--mod-logic-button-and-border-color-hover, var(--spectrum-logic-button-and-border-color-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-logic-button-or-background-color-hover": {
+      "value": "var(--mod-logic-button-or-background-color-hover, var(--spectrum-logic-button-or-background-color-hover))",
+      "description": "Defined in `.spectrum-LogicButton`. <br/>Used by `.spectrum-LogicButton--or:hover:not([disabled])`. <br/>Defaults to `var(--mod-logic-button-or-background-color-hover, var(--spectrum-logic-button-or-background-color-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-logic-button-or-border-color-hover": {
+      "value": "var(--mod-logic-button-or-border-color-hover, var(--spectrum-logic-button-or-border-color-hover))",
+      "description": "Defined in `.spectrum-LogicButton`. <br/>Used by `.spectrum-LogicButton--or:hover:not([disabled])`. <br/>Defaults to `var(--mod-logic-button-or-border-color-hover, var(--spectrum-logic-button-or-border-color-hover))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/logicbutton/stories/logicbutton.stories.js b/components/logicbutton/stories/logicbutton.stories.js
index 6b38a131275..515562d3b6e 100644
--- a/components/logicbutton/stories/logicbutton.stories.js
+++ b/components/logicbutton/stories/logicbutton.stories.js
@@ -1,10 +1,12 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { LogicButtonGroup } from "./logicbutton.test.js";
 import { Template, VariantGroup } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * A logic button displays an operator within a boolean logic sequence.
  */
@@ -32,6 +34,10 @@ export default {
 	parameters: {
 		packageJson,
 		metadata,
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 };
 
diff --git a/components/menu/dist/metadata.json b/components/menu/dist/metadata.json
index 3693f34c5dc..42c19293c4d 100644
--- a/components/menu/dist/metadata.json
+++ b/components/menu/dist/metadata.json
@@ -9,10 +9,10 @@
     ".spectrum-Menu .spectrum-Menu-divider",
     ".spectrum-Menu .spectrum-Menu-divider.spectrum-Divider--sizeS",
     ".spectrum-Menu .spectrum-Menu-item",
-    ".spectrum-Menu .spectrum-Menu-item--collapsible.is-open.is-focused",
     ".spectrum-Menu .spectrum-Menu-item--collapsible.is-open:active",
     ".spectrum-Menu .spectrum-Menu-item--collapsible.is-open:focus",
     ".spectrum-Menu .spectrum-Menu-item--collapsible.is-open:hover",
+    ".spectrum-Menu .spectrum-Menu-item--collapsible.is-open.is-focused",
     ".spectrum-Menu .spectrum-Menu-item--drillIn.is-open",
     ".spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemCheckbox",
     ".spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemSwitch",
@@ -47,40 +47,19 @@
     ".spectrum-Menu-item--collapsible > .spectrum-Menu-itemIcon",
     ".spectrum-Menu-item--collapsible.is-open",
     ".spectrum-Menu-item--collapsible.is-open .spectrum-Menu-chevron",
-    ".spectrum-Menu-item--collapsible.is-open.is-focused",
     ".spectrum-Menu-item--collapsible.is-open:active",
     ".spectrum-Menu-item--collapsible.is-open:focus",
     ".spectrum-Menu-item--collapsible.is-open:hover",
+    ".spectrum-Menu-item--collapsible.is-open.is-focused",
     ".spectrum-Menu-item--drillIn .spectrum-Menu-chevron",
+    ".spectrum-Menu-item--drillIn:active .spectrum-Menu-chevron",
+    ".spectrum-Menu-item--drillIn:focus .spectrum-Menu-chevron",
+    ".spectrum-Menu-item--drillIn:hover .spectrum-Menu-chevron",
     ".spectrum-Menu-item--drillIn.is-focused .spectrum-Menu-chevron",
     ".spectrum-Menu-item--drillIn.is-open",
     ".spectrum-Menu-item--drillIn.is-open .spectrum-Menu-checkmark",
     ".spectrum-Menu-item--drillIn.is-open .spectrum-Menu-chevron",
     ".spectrum-Menu-item--drillIn.is-open .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)",
-    ".spectrum-Menu-item--drillIn:active .spectrum-Menu-chevron",
-    ".spectrum-Menu-item--drillIn:focus .spectrum-Menu-chevron",
-    ".spectrum-Menu-item--drillIn:hover .spectrum-Menu-chevron",
-    ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemDescription",
-    ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemIcon",
-    ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemLabel",
-    ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemThumbnail",
-    ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemValue",
-    ".spectrum-Menu-item.is-disabled .spectrum-Menu-sectionHeading",
-    ".spectrum-Menu-item.is-disabled:hover",
-    ".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemDescription",
-    ".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemIcon",
-    ".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemLabel",
-    ".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemValue",
-    ".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-sectionHeading",
-    ".spectrum-Menu-item.is-focus-visible",
-    ".spectrum-Menu-item.is-focus-visible .spectrum-Menu-linkout",
-    ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-checkmark",
-    ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-chevron",
-    ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemDescription",
-    ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)",
-    ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemLabel",
-    ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemValue",
-    ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-sectionHeading",
     ".spectrum-Menu-item:active",
     ".spectrum-Menu-item:active .spectrum-Menu-linkout",
     ".spectrum-Menu-item:active > .spectrum-Menu-checkmark",
@@ -117,13 +96,27 @@
     ".spectrum-Menu-item:hover > .spectrum-Menu-itemLabel",
     ".spectrum-Menu-item:hover > .spectrum-Menu-itemValue",
     ".spectrum-Menu-item:hover > .spectrum-Menu-sectionHeading",
-    ".spectrum-Menu-itemActions",
-    ".spectrum-Menu-itemDescription",
-    ".spectrum-Menu-itemLabel",
-    ".spectrum-Menu-itemLabel--truncate",
-    ".spectrum-Menu-itemSelection",
-    ".spectrum-Menu-itemThumbnail",
-    ".spectrum-Menu-itemValue",
+    ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemDescription",
+    ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemIcon",
+    ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemLabel",
+    ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemThumbnail",
+    ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemValue",
+    ".spectrum-Menu-item.is-disabled .spectrum-Menu-sectionHeading",
+    ".spectrum-Menu-item.is-disabled:hover",
+    ".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemDescription",
+    ".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemIcon",
+    ".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemLabel",
+    ".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemValue",
+    ".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-sectionHeading",
+    ".spectrum-Menu-item.is-focus-visible",
+    ".spectrum-Menu-item.is-focus-visible .spectrum-Menu-linkout",
+    ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-checkmark",
+    ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-chevron",
+    ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemDescription",
+    ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)",
+    ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemLabel",
+    ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemValue",
+    ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-sectionHeading",
     ".spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemDescription",
     ".spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemIcon",
     ".spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemLabel",
@@ -136,337 +129,1769 @@
     ".spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemLabel",
     ".spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemValue",
     ".spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-sectionHeading",
+    ".spectrum-Menu-itemActions",
+    ".spectrum-Menu-itemDescription",
+    ".spectrum-Menu-itemLabel",
+    ".spectrum-Menu-itemLabel--truncate",
+    ".spectrum-Menu-itemSelection",
+    ".spectrum-Menu-itemThumbnail",
+    ".spectrum-Menu-itemValue",
     ".spectrum-Menu-sectionDescription",
     ".spectrum-Menu-sectionHeading",
+    ".spectrum-Menu:lang(ja)",
+    ".spectrum-Menu:lang(ko)",
+    ".spectrum-Menu:lang(zh)",
     ".spectrum-Menu.is-selectable .spectrum-Menu-item",
     ".spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected",
     ".spectrum-Menu.is-selectableMultiple .spectrum-Menu-item",
     ".spectrum-Menu.is-selectableMultiple .spectrum-Menu-itemCheckbox",
     ".spectrum-Menu.spectrum-Menu--sizeL",
     ".spectrum-Menu.spectrum-Menu--sizeS",
-    ".spectrum-Menu.spectrum-Menu--sizeXL",
-    ".spectrum-Menu:lang(ja)",
-    ".spectrum-Menu:lang(ko)",
-    ".spectrum-Menu:lang(zh)"
-  ],
-  "modifiers": [
-    "--mod-menu-back-heading-color",
-    "--mod-menu-back-icon-color-default",
-    "--mod-menu-back-icon-margin-block",
-    "--mod-menu-back-icon-margin-inline",
-    "--mod-menu-back-padding-block-end",
-    "--mod-menu-back-padding-block-start",
-    "--mod-menu-back-padding-inline-end",
-    "--mod-menu-back-padding-inline-start",
-    "--mod-menu-checkmark-display",
-    "--mod-menu-checkmark-icon-color-default",
-    "--mod-menu-checkmark-icon-color-down",
-    "--mod-menu-checkmark-icon-color-focus",
-    "--mod-menu-checkmark-icon-color-hover",
-    "--mod-menu-collapsible-icon-color",
-    "--mod-menu-drillin-icon-color-default",
-    "--mod-menu-drillin-icon-color-down",
-    "--mod-menu-drillin-icon-color-focus",
-    "--mod-menu-drillin-icon-color-hover",
-    "--mod-menu-inline-size",
-    "--mod-menu-item-background-color-default",
-    "--mod-menu-item-background-color-down",
-    "--mod-menu-item-background-color-hover",
-    "--mod-menu-item-background-color-key-focus",
-    "--mod-menu-item-bottom-edge-to-text",
-    "--mod-menu-item-checkmark-height",
-    "--mod-menu-item-checkmark-width",
-    "--mod-menu-item-collapsible-no-icon-submenu-item-padding-x-start",
-    "--mod-menu-item-corner-radius",
-    "--mod-menu-item-description-color-default",
-    "--mod-menu-item-description-color-disabled",
-    "--mod-menu-item-description-color-down",
-    "--mod-menu-item-description-color-focus",
-    "--mod-menu-item-description-color-hover",
-    "--mod-menu-item-description-font-size",
-    "--mod-menu-item-description-line-height",
-    "--mod-menu-item-description-line-height-cjk",
-    "--mod-menu-item-focus-indicator-color",
-    "--mod-menu-item-focus-indicator-width",
-    "--mod-menu-item-icon-height",
-    "--mod-menu-item-icon-width",
-    "--mod-menu-item-label-content-color-default",
-    "--mod-menu-item-label-content-color-disabled",
-    "--mod-menu-item-label-content-color-down",
-    "--mod-menu-item-label-content-color-focus",
-    "--mod-menu-item-label-content-color-hover",
-    "--mod-menu-item-label-font-size",
-    "--mod-menu-item-label-icon-color-default",
-    "--mod-menu-item-label-icon-color-disabled",
-    "--mod-menu-item-label-icon-color-down",
-    "--mod-menu-item-label-icon-color-focus",
-    "--mod-menu-item-label-icon-color-hover",
-    "--mod-menu-item-label-inline-edge-to-content",
-    "--mod-menu-item-label-line-height",
-    "--mod-menu-item-label-line-height-cjk",
-    "--mod-menu-item-label-text-to-visual",
-    "--mod-menu-item-label-to-description-spacing",
-    "--mod-menu-item-label-to-value-area-min-spacing",
-    "--mod-menu-item-linkout-icon-height",
-    "--mod-menu-item-linkout-icon-width",
-    "--mod-menu-item-min-height",
-    "--mod-menu-item-selectable-edge-to-text-not-selected",
-    "--mod-menu-item-text-to-control",
-    "--mod-menu-item-thumbnail-height",
-    "--mod-menu-item-thumbnail-opacity-disabled",
-    "--mod-menu-item-thumbnail-to-label",
-    "--mod-menu-item-thumbnail-width",
-    "--mod-menu-item-top-edge-to-text",
-    "--mod-menu-item-top-to-action",
-    "--mod-menu-item-top-to-checkbox",
-    "--mod-menu-item-top-to-checkmark",
-    "--mod-menu-item-top-to-thumbnail",
-    "--mod-menu-item-top-to-workflow-icon",
-    "--mod-menu-item-value-color-default",
-    "--mod-menu-item-value-color-down",
-    "--mod-menu-item-value-color-focus",
-    "--mod-menu-item-value-color-hover",
-    "--mod-menu-section-description-color",
-    "--mod-menu-section-description-font-size",
-    "--mod-menu-section-description-font-weight",
-    "--mod-menu-section-description-line-height",
-    "--mod-menu-section-description-line-height-cjk",
-    "--mod-menu-section-divider-margin-block",
-    "--mod-menu-section-header-bottom-edge-to-text",
-    "--mod-menu-section-header-color",
-    "--mod-menu-section-header-font-size",
-    "--mod-menu-section-header-font-weight",
-    "--mod-menu-section-header-line-height",
-    "--mod-menu-section-header-line-height-cjk",
-    "--mod-menu-section-header-min-width",
-    "--mod-menu-section-header-to-description",
-    "--mod-menu-section-header-top-edge-to-text"
-  ],
-  "component": [
-    "--spectrum-menu-back-icon-margin",
-    "--spectrum-menu-checkmark-display",
-    "--spectrum-menu-checkmark-display-hidden",
-    "--spectrum-menu-checkmark-display-shown",
-    "--spectrum-menu-checkmark-icon-color-default",
-    "--spectrum-menu-checkmark-icon-color-down",
-    "--spectrum-menu-checkmark-icon-color-focus",
-    "--spectrum-menu-checkmark-icon-color-hover",
-    "--spectrum-menu-collapsible-icon-color",
-    "--spectrum-menu-divider-thickness",
-    "--spectrum-menu-drillin-icon-color-default",
-    "--spectrum-menu-drillin-icon-color-down",
-    "--spectrum-menu-drillin-icon-color-focus",
-    "--spectrum-menu-drillin-icon-color-hover",
-    "--spectrum-menu-item-background-color-default",
-    "--spectrum-menu-item-background-color-down",
-    "--spectrum-menu-item-background-color-hover",
-    "--spectrum-menu-item-background-color-keyboard-focus",
-    "--spectrum-menu-item-bottom-edge-to-text",
-    "--spectrum-menu-item-checkmark-height",
-    "--spectrum-menu-item-checkmark-width",
-    "--spectrum-menu-item-chevron-height",
-    "--spectrum-menu-item-chevron-width",
-    "--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start",
-    "--spectrum-menu-item-corner-radius",
-    "--spectrum-menu-item-description-color-default",
-    "--spectrum-menu-item-description-color-disabled",
-    "--spectrum-menu-item-description-color-down",
-    "--spectrum-menu-item-description-color-focus",
-    "--spectrum-menu-item-description-color-hover",
-    "--spectrum-menu-item-description-font-size",
-    "--spectrum-menu-item-description-line-height",
-    "--spectrum-menu-item-description-line-height-cjk",
-    "--spectrum-menu-item-focus-indicator-color",
-    "--spectrum-menu-item-focus-indicator-color-default",
-    "--spectrum-menu-item-focus-indicator-offset",
-    "--spectrum-menu-item-focus-indicator-outline-style",
-    "--spectrum-menu-item-focus-indicator-width",
-    "--spectrum-menu-item-focus-margin",
-    "--spectrum-menu-item-icon-height",
-    "--spectrum-menu-item-icon-width",
-    "--spectrum-menu-item-label-content-color-default",
-    "--spectrum-menu-item-label-content-color-disabled",
-    "--spectrum-menu-item-label-content-color-down",
-    "--spectrum-menu-item-label-content-color-focus",
-    "--spectrum-menu-item-label-content-color-hover",
-    "--spectrum-menu-item-label-font-size",
-    "--spectrum-menu-item-label-icon-color-default",
-    "--spectrum-menu-item-label-icon-color-disabled",
-    "--spectrum-menu-item-label-icon-color-down",
-    "--spectrum-menu-item-label-icon-color-focus",
-    "--spectrum-menu-item-label-icon-color-hover",
-    "--spectrum-menu-item-label-inline-edge-to-content",
-    "--spectrum-menu-item-label-line-height",
-    "--spectrum-menu-item-label-line-height-cjk",
-    "--spectrum-menu-item-label-text-to-visual",
-    "--spectrum-menu-item-label-to-description",
-    "--spectrum-menu-item-label-to-description-extra-large",
-    "--spectrum-menu-item-label-to-description-large",
-    "--spectrum-menu-item-label-to-description-medium",
-    "--spectrum-menu-item-label-to-description-small",
-    "--spectrum-menu-item-label-to-value-area-min-spacing",
-    "--spectrum-menu-item-linkout-icon-height",
-    "--spectrum-menu-item-linkout-icon-width",
-    "--spectrum-menu-item-min-height",
-    "--spectrum-menu-item-section-divider-height",
-    "--spectrum-menu-item-selectable-edge-to-text-not-selected",
-    "--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large",
-    "--spectrum-menu-item-selectable-edge-to-text-not-selected-large",
-    "--spectrum-menu-item-selectable-edge-to-text-not-selected-medium",
-    "--spectrum-menu-item-selectable-edge-to-text-not-selected-small",
-    "--spectrum-menu-item-text-to-control",
-    "--spectrum-menu-item-thumbnail-height",
-    "--spectrum-menu-item-thumbnail-opacity-disabled",
-    "--spectrum-menu-item-thumbnail-to-label",
-    "--spectrum-menu-item-thumbnail-width",
-    "--spectrum-menu-item-top-edge-to-text",
-    "--spectrum-menu-item-top-to-action",
-    "--spectrum-menu-item-top-to-checkbox",
-    "--spectrum-menu-item-top-to-checkmark",
-    "--spectrum-menu-item-top-to-selected-icon-extra-large",
-    "--spectrum-menu-item-top-to-selected-icon-large",
-    "--spectrum-menu-item-top-to-selected-icon-medium",
-    "--spectrum-menu-item-top-to-selected-icon-small",
-    "--spectrum-menu-item-top-to-thumbnail",
-    "--spectrum-menu-item-top-to-thumbnail-extra-large",
-    "--spectrum-menu-item-top-to-thumbnail-large",
-    "--spectrum-menu-item-top-to-thumbnail-medium",
-    "--spectrum-menu-item-top-to-thumbnail-small",
-    "--spectrum-menu-item-top-to-workflow-icon",
-    "--spectrum-menu-item-value-color-default",
-    "--spectrum-menu-item-value-color-down",
-    "--spectrum-menu-item-value-color-focus",
-    "--spectrum-menu-item-value-color-hover",
-    "--spectrum-menu-section-description-color",
-    "--spectrum-menu-section-description-font-size",
-    "--spectrum-menu-section-description-font-weight",
-    "--spectrum-menu-section-description-line-height",
-    "--spectrum-menu-section-description-line-height-cjk",
-    "--spectrum-menu-section-header-color",
-    "--spectrum-menu-section-header-font-size",
-    "--spectrum-menu-section-header-font-weight",
-    "--spectrum-menu-section-header-line-height",
-    "--spectrum-menu-section-header-line-height-cjk",
-    "--spectrum-menu-section-header-min-width",
-    "--spectrum-menu-section-header-to-description",
-    "--spectrum-menu-section-header-to-description-extra-large",
-    "--spectrum-menu-section-header-to-description-large",
-    "--spectrum-menu-section-header-to-description-medium",
-    "--spectrum-menu-section-header-to-description-small"
-  ],
-  "global": [
-    "--spectrum-accent-color-1000",
-    "--spectrum-accent-color-1100",
-    "--spectrum-accent-color-900",
-    "--spectrum-bold-font-weight",
-    "--spectrum-checkmark-icon-size-100",
-    "--spectrum-checkmark-icon-size-200",
-    "--spectrum-checkmark-icon-size-300",
-    "--spectrum-checkmark-icon-size-75",
-    "--spectrum-chevron-icon-size-100",
-    "--spectrum-chevron-icon-size-200",
-    "--spectrum-chevron-icon-size-300",
-    "--spectrum-chevron-icon-size-75",
-    "--spectrum-cjk-line-height-100",
-    "--spectrum-component-bottom-to-text-100",
-    "--spectrum-component-bottom-to-text-200",
-    "--spectrum-component-bottom-to-text-300",
-    "--spectrum-component-bottom-to-text-75",
-    "--spectrum-component-edge-to-text-100",
-    "--spectrum-component-edge-to-text-200",
-    "--spectrum-component-edge-to-text-300",
-    "--spectrum-component-edge-to-text-75",
-    "--spectrum-component-height-100",
-    "--spectrum-component-height-200",
-    "--spectrum-component-height-300",
-    "--spectrum-component-height-75",
-    "--spectrum-component-size-difference-down",
-    "--spectrum-component-size-width-ratio-down",
-    "--spectrum-component-top-to-text-100",
-    "--spectrum-component-top-to-text-200",
-    "--spectrum-component-top-to-text-300",
-    "--spectrum-component-top-to-text-75",
-    "--spectrum-component-top-to-workflow-icon-100",
-    "--spectrum-component-top-to-workflow-icon-200",
-    "--spectrum-component-top-to-workflow-icon-300",
-    "--spectrum-component-top-to-workflow-icon-75",
-    "--spectrum-corner-radius-400",
-    "--spectrum-corner-radius-500",
-    "--spectrum-corner-radius-600",
-    "--spectrum-corner-radius-700",
-    "--spectrum-disabled-content-color",
-    "--spectrum-divider-thickness-medium",
-    "--spectrum-divider-thickness-small",
-    "--spectrum-downstate-height",
-    "--spectrum-downstate-width",
-    "--spectrum-focus-indicator-color",
-    "--spectrum-focus-indicator-gap",
-    "--spectrum-focus-indicator-thickness",
-    "--spectrum-font-size-100",
-    "--spectrum-font-size-200",
-    "--spectrum-font-size-300",
-    "--spectrum-font-size-50",
-    "--spectrum-font-size-75",
-    "--spectrum-gray-900",
-    "--spectrum-line-height-100",
-    "--spectrum-link-out-icon-size-100",
-    "--spectrum-link-out-icon-size-200",
-    "--spectrum-link-out-icon-size-75",
-    "--spectrum-navigational-indicator-top-to-back-icon-extra-large",
-    "--spectrum-navigational-indicator-top-to-back-icon-large",
-    "--spectrum-navigational-indicator-top-to-back-icon-medium",
-    "--spectrum-navigational-indicator-top-to-back-icon-small",
-    "--spectrum-neutral-content-color-default",
-    "--spectrum-neutral-content-color-down",
-    "--spectrum-neutral-content-color-hover",
-    "--spectrum-neutral-content-color-key-focus",
-    "--spectrum-neutral-subdued-content-color-default",
-    "--spectrum-neutral-subdued-content-color-down",
-    "--spectrum-neutral-subdued-content-color-hover",
-    "--spectrum-neutral-subdued-content-color-key-focus",
-    "--spectrum-regular-font-weight",
-    "--spectrum-spacing-100",
-    "--spectrum-spacing-50",
-    "--spectrum-text-to-control-100",
-    "--spectrum-text-to-control-200",
-    "--spectrum-text-to-control-300",
-    "--spectrum-text-to-control-75",
-    "--spectrum-text-to-visual-100",
-    "--spectrum-text-to-visual-200",
-    "--spectrum-text-to-visual-300",
-    "--spectrum-text-to-visual-400",
-    "--spectrum-text-to-visual-75",
-    "--spectrum-thumbnail-size-500",
-    "--spectrum-thumbnail-size-700",
-    "--spectrum-thumbnail-size-800",
-    "--spectrum-thumbnail-size-900",
-    "--spectrum-workflow-icon-size-100",
-    "--spectrum-workflow-icon-size-200",
-    "--spectrum-workflow-icon-size-300",
-    "--spectrum-workflow-icon-size-75"
-  ],
-  "passthroughs": [
-    "--mod-checkbox-text-to-control",
-    "--mod-checkbox-top-to-text",
-    "--mod-switch-control-label-spacing",
-    "--mod-switch-spacing-top-to-label"
+    ".spectrum-Menu.spectrum-Menu--sizeXL"
   ],
-  "high-contrast": [
-    "--highcontrast-checkbox-highlight-color-default",
-    "--highcontrast-checkbox-highlight-color-hover",
-    "--highcontrast-menu-checkmark-icon-color-default",
-    "--highcontrast-menu-item-background-color-default",
-    "--highcontrast-menu-item-background-color-focus",
-    "--highcontrast-menu-item-color-default",
-    "--highcontrast-menu-item-color-disabled",
-    "--highcontrast-menu-item-color-focus",
-    "--highcontrast-menu-item-focus-indicator-color",
-    "--highcontrast-menu-item-selected-background-color",
-    "--highcontrast-menu-item-selected-color",
-    "--highcontrast-switch-background-color-selected-default",
-    "--highcontrast-switch-background-color-selected-hover",
-    "--highcontrast-switch-handle-border-color-hover",
-    "--highcontrast-switch-handle-border-color-selected-default",
-    "--highcontrast-switch-handle-border-color-selected-hover"
-  ]
+  "modifiers": {
+    "mod-menu-item-focus-indicator-width": {
+      "description": "Used by `--spectrum-menu-item-focus-indicator-width`. <br/>Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-item-focus-indicator-color": {
+      "description": "Used by `--spectrum-menu-item-focus-indicator-color-default`. <br/>Defaults to `var(--spectrum-menu-item-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-menu-inline-size": {
+      "description": "Used by `.spectrum-Menu`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-item-label-line-height-cjk": {
+      "description": "Used by `--spectrum-menu-item-label-line-height`. <br/>Defaults to `var(--spectrum-menu-item-label-line-height-cjk)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-item-description-line-height-cjk": {
+      "description": "Used by `--spectrum-menu-item-description-line-height`. <br/>Defaults to `var(--spectrum-menu-item-description-line-height-cjk)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-section-header-line-height-cjk": {
+      "description": "Used by `--spectrum-menu-section-header-line-height`. <br/>Defaults to `var(--spectrum-menu-section-header-line-height-cjk)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-section-description-line-height-cjk": {
+      "description": "Used by `--spectrum-menu-section-description-line-height`. <br/>Defaults to `var(--spectrum-menu-section-description-line-height-cjk)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-item-selectable-edge-to-text-not-selected": {
+      "description": "Used by `.spectrum-Menu.is-selectable .spectrum-Menu-item`. <br/>Defaults to `var(--spectrum-menu-item-selectable-edge-to-text-not-selected)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-item-label-inline-edge-to-content": {
+      "description": "Used by `.spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected`, `.spectrum-Menu .spectrum-Menu-divider`, `.spectrum-Menu-item`, `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-item--collapsible .spectrum-Menu`. <br/>Defaults to `var(--spectrum-menu-item-label-inline-edge-to-content)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-section-divider-margin-block": {
+      "description": "Used by `.spectrum-Menu .spectrum-Menu-divider`. <br/>Defaults to `max(0px, (var(--spectrum-menu-item-section-divider-height) - var(--spectrum-menu-divider-thickness))/2)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-item-label-icon-color-default": {
+      "description": "Used by `.spectrum-Menu .spectrum-Menu-itemIcon`. <br/>Defaults to `var(--spectrum-menu-item-label-icon-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-menu-checkmark-display": {
+      "description": "Used by `.spectrum-Menu .spectrum-Menu-checkmark`. <br/>Defaults to `var(--spectrum-menu-checkmark-display)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-item-checkmark-height": {
+      "description": "Used by `.spectrum-Menu .spectrum-Menu-checkmark`. <br/>Defaults to `var(--spectrum-menu-item-checkmark-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-item-checkmark-width": {
+      "description": "Used by `.spectrum-Menu .spectrum-Menu-checkmark`. <br/>Defaults to `var(--spectrum-menu-item-checkmark-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-checkmark-icon-color-default": {
+      "description": "Used by `.spectrum-Menu .spectrum-Menu-checkmark`. <br/>Defaults to `var(--spectrum-menu-checkmark-icon-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-menu-item-top-to-checkmark": {
+      "description": "Used by `.spectrum-Menu .spectrum-Menu-checkmark`. <br/>Defaults to `var(--spectrum-menu-item-top-to-checkmark)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-item-top-edge-to-text": {
+      "description": "Used by `.spectrum-Menu .spectrum-Menu-checkmark`, `.spectrum-Menu .spectrum-Menu-itemIcon--workflowIcon`, `.spectrum-Menu-item`, `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-itemThumbnail`, `.spectrum-Menu-item--collapsible > .spectrum-Menu-itemIcon`. <br/>Defaults to `var(--spectrum-menu-item-top-edge-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-item-text-to-control": {
+      "description": "Used by `.spectrum-Menu .spectrum-Menu-checkmark, .spectrum-Menu .spectrum-Menu-chevron`, `.spectrum-Menu-item .spectrum-Menu-itemCheckbox .spectrum-Checkbox-box`. <br/>Defaults to `var(--spectrum-menu-item-text-to-control)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-back-icon-margin-block": {
+      "description": "Used by `.spectrum-Menu .spectrum-Menu-backIcon`. <br/>Defaults to `var(--spectrum-menu-back-icon-margin)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-back-icon-margin-inline": {
+      "description": "Used by `.spectrum-Menu .spectrum-Menu-backIcon`. <br/>Defaults to `var(--spectrum-menu-back-icon-margin)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-back-icon-color-default": {
+      "description": "Used by `.spectrum-Menu .spectrum-Menu-backIcon`. <br/>Defaults to `var(--spectrum-menu-section-header-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-menu-item-label-text-to-visual": {
+      "description": "Used by `.spectrum-Menu .spectrum-Menu-itemIcon--workflowIcon`. <br/>Defaults to `var(--spectrum-menu-item-label-text-to-visual)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-item-top-to-workflow-icon": {
+      "description": "Used by `.spectrum-Menu .spectrum-Menu-itemIcon--workflowIcon`. <br/>Defaults to `var(--spectrum-menu-item-top-to-workflow-icon)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-item-icon-height": {
+      "description": "Used by `.spectrum-Menu .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark, .spectrum-Menu-linkout)`. <br/>Defaults to `var(--spectrum-menu-item-icon-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-item-icon-width": {
+      "description": "Used by `.spectrum-Menu .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark, .spectrum-Menu-linkout)`. <br/>Defaults to `var(--spectrum-menu-item-icon-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-item-linkout-icon-height": {
+      "description": "Used by `.spectrum-Menu .spectrum-Menu-linkout`. <br/>Defaults to `var(--spectrum-menu-item-linkout-icon-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-item-linkout-icon-width": {
+      "description": "Used by `.spectrum-Menu .spectrum-Menu-linkout`. <br/>Defaults to `var(--spectrum-menu-item-linkout-icon-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-item-corner-radius": {
+      "description": "Used by `.spectrum-Menu-item`. <br/>Defaults to `var(--spectrum-menu-item-corner-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-item-background-color-default": {
+      "description": "Used by `.spectrum-Menu-item`. <br/>Defaults to `var(--spectrum-menu-item-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-menu-item-label-line-height": {
+      "description": "Used by `.spectrum-Menu-item`. <br/>Defaults to `var(--spectrum-menu-item-label-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-item-min-height": {
+      "description": "Used by `.spectrum-Menu-item`. <br/>Defaults to `var(--spectrum-menu-item-min-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-item-bottom-edge-to-text": {
+      "description": "Used by `.spectrum-Menu-item`, `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-item--collapsible > .spectrum-Menu-itemIcon`. <br/>Defaults to `var(--spectrum-menu-item-bottom-edge-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-item-top-to-checkbox": {
+      "description": "Used by `.spectrum-Menu-item .spectrum-Menu-itemCheckbox .spectrum-Checkbox-box`. <br/>Defaults to `var(--spectrum-menu-item-top-to-checkbox)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-item-top-to-action": {
+      "description": "Used by `.spectrum-Menu-item .spectrum-Menu-itemSwitch .spectrum-Switch-switch`. <br/>Defaults to `var(--spectrum-menu-item-top-to-action)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-item-background-color-key-focus": {
+      "description": "Used by `.spectrum-Menu-item.is-focus-visible, .spectrum-Menu-item:focus-visible`. <br/>Defaults to `var(--spectrum-menu-item-background-color-keyboard-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-menu-item-label-content-color-focus": {
+      "description": "Used by `.spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemLabel, .spectrum-Menu-item:focus-visible > .spectrum-Menu-itemLabel`. <br/>Defaults to `var(--spectrum-menu-item-label-content-color-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-menu-section-header-color": {
+      "description": "Used by `.spectrum-Menu-item.is-focus-visible > .spectrum-Menu-sectionHeading, .spectrum-Menu-item:focus-visible > .spectrum-Menu-sectionHeading`, `.spectrum-Menu-item:active > .spectrum-Menu-sectionHeading`, `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-item:hover > .spectrum-Menu-sectionHeading`. <br/>Defaults to `var(--spectrum-menu-section-header-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-menu-item-description-color-focus": {
+      "description": "Used by `.spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemDescription, .spectrum-Menu-item:focus-visible > .spectrum-Menu-itemDescription`. <br/>Defaults to `var(--spectrum-menu-item-description-color-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-menu-item-value-color-focus": {
+      "description": "Used by `.spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemValue, .spectrum-Menu-item:focus-visible > .spectrum-Menu-itemValue`. <br/>Defaults to `var(--spectrum-menu-item-value-color-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-menu-item-label-icon-color-focus": {
+      "description": "Used by `.spectrum-Menu-item.is-focus-visible .spectrum-Menu-linkout, .spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark), .spectrum-Menu-item:focus-visible .spectrum-Menu-linkout, .spectrum-Menu-item:focus-visible > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`. <br/>Defaults to `var(--spectrum-menu-item-label-icon-color-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-menu-collapsible-icon-color": {
+      "description": "Used by `.spectrum-Menu-item.is-focus-visible > .spectrum-Menu-chevron, .spectrum-Menu-item:focus-visible > .spectrum-Menu-chevron`, `.spectrum-Menu-item:active > .spectrum-Menu-chevron`, `.spectrum-Menu-item:hover > .spectrum-Menu-chevron`. <br/>Defaults to `var(--spectrum-menu-collapsible-icon-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-menu-checkmark-icon-color-focus": {
+      "description": "Used by `.spectrum-Menu-item.is-focus-visible > .spectrum-Menu-checkmark, .spectrum-Menu-item:focus-visible > .spectrum-Menu-checkmark`. <br/>Defaults to `var(--spectrum-menu-checkmark-icon-color-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-menu-item-background-color-down": {
+      "description": "Used by `.spectrum-Menu-item:active`. <br/>Defaults to `var(--spectrum-menu-item-background-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-menu-item-label-content-color-down": {
+      "description": "Used by `.spectrum-Menu-item:active > .spectrum-Menu-itemLabel`. <br/>Defaults to `var(--spectrum-menu-item-label-content-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-menu-item-description-color-down": {
+      "description": "Used by `.spectrum-Menu-item:active > .spectrum-Menu-itemDescription`. <br/>Defaults to `var(--spectrum-menu-item-description-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-menu-item-value-color-down": {
+      "description": "Used by `.spectrum-Menu-item:active > .spectrum-Menu-itemValue`. <br/>Defaults to `var(--spectrum-menu-item-value-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-menu-item-label-icon-color-down": {
+      "description": "Used by `.spectrum-Menu-item:active .spectrum-Menu-linkout, .spectrum-Menu-item:active > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`. <br/>Defaults to `var(--spectrum-menu-item-label-icon-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-menu-checkmark-icon-color-down": {
+      "description": "Used by `.spectrum-Menu-item:active > .spectrum-Menu-checkmark`. <br/>Defaults to `var(--spectrum-menu-checkmark-icon-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-menu-item-label-content-color-disabled": {
+      "description": "Used by `.spectrum-Menu-item.is-disabled .spectrum-Menu-itemLabel, .spectrum-Menu-item.is-disabled .spectrum-Menu-itemValue, .spectrum-Menu-item.is-disabled .spectrum-Menu-sectionHeading, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemLabel, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemValue, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-sectionHeading`, `.spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemLabel, .spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemValue, .spectrum-Menu-item.is-disabled:hover .spectrum-Menu-sectionHeading, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemLabel, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemValue, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-sectionHeading`. <br/>Defaults to `var(--spectrum-menu-item-label-content-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-menu-item-description-color-disabled": {
+      "description": "Used by `.spectrum-Menu-item.is-disabled .spectrum-Menu-itemDescription, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemDescription`, `.spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemDescription, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemDescription`. <br/>Defaults to `var(--spectrum-menu-item-description-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-menu-item-label-icon-color-disabled": {
+      "description": "Used by `.spectrum-Menu-item.is-disabled .spectrum-Menu-itemIcon, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemIcon`, `.spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemIcon, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemIcon`. <br/>Defaults to `var(--spectrum-menu-item-label-icon-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-menu-item-thumbnail-opacity-disabled": {
+      "description": "Used by `.spectrum-Menu-item.is-disabled .spectrum-Menu-itemThumbnail, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemThumbnail`. <br/>Defaults to `var(--spectrum-menu-item-thumbnail-opacity-disabled)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-item-label-content-color-default": {
+      "description": "Used by `.spectrum-Menu-itemLabel`. <br/>Defaults to `var(--spectrum-menu-item-label-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-menu-item-label-font-size": {
+      "description": "Used by `.spectrum-Menu-itemLabel, .spectrum-Menu-itemValue`. <br/>Defaults to `var(--spectrum-menu-item-label-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-item-value-color-default": {
+      "description": "Used by `.spectrum-Menu-itemValue`. <br/>Defaults to `var(--spectrum-menu-item-value-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-menu-item-label-to-value-area-min-spacing": {
+      "description": "Used by `.spectrum-Menu-itemActions, .spectrum-Menu-itemValue`, `.spectrum-Menu-item--drillIn .spectrum-Menu-chevron`. <br/>Defaults to `var(--spectrum-menu-item-label-to-value-area-min-spacing)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-section-header-font-size": {
+      "description": "Used by `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-backHeading`. <br/>Defaults to `var(--spectrum-menu-section-header-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-section-header-font-weight": {
+      "description": "Used by `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-backHeading`. <br/>Defaults to `var(--spectrum-menu-section-header-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-section-header-line-height": {
+      "description": "Used by `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-backHeading`. <br/>Defaults to `var(--spectrum-menu-section-header-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-section-header-min-width": {
+      "description": "Used by `.spectrum-Menu-sectionHeading`. <br/>Defaults to `var(--spectrum-menu-section-header-min-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-section-header-top-edge-to-text": {
+      "description": "Used by `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-item--collapsible > .spectrum-Menu-itemIcon`. <br/>Defaults to `var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text))`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-section-header-bottom-edge-to-text": {
+      "description": "Used by `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-item--collapsible > .spectrum-Menu-itemIcon`. <br/>Defaults to `var(--mod-menu-item-bottom-edge-to-text, var(--spectrum-menu-item-bottom-edge-to-text))`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-section-description-color": {
+      "description": "Used by `.spectrum-Menu-sectionDescription`. <br/>Defaults to `var(--spectrum-menu-section-description-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-menu-section-description-font-weight": {
+      "description": "Used by `.spectrum-Menu-sectionDescription`. <br/>Defaults to `var(--spectrum-menu-section-description-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-section-description-line-height": {
+      "description": "Used by `.spectrum-Menu-sectionDescription`. <br/>Defaults to `var(--spectrum-menu-section-description-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-section-description-font-size": {
+      "description": "Used by `.spectrum-Menu-sectionDescription`. <br/>Defaults to `var(--spectrum-menu-section-description-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-section-header-to-description": {
+      "description": "Used by `.spectrum-Menu-sectionDescription`. <br/>Defaults to `var(--spectrum-menu-section-header-to-description)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-item-description-color-default": {
+      "description": "Used by `.spectrum-Menu-itemDescription`. <br/>Defaults to `var(--spectrum-menu-item-description-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-menu-item-description-font-size": {
+      "description": "Used by `.spectrum-Menu-itemDescription`. <br/>Defaults to `var(--spectrum-menu-item-description-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-item-label-to-description-spacing": {
+      "description": "Used by `.spectrum-Menu-itemDescription`. <br/>Defaults to `var(--spectrum-menu-item-label-to-description)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-item-description-line-height": {
+      "description": "Used by `.spectrum-Menu-itemDescription`. <br/>Defaults to `var(--spectrum-menu-item-description-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-item-thumbnail-height": {
+      "description": "Used by `.spectrum-Menu-itemThumbnail`. <br/>Defaults to `var(--spectrum-menu-item-thumbnail-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-item-thumbnail-width": {
+      "description": "Used by `.spectrum-Menu-itemThumbnail`. <br/>Defaults to `var(--spectrum-menu-item-thumbnail-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-item-top-to-thumbnail": {
+      "description": "Used by `.spectrum-Menu-itemThumbnail`. <br/>Defaults to `var(--spectrum-menu-item-top-to-thumbnail)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-item-thumbnail-to-label": {
+      "description": "Used by `.spectrum-Menu-itemThumbnail`. <br/>Defaults to `var(--spectrum-menu-item-thumbnail-to-label)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-item-collapsible-no-icon-submenu-item-padding-x-start": {
+      "description": "Used by `.spectrum-Menu-item--collapsible .spectrum-Menu .spectrum-Menu-item`. <br/>Defaults to `var(--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-drillin-icon-color-default": {
+      "description": "Used by `.spectrum-Menu-item--drillIn .spectrum-Menu-chevron`. <br/>Defaults to `var(--spectrum-menu-drillin-icon-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-menu-item-background-color-hover": {
+      "description": "Used by `--spectrum-menu-item-background-color-default`, `.spectrum-Menu-item:hover`. <br/>Defaults to `var(--spectrum-menu-item-background-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-menu-item-label-icon-color-hover": {
+      "description": "Used by `.spectrum-Menu-item--drillIn.is-open .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`, `.spectrum-Menu-item:hover .spectrum-Menu-linkout, .spectrum-Menu-item:hover > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`. <br/>Defaults to `var(--spectrum-menu-item-label-icon-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-menu-drillin-icon-color-hover": {
+      "description": "Used by `.spectrum-Menu-item--drillIn.is-open .spectrum-Menu-chevron`, `.spectrum-Menu-item--drillIn:hover .spectrum-Menu-chevron`. <br/>Defaults to `var(--spectrum-menu-drillin-icon-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-menu-checkmark-icon-color-hover": {
+      "description": "Used by `.spectrum-Menu-item--drillIn.is-open .spectrum-Menu-checkmark`, `.spectrum-Menu-item:hover > .spectrum-Menu-checkmark`. <br/>Defaults to `var(--spectrum-menu-checkmark-icon-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-menu-item-label-content-color-hover": {
+      "description": "Used by `.spectrum-Menu-item:hover > .spectrum-Menu-itemLabel`. <br/>Defaults to `var(--spectrum-menu-item-label-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-menu-item-description-color-hover": {
+      "description": "Used by `.spectrum-Menu-item:hover > .spectrum-Menu-itemDescription`. <br/>Defaults to `var(--spectrum-menu-item-description-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-menu-item-value-color-hover": {
+      "description": "Used by `.spectrum-Menu-item:hover > .spectrum-Menu-itemValue`. <br/>Defaults to `var(--spectrum-menu-item-value-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-menu-drillin-icon-color-focus": {
+      "description": "Used by `.spectrum-Menu-item--drillIn.is-focused .spectrum-Menu-chevron, .spectrum-Menu-item--drillIn:focus .spectrum-Menu-chevron`. <br/>Defaults to `var(--spectrum-menu-drillin-icon-color-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-menu-drillin-icon-color-down": {
+      "description": "Used by `.spectrum-Menu-item--drillIn:active .spectrum-Menu-chevron`. <br/>Defaults to `var(--spectrum-menu-drillin-icon-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-menu-back-padding-inline-start": {
+      "description": "Used by `.spectrum-Menu-back`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-back-padding-inline-end": {
+      "description": "Used by `.spectrum-Menu-back`. <br/>Defaults to `var(--spectrum-menu-item-label-inline-edge-to-content)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-back-padding-block-start": {
+      "description": "Used by `.spectrum-Menu-back`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-back-padding-block-end": {
+      "description": "Used by `.spectrum-Menu-back`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-menu-back-heading-color": {
+      "description": "Used by `.spectrum-Menu-backHeading`. <br/>Defaults to `var(--spectrum-menu-section-header-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-menu-item-background-color-default": {
+      "value": "var(--spectrum-gray-100)",
+      "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu-item--drillIn.is-open`. <br/>Used by `.spectrum-Menu-item`. <br/>Defaults to `var(--highcontrast-menu-item-selected-background-color, var(--mod-menu-item-background-color-hover, var(--spectrum-menu-item-background-color-hover)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-menu-item-label-line-height": {
+      "value": "var(--mod-menu-item-label-line-height-cjk, var(--spectrum-menu-item-label-line-height-cjk))",
+      "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu:lang(ja), .spectrum-Menu:lang(ko), .spectrum-Menu:lang(zh)`. <br/>Used by `.spectrum-Menu-item`. <br/>Defaults to `var(--mod-menu-item-label-line-height-cjk, var(--spectrum-menu-item-label-line-height-cjk))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-label-line-height-cjk": {
+      "value": "1.5",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `--spectrum-menu-item-label-line-height`. <br/>Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-label-to-value-area-min-spacing": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu-itemActions, .spectrum-Menu-itemValue`, `.spectrum-Menu-item--drillIn .spectrum-Menu-chevron`. <br/>Defaults to `var(--spectrum-spacing-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-label-content-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu-itemLabel`. <br/>Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-menu-item-label-content-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu-item:hover > .spectrum-Menu-itemLabel`. <br/>Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-menu-item-label-content-color-down": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu-item:active > .spectrum-Menu-itemLabel`. <br/>Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-menu-item-label-content-color-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemLabel, .spectrum-Menu-item:focus-visible > .spectrum-Menu-itemLabel`. <br/>Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-menu-item-label-icon-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu .spectrum-Menu-itemIcon`. <br/>Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-menu-item-label-icon-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu-item--drillIn.is-open .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`, `.spectrum-Menu-item:hover .spectrum-Menu-linkout, .spectrum-Menu-item:hover > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`. <br/>Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-menu-item-label-icon-color-down": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu-item:active .spectrum-Menu-linkout, .spectrum-Menu-item:active > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`. <br/>Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-menu-item-label-icon-color-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu-item.is-focus-visible .spectrum-Menu-linkout, .spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark), .spectrum-Menu-item:focus-visible .spectrum-Menu-linkout, .spectrum-Menu-item:focus-visible > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`. <br/>Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-menu-item-label-content-color-disabled": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu-item.is-disabled .spectrum-Menu-itemLabel, .spectrum-Menu-item.is-disabled .spectrum-Menu-itemValue, .spectrum-Menu-item.is-disabled .spectrum-Menu-sectionHeading, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemLabel, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemValue, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-sectionHeading`, `.spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemLabel, .spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemValue, .spectrum-Menu-item.is-disabled:hover .spectrum-Menu-sectionHeading, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemLabel, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemValue, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-sectionHeading`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-menu-item-label-icon-color-disabled": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu-item.is-disabled .spectrum-Menu-itemIcon, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemIcon`, `.spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemIcon, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemIcon`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-menu-item-description-line-height": {
+      "value": "var(--mod-menu-item-description-line-height-cjk, var(--spectrum-menu-item-description-line-height-cjk))",
+      "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu:lang(ja), .spectrum-Menu:lang(ko), .spectrum-Menu:lang(zh)`. <br/>Used by `.spectrum-Menu-itemDescription`. <br/>Defaults to `var(--mod-menu-item-description-line-height-cjk, var(--spectrum-menu-item-description-line-height-cjk))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-description-line-height-cjk": {
+      "value": "1.5",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `--spectrum-menu-item-description-line-height`. <br/>Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-description-color-default": {
+      "value": "var(--spectrum-gray-700)",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu-itemDescription`. <br/>Defaults to `var(--spectrum-neutral-subdued-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-menu-item-description-color-hover": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu-item:hover > .spectrum-Menu-itemDescription`. <br/>Defaults to `var(--spectrum-neutral-subdued-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-menu-item-description-color-down": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu-item:active > .spectrum-Menu-itemDescription`. <br/>Defaults to `var(--spectrum-neutral-subdued-content-color-down)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-menu-item-description-color-focus": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemDescription, .spectrum-Menu-item:focus-visible > .spectrum-Menu-itemDescription`. <br/>Defaults to `var(--spectrum-neutral-subdued-content-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-menu-item-description-color-disabled": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu-item.is-disabled .spectrum-Menu-itemDescription, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemDescription`, `.spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemDescription, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemDescription`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-menu-section-header-line-height": {
+      "value": "var(--mod-menu-section-header-line-height-cjk, var(--spectrum-menu-section-header-line-height-cjk))",
+      "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu:lang(ja), .spectrum-Menu:lang(ko), .spectrum-Menu:lang(zh)`. <br/>Used by `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-backHeading`. <br/>Defaults to `var(--mod-menu-section-header-line-height-cjk, var(--spectrum-menu-section-header-line-height-cjk))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-section-header-line-height-cjk": {
+      "value": "1.5",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `--spectrum-menu-section-header-line-height`. <br/>Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-section-header-font-weight": {
+      "value": "700",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-backHeading`. <br/>Defaults to `var(--spectrum-bold-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-section-header-color": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu .spectrum-Menu-backIcon`, `.spectrum-Menu-item.is-focus-visible > .spectrum-Menu-sectionHeading, .spectrum-Menu-item:focus-visible > .spectrum-Menu-sectionHeading`, `.spectrum-Menu-item:active > .spectrum-Menu-sectionHeading`, `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-item:hover > .spectrum-Menu-sectionHeading`, `.spectrum-Menu-backHeading`. <br/>Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-menu-section-header-font-size": {
+      "value": "18px",
+      "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`. <br/>Used by `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-backHeading`. <br/>Defaults to `var(--spectrum-font-size-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-section-header-min-width": {
+      "value": "48px",
+      "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`. <br/>Used by `.spectrum-Menu-sectionHeading`. <br/>Defaults to `var(--spectrum-component-height-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-section-description-line-height": {
+      "value": "var(--mod-menu-section-description-line-height-cjk, var(--spectrum-menu-section-description-line-height-cjk))",
+      "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu:lang(ja), .spectrum-Menu:lang(ko), .spectrum-Menu:lang(zh)`. <br/>Used by `.spectrum-Menu-sectionDescription`. <br/>Defaults to `var(--mod-menu-section-description-line-height-cjk, var(--spectrum-menu-section-description-line-height-cjk))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-section-description-line-height-cjk": {
+      "value": "1.5",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `--spectrum-menu-section-description-line-height`. <br/>Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-section-description-font-weight": {
+      "value": "400",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu-sectionDescription`. <br/>Defaults to `var(--spectrum-regular-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-section-description-color": {
+      "value": "var(--spectrum-gray-700)",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu-sectionDescription`. <br/>Defaults to `var(--spectrum-neutral-subdued-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-menu-section-header-to-description": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`. <br/>Used by `.spectrum-Menu-sectionDescription`. <br/>Defaults to `var(--spectrum-menu-section-header-to-description-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-section-header-to-description-medium": {
+      "value": "1px",
+      "description": "Used by `--spectrum-menu-section-header-to-description`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-label-to-description": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`. <br/>Used by `.spectrum-Menu-itemDescription`. <br/>Defaults to `var(--spectrum-menu-item-label-to-description-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-label-to-description-medium": {
+      "value": "1px",
+      "description": "Used by `--spectrum-menu-item-label-to-description`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-collapsible-icon-color": {
+      "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu-item.is-focus-visible > .spectrum-Menu-chevron, .spectrum-Menu-item:focus-visible > .spectrum-Menu-chevron`, `.spectrum-Menu-item:active > .spectrum-Menu-chevron`, `.spectrum-Menu-item:hover > .spectrum-Menu-chevron`. <br/>Defaults to `var(--spectrum-gray-900)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-menu-checkmark-icon-color-default": {
+      "value": "var(--spectrum-blue-900)",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu .spectrum-Menu-checkmark`. <br/>Defaults to `var(--spectrum-accent-color-900)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-menu-checkmark-icon-color-hover": {
+      "value": "var(--spectrum-blue-1000)",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu-item--drillIn.is-open .spectrum-Menu-checkmark`, `.spectrum-Menu-item:hover > .spectrum-Menu-checkmark`. <br/>Defaults to `var(--spectrum-accent-color-1000)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-menu-checkmark-icon-color-down": {
+      "value": "var(--spectrum-blue-1100)",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu-item:active > .spectrum-Menu-checkmark`. <br/>Defaults to `var(--spectrum-accent-color-1100)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-menu-checkmark-icon-color-focus": {
+      "value": "var(--spectrum-blue-1000)",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu-item.is-focus-visible > .spectrum-Menu-checkmark, .spectrum-Menu-item:focus-visible > .spectrum-Menu-checkmark`. <br/>Defaults to `var(--spectrum-accent-color-1000)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-menu-drillin-icon-color-default": {
+      "value": "var(--spectrum-gray-700)",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu-item--drillIn .spectrum-Menu-chevron`. <br/>Defaults to `var(--spectrum-neutral-subdued-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-menu-drillin-icon-color-hover": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu-item--drillIn.is-open .spectrum-Menu-chevron`, `.spectrum-Menu-item--drillIn:hover .spectrum-Menu-chevron`. <br/>Defaults to `var(--spectrum-neutral-subdued-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-menu-drillin-icon-color-down": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu-item--drillIn:active .spectrum-Menu-chevron`. <br/>Defaults to `var(--spectrum-neutral-subdued-content-color-down)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-menu-drillin-icon-color-focus": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu-item--drillIn.is-focused .spectrum-Menu-chevron, .spectrum-Menu-item--drillIn:focus .spectrum-Menu-chevron`. <br/>Defaults to `var(--spectrum-neutral-subdued-content-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-menu-item-value-color-default": {
+      "value": "var(--spectrum-gray-700)",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu-itemValue`. <br/>Defaults to `var(--spectrum-neutral-subdued-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-menu-item-value-color-hover": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu-item:hover > .spectrum-Menu-itemValue`. <br/>Defaults to `var(--spectrum-neutral-subdued-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-menu-item-value-color-down": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu-item:active > .spectrum-Menu-itemValue`. <br/>Defaults to `var(--spectrum-neutral-subdued-content-color-down)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-menu-item-value-color-focus": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemValue, .spectrum-Menu-item:focus-visible > .spectrum-Menu-itemValue`. <br/>Defaults to `var(--spectrum-neutral-subdued-content-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-menu-checkmark-display-hidden": {
+      "value": "none",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `--spectrum-menu-checkmark-display`. <br/>Defaults to `none`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-checkmark-display-shown": {
+      "value": "block",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `--spectrum-menu-checkmark-display`. <br/>Defaults to `block`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-checkmark-display": {
+      "value": "var(--spectrum-menu-checkmark-display-shown)",
+      "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.is-selectable .spectrum-Menu-item`, `.spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected`. <br/>Used by `.spectrum-Menu .spectrum-Menu-checkmark`. <br/>Defaults to `var(--spectrum-menu-checkmark-display-shown)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-min-height": {
+      "value": "48px",
+      "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`. <br/>Used by `.spectrum-Menu-item`. <br/>Defaults to `var(--spectrum-component-height-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-icon-height": {
+      "value": "26px",
+      "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`. <br/>Used by `.spectrum-Menu .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark, .spectrum-Menu-linkout)`. <br/>Defaults to `var(--spectrum-workflow-icon-size-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-icon-width": {
+      "value": "26px",
+      "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`. <br/>Used by `.spectrum-Menu .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark, .spectrum-Menu-linkout)`. <br/>Defaults to `var(--spectrum-workflow-icon-size-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-linkout-icon-height": {
+      "value": "14px",
+      "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`. <br/>Used by `.spectrum-Menu .spectrum-Menu-linkout`. <br/>Defaults to `var(--spectrum-link-out-icon-size-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-linkout-icon-width": {
+      "value": "14px",
+      "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`. <br/>Used by `.spectrum-Menu .spectrum-Menu-linkout`. <br/>Defaults to `var(--spectrum-link-out-icon-size-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-label-font-size": {
+      "value": "18px",
+      "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`. <br/>Used by `.spectrum-Menu-itemLabel, .spectrum-Menu-itemValue`. <br/>Defaults to `var(--spectrum-font-size-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-label-text-to-visual": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`. <br/>Used by `--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start`, `.spectrum-Menu .spectrum-Menu-itemIcon--workflowIcon`. <br/>Defaults to `var(--spectrum-text-to-visual-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-top-to-action": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu-item .spectrum-Menu-itemSwitch .spectrum-Switch-switch`. <br/>Defaults to `var(--spectrum-spacing-50)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-top-to-checkbox": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu-item .spectrum-Menu-itemCheckbox .spectrum-Checkbox-box`. <br/>Defaults to `var(--spectrum-spacing-50)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-top-to-workflow-icon": {
+      "value": "11px",
+      "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`. <br/>Used by `.spectrum-Menu .spectrum-Menu-itemIcon--workflowIcon`. <br/>Defaults to `var(--spectrum-component-top-to-workflow-icon-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-label-inline-edge-to-content": {
+      "value": "18px",
+      "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`. <br/>Used by `--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start`, `.spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected`, `.spectrum-Menu .spectrum-Menu-divider`, `.spectrum-Menu-item`, `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-item--collapsible .spectrum-Menu`, `.spectrum-Menu-back`. <br/>Defaults to `var(--spectrum-component-edge-to-text-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-top-edge-to-text": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`. <br/>Used by `.spectrum-Menu .spectrum-Menu-checkmark`, `.spectrum-Menu .spectrum-Menu-itemIcon--workflowIcon`, `.spectrum-Menu-item`, `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-itemThumbnail`, `.spectrum-Menu-item--collapsible > .spectrum-Menu-itemIcon`. <br/>Defaults to `var(--spectrum-component-top-to-text-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-bottom-edge-to-text": {
+      "value": "14px",
+      "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`. <br/>Used by `.spectrum-Menu-item`, `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-item--collapsible > .spectrum-Menu-itemIcon`. <br/>Defaults to `var(--spectrum-component-bottom-to-text-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-text-to-control": {
+      "value": "13px",
+      "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`. <br/>Used by `.spectrum-Menu .spectrum-Menu-checkmark, .spectrum-Menu .spectrum-Menu-chevron`, `.spectrum-Menu-item .spectrum-Menu-itemCheckbox .spectrum-Checkbox-box`. <br/>Defaults to `var(--spectrum-text-to-control-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-selectable-edge-to-text-not-selected": {
+      "value": "var(--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large)",
+      "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`. <br/>Used by `.spectrum-Menu.is-selectable .spectrum-Menu-item`. <br/>Defaults to `var(--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-selectable-edge-to-text-not-selected-medium": {
+      "description": "Used by `--spectrum-menu-item-selectable-edge-to-text-not-selected`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-description-font-size": {
+      "value": "16px",
+      "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`. <br/>Used by `.spectrum-Menu-itemDescription`. <br/>Defaults to `var(--spectrum-font-size-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-corner-radius": {
+      "value": "10px",
+      "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`. <br/>Used by `.spectrum-Menu-item`. <br/>Defaults to `var(--spectrum-corner-radius-700)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-checkmark-height": {
+      "value": "14px",
+      "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`. <br/>Used by `.spectrum-Menu .spectrum-Menu-checkmark`. <br/>Defaults to `var(--spectrum-checkmark-icon-size-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-checkmark-width": {
+      "value": "14px",
+      "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`. <br/>Used by `--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start`, `.spectrum-Menu .spectrum-Menu-checkmark`. <br/>Defaults to `var(--spectrum-checkmark-icon-size-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-top-to-checkmark": {
+      "value": "17px",
+      "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`. <br/>Used by `.spectrum-Menu .spectrum-Menu-checkmark`. <br/>Defaults to `var(--spectrum-menu-item-top-to-selected-icon-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-top-to-selected-icon-medium": {
+      "value": "11px",
+      "description": "Used by `--spectrum-menu-item-top-to-checkmark`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-chevron-height": {
+      "value": "14px",
+      "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`. <br/>Used by `.spectrum-Menu .spectrum-Menu-chevron`. <br/>Defaults to `var(--spectrum-chevron-icon-size-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-chevron-width": {
+      "value": "14px",
+      "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`. <br/>Used by `.spectrum-Menu .spectrum-Menu-chevron`. <br/>Defaults to `var(--spectrum-chevron-icon-size-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-top-to-thumbnail": {
+      "value": "11px",
+      "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`. <br/>Used by `.spectrum-Menu-itemThumbnail`. <br/>Defaults to `var(--spectrum-menu-item-top-to-thumbnail-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-top-to-thumbnail-medium": {
+      "value": "9px",
+      "description": "Used by `--spectrum-menu-item-top-to-thumbnail`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-thumbnail-to-label": {
+      "value": "9px",
+      "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`. <br/>Used by `.spectrum-Menu-itemThumbnail`. <br/>Defaults to `var(--spectrum-text-to-visual-400)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-thumbnail-height": {
+      "value": "56px",
+      "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`. <br/>Used by `.spectrum-Menu-itemThumbnail`. <br/>Defaults to `var(--spectrum-thumbnail-size-900)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-thumbnail-width": {
+      "value": "56px",
+      "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`. <br/>Used by `.spectrum-Menu-itemThumbnail`. <br/>Defaults to `var(--spectrum-thumbnail-size-900)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-thumbnail-opacity-disabled": {
+      "value": "0.3",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu-item.is-disabled .spectrum-Menu-itemThumbnail, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemThumbnail`. <br/>Defaults to `0.3`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-back-icon-margin": {
+      "value": "15px",
+      "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`. <br/>Used by `.spectrum-Menu .spectrum-Menu-backIcon`. <br/>Defaults to `var(--spectrum-navigational-indicator-top-to-back-icon-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start": {
+      "value": "calc(var(--spectrum-menu-item-label-inline-edge-to-content) + var(--spectrum-menu-item-checkmark-width) + var(--spectrum-menu-item-label-text-to-visual) + var(--spectrum-menu-item-focus-indicator-width))",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu-item--collapsible .spectrum-Menu .spectrum-Menu-item`. <br/>Defaults to `calc(var(--spectrum-menu-item-label-inline-edge-to-content) + var(--spectrum-menu-item-checkmark-width) + var(--spectrum-menu-item-label-text-to-visual) + var(--spectrum-menu-item-focus-indicator-width))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-focus-indicator-width": {
+      "value": "var(--mod-menu-item-focus-indicator-width, var(--spectrum-focus-indicator-thickness))",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start`, `--spectrum-menu-item-focus-margin`, `.spectrum-Menu-back:focus-visible, .spectrum-Menu-item:focus-visible`. <br/>Defaults to `var(--mod-menu-item-focus-indicator-width, var(--spectrum-focus-indicator-thickness))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-focus-indicator-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `--spectrum-menu-item-focus-indicator-color-default`. <br/>Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-menu-item-focus-indicator-offset": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `--spectrum-menu-item-focus-margin`, `.spectrum-Menu-back:focus-visible, .spectrum-Menu-item:focus-visible`. <br/>Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-focus-indicator-outline-style": {
+      "value": "solid",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu-back:focus-visible, .spectrum-Menu-item:focus-visible`. <br/>Defaults to `solid`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-focus-indicator-color-default": {
+      "value": "var(--highcontrast-menu-item-focus-indicator-color, var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color)))",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu-back:focus-visible, .spectrum-Menu-item:focus-visible`. <br/>Defaults to `var(--highcontrast-menu-item-focus-indicator-color, var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-menu-item-focus-margin": {
+      "value": "calc(var(--spectrum-menu-item-focus-indicator-offset) + var(--spectrum-menu-item-focus-indicator-width))",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu-item`, `.spectrum-Menu-sectionHeading`. <br/>Defaults to `calc(var(--spectrum-menu-item-focus-indicator-offset) + var(--spectrum-menu-item-focus-indicator-width))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-section-description-font-size": {
+      "value": "16px",
+      "description": "Defined in `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`. <br/>Used by `.spectrum-Menu-sectionDescription`. <br/>Defaults to `var(--spectrum-font-size-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-section-header-to-description-small": {
+      "value": "1px",
+      "description": "Used by `--spectrum-menu-section-header-to-description`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-label-to-description-small": {
+      "value": "1px",
+      "description": "Used by `--spectrum-menu-item-label-to-description`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-selectable-edge-to-text-not-selected-small": {
+      "description": "Used by `--spectrum-menu-item-selectable-edge-to-text-not-selected`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-top-to-selected-icon-small": {
+      "value": "7px",
+      "description": "Used by `--spectrum-menu-item-top-to-checkmark`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-top-to-thumbnail-small": {
+      "value": "8px",
+      "description": "Used by `--spectrum-menu-item-top-to-thumbnail`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-section-header-to-description-large": {
+      "value": "2px",
+      "description": "Used by `--spectrum-menu-section-header-to-description`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-label-to-description-large": {
+      "value": "2px",
+      "description": "Used by `--spectrum-menu-item-label-to-description`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-selectable-edge-to-text-not-selected-large": {
+      "description": "Used by `--spectrum-menu-item-selectable-edge-to-text-not-selected`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-top-to-selected-icon-large": {
+      "value": "14px",
+      "description": "Used by `--spectrum-menu-item-top-to-checkmark`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-top-to-thumbnail-large": {
+      "value": "10px",
+      "description": "Used by `--spectrum-menu-item-top-to-thumbnail`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-section-header-to-description-extra-large": {
+      "value": "2px",
+      "description": "Used by `--spectrum-menu-section-header-to-description`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-label-to-description-extra-large": {
+      "value": "2px",
+      "description": "Used by `--spectrum-menu-item-label-to-description`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large": {
+      "description": "Used by `--spectrum-menu-item-selectable-edge-to-text-not-selected`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-top-to-selected-icon-extra-large": {
+      "value": "17px",
+      "description": "Used by `--spectrum-menu-item-top-to-checkmark`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-top-to-thumbnail-extra-large": {
+      "value": "11px",
+      "description": "Used by `--spectrum-menu-item-top-to-thumbnail`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-divider-thickness": {
+      "value": "1px",
+      "description": "Defined in `.spectrum-Menu .spectrum-Menu-divider`, `.spectrum-Menu .spectrum-Menu-divider.spectrum-Divider--sizeS`. <br/>Used by `.spectrum-Menu .spectrum-Menu-divider`. <br/>Defaults to `var(--spectrum-divider-thickness-small)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-section-divider-height": {
+      "value": "12px",
+      "description": "Used by `.spectrum-Menu .spectrum-Menu-divider`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-menu-item-background-color-keyboard-focus": {
+      "value": "var(--spectrum-gray-100)",
+      "description": "Used by `.spectrum-Menu-item.is-focus-visible, .spectrum-Menu-item:focus-visible`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-menu-item-background-color-down": {
+      "value": "var(--spectrum-gray-100)",
+      "description": "Used by `.spectrum-Menu-item:active`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-menu-item-background-color-hover": {
+      "value": "var(--spectrum-gray-100)",
+      "description": "Used by `--spectrum-menu-item-background-color-default`, `.spectrum-Menu-item:hover`.",
+      "control": "color",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-line-height-100": {
+      "value": "1.3",
+      "description": "Used by `--spectrum-menu-item-label-line-height`, `--spectrum-menu-item-description-line-height`, `--spectrum-menu-section-header-line-height`, `--spectrum-menu-section-description-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-cjk-line-height-100": {
+      "value": "1.5",
+      "description": "Used by `--spectrum-menu-item-label-line-height-cjk`, `--spectrum-menu-item-description-line-height-cjk`, `--spectrum-menu-section-header-line-height-cjk`, `--spectrum-menu-section-description-line-height-cjk`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-100": {
+      "value": "8px",
+      "description": "Used by `--spectrum-menu-item-label-to-value-area-min-spacing`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-menu-item-label-content-color-default`, `--spectrum-menu-item-label-icon-color-default`, `--spectrum-menu-section-header-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-menu-item-label-content-color-hover`, `--spectrum-menu-item-label-icon-color-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-down": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-menu-item-label-content-color-down`, `--spectrum-menu-item-label-icon-color-down`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-key-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-menu-item-label-content-color-focus`, `--spectrum-menu-item-label-icon-color-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-disabled-content-color": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Used by `--spectrum-menu-item-label-content-color-disabled`, `--spectrum-menu-item-label-icon-color-disabled`, `--spectrum-menu-item-description-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-subdued-content-color-default": {
+      "value": "var(--spectrum-gray-700)",
+      "description": "Used by `--spectrum-menu-item-description-color-default`, `--spectrum-menu-section-description-color`, `--spectrum-menu-drillin-icon-color-default`, `--spectrum-menu-item-value-color-default`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-subdued-content-color-hover": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-menu-item-description-color-hover`, `--spectrum-menu-drillin-icon-color-hover`, `--spectrum-menu-item-value-color-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-subdued-content-color-down": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-menu-item-description-color-down`, `--spectrum-menu-drillin-icon-color-down`, `--spectrum-menu-item-value-color-down`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-subdued-content-color-key-focus": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-menu-item-description-color-focus`, `--spectrum-menu-drillin-icon-color-focus`, `--spectrum-menu-item-value-color-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-bold-font-weight": {
+      "value": "700",
+      "description": "Used by `--spectrum-menu-section-header-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-100": {
+      "value": "14px",
+      "description": "Used by `--spectrum-menu-section-header-font-size`, `--spectrum-menu-item-label-font-size`, `--spectrum-menu-item-description-font-size`, `--spectrum-menu-section-description-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-100": {
+      "value": "32px",
+      "description": "Used by `--spectrum-menu-section-header-min-width`, `--spectrum-menu-item-min-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-regular-font-weight": {
+      "value": "400",
+      "description": "Used by `--spectrum-menu-section-description-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-900": {
+      "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+      "description": "Used by `--spectrum-menu-collapsible-icon-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-accent-color-900": {
+      "value": "var(--spectrum-blue-900)",
+      "description": "Used by `--spectrum-menu-checkmark-icon-color-default`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-accent-color-1000": {
+      "value": "var(--spectrum-blue-1000)",
+      "description": "Used by `--spectrum-menu-checkmark-icon-color-hover`, `--spectrum-menu-checkmark-icon-color-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-accent-color-1100": {
+      "value": "var(--spectrum-blue-1100)",
+      "description": "Used by `--spectrum-menu-checkmark-icon-color-down`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-100": {
+      "value": "20px",
+      "description": "Used by `--spectrum-menu-item-icon-height`, `--spectrum-menu-item-icon-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-link-out-icon-size-100": {
+      "value": "12px",
+      "description": "Used by `--spectrum-menu-item-linkout-icon-height`, `--spectrum-menu-item-linkout-icon-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-menu-item-label-text-to-visual`, `--spectrum-menu-item-thumbnail-to-label`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-50": {
+      "value": "2px",
+      "description": "Used by `--spectrum-menu-item-top-to-action`, `--spectrum-menu-item-top-to-checkbox`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-workflow-icon-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-menu-item-top-to-workflow-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-text-100": {
+      "value": "12px",
+      "description": "Used by `--spectrum-menu-item-label-inline-edge-to-content`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-menu-item-top-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-100": {
+      "value": "9px",
+      "description": "Used by `--spectrum-menu-item-bottom-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-control-100": {
+      "value": "10px",
+      "description": "Used by `--spectrum-menu-item-text-to-control`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-75": {
+      "value": "12px",
+      "description": "Used by `--spectrum-menu-item-description-font-size`, `--spectrum-menu-item-label-font-size`, `--spectrum-menu-section-header-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-500": {
+      "value": "8px",
+      "description": "Used by `--spectrum-menu-item-corner-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-checkmark-icon-size-100": {
+      "value": "10px",
+      "description": "Used by `--spectrum-menu-item-checkmark-height`, `--spectrum-menu-item-checkmark-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-chevron-icon-size-100": {
+      "value": "10px",
+      "description": "Used by `--spectrum-menu-item-chevron-height`, `--spectrum-menu-item-chevron-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-200": {
+      "value": "7px",
+      "description": "Used by `--spectrum-menu-item-thumbnail-to-label`, `--spectrum-menu-item-label-text-to-visual`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-thumbnail-size-700": {
+      "value": "48px",
+      "description": "Used by `--spectrum-menu-item-thumbnail-height`, `--spectrum-menu-item-thumbnail-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-navigational-indicator-top-to-back-icon-medium": {
+      "value": "9px",
+      "description": "Used by `--spectrum-menu-back-icon-margin`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Used by `--spectrum-menu-item-focus-indicator-width`, `.spectrum-Menu-backButton:focus-visible`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Used by `--spectrum-menu-item-focus-indicator-color`, `.spectrum-Menu-backButton:focus-visible`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-gap": {
+      "value": "2px",
+      "description": "Used by `--spectrum-menu-item-focus-indicator-offset`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-75": {
+      "value": "24px",
+      "description": "Used by `--spectrum-menu-item-min-height`, `--spectrum-menu-section-header-min-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-75": {
+      "value": "16px",
+      "description": "Used by `--spectrum-menu-item-icon-height`, `--spectrum-menu-item-icon-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-75": {
+      "value": "5px",
+      "description": "Used by `--spectrum-menu-item-label-text-to-visual`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-text-75": {
+      "value": "9px",
+      "description": "Used by `--spectrum-menu-item-label-inline-edge-to-content`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-75": {
+      "value": "4px",
+      "description": "Used by `--spectrum-menu-item-top-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-75": {
+      "value": "5px",
+      "description": "Used by `--spectrum-menu-item-bottom-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-workflow-icon-75": {
+      "value": "4px",
+      "description": "Used by `--spectrum-menu-item-top-to-workflow-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-control-75": {
+      "value": "9px",
+      "description": "Used by `--spectrum-menu-item-text-to-control`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-50": {
+      "value": "11px",
+      "description": "Used by `--spectrum-menu-item-description-font-size`, `--spectrum-menu-section-description-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-checkmark-icon-size-75": {
+      "value": "10px",
+      "description": "Used by `--spectrum-menu-item-checkmark-height`, `--spectrum-menu-item-checkmark-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-chevron-icon-size-75": {
+      "value": "10px",
+      "description": "Used by `--spectrum-menu-item-chevron-height`, `--spectrum-menu-item-chevron-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-link-out-icon-size-75": {
+      "value": "10px",
+      "description": "Used by `--spectrum-menu-item-linkout-icon-height`, `--spectrum-menu-item-linkout-icon-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-400": {
+      "value": "7px",
+      "description": "Used by `--spectrum-menu-item-corner-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-thumbnail-size-500": {
+      "value": "40px",
+      "description": "Used by `--spectrum-menu-item-thumbnail-height`, `--spectrum-menu-item-thumbnail-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-navigational-indicator-top-to-back-icon-small": {
+      "value": "6px",
+      "description": "Used by `--spectrum-menu-back-icon-margin`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-200": {
+      "value": "40px",
+      "description": "Used by `--spectrum-menu-item-min-height`, `--spectrum-menu-section-header-min-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-200": {
+      "value": "22px",
+      "description": "Used by `--spectrum-menu-item-icon-height`, `--spectrum-menu-item-icon-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-200": {
+      "value": "16px",
+      "description": "Used by `--spectrum-menu-item-label-font-size`, `--spectrum-menu-section-header-font-size`, `--spectrum-menu-item-description-font-size`, `--spectrum-menu-section-description-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-text-200": {
+      "value": "15px",
+      "description": "Used by `--spectrum-menu-item-label-inline-edge-to-content`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-200": {
+      "value": "9px",
+      "description": "Used by `--spectrum-menu-item-top-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-200": {
+      "value": "11px",
+      "description": "Used by `--spectrum-menu-item-bottom-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-workflow-icon-200": {
+      "value": "9px",
+      "description": "Used by `--spectrum-menu-item-top-to-workflow-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-control-200": {
+      "value": "11px",
+      "description": "Used by `--spectrum-menu-item-text-to-control`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-checkmark-icon-size-200": {
+      "value": "12px",
+      "description": "Used by `--spectrum-menu-item-checkmark-height`, `--spectrum-menu-item-checkmark-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-chevron-icon-size-200": {
+      "value": "12px",
+      "description": "Used by `--spectrum-menu-item-chevron-height`, `--spectrum-menu-item-chevron-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-link-out-icon-size-200": {
+      "value": "14px",
+      "description": "Used by `--spectrum-menu-item-linkout-icon-height`, `--spectrum-menu-item-linkout-icon-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-600": {
+      "value": "9px",
+      "description": "Used by `--spectrum-menu-item-corner-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-300": {
+      "value": "8px",
+      "description": "Used by `--spectrum-menu-item-thumbnail-to-label`, `--spectrum-menu-item-label-text-to-visual`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-thumbnail-size-800": {
+      "value": "52px",
+      "description": "Used by `--spectrum-menu-item-thumbnail-height`, `--spectrum-menu-item-thumbnail-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-navigational-indicator-top-to-back-icon-large": {
+      "value": "12px",
+      "description": "Used by `--spectrum-menu-back-icon-margin`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-300": {
+      "value": "48px",
+      "description": "Used by `--spectrum-menu-item-min-height`, `--spectrum-menu-section-header-min-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-300": {
+      "value": "26px",
+      "description": "Used by `--spectrum-menu-item-icon-height`, `--spectrum-menu-item-icon-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-300": {
+      "value": "18px",
+      "description": "Used by `--spectrum-menu-item-label-font-size`, `--spectrum-menu-section-header-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-text-300": {
+      "value": "18px",
+      "description": "Used by `--spectrum-menu-item-label-inline-edge-to-content`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-300": {
+      "value": "12px",
+      "description": "Used by `--spectrum-menu-item-top-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-300": {
+      "value": "14px",
+      "description": "Used by `--spectrum-menu-item-bottom-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-workflow-icon-300": {
+      "value": "11px",
+      "description": "Used by `--spectrum-menu-item-top-to-workflow-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-control-300": {
+      "value": "13px",
+      "description": "Used by `--spectrum-menu-item-text-to-control`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-checkmark-icon-size-300": {
+      "value": "14px",
+      "description": "Used by `--spectrum-menu-item-checkmark-height`, `--spectrum-menu-item-checkmark-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-chevron-icon-size-300": {
+      "value": "14px",
+      "description": "Used by `--spectrum-menu-item-chevron-height`, `--spectrum-menu-item-chevron-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-700": {
+      "value": "10px",
+      "description": "Used by `--spectrum-menu-item-corner-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-400": {
+      "value": "9px",
+      "description": "Used by `--spectrum-menu-item-thumbnail-to-label`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-thumbnail-size-900": {
+      "value": "56px",
+      "description": "Used by `--spectrum-menu-item-thumbnail-height`, `--spectrum-menu-item-thumbnail-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-navigational-indicator-top-to-back-icon-extra-large": {
+      "value": "15px",
+      "description": "Used by `--spectrum-menu-back-icon-margin`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-divider-thickness-medium": {
+      "value": "2px",
+      "description": "Used by `--spectrum-menu-divider-thickness`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-divider-thickness-small": {
+      "value": "1px",
+      "description": "Used by `--spectrum-menu-divider-thickness`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-downstate-height": {
+      "description": "Used by `.spectrum-Menu-item:active`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-downstate-width": {
+      "description": "Used by `.spectrum-Menu-item:active`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-size-width-ratio-down": {
+      "value": "0.3333",
+      "description": "Used by `.spectrum-Menu-item:active`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-size-difference-down": {
+      "value": "-2px",
+      "description": "Used by `.spectrum-Menu-item:active`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {
+    "mod-checkbox-top-to-text": {
+      "category": "Passthrough"
+    },
+    "mod-checkbox-text-to-control": {
+      "category": "Passthrough"
+    },
+    "mod-switch-control-label-spacing": {
+      "category": "Passthrough"
+    },
+    "mod-switch-spacing-top-to-label": {
+      "category": "Passthrough"
+    }
+  },
+  "high-contrast": {
+    "highcontrast-menu-item-background-color-default": {
+      "value": "var(--mod-menu-item-background-color-default, var(--spectrum-menu-item-background-color-default))",
+      "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu .spectrum-Menu-item--drillIn.is-open`. <br/>Used by `--spectrum-menu-item-background-color-default`, `.spectrum-Menu-item`. <br/>Defaults to `var(--mod-menu-item-background-color-default, var(--spectrum-menu-item-background-color-default))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-menu-item-focus-indicator-color": {
+      "value": "var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color))",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `--spectrum-menu-item-focus-indicator-color-default`. <br/>Defaults to `var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-menu-item-color-default": {
+      "value": "var(--mod-menu-back-heading-color, var(--spectrum-menu-section-header-color))",
+      "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu .spectrum-Menu-item--drillIn.is-open`. <br/>Used by `.spectrum-Menu .spectrum-Menu-itemIcon`, `.spectrum-Menu .spectrum-Menu-backIcon`, `.spectrum-Menu-itemLabel`, `.spectrum-Menu-itemValue`, `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-itemDescription`, `.spectrum-Menu-item--drillIn .spectrum-Menu-chevron`, `.spectrum-Menu-backHeading`, `--highcontrast-menu-item-color-focus`. <br/>Defaults to `var(--mod-menu-back-heading-color, var(--spectrum-menu-section-header-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-menu-checkmark-icon-color-default": {
+      "value": "var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover))",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu .spectrum-Menu-checkmark`, `.spectrum-Menu-item--drillIn.is-open .spectrum-Menu-checkmark`. <br/>Defaults to `var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-menu-item-background-color-focus": {
+      "value": "var(--mod-menu-item-background-color-hover, var(--spectrum-menu-item-background-color-hover))",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu-item.is-focus-visible, .spectrum-Menu-item:focus-visible`, `.spectrum-Menu-item:active`, `.spectrum-Menu-item:hover`. <br/>Defaults to `var(--mod-menu-item-background-color-hover, var(--spectrum-menu-item-background-color-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-menu-item-color-focus": {
+      "value": "var(--mod-menu-drillin-icon-color-down, var(--spectrum-menu-drillin-icon-color-down))",
+      "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu .spectrum-Menu-item--collapsible.is-open.is-focused, .spectrum-Menu .spectrum-Menu-item--collapsible.is-open:active, .spectrum-Menu .spectrum-Menu-item--collapsible.is-open:focus`, `.spectrum-Menu .spectrum-Menu-item--collapsible.is-open:hover`. <br/>Used by `.spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemLabel, .spectrum-Menu-item:focus-visible > .spectrum-Menu-itemLabel`, `.spectrum-Menu-item.is-focus-visible > .spectrum-Menu-sectionHeading, .spectrum-Menu-item:focus-visible > .spectrum-Menu-sectionHeading`, `.spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemDescription, .spectrum-Menu-item:focus-visible > .spectrum-Menu-itemDescription`, `.spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemValue, .spectrum-Menu-item:focus-visible > .spectrum-Menu-itemValue`, `.spectrum-Menu-item.is-focus-visible .spectrum-Menu-linkout, .spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark), .spectrum-Menu-item:focus-visible .spectrum-Menu-linkout, .spectrum-Menu-item:focus-visible > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`, `.spectrum-Menu-item.is-focus-visible > .spectrum-Menu-chevron, .spectrum-Menu-item:focus-visible > .spectrum-Menu-chevron`, `.spectrum-Menu-item.is-focus-visible > .spectrum-Menu-checkmark, .spectrum-Menu-item:focus-visible > .spectrum-Menu-checkmark`, `.spectrum-Menu-item:active > .spectrum-Menu-itemLabel`, `.spectrum-Menu-item:active > .spectrum-Menu-sectionHeading`, `.spectrum-Menu-item:active > .spectrum-Menu-itemDescription`, `.spectrum-Menu-item:active > .spectrum-Menu-itemValue`, `.spectrum-Menu-item:active .spectrum-Menu-linkout, .spectrum-Menu-item:active > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`, `.spectrum-Menu-item:active > .spectrum-Menu-chevron`, `.spectrum-Menu-item:active > .spectrum-Menu-checkmark`, `.spectrum-Menu-item--drillIn.is-open .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`, `.spectrum-Menu-item--drillIn.is-open .spectrum-Menu-chevron`, `.spectrum-Menu-item:hover > .spectrum-Menu-itemLabel`, `.spectrum-Menu-item:hover > .spectrum-Menu-sectionHeading`, `.spectrum-Menu-item:hover > .spectrum-Menu-itemDescription`, `.spectrum-Menu-item:hover > .spectrum-Menu-itemValue`, `.spectrum-Menu-item:hover .spectrum-Menu-linkout, .spectrum-Menu-item:hover > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`, `.spectrum-Menu-item:hover > .spectrum-Menu-chevron`, `.spectrum-Menu-item:hover > .spectrum-Menu-checkmark`, `.spectrum-Menu-item--drillIn:hover .spectrum-Menu-chevron`, `.spectrum-Menu-item--drillIn.is-focused .spectrum-Menu-chevron, .spectrum-Menu-item--drillIn:focus .spectrum-Menu-chevron`, `.spectrum-Menu-item--drillIn:active .spectrum-Menu-chevron`. <br/>Defaults to `var(--mod-menu-drillin-icon-color-down, var(--spectrum-menu-drillin-icon-color-down))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-menu-item-color-disabled": {
+      "value": "var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled))",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `.spectrum-Menu-item.is-disabled .spectrum-Menu-itemLabel, .spectrum-Menu-item.is-disabled .spectrum-Menu-itemValue, .spectrum-Menu-item.is-disabled .spectrum-Menu-sectionHeading, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemLabel, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemValue, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-sectionHeading`, `.spectrum-Menu-item.is-disabled .spectrum-Menu-itemDescription, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemDescription`, `.spectrum-Menu-item.is-disabled .spectrum-Menu-itemIcon, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemIcon`, `.spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemLabel, .spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemValue, .spectrum-Menu-item.is-disabled:hover .spectrum-Menu-sectionHeading, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemLabel, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemValue, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-sectionHeading`, `.spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemDescription, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemDescription`, `.spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemIcon, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemIcon`. <br/>Defaults to `var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-menu-item-selected-background-color": {
+      "value": "var(--mod-menu-item-background-color-hover, var(--spectrum-menu-item-background-color-hover))",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `--spectrum-menu-item-background-color-default`, `--highcontrast-menu-item-background-color-default`. <br/>Defaults to `var(--mod-menu-item-background-color-hover, var(--spectrum-menu-item-background-color-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-menu-item-selected-color": {
+      "value": "SelectedItemText",
+      "description": "Defined in `.spectrum-Menu`. <br/>Used by `--highcontrast-menu-item-color-default`. <br/>Defaults to `SelectedItemText`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-checkbox-highlight-color-hover": {
+      "value": "ButtonText",
+      "description": "Defined in `.spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemCheckbox`, `.spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemCheckbox`. <br/>Defaults to `ButtonText`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-checkbox-highlight-color-default": {
+      "value": "ButtonText",
+      "description": "Defined in `.spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemCheckbox`, `.spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemCheckbox`. <br/>Defaults to `ButtonText`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-switch-handle-border-color-hover": {
+      "value": "ButtonText",
+      "description": "Defined in `.spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemSwitch`, `.spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemSwitch`. <br/>Defaults to `ButtonText`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-switch-handle-border-color-selected-default": {
+      "value": "ButtonText",
+      "description": "Defined in `.spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemSwitch`, `.spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemSwitch`. <br/>Defaults to `ButtonText`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-switch-handle-border-color-selected-hover": {
+      "value": "ButtonText",
+      "description": "Defined in `.spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemSwitch`, `.spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemSwitch`. <br/>Defaults to `ButtonText`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-switch-background-color-selected-default": {
+      "value": "ButtonText",
+      "description": "Defined in `.spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemSwitch`, `.spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemSwitch`. <br/>Defaults to `ButtonText`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-switch-background-color-selected-hover": {
+      "value": "ButtonText",
+      "description": "Defined in `.spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemSwitch`, `.spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemSwitch`. <br/>Defaults to `ButtonText`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/menu/stories/menu.stories.js b/components/menu/stories/menu.stories.js
index 75bda11d395..c78e8f5f2b3 100644
--- a/components/menu/stories/menu.stories.js
+++ b/components/menu/stories/menu.stories.js
@@ -12,8 +12,6 @@ import {
 	isSelected,
 	size,
 } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import {
 	MenuItemGroup,
 	MenuTraySubmenu,
@@ -27,6 +25,10 @@ import {
 	Template,
 } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * A menu is used for creating a menu list. The various elements inside a menu can be: a menu group, a menu item, or a
  * menu divider. Often a menu will appear in a popover so that it displays as a toggling menu.
@@ -115,6 +117,10 @@ export default {
 		status: {
 			type: "migrated",
 		},
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 	decorators: [withDownStateDimensionCapture],
 	tags: ["migrated"],
diff --git a/components/menu/stories/template.js b/components/menu/stories/template.js
index 2415b816acf..5c052df4c96 100644
--- a/components/menu/stories/template.js
+++ b/components/menu/stories/template.js
@@ -8,7 +8,7 @@ import { Template as Thumbnail } from "@spectrum-css/thumbnail/stories/template.
 import { Template as Tray } from "@spectrum-css/tray/stories/template.js";
 
 import { Container, getRandomId } from "@spectrum-css/preview/decorators";
-import { html } from "lit";
+import { html, nothing } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
@@ -41,24 +41,18 @@ const Label = ({
 }) => {
 	if (isCollapsible) {
 		return html`<span
-					class=${classMap({
-						["spectrum-Menu-sectionHeading"]: true,
-						[`${rootClass}Label--truncate`]: shouldTruncate,
-					})}
-				>
-					${label}
-				</span>`;
-	}
-	else {
-		return html`<span
-				class=${classMap({
-					[`${rootClass}Label`]: true,
-					["spectrum-Switch-label"]: hasActions,
-					["spectrum-Menu-itemLabel--truncate"]: shouldTruncate,
-				})}>
-				${label}
-				</span>`;
+			class=${classMap({
+				["spectrum-Menu-sectionHeading"]: true,
+				[`${rootClass}Label--truncate`]: shouldTruncate,
+			})}
+		>${label}</span>`;
 	}
+	return html`<span
+		class=${classMap({
+			[`${rootClass}Label`]: true,
+			["spectrum-Switch-label"]: hasActions,
+			["spectrum-Menu-itemLabel--truncate"]: shouldTruncate,
+		})}>${label}</span>`;
 };
 
 const Visual = ({
@@ -106,9 +100,8 @@ const StartAction = ({
 	rootClass,
 	selectionMode,
 	size,
-	context
-}) => {
-	if (isUnavailable) return null;
+} = {}, context = {}) => {
+	if (isUnavailable) return nothing;
 
 	if (isCollapsible || (selectionMode == "single" && isSelected)) {
 		return html`
@@ -141,7 +134,7 @@ const StartAction = ({
 			},
 			context)}`;
 	}
-	return null;
+	return nothing;
 };
 
 const EndAction = ({
@@ -156,8 +149,7 @@ const EndAction = ({
 	selectionMode,
 	size,
 	value,
-	context
-}) => html`
+} = {}, context = {}) => html`
 	${when(value, () => html`
 		<span
 			class=${classMap({
@@ -257,7 +249,7 @@ export const MenuItem = (
 		exclusiveFeatures = "none",
 		hasExternalLink = false,
 		hasActions = false,
-		id = getRandomId("menuitem"),
+		id = getRandomId("menu-item"),
 		idx = 0,
 		isActive = false,
 		isCollapsible = false,
@@ -319,11 +311,11 @@ export const MenuItem = (
 			aria-disabled=${isDisabled ? "true" : "false"}
 			tabindex=${ifDefined(!isDisabled ? "0" : undefined)}
 		>
-			${StartAction({ hasActions, idx, isCollapsible, isDisabled, isSelected, isUnavailable, rootClass, selectionMode, size, context })}
+			${StartAction({ hasActions, idx, isCollapsible, isDisabled, isSelected, isUnavailable, rootClass, selectionMode, size }, context)}
 			${Visual({ iconName, iconSet, rootClass, size, thumbnailUrl, hasExternalLink, isDrillIn })}
 			${Label({ hasActions, isCollapsible, label, rootClass, shouldTruncate })}
 			${when(description, () => Description({ description, rootClass }))}
-			${EndAction({ hasExternalLink, hasActions, idx, isUnavailable, isDisabled, isDrillIn, isSelected, rootClass, selectionMode, size, value, context })}
+			${EndAction({ hasExternalLink, hasActions, idx, isUnavailable, isDisabled, isDrillIn, isSelected, rootClass, selectionMode, size, value }, context)}
 			${when(isCollapsible && items.length > 0, () =>
 				Template(
 					{
@@ -343,7 +335,7 @@ export const MenuGroup = (
 	{
 		hasActions = false,
 		heading,
-		id = getRandomId("menugroup"),
+		id = getRandomId("menu-group"),
 		idx = 0,
 		items = [],
 		isDisabled = false,
diff --git a/components/meter/dist/metadata.json b/components/meter/dist/metadata.json
index 53ce94ace9a..ef811bf1ac0 100644
--- a/components/meter/dist/metadata.json
+++ b/components/meter/dist/metadata.json
@@ -10,31 +10,106 @@
     ".spectrum-Meter.spectrum-Meter--sizeS",
     ".spectrum-Meter.spectrum-Meter--sizeXL"
   ],
-  "modifiers": [
-    "--mod-meter-help-text-to-progress-bar",
-    "--mod-meter-max-width",
-    "--mod-meter-min-width"
-  ],
-  "component": [
-    "--spectrum-meter-help-text-to-progress-bar",
-    "--spectrum-meter-maximum-width",
-    "--spectrum-meter-minimum-width",
-    "--spectrum-meter-thickness-extra-large",
-    "--spectrum-meter-thickness-large",
-    "--spectrum-meter-thickness-medium",
-    "--spectrum-meter-thickness-small"
-  ],
-  "global": [
-    "--spectrum-negative-visual-color",
-    "--spectrum-notice-visual-color",
-    "--spectrum-positive-visual-color",
-    "--spectrum-spacing-75"
-  ],
-  "passthroughs": [
-    "--mod-progressbar-fill-color",
-    "--mod-progressbar-max-size",
-    "--mod-progressbar-min-size",
-    "--mod-progressbar-thickness"
-  ],
-  "high-contrast": []
+  "modifiers": {
+    "mod-meter-max-width": {
+      "description": "Used by `--mod-progressbar-max-size`. <br/>Defaults to `var(--spectrum-meter-maximum-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-meter-min-width": {
+      "description": "Used by `--mod-progressbar-min-size`. <br/>Defaults to `var(--spectrum-meter-minimum-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-meter-help-text-to-progress-bar": {
+      "description": "Used by `.spectrum-Meter .spectrum-ProgressBar-helptext`. <br/>Defaults to `var(--spectrum-meter-help-text-to-progress-bar)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-meter-maximum-width": {
+      "value": "768px",
+      "description": "Used by `--mod-progressbar-max-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-meter-minimum-width": {
+      "value": "48px",
+      "description": "Used by `--mod-progressbar-min-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-meter-help-text-to-progress-bar": {
+      "value": "4px",
+      "description": "Defined in `.spectrum-Meter`. <br/>Used by `.spectrum-Meter .spectrum-ProgressBar-helptext`. <br/>Defaults to `var(--spectrum-spacing-75)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-meter-thickness-medium": {
+      "value": "6px",
+      "description": "Used by `--mod-progressbar-thickness`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-meter-thickness-small": {
+      "value": "4px",
+      "description": "Used by `--mod-progressbar-thickness`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-meter-thickness-large": {
+      "value": "8px",
+      "description": "Used by `--mod-progressbar-thickness`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-meter-thickness-extra-large": {
+      "value": "10px",
+      "description": "Used by `--mod-progressbar-thickness`.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-spacing-75": {
+      "value": "4px",
+      "description": "Used by `--spectrum-meter-help-text-to-progress-bar`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-positive-visual-color": {
+      "value": "var(--spectrum-positive-color-800)",
+      "description": "Used by `--mod-progressbar-fill-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-notice-visual-color": {
+      "value": "var(--spectrum-notice-color-800)",
+      "description": "Used by `--mod-progressbar-fill-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-visual-color": {
+      "value": "var(--spectrum-negative-color-800)",
+      "description": "Used by `--mod-progressbar-fill-color`.",
+      "control": "color",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {
+    "mod-progressbar-max-size": {
+      "category": "Passthrough"
+    },
+    "mod-progressbar-min-size": {
+      "category": "Passthrough"
+    },
+    "mod-progressbar-thickness": {
+      "category": "Passthrough"
+    },
+    "mod-progressbar-fill-color": {
+      "category": "Passthrough"
+    }
+  },
+  "high-contrast": {}
 }
diff --git a/components/meter/stories/meter.stories.js b/components/meter/stories/meter.stories.js
index f86cbad0dcd..c67d3e54e53 100644
--- a/components/meter/stories/meter.stories.js
+++ b/components/meter/stories/meter.stories.js
@@ -2,11 +2,13 @@ import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { size, staticColor } from "@spectrum-css/preview/types";
 import { default as ProgressBar } from "@spectrum-css/progressbar/stories/progressbar.stories.js";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { MeterGroup } from "./meter.test.js";
 import { FillGroup, Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * The meter component is a visual representation of a quantity or an achievement. The progress is determined by user actions, rather than system actions.
  *
@@ -61,6 +63,10 @@ export default {
 		status: {
 			type: "migrated",
 		},
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 	tags: ["migrated"],
 };
diff --git a/components/miller/dist/metadata.json b/components/miller/dist/metadata.json
index fbb3770d558..21ed8ef8fc6 100644
--- a/components/miller/dist/metadata.json
+++ b/components/miller/dist/metadata.json
@@ -5,14 +5,37 @@
     ".spectrum-MillerColumns-item",
     ".spectrum-MillerColumns-item:first-child"
   ],
-  "modifiers": [
-    "--mod-millercolumns-inline-size",
-    "--mod-millercolumns-margin-inline-end",
-    "--mod-millercolumns-margin-inline-start",
-    "--mod-millercolumns-padding"
-  ],
-  "component": [],
-  "global": ["--spectrum-spacing-100"],
-  "passthroughs": [],
-  "high-contrast": []
+  "modifiers": {
+    "mod-millercolumns-padding": {
+      "description": "Used by `.spectrum-MillerColumns`. <br/>Defaults to `var(--spectrum-spacing-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-millercolumns-inline-size": {
+      "description": "Used by `.spectrum-MillerColumns-item`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-millercolumns-margin-inline-end": {
+      "description": "Used by `.spectrum-MillerColumns-item`. <br/>Defaults to `var(--spectrum-spacing-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-millercolumns-margin-inline-start": {
+      "description": "Used by `.spectrum-MillerColumns-item:first-child`. <br/>Defaults to `var(--spectrum-spacing-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {},
+  "global": {
+    "spectrum-spacing-100": {
+      "value": "8px",
+      "description": "Used by `.spectrum-MillerColumns`, `.spectrum-MillerColumns-item`, `.spectrum-MillerColumns-item:first-child`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {}
 }
diff --git a/components/miller/stories/miller.stories.js b/components/miller/stories/miller.stories.js
index a255362e891..54ba1f1ea83 100644
--- a/components/miller/stories/miller.stories.js
+++ b/components/miller/stories/miller.stories.js
@@ -1,9 +1,11 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { MillerGroup } from "./miller.test.js";
 import { Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * Miller columns are a browsing/visualization technique that can be applied to tree structures. The columns allow for multiple levels of the hierarchy to be open at once and provide a visual representation of the current location.
  */
@@ -79,6 +81,10 @@ export default {
 	parameters: {
 		packageJson,
 		metadata,
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 };
 
diff --git a/components/modal/dist/metadata.json b/components/modal/dist/metadata.json
index c27c44872d7..662f06244b4 100644
--- a/components/modal/dist/metadata.json
+++ b/components/modal/dist/metadata.json
@@ -11,42 +11,175 @@
     ".spectrum-Modal-wrapper.is-open",
     ".spectrum-Modal.is-open"
   ],
-  "modifiers": [
-    "--mod-modal-background-color",
-    "--mod-modal-confirm-border-radius",
-    "--mod-modal-confirm-entry-animation-delay",
-    "--mod-modal-confirm-entry-animation-duration",
-    "--mod-modal-confirm-exit-animation-delay",
-    "--mod-modal-confirm-exit-animation-duration",
-    "--mod-modal-fullscreen-margin",
-    "--mod-modal-max-height",
-    "--mod-modal-max-width",
-    "--mod-modal-transition-animation-duration"
-  ],
-  "component": [
-    "--spectrum-modal-background-color",
-    "--spectrum-modal-confirm-border-radius",
-    "--spectrum-modal-confirm-entry-animation-delay",
-    "--spectrum-modal-confirm-entry-animation-duration",
-    "--spectrum-modal-confirm-exit-animation-delay",
-    "--spectrum-modal-confirm-exit-animation-duration",
-    "--spectrum-modal-fullscreen-margin",
-    "--spectrum-modal-max-height",
-    "--spectrum-modal-max-width",
-    "--spectrum-modal-takeover-window-to-edge",
-    "--spectrum-modal-transition-animation-duration"
-  ],
-  "global": [
-    "--spectrum-animation-duration-0",
-    "--spectrum-animation-duration-100",
-    "--spectrum-animation-duration-200",
-    "--spectrum-animation-duration-500",
-    "--spectrum-animation-ease-in",
-    "--spectrum-animation-ease-out",
-    "--spectrum-corner-radius-extra-large-default",
-    "--spectrum-dialog-confirm-entry-animation-distance",
-    "--spectrum-window-to-edge"
-  ],
-  "passthroughs": [],
-  "high-contrast": []
+  "modifiers": {
+    "mod-modal-confirm-entry-animation-duration": {
+      "description": "Used by `--spectrum-modal-confirm-entry-animation-duration`. <br/>Defaults to `var(--spectrum-animation-duration-500)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-modal-confirm-entry-animation-delay": {
+      "description": "Used by `--spectrum-modal-confirm-entry-animation-delay`. <br/>Defaults to `var(--spectrum-animation-duration-200)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-modal-confirm-exit-animation-duration": {
+      "description": "Used by `--spectrum-modal-confirm-exit-animation-duration`. <br/>Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-modal-confirm-exit-animation-delay": {
+      "description": "Used by `--spectrum-modal-confirm-exit-animation-delay`. <br/>Defaults to `var(--spectrum-animation-duration-0)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-modal-background-color": {
+      "description": "Used by `--spectrum-modal-background-color`.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-modal-confirm-border-radius": {
+      "description": "Used by `--spectrum-modal-confirm-border-radius`. <br/>Defaults to `var(--spectrum-corner-radius-extra-large-default)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-modal-transition-animation-duration": {
+      "description": "Used by `--spectrum-modal-transition-animation-duration`. <br/>Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-modal-max-height": {
+      "description": "Used by `.spectrum-Modal`. <br/>Defaults to `var(--spectrum-modal-max-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-modal-max-width": {
+      "description": "Used by `.spectrum-Modal`. <br/>Defaults to `var(--spectrum-modal-max-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-modal-fullscreen-margin": {
+      "description": "Used by `.spectrum-Modal--fullscreen`. <br/>Defaults to `var(--spectrum-modal-fullscreen-margin)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-modal-confirm-entry-animation-duration": {
+      "value": "var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-animation-duration-500))",
+      "description": "Defined in `.spectrum-Modal`. <br/>Used by `.spectrum-Modal.is-open`. <br/>Defaults to `var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-animation-duration-500))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-modal-confirm-entry-animation-delay": {
+      "value": "var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-animation-duration-200))",
+      "description": "Defined in `.spectrum-Modal`. <br/>Used by `.spectrum-Modal.is-open`. <br/>Defaults to `var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-animation-duration-200))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-modal-confirm-exit-animation-duration": {
+      "value": "var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-animation-duration-100))",
+      "description": "Defined in `.spectrum-Modal`. <br/>Used by `.spectrum-Modal`. <br/>Defaults to `var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-animation-duration-100))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-modal-confirm-exit-animation-delay": {
+      "value": "var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-animation-duration-0))",
+      "description": "Defined in `.spectrum-Modal`. <br/>Used by `.spectrum-Modal`. <br/>Defaults to `var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-animation-duration-0))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-modal-fullscreen-margin": {
+      "value": "40px",
+      "description": "Defined in `.spectrum-Modal`. <br/>Used by `.spectrum-Modal--fullscreen`. <br/>Defaults to `var(--spectrum-window-to-edge)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-modal-takeover-window-to-edge": {
+      "value": "0",
+      "description": "Defined in `.spectrum-Modal`. <br/>Used by `.spectrum-Modal--fullscreenTakeover`. <br/>Defaults to `0`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-modal-max-height": {
+      "value": "90vh",
+      "description": "Defined in `.spectrum-Modal`. <br/>Used by `.spectrum-Modal`. <br/>Defaults to `90vh`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-modal-max-width": {
+      "value": "90%",
+      "description": "Defined in `.spectrum-Modal`. <br/>Used by `.spectrum-Modal`. <br/>Defaults to `90%`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-modal-background-color": {
+      "value": "var(--mod-modal-background-color, transparent)",
+      "description": "Defined in `.spectrum-Modal`. <br/>Used by `.spectrum-Modal`. <br/>Defaults to `var(--mod-modal-background-color, transparent)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-modal-confirm-border-radius": {
+      "value": "var(--mod-modal-confirm-border-radius, var(--spectrum-corner-radius-extra-large-default))",
+      "description": "Defined in `.spectrum-Modal`. <br/>Used by `.spectrum-Modal`. <br/>Defaults to `var(--mod-modal-confirm-border-radius, var(--spectrum-corner-radius-extra-large-default))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-modal-transition-animation-duration": {
+      "value": "var(--mod-modal-transition-animation-duration, var(--spectrum-animation-duration-100))",
+      "description": "Defined in `.spectrum-Modal`. <br/>Used by `.spectrum-Modal-wrapper`. <br/>Defaults to `var(--mod-modal-transition-animation-duration, var(--spectrum-animation-duration-100))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-animation-duration-500": {
+      "description": "Used by `--spectrum-modal-confirm-entry-animation-duration`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-animation-duration-200": {
+      "description": "Used by `--spectrum-modal-confirm-entry-animation-delay`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-animation-duration-100": {
+      "description": "Used by `--spectrum-modal-confirm-exit-animation-duration`, `--spectrum-modal-transition-animation-duration`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-animation-duration-0": {
+      "description": "Used by `--spectrum-modal-confirm-exit-animation-delay`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-window-to-edge": {
+      "value": "40px",
+      "description": "Used by `--spectrum-modal-fullscreen-margin`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-extra-large-default": {
+      "value": "16px",
+      "description": "Used by `--spectrum-modal-confirm-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-dialog-confirm-entry-animation-distance": {
+      "description": "Used by `.spectrum-Modal`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-animation-ease-in": {
+      "description": "Used by `.spectrum-Modal`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-animation-ease-out": {
+      "description": "Used by `.spectrum-Modal.is-open`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {}
 }
diff --git a/components/modal/stories/modal.stories.js b/components/modal/stories/modal.stories.js
index 560f5663e43..332bb426fb8 100644
--- a/components/modal/stories/modal.stories.js
+++ b/components/modal/stories/modal.stories.js
@@ -2,9 +2,11 @@ import { withUnderlayWrapper } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isOpen } from "@spectrum-css/preview/types";
 import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
+import { ModalGroup } from "./modal.test.js";
+
+// Local assets to render the component styles and structure
 import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
-import { ModalGroup } from "./modal.test.js";
 
 /**
  * A modal component is a dialog box/popup window that is displayed on top of the current page using `position: fixed`.
@@ -51,6 +53,10 @@ export default {
 		},
 		packageJson,
 		metadata,
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 	decorators: [
 		withUnderlayWrapper,
diff --git a/components/opacitycheckerboard/dist/metadata.json b/components/opacitycheckerboard/dist/metadata.json
index 31fd76317b9..7450c952657 100644
--- a/components/opacitycheckerboard/dist/metadata.json
+++ b/components/opacitycheckerboard/dist/metadata.json
@@ -4,23 +4,79 @@
     ".spectrum-OpacityCheckerboard",
     ".spectrum-OpacityCheckerboard--sizeS"
   ],
-  "modifiers": [
-    "--mod-opacity-checkerboard-dark",
-    "--mod-opacity-checkerboard-light",
-    "--mod-opacity-checkerboard-position",
-    "--mod-opacity-checkerboard-size"
-  ],
-  "component": [
-    "--spectrum-opacity-checkerboard-dark",
-    "--spectrum-opacity-checkerboard-light",
-    "--spectrum-opacity-checkerboard-position",
-    "--spectrum-opacity-checkerboard-size",
-    "--spectrum-opacity-checkerboard-square-dark",
-    "--spectrum-opacity-checkerboard-square-light",
-    "--spectrum-opacity-checkerboard-square-size-medium",
-    "--spectrum-opacity-checkerboard-square-size-small"
-  ],
-  "global": [],
-  "passthroughs": [],
-  "high-contrast": []
+  "modifiers": {
+    "mod-opacity-checkerboard-dark": {
+      "description": "Used by `--spectrum-opacity-checkerboard-dark`. <br/>Defaults to `var(--spectrum-opacity-checkerboard-square-dark)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-opacity-checkerboard-light": {
+      "description": "Used by `--spectrum-opacity-checkerboard-light`. <br/>Defaults to `var(--spectrum-opacity-checkerboard-square-light)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-opacity-checkerboard-size": {
+      "description": "Used by `--spectrum-opacity-checkerboard-size`. <br/>Defaults to `var(--spectrum-opacity-checkerboard-square-size-small)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-opacity-checkerboard-position": {
+      "description": "Used by `--spectrum-opacity-checkerboard-position`.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-opacity-checkerboard-dark": {
+      "value": "var(--mod-opacity-checkerboard-dark, var(--spectrum-opacity-checkerboard-square-dark))",
+      "description": "Defined in `.spectrum-OpacityCheckerboard`. <br/>Used by `.spectrum-OpacityCheckerboard`. <br/>Defaults to `var(--mod-opacity-checkerboard-dark, var(--spectrum-opacity-checkerboard-square-dark))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-opacity-checkerboard-square-dark": {
+      "value": "var(--spectrum-gray-200)",
+      "description": "Used by `--spectrum-opacity-checkerboard-dark`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-opacity-checkerboard-light": {
+      "value": "var(--mod-opacity-checkerboard-light, var(--spectrum-opacity-checkerboard-square-light))",
+      "description": "Defined in `.spectrum-OpacityCheckerboard`. <br/>Used by `.spectrum-OpacityCheckerboard`. <br/>Defaults to `var(--mod-opacity-checkerboard-light, var(--spectrum-opacity-checkerboard-square-light))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-opacity-checkerboard-square-light": {
+      "value": "rgb(255, 255, 255)",
+      "description": "Used by `--spectrum-opacity-checkerboard-light`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-opacity-checkerboard-size": {
+      "value": "var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-square-size-small))",
+      "description": "Defined in `.spectrum-OpacityCheckerboard`, `.spectrum-OpacityCheckerboard--sizeS`. <br/>Used by `.spectrum-OpacityCheckerboard`. <br/>Defaults to `var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-square-size-small))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-opacity-checkerboard-square-size-medium": {
+      "value": "8px",
+      "description": "Used by `--spectrum-opacity-checkerboard-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-opacity-checkerboard-position": {
+      "value": "var(--mod-opacity-checkerboard-position, left top)",
+      "description": "Defined in `.spectrum-OpacityCheckerboard`. <br/>Used by `.spectrum-OpacityCheckerboard`. <br/>Defaults to `var(--mod-opacity-checkerboard-position, left top)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-opacity-checkerboard-square-size-small": {
+      "value": "4px",
+      "description": "Used by `--spectrum-opacity-checkerboard-size`.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {},
+  "passthroughs": {},
+  "high-contrast": {}
 }
diff --git a/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js b/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js
index b37b326429a..03658377824 100644
--- a/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js
+++ b/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js
@@ -1,9 +1,11 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { OpacityCheckboardGroup } from "./opacitycheckerboard.test.js";
 import { Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * Opacity checkerboard is used with other components to highlight opacity.
  */
@@ -45,6 +47,10 @@ export default {
 		status: {
 			type: "migrated",
 		},
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 	tags: ["migrated"],
 };
diff --git a/components/page/dist/metadata.json b/components/page/dist/metadata.json
index 4e3ac035552..9a34f110366 100644
--- a/components/page/dist/metadata.json
+++ b/components/page/dist/metadata.json
@@ -1,12 +1,46 @@
 {
   "sourceFile": "index.css",
   "selectors": [":root"],
-  "modifiers": ["--mod-page-background", "--mod-page-content-tap-highlight"],
-  "component": [
-    "--spectrum-page-background-color",
-    "--spectrum-page-content-tap-highlight"
-  ],
-  "global": ["--spectrum-gray-75", "--spectrum-transparent-black-25"],
-  "passthroughs": [],
-  "high-contrast": []
+  "modifiers": {
+    "mod-page-background": {
+      "description": "Used by `--spectrum-page-background-color`. <br/>Defaults to `var(--spectrum-gray-75)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-page-content-tap-highlight": {
+      "description": "Used by `--spectrum-page-content-tap-highlight`. <br/>Defaults to `var(--spectrum-transparent-black-25)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-page-background-color": {
+      "value": "var(--mod-page-background, var(--spectrum-gray-75))",
+      "description": "Defined in `:root`. <br/>Used by `:root`. <br/>Defaults to `var(--mod-page-background, var(--spectrum-gray-75))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-page-content-tap-highlight": {
+      "value": "var(--mod-page-content-tap-highlight, var(--spectrum-transparent-black-25))",
+      "description": "Defined in `:root`. <br/>Used by `:root`. <br/>Defaults to `var(--mod-page-content-tap-highlight, var(--spectrum-transparent-black-25))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-gray-75": {
+      "value": "light-dark(rgb(243, 243, 243), rgb(34, 34, 34))",
+      "description": "Used by `--spectrum-page-background-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-transparent-black-25": {
+      "value": "rgba(0, 0, 0, 0)",
+      "description": "Used by `--spectrum-page-content-tap-highlight`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {}
 }
diff --git a/components/page/stories/page.stories.js b/components/page/stories/page.stories.js
index 7327742970b..2cb3c15707e 100644
--- a/components/page/stories/page.stories.js
+++ b/components/page/stories/page.stories.js
@@ -25,6 +25,10 @@ export default {
 		},
 		packageJson,
 		metadata,
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 	tags: ["!autodocs", "!dev"]
 };
diff --git a/components/pagination/dist/metadata.json b/components/pagination/dist/metadata.json
index 6c52ad62e8c..dc3f959fd5d 100644
--- a/components/pagination/dist/metadata.json
+++ b/components/pagination/dist/metadata.json
@@ -12,27 +12,102 @@
     ".spectrum-Pagination-textfield",
     ".spectrum-Pagination:dir(rtl)"
   ],
-  "modifiers": [
-    "--mod-pagination-counter-color",
-    "--mod-pagination-counter-font-size",
-    "--mod-pagination-counter-line-height",
-    "--mod-pagination-page-button-inline-spacing",
-    "--mod-pagination-textfield-width"
-  ],
-  "component": [
-    "--spectrum-pagination-counter-color",
-    "--spectrum-pagination-counter-font-size",
-    "--spectrum-pagination-counter-inline-spacing",
-    "--spectrum-pagination-counter-line-height",
-    "--spectrum-pagination-item-inline-spacing",
-    "--spectrum-pagination-textfield-width"
-  ],
-  "global": [
-    "--spectrum-font-size-100",
-    "--spectrum-line-height-100",
-    "--spectrum-logical-rotation",
-    "--spectrum-neutral-subdued-content-color-default"
-  ],
-  "passthroughs": ["--mod-textfield-min-width", "--mod-textfield-width"],
-  "high-contrast": []
+  "modifiers": {
+    "mod-pagination-counter-color": {
+      "description": "Used by `--spectrum-pagination-counter-color`. <br/>Defaults to `var(--spectrum-neutral-subdued-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-pagination-counter-font-size": {
+      "description": "Used by `--spectrum-pagination-counter-font-size`. <br/>Defaults to `var(--spectrum-font-size-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-pagination-counter-line-height": {
+      "description": "Used by `--spectrum-pagination-counter-line-height`. <br/>Defaults to `var(--spectrum-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-pagination-page-button-inline-spacing": {
+      "description": "Used by `--spectrum-pagination-counter-inline-spacing`. <br/>Defaults to `var(--spectrum-pagination-item-inline-spacing)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-pagination-textfield-width": {
+      "description": "Used by `--mod-textfield-width`, `--mod-textfield-min-width`. <br/>Defaults to `var(--spectrum-pagination-textfield-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-pagination-counter-color": {
+      "value": "var(--mod-pagination-counter-color, var(--spectrum-neutral-subdued-content-color-default))",
+      "description": "Defined in `.spectrum-Pagination`. <br/>Used by `.spectrum-Pagination-counter`. <br/>Defaults to `var(--mod-pagination-counter-color, var(--spectrum-neutral-subdued-content-color-default))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-pagination-counter-font-size": {
+      "value": "var(--mod-pagination-counter-font-size, var(--spectrum-font-size-100))",
+      "description": "Defined in `.spectrum-Pagination`. <br/>Used by `.spectrum-Pagination-counter`. <br/>Defaults to `var(--mod-pagination-counter-font-size, var(--spectrum-font-size-100))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-pagination-counter-line-height": {
+      "value": "var(--mod-pagination-counter-line-height, var(--spectrum-line-height-100))",
+      "description": "Defined in `.spectrum-Pagination`. <br/>Used by `.spectrum-Pagination-counter`. <br/>Defaults to `var(--mod-pagination-counter-line-height, var(--spectrum-line-height-100))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-pagination-counter-inline-spacing": {
+      "value": "var(--mod-pagination-page-button-inline-spacing, var(--spectrum-pagination-item-inline-spacing))",
+      "description": "Defined in `.spectrum-Pagination`. <br/>Used by `.spectrum-Pagination-counter, .spectrum-Pagination-nextButton`, `.spectrum-Pagination-prevButton`. <br/>Defaults to `var(--mod-pagination-page-button-inline-spacing, var(--spectrum-pagination-item-inline-spacing))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-pagination-item-inline-spacing": {
+      "description": "Used by `--spectrum-pagination-counter-inline-spacing`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-pagination-textfield-width": {
+      "description": "Used by `--mod-textfield-width`, `--mod-textfield-min-width`.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-neutral-subdued-content-color-default": {
+      "value": "var(--spectrum-gray-700)",
+      "description": "Used by `--spectrum-pagination-counter-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-font-size-100": {
+      "value": "14px",
+      "description": "Used by `--spectrum-pagination-counter-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-line-height-100": {
+      "value": "1.3",
+      "description": "Used by `--spectrum-pagination-counter-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-logical-rotation": {
+      "value": "matrix(-1, 0, 0, 1, 0, 0)",
+      "description": "Defined in `.spectrum-Pagination:dir(rtl)`. <br/>Used by `.spectrum-Pagination-nextButton .spectrum-Icon`, `.spectrum-Pagination-prevButton .spectrum-Icon`. <br/>Defaults to `matrix(-1, 0, 0, 1, 0, 0)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {
+    "mod-textfield-width": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-min-width": {
+      "category": "Passthrough"
+    }
+  },
+  "high-contrast": {}
 }
diff --git a/components/pagination/stories/pagination.stories.js b/components/pagination/stories/pagination.stories.js
index 1ce2bc1f1bc..7b2040244e9 100644
--- a/components/pagination/stories/pagination.stories.js
+++ b/components/pagination/stories/pagination.stories.js
@@ -1,11 +1,13 @@
 import { default as ActionButton } from "@spectrum-css/actionbutton/stories/actionbutton.stories";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { PaginationGroup } from "./pagination.test.js";
 import { Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * The pagination component displays numbered buttons or an input field to allow for navigation.
  */
@@ -70,9 +72,7 @@ export default {
 		},
 		packageJson,
 		metadata,
-		status: {
-			type: "migrated",
-		},
+		cssprops: metadata.modifiers,
 	},
 	tags: ["migrated"],
 };
diff --git a/components/picker/dist/metadata.json b/components/picker/dist/metadata.json
index bde45fd599a..499ba40f8f5 100644
--- a/components/picker/dist/metadata.json
+++ b/components/picker/dist/metadata.json
@@ -7,9 +7,9 @@
     ".spectrum-Picker .spectrum-ProgressCircle",
     ".spectrum-Picker--quiet",
     ".spectrum-Picker--quiet .spectrum-Picker-button",
-    ".spectrum-Picker--quiet .spectrum-Picker-button.is-keyboardFocused:after",
     ".spectrum-Picker--quiet .spectrum-Picker-button:after",
     ".spectrum-Picker--quiet .spectrum-Picker-button:focus-visible:after",
+    ".spectrum-Picker--quiet .spectrum-Picker-button.is-keyboardFocused:after",
     ".spectrum-Picker--quiet.spectrum-Picker--sideLabel",
     ".spectrum-Picker--quiet.spectrum-Picker--sideLabel .spectrum-Picker-button",
     ".spectrum-Picker--sideLabel",
@@ -17,20 +17,37 @@
     ".spectrum-Picker--sizeS",
     ".spectrum-Picker--sizeXL",
     ".spectrum-Picker-button",
+    ".spectrum-Picker-button::-moz-focus-inner",
+    ".spectrum-Picker-button:active",
+    ".spectrum-Picker-button:active .spectrum-Picker-label.is-placeholder",
+    ".spectrum-Picker-button:active:after",
+    ".spectrum-Picker-button:disabled",
+    ".spectrum-Picker-button:disabled .spectrum-Picker-icon",
+    ".spectrum-Picker-button:disabled .spectrum-Picker-label.is-placeholder",
+    ".spectrum-Picker-button:disabled .spectrum-Picker-menuIcon",
+    ".spectrum-Picker-button:disabled .spectrum-Picker-validationIcon",
+    ".spectrum-Picker-button:disabled:not(.spectrum-Picker--quiet)",
+    ".spectrum-Picker-button:focus",
+    ".spectrum-Picker-button:focus-visible",
+    ".spectrum-Picker-button:focus-visible .spectrum-Picker-label.is-placeholder",
+    ".spectrum-Picker-button:focus-visible .spectrum-Picker-menuIcon",
+    ".spectrum-Picker-button:focus-visible:after",
+    ".spectrum-Picker-button:hover",
+    ".spectrum-Picker-button:hover .spectrum-Picker-menuIcon",
     ".spectrum-Picker-button.is-disabled",
     ".spectrum-Picker-button.is-disabled .spectrum-Picker-icon",
     ".spectrum-Picker-button.is-disabled .spectrum-Picker-label.is-placeholder",
     ".spectrum-Picker-button.is-disabled .spectrum-Picker-menuIcon",
     ".spectrum-Picker-button.is-disabled .spectrum-Picker-validationIcon",
     ".spectrum-Picker-button.is-disabled:not(.spectrum-Picker--quiet)",
-    ".spectrum-Picker-button.is-invalid.is-keyboardFocused:not(:disabled, .is-disabled)",
-    ".spectrum-Picker-button.is-invalid.is-open:not(:disabled, .is-disabled)",
-    ".spectrum-Picker-button.is-invalid.is-open:not(:disabled, .is-disabled):hover",
     ".spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled)",
     ".spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled) .spectrum-Picker-validationIcon",
     ".spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled):active",
     ".spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled):focus-visible",
     ".spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled):hover",
+    ".spectrum-Picker-button.is-invalid.is-keyboardFocused:not(:disabled, .is-disabled)",
+    ".spectrum-Picker-button.is-invalid.is-open:not(:disabled, .is-disabled)",
+    ".spectrum-Picker-button.is-invalid.is-open:not(:disabled, .is-disabled):hover",
     ".spectrum-Picker-button.is-keyboardFocused",
     ".spectrum-Picker-button.is-keyboardFocused .spectrum-Picker-label.is-placeholder",
     ".spectrum-Picker-button.is-keyboardFocused .spectrum-Picker-menuIcon",
@@ -39,23 +56,6 @@
     ".spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading) .spectrum-Picker-menuIcon",
     ".spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover",
     ".spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover .spectrum-Picker-menuIcon",
-    ".spectrum-Picker-button::-moz-focus-inner",
-    ".spectrum-Picker-button:active",
-    ".spectrum-Picker-button:active .spectrum-Picker-label.is-placeholder",
-    ".spectrum-Picker-button:active:after",
-    ".spectrum-Picker-button:disabled",
-    ".spectrum-Picker-button:disabled .spectrum-Picker-icon",
-    ".spectrum-Picker-button:disabled .spectrum-Picker-label.is-placeholder",
-    ".spectrum-Picker-button:disabled .spectrum-Picker-menuIcon",
-    ".spectrum-Picker-button:disabled .spectrum-Picker-validationIcon",
-    ".spectrum-Picker-button:disabled:not(.spectrum-Picker--quiet)",
-    ".spectrum-Picker-button:focus",
-    ".spectrum-Picker-button:focus-visible",
-    ".spectrum-Picker-button:focus-visible .spectrum-Picker-label.is-placeholder",
-    ".spectrum-Picker-button:focus-visible .spectrum-Picker-menuIcon",
-    ".spectrum-Picker-button:focus-visible:after",
-    ".spectrum-Picker-button:hover",
-    ".spectrum-Picker-button:hover .spectrum-Picker-menuIcon",
     ".spectrum-Picker-label",
     ".spectrum-Picker-label.is-placeholder",
     ".spectrum-Picker-label.is-placeholder:active",
@@ -63,255 +63,1327 @@
     ".spectrum-Picker-menuIcon",
     ".spectrum-Picker-menuIcon:active",
     ".spectrum-Picker-validationIcon",
-    ".spectrum-Picker.is-keyboardFocused",
-    ".spectrum-Picker.is-loading",
-    ".spectrum-Picker.is-loading .spectrum-Picker-menuIcon",
     ".spectrum-Picker:after",
     ".spectrum-Picker:focus-visible",
     ".spectrum-Picker:lang(ja) .spectrum-Picker-label",
     ".spectrum-Picker:lang(ko) .spectrum-Picker-label",
-    ".spectrum-Picker:lang(zh) .spectrum-Picker-label"
-  ],
-  "modifiers": [
-    "--mod-picker-animation-duration",
-    "--mod-picker-background-color-active",
-    "--mod-picker-background-color-default",
-    "--mod-picker-background-color-default-open",
-    "--mod-picker-background-color-disabled",
-    "--mod-picker-background-color-hover",
-    "--mod-picker-background-color-hover-open",
-    "--mod-picker-background-color-key-focus",
-    "--mod-picker-block-size",
-    "--mod-picker-border-active",
-    "--mod-picker-border-color-default",
-    "--mod-picker-border-color-error-active",
-    "--mod-picker-border-color-error-default",
-    "--mod-picker-border-color-error-default-open",
-    "--mod-picker-border-color-error-hover",
-    "--mod-picker-border-color-error-hover-open",
-    "--mod-picker-border-color-error-key-focus",
-    "--mod-picker-border-color-hover",
-    "--mod-picker-border-color-hover-open",
-    "--mod-picker-border-color-key-focus",
-    "--mod-picker-border-default-open",
-    "--mod-picker-border-radius",
-    "--mod-picker-border-width",
-    "--mod-picker-focus-indicator-color",
-    "--mod-picker-focus-indicator-gap",
-    "--mod-picker-focus-indicator-thickness",
-    "--mod-picker-font-color-active",
-    "--mod-picker-font-color-default",
-    "--mod-picker-font-color-default-open",
-    "--mod-picker-font-color-disabled",
-    "--mod-picker-font-color-hover",
-    "--mod-picker-font-color-hover-open",
-    "--mod-picker-font-color-key-focus",
-    "--mod-picker-font-size",
-    "--mod-picker-font-weight",
-    "--mod-picker-icon-color-active",
-    "--mod-picker-icon-color-default",
-    "--mod-picker-icon-color-default-open",
-    "--mod-picker-icon-color-disabled",
-    "--mod-picker-icon-color-error",
-    "--mod-picker-icon-color-hover",
-    "--mod-picker-icon-color-hover-open",
-    "--mod-picker-icon-color-key-focus",
-    "--mod-picker-inline-size",
-    "--mod-picker-inline-size-quiet",
-    "--mod-picker-line-height",
-    "--mod-picker-line-height-cjk",
-    "--mod-picker-min-inline-size",
-    "--mod-picker-min-inline-size-quiet",
-    "--mod-picker-placeholder-font-style",
-    "--mod-picker-placeholder-font-weight",
-    "--mod-picker-spacing-bottom-to-text",
-    "--mod-picker-spacing-edge-to-disclosure-icon",
-    "--mod-picker-spacing-edge-to-disclosure-icon-quiet",
-    "--mod-picker-spacing-edge-to-text",
-    "--mod-picker-spacing-edge-to-text-quiet",
-    "--mod-picker-spacing-icon-to-disclosure-icon",
-    "--mod-picker-spacing-label-to-picker",
-    "--mod-picker-spacing-label-to-picker-quiet",
-    "--mod-picker-spacing-starting-icon-to-text",
-    "--mod-picker-spacing-text-to-icon-inline-end",
-    "--mod-picker-spacing-top-to-alert-icon",
-    "--mod-picker-spacing-top-to-disclosure-icon",
-    "--mod-picker-spacing-top-to-progress-circle",
-    "--mod-picker-spacing-top-to-text"
-  ],
-  "component": [
-    "--spectrum-picker-animation-duration",
-    "--spectrum-picker-background-color-active",
-    "--spectrum-picker-background-color-default",
-    "--spectrum-picker-background-color-default-open",
-    "--spectrum-picker-background-color-disabled",
-    "--spectrum-picker-background-color-hover",
-    "--spectrum-picker-background-color-hover-open",
-    "--spectrum-picker-background-color-key-focus",
-    "--spectrum-picker-block-size",
-    "--spectrum-picker-border-color-active",
-    "--spectrum-picker-border-color-default",
-    "--spectrum-picker-border-color-default-open",
-    "--spectrum-picker-border-color-error-active",
-    "--spectrum-picker-border-color-error-default",
-    "--spectrum-picker-border-color-error-default-open",
-    "--spectrum-picker-border-color-error-hover",
-    "--spectrum-picker-border-color-error-hover-open",
-    "--spectrum-picker-border-color-error-key-focus",
-    "--spectrum-picker-border-color-hover",
-    "--spectrum-picker-border-color-hover-open",
-    "--spectrum-picker-border-color-key-focus",
-    "--spectrum-picker-border-radius",
-    "--spectrum-picker-border-width",
-    "--spectrum-picker-end-edge-to-disclousure-icon-quiet",
-    "--spectrum-picker-focus-indicator-color",
-    "--spectrum-picker-focus-indicator-gap",
-    "--spectrum-picker-focus-indicator-thickness",
-    "--spectrum-picker-font-color-active",
-    "--spectrum-picker-font-color-default",
-    "--spectrum-picker-font-color-default-open",
-    "--spectrum-picker-font-color-disabled",
-    "--spectrum-picker-font-color-hover",
-    "--spectrum-picker-font-color-hover-open",
-    "--spectrum-picker-font-color-key-focus",
-    "--spectrum-picker-font-size",
-    "--spectrum-picker-font-weight",
-    "--spectrum-picker-icon-color-active",
-    "--spectrum-picker-icon-color-default",
-    "--spectrum-picker-icon-color-default-open",
-    "--spectrum-picker-icon-color-disabled",
-    "--spectrum-picker-icon-color-error",
-    "--spectrum-picker-icon-color-hover",
-    "--spectrum-picker-icon-color-hover-open",
-    "--spectrum-picker-icon-color-key-focus",
-    "--spectrum-picker-inline-size",
-    "--spectrum-picker-line-height",
-    "--spectrum-picker-line-height-cjk",
-    "--spectrum-picker-min-inline-size",
-    "--spectrum-picker-minimum-width-multiplier",
-    "--spectrum-picker-placeholder-font-style",
-    "--spectrum-picker-popover-animation-distance",
-    "--spectrum-picker-spacing-bottom-to-text",
-    "--spectrum-picker-spacing-edge-to-disclosure-icon",
-    "--spectrum-picker-spacing-edge-to-text",
-    "--spectrum-picker-spacing-icon-to-disclosure-icon",
-    "--spectrum-picker-spacing-label-to-picker",
-    "--spectrum-picker-spacing-label-to-picker-quiet",
-    "--spectrum-picker-spacing-starting-icon-to-text",
-    "--spectrum-picker-spacing-text-to-icon-inline-end",
-    "--spectrum-picker-spacing-top-to-alert-icon",
-    "--spectrum-picker-spacing-top-to-disclosure-icon",
-    "--spectrum-picker-spacing-top-to-progress-circle",
-    "--spectrum-picker-spacing-top-to-text",
-    "--spectrum-picker-visual-to-disclosure-icon-extra-large",
-    "--spectrum-picker-visual-to-disclosure-icon-large",
-    "--spectrum-picker-visual-to-disclosure-icon-medium",
-    "--spectrum-picker-visual-to-disclosure-icon-small"
-  ],
-  "global": [
-    "--spectrum-animation-duration-100",
-    "--spectrum-border-width-200",
-    "--spectrum-cjk-line-height-100",
-    "--spectrum-component-bottom-to-text-100",
-    "--spectrum-component-bottom-to-text-200",
-    "--spectrum-component-bottom-to-text-300",
-    "--spectrum-component-bottom-to-text-75",
-    "--spectrum-component-edge-to-text-100",
-    "--spectrum-component-edge-to-text-200",
-    "--spectrum-component-edge-to-text-300",
-    "--spectrum-component-edge-to-text-75",
-    "--spectrum-component-height-100",
-    "--spectrum-component-height-200",
-    "--spectrum-component-height-300",
-    "--spectrum-component-height-75",
-    "--spectrum-component-size-difference-down",
-    "--spectrum-component-size-width-ratio-down",
-    "--spectrum-component-to-menu-extra-large",
-    "--spectrum-component-to-menu-large",
-    "--spectrum-component-to-menu-medium",
-    "--spectrum-component-to-menu-small",
-    "--spectrum-component-top-to-text-100",
-    "--spectrum-component-top-to-text-200",
-    "--spectrum-component-top-to-text-300",
-    "--spectrum-component-top-to-text-75",
-    "--spectrum-component-top-to-workflow-icon-100",
-    "--spectrum-component-top-to-workflow-icon-200",
-    "--spectrum-component-top-to-workflow-icon-300",
-    "--spectrum-component-top-to-workflow-icon-75",
-    "--spectrum-corner-radius-medium-size-extra-large",
-    "--spectrum-corner-radius-medium-size-large",
-    "--spectrum-corner-radius-medium-size-medium",
-    "--spectrum-corner-radius-medium-size-small",
-    "--spectrum-default-font-style",
-    "--spectrum-disabled-background-color",
-    "--spectrum-disabled-content-color",
-    "--spectrum-downstate-height",
-    "--spectrum-downstate-width",
-    "--spectrum-field-default-width-extra-large",
-    "--spectrum-field-default-width-large",
-    "--spectrum-field-default-width-medium",
-    "--spectrum-field-default-width-small",
-    "--spectrum-field-edge-to-text-quiet",
-    "--spectrum-field-end-edge-to-disclosure-icon-100",
-    "--spectrum-field-end-edge-to-disclosure-icon-200",
-    "--spectrum-field-end-edge-to-disclosure-icon-300",
-    "--spectrum-field-end-edge-to-disclosure-icon-75",
-    "--spectrum-field-label-to-component",
-    "--spectrum-field-label-to-component-quiet-extra-large",
-    "--spectrum-field-label-to-component-quiet-large",
-    "--spectrum-field-label-to-component-quiet-medium",
-    "--spectrum-field-label-to-component-quiet-small",
-    "--spectrum-field-top-to-disclosure-icon-100",
-    "--spectrum-field-top-to-disclosure-icon-200",
-    "--spectrum-field-top-to-disclosure-icon-300",
-    "--spectrum-field-top-to-disclosure-icon-75",
-    "--spectrum-field-top-to-progress-circle-extra-large",
-    "--spectrum-field-top-to-progress-circle-large",
-    "--spectrum-field-top-to-progress-circle-medium",
-    "--spectrum-field-top-to-progress-circle-small",
-    "--spectrum-focus-indicator-color",
-    "--spectrum-focus-indicator-gap",
-    "--spectrum-focus-indicator-thickness",
-    "--spectrum-font-size-100",
-    "--spectrum-font-size-200",
-    "--spectrum-font-size-300",
-    "--spectrum-font-size-75",
-    "--spectrum-gray-100",
-    "--spectrum-gray-200",
-    "--spectrum-line-height-100",
-    "--spectrum-negative-border-color-default",
-    "--spectrum-negative-border-color-down",
-    "--spectrum-negative-border-color-focus",
-    "--spectrum-negative-border-color-focus-hover",
-    "--spectrum-negative-border-color-hover",
-    "--spectrum-negative-border-color-key-focus",
-    "--spectrum-negative-visual-color",
-    "--spectrum-neutral-content-color-default",
-    "--spectrum-neutral-content-color-down",
-    "--spectrum-neutral-content-color-focus",
-    "--spectrum-neutral-content-color-focus-hover",
-    "--spectrum-neutral-content-color-hover",
-    "--spectrum-neutral-content-color-key-focus",
-    "--spectrum-regular-font-weight",
-    "--spectrum-sans-font-family-stack",
-    "--spectrum-text-to-visual-100",
-    "--spectrum-text-to-visual-200",
-    "--spectrum-text-to-visual-300",
-    "--spectrum-text-to-visual-75"
-  ],
-  "passthroughs": [
-    "--mod-button-animation-duration",
-    "--mod-button-font-family",
-    "--mod-button-line-height",
-    "--mod-popover-animation-distance"
+    ".spectrum-Picker:lang(zh) .spectrum-Picker-label",
+    ".spectrum-Picker.is-keyboardFocused",
+    ".spectrum-Picker.is-loading",
+    ".spectrum-Picker.is-loading .spectrum-Picker-menuIcon"
   ],
-  "high-contrast": [
-    "--highcontrast-picker-background-color",
-    "--highcontrast-picker-border-color-default",
-    "--highcontrast-picker-border-color-disabled",
-    "--highcontrast-picker-border-color-hover",
-    "--highcontrast-picker-content-color-default",
-    "--highcontrast-picker-content-color-disabled",
-    "--highcontrast-picker-focus-indicator-color"
-  ]
+  "modifiers": {
+    "mod-picker-block-size": {
+      "description": "Used by `--spectrum-picker-min-inline-size`, `.spectrum-Picker-button`. <br/>Defaults to `var(--spectrum-picker-block-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-min-inline-size-quiet": {
+      "description": "Used by `--spectrum-picker-min-inline-size`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-inline-size-quiet": {
+      "description": "Used by `--spectrum-picker-inline-size`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-spacing-edge-to-text-quiet": {
+      "description": "Used by `--spectrum-picker-spacing-edge-to-text`. <br/>Defaults to `var(--spectrum-field-edge-to-text-quiet)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-spacing-edge-to-disclosure-icon-quiet": {
+      "description": "Used by `--spectrum-picker-spacing-edge-to-disclosure-icon`. <br/>Defaults to `var(--spectrum-picker-end-edge-to-disclousure-icon-quiet)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-spacing-label-to-picker-quiet": {
+      "description": "Used by `--spectrum-picker-spacing-label-to-picker`. <br/>Defaults to `var(--spectrum-picker-spacing-label-to-picker-quiet)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-min-inline-size": {
+      "description": "Used by `.spectrum-Picker-button`. <br/>Defaults to `var(--spectrum-picker-min-inline-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-inline-size": {
+      "description": "Used by `.spectrum-Picker-button`. <br/>Defaults to `var(--spectrum-picker-inline-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-spacing-label-to-picker": {
+      "description": "Used by `.spectrum-Picker-button`. <br/>Defaults to `var(--spectrum-picker-spacing-label-to-picker)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-spacing-edge-to-text": {
+      "description": "Used by `.spectrum-Picker-button`. <br/>Defaults to `var(--spectrum-picker-spacing-edge-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-spacing-edge-to-disclosure-icon": {
+      "description": "Used by `.spectrum-Picker-button`. <br/>Defaults to `var(--spectrum-picker-spacing-edge-to-disclosure-icon)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-border-width": {
+      "description": "Used by `.spectrum-Picker-button`, `.spectrum-Picker-button.is-keyboardFocused:after, .spectrum-Picker-button:focus-visible:after`, `.spectrum-Picker-label`, `.spectrum-Picker-validationIcon`, `.spectrum-Picker .spectrum-ProgressCircle`, `.spectrum-Picker--quiet .spectrum-Picker-button.is-keyboardFocused:after, .spectrum-Picker--quiet .spectrum-Picker-button:focus-visible:after`. <br/>Defaults to `var(--spectrum-picker-border-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-border-radius": {
+      "description": "Used by `.spectrum-Picker-button`, `.spectrum-Picker-button.is-keyboardFocused:after, .spectrum-Picker-button:focus-visible:after`. <br/>Defaults to `var(--spectrum-picker-border-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-animation-duration": {
+      "description": "Used by `.spectrum-Picker-button`, `.spectrum-Picker-label.is-placeholder`, `.spectrum-Picker-menuIcon`. <br/>Defaults to `var(--spectrum-picker-animation-duration)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-font-color-default": {
+      "description": "Used by `.spectrum-Picker-button`, `.spectrum-Picker-label.is-placeholder`, `.spectrum-Picker--quiet .spectrum-Picker-button`. <br/>Defaults to `var(--spectrum-picker-font-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-background-color-default": {
+      "description": "Used by `.spectrum-Picker-button`. <br/>Defaults to `var(--spectrum-picker-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-border-color-default": {
+      "description": "Used by `.spectrum-Picker-button`. <br/>Defaults to `var(--spectrum-picker-border-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-background-color-active": {
+      "description": "Used by `.spectrum-Picker-button:active`. <br/>Defaults to `var(--spectrum-picker-background-color-active)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-border-active": {
+      "description": "Used by `.spectrum-Picker-button:active`. <br/>Defaults to `var(--spectrum-picker-border-color-active)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-font-color-active": {
+      "description": "Used by `.spectrum-Picker-button:active .spectrum-Picker-label.is-placeholder`, `.spectrum-Picker-label.is-placeholder:active`. <br/>Defaults to `var(--spectrum-picker-font-color-active)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-background-color-key-focus": {
+      "description": "Used by `.spectrum-Picker-button.is-keyboardFocused, .spectrum-Picker-button:focus-visible`. <br/>Defaults to `var(--spectrum-picker-background-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-border-color-key-focus": {
+      "description": "Used by `.spectrum-Picker-button.is-keyboardFocused, .spectrum-Picker-button:focus-visible`. <br/>Defaults to `var(--spectrum-picker-border-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-font-color-key-focus": {
+      "description": "Used by `.spectrum-Picker-button.is-keyboardFocused, .spectrum-Picker-button:focus-visible`, `.spectrum-Picker-button.is-keyboardFocused .spectrum-Picker-label.is-placeholder, .spectrum-Picker-button:focus-visible .spectrum-Picker-label.is-placeholder`. <br/>Defaults to `var(--spectrum-picker-font-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-focus-indicator-color": {
+      "description": "Used by `.spectrum-Picker-button.is-keyboardFocused:after, .spectrum-Picker-button:focus-visible:after`, `.spectrum-Picker--quiet .spectrum-Picker-button.is-keyboardFocused:after, .spectrum-Picker--quiet .spectrum-Picker-button:focus-visible:after`. <br/>Defaults to `var(--spectrum-picker-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-focus-indicator-gap": {
+      "description": "Used by `.spectrum-Picker-button.is-keyboardFocused:after, .spectrum-Picker-button:focus-visible:after`, `.spectrum-Picker--quiet .spectrum-Picker-button.is-keyboardFocused:after, .spectrum-Picker--quiet .spectrum-Picker-button:focus-visible:after`. <br/>Defaults to `var(--spectrum-picker-focus-indicator-gap)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-focus-indicator-thickness": {
+      "description": "Used by `.spectrum-Picker-button.is-keyboardFocused:after, .spectrum-Picker-button:focus-visible:after`, `.spectrum-Picker--quiet .spectrum-Picker-button.is-keyboardFocused:after, .spectrum-Picker--quiet .spectrum-Picker-button:focus-visible:after`. <br/>Defaults to `var(--spectrum-picker-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-icon-color-key-focus": {
+      "description": "Used by `.spectrum-Picker-button.is-keyboardFocused .spectrum-Picker-menuIcon, .spectrum-Picker-button:focus-visible .spectrum-Picker-menuIcon`. <br/>Defaults to `var(--spectrum-picker-icon-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-font-color-default-open": {
+      "description": "Used by `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading)`. <br/>Defaults to `var(--spectrum-picker-font-color-default-open)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-background-color-default-open": {
+      "description": "Used by `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading)`. <br/>Defaults to `var(--spectrum-picker-background-color-default-open)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-border-default-open": {
+      "description": "Used by `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading)`. <br/>Defaults to `var(--spectrum-picker-border-color-default-open)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-icon-color-default-open": {
+      "description": "Used by `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading) .spectrum-Picker-menuIcon`. <br/>Defaults to `var(--spectrum-picker-icon-color-default-open)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-border-color-error-default": {
+      "description": "Used by `.spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled)`. <br/>Defaults to `var(--spectrum-picker-border-color-error-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-icon-color-error": {
+      "description": "Used by `.spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled) .spectrum-Picker-validationIcon`. <br/>Defaults to `var(--spectrum-picker-icon-color-error)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-border-color-error-active": {
+      "description": "Used by `.spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled):active`. <br/>Defaults to `var(--spectrum-picker-border-color-error-active)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-border-color-error-default-open": {
+      "description": "Used by `.spectrum-Picker-button.is-invalid.is-open:not(:disabled, .is-disabled)`. <br/>Defaults to `var(--spectrum-picker-border-color-error-default-open)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-border-color-error-key-focus": {
+      "description": "Used by `.spectrum-Picker-button.is-invalid.is-keyboardFocused:not(:disabled, .is-disabled), .spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled):focus-visible`. <br/>Defaults to `var(--spectrum-picker-border-color-error-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-spacing-starting-icon-to-text": {
+      "description": "Used by `.spectrum-Picker .spectrum-Picker-icon`. <br/>Defaults to `var(--spectrum-picker-spacing-starting-icon-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-font-size": {
+      "description": "Used by `.spectrum-Picker-label`. <br/>Defaults to `var(--spectrum-picker-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-line-height": {
+      "description": "Used by `.spectrum-Picker-label`. <br/>Defaults to `var(--spectrum-picker-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-font-weight": {
+      "description": "Used by `.spectrum-Picker-label`. <br/>Defaults to `var(--spectrum-picker-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-spacing-top-to-text": {
+      "description": "Used by `.spectrum-Picker-label`. <br/>Defaults to `var(--spectrum-picker-spacing-top-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-spacing-bottom-to-text": {
+      "description": "Used by `.spectrum-Picker-label`. <br/>Defaults to `var(--spectrum-picker-spacing-bottom-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-spacing-text-to-icon-inline-end": {
+      "description": "Used by `.spectrum-Picker-label`. <br/>Defaults to `var(--spectrum-picker-spacing-text-to-icon-inline-end)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-placeholder-font-weight": {
+      "description": "Used by `.spectrum-Picker-label.is-placeholder`. <br/>Defaults to `var(--spectrum-picker-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-placeholder-font-style": {
+      "description": "Used by `.spectrum-Picker-label.is-placeholder`. <br/>Defaults to `var(--spectrum-picker-placeholder-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-font-color-hover": {
+      "description": "Used by `.spectrum-Picker-button:hover`, `.spectrum-Picker-label.is-placeholder:hover`. <br/>Defaults to `var(--spectrum-picker-font-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-background-color-hover": {
+      "description": "Used by `.spectrum-Picker-button:hover`. <br/>Defaults to `var(--spectrum-picker-background-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-border-color-hover": {
+      "description": "Used by `.spectrum-Picker-button:hover`. <br/>Defaults to `var(--spectrum-picker-border-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-icon-color-hover": {
+      "description": "Used by `.spectrum-Picker-button:hover .spectrum-Picker-menuIcon`. <br/>Defaults to `var(--spectrum-picker-icon-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-font-color-hover-open": {
+      "description": "Used by `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover`. <br/>Defaults to `var(--spectrum-picker-font-color-hover-open)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-background-color-hover-open": {
+      "description": "Used by `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover`. <br/>Defaults to `var(--spectrum-picker-background-color-hover-open)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-border-color-hover-open": {
+      "description": "Used by `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover`. <br/>Defaults to `var(--spectrum-picker-border-color-hover-open)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-icon-color-hover-open": {
+      "description": "Used by `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover .spectrum-Picker-menuIcon`. <br/>Defaults to `var(--spectrum-picker-icon-color-hover-open)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-border-color-error-hover": {
+      "description": "Used by `.spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled):hover`. <br/>Defaults to `var(--spectrum-picker-border-color-error-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-border-color-error-hover-open": {
+      "description": "Used by `.spectrum-Picker-button.is-invalid.is-open:not(:disabled, .is-disabled):hover`. <br/>Defaults to `var(--spectrum-picker-border-color-error-hover-open)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-line-height-cjk": {
+      "description": "Used by `.spectrum-Picker:lang(ja) .spectrum-Picker-label, .spectrum-Picker:lang(ko) .spectrum-Picker-label, .spectrum-Picker:lang(zh) .spectrum-Picker-label`. <br/>Defaults to `var(--spectrum-picker-line-height-cjk)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-spacing-top-to-disclosure-icon": {
+      "description": "Used by `.spectrum-Picker-menuIcon`. <br/>Defaults to `var(--spectrum-picker-spacing-top-to-disclosure-icon)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-icon-color-default": {
+      "description": "Used by `.spectrum-Picker-menuIcon`. <br/>Defaults to `var(--spectrum-picker-icon-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-icon-color-active": {
+      "description": "Used by `.spectrum-Picker-menuIcon:active`. <br/>Defaults to `var(--spectrum-picker-icon-color-active)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-spacing-top-to-alert-icon": {
+      "description": "Used by `.spectrum-Picker-validationIcon`. <br/>Defaults to `var(--spectrum-picker-spacing-top-to-alert-icon)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-spacing-icon-to-disclosure-icon": {
+      "description": "Used by `.spectrum-Picker .spectrum-ProgressCircle, .spectrum-Picker-validationIcon`. <br/>Defaults to `var(--spectrum-picker-spacing-icon-to-disclosure-icon)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-spacing-top-to-progress-circle": {
+      "description": "Used by `.spectrum-Picker .spectrum-ProgressCircle`. <br/>Defaults to `var(--spectrum-picker-spacing-top-to-progress-circle)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-font-color-disabled": {
+      "description": "Used by `.spectrum-Picker-button.is-disabled, .spectrum-Picker-button:disabled`, `.spectrum-Picker-button.is-disabled .spectrum-Picker-label.is-placeholder, .spectrum-Picker-button:disabled .spectrum-Picker-label.is-placeholder`. <br/>Defaults to `var(--spectrum-picker-font-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-background-color-disabled": {
+      "description": "Used by `.spectrum-Picker-button.is-disabled:not(.spectrum-Picker--quiet), .spectrum-Picker-button:disabled:not(.spectrum-Picker--quiet)`. <br/>Defaults to `var(--spectrum-picker-background-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-icon-color-disabled": {
+      "description": "Used by `.spectrum-Picker-button.is-disabled .spectrum-Picker-icon, .spectrum-Picker-button.is-disabled .spectrum-Picker-menuIcon, .spectrum-Picker-button.is-disabled .spectrum-Picker-validationIcon, .spectrum-Picker-button:disabled .spectrum-Picker-icon, .spectrum-Picker-button:disabled .spectrum-Picker-menuIcon, .spectrum-Picker-button:disabled .spectrum-Picker-validationIcon`, `.spectrum-Picker.is-loading .spectrum-Picker-menuIcon`. <br/>Defaults to `var(--spectrum-picker-icon-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-picker-background-color-default": {
+      "value": "transparent",
+      "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--quiet`. <br/>Used by `.spectrum-Picker-button`. <br/>Defaults to `transparent`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-background-color-default-open": {
+      "value": "transparent",
+      "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--quiet`. <br/>Used by `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading)`. <br/>Defaults to `transparent`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-background-color-hover": {
+      "value": "transparent",
+      "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--quiet`. <br/>Used by `.spectrum-Picker-button:hover`. <br/>Defaults to `transparent`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-background-color-hover-open": {
+      "value": "transparent",
+      "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--quiet`. <br/>Used by `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover`. <br/>Defaults to `transparent`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-background-color-active": {
+      "value": "transparent",
+      "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--quiet`. <br/>Used by `.spectrum-Picker-button:active`. <br/>Defaults to `transparent`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-background-color-key-focus": {
+      "value": "transparent",
+      "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--quiet`. <br/>Used by `.spectrum-Picker-button.is-keyboardFocused, .spectrum-Picker-button:focus-visible`. <br/>Defaults to `transparent`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-border-color-default": {
+      "value": "transparent",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker-button`. <br/>Defaults to `transparent`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-border-color-default-open": {
+      "value": "transparent",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading)`. <br/>Defaults to `transparent`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-border-color-hover": {
+      "value": "transparent",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker-button:hover`. <br/>Defaults to `transparent`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-border-color-hover-open": {
+      "value": "transparent",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover`. <br/>Defaults to `transparent`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-border-color-active": {
+      "value": "transparent",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker-button:active`. <br/>Defaults to `transparent`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-border-color-key-focus": {
+      "value": "transparent",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker-button.is-keyboardFocused, .spectrum-Picker-button:focus-visible`. <br/>Defaults to `transparent`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-font-size": {
+      "value": "18px",
+      "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`. <br/>Used by `.spectrum-Picker-label`. <br/>Defaults to `var(--spectrum-font-size-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-font-weight": {
+      "value": "400",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker-label`, `.spectrum-Picker-label.is-placeholder`. <br/>Defaults to `var(--spectrum-regular-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-placeholder-font-style": {
+      "value": "normal",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker-label.is-placeholder`. <br/>Defaults to `var(--spectrum-default-font-style)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-line-height": {
+      "value": "1.3",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker-label`. <br/>Defaults to `var(--spectrum-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-line-height-cjk": {
+      "value": "1.5",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker:lang(ja) .spectrum-Picker-label, .spectrum-Picker:lang(ko) .spectrum-Picker-label, .spectrum-Picker:lang(zh) .spectrum-Picker-label`. <br/>Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-block-size": {
+      "value": "48px",
+      "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`. <br/>Used by `--spectrum-picker-min-inline-size`, `.spectrum-Picker-button`. <br/>Defaults to `var(--spectrum-component-height-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-inline-size": {
+      "value": "var(--mod-picker-inline-size-quiet, auto)",
+      "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`, `.spectrum-Picker--quiet`. <br/>Used by `.spectrum-Picker-button`. <br/>Defaults to `var(--mod-picker-inline-size-quiet, auto)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-min-inline-size": {
+      "value": "var(--mod-picker-min-inline-size-quiet, 0)",
+      "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--quiet`. <br/>Used by `.spectrum-Picker-button`. <br/>Defaults to `var(--mod-picker-min-inline-size-quiet, 0)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-minimum-width-multiplier": {
+      "value": "2",
+      "description": "Used by `--spectrum-picker-min-inline-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-border-radius": {
+      "value": "10px",
+      "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`. <br/>Used by `.spectrum-Picker-button`, `.spectrum-Picker-button.is-keyboardFocused:after, .spectrum-Picker-button:focus-visible:after`. <br/>Defaults to `var(--spectrum-corner-radius-medium-size-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-border-width": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker-button`, `.spectrum-Picker-button.is-keyboardFocused:after, .spectrum-Picker-button:focus-visible:after`, `.spectrum-Picker-label`, `.spectrum-Picker-validationIcon`, `.spectrum-Picker .spectrum-ProgressCircle`, `.spectrum-Picker--quiet .spectrum-Picker-button.is-keyboardFocused:after, .spectrum-Picker--quiet .spectrum-Picker-button:focus-visible:after`. <br/>Defaults to `var(--spectrum-border-width-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-spacing-top-to-text": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`. <br/>Used by `.spectrum-Picker-label`. <br/>Defaults to `var(--spectrum-component-top-to-text-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-spacing-bottom-to-text": {
+      "value": "14px",
+      "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`. <br/>Used by `.spectrum-Picker-label`. <br/>Defaults to `var(--spectrum-component-bottom-to-text-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-spacing-edge-to-text": {
+      "value": "var(--mod-picker-spacing-edge-to-text-quiet, var(--spectrum-field-edge-to-text-quiet))",
+      "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`, `.spectrum-Picker--quiet`. <br/>Used by `.spectrum-Picker-button`. <br/>Defaults to `var(--mod-picker-spacing-edge-to-text-quiet, var(--spectrum-field-edge-to-text-quiet))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-spacing-label-to-picker": {
+      "value": "var(--mod-picker-spacing-label-to-picker-quiet, var(--spectrum-picker-spacing-label-to-picker-quiet))",
+      "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--quiet`. <br/>Used by `.spectrum-Picker-button`. <br/>Defaults to `var(--mod-picker-spacing-label-to-picker-quiet, var(--spectrum-picker-spacing-label-to-picker-quiet))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-spacing-label-to-picker-quiet": {
+      "value": "-15px",
+      "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`. <br/>Used by `--spectrum-picker-spacing-label-to-picker`. <br/>Defaults to `var(--spectrum-field-label-to-component-quiet-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-spacing-starting-icon-to-text": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`. <br/>Used by `.spectrum-Picker .spectrum-Picker-icon`. <br/>Defaults to `var(--spectrum-text-to-visual-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-spacing-text-to-icon-inline-end": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`. <br/>Used by `.spectrum-Picker-label`. <br/>Defaults to `var(--spectrum-text-to-visual-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-spacing-icon-to-disclosure-icon": {
+      "value": "10px",
+      "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`. <br/>Used by `.spectrum-Picker .spectrum-ProgressCircle, .spectrum-Picker-validationIcon`. <br/>Defaults to `var(--spectrum-picker-visual-to-disclosure-icon-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-visual-to-disclosure-icon-medium": {
+      "value": "8px",
+      "description": "Used by `--spectrum-picker-spacing-icon-to-disclosure-icon`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-spacing-top-to-alert-icon": {
+      "value": "11px",
+      "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`. <br/>Used by `.spectrum-Picker-validationIcon`. <br/>Defaults to `var(--spectrum-component-top-to-workflow-icon-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-spacing-top-to-progress-circle": {
+      "value": "11px",
+      "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`. <br/>Used by `.spectrum-Picker .spectrum-ProgressCircle`. <br/>Defaults to `var(--spectrum-field-top-to-progress-circle-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-spacing-top-to-disclosure-icon": {
+      "value": "17px",
+      "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`. <br/>Used by `.spectrum-Picker-menuIcon`. <br/>Defaults to `var(--spectrum-field-top-to-disclosure-icon-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-spacing-edge-to-disclosure-icon": {
+      "value": "var(--mod-picker-spacing-edge-to-disclosure-icon-quiet, var(--spectrum-picker-end-edge-to-disclousure-icon-quiet))",
+      "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`, `.spectrum-Picker--quiet`. <br/>Used by `.spectrum-Picker-button`. <br/>Defaults to `var(--mod-picker-spacing-edge-to-disclosure-icon-quiet, var(--spectrum-picker-end-edge-to-disclousure-icon-quiet))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-animation-duration": {
+      "value": "var(--spectrum-animation-duration-100)",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker-button`, `.spectrum-Picker-label.is-placeholder`, `.spectrum-Picker-menuIcon`. <br/>Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-font-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker-button`, `.spectrum-Picker-label.is-placeholder`, `.spectrum-Picker--quiet .spectrum-Picker-button`. <br/>Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-font-color-default-open": {
+      "value": "var(--spectrum-neutral-content-color-down)",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading)`. <br/>Defaults to `var(--spectrum-neutral-content-color-focus)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-font-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker-button:hover`, `.spectrum-Picker-label.is-placeholder:hover`. <br/>Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-font-color-hover-open": {
+      "value": "var(--spectrum-neutral-content-color-down)",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover`. <br/>Defaults to `var(--spectrum-neutral-content-color-focus-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-font-color-active": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker-button:active .spectrum-Picker-label.is-placeholder`, `.spectrum-Picker-label.is-placeholder:active`. <br/>Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-font-color-key-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker-button.is-keyboardFocused, .spectrum-Picker-button:focus-visible`, `.spectrum-Picker-button.is-keyboardFocused .spectrum-Picker-label.is-placeholder, .spectrum-Picker-button:focus-visible .spectrum-Picker-label.is-placeholder`. <br/>Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-icon-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker-menuIcon`. <br/>Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-icon-color-default-open": {
+      "value": "var(--spectrum-neutral-content-color-down)",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading) .spectrum-Picker-menuIcon`. <br/>Defaults to `var(--spectrum-neutral-content-color-focus)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-icon-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker-button:hover .spectrum-Picker-menuIcon`. <br/>Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-icon-color-hover-open": {
+      "value": "var(--spectrum-neutral-content-color-down)",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover .spectrum-Picker-menuIcon`. <br/>Defaults to `var(--spectrum-neutral-content-color-focus-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-icon-color-active": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker-menuIcon:active`. <br/>Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-icon-color-key-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker-button.is-keyboardFocused .spectrum-Picker-menuIcon, .spectrum-Picker-button:focus-visible .spectrum-Picker-menuIcon`. <br/>Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-border-color-error-default": {
+      "value": "var(--spectrum-negative-color-900)",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled)`. <br/>Defaults to `var(--spectrum-negative-border-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-border-color-error-default-open": {
+      "value": "var(--spectrum-negative-color-1000)",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker-button.is-invalid.is-open:not(:disabled, .is-disabled)`. <br/>Defaults to `var(--spectrum-negative-border-color-focus)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-border-color-error-hover": {
+      "value": "var(--spectrum-negative-color-1000)",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled):hover`. <br/>Defaults to `var(--spectrum-negative-border-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-border-color-error-hover-open": {
+      "value": "var(--spectrum-negative-border-color-down)",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker-button.is-invalid.is-open:not(:disabled, .is-disabled):hover`. <br/>Defaults to `var(--spectrum-negative-border-color-focus-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-border-color-error-active": {
+      "value": "var(--spectrum-negative-color-1100)",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled):active`. <br/>Defaults to `var(--spectrum-negative-border-color-down)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-border-color-error-key-focus": {
+      "value": "var(--spectrum-negative-color-1000)",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker-button.is-invalid.is-keyboardFocused:not(:disabled, .is-disabled), .spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled):focus-visible`. <br/>Defaults to `var(--spectrum-negative-border-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-icon-color-error": {
+      "value": "var(--spectrum-negative-color-800)",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled) .spectrum-Picker-validationIcon`. <br/>Defaults to `var(--spectrum-negative-visual-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-background-color-disabled": {
+      "value": "transparent",
+      "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--quiet`. <br/>Used by `.spectrum-Picker-button.is-disabled:not(.spectrum-Picker--quiet), .spectrum-Picker-button:disabled:not(.spectrum-Picker--quiet)`. <br/>Defaults to `transparent`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-font-color-disabled": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker-button.is-disabled, .spectrum-Picker-button:disabled`, `.spectrum-Picker-button.is-disabled .spectrum-Picker-label.is-placeholder, .spectrum-Picker-button:disabled .spectrum-Picker-label.is-placeholder`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-icon-color-disabled": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker-button.is-disabled .spectrum-Picker-icon, .spectrum-Picker-button.is-disabled .spectrum-Picker-menuIcon, .spectrum-Picker-button.is-disabled .spectrum-Picker-validationIcon, .spectrum-Picker-button:disabled .spectrum-Picker-icon, .spectrum-Picker-button:disabled .spectrum-Picker-menuIcon, .spectrum-Picker-button:disabled .spectrum-Picker-validationIcon`, `.spectrum-Picker.is-loading .spectrum-Picker-menuIcon`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-focus-indicator-gap": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker-button.is-keyboardFocused:after, .spectrum-Picker-button:focus-visible:after`, `.spectrum-Picker--quiet .spectrum-Picker-button.is-keyboardFocused:after, .spectrum-Picker--quiet .spectrum-Picker-button:focus-visible:after`. <br/>Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker-button.is-keyboardFocused:after, .spectrum-Picker-button:focus-visible:after`, `.spectrum-Picker--quiet .spectrum-Picker-button.is-keyboardFocused:after, .spectrum-Picker--quiet .spectrum-Picker-button:focus-visible:after`. <br/>Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-focus-indicator-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker-button.is-keyboardFocused:after, .spectrum-Picker-button:focus-visible:after`, `.spectrum-Picker--quiet .spectrum-Picker-button.is-keyboardFocused:after, .spectrum-Picker--quiet .spectrum-Picker-button:focus-visible:after`. <br/>Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-popover-animation-distance": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`. <br/>Used by `--mod-popover-animation-distance`. <br/>Defaults to `var(--spectrum-component-to-menu-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-visual-to-disclosure-icon-small": {
+      "value": "7px",
+      "description": "Used by `--spectrum-picker-spacing-icon-to-disclosure-icon`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-visual-to-disclosure-icon-large": {
+      "value": "9px",
+      "description": "Used by `--spectrum-picker-spacing-icon-to-disclosure-icon`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-visual-to-disclosure-icon-extra-large": {
+      "value": "10px",
+      "description": "Used by `--spectrum-picker-spacing-icon-to-disclosure-icon`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-end-edge-to-disclousure-icon-quiet": {
+      "value": "0px",
+      "description": "Used by `--spectrum-picker-spacing-edge-to-disclosure-icon`.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-sans-font-family-stack": {
+      "description": "Used by `.spectrum-Picker-button`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-line-height-100": {
+      "value": "1.3",
+      "description": "Used by `.spectrum-Picker-button`, `--spectrum-picker-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-animation-duration-100": {
+      "description": "Used by `.spectrum-Picker-button`, `--spectrum-picker-animation-duration`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-100": {
+      "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+      "description": "Used by `--spectrum-picker-background-color-default`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-200": {
+      "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+      "description": "Used by `--spectrum-picker-background-color-default-open`, `--spectrum-picker-background-color-hover`, `--spectrum-picker-background-color-hover-open`, `--spectrum-picker-background-color-active`, `--spectrum-picker-background-color-key-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-100": {
+      "value": "14px",
+      "description": "Used by `--spectrum-picker-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-regular-font-weight": {
+      "value": "400",
+      "description": "Used by `--spectrum-picker-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-default-font-style": {
+      "value": "normal",
+      "description": "Used by `--spectrum-picker-placeholder-font-style`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-cjk-line-height-100": {
+      "value": "1.5",
+      "description": "Used by `--spectrum-picker-line-height-cjk`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-100": {
+      "value": "32px",
+      "description": "Used by `--spectrum-picker-block-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-default-width-medium": {
+      "value": "208px",
+      "description": "Used by `--spectrum-picker-inline-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-medium-size-medium": {
+      "value": "8px",
+      "description": "Used by `--spectrum-picker-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-border-width-200": {
+      "value": "2px",
+      "description": "Used by `--spectrum-picker-border-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-picker-spacing-top-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-100": {
+      "value": "9px",
+      "description": "Used by `--spectrum-picker-spacing-bottom-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-text-100": {
+      "value": "12px",
+      "description": "Used by `--spectrum-picker-spacing-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-label-to-component": {
+      "value": "0px",
+      "description": "Used by `--spectrum-picker-spacing-label-to-picker`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-label-to-component-quiet-medium": {
+      "value": "-8px",
+      "description": "Used by `--spectrum-picker-spacing-label-to-picker-quiet`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-picker-spacing-starting-icon-to-text`, `--spectrum-picker-spacing-text-to-icon-inline-end`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-workflow-icon-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-picker-spacing-top-to-alert-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-top-to-progress-circle-medium": {
+      "value": "6px",
+      "description": "Used by `--spectrum-picker-spacing-top-to-progress-circle`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-top-to-disclosure-icon-100": {
+      "value": "11px",
+      "description": "Used by `--spectrum-picker-spacing-top-to-disclosure-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-end-edge-to-disclosure-icon-100": {
+      "value": "11px",
+      "description": "Used by `--spectrum-picker-spacing-edge-to-disclosure-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-picker-font-color-default`, `--spectrum-picker-icon-color-default`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-focus": {
+      "value": "var(--spectrum-neutral-content-color-down)",
+      "description": "Used by `--spectrum-picker-font-color-default-open`, `--spectrum-picker-icon-color-default-open`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-picker-font-color-hover`, `--spectrum-picker-icon-color-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-focus-hover": {
+      "value": "var(--spectrum-neutral-content-color-down)",
+      "description": "Used by `--spectrum-picker-font-color-hover-open`, `--spectrum-picker-icon-color-hover-open`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-down": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-picker-font-color-active`, `--spectrum-picker-icon-color-active`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-key-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-picker-font-color-key-focus`, `--spectrum-picker-icon-color-key-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-border-color-default": {
+      "value": "var(--spectrum-negative-color-900)",
+      "description": "Used by `--spectrum-picker-border-color-error-default`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-border-color-focus": {
+      "value": "var(--spectrum-negative-color-1000)",
+      "description": "Used by `--spectrum-picker-border-color-error-default-open`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-border-color-hover": {
+      "value": "var(--spectrum-negative-color-1000)",
+      "description": "Used by `--spectrum-picker-border-color-error-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-border-color-focus-hover": {
+      "value": "var(--spectrum-negative-border-color-down)",
+      "description": "Used by `--spectrum-picker-border-color-error-hover-open`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-border-color-down": {
+      "value": "var(--spectrum-negative-color-1100)",
+      "description": "Used by `--spectrum-picker-border-color-error-active`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-border-color-key-focus": {
+      "value": "var(--spectrum-negative-color-1000)",
+      "description": "Used by `--spectrum-picker-border-color-error-key-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-visual-color": {
+      "value": "var(--spectrum-negative-color-800)",
+      "description": "Used by `--spectrum-picker-icon-color-error`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-disabled-background-color": {
+      "value": "var(--spectrum-gray-100)",
+      "description": "Used by `--spectrum-picker-background-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-disabled-content-color": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Used by `--spectrum-picker-font-color-disabled`, `--spectrum-picker-icon-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-gap": {
+      "value": "2px",
+      "description": "Used by `--spectrum-picker-focus-indicator-gap`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Used by `--spectrum-picker-focus-indicator-thickness`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Used by `--spectrum-picker-focus-indicator-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-component-to-menu-medium": {
+      "value": "6px",
+      "description": "Used by `--spectrum-picker-popover-animation-distance`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-75": {
+      "value": "12px",
+      "description": "Used by `--spectrum-picker-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-75": {
+      "value": "24px",
+      "description": "Used by `--spectrum-picker-block-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-default-width-small": {
+      "value": "192px",
+      "description": "Used by `--spectrum-picker-inline-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-medium-size-small": {
+      "value": "7px",
+      "description": "Used by `--spectrum-picker-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-75": {
+      "value": "4px",
+      "description": "Used by `--spectrum-picker-spacing-top-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-75": {
+      "value": "5px",
+      "description": "Used by `--spectrum-picker-spacing-bottom-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-text-75": {
+      "value": "9px",
+      "description": "Used by `--spectrum-picker-spacing-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-75": {
+      "value": "5px",
+      "description": "Used by `--spectrum-picker-spacing-starting-icon-to-text`, `--spectrum-picker-spacing-text-to-icon-inline-end`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-label-to-component-quiet-small": {
+      "value": "-8px",
+      "description": "Used by `--spectrum-picker-spacing-label-to-picker-quiet`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-workflow-icon-75": {
+      "value": "4px",
+      "description": "Used by `--spectrum-picker-spacing-top-to-alert-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-top-to-progress-circle-small": {
+      "value": "4px",
+      "description": "Used by `--spectrum-picker-spacing-top-to-progress-circle`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-top-to-disclosure-icon-75": {
+      "value": "7px",
+      "description": "Used by `--spectrum-picker-spacing-top-to-disclosure-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-end-edge-to-disclosure-icon-75": {
+      "value": "7px",
+      "description": "Used by `--spectrum-picker-spacing-edge-to-disclosure-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-to-menu-small": {
+      "value": "6px",
+      "description": "Used by `--spectrum-picker-popover-animation-distance`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-200": {
+      "value": "16px",
+      "description": "Used by `--spectrum-picker-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-default-width-large": {
+      "value": "224px",
+      "description": "Used by `--spectrum-picker-inline-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-200": {
+      "value": "40px",
+      "description": "Used by `--spectrum-picker-block-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-medium-size-large": {
+      "value": "9px",
+      "description": "Used by `--spectrum-picker-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-label-to-component-quiet-large": {
+      "value": "-12px",
+      "description": "Used by `--spectrum-picker-spacing-label-to-picker-quiet`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-200": {
+      "value": "9px",
+      "description": "Used by `--spectrum-picker-spacing-top-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-200": {
+      "value": "11px",
+      "description": "Used by `--spectrum-picker-spacing-bottom-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-text-200": {
+      "value": "15px",
+      "description": "Used by `--spectrum-picker-spacing-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-200": {
+      "value": "7px",
+      "description": "Used by `--spectrum-picker-spacing-starting-icon-to-text`, `--spectrum-picker-spacing-text-to-icon-inline-end`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-workflow-icon-200": {
+      "value": "9px",
+      "description": "Used by `--spectrum-picker-spacing-top-to-alert-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-top-to-progress-circle-large": {
+      "value": "9px",
+      "description": "Used by `--spectrum-picker-spacing-top-to-progress-circle`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-top-to-disclosure-icon-200": {
+      "value": "14px",
+      "description": "Used by `--spectrum-picker-spacing-top-to-disclosure-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-end-edge-to-disclosure-icon-200": {
+      "value": "14px",
+      "description": "Used by `--spectrum-picker-spacing-edge-to-disclosure-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-to-menu-large": {
+      "value": "7px",
+      "description": "Used by `--spectrum-picker-popover-animation-distance`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-300": {
+      "value": "18px",
+      "description": "Used by `--spectrum-picker-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-default-width-extra-large": {
+      "value": "240px",
+      "description": "Used by `--spectrum-picker-inline-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-300": {
+      "value": "48px",
+      "description": "Used by `--spectrum-picker-block-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-medium-size-extra-large": {
+      "value": "10px",
+      "description": "Used by `--spectrum-picker-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-label-to-component-quiet-extra-large": {
+      "value": "-15px",
+      "description": "Used by `--spectrum-picker-spacing-label-to-picker-quiet`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-300": {
+      "value": "12px",
+      "description": "Used by `--spectrum-picker-spacing-top-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-300": {
+      "value": "14px",
+      "description": "Used by `--spectrum-picker-spacing-bottom-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-text-300": {
+      "value": "18px",
+      "description": "Used by `--spectrum-picker-spacing-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-300": {
+      "value": "8px",
+      "description": "Used by `--spectrum-picker-spacing-starting-icon-to-text`, `--spectrum-picker-spacing-text-to-icon-inline-end`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-workflow-icon-300": {
+      "value": "11px",
+      "description": "Used by `--spectrum-picker-spacing-top-to-alert-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-top-to-progress-circle-extra-large": {
+      "value": "11px",
+      "description": "Used by `--spectrum-picker-spacing-top-to-progress-circle`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-top-to-disclosure-icon-300": {
+      "value": "17px",
+      "description": "Used by `--spectrum-picker-spacing-top-to-disclosure-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-end-edge-to-disclosure-icon-300": {
+      "value": "17px",
+      "description": "Used by `--spectrum-picker-spacing-edge-to-disclosure-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-to-menu-extra-large": {
+      "value": "8px",
+      "description": "Used by `--spectrum-picker-popover-animation-distance`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-edge-to-text-quiet": {
+      "value": "0px",
+      "description": "Used by `--spectrum-picker-spacing-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-downstate-height": {
+      "description": "Used by `.spectrum-Picker-button:active`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-downstate-width": {
+      "description": "Used by `.spectrum-Picker-button:active`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-size-width-ratio-down": {
+      "value": "0.3333",
+      "description": "Used by `.spectrum-Picker-button:active`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-size-difference-down": {
+      "value": "-2px",
+      "description": "Used by `.spectrum-Picker-button:active`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {
+    "mod-button-font-family": {
+      "category": "Passthrough"
+    },
+    "mod-button-line-height": {
+      "category": "Passthrough"
+    },
+    "mod-button-animation-duration": {
+      "category": "Passthrough"
+    },
+    "mod-popover-animation-distance": {
+      "category": "Passthrough"
+    }
+  },
+  "high-contrast": {
+    "highcontrast-picker-content-color-default": {
+      "value": "var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default))",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker-button`, `.spectrum-Picker-button:active .spectrum-Picker-label.is-placeholder`, `.spectrum-Picker-button.is-keyboardFocused, .spectrum-Picker-button:focus-visible`, `.spectrum-Picker-button.is-keyboardFocused .spectrum-Picker-label.is-placeholder, .spectrum-Picker-button:focus-visible .spectrum-Picker-label.is-placeholder`, `.spectrum-Picker-button.is-keyboardFocused .spectrum-Picker-menuIcon, .spectrum-Picker-button:focus-visible .spectrum-Picker-menuIcon`, `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading)`, `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading) .spectrum-Picker-menuIcon`, `.spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled) .spectrum-Picker-validationIcon`, `.spectrum-Picker-label.is-placeholder`, `.spectrum-Picker-button:hover`, `.spectrum-Picker-button:hover .spectrum-Picker-menuIcon`, `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover`, `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover .spectrum-Picker-menuIcon`, `.spectrum-Picker-label.is-placeholder:hover`, `.spectrum-Picker-label.is-placeholder:active`, `.spectrum-Picker-menuIcon`, `.spectrum-Picker-menuIcon:active`, `.spectrum-Picker--quiet .spectrum-Picker-button`. <br/>Defaults to `var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-picker-background-color": {
+      "value": "var(--mod-picker-background-color-disabled, var(--spectrum-picker-background-color-disabled))",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker-button`, `.spectrum-Picker-button:active`, `.spectrum-Picker-button.is-keyboardFocused, .spectrum-Picker-button:focus-visible`, `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading)`, `.spectrum-Picker-button:hover`, `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover`, `.spectrum-Picker-button.is-disabled:not(.spectrum-Picker--quiet), .spectrum-Picker-button:disabled:not(.spectrum-Picker--quiet)`. <br/>Defaults to `var(--mod-picker-background-color-disabled, var(--spectrum-picker-background-color-disabled))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-picker-border-color-default": {
+      "value": "var(--mod-picker-border-color-error-key-focus, var(--spectrum-picker-border-color-error-key-focus))",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker-button`, `.spectrum-Picker-button:active`, `.spectrum-Picker-button.is-keyboardFocused, .spectrum-Picker-button:focus-visible`, `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading)`, `.spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled)`, `.spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled):active`, `.spectrum-Picker-button.is-invalid.is-open:not(:disabled, .is-disabled)`, `.spectrum-Picker-button.is-invalid.is-keyboardFocused:not(:disabled, .is-disabled), .spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled):focus-visible`. <br/>Defaults to `var(--mod-picker-border-color-error-key-focus, var(--spectrum-picker-border-color-error-key-focus))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-picker-focus-indicator-color": {
+      "value": "var(--mod-picker-focus-indicator-color, var(--spectrum-picker-focus-indicator-color))",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker-button.is-keyboardFocused:after, .spectrum-Picker-button:focus-visible:after`, `.spectrum-Picker--quiet .spectrum-Picker-button.is-keyboardFocused:after, .spectrum-Picker--quiet .spectrum-Picker-button:focus-visible:after`. <br/>Defaults to `var(--mod-picker-focus-indicator-color, var(--spectrum-picker-focus-indicator-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-picker-border-color-hover": {
+      "value": "var(--mod-picker-border-color-error-hover-open, var(--spectrum-picker-border-color-error-hover-open))",
+      "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker.is-keyboardFocused, .spectrum-Picker:focus-visible`. <br/>Used by `.spectrum-Picker-button:hover`, `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover`, `.spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled):hover`, `.spectrum-Picker-button.is-invalid.is-open:not(:disabled, .is-disabled):hover`. <br/>Defaults to `var(--mod-picker-border-color-error-hover-open, var(--spectrum-picker-border-color-error-hover-open))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-picker-border-color-disabled": {
+      "value": "GrayText",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker-button.is-disabled, .spectrum-Picker-button:disabled`. <br/>Defaults to `GrayText`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-picker-content-color-disabled": {
+      "value": "var(--mod-picker-icon-color-disabled, var(--spectrum-picker-icon-color-disabled))",
+      "description": "Defined in `.spectrum-Picker`. <br/>Used by `.spectrum-Picker-button.is-disabled, .spectrum-Picker-button:disabled`, `.spectrum-Picker-button.is-disabled .spectrum-Picker-icon, .spectrum-Picker-button.is-disabled .spectrum-Picker-menuIcon, .spectrum-Picker-button.is-disabled .spectrum-Picker-validationIcon, .spectrum-Picker-button:disabled .spectrum-Picker-icon, .spectrum-Picker-button:disabled .spectrum-Picker-menuIcon, .spectrum-Picker-button:disabled .spectrum-Picker-validationIcon`, `.spectrum-Picker-button.is-disabled .spectrum-Picker-label.is-placeholder, .spectrum-Picker-button:disabled .spectrum-Picker-label.is-placeholder`, `.spectrum-Picker.is-loading .spectrum-Picker-menuIcon`. <br/>Defaults to `var(--mod-picker-icon-color-disabled, var(--spectrum-picker-icon-color-disabled))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/picker/stories/picker.stories.js b/components/picker/stories/picker.stories.js
index 306a1490bdf..734d6b3f3ec 100644
--- a/components/picker/stories/picker.stories.js
+++ b/components/picker/stories/picker.stories.js
@@ -3,11 +3,13 @@ import { WithDividers as MenuStories } from "@spectrum-css/menu/stories/menu.sto
 import { Sizes, withDownStateDimensionCapture } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isActive, isDisabled, isHovered, isInvalid, isKeyboardFocused, isLoading, isOpen, isQuiet, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { PickerGroup } from "./picker.test.js";
 import { ClosedAndOpenTemplate, DisabledTemplate, Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * The picker component (sometimes known as a "dropdown" or "select") allows users to choose from a list of options in a limited space. The list of options can change based on the context.
  */
@@ -157,12 +159,7 @@ export default {
 		},
 		packageJson,
 		metadata,
-		downState: {
-			selectors: [".spectrum-Picker:not(:disabled, .is-disabled, .is-loading)"],
-		},
-		status: {
-			type: "migrated",
-		},
+		cssprops: metadata.modifiers,
 	},
 	decorators: [
 		withDownStateDimensionCapture,
diff --git a/components/pickerbutton/dist/metadata.json b/components/pickerbutton/dist/metadata.json
index c6186980d83..70f5d4bc0dc 100644
--- a/components/pickerbutton/dist/metadata.json
+++ b/components/pickerbutton/dist/metadata.json
@@ -13,6 +13,11 @@
     ".spectrum-PickerButton-fill",
     ".spectrum-PickerButton-icon",
     ".spectrum-PickerButton-label",
+    ".spectrum-PickerButton:active",
+    ".spectrum-PickerButton:disabled",
+    ".spectrum-PickerButton:focus",
+    ".spectrum-PickerButton:focus-visible",
+    ".spectrum-PickerButton:hover",
     ".spectrum-PickerButton.is-focused",
     ".spectrum-PickerButton.is-keyboardFocused",
     ".spectrum-PickerButton.is-open",
@@ -20,124 +25,598 @@
     ".spectrum-PickerButton.spectrum-PickerButton--sizeL",
     ".spectrum-PickerButton.spectrum-PickerButton--sizeS",
     ".spectrum-PickerButton.spectrum-PickerButton--sizeXL",
-    ".spectrum-PickerButton.spectrum-PickerButton--uiicononly",
-    ".spectrum-PickerButton:active",
-    ".spectrum-PickerButton:disabled",
-    ".spectrum-PickerButton:focus",
-    ".spectrum-PickerButton:focus-visible",
-    ".spectrum-PickerButton:hover"
-  ],
-  "modifiers": [
-    "--mod-picker-button-background-animation-duration",
-    "--mod-picker-button-background-color",
-    "--mod-picker-button-background-color-disabled",
-    "--mod-picker-button-background-color-down",
-    "--mod-picker-button-background-color-down-disabled",
-    "--mod-picker-button-background-color-down-quiet",
-    "--mod-picker-button-background-color-hover",
-    "--mod-picker-button-background-color-hover-disabled",
-    "--mod-picker-button-background-color-hover-quiet",
-    "--mod-picker-button-background-color-key-focus",
-    "--mod-picker-button-background-color-key-focus-quiet",
-    "--mod-picker-button-background-color-quiet",
-    "--mod-picker-button-border-color",
-    "--mod-picker-button-border-color-disabled",
-    "--mod-picker-button-border-color-quiet",
-    "--mod-picker-button-border-radius",
-    "--mod-picker-button-border-radius-rounded",
-    "--mod-picker-button-border-radius-rounded-sided",
-    "--mod-picker-button-border-radius-sided",
-    "--mod-picker-button-border-width",
-    "--mod-picker-button-fill-padding",
-    "--mod-picker-button-font-color",
-    "--mod-picker-button-font-color-disabled",
-    "--mod-picker-button-font-color-down",
-    "--mod-picker-button-font-color-down-disabled",
-    "--mod-picker-button-font-color-hover",
-    "--mod-picker-button-font-color-hover-disabled",
-    "--mod-picker-button-font-color-key-focus",
-    "--mod-picker-button-font-family",
-    "--mod-picker-button-font-size",
-    "--mod-picker-button-font-style",
-    "--mod-picker-button-font-weight",
-    "--mod-picker-button-gap",
-    "--mod-picker-button-height",
-    "--mod-picker-button-icon-color",
-    "--mod-picker-button-icon-color-disabled",
-    "--mod-picker-button-icon-color-down",
-    "--mod-picker-button-icon-color-down-disabled",
-    "--mod-picker-button-icon-color-hover",
-    "--mod-picker-button-icon-color-hover-disabled",
-    "--mod-picker-button-icon-color-key-focus",
-    "--mod-picker-button-label-padding",
-    "--mod-picker-button-padding",
-    "--mod-picker-button-width"
-  ],
-  "component": [
-    "--spectrum-picker-button-background-animation-duration",
-    "--spectrum-picker-button-background-color",
-    "--spectrum-picker-button-background-color-down",
-    "--spectrum-picker-button-background-color-hover",
-    "--spectrum-picker-button-background-color-key-focus",
-    "--spectrum-picker-button-border-color",
-    "--spectrum-picker-button-border-radius",
-    "--spectrum-picker-button-border-radius-rounded",
-    "--spectrum-picker-button-border-radius-rounded-sided",
-    "--spectrum-picker-button-border-radius-sided",
-    "--spectrum-picker-button-border-width",
-    "--spectrum-picker-button-fill-padding",
-    "--spectrum-picker-button-font-color",
-    "--spectrum-picker-button-font-color-down",
-    "--spectrum-picker-button-font-color-hover",
-    "--spectrum-picker-button-font-color-key-focus",
-    "--spectrum-picker-button-font-family",
-    "--spectrum-picker-button-font-size",
-    "--spectrum-picker-button-font-style",
-    "--spectrum-picker-button-font-weight",
-    "--spectrum-picker-button-gap",
-    "--spectrum-picker-button-height",
-    "--spectrum-picker-button-icon-color",
-    "--spectrum-picker-button-icon-color-down",
-    "--spectrum-picker-button-icon-color-hover",
-    "--spectrum-picker-button-icon-color-key-focus",
-    "--spectrum-picker-button-label-padding",
-    "--spectrum-picker-button-padding",
-    "--spectrum-picker-button-width"
-  ],
-  "global": [
-    "--spectrum-animation-duration-100",
-    "--spectrum-body-sans-serif-font-weight",
-    "--spectrum-border-width-100",
-    "--spectrum-component-height-100",
-    "--spectrum-component-height-200",
-    "--spectrum-component-height-300",
-    "--spectrum-component-height-75",
-    "--spectrum-corner-radius-100",
-    "--spectrum-corner-radius-200",
-    "--spectrum-default-font-style",
-    "--spectrum-disabled-background-color",
-    "--spectrum-disabled-content-color",
-    "--spectrum-field-edge-to-disclosure-icon-100",
-    "--spectrum-field-edge-to-disclosure-icon-200",
-    "--spectrum-field-edge-to-disclosure-icon-300",
-    "--spectrum-field-edge-to-disclosure-icon-75",
-    "--spectrum-font-size-100",
-    "--spectrum-font-size-200",
-    "--spectrum-font-size-300",
-    "--spectrum-font-size-75",
-    "--spectrum-gray-100",
-    "--spectrum-gray-200",
-    "--spectrum-gray-50",
-    "--spectrum-neutral-content-color-default",
-    "--spectrum-neutral-content-color-down",
-    "--spectrum-neutral-content-color-hover",
-    "--spectrum-neutral-content-color-key-focus",
-    "--spectrum-sans-font-family-stack",
-    "--spectrum-spacing-75",
-    "--spectrum-text-to-visual-200",
-    "--spectrum-text-to-visual-300",
-    "--spectrum-text-to-visual-50"
+    ".spectrum-PickerButton.spectrum-PickerButton--uiicononly"
   ],
-  "passthroughs": [],
-  "high-contrast": []
+  "modifiers": {
+    "mod-picker-button-background-color": {
+      "description": "Defined in `.spectrum-PickerButton:hover`, `.spectrum-PickerButton.is-open, .spectrum-PickerButton:active`, `.spectrum-PickerButton.is-focused, .spectrum-PickerButton.is-keyboardFocused, .spectrum-PickerButton:focus, .spectrum-PickerButton:focus-visible`, `.spectrum-PickerButton:disabled`, `.spectrum-PickerButton.spectrum-PickerButton--quiet`. <br/>Used by `.spectrum-PickerButton-fill`. <br/>Defaults to `var(--spectrum-picker-button-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-button-background-color-hover": {
+      "description": "Defined in `.spectrum-PickerButton:disabled`, `.spectrum-PickerButton.spectrum-PickerButton--quiet`. <br/>Used by `--mod-picker-button-background-color`. <br/>Defaults to `var(--spectrum-picker-button-background-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-button-font-color": {
+      "description": "Defined in `.spectrum-PickerButton:hover`, `.spectrum-PickerButton.is-open, .spectrum-PickerButton:active`, `.spectrum-PickerButton.is-focused, .spectrum-PickerButton.is-keyboardFocused, .spectrum-PickerButton:focus, .spectrum-PickerButton:focus-visible`, `.spectrum-PickerButton:disabled`. <br/>Used by `.spectrum-PickerButton-label`. <br/>Defaults to `var(--spectrum-picker-button-font-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-button-font-color-hover": {
+      "description": "Defined in `.spectrum-PickerButton:disabled`. <br/>Used by `--mod-picker-button-font-color`. <br/>Defaults to `var(--spectrum-picker-button-font-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-button-icon-color": {
+      "description": "Defined in `.spectrum-PickerButton:hover`, `.spectrum-PickerButton.is-open, .spectrum-PickerButton:active`, `.spectrum-PickerButton.is-focused, .spectrum-PickerButton.is-keyboardFocused, .spectrum-PickerButton:focus, .spectrum-PickerButton:focus-visible`, `.spectrum-PickerButton:disabled`. <br/>Used by `.spectrum-PickerButton-icon`. <br/>Defaults to `var(--spectrum-picker-button-icon-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-button-icon-color-hover": {
+      "description": "Defined in `.spectrum-PickerButton:disabled`. <br/>Used by `--mod-picker-button-icon-color`. <br/>Defaults to `var(--spectrum-picker-button-icon-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-button-background-color-down": {
+      "description": "Defined in `.spectrum-PickerButton:disabled`, `.spectrum-PickerButton.spectrum-PickerButton--quiet`. <br/>Used by `--mod-picker-button-background-color`. <br/>Defaults to `var(--spectrum-picker-button-background-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-button-font-color-down": {
+      "description": "Defined in `.spectrum-PickerButton:disabled`. <br/>Used by `--mod-picker-button-font-color`. <br/>Defaults to `var(--spectrum-picker-button-font-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-button-icon-color-down": {
+      "description": "Defined in `.spectrum-PickerButton:disabled`. <br/>Used by `--mod-picker-button-icon-color`. <br/>Defaults to `var(--spectrum-picker-button-icon-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-button-background-color-key-focus": {
+      "description": "Defined in `.spectrum-PickerButton.spectrum-PickerButton--quiet`. <br/>Used by `--mod-picker-button-background-color`. <br/>Defaults to `var(--spectrum-picker-button-background-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-button-font-color-key-focus": {
+      "description": "Used by `--mod-picker-button-font-color`. <br/>Defaults to `var(--spectrum-picker-button-font-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-button-icon-color-key-focus": {
+      "description": "Used by `--mod-picker-button-icon-color`. <br/>Defaults to `var(--spectrum-picker-button-icon-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-button-background-color-disabled": {
+      "description": "Used by `--mod-picker-button-background-color`. <br/>Defaults to `var(--spectrum-disabled-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-button-background-color-hover-disabled": {
+      "description": "Used by `--mod-picker-button-background-color-hover`. <br/>Defaults to `var(--spectrum-disabled-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-button-background-color-down-disabled": {
+      "description": "Used by `--mod-picker-button-background-color-down`. <br/>Defaults to `var(--spectrum-disabled-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-button-border-color": {
+      "description": "Defined in `.spectrum-PickerButton:disabled`, `.spectrum-PickerButton.spectrum-PickerButton--quiet`. <br/>Used by `.spectrum-PickerButton-fill`. <br/>Defaults to `var(--spectrum-picker-button-border-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-button-border-color-disabled": {
+      "description": "Used by `--mod-picker-button-border-color`. <br/>Defaults to `var(--spectrum-disabled-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-button-font-color-disabled": {
+      "description": "Used by `--mod-picker-button-font-color`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-button-font-color-hover-disabled": {
+      "description": "Used by `--mod-picker-button-font-color-hover`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-button-font-color-down-disabled": {
+      "description": "Used by `--mod-picker-button-font-color-down`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-button-icon-color-disabled": {
+      "description": "Used by `--mod-picker-button-icon-color`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-button-icon-color-hover-disabled": {
+      "description": "Used by `--mod-picker-button-icon-color-hover`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-button-icon-color-down-disabled": {
+      "description": "Used by `--mod-picker-button-icon-color-down`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-button-background-color-quiet": {
+      "description": "Used by `--mod-picker-button-background-color`.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-button-background-color-hover-quiet": {
+      "description": "Used by `--mod-picker-button-background-color-hover`.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-button-background-color-down-quiet": {
+      "description": "Used by `--mod-picker-button-background-color-down`.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-button-background-color-key-focus-quiet": {
+      "description": "Used by `--mod-picker-button-background-color-key-focus`.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-button-border-color-quiet": {
+      "description": "Used by `--mod-picker-button-border-color`.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-picker-button-width": {
+      "description": "Used by `.spectrum-PickerButton`. <br/>Defaults to `var(--spectrum-picker-button-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-button-padding": {
+      "description": "Used by `.spectrum-PickerButton`, `.spectrum-PickerButton-fill`. <br/>Defaults to `var(--spectrum-picker-button-padding)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-button-height": {
+      "description": "Used by `.spectrum-PickerButton.spectrum-PickerButton--uiicononly`. <br/>Defaults to `var(--spectrum-picker-button-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-button-label-padding": {
+      "description": "Used by `.spectrum-PickerButton-label`. <br/>Defaults to `var(--spectrum-picker-button-label-padding)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-button-font-family": {
+      "description": "Used by `.spectrum-PickerButton-label`. <br/>Defaults to `var(--spectrum-picker-button-font-family)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-button-font-style": {
+      "description": "Used by `.spectrum-PickerButton-label`. <br/>Defaults to `var(--spectrum-picker-button-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-button-font-weight": {
+      "description": "Used by `.spectrum-PickerButton-label`. <br/>Defaults to `var(--spectrum-picker-button-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-button-font-size": {
+      "description": "Used by `.spectrum-PickerButton-label`. <br/>Defaults to `var(--spectrum-picker-button-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-button-gap": {
+      "description": "Used by `.spectrum-PickerButton-fill`. <br/>Defaults to `var(--spectrum-picker-button-gap)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-button-border-width": {
+      "description": "Used by `.spectrum-PickerButton-fill`. <br/>Defaults to `var(--spectrum-picker-button-border-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-button-fill-padding": {
+      "description": "Used by `.spectrum-PickerButton-fill`. <br/>Defaults to `var(--spectrum-picker-button-fill-padding)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-button-border-radius": {
+      "description": "Used by `.spectrum-PickerButton-fill`. <br/>Defaults to `var(--spectrum-picker-button-border-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-button-background-animation-duration": {
+      "description": "Used by `.spectrum-PickerButton-fill`. <br/>Defaults to `var(--spectrum-picker-button-background-animation-duration)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-button-border-radius-sided": {
+      "description": "Used by `.spectrum-PickerButton--right .spectrum-PickerButton-fill`, `.spectrum-PickerButton--left .spectrum-PickerButton-fill`. <br/>Defaults to `var(--spectrum-picker-button-border-radius-sided)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-button-border-radius-rounded-sided": {
+      "description": "Used by `.spectrum-PickerButton--right.spectrum-PickerButton--rounded .spectrum-PickerButton-fill`, `.spectrum-PickerButton--left.spectrum-PickerButton--rounded .spectrum-PickerButton-fill`. <br/>Defaults to `var(--spectrum-picker-button-border-radius-rounded-sided)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-picker-button-border-radius-rounded": {
+      "description": "Used by `.spectrum-PickerButton--rounded .spectrum-PickerButton-fill`. <br/>Defaults to `var(--spectrum-picker-button-border-radius-rounded)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-picker-button-padding": {
+      "value": "4px",
+      "description": "Defined in `.spectrum-PickerButton`. <br/>Used by `.spectrum-PickerButton`, `.spectrum-PickerButton-fill`. <br/>Defaults to `4px`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-button-height": {
+      "value": "48px",
+      "description": "Defined in `.spectrum-PickerButton`, `.spectrum-PickerButton.spectrum-PickerButton--sizeS`, `.spectrum-PickerButton.spectrum-PickerButton--sizeL`, `.spectrum-PickerButton.spectrum-PickerButton--sizeXL`. <br/>Used by `.spectrum-PickerButton.spectrum-PickerButton--uiicononly`. <br/>Defaults to `var(--spectrum-component-height-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-button-width": {
+      "value": "48px",
+      "description": "Defined in `.spectrum-PickerButton`, `.spectrum-PickerButton.spectrum-PickerButton--sizeS`, `.spectrum-PickerButton.spectrum-PickerButton--sizeL`, `.spectrum-PickerButton.spectrum-PickerButton--sizeXL`. <br/>Used by `.spectrum-PickerButton`. <br/>Defaults to `var(--spectrum-component-height-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-button-gap": {
+      "value": "5px",
+      "description": "Defined in `.spectrum-PickerButton`. <br/>Used by `.spectrum-PickerButton-fill`. <br/>Defaults to `var(--spectrum-text-to-visual-50)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-button-label-padding": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-PickerButton`, `.spectrum-PickerButton.spectrum-PickerButton--sizeS`, `.spectrum-PickerButton.spectrum-PickerButton--sizeL`, `.spectrum-PickerButton.spectrum-PickerButton--sizeXL`. <br/>Used by `.spectrum-PickerButton-label`. <br/>Defaults to `var(--spectrum-text-to-visual-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-button-fill-padding": {
+      "value": "17px",
+      "description": "Defined in `.spectrum-PickerButton`, `.spectrum-PickerButton.spectrum-PickerButton--sizeS`, `.spectrum-PickerButton.spectrum-PickerButton--sizeL`, `.spectrum-PickerButton.spectrum-PickerButton--sizeXL`. <br/>Used by `.spectrum-PickerButton-fill`. <br/>Defaults to `var(--spectrum-field-edge-to-disclosure-icon-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-button-icon-color": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-PickerButton`. <br/>Used by `.spectrum-PickerButton-icon`. <br/>Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-button-icon-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-PickerButton`. <br/>Used by `--mod-picker-button-icon-color`. <br/>Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-button-icon-color-down": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-PickerButton`. <br/>Used by `--mod-picker-button-icon-color`. <br/>Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-button-icon-color-key-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-PickerButton`. <br/>Used by `--mod-picker-button-icon-color`. <br/>Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-button-font-color": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-PickerButton`. <br/>Used by `.spectrum-PickerButton-label`. <br/>Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-button-font-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-PickerButton`. <br/>Used by `--mod-picker-button-font-color`. <br/>Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-button-font-color-down": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-PickerButton`. <br/>Used by `--mod-picker-button-font-color`. <br/>Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-button-font-color-key-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-PickerButton`. <br/>Used by `--mod-picker-button-font-color`. <br/>Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-button-font-family": {
+      "value": "var(--spectrum-sans-font-family-stack)",
+      "description": "Defined in `.spectrum-PickerButton`. <br/>Used by `.spectrum-PickerButton-label`. <br/>Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-button-font-style": {
+      "value": "normal",
+      "description": "Defined in `.spectrum-PickerButton`. <br/>Used by `.spectrum-PickerButton-label`. <br/>Defaults to `var(--spectrum-default-font-style)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-button-font-weight": {
+      "value": "400",
+      "description": "Defined in `.spectrum-PickerButton`. <br/>Used by `.spectrum-PickerButton-label`. <br/>Defaults to `var(--spectrum-body-sans-serif-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-button-font-size": {
+      "value": "18px",
+      "description": "Defined in `.spectrum-PickerButton`, `.spectrum-PickerButton.spectrum-PickerButton--sizeS`, `.spectrum-PickerButton.spectrum-PickerButton--sizeL`, `.spectrum-PickerButton.spectrum-PickerButton--sizeXL`. <br/>Used by `.spectrum-PickerButton-label`. <br/>Defaults to `var(--spectrum-font-size-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-button-border-color": {
+      "value": "inherit",
+      "description": "Defined in `.spectrum-PickerButton`. <br/>Used by `.spectrum-PickerButton-fill`. <br/>Defaults to `inherit`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-button-border-radius": {
+      "value": "4px",
+      "description": "Defined in `.spectrum-PickerButton`. <br/>Used by `.spectrum-PickerButton-fill`. <br/>Defaults to `var(--spectrum-corner-radius-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-button-border-radius-rounded-sided": {
+      "value": "0",
+      "description": "Defined in `.spectrum-PickerButton`. <br/>Used by `.spectrum-PickerButton--right.spectrum-PickerButton--rounded .spectrum-PickerButton-fill`, `.spectrum-PickerButton--left.spectrum-PickerButton--rounded .spectrum-PickerButton-fill`. <br/>Defaults to `0`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-button-border-radius-sided": {
+      "value": "0",
+      "description": "Defined in `.spectrum-PickerButton`. <br/>Used by `.spectrum-PickerButton--right .spectrum-PickerButton-fill`, `.spectrum-PickerButton--left .spectrum-PickerButton-fill`. <br/>Defaults to `0`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-button-border-width": {
+      "value": "1px",
+      "description": "Defined in `.spectrum-PickerButton`. <br/>Used by `.spectrum-PickerButton-fill`. <br/>Defaults to `var(--spectrum-border-width-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-button-border-radius-rounded": {
+      "value": "5px",
+      "description": "Defined in `.spectrum-PickerButton`. <br/>Used by `.spectrum-PickerButton--rounded .spectrum-PickerButton-fill`. <br/>Defaults to `var(--spectrum-corner-radius-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-picker-button-background-color": {
+      "value": "light-dark(rgb(248, 248, 248), rgb(27, 27, 27))",
+      "description": "Defined in `.spectrum-PickerButton`. <br/>Used by `.spectrum-PickerButton-fill`. <br/>Defaults to `var(--spectrum-gray-50)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-button-background-color-hover": {
+      "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+      "description": "Defined in `.spectrum-PickerButton`. <br/>Used by `--mod-picker-button-background-color`. <br/>Defaults to `var(--spectrum-gray-100)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-button-background-color-down": {
+      "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+      "description": "Defined in `.spectrum-PickerButton`. <br/>Used by `--mod-picker-button-background-color`. <br/>Defaults to `var(--spectrum-gray-200)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-button-background-color-key-focus": {
+      "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+      "description": "Defined in `.spectrum-PickerButton`. <br/>Used by `--mod-picker-button-background-color`. <br/>Defaults to `var(--spectrum-gray-100)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-picker-button-background-animation-duration": {
+      "value": "var(--spectrum-animation-duration-100)",
+      "description": "Defined in `.spectrum-PickerButton`. <br/>Used by `.spectrum-PickerButton-fill`. <br/>Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-component-height-100": {
+      "value": "32px",
+      "description": "Used by `--spectrum-picker-button-height`, `--spectrum-picker-button-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-50": {
+      "value": "5px",
+      "description": "Used by `--spectrum-picker-button-gap`, `--spectrum-picker-button-label-padding`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-edge-to-disclosure-icon-100": {
+      "value": "11px",
+      "description": "Used by `--spectrum-picker-button-fill-padding`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-picker-button-icon-color`, `--spectrum-picker-button-font-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-picker-button-icon-color-hover`, `--spectrum-picker-button-font-color-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-down": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-picker-button-icon-color-down`, `--spectrum-picker-button-font-color-down`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-key-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-picker-button-icon-color-key-focus`, `--spectrum-picker-button-font-color-key-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-sans-font-family-stack": {
+      "description": "Used by `--spectrum-picker-button-font-family`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-default-font-style": {
+      "value": "normal",
+      "description": "Used by `--spectrum-picker-button-font-style`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-sans-serif-font-weight": {
+      "value": "400",
+      "description": "Used by `--spectrum-picker-button-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-100": {
+      "value": "14px",
+      "description": "Used by `--spectrum-picker-button-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-100": {
+      "value": "4px",
+      "description": "Used by `--spectrum-picker-button-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-border-width-100": {
+      "value": "1px",
+      "description": "Used by `--spectrum-picker-button-border-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-200": {
+      "value": "5px",
+      "description": "Used by `--spectrum-picker-button-border-radius-rounded`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-50": {
+      "value": "light-dark(rgb(248, 248, 248), rgb(27, 27, 27))",
+      "description": "Used by `--spectrum-picker-button-background-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-100": {
+      "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+      "description": "Used by `--spectrum-picker-button-background-color-hover`, `--spectrum-picker-button-background-color-key-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-200": {
+      "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+      "description": "Used by `--spectrum-picker-button-background-color-down`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-animation-duration-100": {
+      "description": "Used by `--spectrum-picker-button-background-animation-duration`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-disabled-background-color": {
+      "value": "var(--spectrum-gray-100)",
+      "description": "Used by `--mod-picker-button-background-color`, `--mod-picker-button-background-color-hover`, `--mod-picker-button-background-color-down`, `--mod-picker-button-border-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-disabled-content-color": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Used by `--mod-picker-button-font-color`, `--mod-picker-button-font-color-hover`, `--mod-picker-button-font-color-down`, `--mod-picker-button-icon-color`, `--mod-picker-button-icon-color-hover`, `--mod-picker-button-icon-color-down`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-component-height-75": {
+      "value": "24px",
+      "description": "Used by `--spectrum-picker-button-height`, `--spectrum-picker-button-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-75": {
+      "value": "4px",
+      "description": "Used by `--spectrum-picker-button-label-padding`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-75": {
+      "value": "12px",
+      "description": "Used by `--spectrum-picker-button-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-edge-to-disclosure-icon-75": {
+      "value": "7px",
+      "description": "Used by `--spectrum-picker-button-fill-padding`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-200": {
+      "value": "40px",
+      "description": "Used by `--spectrum-picker-button-height`, `--spectrum-picker-button-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-200": {
+      "value": "7px",
+      "description": "Used by `--spectrum-picker-button-label-padding`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-200": {
+      "value": "16px",
+      "description": "Used by `--spectrum-picker-button-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-edge-to-disclosure-icon-200": {
+      "value": "14px",
+      "description": "Used by `--spectrum-picker-button-fill-padding`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-300": {
+      "value": "48px",
+      "description": "Used by `--spectrum-picker-button-height`, `--spectrum-picker-button-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-300": {
+      "value": "8px",
+      "description": "Used by `--spectrum-picker-button-label-padding`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-300": {
+      "value": "18px",
+      "description": "Used by `--spectrum-picker-button-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-edge-to-disclosure-icon-300": {
+      "value": "17px",
+      "description": "Used by `--spectrum-picker-button-fill-padding`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {}
 }
diff --git a/components/pickerbutton/stories/pickerbutton.stories.js b/components/pickerbutton/stories/pickerbutton.stories.js
index c01a0f00eec..2278057c1dc 100644
--- a/components/pickerbutton/stories/pickerbutton.stories.js
+++ b/components/pickerbutton/stories/pickerbutton.stories.js
@@ -2,11 +2,13 @@ import { default as Icon } from "@spectrum-css/icon/stories/icon.stories.js";
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, isFocused, isOpen, isQuiet, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { PickerGroup } from "./pickerbutton.test.js";
 import { CustomIconTemplate, Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * The picker button component is used as a dropdown trigger within other components such as [combobox](?path=/docs/components-combobox--docs).
  */
@@ -87,6 +89,10 @@ export default {
 	parameters: {
 		packageJson,
 		metadata,
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 };
 
diff --git a/components/pickerbutton/stories/template.js b/components/pickerbutton/stories/template.js
index 6adcb7398fd..18ace797032 100644
--- a/components/pickerbutton/stories/template.js
+++ b/components/pickerbutton/stories/template.js
@@ -11,7 +11,7 @@ import "../index.css";
 
 export const Template = ({
 	rootClass = "spectrum-PickerButton",
-	id = getRandomId("pickerbutton"),
+	id = getRandomId("picker-button"),
 	size = "m",
 	label,
 	position,
diff --git a/components/popover/dist/metadata.json b/components/popover/dist/metadata.json
index f78a1db58ae..b11fa0f4c5a 100644
--- a/components/popover/dist/metadata.json
+++ b/components/popover/dist/metadata.json
@@ -85,62 +85,298 @@
     ".spectrum-Popover.spectrum-Popover--withTip",
     ".spectrum-Popover.spectrum-Popover--withTip .spectrum-Popover-tip .spectrum-Popover-tip-triangle"
   ],
-  "modifiers": [
-    "--mod-overlay-animation-duration",
-    "--mod-overlay-animation-duration-opened",
-    "--mod-popover-animation-distance",
-    "--mod-popover-background-color",
-    "--mod-popover-border-color",
-    "--mod-popover-border-width",
-    "--mod-popover-box-shadow",
-    "--mod-popover-content-area-spacing",
-    "--mod-popover-corner-radius",
-    "--mod-popover-drop-shadow-blur",
-    "--mod-popover-drop-shadow-color",
-    "--mod-popover-drop-shadow-x",
-    "--mod-popover-drop-shadow-y",
-    "--mod-popover-filter",
-    "--mod-popover-pointer-edge-spacing",
-    "--mod-popover-pointer-height",
-    "--mod-popover-pointer-width"
-  ],
-  "component": [
-    "--spectrum-popover-animation-distance",
-    "--spectrum-popover-background-color",
-    "--spectrum-popover-border-color-rgb",
-    "--spectrum-popover-border-color-with-transparency",
-    "--spectrum-popover-border-opacity",
-    "--spectrum-popover-border-transparency",
-    "--spectrum-popover-border-width",
-    "--spectrum-popover-box-shadow",
-    "--spectrum-popover-content-area-spacing",
-    "--spectrum-popover-corner-radius",
-    "--spectrum-popover-drop-shadow-blur",
-    "--spectrum-popover-drop-shadow-color",
-    "--spectrum-popover-drop-shadow-x",
-    "--spectrum-popover-drop-shadow-y",
-    "--spectrum-popover-edge-to-content-area",
-    "--spectrum-popover-filter",
-    "--spectrum-popover-pointer-edge-offset",
-    "--spectrum-popover-pointer-edge-spacing",
-    "--spectrum-popover-pointer-height",
-    "--spectrum-popover-pointer-width",
-    "--spectrum-popover-tip-height",
-    "--spectrum-popover-tip-width"
-  ],
-  "global": [
-    "--spectrum-animation-duration-0",
-    "--spectrum-animation-duration-100",
-    "--spectrum-background-layer-2-color",
-    "--spectrum-border-width-100",
-    "--spectrum-corner-radius-large-default",
-    "--spectrum-drop-shadow-elevated-blur",
-    "--spectrum-drop-shadow-elevated-color",
-    "--spectrum-drop-shadow-elevated-x",
-    "--spectrum-drop-shadow-elevated-y",
-    "--spectrum-gray-200-rgb",
-    "--spectrum-spacing-100"
-  ],
-  "passthroughs": [],
-  "high-contrast": ["--highcontrast-popover-border-color"]
+  "modifiers": {
+    "mod-overlay-animation-duration": {
+      "description": "Used by `.spectrum-Popover`. <br/>Defaults to `var(--spectrum-animation-duration-100, 0.13s)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-overlay-animation-duration-opened": {
+      "description": "Used by `.spectrum-Popover.is-open`. <br/>Defaults to `var(--spectrum-animation-duration-0, 0s)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-popover-drop-shadow-x": {
+      "description": "Used by `--spectrum-popover-filter`, `--spectrum-popover-box-shadow`. <br/>Defaults to `var(--spectrum-popover-drop-shadow-x)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-popover-drop-shadow-y": {
+      "description": "Used by `--spectrum-popover-filter`, `--spectrum-popover-box-shadow`. <br/>Defaults to `var(--spectrum-popover-drop-shadow-y)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-popover-drop-shadow-blur": {
+      "description": "Used by `--spectrum-popover-filter`, `--spectrum-popover-box-shadow`. <br/>Defaults to `var(--spectrum-popover-drop-shadow-blur)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-popover-drop-shadow-color": {
+      "description": "Used by `--spectrum-popover-filter`, `--spectrum-popover-box-shadow`. <br/>Defaults to `var(--spectrum-popover-drop-shadow-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-popover-content-area-spacing": {
+      "description": "Used by `.spectrum-Popover`. <br/>Defaults to `var(--spectrum-popover-content-area-spacing)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-popover-corner-radius": {
+      "description": "Used by `.spectrum-Popover`. <br/>Defaults to `var(--spectrum-popover-corner-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-popover-border-color": {
+      "description": "Used by `.spectrum-Popover`, `.spectrum-Popover.spectrum-Popover--withTip .spectrum-Popover-tip .spectrum-Popover-tip-triangle`. <br/>Defaults to `var(--spectrum-popover-border-color-with-transparency)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-popover-border-width": {
+      "description": "Used by `.spectrum-Popover`, `.spectrum-Popover.spectrum-Popover--withTip .spectrum-Popover-tip .spectrum-Popover-tip-triangle`, `.spectrum-Popover--top-end.spectrum-Popover--withTip, .spectrum-Popover--top-left.spectrum-Popover--withTip, .spectrum-Popover--top-right.spectrum-Popover--withTip, .spectrum-Popover--top-start.spectrum-Popover--withTip, .spectrum-Popover--top.spectrum-Popover--withTip`, `.spectrum-Popover--bottom-end.spectrum-Popover--withTip, .spectrum-Popover--bottom-left.spectrum-Popover--withTip, .spectrum-Popover--bottom-right.spectrum-Popover--withTip, .spectrum-Popover--bottom-start.spectrum-Popover--withTip, .spectrum-Popover--bottom.spectrum-Popover--withTip`, `.spectrum-Popover--right-bottom.spectrum-Popover--withTip, .spectrum-Popover--right-top.spectrum-Popover--withTip, .spectrum-Popover--right.spectrum-Popover--withTip`, `.spectrum-Popover--left-bottom.spectrum-Popover--withTip, .spectrum-Popover--left-top.spectrum-Popover--withTip, .spectrum-Popover--left.spectrum-Popover--withTip`, `.spectrum-Popover--start-bottom.spectrum-Popover--withTip, .spectrum-Popover--start-top.spectrum-Popover--withTip, .spectrum-Popover--start.spectrum-Popover--withTip`, `.spectrum-Popover--end-bottom.spectrum-Popover--withTip, .spectrum-Popover--end-top.spectrum-Popover--withTip, .spectrum-Popover--end.spectrum-Popover--withTip`. <br/>Defaults to `var(--spectrum-popover-border-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-popover-background-color": {
+      "description": "Used by `.spectrum-Popover`, `.spectrum-Popover.spectrum-Popover--withTip .spectrum-Popover-tip .spectrum-Popover-tip-triangle`. <br/>Defaults to `var(--spectrum-popover-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-popover-box-shadow": {
+      "description": "Used by `.spectrum-Popover`. <br/>Defaults to `var(--spectrum-popover-box-shadow)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-popover-filter": {
+      "description": "Used by `.spectrum-Popover.spectrum-Popover--withTip`. <br/>Defaults to `var(--spectrum-popover-filter)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-popover-pointer-height": {
+      "description": "Used by `.spectrum-Popover--top-end.spectrum-Popover--withTip, .spectrum-Popover--top-left.spectrum-Popover--withTip, .spectrum-Popover--top-right.spectrum-Popover--withTip, .spectrum-Popover--top-start.spectrum-Popover--withTip, .spectrum-Popover--top.spectrum-Popover--withTip`, `.spectrum-Popover--bottom-end.spectrum-Popover--withTip, .spectrum-Popover--bottom-left.spectrum-Popover--withTip, .spectrum-Popover--bottom-right.spectrum-Popover--withTip, .spectrum-Popover--bottom-start.spectrum-Popover--withTip, .spectrum-Popover--bottom.spectrum-Popover--withTip`, `.spectrum-Popover--right-bottom.spectrum-Popover--withTip, .spectrum-Popover--right-top.spectrum-Popover--withTip, .spectrum-Popover--right.spectrum-Popover--withTip`, `.spectrum-Popover--left-bottom.spectrum-Popover--withTip, .spectrum-Popover--left-top.spectrum-Popover--withTip, .spectrum-Popover--left.spectrum-Popover--withTip`, `.spectrum-Popover--start-bottom.spectrum-Popover--withTip, .spectrum-Popover--start-top.spectrum-Popover--withTip, .spectrum-Popover--start.spectrum-Popover--withTip`, `.spectrum-Popover--end-bottom.spectrum-Popover--withTip, .spectrum-Popover--end-top.spectrum-Popover--withTip, .spectrum-Popover--end.spectrum-Popover--withTip`, `.spectrum-Popover--withTip.spectrum-Popover .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-end .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-left .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-right .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-start .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-end .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-left .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-right .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-start .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--end .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--end-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--end-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start-top .spectrum-Popover-tip`. <br/>Defaults to `var(--spectrum-popover-pointer-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-popover-animation-distance": {
+      "description": "Used by `.spectrum-Popover--top-end.is-open, .spectrum-Popover--top-left.is-open, .spectrum-Popover--top-right.is-open, .spectrum-Popover--top-start.is-open, .spectrum-Popover--top.is-open`, `.spectrum-Popover--bottom-end.is-open, .spectrum-Popover--bottom-left.is-open, .spectrum-Popover--bottom-right.is-open, .spectrum-Popover--bottom-start.is-open, .spectrum-Popover--bottom.is-open`, `.spectrum-Popover--right-bottom.is-open, .spectrum-Popover--right-top.is-open, .spectrum-Popover--right.is-open`, `.spectrum-Popover--left-bottom.is-open, .spectrum-Popover--left-top.is-open, .spectrum-Popover--left.is-open`, `.spectrum-Popover--start-bottom.is-open, .spectrum-Popover--start-top.is-open, .spectrum-Popover--start.is-open`, `.spectrum-Popover--start-bottom.is-open:dir(rtl), .spectrum-Popover--start-top.is-open:dir(rtl), .spectrum-Popover--start.is-open:dir(rtl)`, `.spectrum-Popover--end-bottom.is-open, .spectrum-Popover--end-top.is-open, .spectrum-Popover--end.is-open`, `.spectrum-Popover--end-bottom.is-open:dir(rtl), .spectrum-Popover--end-top.is-open:dir(rtl), .spectrum-Popover--end.is-open:dir(rtl)`. <br/>Defaults to `var(--spectrum-popover-animation-distance)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-popover-pointer-width": {
+      "description": "Used by `.spectrum-Popover--withTip.spectrum-Popover .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-end .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-left .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-right .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-start .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-end .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-left .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-right .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-start .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--end .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--end-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--end-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start-top .spectrum-Popover-tip`. <br/>Defaults to `var(--spectrum-popover-pointer-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-popover-pointer-edge-spacing": {
+      "description": "Used by `.spectrum-Popover--withTip.spectrum-Popover--top-left .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--top-right .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--top-start .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--top-end .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--bottom-left .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--bottom-right .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--bottom-start .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--bottom-end .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--end-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start-top .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--end-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start-bottom .spectrum-Popover-tip`. <br/>Defaults to `var(--spectrum-popover-pointer-edge-spacing)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-popover-animation-distance": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-Popover`. <br/>Used by `.spectrum-Popover--top-end.is-open, .spectrum-Popover--top-left.is-open, .spectrum-Popover--top-right.is-open, .spectrum-Popover--top-start.is-open, .spectrum-Popover--top.is-open`, `.spectrum-Popover--bottom-end.is-open, .spectrum-Popover--bottom-left.is-open, .spectrum-Popover--bottom-right.is-open, .spectrum-Popover--bottom-start.is-open, .spectrum-Popover--bottom.is-open`, `.spectrum-Popover--right-bottom.is-open, .spectrum-Popover--right-top.is-open, .spectrum-Popover--right.is-open`, `.spectrum-Popover--left-bottom.is-open, .spectrum-Popover--left-top.is-open, .spectrum-Popover--left.is-open`, `.spectrum-Popover--start-bottom.is-open, .spectrum-Popover--start-top.is-open, .spectrum-Popover--start.is-open`, `.spectrum-Popover--start-bottom.is-open:dir(rtl), .spectrum-Popover--start-top.is-open:dir(rtl), .spectrum-Popover--start.is-open:dir(rtl)`, `.spectrum-Popover--end-bottom.is-open, .spectrum-Popover--end-top.is-open, .spectrum-Popover--end.is-open`, `.spectrum-Popover--end-bottom.is-open:dir(rtl), .spectrum-Popover--end-top.is-open:dir(rtl), .spectrum-Popover--end.is-open:dir(rtl)`. <br/>Defaults to `var(--spectrum-spacing-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-popover-background-color": {
+      "value": "var(--spectrum-gray-25)",
+      "description": "Defined in `.spectrum-Popover`. <br/>Used by `.spectrum-Popover`, `.spectrum-Popover.spectrum-Popover--withTip .spectrum-Popover-tip .spectrum-Popover-tip-triangle`. <br/>Defaults to `var(--spectrum-background-layer-2-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-popover-border-width": {
+      "value": "1px",
+      "description": "Defined in `.spectrum-Popover`. <br/>Used by `.spectrum-Popover`, `.spectrum-Popover.spectrum-Popover--withTip .spectrum-Popover-tip .spectrum-Popover-tip-triangle`, `.spectrum-Popover--top-end.spectrum-Popover--withTip, .spectrum-Popover--top-left.spectrum-Popover--withTip, .spectrum-Popover--top-right.spectrum-Popover--withTip, .spectrum-Popover--top-start.spectrum-Popover--withTip, .spectrum-Popover--top.spectrum-Popover--withTip`, `.spectrum-Popover--bottom-end.spectrum-Popover--withTip, .spectrum-Popover--bottom-left.spectrum-Popover--withTip, .spectrum-Popover--bottom-right.spectrum-Popover--withTip, .spectrum-Popover--bottom-start.spectrum-Popover--withTip, .spectrum-Popover--bottom.spectrum-Popover--withTip`, `.spectrum-Popover--right-bottom.spectrum-Popover--withTip, .spectrum-Popover--right-top.spectrum-Popover--withTip, .spectrum-Popover--right.spectrum-Popover--withTip`, `.spectrum-Popover--left-bottom.spectrum-Popover--withTip, .spectrum-Popover--left-top.spectrum-Popover--withTip, .spectrum-Popover--left.spectrum-Popover--withTip`, `.spectrum-Popover--start-bottom.spectrum-Popover--withTip, .spectrum-Popover--start-top.spectrum-Popover--withTip, .spectrum-Popover--start.spectrum-Popover--withTip`, `.spectrum-Popover--end-bottom.spectrum-Popover--withTip, .spectrum-Popover--end-top.spectrum-Popover--withTip, .spectrum-Popover--end.spectrum-Popover--withTip`. <br/>Defaults to `var(--spectrum-border-width-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-popover-border-color-rgb": {
+      "value": "var(--spectrum-gray-200-rgb)",
+      "description": "Defined in `.spectrum-Popover`. <br/>Used by `--spectrum-popover-border-color-with-transparency`. <br/>Defaults to `var(--spectrum-gray-200-rgb)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-popover-border-transparency": {
+      "value": "light-dark(0, 1.0)",
+      "description": "Defined in `.spectrum-Popover`. <br/>Used by `--spectrum-popover-border-color-with-transparency`. <br/>Defaults to `var(--spectrum-popover-border-opacity)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-popover-border-opacity": {
+      "value": "light-dark(0, 1.0)",
+      "description": "Used by `--spectrum-popover-border-transparency`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-popover-border-color-with-transparency": {
+      "value": "rgb(var(--spectrum-popover-border-color-rgb), var(--spectrum-popover-border-transparency))",
+      "description": "Defined in `.spectrum-Popover`. <br/>Used by `.spectrum-Popover`, `.spectrum-Popover.spectrum-Popover--withTip .spectrum-Popover-tip .spectrum-Popover-tip-triangle`. <br/>Defaults to `rgb(var(--spectrum-popover-border-color-rgb), var(--spectrum-popover-border-transparency))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-popover-content-area-spacing": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-Popover`. <br/>Used by `.spectrum-Popover`. <br/>Defaults to `var(--spectrum-popover-edge-to-content-area)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-popover-edge-to-content-area": {
+      "value": "8px",
+      "description": "Used by `--spectrum-popover-content-area-spacing`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-popover-drop-shadow-x": {
+      "value": "0px",
+      "description": "Defined in `.spectrum-Popover`. <br/>Used by `--spectrum-popover-filter`, `--spectrum-popover-box-shadow`. <br/>Defaults to `var(--spectrum-drop-shadow-elevated-x)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-popover-drop-shadow-y": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Popover`. <br/>Used by `--spectrum-popover-filter`, `--spectrum-popover-box-shadow`. <br/>Defaults to `var(--spectrum-drop-shadow-elevated-y)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-popover-drop-shadow-blur": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-Popover`. <br/>Used by `--spectrum-popover-filter`, `--spectrum-popover-box-shadow`. <br/>Defaults to `var(--spectrum-drop-shadow-elevated-blur)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-popover-drop-shadow-color": {
+      "value": "var(--spectrum-drop-shadow-color-200)",
+      "description": "Defined in `.spectrum-Popover`. <br/>Used by `--spectrum-popover-filter`, `--spectrum-popover-box-shadow`. <br/>Defaults to `var(--spectrum-drop-shadow-elevated-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-popover-corner-radius": {
+      "value": "10px",
+      "description": "Defined in `.spectrum-Popover`. <br/>Used by `--spectrum-popover-pointer-edge-offset`, `.spectrum-Popover`. <br/>Defaults to `var(--spectrum-corner-radius-large-default)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-popover-pointer-width": {
+      "value": "16px",
+      "description": "Defined in `.spectrum-Popover`. <br/>Used by `.spectrum-Popover--withTip.spectrum-Popover .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-end .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-left .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-right .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-start .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-end .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-left .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-right .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-start .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--end .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--end-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--end-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start-top .spectrum-Popover-tip`. <br/>Defaults to `var(--spectrum-popover-tip-width)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-popover-tip-width": {
+      "value": "16px",
+      "description": "Used by `--spectrum-popover-pointer-width`, `--spectrum-popover-pointer-edge-offset`, `--spectrum-popover-pointer-edge-spacing`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-popover-pointer-height": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-Popover`. <br/>Used by `.spectrum-Popover--top-end.spectrum-Popover--withTip, .spectrum-Popover--top-left.spectrum-Popover--withTip, .spectrum-Popover--top-right.spectrum-Popover--withTip, .spectrum-Popover--top-start.spectrum-Popover--withTip, .spectrum-Popover--top.spectrum-Popover--withTip`, `.spectrum-Popover--bottom-end.spectrum-Popover--withTip, .spectrum-Popover--bottom-left.spectrum-Popover--withTip, .spectrum-Popover--bottom-right.spectrum-Popover--withTip, .spectrum-Popover--bottom-start.spectrum-Popover--withTip, .spectrum-Popover--bottom.spectrum-Popover--withTip`, `.spectrum-Popover--right-bottom.spectrum-Popover--withTip, .spectrum-Popover--right-top.spectrum-Popover--withTip, .spectrum-Popover--right.spectrum-Popover--withTip`, `.spectrum-Popover--left-bottom.spectrum-Popover--withTip, .spectrum-Popover--left-top.spectrum-Popover--withTip, .spectrum-Popover--left.spectrum-Popover--withTip`, `.spectrum-Popover--start-bottom.spectrum-Popover--withTip, .spectrum-Popover--start-top.spectrum-Popover--withTip, .spectrum-Popover--start.spectrum-Popover--withTip`, `.spectrum-Popover--end-bottom.spectrum-Popover--withTip, .spectrum-Popover--end-top.spectrum-Popover--withTip, .spectrum-Popover--end.spectrum-Popover--withTip`, `.spectrum-Popover--withTip.spectrum-Popover .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-end .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-left .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-right .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-start .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-end .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-left .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-right .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-start .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--end .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--end-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--end-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start-top .spectrum-Popover-tip`. <br/>Defaults to `var(--spectrum-popover-tip-height)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-popover-tip-height": {
+      "value": "8px",
+      "description": "Used by `--spectrum-popover-pointer-height`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-popover-pointer-edge-offset": {
+      "value": "calc(var(--spectrum-popover-corner-radius) + var(--spectrum-popover-tip-width) / 2)",
+      "description": "Defined in `.spectrum-Popover`. <br/>Used by `--spectrum-popover-pointer-edge-spacing`. <br/>Defaults to `calc(var(--spectrum-popover-corner-radius) + var(--spectrum-popover-tip-width) / 2)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-popover-pointer-edge-spacing": {
+      "value": "calc(var(--spectrum-popover-pointer-edge-offset) - var(--spectrum-popover-tip-width) / 2)",
+      "description": "Defined in `.spectrum-Popover`. <br/>Used by `.spectrum-Popover--withTip.spectrum-Popover--top-left .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--top-right .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--top-start .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--top-end .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--bottom-left .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--bottom-right .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--bottom-start .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--bottom-end .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--end-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start-top .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--end-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start-bottom .spectrum-Popover-tip`. <br/>Defaults to `calc(var(--spectrum-popover-pointer-edge-offset) - var(--spectrum-popover-tip-width) / 2)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-popover-filter": {
+      "value": "drop-shadow(var(--mod-popover-drop-shadow-x, var(--spectrum-popover-drop-shadow-x)) var(--mod-popover-drop-shadow-y, var(--spectrum-popover-drop-shadow-y)) calc(var(--mod-popover-drop-shadow-blur, var(--spectrum-popover-drop-shadow-blur)) / 2) var(--mod-popover-drop-shadow-color, var(--spectrum-popover-drop-shadow-color)))",
+      "description": "Defined in `.spectrum-Popover`. <br/>Used by `.spectrum-Popover.spectrum-Popover--withTip`. <br/>Defaults to `drop-shadow(var(--mod-popover-drop-shadow-x, var(--spectrum-popover-drop-shadow-x)) var(--mod-popover-drop-shadow-y, var(--spectrum-popover-drop-shadow-y)) calc(var(--mod-popover-drop-shadow-blur, var(--spectrum-popover-drop-shadow-blur)) / 2) var(--mod-popover-drop-shadow-color, var(--spectrum-popover-drop-shadow-color)))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-popover-box-shadow": {
+      "value": "var(--mod-popover-drop-shadow-x, var(--spectrum-popover-drop-shadow-x)) var(--mod-popover-drop-shadow-y, var(--spectrum-popover-drop-shadow-y)) var(--mod-popover-drop-shadow-blur, var(--spectrum-popover-drop-shadow-blur)) var(--mod-popover-drop-shadow-color, var(--spectrum-popover-drop-shadow-color))",
+      "description": "Defined in `.spectrum-Popover`. <br/>Used by `.spectrum-Popover`. <br/>Defaults to `var(--mod-popover-drop-shadow-x, var(--spectrum-popover-drop-shadow-x)) var(--mod-popover-drop-shadow-y, var(--spectrum-popover-drop-shadow-y)) var(--mod-popover-drop-shadow-blur, var(--spectrum-popover-drop-shadow-blur)) var(--mod-popover-drop-shadow-color, var(--spectrum-popover-drop-shadow-color))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-animation-duration-100": {
+      "description": "Used by `.spectrum-Popover`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-animation-duration-0": {
+      "description": "Used by `.spectrum-Popover.is-open`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-100": {
+      "value": "8px",
+      "description": "Used by `--spectrum-popover-animation-distance`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-background-layer-2-color": {
+      "value": "var(--spectrum-gray-25)",
+      "description": "Used by `--spectrum-popover-background-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-border-width-100": {
+      "value": "1px",
+      "description": "Used by `--spectrum-popover-border-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-200-rgb": {
+      "description": "Used by `--spectrum-popover-border-color-rgb`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-drop-shadow-elevated-x": {
+      "value": "0px",
+      "description": "Used by `--spectrum-popover-drop-shadow-x`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-drop-shadow-elevated-y": {
+      "value": "2px",
+      "description": "Used by `--spectrum-popover-drop-shadow-y`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-drop-shadow-elevated-blur": {
+      "value": "8px",
+      "description": "Used by `--spectrum-popover-drop-shadow-blur`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-drop-shadow-elevated-color": {
+      "value": "var(--spectrum-drop-shadow-color-200)",
+      "description": "Used by `--spectrum-popover-drop-shadow-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-large-default": {
+      "value": "10px",
+      "description": "Used by `--spectrum-popover-corner-radius`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {
+    "highcontrast-popover-border-color": {
+      "value": "var(--mod-popover-border-color, var(--spectrum-popover-border-color-with-transparency))",
+      "description": "Defined in `.spectrum-Popover`. <br/>Used by `.spectrum-Popover`, `.spectrum-Popover.spectrum-Popover--withTip .spectrum-Popover-tip .spectrum-Popover-tip-triangle`. <br/>Defaults to `var(--mod-popover-border-color, var(--spectrum-popover-border-color-with-transparency))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/popover/stories/popover.stories.js b/components/popover/stories/popover.stories.js
index 54bf85af75f..168062f3192 100644
--- a/components/popover/stories/popover.stories.js
+++ b/components/popover/stories/popover.stories.js
@@ -5,11 +5,13 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isOpen } from "@spectrum-css/preview/types";
 import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
 import { html } from "lit";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { PopoverGroup } from "./popover.test.js";
 import { FixedWidthSourceTemplate, Template, TipPlacementVariants } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * A popover is used to display transient content (menus, options, additional actions, etc.) and appears when clicking/tapping on a source (tools, buttons, etc.).
  * It stands out via its visual style (stroke and/or drop shadow) and floats on top of the rest of the interface.
@@ -98,9 +100,7 @@ export default {
 		},
 		packageJson,
 		metadata,
-		status: {
-			type: "migrated",
-		},
+		cssprops: metadata.modifiers,
 	},
 	tags: ["migrated"],
 };
diff --git a/components/progressbar/dist/metadata.json b/components/progressbar/dist/metadata.json
index 3caa917a2a5..5bbcb959ed2 100644
--- a/components/progressbar/dist/metadata.json
+++ b/components/progressbar/dist/metadata.json
@@ -31,92 +31,460 @@
     ".spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-track",
     ".spectrum-ProgressBar-track"
   ],
-  "modifiers": [
-    "--mod-progressbar-animation-duration-indeterminate",
-    "--mod-progressbar-animation-ease-in-out-indeterminate",
-    "--mod-progressbar-fill-color",
-    "--mod-progressbar-fill-color-black",
-    "--mod-progressbar-fill-color-white",
-    "--mod-progressbar-fill-size-indeterminate",
-    "--mod-progressbar-font-size",
-    "--mod-progressbar-inline-size",
-    "--mod-progressbar-label-and-value-black",
-    "--mod-progressbar-label-and-value-white",
-    "--mod-progressbar-line-height",
-    "--mod-progressbar-line-height-cjk",
-    "--mod-progressbar-max-size",
-    "--mod-progressbar-min-size",
-    "--mod-progressbar-spacing-label-to-progressbar",
-    "--mod-progressbar-spacing-label-to-text",
-    "--mod-progressbar-spacing-top-to-text",
-    "--mod-progressbar-text-color",
-    "--mod-progressbar-thickness",
-    "--mod-progressbar-track-color",
-    "--mod-spacing-progressbar-label-to-text"
-  ],
-  "component": [
-    "--spectrum-progress-bar-maximum-width",
-    "--spectrum-progress-bar-minimum-width",
-    "--spectrum-progress-bar-thickness-extra-large",
-    "--spectrum-progress-bar-thickness-large",
-    "--spectrum-progress-bar-thickness-medium",
-    "--spectrum-progress-bar-thickness-small",
-    "--spectrum-progressbar-animation-duration-indeterminate",
-    "--spectrum-progressbar-animation-ease-in-out-indeterminate",
-    "--spectrum-progressbar-corner-radius",
-    "--spectrum-progressbar-fill-color",
-    "--spectrum-progressbar-fill-color-black",
-    "--spectrum-progressbar-fill-color-white",
-    "--spectrum-progressbar-fill-size-indeterminate",
-    "--spectrum-progressbar-font-size",
-    "--spectrum-progressbar-inline-size",
-    "--spectrum-progressbar-label-and-value-black",
-    "--spectrum-progressbar-label-and-value-white",
-    "--spectrum-progressbar-line-height",
-    "--spectrum-progressbar-line-height-cjk",
-    "--spectrum-progressbar-max-size",
-    "--spectrum-progressbar-min-size",
-    "--spectrum-progressbar-spacing-label-to-progressbar",
-    "--spectrum-progressbar-spacing-label-to-text",
-    "--spectrum-progressbar-spacing-top-to-text",
-    "--spectrum-progressbar-text-color",
-    "--spectrum-progressbar-thickness",
-    "--spectrum-progressbar-track-color",
-    "--spectrum-progressbar-track-color-black",
-    "--spectrum-progressbar-track-color-white"
-  ],
-  "global": [
-    "--spectrum-accent-content-color-default",
-    "--spectrum-animation-duration-2000",
-    "--spectrum-animation-ease-in-out",
-    "--spectrum-cjk-line-height-100",
-    "--spectrum-component-top-to-text-100",
-    "--spectrum-component-top-to-text-200",
-    "--spectrum-component-top-to-text-300",
-    "--spectrum-component-top-to-text-75",
-    "--spectrum-corner-radius-full",
-    "--spectrum-font-size-100",
-    "--spectrum-font-size-200",
-    "--spectrum-font-size-300",
-    "--spectrum-font-size-75",
-    "--spectrum-line-height-100",
-    "--spectrum-meter-width",
-    "--spectrum-neutral-subdued-content-color-default",
-    "--spectrum-spacing-200",
-    "--spectrum-spacing-75",
-    "--spectrum-static-black-text-color",
-    "--spectrum-static-black-track-color",
-    "--spectrum-static-black-track-indicator-color",
-    "--spectrum-static-white-text-color",
-    "--spectrum-static-white-track-color",
-    "--spectrum-static-white-track-indicator-color",
-    "--spectrum-track-color"
-  ],
-  "passthroughs": [],
-  "high-contrast": [
-    "--highcontrast-progressbar-fill-color",
-    "--highcontrast-progressbar-fill-color-black",
-    "--highcontrast-progressbar-fill-color-white",
-    "--highcontrast-progressbar-track-color"
-  ]
+  "modifiers": {
+    "mod-progressbar-inline-size": {
+      "description": "Used by `.spectrum-ProgressBar`, `.spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-track`. <br/>Defaults to `var(--spectrum-progressbar-inline-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-progressbar-max-size": {
+      "description": "Used by `.spectrum-ProgressBar`. <br/>Defaults to `var(--spectrum-progressbar-max-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-progressbar-min-size": {
+      "description": "Used by `.spectrum-ProgressBar`. <br/>Defaults to `var(--spectrum-progressbar-min-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-progressbar-spacing-top-to-text": {
+      "description": "Used by `.spectrum-ProgressBar .spectrum-ProgressBar-label, .spectrum-ProgressBar .spectrum-ProgressBar-percentage`. <br/>Defaults to `var(--spectrum-progressbar-spacing-top-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-progressbar-spacing-label-to-progressbar": {
+      "description": "Used by `.spectrum-ProgressBar .spectrum-ProgressBar-label, .spectrum-ProgressBar .spectrum-ProgressBar-percentage`. <br/>Defaults to `var(--spectrum-progressbar-spacing-label-to-progressbar)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-progressbar-line-height": {
+      "description": "Used by `.spectrum-ProgressBar .spectrum-ProgressBar-label, .spectrum-ProgressBar .spectrum-ProgressBar-percentage`. <br/>Defaults to `var(--spectrum-progressbar-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-progressbar-font-size": {
+      "description": "Used by `.spectrum-ProgressBar .spectrum-ProgressBar-label, .spectrum-ProgressBar .spectrum-ProgressBar-percentage`. <br/>Defaults to `var(--spectrum-progressbar-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-progressbar-text-color": {
+      "description": "Used by `.spectrum-ProgressBar .spectrum-ProgressBar-label, .spectrum-ProgressBar .spectrum-ProgressBar-percentage`. <br/>Defaults to `var(--spectrum-progressbar-text-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-progressbar-line-height-cjk": {
+      "description": "Used by `.spectrum-ProgressBar .spectrum-ProgressBar-label:lang(ja), .spectrum-ProgressBar .spectrum-ProgressBar-label:lang(ko), .spectrum-ProgressBar .spectrum-ProgressBar-label:lang(zh), .spectrum-ProgressBar .spectrum-ProgressBar-percentage:lang(ja), .spectrum-ProgressBar .spectrum-ProgressBar-percentage:lang(ko), .spectrum-ProgressBar .spectrum-ProgressBar-percentage:lang(zh)`. <br/>Defaults to `var(--spectrum-progressbar-line-height-cjk)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-progressbar-spacing-label-to-text": {
+      "description": "Used by `.spectrum-ProgressBar .spectrum-ProgressBar-percentage`, `.spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-label`. <br/>Defaults to `var(--spectrum-progressbar-spacing-label-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-progressbar-thickness": {
+      "description": "Used by `.spectrum-ProgressBar .spectrum-ProgressBar-track`, `.spectrum-ProgressBar .spectrum-ProgressBar-fill`. <br/>Defaults to `var(--spectrum-progressbar-thickness)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-progressbar-track-color": {
+      "description": "Used by `.spectrum-ProgressBar .spectrum-ProgressBar-track`. <br/>Defaults to `var(--spectrum-progressbar-track-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-progressbar-fill-color": {
+      "description": "Used by `.spectrum-ProgressBar .spectrum-ProgressBar-fill`. <br/>Defaults to `var(--spectrum-progressbar-fill-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-progressbar-fill-size-indeterminate": {
+      "description": "Used by `.spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill`. <br/>Defaults to `var(--spectrum-progressbar-fill-size-indeterminate)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-progressbar-animation-ease-in-out-indeterminate": {
+      "description": "Used by `.spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill`. <br/>Defaults to `var(--spectrum-progressbar-animation-ease-in-out-indeterminate)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-spacing-progressbar-label-to-text": {
+      "description": "Used by `.spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage`. <br/>Defaults to `var(--spectrum-progressbar-spacing-label-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-progressbar-fill-color-white": {
+      "description": "Used by `.spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-fill`. <br/>Defaults to `var(--spectrum-progressbar-fill-color-white)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-progressbar-label-and-value-white": {
+      "description": "Used by `.spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-fill, .spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-label, .spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-percentage`. <br/>Defaults to `var(--spectrum-progressbar-label-and-value-white)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-progressbar-fill-color-black": {
+      "description": "Used by `.spectrum-ProgressBar--staticBlack .spectrum-ProgressBar-fill`. <br/>Defaults to `var(--spectrum-progressbar-fill-color-black)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-progressbar-label-and-value-black": {
+      "description": "Used by `.spectrum-ProgressBar--staticBlack .spectrum-ProgressBar-fill, .spectrum-ProgressBar--staticBlack .spectrum-ProgressBar-label, .spectrum-ProgressBar--staticBlack .spectrum-ProgressBar-percentage`. <br/>Defaults to `var(--spectrum-progressbar-label-and-value-black)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-progressbar-animation-duration-indeterminate": {
+      "description": "Used by `.spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill`, `.spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill:dir(rtl)`. <br/>Defaults to `var(--spectrum-progressbar-animation-duration-indeterminate)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-progressbar-animation-ease-in-out-indeterminate": {
+      "value": "var(--spectrum-animation-ease-in-out)",
+      "description": "Defined in `.spectrum-ProgressBar`. <br/>Used by `.spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill`. <br/>Defaults to `var(--spectrum-animation-ease-in-out)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-progressbar-animation-duration-indeterminate": {
+      "value": "var(--spectrum-animation-duration-2000)",
+      "description": "Defined in `.spectrum-ProgressBar`. <br/>Used by `.spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill`, `.spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill:dir(rtl)`. <br/>Defaults to `var(--spectrum-animation-duration-2000)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-progressbar-corner-radius": {
+      "value": "9999px",
+      "description": "Defined in `.spectrum-ProgressBar`. <br/>Used by `.spectrum-ProgressBar .spectrum-ProgressBar-track`, `.spectrum-ProgressBar .spectrum-ProgressBar-fill`. <br/>Defaults to `var(--spectrum-corner-radius-full)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-progressbar-fill-size-indeterminate": {
+      "value": "70%",
+      "description": "Defined in `.spectrum-ProgressBar`. <br/>Used by `.spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill`. <br/>Defaults to `70%`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-progressbar-inline-size": {
+      "value": "192px",
+      "description": "Defined in `.spectrum-ProgressBar`. <br/>Used by `.spectrum-ProgressBar`, `.spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-track`, `to`. <br/>Defaults to `var(--spectrum-meter-width)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-progressbar-font-size": {
+      "value": "18px",
+      "description": "Defined in `.spectrum-ProgressBar`, `.spectrum-ProgressBar--sizeS`, `.spectrum-ProgressBar--sizeL`, `.spectrum-ProgressBar--sizeXL`. <br/>Used by `.spectrum-ProgressBar .spectrum-ProgressBar-label, .spectrum-ProgressBar .spectrum-ProgressBar-percentage`. <br/>Defaults to `var(--spectrum-font-size-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-progressbar-line-height": {
+      "value": "1.3",
+      "description": "Defined in `.spectrum-ProgressBar`. <br/>Used by `.spectrum-ProgressBar .spectrum-ProgressBar-label, .spectrum-ProgressBar .spectrum-ProgressBar-percentage`. <br/>Defaults to `var(--spectrum-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-progressbar-line-height-cjk": {
+      "value": "1.5",
+      "description": "Defined in `.spectrum-ProgressBar`. <br/>Used by `.spectrum-ProgressBar .spectrum-ProgressBar-label:lang(ja), .spectrum-ProgressBar .spectrum-ProgressBar-label:lang(ko), .spectrum-ProgressBar .spectrum-ProgressBar-label:lang(zh), .spectrum-ProgressBar .spectrum-ProgressBar-percentage:lang(ja), .spectrum-ProgressBar .spectrum-ProgressBar-percentage:lang(ko), .spectrum-ProgressBar .spectrum-ProgressBar-percentage:lang(zh)`. <br/>Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-progressbar-min-size": {
+      "value": "48px",
+      "description": "Defined in `.spectrum-ProgressBar`. <br/>Used by `.spectrum-ProgressBar`. <br/>Defaults to `var(--spectrum-progress-bar-minimum-width)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-progress-bar-minimum-width": {
+      "value": "48px",
+      "description": "Used by `--spectrum-progressbar-min-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-progressbar-max-size": {
+      "value": "768px",
+      "description": "Defined in `.spectrum-ProgressBar`. <br/>Used by `.spectrum-ProgressBar`. <br/>Defaults to `var(--spectrum-progress-bar-maximum-width)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-progress-bar-maximum-width": {
+      "value": "768px",
+      "description": "Used by `--spectrum-progressbar-max-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-progressbar-thickness": {
+      "value": "10px",
+      "description": "Defined in `.spectrum-ProgressBar`, `.spectrum-ProgressBar--sizeS`, `.spectrum-ProgressBar--sizeL`, `.spectrum-ProgressBar--sizeXL`. <br/>Used by `.spectrum-ProgressBar .spectrum-ProgressBar-track`, `.spectrum-ProgressBar .spectrum-ProgressBar-fill`. <br/>Defaults to `var(--spectrum-progress-bar-thickness-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-progress-bar-thickness-medium": {
+      "value": "6px",
+      "description": "Used by `--spectrum-progressbar-thickness`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-progressbar-spacing-label-to-progressbar": {
+      "value": "4px",
+      "description": "Defined in `.spectrum-ProgressBar`. <br/>Used by `.spectrum-ProgressBar .spectrum-ProgressBar-label, .spectrum-ProgressBar .spectrum-ProgressBar-percentage`. <br/>Defaults to `var(--spectrum-spacing-75)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-progressbar-spacing-top-to-text": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-ProgressBar`, `.spectrum-ProgressBar--sizeS`, `.spectrum-ProgressBar--sizeL`, `.spectrum-ProgressBar--sizeXL`. <br/>Used by `.spectrum-ProgressBar .spectrum-ProgressBar-label, .spectrum-ProgressBar .spectrum-ProgressBar-percentage`. <br/>Defaults to `var(--spectrum-component-top-to-text-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-progressbar-spacing-label-to-text": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-ProgressBar`. <br/>Used by `.spectrum-ProgressBar .spectrum-ProgressBar-percentage`, `.spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-label`, `.spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage`. <br/>Defaults to `var(--spectrum-spacing-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-progressbar-text-color": {
+      "value": "var(--spectrum-gray-700)",
+      "description": "Defined in `.spectrum-ProgressBar`. <br/>Used by `.spectrum-ProgressBar .spectrum-ProgressBar-label, .spectrum-ProgressBar .spectrum-ProgressBar-percentage`. <br/>Defaults to `var(--spectrum-neutral-subdued-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-progressbar-track-color": {
+      "value": "var(--spectrum-gray-300)",
+      "description": "Defined in `.spectrum-ProgressBar`. <br/>Used by `.spectrum-ProgressBar .spectrum-ProgressBar-track`. <br/>Defaults to `var(--spectrum-track-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-progressbar-fill-color": {
+      "value": "var(--spectrum-accent-color-900)",
+      "description": "Defined in `.spectrum-ProgressBar`. <br/>Used by `.spectrum-ProgressBar .spectrum-ProgressBar-fill`. <br/>Defaults to `var(--spectrum-accent-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-progressbar-label-and-value-white": {
+      "value": "rgb(255, 255, 255)",
+      "description": "Defined in `.spectrum-ProgressBar`. <br/>Used by `.spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-fill, .spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-label, .spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-percentage`. <br/>Defaults to `var(--spectrum-static-white-text-color)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-progressbar-track-color-white": {
+      "value": "rgba(255, 255, 255, 0.17)",
+      "description": "Defined in `.spectrum-ProgressBar`. <br/>Used by `.spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-track`. <br/>Defaults to `var(--spectrum-static-white-track-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-progressbar-fill-color-white": {
+      "value": "rgba(255, 255, 255, 0.94)",
+      "description": "Defined in `.spectrum-ProgressBar`. <br/>Used by `.spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-fill`. <br/>Defaults to `var(--spectrum-static-white-track-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-progressbar-label-and-value-black": {
+      "value": "rgb(0, 0, 0)",
+      "description": "Defined in `.spectrum-ProgressBar`. <br/>Used by `.spectrum-ProgressBar--staticBlack .spectrum-ProgressBar-fill, .spectrum-ProgressBar--staticBlack .spectrum-ProgressBar-label, .spectrum-ProgressBar--staticBlack .spectrum-ProgressBar-percentage`. <br/>Defaults to `var(--spectrum-static-black-text-color)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-progressbar-track-color-black": {
+      "value": "rgba(0, 0, 0, 0.15)",
+      "description": "Defined in `.spectrum-ProgressBar`. <br/>Used by `.spectrum-ProgressBar--staticBlack .spectrum-ProgressBar-track`. <br/>Defaults to `var(--spectrum-static-black-track-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-progressbar-fill-color-black": {
+      "value": "rgba(0, 0, 0, 0.93)",
+      "description": "Defined in `.spectrum-ProgressBar`. <br/>Used by `.spectrum-ProgressBar--staticBlack .spectrum-ProgressBar-fill`. <br/>Defaults to `var(--spectrum-static-black-track-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-progress-bar-thickness-small": {
+      "value": "4px",
+      "description": "Used by `--spectrum-progressbar-thickness`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-progress-bar-thickness-large": {
+      "value": "8px",
+      "description": "Used by `--spectrum-progressbar-thickness`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-progress-bar-thickness-extra-large": {
+      "value": "10px",
+      "description": "Used by `--spectrum-progressbar-thickness`.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-animation-ease-in-out": {
+      "description": "Used by `--spectrum-progressbar-animation-ease-in-out-indeterminate`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-animation-duration-2000": {
+      "description": "Used by `--spectrum-progressbar-animation-duration-indeterminate`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-full": {
+      "value": "9999px",
+      "description": "Used by `--spectrum-progressbar-corner-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-meter-width": {
+      "value": "192px",
+      "description": "Used by `--spectrum-progressbar-inline-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-100": {
+      "value": "14px",
+      "description": "Used by `--spectrum-progressbar-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-line-height-100": {
+      "value": "1.3",
+      "description": "Used by `--spectrum-progressbar-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-cjk-line-height-100": {
+      "value": "1.5",
+      "description": "Used by `--spectrum-progressbar-line-height-cjk`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-75": {
+      "value": "4px",
+      "description": "Used by `--spectrum-progressbar-spacing-label-to-progressbar`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-progressbar-spacing-top-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-200": {
+      "value": "12px",
+      "description": "Used by `--spectrum-progressbar-spacing-label-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-subdued-content-color-default": {
+      "value": "var(--spectrum-gray-700)",
+      "description": "Used by `--spectrum-progressbar-text-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-track-color": {
+      "value": "var(--spectrum-gray-300)",
+      "description": "Used by `--spectrum-progressbar-track-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-accent-content-color-default": {
+      "value": "var(--spectrum-accent-color-900)",
+      "description": "Used by `--spectrum-progressbar-fill-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-static-white-text-color": {
+      "value": "rgb(255, 255, 255)",
+      "description": "Used by `--spectrum-progressbar-label-and-value-white`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-static-white-track-color": {
+      "value": "rgba(255, 255, 255, 0.17)",
+      "description": "Used by `--spectrum-progressbar-track-color-white`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-static-white-track-indicator-color": {
+      "value": "rgba(255, 255, 255, 0.94)",
+      "description": "Used by `--spectrum-progressbar-fill-color-white`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-static-black-text-color": {
+      "value": "rgb(0, 0, 0)",
+      "description": "Used by `--spectrum-progressbar-label-and-value-black`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-static-black-track-color": {
+      "value": "rgba(0, 0, 0, 0.15)",
+      "description": "Used by `--spectrum-progressbar-track-color-black`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-static-black-track-indicator-color": {
+      "value": "rgba(0, 0, 0, 0.93)",
+      "description": "Used by `--spectrum-progressbar-fill-color-black`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-font-size-75": {
+      "value": "12px",
+      "description": "Used by `--spectrum-progressbar-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-75": {
+      "value": "4px",
+      "description": "Used by `--spectrum-progressbar-spacing-top-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-200": {
+      "value": "16px",
+      "description": "Used by `--spectrum-progressbar-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-200": {
+      "value": "9px",
+      "description": "Used by `--spectrum-progressbar-spacing-top-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-300": {
+      "value": "18px",
+      "description": "Used by `--spectrum-progressbar-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-300": {
+      "value": "12px",
+      "description": "Used by `--spectrum-progressbar-spacing-top-to-text`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {
+    "highcontrast-progressbar-track-color": {
+      "value": "var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color))",
+      "description": "Defined in `.spectrum-ProgressBar-track`. <br/>Used by `.spectrum-ProgressBar .spectrum-ProgressBar-track`. <br/>Defaults to `var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-progressbar-fill-color": {
+      "value": "var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color))",
+      "description": "Defined in `.spectrum-ProgressBar-track`. <br/>Used by `.spectrum-ProgressBar .spectrum-ProgressBar-fill`. <br/>Defaults to `var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-progressbar-fill-color-white": {
+      "value": "var(--mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white))",
+      "description": "Defined in `.spectrum-ProgressBar-track`. <br/>Used by `.spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-fill`. <br/>Defaults to `var(--mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-progressbar-fill-color-black": {
+      "value": "var(--mod-progressbar-fill-color-black, var(--spectrum-progressbar-fill-color-black))",
+      "description": "Defined in `.spectrum-ProgressBar-track`. <br/>Used by `.spectrum-ProgressBar--staticBlack .spectrum-ProgressBar-fill`. <br/>Defaults to `var(--mod-progressbar-fill-color-black, var(--spectrum-progressbar-fill-color-black))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/progressbar/stories/progressbar.stories.js b/components/progressbar/stories/progressbar.stories.js
index 7a127b668a4..e9486d8b676 100644
--- a/components/progressbar/stories/progressbar.stories.js
+++ b/components/progressbar/stories/progressbar.stories.js
@@ -1,11 +1,13 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isIndeterminate, size, staticColor } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { ProgressBarGroup } from "./progressbar.test.js";
 import { IndeterminateGroup, Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * The progress bar component shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way.
  *
@@ -83,9 +85,7 @@ export default {
 		},
 		packageJson,
 		metadata,
-		status: {
-			type: "migrated",
-		},
+		cssprops: metadata.modifiers,
 	},
 	tags: ["migrated"],
 };
diff --git a/components/progresscircle/dist/metadata.json b/components/progresscircle/dist/metadata.json
index a252d2638db..4fce250acb7 100644
--- a/components/progresscircle/dist/metadata.json
+++ b/components/progresscircle/dist/metadata.json
@@ -7,41 +7,149 @@
     ".spectrum-ProgressCircle--sizeS",
     ".spectrum-ProgressCircle-fill",
     ".spectrum-ProgressCircle-track",
-    ".spectrum-ProgressCircle.spectrum-ProgressCircle--staticBlack",
-    ".spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite",
     ".spectrum-ProgressCircle:not(.spectrum-ProgressCircle--indeterminate) .spectrum-innerCircle",
-    ".spectrum-ProgressCircle:not(.spectrum-ProgressCircle--indeterminate) .spectrum-outerCircle"
-  ],
-  "modifiers": [
-    "--mod-progress-circle-fill-border-color",
-    "--mod-progress-circle-position",
-    "--mod-progress-circle-size",
-    "--mod-progress-circle-thickness",
-    "--mod-progress-circle-track-border-color"
-  ],
-  "component": [
-    "--spectrum-progress-circle-fill-border-color",
-    "--spectrum-progress-circle-size",
-    "--spectrum-progress-circle-size-large",
-    "--spectrum-progress-circle-size-medium",
-    "--spectrum-progress-circle-size-small",
-    "--spectrum-progress-circle-thickness",
-    "--spectrum-progress-circle-thickness-large",
-    "--spectrum-progress-circle-thickness-medium",
-    "--spectrum-progress-circle-thickness-small",
-    "--spectrum-progress-circle-track-border-color"
-  ],
-  "global": [
-    "--spectrum-accent-content-color-default",
-    "--spectrum-static-black-track-color",
-    "--spectrum-static-black-track-indicator-color",
-    "--spectrum-static-white-track-color",
-    "--spectrum-static-white-track-indicator-color",
-    "--spectrum-track-color"
+    ".spectrum-ProgressCircle:not(.spectrum-ProgressCircle--indeterminate) .spectrum-outerCircle",
+    ".spectrum-ProgressCircle.spectrum-ProgressCircle--staticBlack",
+    ".spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite"
   ],
-  "passthroughs": [],
-  "high-contrast": [
-    "--highcontrast-progress-circle-fill-border-color",
-    "--highcontrast-progress-circle-track-color"
-  ]
+  "modifiers": {
+    "mod-progress-circle-size": {
+      "description": "Used by `.spectrum-ProgressCircle`, `.spectrum-ProgressCircle-fill, .spectrum-ProgressCircle-track`. <br/>Defaults to `var(--spectrum-progress-circle-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-progress-circle-position": {
+      "description": "Used by `.spectrum-ProgressCircle`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-progress-circle-thickness": {
+      "description": "Used by `.spectrum-ProgressCircle-track`, `.spectrum-ProgressCircle-fill`. <br/>Defaults to `var(--spectrum-progress-circle-thickness)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-progress-circle-track-border-color": {
+      "description": "Used by `.spectrum-ProgressCircle-track`. <br/>Defaults to `var(--spectrum-progress-circle-track-border-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-progress-circle-fill-border-color": {
+      "description": "Used by `.spectrum-ProgressCircle-fill`. <br/>Defaults to `var(--spectrum-progress-circle-fill-border-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-progress-circle-track-border-color": {
+      "value": "rgba(0, 0, 0, 0.15)",
+      "description": "Defined in `.spectrum-ProgressCircle`, `.spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite`, `.spectrum-ProgressCircle.spectrum-ProgressCircle--staticBlack`. <br/>Used by `.spectrum-ProgressCircle-track`. <br/>Defaults to `var(--spectrum-static-black-track-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-progress-circle-fill-border-color": {
+      "value": "rgba(0, 0, 0, 0.93)",
+      "description": "Defined in `.spectrum-ProgressCircle`, `.spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite`, `.spectrum-ProgressCircle.spectrum-ProgressCircle--staticBlack`. <br/>Used by `.spectrum-ProgressCircle-fill`. <br/>Defaults to `var(--spectrum-static-black-track-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-progress-circle-size": {
+      "value": "64px",
+      "description": "Defined in `.spectrum-ProgressCircle`, `.spectrum-ProgressCircle--sizeS`, `.spectrum-ProgressCircle--sizeL`. <br/>Used by `.spectrum-ProgressCircle`, `.spectrum-ProgressCircle-fill, .spectrum-ProgressCircle-track`. <br/>Defaults to `var(--spectrum-progress-circle-size-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-progress-circle-size-medium": {
+      "value": "32px",
+      "description": "Used by `--spectrum-progress-circle-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-progress-circle-thickness": {
+      "value": "4px",
+      "description": "Defined in `.spectrum-ProgressCircle`, `.spectrum-ProgressCircle--sizeS`, `.spectrum-ProgressCircle--sizeL`. <br/>Used by `.spectrum-ProgressCircle-track`, `.spectrum-ProgressCircle-fill`. <br/>Defaults to `var(--spectrum-progress-circle-thickness-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-progress-circle-thickness-medium": {
+      "value": "3px",
+      "description": "Used by `--spectrum-progress-circle-thickness`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-progress-circle-size-small": {
+      "value": "16px",
+      "description": "Used by `--spectrum-progress-circle-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-progress-circle-thickness-small": {
+      "value": "2px",
+      "description": "Used by `--spectrum-progress-circle-thickness`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-progress-circle-size-large": {
+      "value": "64px",
+      "description": "Used by `--spectrum-progress-circle-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-progress-circle-thickness-large": {
+      "value": "4px",
+      "description": "Used by `--spectrum-progress-circle-thickness`.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-track-color": {
+      "value": "var(--spectrum-gray-300)",
+      "description": "Used by `--spectrum-progress-circle-track-border-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-accent-content-color-default": {
+      "value": "var(--spectrum-accent-color-900)",
+      "description": "Used by `--spectrum-progress-circle-fill-border-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-static-white-track-color": {
+      "value": "rgba(255, 255, 255, 0.17)",
+      "description": "Used by `--spectrum-progress-circle-track-border-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-static-white-track-indicator-color": {
+      "value": "rgba(255, 255, 255, 0.94)",
+      "description": "Used by `--spectrum-progress-circle-fill-border-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-static-black-track-color": {
+      "value": "rgba(0, 0, 0, 0.15)",
+      "description": "Used by `--spectrum-progress-circle-track-border-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-static-black-track-indicator-color": {
+      "value": "rgba(0, 0, 0, 0.93)",
+      "description": "Used by `--spectrum-progress-circle-fill-border-color`.",
+      "control": "color",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {
+    "highcontrast-progress-circle-track-color": {
+      "value": "var(--mod-progress-circle-track-border-color, var(--spectrum-progress-circle-track-border-color))",
+      "description": "Defined in `.spectrum-ProgressCircle`. <br/>Used by `.spectrum-ProgressCircle-track`. <br/>Defaults to `var(--mod-progress-circle-track-border-color, var(--spectrum-progress-circle-track-border-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-progress-circle-fill-border-color": {
+      "value": "var(--mod-progress-circle-fill-border-color, var(--spectrum-progress-circle-fill-border-color))",
+      "description": "Defined in `.spectrum-ProgressCircle`. <br/>Used by `.spectrum-ProgressCircle-fill`. <br/>Defaults to `var(--mod-progress-circle-fill-border-color, var(--spectrum-progress-circle-fill-border-color))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/progresscircle/stories/progresscircle.stories.js b/components/progresscircle/stories/progresscircle.stories.js
index 653c01ec3d9..9bfce9f2089 100644
--- a/components/progresscircle/stories/progresscircle.stories.js
+++ b/components/progresscircle/stories/progresscircle.stories.js
@@ -1,11 +1,13 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isIndeterminate, size, staticColor } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { ProgressCircleGroup } from "./progresscircle.test.js";
 import { Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * Progress circles show the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. They can represent determinate or indeterminate progress.
  */
@@ -45,9 +47,7 @@ export default {
 		},
 		packageJson,
 		metadata,
-		status: {
-			type: "migrated",
-		},
+		cssprops: metadata.modifiers,
 	},
 	tags: ["migrated"],
 };
diff --git a/components/radio/dist/metadata.json b/components/radio/dist/metadata.json
index 5671fe2386a..a8f56aa5eb1 100644
--- a/components/radio/dist/metadata.json
+++ b/components/radio/dist/metadata.json
@@ -25,15 +25,6 @@
     ".spectrum-Radio-label:lang(ja)",
     ".spectrum-Radio-label:lang(ko)",
     ".spectrum-Radio-label:lang(zh)",
-    ".spectrum-Radio.is-active .spectrum-Radio-button:before",
-    ".spectrum-Radio.is-active .spectrum-Radio-input:checked + .spectrum-Radio-button:before",
-    ".spectrum-Radio.is-active .spectrum-Radio-label",
-    ".spectrum-Radio.is-readOnly .spectrum-Radio-input",
-    ".spectrum-Radio.is-readOnly .spectrum-Radio-input + .spectrum-Radio-button:before",
-    ".spectrum-Radio.is-readOnly .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label",
-    ".spectrum-Radio.is-readOnly .spectrum-Radio-input:disabled ~ .spectrum-Radio-label",
-    ".spectrum-Radio.is-readOnly .spectrum-Radio-label",
-    ".spectrum-Radio.is-readOnly:hover .spectrum-Radio-input + .spectrum-Radio-button:before",
     ".spectrum-Radio:active .spectrum-Radio-button:before",
     ".spectrum-Radio:active .spectrum-Radio-input:checked + .spectrum-Radio-button:before",
     ".spectrum-Radio:active .spectrum-Radio-label",
@@ -48,145 +39,754 @@
     ".spectrum-Radio:lang(ja)",
     ".spectrum-Radio:lang(ko)",
     ".spectrum-Radio:lang(zh)",
-    ".spectrum-Radio:not(.is-readOnly):active .spectrum-Radio-input:not(:disabled) + .spectrum-Radio-button"
-  ],
-  "modifiers": [
-    "--mod-radio-animation-duration",
-    "--mod-radio-border-width",
-    "--mod-radio-button-background-color",
-    "--mod-radio-button-border-color-default",
-    "--mod-radio-button-border-color-down",
-    "--mod-radio-button-border-color-focus",
-    "--mod-radio-button-border-color-hover",
-    "--mod-radio-button-checked-border-color-default",
-    "--mod-radio-button-checked-border-color-down",
-    "--mod-radio-button-checked-border-color-focus",
-    "--mod-radio-button-checked-border-color-hover",
-    "--mod-radio-button-control-size",
-    "--mod-radio-button-top-to-control",
-    "--mod-radio-disabled-border-color",
-    "--mod-radio-disabled-content-color",
-    "--mod-radio-emphasized-accent-color",
-    "--mod-radio-emphasized-accent-color-down",
-    "--mod-radio-emphasized-accent-color-focus",
-    "--mod-radio-emphasized-accent-color-hover",
-    "--mod-radio-focus-indicator-color",
-    "--mod-radio-focus-indicator-thickness",
-    "--mod-radio-font-size",
-    "--mod-radio-height",
-    "--mod-radio-line-height",
-    "--mod-radio-line-height-cjk",
-    "--mod-radio-neutral-content-color",
-    "--mod-radio-neutral-content-color-down",
-    "--mod-radio-neutral-content-color-focus",
-    "--mod-radio-neutral-content-color-hover",
-    "--mod-radio-text-to-control"
-  ],
-  "component": [
-    "--spectrum-radio-animation-duration",
-    "--spectrum-radio-border-width",
-    "--spectrum-radio-button-background-color",
-    "--spectrum-radio-button-border-color-default",
-    "--spectrum-radio-button-border-color-down",
-    "--spectrum-radio-button-border-color-focus",
-    "--spectrum-radio-button-border-color-hover",
-    "--spectrum-radio-button-control-size",
-    "--spectrum-radio-button-control-size-extra-large",
-    "--spectrum-radio-button-control-size-large",
-    "--spectrum-radio-button-control-size-medium",
-    "--spectrum-radio-button-control-size-small",
-    "--spectrum-radio-button-selection-indicator",
-    "--spectrum-radio-button-top-to-control",
-    "--spectrum-radio-button-top-to-control-extra-large",
-    "--spectrum-radio-button-top-to-control-large",
-    "--spectrum-radio-button-top-to-control-medium",
-    "--spectrum-radio-button-top-to-control-small",
-    "--spectrum-radio-disabled-border-color",
-    "--spectrum-radio-disabled-content-color",
-    "--spectrum-radio-emphasized-accent-color",
-    "--spectrum-radio-emphasized-accent-color-down",
-    "--spectrum-radio-emphasized-accent-color-focus",
-    "--spectrum-radio-emphasized-accent-color-hover",
-    "--spectrum-radio-focus-indicator-color",
-    "--spectrum-radio-focus-indicator-gap",
-    "--spectrum-radio-focus-indicator-thickness",
-    "--spectrum-radio-font-size",
-    "--spectrum-radio-height",
-    "--spectrum-radio-label-bottom-to-text",
-    "--spectrum-radio-label-top-to-text",
-    "--spectrum-radio-line-height",
-    "--spectrum-radio-line-height-cjk",
-    "--spectrum-radio-neutral-content-color",
-    "--spectrum-radio-neutral-content-color-down",
-    "--spectrum-radio-neutral-content-color-focus",
-    "--spectrum-radio-neutral-content-color-hover",
-    "--spectrum-radio-text-font-style",
-    "--spectrum-radio-text-font-weight",
-    "--spectrum-radio-text-to-control"
-  ],
-  "global": [
-    "--spectrum-accent-content-color-default",
-    "--spectrum-accent-content-color-down",
-    "--spectrum-accent-content-color-hover",
-    "--spectrum-accent-content-color-key-focus",
-    "--spectrum-animation-duration-100",
-    "--spectrum-border-width-200",
-    "--spectrum-cjk-line-height-100",
-    "--spectrum-component-bottom-to-text-100",
-    "--spectrum-component-bottom-to-text-200",
-    "--spectrum-component-bottom-to-text-300",
-    "--spectrum-component-bottom-to-text-75",
-    "--spectrum-component-height-100",
-    "--spectrum-component-height-200",
-    "--spectrum-component-height-300",
-    "--spectrum-component-height-75",
-    "--spectrum-component-size-difference-down",
-    "--spectrum-component-size-minimum-perspective-down",
-    "--spectrum-component-top-to-text-100",
-    "--spectrum-component-top-to-text-200",
-    "--spectrum-component-top-to-text-300",
-    "--spectrum-component-top-to-text-75",
-    "--spectrum-default-font-style",
-    "--spectrum-disabled-content-color",
-    "--spectrum-focus-indicator-color",
-    "--spectrum-focus-indicator-gap",
-    "--spectrum-focus-indicator-thickness",
-    "--spectrum-font-size-100",
-    "--spectrum-font-size-200",
-    "--spectrum-font-size-300",
-    "--spectrum-font-size-75",
-    "--spectrum-gray-25",
-    "--spectrum-line-height-100",
-    "--spectrum-neutral-content-color-default",
-    "--spectrum-neutral-content-color-down",
-    "--spectrum-neutral-content-color-hover",
-    "--spectrum-neutral-content-color-key-focus",
-    "--spectrum-regular-font-weight",
-    "--spectrum-text-to-control-100",
-    "--spectrum-text-to-control-200",
-    "--spectrum-text-to-control-300",
-    "--spectrum-text-to-control-75"
+    ".spectrum-Radio:not(.is-readOnly):active .spectrum-Radio-input:not(:disabled) + .spectrum-Radio-button",
+    ".spectrum-Radio.is-active .spectrum-Radio-button:before",
+    ".spectrum-Radio.is-active .spectrum-Radio-input:checked + .spectrum-Radio-button:before",
+    ".spectrum-Radio.is-active .spectrum-Radio-label",
+    ".spectrum-Radio.is-readOnly .spectrum-Radio-input",
+    ".spectrum-Radio.is-readOnly .spectrum-Radio-input + .spectrum-Radio-button:before",
+    ".spectrum-Radio.is-readOnly .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label",
+    ".spectrum-Radio.is-readOnly .spectrum-Radio-input:disabled ~ .spectrum-Radio-label",
+    ".spectrum-Radio.is-readOnly .spectrum-Radio-label",
+    ".spectrum-Radio.is-readOnly:hover .spectrum-Radio-input + .spectrum-Radio-button:before"
   ],
-  "passthroughs": [],
-  "high-contrast": [
-    "--highcontrast-radio-button-border-color-default",
-    "--highcontrast-radio-button-border-color-down",
-    "--highcontrast-radio-button-border-color-focus",
-    "--highcontrast-radio-button-border-color-hover",
-    "--highcontrast-radio-button-checked-border-color-default",
-    "--highcontrast-radio-button-checked-border-color-down",
-    "--highcontrast-radio-button-checked-border-color-focus",
-    "--highcontrast-radio-button-checked-border-color-hover",
-    "--highcontrast-radio-disabled-border-color",
-    "--highcontrast-radio-disabled-content-color",
-    "--highcontrast-radio-emphasized-accent-color",
-    "--highcontrast-radio-emphasized-accent-color-down",
-    "--highcontrast-radio-emphasized-accent-color-focus",
-    "--highcontrast-radio-emphasized-accent-color-hover",
-    "--highcontrast-radio-focus-indicator-color",
-    "--highcontrast-radio-neutral-content-color",
-    "--highcontrast-radio-neutral-content-color-down",
-    "--highcontrast-radio-neutral-content-color-focus",
-    "--highcontrast-radio-neutral-content-color-hover"
-  ]
+  "modifiers": {
+    "mod-radio-height": {
+      "description": "Used by `.spectrum-Radio`. <br/>Defaults to `var(--spectrum-radio-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-radio-button-border-color-down": {
+      "description": "Used by `.spectrum-Radio.is-active .spectrum-Radio-button:before, .spectrum-Radio:active .spectrum-Radio-button:before`. <br/>Defaults to `var(--spectrum-radio-button-border-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-radio-button-checked-border-color-down": {
+      "description": "Used by `.spectrum-Radio.is-active .spectrum-Radio-input:checked + .spectrum-Radio-button:before, .spectrum-Radio:active .spectrum-Radio-input:checked + .spectrum-Radio-button:before`. <br/>Defaults to `var(--spectrum-radio-button-border-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-radio-neutral-content-color-down": {
+      "description": "Used by `.spectrum-Radio.is-active .spectrum-Radio-label, .spectrum-Radio:active .spectrum-Radio-label`. <br/>Defaults to `var(--spectrum-radio-neutral-content-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-radio-button-border-color-focus": {
+      "description": "Used by `.spectrum-Radio:focus .spectrum-Radio-button:before`. <br/>Defaults to `var(--spectrum-radio-button-border-color-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-radio-focus-indicator-color": {
+      "description": "Used by `.spectrum-Radio:focus .spectrum-Radio-button:after`, `.spectrum-Radio-input:focus-visible + .spectrum-Radio-button:after`. <br/>Defaults to `var(--spectrum-radio-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-radio-focus-indicator-thickness": {
+      "description": "Used by `.spectrum-Radio:focus .spectrum-Radio-button:after`, `.spectrum-Radio-input:focus-visible + .spectrum-Radio-button:after`. <br/>Defaults to `var(--spectrum-radio-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-radio-button-checked-border-color-focus": {
+      "description": "Used by `.spectrum-Radio:focus .spectrum-Radio-input:checked + .spectrum-Radio-button:before`. <br/>Defaults to `var(--spectrum-radio-button-border-color-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-radio-neutral-content-color-focus": {
+      "description": "Used by `.spectrum-Radio:focus .spectrum-Radio-label`. <br/>Defaults to `var(--spectrum-radio-neutral-content-color-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-radio-neutral-content-color": {
+      "description": "Used by `.spectrum-Radio.is-readOnly .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label, .spectrum-Radio.is-readOnly .spectrum-Radio-input:disabled ~ .spectrum-Radio-label, .spectrum-Radio.is-readOnly .spectrum-Radio-label`, `.spectrum-Radio-label`. <br/>Defaults to `var(--spectrum-radio-neutral-content-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-radio-emphasized-accent-color": {
+      "description": "Used by `.spectrum-Radio--emphasized .spectrum-Radio-input:checked + .spectrum-Radio-button:before`. <br/>Defaults to `var(--spectrum-radio-emphasized-accent-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-radio-button-border-color-hover": {
+      "description": "Used by `.spectrum-Radio:hover .spectrum-Radio-button:before`. <br/>Defaults to `var(--spectrum-radio-button-border-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-radio-button-checked-border-color-hover": {
+      "description": "Used by `.spectrum-Radio:hover .spectrum-Radio-input:checked + .spectrum-Radio-button:before`. <br/>Defaults to `var(--spectrum-radio-button-border-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-radio-neutral-content-color-hover": {
+      "description": "Used by `.spectrum-Radio:hover .spectrum-Radio-label`. <br/>Defaults to `var(--spectrum-radio-neutral-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-radio-emphasized-accent-color-hover": {
+      "description": "Used by `.spectrum-Radio--emphasized:hover .spectrum-Radio-input:checked + .spectrum-Radio-button:before`. <br/>Defaults to `var(--spectrum-radio-emphasized-accent-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-radio-emphasized-accent-color-down": {
+      "description": "Used by `.spectrum-Radio--emphasized:active .spectrum-Radio-input:checked + .spectrum-Radio-button:before`. <br/>Defaults to `var(--spectrum-radio-emphasized-accent-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-radio-emphasized-accent-color-focus": {
+      "description": "Used by `.spectrum-Radio--emphasized:focus .spectrum-Radio-input:checked + .spectrum-Radio-button:before`. <br/>Defaults to `var(--spectrum-radio-emphasized-accent-color-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-radio-disabled-border-color": {
+      "description": "Used by `.spectrum-Radio .spectrum-Radio-input:checked:disabled + .spectrum-Radio-button:before, .spectrum-Radio .spectrum-Radio-input:disabled + .spectrum-Radio-button:before`. <br/>Defaults to `var(--spectrum-radio-disabled-border-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-radio-disabled-content-color": {
+      "description": "Used by `.spectrum-Radio .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label, .spectrum-Radio .spectrum-Radio-input:disabled ~ .spectrum-Radio-label`. <br/>Defaults to `var(--spectrum-radio-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-radio-line-height": {
+      "description": "Used by `.spectrum-Radio-input`, `.spectrum-Radio-label`. <br/>Defaults to `var(--spectrum-radio-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-radio-button-checked-border-color-default": {
+      "description": "Used by `.spectrum-Radio-input:checked + .spectrum-Radio-button:before`. <br/>Defaults to `var(--spectrum-radio-button-border-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-radio-text-to-control": {
+      "description": "Used by `.spectrum-Radio-label`. <br/>Defaults to `var(--spectrum-radio-text-to-control)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-radio-font-size": {
+      "description": "Used by `.spectrum-Radio-label`. <br/>Defaults to `var(--spectrum-radio-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-radio-animation-duration": {
+      "description": "Used by `.spectrum-Radio-label`, `.spectrum-Radio-button:before`, `.spectrum-Radio-button:after`. <br/>Defaults to `var(--spectrum-radio-animation-duration)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-radio-line-height-cjk": {
+      "description": "Used by `.spectrum-Radio-label:lang(ja), .spectrum-Radio-label:lang(ko), .spectrum-Radio-label:lang(zh)`. <br/>Defaults to `var(--spectrum-radio-line-height-cjk)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-radio-button-control-size": {
+      "description": "Used by `.spectrum-Radio-button`, `.spectrum-Radio-button:before`. <br/>Defaults to `var(--spectrum-radio-button-control-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-radio-button-top-to-control": {
+      "description": "Used by `.spectrum-Radio-button`. <br/>Defaults to `var(--spectrum-radio-button-top-to-control)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-radio-button-background-color": {
+      "description": "Used by `.spectrum-Radio-button:before`. <br/>Defaults to `var(--spectrum-radio-button-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-radio-border-width": {
+      "description": "Used by `.spectrum-Radio-button:before`. <br/>Defaults to `var(--spectrum-radio-border-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-radio-button-border-color-default": {
+      "description": "Used by `.spectrum-Radio-button:before`. <br/>Defaults to `var(--spectrum-radio-button-border-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-radio-button-background-color": {
+      "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio-button:before`. <br/>Defaults to `var(--spectrum-gray-25)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-radio-neutral-content-color": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio.is-readOnly .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label, .spectrum-Radio.is-readOnly .spectrum-Radio-input:disabled ~ .spectrum-Radio-label, .spectrum-Radio.is-readOnly .spectrum-Radio-label`, `.spectrum-Radio-label`. <br/>Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-radio-neutral-content-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio:hover .spectrum-Radio-label`. <br/>Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-radio-neutral-content-color-down": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio.is-active .spectrum-Radio-label, .spectrum-Radio:active .spectrum-Radio-label`. <br/>Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-radio-neutral-content-color-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio:focus .spectrum-Radio-label`. <br/>Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-radio-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio:focus .spectrum-Radio-button:after`, `.spectrum-Radio-input:focus-visible + .spectrum-Radio-button:after`. <br/>Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-radio-focus-indicator-gap": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio:focus .spectrum-Radio-button:after`, `.spectrum-Radio-input:focus-visible + .spectrum-Radio-button:after`. <br/>Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-radio-focus-indicator-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio:focus .spectrum-Radio-button:after`, `.spectrum-Radio-input:focus-visible + .spectrum-Radio-button:after`. <br/>Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-radio-disabled-content-color": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label, .spectrum-Radio .spectrum-Radio-input:disabled ~ .spectrum-Radio-label`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-radio-disabled-border-color": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio .spectrum-Radio-input:checked:disabled + .spectrum-Radio-button:before, .spectrum-Radio .spectrum-Radio-input:disabled + .spectrum-Radio-button:before`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-radio-emphasized-accent-color": {
+      "value": "var(--spectrum-accent-color-900)",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio--emphasized .spectrum-Radio-input:checked + .spectrum-Radio-button:before`. <br/>Defaults to `var(--spectrum-accent-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-radio-emphasized-accent-color-hover": {
+      "value": "var(--spectrum-accent-color-1000)",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio--emphasized:hover .spectrum-Radio-input:checked + .spectrum-Radio-button:before`. <br/>Defaults to `var(--spectrum-accent-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-radio-emphasized-accent-color-down": {
+      "value": "var(--spectrum-accent-color-1000)",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio--emphasized:active .spectrum-Radio-input:checked + .spectrum-Radio-button:before`. <br/>Defaults to `var(--spectrum-accent-content-color-down)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-radio-emphasized-accent-color-focus": {
+      "value": "var(--spectrum-accent-color-1000)",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio--emphasized:focus .spectrum-Radio-input:checked + .spectrum-Radio-button:before`. <br/>Defaults to `var(--spectrum-accent-content-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-radio-button-border-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio-input:checked + .spectrum-Radio-button:before`, `.spectrum-Radio-button:before`. <br/>Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-radio-button-border-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio:hover .spectrum-Radio-button:before`, `.spectrum-Radio:hover .spectrum-Radio-input:checked + .spectrum-Radio-button:before`. <br/>Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-radio-button-border-color-down": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio.is-active .spectrum-Radio-button:before, .spectrum-Radio:active .spectrum-Radio-button:before`, `.spectrum-Radio.is-active .spectrum-Radio-input:checked + .spectrum-Radio-button:before, .spectrum-Radio:active .spectrum-Radio-input:checked + .spectrum-Radio-button:before`. <br/>Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-radio-button-border-color-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio:focus .spectrum-Radio-button:before`, `.spectrum-Radio:focus .spectrum-Radio-input:checked + .spectrum-Radio-button:before`. <br/>Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-radio-line-height": {
+      "value": "1.3",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio-input`, `.spectrum-Radio-label`. <br/>Defaults to `var(--spectrum-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-radio-animation-duration": {
+      "value": "var(--spectrum-animation-duration-100)",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio-label`, `.spectrum-Radio-button:before`, `.spectrum-Radio-button:after`. <br/>Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-radio-height": {
+      "value": "48px",
+      "description": "Defined in `.spectrum-Radio`, `.spectrum-Radio--sizeS`, `.spectrum-Radio--sizeL`, `.spectrum-Radio--sizeXL`. <br/>Used by `.spectrum-Radio`. <br/>Defaults to `var(--spectrum-component-height-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-radio-button-control-size": {
+      "value": "18px",
+      "description": "Defined in `.spectrum-Radio`, `.spectrum-Radio--sizeS`, `.spectrum-Radio--sizeL`, `.spectrum-Radio--sizeXL`. <br/>Used by `.spectrum-Radio:focus .spectrum-Radio-button:after`, `.spectrum-Radio-input:checked + .spectrum-Radio-button:before`, `.spectrum-Radio-input:focus-visible + .spectrum-Radio-button:after`, `.spectrum-Radio-button`, `.spectrum-Radio-button:before`. <br/>Defaults to `var(--spectrum-radio-button-control-size-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-radio-button-control-size-medium": {
+      "value": "14px",
+      "description": "Used by `--spectrum-radio-button-control-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-radio-text-to-control": {
+      "value": "13px",
+      "description": "Defined in `.spectrum-Radio`, `.spectrum-Radio--sizeS`, `.spectrum-Radio--sizeL`, `.spectrum-Radio--sizeXL`. <br/>Used by `.spectrum-Radio-label`. <br/>Defaults to `var(--spectrum-text-to-control-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-radio-label-top-to-text": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-Radio`, `.spectrum-Radio--sizeS`, `.spectrum-Radio--sizeL`, `.spectrum-Radio--sizeXL`. <br/>Used by `.spectrum-Radio-label`. <br/>Defaults to `var(--spectrum-component-top-to-text-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-radio-label-bottom-to-text": {
+      "value": "14px",
+      "description": "Defined in `.spectrum-Radio`, `.spectrum-Radio--sizeS`, `.spectrum-Radio--sizeL`, `.spectrum-Radio--sizeXL`. <br/>Used by `.spectrum-Radio-label`. <br/>Defaults to `var(--spectrum-component-bottom-to-text-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-radio-button-top-to-control": {
+      "value": "15px",
+      "description": "Defined in `.spectrum-Radio`, `.spectrum-Radio--sizeS`, `.spectrum-Radio--sizeL`, `.spectrum-Radio--sizeXL`. <br/>Used by `.spectrum-Radio-button`. <br/>Defaults to `var(--spectrum-radio-button-top-to-control-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-radio-button-top-to-control-medium": {
+      "value": "9px",
+      "description": "Used by `--spectrum-radio-button-top-to-control`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-radio-font-size": {
+      "value": "18px",
+      "description": "Defined in `.spectrum-Radio`, `.spectrum-Radio--sizeS`, `.spectrum-Radio--sizeL`, `.spectrum-Radio--sizeXL`. <br/>Used by `.spectrum-Radio-label`. <br/>Defaults to `var(--spectrum-font-size-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-radio-border-width": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio-button:before`. <br/>Defaults to `var(--spectrum-border-width-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-radio-text-font-weight": {
+      "value": "400",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio-label`. <br/>Defaults to `var(--spectrum-regular-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-radio-text-font-style": {
+      "value": "normal",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio-label`. <br/>Defaults to `var(--spectrum-default-font-style)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-radio-line-height-cjk": {
+      "value": "1.5",
+      "description": "Defined in `.spectrum-Radio:lang(ja), .spectrum-Radio:lang(ko), .spectrum-Radio:lang(zh)`. <br/>Used by `.spectrum-Radio-label:lang(ja), .spectrum-Radio-label:lang(ko), .spectrum-Radio-label:lang(zh)`. <br/>Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-radio-button-control-size-small": {
+      "value": "12px",
+      "description": "Used by `--spectrum-radio-button-control-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-radio-button-top-to-control-small": {
+      "value": "6px",
+      "description": "Used by `--spectrum-radio-button-top-to-control`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-radio-button-control-size-large": {
+      "value": "16px",
+      "description": "Used by `--spectrum-radio-button-control-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-radio-button-top-to-control-large": {
+      "value": "12px",
+      "description": "Used by `--spectrum-radio-button-top-to-control`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-radio-button-control-size-extra-large": {
+      "value": "18px",
+      "description": "Used by `--spectrum-radio-button-control-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-radio-button-top-to-control-extra-large": {
+      "value": "15px",
+      "description": "Used by `--spectrum-radio-button-top-to-control`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-radio-button-selection-indicator": {
+      "value": "4px",
+      "description": "Used by `.spectrum-Radio-input:checked + .spectrum-Radio-button:before`.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-gray-25": {
+      "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+      "description": "Used by `--spectrum-radio-button-background-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-radio-neutral-content-color`, `--spectrum-radio-button-border-color-default`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-radio-neutral-content-color-hover`, `--spectrum-radio-button-border-color-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-down": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-radio-neutral-content-color-down`, `--spectrum-radio-button-border-color-down`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-key-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-radio-neutral-content-color-focus`, `--spectrum-radio-button-border-color-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Used by `--spectrum-radio-focus-indicator-thickness`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-gap": {
+      "value": "2px",
+      "description": "Used by `--spectrum-radio-focus-indicator-gap`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Used by `--spectrum-radio-focus-indicator-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-disabled-content-color": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Used by `--spectrum-radio-disabled-content-color`, `--spectrum-radio-disabled-border-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-accent-content-color-default": {
+      "value": "var(--spectrum-accent-color-900)",
+      "description": "Used by `--spectrum-radio-emphasized-accent-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-accent-content-color-hover": {
+      "value": "var(--spectrum-accent-color-1000)",
+      "description": "Used by `--spectrum-radio-emphasized-accent-color-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-accent-content-color-down": {
+      "value": "var(--spectrum-accent-color-1000)",
+      "description": "Used by `--spectrum-radio-emphasized-accent-color-down`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-accent-content-color-key-focus": {
+      "value": "var(--spectrum-accent-color-1000)",
+      "description": "Used by `--spectrum-radio-emphasized-accent-color-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-line-height-100": {
+      "value": "1.3",
+      "description": "Used by `--spectrum-radio-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-animation-duration-100": {
+      "description": "Used by `--spectrum-radio-animation-duration`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-100": {
+      "value": "32px",
+      "description": "Used by `--spectrum-radio-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-control-100": {
+      "value": "10px",
+      "description": "Used by `--spectrum-radio-text-to-control`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-radio-label-top-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-100": {
+      "value": "9px",
+      "description": "Used by `--spectrum-radio-label-bottom-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-100": {
+      "value": "14px",
+      "description": "Used by `--spectrum-radio-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-border-width-200": {
+      "value": "2px",
+      "description": "Used by `--spectrum-radio-border-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-regular-font-weight": {
+      "value": "400",
+      "description": "Used by `--spectrum-radio-text-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-default-font-style": {
+      "value": "normal",
+      "description": "Used by `--spectrum-radio-text-font-style`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-cjk-line-height-100": {
+      "value": "1.5",
+      "description": "Used by `--spectrum-radio-line-height-cjk`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-75": {
+      "value": "24px",
+      "description": "Used by `--spectrum-radio-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-control-75": {
+      "value": "9px",
+      "description": "Used by `--spectrum-radio-text-to-control`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-75": {
+      "value": "4px",
+      "description": "Used by `--spectrum-radio-label-top-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-75": {
+      "value": "5px",
+      "description": "Used by `--spectrum-radio-label-bottom-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-75": {
+      "value": "12px",
+      "description": "Used by `--spectrum-radio-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-200": {
+      "value": "40px",
+      "description": "Used by `--spectrum-radio-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-control-200": {
+      "value": "11px",
+      "description": "Used by `--spectrum-radio-text-to-control`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-200": {
+      "value": "9px",
+      "description": "Used by `--spectrum-radio-label-top-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-200": {
+      "value": "11px",
+      "description": "Used by `--spectrum-radio-label-bottom-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-200": {
+      "value": "16px",
+      "description": "Used by `--spectrum-radio-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-300": {
+      "value": "48px",
+      "description": "Used by `--spectrum-radio-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-control-300": {
+      "value": "13px",
+      "description": "Used by `--spectrum-radio-text-to-control`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-300": {
+      "value": "12px",
+      "description": "Used by `--spectrum-radio-label-top-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-300": {
+      "value": "14px",
+      "description": "Used by `--spectrum-radio-label-bottom-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-300": {
+      "value": "18px",
+      "description": "Used by `--spectrum-radio-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-size-minimum-perspective-down": {
+      "value": "24px",
+      "description": "Used by `.spectrum-Radio:not(.is-readOnly):active .spectrum-Radio-input:not(:disabled) + .spectrum-Radio-button`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-size-difference-down": {
+      "value": "-2px",
+      "description": "Used by `.spectrum-Radio:not(.is-readOnly):active .spectrum-Radio-input:not(:disabled) + .spectrum-Radio-button`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {
+    "highcontrast-radio-button-border-color-down": {
+      "value": "var(--mod-radio-button-border-color-down, var(--spectrum-radio-button-border-color-down))",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio.is-active .spectrum-Radio-button:before, .spectrum-Radio:active .spectrum-Radio-button:before`. <br/>Defaults to `var(--mod-radio-button-border-color-down, var(--spectrum-radio-button-border-color-down))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-radio-button-checked-border-color-down": {
+      "value": "var(--mod-radio-button-checked-border-color-down, var(--spectrum-radio-button-border-color-down))",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio.is-active .spectrum-Radio-input:checked + .spectrum-Radio-button:before, .spectrum-Radio:active .spectrum-Radio-input:checked + .spectrum-Radio-button:before`. <br/>Defaults to `var(--mod-radio-button-checked-border-color-down, var(--spectrum-radio-button-border-color-down))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-radio-neutral-content-color-down": {
+      "value": "var(--mod-radio-neutral-content-color-down, var(--spectrum-radio-neutral-content-color-down))",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio.is-active .spectrum-Radio-label, .spectrum-Radio:active .spectrum-Radio-label`. <br/>Defaults to `var(--mod-radio-neutral-content-color-down, var(--spectrum-radio-neutral-content-color-down))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-radio-button-border-color-focus": {
+      "value": "var(--mod-radio-button-border-color-focus, var(--spectrum-radio-button-border-color-focus))",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio:focus .spectrum-Radio-button:before`. <br/>Defaults to `var(--mod-radio-button-border-color-focus, var(--spectrum-radio-button-border-color-focus))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-radio-focus-indicator-color": {
+      "value": "var(--mod-radio-focus-indicator-color, var(--spectrum-radio-focus-indicator-color))",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio:focus .spectrum-Radio-button:after`, `.spectrum-Radio-input:focus-visible + .spectrum-Radio-button:after`. <br/>Defaults to `var(--mod-radio-focus-indicator-color, var(--spectrum-radio-focus-indicator-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-radio-button-checked-border-color-focus": {
+      "value": "var(--mod-radio-button-checked-border-color-focus, var(--spectrum-radio-button-border-color-focus))",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio:focus .spectrum-Radio-input:checked + .spectrum-Radio-button:before`. <br/>Defaults to `var(--mod-radio-button-checked-border-color-focus, var(--spectrum-radio-button-border-color-focus))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-radio-neutral-content-color-focus": {
+      "value": "var(--mod-radio-neutral-content-color-focus, var(--spectrum-radio-neutral-content-color-focus))",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio:focus .spectrum-Radio-label`. <br/>Defaults to `var(--mod-radio-neutral-content-color-focus, var(--spectrum-radio-neutral-content-color-focus))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-radio-neutral-content-color": {
+      "value": "var(--mod-radio-neutral-content-color, var(--spectrum-radio-neutral-content-color))",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio.is-readOnly .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label, .spectrum-Radio.is-readOnly .spectrum-Radio-input:disabled ~ .spectrum-Radio-label, .spectrum-Radio.is-readOnly .spectrum-Radio-label`, `.spectrum-Radio-label`. <br/>Defaults to `var(--mod-radio-neutral-content-color, var(--spectrum-radio-neutral-content-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-radio-emphasized-accent-color": {
+      "value": "var(--mod-radio-emphasized-accent-color, var(--spectrum-radio-emphasized-accent-color))",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio--emphasized .spectrum-Radio-input:checked + .spectrum-Radio-button:before`. <br/>Defaults to `var(--mod-radio-emphasized-accent-color, var(--spectrum-radio-emphasized-accent-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-radio-button-border-color-hover": {
+      "value": "var(--mod-radio-button-border-color-hover, var(--spectrum-radio-button-border-color-hover))",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio:hover .spectrum-Radio-button:before`. <br/>Defaults to `var(--mod-radio-button-border-color-hover, var(--spectrum-radio-button-border-color-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-radio-button-checked-border-color-hover": {
+      "value": "var(--mod-radio-button-checked-border-color-hover, var(--spectrum-radio-button-border-color-hover))",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio:hover .spectrum-Radio-input:checked + .spectrum-Radio-button:before`. <br/>Defaults to `var(--mod-radio-button-checked-border-color-hover, var(--spectrum-radio-button-border-color-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-radio-neutral-content-color-hover": {
+      "value": "var(--mod-radio-neutral-content-color-hover, var(--spectrum-radio-neutral-content-color-hover))",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio:hover .spectrum-Radio-label`. <br/>Defaults to `var(--mod-radio-neutral-content-color-hover, var(--spectrum-radio-neutral-content-color-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-radio-emphasized-accent-color-hover": {
+      "value": "var(--mod-radio-emphasized-accent-color-hover, var(--spectrum-radio-emphasized-accent-color-hover))",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio--emphasized:hover .spectrum-Radio-input:checked + .spectrum-Radio-button:before`. <br/>Defaults to `var(--mod-radio-emphasized-accent-color-hover, var(--spectrum-radio-emphasized-accent-color-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-radio-emphasized-accent-color-down": {
+      "value": "var(--mod-radio-emphasized-accent-color-down, var(--spectrum-radio-emphasized-accent-color-down))",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio--emphasized:active .spectrum-Radio-input:checked + .spectrum-Radio-button:before`. <br/>Defaults to `var(--mod-radio-emphasized-accent-color-down, var(--spectrum-radio-emphasized-accent-color-down))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-radio-emphasized-accent-color-focus": {
+      "value": "var(--mod-radio-emphasized-accent-color-focus, var(--spectrum-radio-emphasized-accent-color-focus))",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio--emphasized:focus .spectrum-Radio-input:checked + .spectrum-Radio-button:before`. <br/>Defaults to `var(--mod-radio-emphasized-accent-color-focus, var(--spectrum-radio-emphasized-accent-color-focus))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-radio-disabled-border-color": {
+      "value": "var(--mod-radio-disabled-border-color, var(--spectrum-radio-disabled-border-color))",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio .spectrum-Radio-input:checked:disabled + .spectrum-Radio-button:before, .spectrum-Radio .spectrum-Radio-input:disabled + .spectrum-Radio-button:before`. <br/>Defaults to `var(--mod-radio-disabled-border-color, var(--spectrum-radio-disabled-border-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-radio-disabled-content-color": {
+      "value": "var(--mod-radio-disabled-content-color, var(--spectrum-radio-disabled-content-color))",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label, .spectrum-Radio .spectrum-Radio-input:disabled ~ .spectrum-Radio-label`. <br/>Defaults to `var(--mod-radio-disabled-content-color, var(--spectrum-radio-disabled-content-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-radio-button-checked-border-color-default": {
+      "value": "var(--mod-radio-button-checked-border-color-default, var(--spectrum-radio-button-border-color-default))",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio-input:checked + .spectrum-Radio-button:before`. <br/>Defaults to `var(--mod-radio-button-checked-border-color-default, var(--spectrum-radio-button-border-color-default))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-radio-button-border-color-default": {
+      "value": "var(--mod-radio-button-border-color-default, var(--spectrum-radio-button-border-color-default))",
+      "description": "Defined in `.spectrum-Radio`. <br/>Used by `.spectrum-Radio-button:before`, `.spectrum-Radio.is-readOnly .spectrum-Radio-input + .spectrum-Radio-button:before`, `.spectrum-Radio.is-readOnly:hover .spectrum-Radio-input + .spectrum-Radio-button:before`. <br/>Defaults to `var(--mod-radio-button-border-color-default, var(--spectrum-radio-button-border-color-default))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/radio/stories/radio.stories.js b/components/radio/stories/radio.stories.js
index ead1b1c051b..194ce7560be 100644
--- a/components/radio/stories/radio.stories.js
+++ b/components/radio/stories/radio.stories.js
@@ -1,11 +1,13 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isActive, isChecked, isDisabled, isEmphasized, isFocused, isHovered, isReadOnly, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { RadioGroup } from "./radio.test.js";
 import { BasicGroupTemplate } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * Radio buttons allow users to select a single option from a list of mutually exclusive options. All possible options are exposed up front for users to compare.
  *
@@ -66,9 +68,7 @@ export default {
 		},
 		packageJson,
 		metadata,
-		status: {
-			type: "migrated",
-		},
+		cssprops: metadata.modifiers,
 	},
 	tags: ["migrated"],
 };
diff --git a/components/rating/dist/metadata.json b/components/rating/dist/metadata.json
index 591d987a853..90ebfd6133f 100644
--- a/components/rating/dist/metadata.json
+++ b/components/rating/dist/metadata.json
@@ -3,122 +3,466 @@
   "selectors": [
     ".spectrum-Rating",
     ".spectrum-Rating--emphasized .spectrum-Rating-icon",
-    ".spectrum-Rating--emphasized .spectrum-Rating-icon.is-selected",
     ".spectrum-Rating--emphasized .spectrum-Rating-icon:hover ~ .spectrum-Rating-icon",
-    ".spectrum-Rating--emphasized.is-focused .spectrum-Rating-icon.is-selected",
+    ".spectrum-Rating--emphasized .spectrum-Rating-icon.is-selected",
     ".spectrum-Rating--emphasized:hover .spectrum-Rating-icon",
     ".spectrum-Rating--emphasized:hover .spectrum-Rating-icon:active",
     ".spectrum-Rating--emphasized:hover .spectrum-Rating-icon:hover",
     ".spectrum-Rating--emphasized:hover .spectrum-Rating-icon:hover ~ .spectrum-Rating-icon",
+    ".spectrum-Rating--emphasized.is-focused .spectrum-Rating-icon.is-selected",
     ".spectrum-Rating--sizeS",
     ".spectrum-Rating-icon",
     ".spectrum-Rating-icon .spectrum-Rating-starActive",
     ".spectrum-Rating-icon .spectrum-Rating-starInactive",
     ".spectrum-Rating-icon svg",
+    ".spectrum-Rating-icon:hover ~ .spectrum-Rating-icon",
+    ".spectrum-Rating-icon:hover ~ .spectrum-Rating-icon .spectrum-Rating-starActive",
+    ".spectrum-Rating-icon:hover ~ .spectrum-Rating-icon .spectrum-Rating-starInactive",
     ".spectrum-Rating-icon.is-selected",
     ".spectrum-Rating-icon.is-selected .spectrum-Rating-starActive",
     ".spectrum-Rating-icon.is-selected .spectrum-Rating-starInactive",
     ".spectrum-Rating-icon.is-selected.is-partial .spectrum-Rating-starActive",
     ".spectrum-Rating-icon.is-selected.is-partial .spectrum-Rating-starInactive",
-    ".spectrum-Rating-icon:hover ~ .spectrum-Rating-icon",
-    ".spectrum-Rating-icon:hover ~ .spectrum-Rating-icon .spectrum-Rating-starActive",
-    ".spectrum-Rating-icon:hover ~ .spectrum-Rating-icon .spectrum-Rating-starInactive",
     ".spectrum-Rating-input",
     ".spectrum-Rating-starActive",
     ".spectrum-Rating-starInactive",
-    ".spectrum-Rating.is-disabled",
-    ".spectrum-Rating.is-disabled .spectrum-Rating-icon",
-    ".spectrum-Rating.is-disabled .spectrum-Rating-icon.is-selected",
-    ".spectrum-Rating.is-focused",
-    ".spectrum-Rating.is-readOnly",
     ".spectrum-Rating:hover .spectrum-Rating-icon",
     ".spectrum-Rating:hover .spectrum-Rating-icon:active",
     ".spectrum-Rating:hover .spectrum-Rating-icon:hover",
     ".spectrum-Rating:hover .spectrum-Rating-starActive",
     ".spectrum-Rating:hover .spectrum-Rating-starInactive",
-    ".spectrum-Rating:not(.is-readOnly) .spectrum-Rating-input:not(:disabled) ~ .spectrum-Rating-icon:active"
-  ],
-  "modifiers": [
-    "--mod-rating-border-radius",
-    "--mod-rating-bottom-to-content-area",
-    "--mod-rating-edge-to-content-area",
-    "--mod-rating-emphasized-icon-color-default",
-    "--mod-rating-emphasized-icon-color-down",
-    "--mod-rating-emphasized-icon-color-hover",
-    "--mod-rating-emphasized-icon-color-key-focus",
-    "--mod-rating-focus-indicator-color",
-    "--mod-rating-focus-indicator-gap",
-    "--mod-rating-focus-indicator-thickness",
-    "--mod-rating-height",
-    "--mod-rating-icon-color-default",
-    "--mod-rating-icon-color-disabled",
-    "--mod-rating-icon-color-down",
-    "--mod-rating-icon-color-hover",
-    "--mod-rating-icon-fill",
-    "--mod-rating-icon-height",
-    "--mod-rating-icon-spacing",
-    "--mod-rating-icon-width",
-    "--mod-rating-top-to-content-area",
-    "--mod-rating-width"
-  ],
-  "component": [
-    "--spectrum-rating-border-radius",
-    "--spectrum-rating-bottom-to-content-area",
-    "--spectrum-rating-bottom-to-content-area-medium",
-    "--spectrum-rating-bottom-to-content-area-small",
-    "--spectrum-rating-edge-to-content-area",
-    "--spectrum-rating-edge-to-content-area-medium",
-    "--spectrum-rating-edge-to-content-area-small",
-    "--spectrum-rating-emphasized-icon-color-default",
-    "--spectrum-rating-emphasized-icon-color-down",
-    "--spectrum-rating-emphasized-icon-color-hover",
-    "--spectrum-rating-emphasized-icon-color-key-focus",
-    "--spectrum-rating-focus-indicator-color",
-    "--spectrum-rating-focus-indicator-gap",
-    "--spectrum-rating-focus-indicator-thickness",
-    "--spectrum-rating-height",
-    "--spectrum-rating-height-medium",
-    "--spectrum-rating-height-small",
-    "--spectrum-rating-icon-color-default",
-    "--spectrum-rating-icon-color-disabled",
-    "--spectrum-rating-icon-color-down",
-    "--spectrum-rating-icon-color-hover",
-    "--spectrum-rating-icon-fill",
-    "--spectrum-rating-icon-height",
-    "--spectrum-rating-icon-spacing",
-    "--spectrum-rating-icon-width",
-    "--spectrum-rating-top-to-content-area",
-    "--spectrum-rating-top-to-content-area-medium",
-    "--spectrum-rating-top-to-content-area-small",
-    "--spectrum-rating-width",
-    "--spectrum-rating-width-medium",
-    "--spectrum-rating-width-small"
-  ],
-  "global": [
-    "--spectrum-accent-content-color-default",
-    "--spectrum-accent-content-color-down",
-    "--spectrum-accent-content-color-hover",
-    "--spectrum-component-size-difference-down",
-    "--spectrum-component-size-minimum-perspective-down",
-    "--spectrum-corner-radius-medium-size-medium",
-    "--spectrum-corner-radius-medium-size-small",
-    "--spectrum-disabled-content-color",
-    "--spectrum-focus-indicator-color",
-    "--spectrum-focus-indicator-gap",
-    "--spectrum-focus-indicator-thickness",
-    "--spectrum-neutral-content-color-default",
-    "--spectrum-neutral-content-color-down",
-    "--spectrum-neutral-content-color-hover",
-    "--spectrum-spacing-75",
-    "--spectrum-workflow-icon-size-100",
-    "--spectrum-workflow-icon-size-75"
+    ".spectrum-Rating:not(.is-readOnly) .spectrum-Rating-input:not(:disabled) ~ .spectrum-Rating-icon:active",
+    ".spectrum-Rating.is-disabled",
+    ".spectrum-Rating.is-disabled .spectrum-Rating-icon",
+    ".spectrum-Rating.is-disabled .spectrum-Rating-icon.is-selected",
+    ".spectrum-Rating.is-focused",
+    ".spectrum-Rating.is-readOnly"
   ],
-  "passthroughs": [],
-  "high-contrast": [
-    "--highcontrast-rating-emphasized-icon-color-default",
-    "--highcontrast-rating-emphasized-icon-color-down",
-    "--highcontrast-rating-emphasized-icon-color-hover",
-    "--highcontrast-rating-focus-color-outline",
-    "--highcontrast-rating-icon-color-disabled"
-  ]
+  "modifiers": {
+    "mod-rating-icon-spacing": {
+      "description": "Used by `.spectrum-Rating`. <br/>Defaults to `var(--spectrum-rating-icon-spacing)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-rating-top-to-content-area": {
+      "description": "Defined in `.spectrum-Rating--sizeS`. <br/>Used by `.spectrum-Rating`. <br/>Defaults to `var(--spectrum-rating-top-to-content-area)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-rating-bottom-to-content-area": {
+      "description": "Defined in `.spectrum-Rating--sizeS`. <br/>Used by `.spectrum-Rating`. <br/>Defaults to `var(--spectrum-rating-bottom-to-content-area)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-rating-edge-to-content-area": {
+      "description": "Defined in `.spectrum-Rating--sizeS`. <br/>Used by `.spectrum-Rating`. <br/>Defaults to `var(--spectrum-rating-edge-to-content-area)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-rating-border-radius": {
+      "description": "Defined in `.spectrum-Rating--sizeS`. <br/>Used by `.spectrum-Rating`. <br/>Defaults to `var(--spectrum-rating-border-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-rating-height": {
+      "description": "Defined in `.spectrum-Rating--sizeS`. <br/>Used by `.spectrum-Rating`. <br/>Defaults to `var(--spectrum-rating-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-rating-width": {
+      "description": "Defined in `.spectrum-Rating--sizeS`. <br/>Used by `.spectrum-Rating`. <br/>Defaults to `var(--spectrum-rating-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-rating-focus-indicator-thickness": {
+      "description": "Used by `.spectrum-Rating.is-focused`. <br/>Defaults to `var(--spectrum-rating-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-rating-focus-indicator-color": {
+      "description": "Used by `.spectrum-Rating.is-focused`. <br/>Defaults to `var(--spectrum-rating-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-rating-focus-indicator-gap": {
+      "description": "Used by `.spectrum-Rating.is-focused`. <br/>Defaults to `var(--spectrum-rating-focus-indicator-gap)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-rating-icon-height": {
+      "description": "Defined in `.spectrum-Rating--sizeS`. <br/>Used by `.spectrum-Rating-icon, .spectrum-Rating-icon svg`. <br/>Defaults to `var(--spectrum-rating-icon-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-rating-icon-width": {
+      "description": "Defined in `.spectrum-Rating--sizeS`. <br/>Used by `.spectrum-Rating-icon, .spectrum-Rating-icon svg`. <br/>Defaults to `var(--spectrum-rating-icon-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-rating-icon-fill": {
+      "description": "Used by `--spectrum-rating-icon-fill`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-rating-icon-color-default": {
+      "description": "Used by `.spectrum-Rating-icon, .spectrum-Rating-icon.is-selected`, `.spectrum-Rating--emphasized .spectrum-Rating-icon`, `.spectrum-Rating:hover .spectrum-Rating-icon`, `.spectrum-Rating--emphasized .spectrum-Rating-icon:hover ~ .spectrum-Rating-icon, .spectrum-Rating-icon:hover ~ .spectrum-Rating-icon`, `.spectrum-Rating--emphasized:hover .spectrum-Rating-icon:hover ~ .spectrum-Rating-icon`. <br/>Defaults to `var(--spectrum-rating-icon-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-rating-emphasized-icon-color-key-focus": {
+      "description": "Used by `.spectrum-Rating--emphasized.is-focused .spectrum-Rating-icon.is-selected`. <br/>Defaults to `var(--spectrum-rating-emphasized-icon-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-rating-emphasized-icon-color-default": {
+      "description": "Used by `.spectrum-Rating--emphasized .spectrum-Rating-icon.is-selected`, `.spectrum-Rating--emphasized:hover .spectrum-Rating-icon`. <br/>Defaults to `var(--spectrum-rating-emphasized-icon-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-rating-icon-color-hover": {
+      "description": "Used by `.spectrum-Rating:hover .spectrum-Rating-icon:hover`. <br/>Defaults to `var(--spectrum-rating-icon-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-rating-icon-color-down": {
+      "description": "Used by `.spectrum-Rating:hover .spectrum-Rating-icon:active`. <br/>Defaults to `var(--spectrum-rating-icon-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-rating-emphasized-icon-color-hover": {
+      "description": "Used by `.spectrum-Rating--emphasized:hover .spectrum-Rating-icon:hover`. <br/>Defaults to `var(--spectrum-rating-emphasized-icon-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-rating-emphasized-icon-color-down": {
+      "description": "Used by `.spectrum-Rating--emphasized:hover .spectrum-Rating-icon:active`. <br/>Defaults to `var(--spectrum-rating-emphasized-icon-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-rating-icon-color-disabled": {
+      "description": "Used by `.spectrum-Rating.is-disabled .spectrum-Rating-icon, .spectrum-Rating.is-disabled .spectrum-Rating-icon.is-selected`. <br/>Defaults to `var(--spectrum-rating-icon-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-rating-height": {
+      "value": "var(--spectrum-component-height-100)",
+      "description": "Defined in `.spectrum-Rating`. <br/>Used by `.spectrum-Rating`. <br/>Defaults to `var(--spectrum-rating-height-medium)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-rating-height-medium": {
+      "value": "var(--spectrum-component-height-100)",
+      "description": "Used by `--spectrum-rating-height`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-rating-width": {
+      "value": "128px",
+      "description": "Defined in `.spectrum-Rating`. <br/>Used by `.spectrum-Rating`. <br/>Defaults to `var(--spectrum-rating-width-medium)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-rating-width-medium": {
+      "value": "128px",
+      "description": "Used by `--spectrum-rating-width`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-rating-icon-height": {
+      "value": "20px",
+      "description": "Defined in `.spectrum-Rating`. <br/>Used by `.spectrum-Rating-icon, .spectrum-Rating-icon svg`. <br/>Defaults to `var(--spectrum-workflow-icon-size-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-rating-icon-width": {
+      "value": "20px",
+      "description": "Defined in `.spectrum-Rating`. <br/>Used by `.spectrum-Rating-icon, .spectrum-Rating-icon svg`. <br/>Defaults to `var(--spectrum-workflow-icon-size-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-rating-icon-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-Rating`. <br/>Used by `.spectrum-Rating-icon, .spectrum-Rating-icon.is-selected`, `.spectrum-Rating--emphasized .spectrum-Rating-icon`, `.spectrum-Rating:hover .spectrum-Rating-icon`, `.spectrum-Rating--emphasized .spectrum-Rating-icon:hover ~ .spectrum-Rating-icon, .spectrum-Rating-icon:hover ~ .spectrum-Rating-icon`, `.spectrum-Rating--emphasized:hover .spectrum-Rating-icon:hover ~ .spectrum-Rating-icon`. <br/>Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-rating-icon-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Rating`. <br/>Used by `.spectrum-Rating:hover .spectrum-Rating-icon:hover`. <br/>Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-rating-icon-color-down": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Rating`. <br/>Used by `.spectrum-Rating:hover .spectrum-Rating-icon:active`. <br/>Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-rating-border-radius": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-Rating`. <br/>Used by `.spectrum-Rating`. <br/>Defaults to `var(--spectrum-corner-radius-medium-size-medium)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-rating-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Rating`. <br/>Used by `.spectrum-Rating.is-focused`. <br/>Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-rating-focus-indicator-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Defined in `.spectrum-Rating`. <br/>Used by `.spectrum-Rating.is-focused`. <br/>Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-rating-focus-indicator-gap": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Rating`. <br/>Used by `.spectrum-Rating.is-focused`. <br/>Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-rating-icon-spacing": {
+      "value": "4px",
+      "description": "Defined in `.spectrum-Rating`. <br/>Used by `.spectrum-Rating`. <br/>Defaults to `var(--spectrum-spacing-75)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-rating-top-to-content-area": {
+      "value": "6px",
+      "description": "Defined in `.spectrum-Rating`. <br/>Used by `.spectrum-Rating`. <br/>Defaults to `var(--spectrum-rating-top-to-content-area-medium)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-rating-top-to-content-area-medium": {
+      "value": "6px",
+      "description": "Used by `--spectrum-rating-top-to-content-area`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-rating-bottom-to-content-area": {
+      "value": "6px",
+      "description": "Defined in `.spectrum-Rating`. <br/>Used by `.spectrum-Rating`. <br/>Defaults to `var(--spectrum-rating-bottom-to-content-area-medium)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-rating-bottom-to-content-area-medium": {
+      "value": "6px",
+      "description": "Used by `--spectrum-rating-bottom-to-content-area`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-rating-edge-to-content-area": {
+      "value": "6px",
+      "description": "Defined in `.spectrum-Rating`. <br/>Used by `.spectrum-Rating`. <br/>Defaults to `var(--spectrum-rating-edge-to-content-area-medium)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-rating-edge-to-content-area-medium": {
+      "value": "6px",
+      "description": "Used by `--spectrum-rating-edge-to-content-area`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-rating-emphasized-icon-color-default": {
+      "value": "var(--spectrum-accent-color-900)",
+      "description": "Defined in `.spectrum-Rating`. <br/>Used by `.spectrum-Rating--emphasized .spectrum-Rating-icon.is-selected`, `.spectrum-Rating--emphasized:hover .spectrum-Rating-icon`. <br/>Defaults to `var(--spectrum-accent-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-rating-emphasized-icon-color-hover": {
+      "value": "var(--spectrum-accent-color-1000)",
+      "description": "Defined in `.spectrum-Rating`. <br/>Used by `.spectrum-Rating--emphasized:hover .spectrum-Rating-icon:hover`. <br/>Defaults to `var(--spectrum-accent-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-rating-emphasized-icon-color-down": {
+      "value": "var(--spectrum-accent-color-1000)",
+      "description": "Defined in `.spectrum-Rating`. <br/>Used by `.spectrum-Rating--emphasized:hover .spectrum-Rating-icon:active`. <br/>Defaults to `var(--spectrum-accent-content-color-down)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-rating-emphasized-icon-color-key-focus": {
+      "value": "var(--spectrum-accent-color-900)",
+      "description": "Defined in `.spectrum-Rating`. <br/>Used by `.spectrum-Rating--emphasized.is-focused .spectrum-Rating-icon.is-selected`. <br/>Defaults to `var(--spectrum-accent-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-rating-icon-color-disabled": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Defined in `.spectrum-Rating`. <br/>Used by `.spectrum-Rating.is-disabled .spectrum-Rating-icon, .spectrum-Rating.is-disabled .spectrum-Rating-icon.is-selected`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-rating-height-small": {
+      "value": "var(--spectrum-component-height-75)",
+      "description": "Used by `--mod-rating-height`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-rating-width-small": {
+      "value": "104px",
+      "description": "Used by `--mod-rating-width`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-rating-top-to-content-area-small": {
+      "value": "4px",
+      "description": "Used by `--mod-rating-top-to-content-area`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-rating-edge-to-content-area-small": {
+      "value": "4px",
+      "description": "Used by `--mod-rating-edge-to-content-area`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-rating-bottom-to-content-area-small": {
+      "value": "4px",
+      "description": "Used by `--mod-rating-bottom-to-content-area`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-rating-icon-fill": {
+      "value": "var(--mod-rating-icon-fill, 100%)",
+      "description": "Defined in `.spectrum-Rating-icon`. <br/>Used by `.spectrum-Rating-icon.is-selected.is-partial .spectrum-Rating-starActive`. <br/>Defaults to `var(--mod-rating-icon-fill, 100%)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-workflow-icon-size-100": {
+      "value": "20px",
+      "description": "Used by `--spectrum-rating-icon-height`, `--spectrum-rating-icon-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-rating-icon-color-default`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-rating-icon-color-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-down": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-rating-icon-color-down`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-medium-size-medium": {
+      "value": "8px",
+      "description": "Used by `--spectrum-rating-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Used by `--spectrum-rating-focus-indicator-thickness`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Used by `--spectrum-rating-focus-indicator-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-gap": {
+      "value": "2px",
+      "description": "Used by `--spectrum-rating-focus-indicator-gap`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-75": {
+      "value": "4px",
+      "description": "Used by `--spectrum-rating-icon-spacing`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-accent-content-color-default": {
+      "value": "var(--spectrum-accent-color-900)",
+      "description": "Used by `--spectrum-rating-emphasized-icon-color-default`, `--spectrum-rating-emphasized-icon-color-key-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-accent-content-color-hover": {
+      "value": "var(--spectrum-accent-color-1000)",
+      "description": "Used by `--spectrum-rating-emphasized-icon-color-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-accent-content-color-down": {
+      "value": "var(--spectrum-accent-color-1000)",
+      "description": "Used by `--spectrum-rating-emphasized-icon-color-down`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-disabled-content-color": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Used by `--spectrum-rating-icon-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-component-size-minimum-perspective-down": {
+      "value": "24px",
+      "description": "Used by `.spectrum-Rating:not(.is-readOnly) .spectrum-Rating-input:not(:disabled) ~ .spectrum-Rating-icon:active`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-size-difference-down": {
+      "value": "-2px",
+      "description": "Used by `.spectrum-Rating:not(.is-readOnly) .spectrum-Rating-input:not(:disabled) ~ .spectrum-Rating-icon:active`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-75": {
+      "value": "16px",
+      "description": "Used by `--mod-rating-icon-height`, `--mod-rating-icon-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-medium-size-small": {
+      "value": "7px",
+      "description": "Used by `--mod-rating-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {
+    "highcontrast-rating-emphasized-icon-color-default": {
+      "value": "var(--mod-rating-emphasized-icon-color-default, var(--spectrum-rating-emphasized-icon-color-default))",
+      "description": "Defined in `.spectrum-Rating`. <br/>Used by `.spectrum-Rating--emphasized .spectrum-Rating-icon.is-selected`, `.spectrum-Rating--emphasized:hover .spectrum-Rating-icon`. <br/>Defaults to `var(--mod-rating-emphasized-icon-color-default, var(--spectrum-rating-emphasized-icon-color-default))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-rating-emphasized-icon-color-hover": {
+      "value": "var(--mod-rating-emphasized-icon-color-hover, var(--spectrum-rating-emphasized-icon-color-hover))",
+      "description": "Defined in `.spectrum-Rating`. <br/>Used by `.spectrum-Rating--emphasized:hover .spectrum-Rating-icon:hover`. <br/>Defaults to `var(--mod-rating-emphasized-icon-color-hover, var(--spectrum-rating-emphasized-icon-color-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-rating-emphasized-icon-color-down": {
+      "value": "var(--mod-rating-emphasized-icon-color-down, var(--spectrum-rating-emphasized-icon-color-down))",
+      "description": "Defined in `.spectrum-Rating`. <br/>Used by `.spectrum-Rating--emphasized:hover .spectrum-Rating-icon:active`. <br/>Defaults to `var(--mod-rating-emphasized-icon-color-down, var(--spectrum-rating-emphasized-icon-color-down))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-rating-icon-color-disabled": {
+      "value": "var(--mod-rating-icon-color-disabled, var(--spectrum-rating-icon-color-disabled))",
+      "description": "Defined in `.spectrum-Rating`. <br/>Used by `.spectrum-Rating.is-disabled .spectrum-Rating-icon, .spectrum-Rating.is-disabled .spectrum-Rating-icon.is-selected`. <br/>Defaults to `var(--mod-rating-icon-color-disabled, var(--spectrum-rating-icon-color-disabled))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-rating-focus-color-outline": {
+      "value": "CanvasText",
+      "description": "Defined in `.spectrum-Rating`. <br/>Used by `.spectrum-Rating.is-focused`. <br/>Defaults to `CanvasText`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/rating/stories/rating.stories.js b/components/rating/stories/rating.stories.js
index a7def3b170c..231ce353549 100644
--- a/components/rating/stories/rating.stories.js
+++ b/components/rating/stories/rating.stories.js
@@ -1,11 +1,13 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, isEmphasized, isFocused, isReadOnly, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { RatingGroup } from "./rating.test.js";
 import { Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * The rating component is used to display or collect a user's rating of an item as represented by a number of stars.
  *
@@ -76,9 +78,7 @@ export default {
 		},
 		packageJson,
 		metadata,
-		status: {
-			type: "migrated",
-		},
+		cssprops: metadata.modifiers,
 	},
 	tags: ["migrated"],
 };
diff --git a/components/search/dist/metadata.json b/components/search/dist/metadata.json
index f57d2c77c0f..7e883e4bad7 100644
--- a/components/search/dist/metadata.json
+++ b/components/search/dist/metadata.json
@@ -16,177 +16,832 @@
     ".spectrum-Search-input::-webkit-search-cancel-button",
     ".spectrum-Search-input::-webkit-search-decoration",
     ".spectrum-Search-textfield",
+    ".spectrum-Search-textfield:hover .spectrum-Search-icon",
     ".spectrum-Search-textfield.is-disabled .spectrum-Search-icon",
     ".spectrum-Search-textfield.is-disabled:hover .spectrum-Search-icon",
     ".spectrum-Search-textfield.is-focused .spectrum-Search-icon",
     ".spectrum-Search-textfield.is-focused:hover .spectrum-Search-icon",
     ".spectrum-Search-textfield.is-keyboardFocused .spectrum-Search-icon",
-    ".spectrum-Search-textfield:hover .spectrum-Search-icon",
-    ".spectrum-Search.is-disabled .spectrum-Search-clearButton",
     ".spectrum-Search:lang(ja)",
     ".spectrum-Search:lang(ko)",
-    ".spectrum-Search:lang(zh)"
-  ],
-  "modifiers": [
-    "--mod-search-background-color",
-    "--mod-search-background-color-disabled",
-    "--mod-search-block-size",
-    "--mod-search-border-color-default",
-    "--mod-search-border-color-disabled",
-    "--mod-search-border-color-focus",
-    "--mod-search-border-color-focus-hover",
-    "--mod-search-border-color-hover",
-    "--mod-search-border-color-key-focus",
-    "--mod-search-border-radius",
-    "--mod-search-border-width",
-    "--mod-search-bottom-to-text",
-    "--mod-search-button-inline-size",
-    "--mod-search-color-default",
-    "--mod-search-color-disabled",
-    "--mod-search-color-focus",
-    "--mod-search-color-focus-hover",
-    "--mod-search-color-hover",
-    "--mod-search-color-key-focus",
-    "--mod-search-edge-to-visual",
-    "--mod-search-focus-indicator-color",
-    "--mod-search-focus-indicator-gap",
-    "--mod-search-focus-indicator-thickness",
-    "--mod-search-font-family",
-    "--mod-search-font-style",
-    "--mod-search-font-weight",
-    "--mod-search-icon-size",
-    "--mod-search-inline-size",
-    "--mod-search-line-height",
-    "--mod-search-min-inline-size",
-    "--mod-search-text-to-icon",
-    "--mod-search-to-help-text",
-    "--mod-search-top-to-icon",
-    "--mod-search-top-to-text"
-  ],
-  "component": [
-    "--spectrum-search-background-color",
-    "--spectrum-search-background-color-disabled",
-    "--spectrum-search-block-size",
-    "--spectrum-search-border-color-default",
-    "--spectrum-search-border-color-disabled",
-    "--spectrum-search-border-color-focus",
-    "--spectrum-search-border-color-focus-hover",
-    "--spectrum-search-border-color-hover",
-    "--spectrum-search-border-color-key-focus",
-    "--spectrum-search-border-radius",
-    "--spectrum-search-border-width",
-    "--spectrum-search-bottom-to-text",
-    "--spectrum-search-button-inline-size",
-    "--spectrum-search-color",
-    "--spectrum-search-color-default",
-    "--spectrum-search-color-disabled",
-    "--spectrum-search-color-focus",
-    "--spectrum-search-color-focus-hover",
-    "--spectrum-search-color-hover",
-    "--spectrum-search-color-key-focus",
-    "--spectrum-search-edge-to-visual",
-    "--spectrum-search-field-minimum-width-multiplier",
-    "--spectrum-search-focus-indicator-color",
-    "--spectrum-search-focus-indicator-gap",
-    "--spectrum-search-focus-indicator-thickness",
-    "--spectrum-search-font-family",
-    "--spectrum-search-font-style",
-    "--spectrum-search-font-weight",
-    "--spectrum-search-icon-size",
-    "--spectrum-search-inline-size",
-    "--spectrum-search-line-height",
-    "--spectrum-search-min-inline-size",
-    "--spectrum-search-text-to-icon",
-    "--spectrum-search-to-help-text",
-    "--spectrum-search-top-to-icon",
-    "--spectrum-search-top-to-text"
-  ],
-  "global": [
-    "--spectrum-border-width-200",
-    "--spectrum-cjk-line-height-100",
-    "--spectrum-component-bottom-to-text-100",
-    "--spectrum-component-bottom-to-text-200",
-    "--spectrum-component-bottom-to-text-300",
-    "--spectrum-component-bottom-to-text-75",
-    "--spectrum-component-height-100",
-    "--spectrum-component-height-200",
-    "--spectrum-component-height-300",
-    "--spectrum-component-height-75",
-    "--spectrum-component-pill-edge-to-visual-100",
-    "--spectrum-component-pill-edge-to-visual-200",
-    "--spectrum-component-pill-edge-to-visual-300",
-    "--spectrum-component-pill-edge-to-visual-75",
-    "--spectrum-component-top-to-text-100",
-    "--spectrum-component-top-to-text-200",
-    "--spectrum-component-top-to-text-300",
-    "--spectrum-component-top-to-text-75",
-    "--spectrum-component-top-to-workflow-icon-100",
-    "--spectrum-component-top-to-workflow-icon-200",
-    "--spectrum-component-top-to-workflow-icon-300",
-    "--spectrum-component-top-to-workflow-icon-75",
-    "--spectrum-corner-radius-full",
-    "--spectrum-default-font-style",
-    "--spectrum-disabled-border-color",
-    "--spectrum-disabled-content-color",
-    "--spectrum-field-width",
-    "--spectrum-focus-indicator-color",
-    "--spectrum-focus-indicator-gap",
-    "--spectrum-focus-indicator-thickness",
-    "--spectrum-font-size-100",
-    "--spectrum-font-size-200",
-    "--spectrum-font-size-300",
-    "--spectrum-font-size-75",
-    "--spectrum-gray-25",
-    "--spectrum-gray-300",
-    "--spectrum-gray-400",
-    "--spectrum-gray-800",
-    "--spectrum-gray-900",
-    "--spectrum-help-text-to-component",
-    "--spectrum-line-height-100",
-    "--spectrum-neutral-content-color-default",
-    "--spectrum-neutral-content-color-focus",
-    "--spectrum-neutral-content-color-focus-hover",
-    "--spectrum-neutral-content-color-hover",
-    "--spectrum-neutral-content-color-key-focus",
-    "--spectrum-regular-font-weight",
-    "--spectrum-sans-font-family-stack",
-    "--spectrum-text-to-visual-100",
-    "--spectrum-text-to-visual-200",
-    "--spectrum-text-to-visual-300",
-    "--spectrum-text-to-visual-75",
-    "--spectrum-workflow-icon-size-100",
-    "--spectrum-workflow-icon-size-200",
-    "--spectrum-workflow-icon-size-300",
-    "--spectrum-workflow-icon-size-75"
-  ],
-  "passthroughs": [
-    "--mod-textfield-background-color",
-    "--mod-textfield-background-color-disabled",
-    "--mod-textfield-border-color",
-    "--mod-textfield-border-color-disabled",
-    "--mod-textfield-border-color-focus",
-    "--mod-textfield-border-color-focus-hover",
-    "--mod-textfield-border-color-hover",
-    "--mod-textfield-border-color-keyboard-focus",
-    "--mod-textfield-border-width",
-    "--mod-textfield-corner-radius",
-    "--mod-textfield-focus-indicator-color",
-    "--mod-textfield-focus-indicator-gap",
-    "--mod-textfield-focus-indicator-width",
-    "--mod-textfield-font-family",
-    "--mod-textfield-font-weight",
-    "--mod-textfield-placeholder-font-size",
-    "--mod-textfield-text-color-default",
-    "--mod-textfield-text-color-disabled",
-    "--mod-textfield-text-color-focus",
-    "--mod-textfield-text-color-focus-hover",
-    "--mod-textfield-text-color-hover",
-    "--mod-textfield-text-color-keyboard-focus"
+    ".spectrum-Search:lang(zh)",
+    ".spectrum-Search.is-disabled .spectrum-Search-clearButton"
   ],
-  "high-contrast": [
-    "--highcontrast-search-color-default",
-    "--highcontrast-search-color-disabled",
-    "--highcontrast-search-color-focus",
-    "--highcontrast-search-color-hover"
-  ]
+  "modifiers": {
+    "mod-search-font-family": {
+      "description": "Used by `--mod-textfield-font-family`. <br/>Defaults to `var(--spectrum-search-font-family)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-search-font-weight": {
+      "description": "Used by `--mod-textfield-font-weight`. <br/>Defaults to `var(--spectrum-search-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-search-border-radius": {
+      "description": "Used by `--mod-textfield-corner-radius`, `.spectrum-Search-clearButton, .spectrum-Search-clearButton .spectrum-ClearButton-fill`. <br/>Defaults to `var(--spectrum-search-border-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-search-border-width": {
+      "description": "Used by `--mod-textfield-border-width`, `.spectrum-Search-input`. <br/>Defaults to `var(--spectrum-search-border-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-search-focus-indicator-gap": {
+      "description": "Used by `--mod-textfield-focus-indicator-gap`. <br/>Defaults to `var(--spectrum-search-focus-indicator-gap)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-search-focus-indicator-thickness": {
+      "description": "Used by `--mod-textfield-focus-indicator-width`. <br/>Defaults to `var(--spectrum-search-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-search-focus-indicator-color": {
+      "description": "Used by `--mod-textfield-focus-indicator-color`. <br/>Defaults to `var(--spectrum-search-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-search-color-default": {
+      "description": "Used by `--mod-textfield-text-color-default`, `--spectrum-search-color`. <br/>Defaults to `var(--spectrum-search-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-search-color-hover": {
+      "description": "Used by `--mod-textfield-text-color-hover`, `--spectrum-search-color`. <br/>Defaults to `var(--spectrum-search-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-search-color-focus": {
+      "description": "Used by `--mod-textfield-text-color-focus`, `--spectrum-search-color`. <br/>Defaults to `var(--spectrum-search-color-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-search-color-focus-hover": {
+      "description": "Used by `--mod-textfield-text-color-focus-hover`, `--spectrum-search-color`. <br/>Defaults to `var(--spectrum-search-color-focus-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-search-color-key-focus": {
+      "description": "Used by `--mod-textfield-text-color-keyboard-focus`, `--spectrum-search-color`. <br/>Defaults to `var(--spectrum-search-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-search-color-disabled": {
+      "description": "Used by `--mod-textfield-text-color-disabled`, `--spectrum-search-color`. <br/>Defaults to `var(--spectrum-search-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-search-border-color-default": {
+      "description": "Used by `--mod-textfield-border-color`. <br/>Defaults to `var(--spectrum-search-border-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-search-border-color-hover": {
+      "description": "Used by `--mod-textfield-border-color-hover`. <br/>Defaults to `var(--spectrum-search-border-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-search-border-color-focus": {
+      "description": "Used by `--mod-textfield-border-color-focus`. <br/>Defaults to `var(--spectrum-search-border-color-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-search-border-color-focus-hover": {
+      "description": "Used by `--mod-textfield-border-color-focus-hover`. <br/>Defaults to `var(--spectrum-search-border-color-focus-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-search-border-color-key-focus": {
+      "description": "Used by `--mod-textfield-border-color-keyboard-focus`. <br/>Defaults to `var(--spectrum-search-border-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-search-border-color-disabled": {
+      "description": "Used by `--mod-textfield-border-color-disabled`. <br/>Defaults to `var(--spectrum-search-border-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-search-background-color": {
+      "description": "Used by `--mod-textfield-background-color`. <br/>Defaults to `var(--spectrum-search-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-search-background-color-disabled": {
+      "description": "Used by `--mod-textfield-background-color-disabled`. <br/>Defaults to `var(--spectrum-search-background-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-search-inline-size": {
+      "description": "Used by `.spectrum-Search`. <br/>Defaults to `var(--spectrum-search-inline-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-search-min-inline-size": {
+      "description": "Used by `.spectrum-Search`. <br/>Defaults to `var(--spectrum-search-min-inline-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-search-to-help-text": {
+      "description": "Used by `.spectrum-Search .spectrum-HelpText`. <br/>Defaults to `var(--spectrum-search-to-help-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-search-edge-to-visual": {
+      "description": "Used by `.spectrum-Search-icon`, `.spectrum-Search-input`. <br/>Defaults to `var(--spectrum-search-edge-to-visual)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-search-top-to-icon": {
+      "description": "Used by `.spectrum-Search-icon`. <br/>Defaults to `var(--spectrum-search-top-to-icon)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-search-block-size": {
+      "description": "Used by `.spectrum-Search-input`. <br/>Defaults to `var(--spectrum-search-block-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-search-top-to-text": {
+      "description": "Used by `.spectrum-Search-input`. <br/>Defaults to `var(--spectrum-search-top-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-search-bottom-to-text": {
+      "description": "Used by `.spectrum-Search-input`. <br/>Defaults to `var(--spectrum-search-bottom-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-search-icon-size": {
+      "description": "Used by `.spectrum-Search-input`. <br/>Defaults to `var(--spectrum-search-icon-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-search-text-to-icon": {
+      "description": "Used by `.spectrum-Search-input`. <br/>Defaults to `var(--spectrum-search-text-to-icon)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-search-button-inline-size": {
+      "description": "Used by `.spectrum-Search-input`. <br/>Defaults to `var(--spectrum-search-button-inline-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-search-font-style": {
+      "description": "Used by `.spectrum-Search-input`. <br/>Defaults to `var(--spectrum-search-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-search-line-height": {
+      "description": "Used by `.spectrum-Search-input`. <br/>Defaults to `var(--spectrum-search-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-search-background-color": {
+      "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+      "description": "Defined in `.spectrum-Search`. <br/>Used by `--mod-textfield-background-color`. <br/>Defaults to `var(--spectrum-gray-25)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-search-border-color-default": {
+      "value": "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))",
+      "description": "Defined in `.spectrum-Search`. <br/>Used by `--mod-textfield-border-color`. <br/>Defaults to `var(--spectrum-gray-300)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-search-border-color-hover": {
+      "value": "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))",
+      "description": "Defined in `.spectrum-Search`. <br/>Used by `--mod-textfield-border-color-hover`. <br/>Defaults to `var(--spectrum-gray-400)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-search-border-color-focus": {
+      "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+      "description": "Defined in `.spectrum-Search`. <br/>Used by `--mod-textfield-border-color-focus`. <br/>Defaults to `var(--spectrum-gray-800)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-search-border-color-focus-hover": {
+      "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+      "description": "Defined in `.spectrum-Search`. <br/>Used by `--mod-textfield-border-color-focus-hover`. <br/>Defaults to `var(--spectrum-gray-900)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-search-border-color-key-focus": {
+      "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+      "description": "Defined in `.spectrum-Search`. <br/>Used by `--mod-textfield-border-color-keyboard-focus`. <br/>Defaults to `var(--spectrum-gray-800)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-search-border-width": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Search`. <br/>Used by `--mod-textfield-border-width`, `.spectrum-Search-input`. <br/>Defaults to `var(--spectrum-border-width-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-search-border-radius": {
+      "value": "9999px",
+      "description": "Defined in `.spectrum-Search`. <br/>Used by `--mod-textfield-corner-radius`, `.spectrum-Search-clearButton, .spectrum-Search-clearButton .spectrum-ClearButton-fill`. <br/>Defaults to `var(--spectrum-corner-radius-full)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-search-inline-size": {
+      "value": "var(--spectrum-field-width-small)",
+      "description": "Defined in `.spectrum-Search`. <br/>Used by `.spectrum-Search`. <br/>Defaults to `var(--spectrum-field-width)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-search-block-size": {
+      "value": "48px",
+      "description": "Defined in `.spectrum-Search`, `.spectrum-Search--sizeS`, `.spectrum-Search--sizeL`, `.spectrum-Search--sizeXL`. <br/>Used by `--spectrum-search-button-inline-size`, `--spectrum-search-min-inline-size`, `.spectrum-Search-input`. <br/>Defaults to `var(--spectrum-component-height-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-search-button-inline-size": {
+      "value": "var(--spectrum-search-block-size)",
+      "description": "Defined in `.spectrum-Search`. <br/>Used by `.spectrum-Search-input`. <br/>Defaults to `var(--spectrum-search-block-size)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-search-min-inline-size": {
+      "value": "calc(var(--spectrum-search-field-minimum-width-multiplier) * var(--spectrum-search-block-size))",
+      "description": "Defined in `.spectrum-Search`. <br/>Used by `.spectrum-Search`. <br/>Defaults to `calc(var(--spectrum-search-field-minimum-width-multiplier) * var(--spectrum-search-block-size))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-search-field-minimum-width-multiplier": {
+      "value": "4",
+      "description": "Used by `--spectrum-search-min-inline-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-search-icon-size": {
+      "value": "26px",
+      "description": "Defined in `.spectrum-Search`, `.spectrum-Search--sizeS`, `.spectrum-Search--sizeL`, `.spectrum-Search--sizeXL`. <br/>Used by `.spectrum-Search-input`. <br/>Defaults to `var(--spectrum-workflow-icon-size-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-search-text-to-icon": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-Search`, `.spectrum-Search--sizeS`, `.spectrum-Search--sizeL`, `.spectrum-Search--sizeXL`. <br/>Used by `.spectrum-Search-input`. <br/>Defaults to `var(--spectrum-text-to-visual-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-search-to-help-text": {
+      "value": "0px",
+      "description": "Defined in `.spectrum-Search`. <br/>Used by `.spectrum-Search .spectrum-HelpText`. <br/>Defaults to `var(--spectrum-help-text-to-component)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-search-top-to-text": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-Search`, `.spectrum-Search--sizeS`, `.spectrum-Search--sizeL`, `.spectrum-Search--sizeXL`. <br/>Used by `.spectrum-Search-input`. <br/>Defaults to `var(--spectrum-component-top-to-text-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-search-bottom-to-text": {
+      "value": "14px",
+      "description": "Defined in `.spectrum-Search`, `.spectrum-Search--sizeS`, `.spectrum-Search--sizeL`, `.spectrum-Search--sizeXL`. <br/>Used by `.spectrum-Search-input`. <br/>Defaults to `var(--spectrum-component-bottom-to-text-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-search-edge-to-visual": {
+      "value": "21px",
+      "description": "Defined in `.spectrum-Search`, `.spectrum-Search--sizeS`, `.spectrum-Search--sizeL`, `.spectrum-Search--sizeXL`. <br/>Used by `.spectrum-Search-icon`, `.spectrum-Search-input`. <br/>Defaults to `var(--spectrum-component-pill-edge-to-visual-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-search-top-to-icon": {
+      "value": "11px",
+      "description": "Defined in `.spectrum-Search`, `.spectrum-Search--sizeS`, `.spectrum-Search--sizeL`, `.spectrum-Search--sizeXL`. <br/>Used by `.spectrum-Search-icon`. <br/>Defaults to `var(--spectrum-component-top-to-workflow-icon-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-search-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Search`. <br/>Used by `--mod-textfield-focus-indicator-width`. <br/>Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-search-focus-indicator-gap": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Search`. <br/>Used by `--mod-textfield-focus-indicator-gap`. <br/>Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-search-focus-indicator-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Defined in `.spectrum-Search`. <br/>Used by `--mod-textfield-focus-indicator-color`. <br/>Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-search-font-family": {
+      "value": "var(--spectrum-sans-font-family-stack)",
+      "description": "Defined in `.spectrum-Search`. <br/>Used by `--mod-textfield-font-family`. <br/>Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-search-font-weight": {
+      "value": "400",
+      "description": "Defined in `.spectrum-Search`. <br/>Used by `--mod-textfield-font-weight`. <br/>Defaults to `var(--spectrum-regular-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-search-font-style": {
+      "value": "normal",
+      "description": "Defined in `.spectrum-Search`. <br/>Used by `.spectrum-Search-input`. <br/>Defaults to `var(--spectrum-default-font-style)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-search-line-height": {
+      "value": "1.5",
+      "description": "Defined in `.spectrum-Search`, `.spectrum-Search:lang(ja), .spectrum-Search:lang(ko), .spectrum-Search:lang(zh)`. <br/>Used by `.spectrum-Search-input`. <br/>Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-search-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-Search`. <br/>Used by `--mod-textfield-text-color-default`, `--spectrum-search-color`. <br/>Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-search-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Search`. <br/>Used by `--mod-textfield-text-color-hover`, `--spectrum-search-color`. <br/>Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-search-color-focus": {
+      "value": "var(--spectrum-neutral-content-color-down)",
+      "description": "Defined in `.spectrum-Search`. <br/>Used by `--mod-textfield-text-color-focus`, `--spectrum-search-color`. <br/>Defaults to `var(--spectrum-neutral-content-color-focus)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-search-color-focus-hover": {
+      "value": "var(--spectrum-neutral-content-color-down)",
+      "description": "Defined in `.spectrum-Search`. <br/>Used by `--mod-textfield-text-color-focus-hover`, `--spectrum-search-color`. <br/>Defaults to `var(--spectrum-neutral-content-color-focus-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-search-color-key-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Search`. <br/>Used by `--mod-textfield-text-color-keyboard-focus`, `--spectrum-search-color`. <br/>Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-search-color-disabled": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Defined in `.spectrum-Search`. <br/>Used by `--mod-textfield-text-color-disabled`, `--spectrum-search-color`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-search-background-color-disabled": {
+      "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+      "description": "Defined in `.spectrum-Search`. <br/>Used by `--mod-textfield-background-color-disabled`. <br/>Defaults to `var(--spectrum-gray-25)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-search-border-color-disabled": {
+      "value": "var(--spectrum-gray-300)",
+      "description": "Defined in `.spectrum-Search`. <br/>Used by `--mod-textfield-border-color-disabled`. <br/>Defaults to `var(--spectrum-disabled-border-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-search-color": {
+      "value": "var(--highcontrast-search-color-disabled, var(--mod-search-color-disabled, var(--spectrum-search-color-disabled)))",
+      "description": "Defined in `.spectrum-Search-icon`, `.spectrum-Search-textfield.is-focused .spectrum-Search-icon`, `.spectrum-Search-textfield.is-keyboardFocused .spectrum-Search-icon`, `.spectrum-Search-textfield.is-disabled .spectrum-Search-icon`, `.spectrum-Search-textfield:hover .spectrum-Search-icon`, `.spectrum-Search-textfield.is-focused:hover .spectrum-Search-icon`, `.spectrum-Search-textfield.is-disabled:hover .spectrum-Search-icon`. <br/>Used by `.spectrum-Search-icon`. <br/>Defaults to `var(--highcontrast-search-color-disabled, var(--mod-search-color-disabled, var(--spectrum-search-color-disabled)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-gray-25": {
+      "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+      "description": "Used by `--spectrum-search-background-color`, `--spectrum-search-background-color-disabled`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-300": {
+      "value": "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))",
+      "description": "Used by `--spectrum-search-border-color-default`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-400": {
+      "value": "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))",
+      "description": "Used by `--spectrum-search-border-color-hover`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-800": {
+      "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+      "description": "Used by `--spectrum-search-border-color-focus`, `--spectrum-search-border-color-key-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-900": {
+      "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+      "description": "Used by `--spectrum-search-border-color-focus-hover`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-border-width-200": {
+      "value": "2px",
+      "description": "Used by `--spectrum-search-border-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-full": {
+      "value": "9999px",
+      "description": "Used by `--spectrum-search-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-width": {
+      "value": "var(--spectrum-field-width-small)",
+      "description": "Used by `--spectrum-search-inline-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-100": {
+      "value": "32px",
+      "description": "Used by `--spectrum-search-block-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-100": {
+      "value": "20px",
+      "description": "Used by `--spectrum-search-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-search-text-to-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-help-text-to-component": {
+      "value": "0px",
+      "description": "Used by `--spectrum-search-to-help-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-search-top-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-100": {
+      "value": "9px",
+      "description": "Used by `--spectrum-search-bottom-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-pill-edge-to-visual-100": {
+      "value": "14px",
+      "description": "Used by `--spectrum-search-edge-to-visual`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-workflow-icon-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-search-top-to-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Used by `--spectrum-search-focus-indicator-thickness`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-gap": {
+      "value": "2px",
+      "description": "Used by `--spectrum-search-focus-indicator-gap`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Used by `--spectrum-search-focus-indicator-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-sans-font-family-stack": {
+      "description": "Used by `--spectrum-search-font-family`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-regular-font-weight": {
+      "value": "400",
+      "description": "Used by `--spectrum-search-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-default-font-style": {
+      "value": "normal",
+      "description": "Used by `--spectrum-search-font-style`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-line-height-100": {
+      "value": "1.3",
+      "description": "Used by `--spectrum-search-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-search-color-default`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-search-color-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-focus": {
+      "value": "var(--spectrum-neutral-content-color-down)",
+      "description": "Used by `--spectrum-search-color-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-focus-hover": {
+      "value": "var(--spectrum-neutral-content-color-down)",
+      "description": "Used by `--spectrum-search-color-focus-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-key-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-search-color-key-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-disabled-content-color": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Used by `--spectrum-search-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-disabled-border-color": {
+      "value": "var(--spectrum-gray-300)",
+      "description": "Used by `--spectrum-search-border-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-font-size-100": {
+      "value": "14px",
+      "description": "Used by `--mod-textfield-placeholder-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-cjk-line-height-100": {
+      "value": "1.5",
+      "description": "Used by `--spectrum-search-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-75": {
+      "value": "24px",
+      "description": "Used by `--spectrum-search-block-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-75": {
+      "value": "16px",
+      "description": "Used by `--spectrum-search-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-75": {
+      "value": "5px",
+      "description": "Used by `--spectrum-search-text-to-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-pill-edge-to-visual-75": {
+      "value": "10px",
+      "description": "Used by `--spectrum-search-edge-to-visual`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-workflow-icon-75": {
+      "value": "4px",
+      "description": "Used by `--spectrum-search-top-to-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-75": {
+      "value": "4px",
+      "description": "Used by `--spectrum-search-top-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-75": {
+      "value": "5px",
+      "description": "Used by `--spectrum-search-bottom-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-75": {
+      "value": "12px",
+      "description": "Used by `--mod-textfield-placeholder-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-200": {
+      "value": "40px",
+      "description": "Used by `--spectrum-search-block-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-200": {
+      "value": "22px",
+      "description": "Used by `--spectrum-search-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-200": {
+      "value": "7px",
+      "description": "Used by `--spectrum-search-text-to-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-pill-edge-to-visual-200": {
+      "value": "18px",
+      "description": "Used by `--spectrum-search-edge-to-visual`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-workflow-icon-200": {
+      "value": "9px",
+      "description": "Used by `--spectrum-search-top-to-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-200": {
+      "value": "9px",
+      "description": "Used by `--spectrum-search-top-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-200": {
+      "value": "11px",
+      "description": "Used by `--spectrum-search-bottom-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-200": {
+      "value": "16px",
+      "description": "Used by `--mod-textfield-placeholder-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-300": {
+      "value": "48px",
+      "description": "Used by `--spectrum-search-block-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-300": {
+      "value": "26px",
+      "description": "Used by `--spectrum-search-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-300": {
+      "value": "8px",
+      "description": "Used by `--spectrum-search-text-to-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-pill-edge-to-visual-300": {
+      "value": "21px",
+      "description": "Used by `--spectrum-search-edge-to-visual`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-workflow-icon-300": {
+      "value": "11px",
+      "description": "Used by `--spectrum-search-top-to-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-300": {
+      "value": "12px",
+      "description": "Used by `--spectrum-search-top-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-300": {
+      "value": "14px",
+      "description": "Used by `--spectrum-search-bottom-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-300": {
+      "value": "18px",
+      "description": "Used by `--mod-textfield-placeholder-font-size`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {
+    "mod-textfield-font-family": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-font-weight": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-placeholder-font-size": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-corner-radius": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-border-width": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-focus-indicator-gap": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-focus-indicator-width": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-focus-indicator-color": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-text-color-default": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-text-color-hover": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-text-color-focus": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-text-color-focus-hover": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-text-color-keyboard-focus": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-text-color-disabled": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-border-color": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-border-color-hover": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-border-color-focus": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-border-color-focus-hover": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-border-color-keyboard-focus": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-border-color-disabled": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-background-color": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-background-color-disabled": {
+      "category": "Passthrough"
+    }
+  },
+  "high-contrast": {
+    "highcontrast-search-color-default": {
+      "value": "var(--mod-search-color-default, var(--spectrum-search-color-default))",
+      "description": "Defined in `.spectrum-Search .spectrum-Search-textfield, .spectrum-Search .spectrum-Search-textfield .spectrum-Search-input`. <br/>Used by `--spectrum-search-color`. <br/>Defaults to `var(--mod-search-color-default, var(--spectrum-search-color-default))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-search-color-focus": {
+      "value": "var(--mod-search-color-focus-hover, var(--spectrum-search-color-focus-hover))",
+      "description": "Defined in `.spectrum-Search .spectrum-Search-textfield, .spectrum-Search .spectrum-Search-textfield .spectrum-Search-input`. <br/>Used by `--spectrum-search-color`. <br/>Defaults to `var(--mod-search-color-focus-hover, var(--spectrum-search-color-focus-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-search-color-disabled": {
+      "value": "var(--mod-search-color-disabled, var(--spectrum-search-color-disabled))",
+      "description": "Defined in `.spectrum-Search .spectrum-Search-textfield, .spectrum-Search .spectrum-Search-textfield .spectrum-Search-input`. <br/>Used by `--spectrum-search-color`. <br/>Defaults to `var(--mod-search-color-disabled, var(--spectrum-search-color-disabled))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-search-color-hover": {
+      "value": "var(--mod-search-color-hover, var(--spectrum-search-color-hover))",
+      "description": "Defined in `.spectrum-Search .spectrum-Search-textfield, .spectrum-Search .spectrum-Search-textfield .spectrum-Search-input`. <br/>Used by `--spectrum-search-color`. <br/>Defaults to `var(--mod-search-color-hover, var(--spectrum-search-color-hover))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/search/stories/search.stories.js b/components/search/stories/search.stories.js
index ad429e00554..55f6cde9caf 100644
--- a/components/search/stories/search.stories.js
+++ b/components/search/stories/search.stories.js
@@ -1,11 +1,13 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, isFocused, isHovered, isKeyboardFocused, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { SearchGroup } from "./search.test.js";
 import { SearchOptions, Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * A search field is used for searching and filtering items.
  *
@@ -77,9 +79,7 @@ export default {
 		},
 		packageJson,
 		metadata,
-		status: {
-			type: "migrated",
-		},
+		cssprops: metadata.modifiers,
 	},
 	tags: ["migrated"],
 };
diff --git a/components/sidenav/dist/metadata.json b/components/sidenav/dist/metadata.json
index 0215529e384..5982df92ecd 100644
--- a/components/sidenav/dist/metadata.json
+++ b/components/sidenav/dist/metadata.json
@@ -12,189 +12,924 @@
     ".spectrum-SideNav-item",
     ".spectrum-SideNav-item.is-disabled .spectrum-SideNav-itemLink",
     ".spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink",
-    ".spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink.is-keyboardFocused",
     ".spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:active",
     ".spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:focus-visible",
     ".spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:hover",
+    ".spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink.is-keyboardFocused",
     ".spectrum-SideNav-itemLink",
     ".spectrum-SideNav-itemLink .spectrum-Icon",
     ".spectrum-SideNav-itemLink .spectrum-SideNav-link-text",
-    ".spectrum-SideNav-itemLink.is-keyboardFocused",
     ".spectrum-SideNav-itemLink:active",
     ".spectrum-SideNav-itemLink:focus-visible",
     ".spectrum-SideNav-itemLink:hover",
+    ".spectrum-SideNav-itemLink.is-keyboardFocused",
     ".spectrum-SideNav:lang(ja)",
     ".spectrum-SideNav:lang(ko)",
     ".spectrum-SideNav:lang(zh)"
   ],
-  "modifiers": [
-    "--mod-sidenav-background-default",
-    "--mod-sidenav-background-disabled",
-    "--mod-sidenav-background-hover",
-    "--mod-sidenav-background-hover-selected",
-    "--mod-sidenav-background-key-focus",
-    "--mod-sidenav-background-key-focus-selected",
-    "--mod-sidenav-border-radius",
-    "--mod-sidenav-bottom-to-label",
-    "--mod-sidenav-content-color-default",
-    "--mod-sidenav-content-color-default-selected",
-    "--mod-sidenav-content-color-down",
-    "--mod-sidenav-content-color-down-selected",
-    "--mod-sidenav-content-color-hover",
-    "--mod-sidenav-content-color-hover-selected",
-    "--mod-sidenav-content-color-key-focus",
-    "--mod-sidenav-content-color-key-focus-selected",
-    "--mod-sidenav-content-disabled-color",
-    "--mod-sidenav-focus-ring-color",
-    "--mod-sidenav-focus-ring-gap",
-    "--mod-sidenav-focus-ring-size",
-    "--mod-sidenav-gap",
-    "--mod-sidenav-header-color",
-    "--mod-sidenav-header-font-size",
-    "--mod-sidenav-header-font-style",
-    "--mod-sidenav-header-font-weight",
-    "--mod-sidenav-header-line-height",
-    "--mod-sidenav-heading-bottom-margin",
-    "--mod-sidenav-heading-top-margin",
-    "--mod-sidenav-icon-size",
-    "--mod-sidenav-icon-spacing",
-    "--mod-sidenav-inline-padding",
-    "--mod-sidenav-item-background-default-selected",
-    "--mod-sidenav-item-background-down",
-    "--mod-sidenav-item-background-down-selected",
-    "--mod-sidenav-max-width",
-    "--mod-sidenav-min-height",
-    "--mod-sidenav-min-width",
-    "--mod-sidenav-start-to-content-second-level",
-    "--mod-sidenav-start-to-content-third-level",
-    "--mod-sidenav-start-to-content-with-icon-second-level",
-    "--mod-sidenav-start-to-content-with-icon-third-level",
-    "--mod-sidenav-text-font-family",
-    "--mod-sidenav-text-font-size",
-    "--mod-sidenav-text-font-style",
-    "--mod-sidenav-text-font-weight",
-    "--mod-sidenav-text-line-height",
-    "--mod-sidenav-top-level-font-family",
-    "--mod-sidenav-top-level-font-size",
-    "--mod-sidenav-top-level-font-style",
-    "--mod-sidenav-top-level-font-weight",
-    "--mod-sidenav-top-level-line-height",
-    "--mod-sidenav-top-to-icon",
-    "--mod-sidenav-top-to-label",
-    "--mod-sidenav-width"
-  ],
-  "component": [
-    "--spectrum-side-navigation-bottom-to-text",
-    "--spectrum-side-navigation-header-to-item",
-    "--spectrum-side-navigation-item-to-header",
-    "--spectrum-side-navigation-item-to-item",
-    "--spectrum-side-navigation-maximum-width",
-    "--spectrum-side-navigation-minimum-width",
-    "--spectrum-side-navigation-second-level-edge-to-text",
-    "--spectrum-side-navigation-third-level-edge-to-text",
-    "--spectrum-side-navigation-with-icon-second-level-edge-to-text",
-    "--spectrum-side-navigation-with-icon-third-level-edge-to-text",
-    "--spectrum-sidenav-background-default",
-    "--spectrum-sidenav-background-disabled",
-    "--spectrum-sidenav-background-hover",
-    "--spectrum-sidenav-background-hover-selected",
-    "--spectrum-sidenav-background-key-focus",
-    "--spectrum-sidenav-background-key-focus-selected",
-    "--spectrum-sidenav-border-radius",
-    "--spectrum-sidenav-bottom-to-label",
-    "--spectrum-sidenav-content-color-default",
-    "--spectrum-sidenav-content-color-default-selected",
-    "--spectrum-sidenav-content-color-down",
-    "--spectrum-sidenav-content-color-down-selected",
-    "--spectrum-sidenav-content-color-hover",
-    "--spectrum-sidenav-content-color-hover-selected",
-    "--spectrum-sidenav-content-color-key-focus",
-    "--spectrum-sidenav-content-color-key-focus-selected",
-    "--spectrum-sidenav-content-disabled-color",
-    "--spectrum-sidenav-focus-ring-color",
-    "--spectrum-sidenav-focus-ring-gap",
-    "--spectrum-sidenav-focus-ring-size",
-    "--spectrum-sidenav-gap",
-    "--spectrum-sidenav-header-color",
-    "--spectrum-sidenav-header-font-family",
-    "--spectrum-sidenav-header-font-size",
-    "--spectrum-sidenav-header-font-style",
-    "--spectrum-sidenav-header-font-weight",
-    "--spectrum-sidenav-header-line-height",
-    "--spectrum-sidenav-heading-bottom-margin",
-    "--spectrum-sidenav-heading-top-margin",
-    "--spectrum-sidenav-icon-size",
-    "--spectrum-sidenav-icon-spacing",
-    "--spectrum-sidenav-inline-padding",
-    "--spectrum-sidenav-item-background-default-selected",
-    "--spectrum-sidenav-item-background-down",
-    "--spectrum-sidenav-item-background-down-selected",
-    "--spectrum-sidenav-max-width",
-    "--spectrum-sidenav-min-height",
-    "--spectrum-sidenav-min-width",
-    "--spectrum-sidenav-start-to-content-second-level",
-    "--spectrum-sidenav-start-to-content-third-level",
-    "--spectrum-sidenav-start-to-content-with-icon-second-level",
-    "--spectrum-sidenav-start-to-content-with-icon-third-level",
-    "--spectrum-sidenav-text-font-family",
-    "--spectrum-sidenav-text-font-size",
-    "--spectrum-sidenav-text-font-style",
-    "--spectrum-sidenav-text-font-weight",
-    "--spectrum-sidenav-text-line-height",
-    "--spectrum-sidenav-top-level-font-family",
-    "--spectrum-sidenav-top-level-font-size",
-    "--spectrum-sidenav-top-level-font-style",
-    "--spectrum-sidenav-top-level-font-weight",
-    "--spectrum-sidenav-top-level-line-height",
-    "--spectrum-sidenav-top-to-icon",
-    "--spectrum-sidenav-top-to-label",
-    "--spectrum-sidenav-width"
-  ],
-  "global": [
-    "--spectrum-animation-duration-100",
-    "--spectrum-bold-font-weight",
-    "--spectrum-cjk-line-height-100",
-    "--spectrum-component-edge-to-text-100",
-    "--spectrum-component-height-100",
-    "--spectrum-component-top-to-text-100",
-    "--spectrum-component-top-to-workflow-icon-100",
-    "--spectrum-corner-radius-100",
-    "--spectrum-default-font-style",
-    "--spectrum-disabled-content-color",
-    "--spectrum-focus-indicator-color",
-    "--spectrum-focus-indicator-gap",
-    "--spectrum-focus-indicator-thickness",
-    "--spectrum-font-size-100",
-    "--spectrum-font-size-75",
-    "--spectrum-gray-100",
-    "--spectrum-gray-200",
-    "--spectrum-gray-600",
-    "--spectrum-line-height-100",
-    "--spectrum-medium-font-weight",
-    "--spectrum-neutral-content-color-default",
-    "--spectrum-neutral-content-color-down",
-    "--spectrum-neutral-content-color-hover",
-    "--spectrum-neutral-content-color-key-focus",
-    "--spectrum-regular-font-weight",
-    "--spectrum-sans-font-family-stack",
-    "--spectrum-text-to-visual-100",
-    "--spectrum-workflow-icon-size-100"
-  ],
-  "passthroughs": [],
-  "high-contrast": [
-    "--highcontrast-sidenav-background-hover",
-    "--highcontrast-sidenav-background-hover-selected",
-    "--highcontrast-sidenav-background-key-focus",
-    "--highcontrast-sidenav-background-key-focus-selected",
-    "--highcontrast-sidenav-content-color-default",
-    "--highcontrast-sidenav-content-color-default-selected",
-    "--highcontrast-sidenav-content-color-down",
-    "--highcontrast-sidenav-content-color-hover",
-    "--highcontrast-sidenav-content-disabled-color",
-    "--highcontrast-sidenav-focus-ring-color",
-    "--highcontrast-sidenav-item-background-default-selected",
-    "--highcontrast-sidenav-item-background-down",
-    "--highcontrast-sidenav-item-background-down-selected",
-    "--highcontrast-sidenav-top-level-font-color"
-  ]
+  "modifiers": {
+    "mod-sidenav-background-disabled": {
+      "description": "Used by `.spectrum-SideNav-item.is-disabled .spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-sidenav-background-disabled)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-content-disabled-color": {
+      "description": "Used by `.spectrum-SideNav-item.is-disabled .spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-sidenav-content-disabled-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-sidenav-item-background-default-selected": {
+      "description": "Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-sidenav-item-background-default-selected)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-content-color-default-selected": {
+      "description": "Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-sidenav-content-color-default-selected)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-sidenav-item-background-down-selected": {
+      "description": "Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:active`. <br/>Defaults to `var(--spectrum-sidenav-item-background-down-selected)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-content-color-down-selected": {
+      "description": "Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:active`. <br/>Defaults to `var(--spectrum-sidenav-content-color-down-selected)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-sidenav-background-key-focus-selected": {
+      "description": "Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:focus-visible`. <br/>Defaults to `var(--spectrum-sidenav-background-key-focus-selected)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-content-color-key-focus-selected": {
+      "description": "Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:focus-visible`. <br/>Defaults to `var(--spectrum-sidenav-content-color-key-focus-selected)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-sidenav-inline-padding": {
+      "description": "Used by `.spectrum-SideNav-itemLink`, `.spectrum-SideNav-heading`. <br/>Defaults to `var(--spectrum-sidenav-inline-padding)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-gap": {
+      "description": "Used by `.spectrum-SideNav-itemLink`, `.spectrum-SideNav-heading`. <br/>Defaults to `var(--spectrum-sidenav-gap)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-border-radius": {
+      "description": "Used by `.spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-sidenav-border-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-background-default": {
+      "description": "Used by `.spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-sidenav-background-default)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-content-color-default": {
+      "description": "Used by `.spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-sidenav-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-sidenav-width": {
+      "description": "Used by `.spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-sidenav-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-min-width": {
+      "description": "Used by `.spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-sidenav-min-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-max-width": {
+      "description": "Used by `.spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-sidenav-max-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-min-height": {
+      "description": "Used by `.spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-sidenav-min-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-text-font-family": {
+      "description": "Used by `.spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-sidenav-text-font-family)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-text-font-size": {
+      "description": "Used by `.spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-sidenav-text-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-text-font-weight": {
+      "description": "Used by `.spectrum-SideNav-itemLink`, `.spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-sidenav-text-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-text-font-style": {
+      "description": "Used by `.spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-sidenav-text-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-text-line-height": {
+      "description": "Used by `.spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-sidenav-text-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-top-to-label": {
+      "description": "Used by `.spectrum-SideNav-itemLink .spectrum-SideNav-link-text`. <br/>Defaults to `var(--spectrum-sidenav-top-to-label)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-bottom-to-label": {
+      "description": "Used by `.spectrum-SideNav-itemLink .spectrum-SideNav-link-text`. <br/>Defaults to `var(--spectrum-sidenav-bottom-to-label)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-icon-size": {
+      "description": "Used by `.spectrum-SideNav-itemLink .spectrum-Icon`. <br/>Defaults to `var(--spectrum-sidenav-icon-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-icon-spacing": {
+      "description": "Used by `.spectrum-SideNav-itemLink .spectrum-Icon`. <br/>Defaults to `var(--spectrum-sidenav-icon-spacing)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-top-to-icon": {
+      "description": "Used by `.spectrum-SideNav-itemLink .spectrum-Icon`. <br/>Defaults to `var(--spectrum-sidenav-top-to-icon)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-background-hover-selected": {
+      "description": "Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:hover`. <br/>Defaults to `var(--spectrum-sidenav-background-hover-selected)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-content-color-hover-selected": {
+      "description": "Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:hover`. <br/>Defaults to `var(--spectrum-sidenav-content-color-hover-selected)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-sidenav-background-hover": {
+      "description": "Used by `.spectrum-SideNav-itemLink:hover`. <br/>Defaults to `var(--spectrum-sidenav-background-hover)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-content-color-hover": {
+      "description": "Used by `.spectrum-SideNav-itemLink:hover`. <br/>Defaults to `var(--spectrum-sidenav-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-sidenav-item-background-down": {
+      "description": "Used by `.spectrum-SideNav-itemLink:active`. <br/>Defaults to `var(--spectrum-sidenav-item-background-down)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-content-color-down": {
+      "description": "Used by `.spectrum-SideNav-itemLink:active`. <br/>Defaults to `var(--spectrum-sidenav-content-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-sidenav-focus-ring-color": {
+      "description": "Used by `.spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-itemLink:focus-visible`. <br/>Defaults to `var(--spectrum-sidenav-focus-ring-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-sidenav-focus-ring-size": {
+      "description": "Used by `.spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-itemLink:focus-visible`. <br/>Defaults to `var(--spectrum-sidenav-focus-ring-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-focus-ring-gap": {
+      "description": "Used by `.spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-itemLink:focus-visible`. <br/>Defaults to `var(--spectrum-sidenav-focus-ring-gap)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-background-key-focus": {
+      "description": "Used by `.spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-itemLink:focus-visible`. <br/>Defaults to `var(--spectrum-sidenav-background-key-focus)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-content-color-key-focus": {
+      "description": "Used by `.spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-itemLink:focus-visible`. <br/>Defaults to `var(--spectrum-sidenav-content-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-sidenav-heading-top-margin": {
+      "description": "Used by `.spectrum-SideNav-heading`. <br/>Defaults to `var(--spectrum-sidenav-heading-top-margin)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-heading-bottom-margin": {
+      "description": "Used by `.spectrum-SideNav-heading`. <br/>Defaults to `var(--spectrum-sidenav-heading-bottom-margin)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-header-color": {
+      "description": "Used by `.spectrum-SideNav-heading`. <br/>Defaults to `var(--spectrum-sidenav-header-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-sidenav-header-font-size": {
+      "description": "Used by `.spectrum-SideNav-heading`. <br/>Defaults to `var(--spectrum-sidenav-header-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-header-font-weight": {
+      "description": "Used by `.spectrum-SideNav-heading`. <br/>Defaults to `var(--spectrum-sidenav-header-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-header-font-style": {
+      "description": "Used by `.spectrum-SideNav-heading`. <br/>Defaults to `var(--spectrum-sidenav-header-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-header-line-height": {
+      "description": "Used by `.spectrum-SideNav-heading`. <br/>Defaults to `var(--spectrum-sidenav-header-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-top-level-font-family": {
+      "description": "Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-sidenav-top-level-font-family)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-top-level-font-weight": {
+      "description": "Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-sidenav-top-level-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-top-level-font-style": {
+      "description": "Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-sidenav-top-level-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-top-level-font-size": {
+      "description": "Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-sidenav-top-level-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-top-level-line-height": {
+      "description": "Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-sidenav-top-level-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-start-to-content-second-level": {
+      "description": "Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-sidenav-start-to-content-second-level)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-start-to-content-third-level": {
+      "description": "Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav .spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-sidenav-start-to-content-third-level)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-start-to-content-with-icon-second-level": {
+      "description": "Used by `.spectrum-SideNav--hasIcon.spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-sidenav-start-to-content-with-icon-second-level)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-sidenav-start-to-content-with-icon-third-level": {
+      "description": "Used by `.spectrum-SideNav--hasIcon.spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav .spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-sidenav-start-to-content-with-icon-third-level)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-sidenav-focus-ring-size": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-itemLink:focus-visible`. <br/>Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-focus-ring-gap": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-itemLink:focus-visible`. <br/>Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-focus-ring-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-itemLink:focus-visible`. <br/>Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-sidenav-min-height": {
+      "value": "32px",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-component-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-width": {
+      "value": "100%",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-itemLink`. <br/>Defaults to `100%`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-min-width": {
+      "value": "160px",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-side-navigation-minimum-width)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-side-navigation-minimum-width": {
+      "value": "160px",
+      "description": "Used by `--spectrum-sidenav-min-width`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-max-width": {
+      "value": "240px",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-side-navigation-maximum-width)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-side-navigation-maximum-width": {
+      "value": "240px",
+      "description": "Used by `--spectrum-sidenav-max-width`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-border-radius": {
+      "value": "4px",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-corner-radius-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-icon-size": {
+      "value": "20px",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-itemLink .spectrum-Icon`. <br/>Defaults to `var(--spectrum-workflow-icon-size-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-icon-spacing": {
+      "value": "6px",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-itemLink .spectrum-Icon`. <br/>Defaults to `var(--spectrum-text-to-visual-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-inline-padding": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-itemLink`, `.spectrum-SideNav-heading`. <br/>Defaults to `var(--spectrum-component-edge-to-text-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-gap": {
+      "value": "4px",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-itemLink`, `.spectrum-SideNav-heading`. <br/>Defaults to `var(--spectrum-side-navigation-item-to-item)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-side-navigation-item-to-item": {
+      "value": "4px",
+      "description": "Used by `--spectrum-sidenav-gap`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-top-to-icon": {
+      "value": "6px",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-itemLink .spectrum-Icon`. <br/>Defaults to `var(--spectrum-component-top-to-workflow-icon-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-top-to-label": {
+      "value": "6px",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-itemLink .spectrum-SideNav-link-text`. <br/>Defaults to `var(--spectrum-component-top-to-text-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-bottom-to-label": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-itemLink .spectrum-SideNav-link-text`. <br/>Defaults to `var(--spectrum-side-navigation-bottom-to-text)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-side-navigation-bottom-to-text": {
+      "value": "8px",
+      "description": "Used by `--spectrum-sidenav-bottom-to-label`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-start-to-content-second-level": {
+      "value": "24px",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-side-navigation-second-level-edge-to-text)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-side-navigation-second-level-edge-to-text": {
+      "value": "24px",
+      "description": "Used by `--spectrum-sidenav-start-to-content-second-level`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-start-to-content-third-level": {
+      "value": "36px",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav .spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-side-navigation-third-level-edge-to-text)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-side-navigation-third-level-edge-to-text": {
+      "value": "36px",
+      "description": "Used by `--spectrum-sidenav-start-to-content-third-level`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-start-to-content-with-icon-second-level": {
+      "value": "50px",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav--hasIcon.spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-side-navigation-with-icon-second-level-edge-to-text)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-side-navigation-with-icon-second-level-edge-to-text": {
+      "value": "50px",
+      "description": "Used by `--spectrum-sidenav-start-to-content-with-icon-second-level`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-start-to-content-with-icon-third-level": {
+      "value": "62px",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav--hasIcon.spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav .spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-side-navigation-with-icon-third-level-edge-to-text)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-side-navigation-with-icon-third-level-edge-to-text": {
+      "value": "62px",
+      "description": "Used by `--spectrum-sidenav-start-to-content-with-icon-third-level`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-heading-top-margin": {
+      "value": "24px",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-heading`. <br/>Defaults to `var(--spectrum-side-navigation-item-to-header)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-side-navigation-item-to-header": {
+      "value": "24px",
+      "description": "Used by `--spectrum-sidenav-heading-top-margin`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-heading-bottom-margin": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-heading`. <br/>Defaults to `var(--spectrum-side-navigation-header-to-item)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-side-navigation-header-to-item": {
+      "value": "8px",
+      "description": "Used by `--spectrum-sidenav-heading-bottom-margin`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-background-disabled": {
+      "value": "transparent",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-item.is-disabled .spectrum-SideNav-itemLink`. <br/>Defaults to `transparent`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-background-default": {
+      "value": "transparent",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-itemLink`. <br/>Defaults to `transparent`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-background-hover": {
+      "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-itemLink:hover`. <br/>Defaults to `var(--spectrum-gray-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-item-background-down": {
+      "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-itemLink:active`. <br/>Defaults to `var(--spectrum-gray-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-background-key-focus": {
+      "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-itemLink:focus-visible`. <br/>Defaults to `var(--spectrum-gray-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-item-background-default-selected": {
+      "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-gray-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-background-hover-selected": {
+      "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:hover`. <br/>Defaults to `var(--spectrum-gray-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-item-background-down-selected": {
+      "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:active`. <br/>Defaults to `var(--spectrum-gray-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-background-key-focus-selected": {
+      "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:focus-visible`. <br/>Defaults to `var(--spectrum-gray-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-header-color": {
+      "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-heading`. <br/>Defaults to `var(--spectrum-gray-600)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-sidenav-content-disabled-color": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-item.is-disabled .spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-sidenav-content-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-sidenav-content-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-itemLink:hover`. <br/>Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-sidenav-content-color-down": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-itemLink:active`. <br/>Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-sidenav-content-color-key-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-itemLink:focus-visible`. <br/>Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-sidenav-content-color-default-selected": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-sidenav-content-color-hover-selected": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:hover`. <br/>Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-sidenav-content-color-down-selected": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:active`. <br/>Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-sidenav-content-color-key-focus-selected": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:focus-visible`. <br/>Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-sidenav-text-font-family": {
+      "value": "var(--spectrum-sans-font-family-stack)",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-text-font-weight": {
+      "value": "400",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-itemLink`, `.spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-regular-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-text-font-style": {
+      "value": "normal",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-default-font-style)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-text-font-size": {
+      "value": "14px",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-font-size-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-text-line-height": {
+      "value": "1.5",
+      "description": "Defined in `.spectrum-SideNav`, `.spectrum-SideNav:lang(ja), .spectrum-SideNav:lang(ko), .spectrum-SideNav:lang(zh)`. <br/>Used by `.spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-top-level-font-family": {
+      "value": "var(--spectrum-sans-font-family-stack)",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-top-level-font-weight": {
+      "value": "700",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-bold-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-top-level-font-style": {
+      "value": "normal",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-default-font-style)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-top-level-font-size": {
+      "value": "14px",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-font-size-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-top-level-line-height": {
+      "value": "1.5",
+      "description": "Defined in `.spectrum-SideNav`, `.spectrum-SideNav:lang(ja), .spectrum-SideNav:lang(ko), .spectrum-SideNav:lang(zh)`. <br/>Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink`. <br/>Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-header-font-family": {
+      "value": "var(--spectrum-sans-font-family-stack)",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-heading`. <br/>Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-header-font-weight": {
+      "value": "500",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-heading`. <br/>Defaults to `var(--spectrum-medium-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-header-font-style": {
+      "value": "normal",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-heading`. <br/>Defaults to `var(--spectrum-default-font-style)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-header-font-size": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-SideNav`. <br/>Used by `.spectrum-SideNav-heading`. <br/>Defaults to `var(--spectrum-font-size-75)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-sidenav-header-line-height": {
+      "value": "1.5",
+      "description": "Defined in `.spectrum-SideNav`, `.spectrum-SideNav:lang(ja), .spectrum-SideNav:lang(ko), .spectrum-SideNav:lang(zh)`. <br/>Used by `.spectrum-SideNav-heading`. <br/>Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Used by `--spectrum-sidenav-focus-ring-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-gap": {
+      "value": "2px",
+      "description": "Used by `--spectrum-sidenav-focus-ring-gap`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Used by `--spectrum-sidenav-focus-ring-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-component-height-100": {
+      "value": "32px",
+      "description": "Used by `--spectrum-sidenav-min-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-100": {
+      "value": "4px",
+      "description": "Used by `--spectrum-sidenav-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-100": {
+      "value": "20px",
+      "description": "Used by `--spectrum-sidenav-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-sidenav-icon-spacing`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-text-100": {
+      "value": "12px",
+      "description": "Used by `--spectrum-sidenav-inline-padding`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-workflow-icon-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-sidenav-top-to-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-sidenav-top-to-label`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-100": {
+      "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+      "description": "Used by `--spectrum-sidenav-background-hover`, `--spectrum-sidenav-background-key-focus`, `--spectrum-sidenav-item-background-default-selected`, `--spectrum-sidenav-background-key-focus-selected`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-200": {
+      "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+      "description": "Used by `--spectrum-sidenav-item-background-down`, `--spectrum-sidenav-background-hover-selected`, `--spectrum-sidenav-item-background-down-selected`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-600": {
+      "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))",
+      "description": "Used by `--spectrum-sidenav-header-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-disabled-content-color": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Used by `--spectrum-sidenav-content-disabled-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-sidenav-content-color-default`, `--spectrum-sidenav-content-color-default-selected`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-sidenav-content-color-hover`, `--spectrum-sidenav-content-color-hover-selected`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-down": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-sidenav-content-color-down`, `--spectrum-sidenav-content-color-down-selected`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-key-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-sidenav-content-color-key-focus`, `--spectrum-sidenav-content-color-key-focus-selected`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-sans-font-family-stack": {
+      "description": "Used by `--spectrum-sidenav-text-font-family`, `--spectrum-sidenav-top-level-font-family`, `--spectrum-sidenav-header-font-family`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-regular-font-weight": {
+      "value": "400",
+      "description": "Used by `--spectrum-sidenav-text-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-default-font-style": {
+      "value": "normal",
+      "description": "Used by `--spectrum-sidenav-text-font-style`, `--spectrum-sidenav-top-level-font-style`, `--spectrum-sidenav-header-font-style`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-100": {
+      "value": "14px",
+      "description": "Used by `--spectrum-sidenav-text-font-size`, `--spectrum-sidenav-top-level-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-line-height-100": {
+      "value": "1.3",
+      "description": "Used by `--spectrum-sidenav-text-line-height`, `--spectrum-sidenav-top-level-line-height`, `--spectrum-sidenav-header-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-bold-font-weight": {
+      "value": "700",
+      "description": "Used by `--spectrum-sidenav-top-level-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-medium-font-weight": {
+      "value": "500",
+      "description": "Used by `--spectrum-sidenav-header-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-75": {
+      "value": "12px",
+      "description": "Used by `--spectrum-sidenav-header-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-cjk-line-height-100": {
+      "value": "1.5",
+      "description": "Used by `--spectrum-sidenav-text-line-height`, `--spectrum-sidenav-top-level-line-height`, `--spectrum-sidenav-header-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-animation-duration-100": {
+      "description": "Used by `.spectrum-SideNav-itemLink`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {
+    "highcontrast-sidenav-content-disabled-color": {
+      "value": "var(--mod-sidenav-content-disabled-color, var(--spectrum-sidenav-content-disabled-color))",
+      "description": "Defined in `.spectrum-SideNav-item`. <br/>Used by `.spectrum-SideNav-item.is-disabled .spectrum-SideNav-itemLink`. <br/>Defaults to `var(--mod-sidenav-content-disabled-color, var(--spectrum-sidenav-content-disabled-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-sidenav-item-background-default-selected": {
+      "value": "var(--mod-sidenav-item-background-default-selected, var(--spectrum-sidenav-item-background-default-selected))",
+      "description": "Defined in `.spectrum-SideNav-item`. <br/>Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink`. <br/>Defaults to `var(--mod-sidenav-item-background-default-selected, var(--spectrum-sidenav-item-background-default-selected))`, if not set.",
+      "control": "text"
+    },
+    "highcontrast-sidenav-content-color-default-selected": {
+      "value": "var(--mod-sidenav-content-color-default-selected, var(--spectrum-sidenav-content-color-default-selected))",
+      "description": "Defined in `.spectrum-SideNav-item`. <br/>Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink`. <br/>Defaults to `var(--mod-sidenav-content-color-default-selected, var(--spectrum-sidenav-content-color-default-selected))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-sidenav-item-background-down-selected": {
+      "value": "var(--mod-sidenav-item-background-down-selected, var(--spectrum-sidenav-item-background-down-selected))",
+      "description": "Defined in `.spectrum-SideNav-item`. <br/>Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:active`. <br/>Defaults to `var(--mod-sidenav-item-background-down-selected, var(--spectrum-sidenav-item-background-down-selected))`, if not set.",
+      "control": "text"
+    },
+    "highcontrast-sidenav-background-key-focus-selected": {
+      "value": "var(--mod-sidenav-background-key-focus-selected, var(--spectrum-sidenav-background-key-focus-selected))",
+      "description": "Defined in `.spectrum-SideNav-item`. <br/>Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:focus-visible`. <br/>Defaults to `var(--mod-sidenav-background-key-focus-selected, var(--spectrum-sidenav-background-key-focus-selected))`, if not set.",
+      "control": "text"
+    },
+    "highcontrast-sidenav-content-color-default": {
+      "value": "var(--mod-sidenav-content-color-default, var(--spectrum-sidenav-content-color-default))",
+      "description": "Defined in `.spectrum-SideNav-item`. <br/>Used by `.spectrum-SideNav-itemLink`. <br/>Defaults to `var(--mod-sidenav-content-color-default, var(--spectrum-sidenav-content-color-default))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-sidenav-background-hover-selected": {
+      "value": "var(--mod-sidenav-background-hover-selected, var(--spectrum-sidenav-background-hover-selected))",
+      "description": "Defined in `.spectrum-SideNav-item`. <br/>Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:hover`. <br/>Defaults to `var(--mod-sidenav-background-hover-selected, var(--spectrum-sidenav-background-hover-selected))`, if not set.",
+      "control": "text"
+    },
+    "highcontrast-sidenav-background-hover": {
+      "value": "var(--mod-sidenav-background-hover, var(--spectrum-sidenav-background-hover))",
+      "description": "Defined in `.spectrum-SideNav-item`. <br/>Used by `.spectrum-SideNav-itemLink:hover`. <br/>Defaults to `var(--mod-sidenav-background-hover, var(--spectrum-sidenav-background-hover))`, if not set.",
+      "control": "text"
+    },
+    "highcontrast-sidenav-content-color-hover": {
+      "value": "var(--mod-sidenav-content-color-hover, var(--spectrum-sidenav-content-color-hover))",
+      "description": "Defined in `.spectrum-SideNav-item`. <br/>Used by `.spectrum-SideNav-itemLink:hover`. <br/>Defaults to `var(--mod-sidenav-content-color-hover, var(--spectrum-sidenav-content-color-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-sidenav-item-background-down": {
+      "value": "var(--mod-sidenav-item-background-down, var(--spectrum-sidenav-item-background-down))",
+      "description": "Defined in `.spectrum-SideNav-item`. <br/>Used by `.spectrum-SideNav-itemLink:active`. <br/>Defaults to `var(--mod-sidenav-item-background-down, var(--spectrum-sidenav-item-background-down))`, if not set.",
+      "control": "text"
+    },
+    "highcontrast-sidenav-content-color-down": {
+      "value": "var(--mod-sidenav-content-color-down, var(--spectrum-sidenav-content-color-down))",
+      "description": "Defined in `.spectrum-SideNav-item`. <br/>Used by `.spectrum-SideNav-itemLink:active`. <br/>Defaults to `var(--mod-sidenav-content-color-down, var(--spectrum-sidenav-content-color-down))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-sidenav-focus-ring-color": {
+      "value": "var(--mod-sidenav-focus-ring-color, var(--spectrum-sidenav-focus-ring-color))",
+      "description": "Defined in `.spectrum-SideNav-item`. <br/>Used by `.spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-itemLink:focus-visible`. <br/>Defaults to `var(--mod-sidenav-focus-ring-color, var(--spectrum-sidenav-focus-ring-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-sidenav-background-key-focus": {
+      "value": "var(--mod-sidenav-background-key-focus, var(--spectrum-sidenav-background-key-focus))",
+      "description": "Defined in `.spectrum-SideNav-item`. <br/>Used by `.spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-itemLink:focus-visible`. <br/>Defaults to `var(--mod-sidenav-background-key-focus, var(--spectrum-sidenav-background-key-focus))`, if not set.",
+      "control": "text"
+    },
+    "highcontrast-sidenav-top-level-font-color": {
+      "value": "ButtonText",
+      "description": "Defined in `.spectrum-SideNav-item`. <br/>Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink`. <br/>Defaults to `ButtonText`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/sidenav/stories/sidenav.stories.js b/components/sidenav/stories/sidenav.stories.js
index b5381efd78d..dfe168a25f6 100644
--- a/components/sidenav/stories/sidenav.stories.js
+++ b/components/sidenav/stories/sidenav.stories.js
@@ -1,9 +1,11 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { SideNavGroup } from "./sidenav.test.js";
 import { Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * Side nav lets users navigate the entire content of a product or a section. These can be used for a single level or a multi-level navigation.
  *
@@ -69,6 +71,10 @@ export default {
 		},
 		packageJson,
 		metadata,
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 };
 
diff --git a/components/slider/dist/metadata.json b/components/slider/dist/metadata.json
index 7eaea714d74..fc1a84a5e5e 100644
--- a/components/slider/dist/metadata.json
+++ b/components/slider/dist/metadata.json
@@ -24,8 +24,8 @@
     ".spectrum-Slider--range .spectrum-Slider-value",
     ".spectrum-Slider--sideLabel",
     ".spectrum-Slider--sideLabel .spectrum-Slider-labelContainer",
-    ".spectrum-Slider--sideLabel .spectrum-Slider-labelContainer + .spectrum-Slider-content",
     ".spectrum-Slider--sideLabel .spectrum-Slider-labelContainer .spectrum-Slider-label",
+    ".spectrum-Slider--sideLabel .spectrum-Slider-labelContainer + .spectrum-Slider-content",
     ".spectrum-Slider--sideLabel .spectrum-Slider-value",
     ".spectrum-Slider--sizeL",
     ".spectrum-Slider--sizeS",
@@ -44,12 +44,12 @@
     ".spectrum-Slider-fill--right",
     ".spectrum-Slider-fill:before",
     ".spectrum-Slider-handle",
-    ".spectrum-Slider-handle.is-dragged",
-    ".spectrum-Slider-handle.is-focused",
-    ".spectrum-Slider-handle.is-tophandle",
     ".spectrum-Slider-handle:active",
     ".spectrum-Slider-handle:before",
     ".spectrum-Slider-handle:hover",
+    ".spectrum-Slider-handle.is-dragged",
+    ".spectrum-Slider-handle.is-focused",
+    ".spectrum-Slider-handle.is-tophandle",
     ".spectrum-Slider-handleContainer",
     ".spectrum-Slider-input",
     ".spectrum-Slider-input:focus",
@@ -66,7 +66,6 @@
     ".spectrum-Slider-ramp svg",
     ".spectrum-Slider-tick",
     ".spectrum-Slider-tick .spectrum-Slider-tickLabel",
-    ".spectrum-Slider-tick.spectrum-Slider-tick--track-height-large:after",
     ".spectrum-Slider-tick:after",
     ".spectrum-Slider-tick:first-of-type",
     ".spectrum-Slider-tick:first-of-type .spectrum-Slider-tickLabel",
@@ -74,6 +73,7 @@
     ".spectrum-Slider-tick:last-of-type",
     ".spectrum-Slider-tick:last-of-type .spectrum-Slider-tickLabel",
     ".spectrum-Slider-tick:last-of-type:after",
+    ".spectrum-Slider-tick.spectrum-Slider-tick--track-height-large:after",
     ".spectrum-Slider-ticks",
     ".spectrum-Slider-ticks ~ .spectrum-Slider-handleContainer .spectrum-Slider-handle",
     ".spectrum-Slider-track",
@@ -85,6 +85,19 @@
     ".spectrum-Slider-track:not(:has(~ .spectrum-Slider-fill)):before",
     ".spectrum-Slider-trackContainer",
     ".spectrum-Slider-value",
+    ".spectrum-Slider:dir(rtl)",
+    ".spectrum-Slider:dir(rtl) .spectrum-Slider-handle:before",
+    ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:active",
+    ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:focus-within",
+    ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:hover",
+    ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls.is-focused",
+    ".spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus",
+    ".spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus-visible",
+    ".spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus-visible:before",
+    ".spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus:before",
+    ".spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle.is-focused",
+    ".spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle.is-focused:before",
+    ".spectrum-Slider:not(.spectrum-Slider--sideLabel) .spectrum-Slider-labelContainer + .spectrum-Slider-controls:has(.spectrum-Slider-ramp)",
     ".spectrum-Slider.is-disabled",
     ".spectrum-Slider.is-disabled .spectrum-Slider-controls",
     ".spectrum-Slider.is-disabled .spectrum-Slider-fill:before",
@@ -99,244 +112,1193 @@
     ".spectrum-Slider.is-disabled .spectrum-Slider-track:before",
     ".spectrum-Slider.is-disabled.spectrum-Slider--filled .spectrum-Slider-track:first-child:before",
     ".spectrum-Slider.is-disabled.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before",
-    ".spectrum-Slider.spectrum-Slider--precise:not(.is-disabled) .spectrum-Slider-handle.is-focused:before",
     ".spectrum-Slider.spectrum-Slider--precise:not(.is-disabled) .spectrum-Slider-handle:focus-visible:before",
     ".spectrum-Slider.spectrum-Slider--precise:not(.is-disabled) .spectrum-Slider-handle:focus:before",
-    ".spectrum-Slider.spectrum-Slider--ramp .spectrum-Slider-handle",
-    ".spectrum-Slider:dir(rtl)",
-    ".spectrum-Slider:dir(rtl) .spectrum-Slider-handle:before",
-    ".spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle.is-focused",
-    ".spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle.is-focused:before",
-    ".spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus",
-    ".spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus-visible",
-    ".spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus-visible:before",
-    ".spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus:before",
-    ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls.is-focused",
-    ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:active",
-    ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:focus-within",
-    ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:hover",
-    ".spectrum-Slider:not(.spectrum-Slider--sideLabel) .spectrum-Slider-labelContainer + .spectrum-Slider-controls:has(.spectrum-Slider-ramp)"
-  ],
-  "modifiers": [
-    "--mod-animation-duration-100",
-    "--mod-focus-indicator-gap",
-    "--mod-font-size-75",
-    "--mod-line-height-100",
-    "--mod-slider-cjk-line-height",
-    "--mod-slider-control-height",
-    "--mod-slider-control-to-side-field-label",
-    "--mod-slider-control-to-text-field",
-    "--mod-slider-controls-margin",
-    "--mod-slider-disabled-border-color",
-    "--mod-slider-editable-field-inline-size",
-    "--mod-slider-emphasized-tick-mark-color",
-    "--mod-slider-emphasized-track-fill-color",
-    "--mod-slider-font-size",
-    "--mod-slider-handle-background-color",
-    "--mod-slider-handle-background-color-disabled",
-    "--mod-slider-handle-border-color",
-    "--mod-slider-handle-border-color-disabled",
-    "--mod-slider-handle-border-color-down",
-    "--mod-slider-handle-border-color-hover",
-    "--mod-slider-handle-border-color-key-focus",
-    "--mod-slider-handle-border-radius",
-    "--mod-slider-handle-border-width",
-    "--mod-slider-handle-disabled-background-color",
-    "--mod-slider-handle-focus-ring-color-key-focus",
-    "--mod-slider-handle-size",
-    "--mod-slider-inline-size",
-    "--mod-slider-input-left",
-    "--mod-slider-input-top-size",
-    "--mod-slider-label-font-family",
-    "--mod-slider-label-font-style",
-    "--mod-slider-label-font-weight",
-    "--mod-slider-label-margin-start",
-    "--mod-slider-label-text-color",
-    "--mod-slider-label-text-color-disabled",
-    "--mod-slider-ramp-track-color",
-    "--mod-slider-ramp-track-color-disabled",
-    "--mod-slider-ramp-track-fill-color",
-    "--mod-slider-ramp-track-height",
-    "--mod-slider-range-track-reset",
-    "--mod-slider-tick-label-color",
-    "--mod-slider-tick-mark-border-radius",
-    "--mod-slider-tick-mark-color",
-    "--mod-slider-tick-mark-color-filled-track",
-    "--mod-slider-tick-mark-height",
-    "--mod-slider-tick-mark-width",
-    "--mod-slider-ticks-handle-background-color",
-    "--mod-slider-track-color",
-    "--mod-slider-track-color-disabled",
-    "--mod-slider-track-corner-radius",
-    "--mod-slider-track-fill-color",
-    "--mod-slider-track-fill-color-disabled",
-    "--mod-slider-track-fill-thickness",
-    "--mod-slider-track-height-medium",
-    "--mod-slider-track-thickness",
-    "--mod-slider-value-inline-size"
-  ],
-  "component": [
-    "--spectrum-slider-cjk-line-height",
-    "--spectrum-slider-control-height",
-    "--spectrum-slider-control-to-field-label",
-    "--spectrum-slider-control-to-field-label-editable-extra-large",
-    "--spectrum-slider-control-to-field-label-editable-large",
-    "--spectrum-slider-control-to-field-label-editable-medium",
-    "--spectrum-slider-control-to-field-label-editable-small",
-    "--spectrum-slider-control-to-field-label-extra-large",
-    "--spectrum-slider-control-to-field-label-large",
-    "--spectrum-slider-control-to-field-label-medium",
-    "--spectrum-slider-control-to-field-label-side-extra-large",
-    "--spectrum-slider-control-to-field-label-side-large",
-    "--spectrum-slider-control-to-field-label-side-medium",
-    "--spectrum-slider-control-to-field-label-side-small",
-    "--spectrum-slider-control-to-field-label-small",
-    "--spectrum-slider-control-to-side-field-label",
-    "--spectrum-slider-control-to-text-field",
-    "--spectrum-slider-control-to-text-field-extra-large",
-    "--spectrum-slider-control-to-text-field-large",
-    "--spectrum-slider-control-to-text-field-medium",
-    "--spectrum-slider-control-to-text-field-small",
-    "--spectrum-slider-controls-margin",
-    "--spectrum-slider-downstate-perspective",
-    "--spectrum-slider-editable-control-to-field-label",
-    "--spectrum-slider-editable-field-inline-size-extra-large",
-    "--spectrum-slider-editable-field-inline-size-large",
-    "--spectrum-slider-editable-field-inline-size-medium",
-    "--spectrum-slider-editable-field-inline-size-small",
-    "--spectrum-slider-emphasized-tick-mark-color",
-    "--spectrum-slider-emphasized-track-fill-color",
-    "--spectrum-slider-focus-indicator-gap",
-    "--spectrum-slider-font-size",
-    "--spectrum-slider-handle-background-color",
-    "--spectrum-slider-handle-background-color-disabled",
-    "--spectrum-slider-handle-border-color",
-    "--spectrum-slider-handle-border-color-disabled",
-    "--spectrum-slider-handle-border-color-down",
-    "--spectrum-slider-handle-border-color-hover",
-    "--spectrum-slider-handle-border-color-key-focus",
-    "--spectrum-slider-handle-border-radius",
-    "--spectrum-slider-handle-border-width",
-    "--spectrum-slider-handle-extra-large",
-    "--spectrum-slider-handle-focus-ring-color-key-focus",
-    "--spectrum-slider-handle-gap",
-    "--spectrum-slider-handle-large",
-    "--spectrum-slider-handle-margin-left",
-    "--spectrum-slider-handle-medium",
-    "--spectrum-slider-handle-size",
-    "--spectrum-slider-handle-small",
-    "--spectrum-slider-inline-size",
-    "--spectrum-slider-input-left",
-    "--spectrum-slider-input-top-size",
-    "--spectrum-slider-label-font-family",
-    "--spectrum-slider-label-font-style",
-    "--spectrum-slider-label-font-weight",
-    "--spectrum-slider-label-margin-start",
-    "--spectrum-slider-label-text-color",
-    "--spectrum-slider-label-text-color-disabled",
-    "--spectrum-slider-precision-handle-height",
-    "--spectrum-slider-precision-handle-height-extra-large",
-    "--spectrum-slider-precision-handle-height-large",
-    "--spectrum-slider-precision-handle-height-medium",
-    "--spectrum-slider-precision-handle-height-small",
-    "--spectrum-slider-precision-handle-width",
-    "--spectrum-slider-ramp-track-color-disabled",
-    "--spectrum-slider-ramp-track-height",
-    "--spectrum-slider-range-track-reset",
-    "--spectrum-slider-tick-label-color",
-    "--spectrum-slider-tick-mark-border-radius",
-    "--spectrum-slider-tick-mark-color",
-    "--spectrum-slider-tick-mark-color-filled-track",
-    "--spectrum-slider-tick-mark-height",
-    "--spectrum-slider-tick-mark-width",
-    "--spectrum-slider-ticks-handle-background-color",
-    "--spectrum-slider-track-color",
-    "--spectrum-slider-track-color-disabled",
-    "--spectrum-slider-track-corner-radius",
-    "--spectrum-slider-track-fill-color",
-    "--spectrum-slider-track-fill-color-disabled",
-    "--spectrum-slider-track-fill-thickness",
-    "--spectrum-slider-track-height-large",
-    "--spectrum-slider-track-height-medium",
-    "--spectrum-slider-value-inline-size"
-  ],
-  "global": [
-    "--spectrum-accent-color-1000",
-    "--spectrum-accent-content-color-default",
-    "--spectrum-animation-duration-100",
-    "--spectrum-border-width-200",
-    "--spectrum-cjk-line-height-100",
-    "--spectrum-component-bottom-to-text-100",
-    "--spectrum-component-bottom-to-text-200",
-    "--spectrum-component-bottom-to-text-300",
-    "--spectrum-component-bottom-to-text-75",
-    "--spectrum-component-height-100",
-    "--spectrum-component-height-200",
-    "--spectrum-component-height-300",
-    "--spectrum-component-height-75",
-    "--spectrum-component-size-difference-down",
-    "--spectrum-component-size-minimum-perspective-down",
-    "--spectrum-component-top-to-text-100",
-    "--spectrum-component-top-to-text-200",
-    "--spectrum-component-top-to-text-300",
-    "--spectrum-component-top-to-text-75",
-    "--spectrum-corner-radius-500",
-    "--spectrum-default-font-style",
-    "--spectrum-disabled-background-color",
-    "--spectrum-disabled-border-color",
-    "--spectrum-disabled-content-color",
-    "--spectrum-field-default-width-extra-large",
-    "--spectrum-field-default-width-large",
-    "--spectrum-field-default-width-medium",
-    "--spectrum-field-default-width-small",
-    "--spectrum-focus-indicator-color",
-    "--spectrum-focus-indicator-gap",
-    "--spectrum-focus-indicator-thickness",
-    "--spectrum-font-size-100",
-    "--spectrum-font-size-200",
-    "--spectrum-font-size-300",
-    "--spectrum-font-size-75",
-    "--spectrum-gray-25",
-    "--spectrum-gray-400",
-    "--spectrum-gray-700",
-    "--spectrum-gray-75",
-    "--spectrum-gray-800",
-    "--spectrum-gray-900",
-    "--spectrum-line-height-100",
-    "--spectrum-logical-rotation",
-    "--spectrum-neutral-content-color-default",
-    "--spectrum-neutral-subdued-content-color-default",
-    "--spectrum-regular-font-weight",
-    "--spectrum-sans-font-family-stack",
-    "--spectrum-spacing-300",
-    "--spectrum-text-to-visual-75",
-    "--spectrum-track-color"
-  ],
-  "passthroughs": [
-    "--mod-fieldlabel-bottom-to-text",
-    "--mod-fieldlabel-top-to-text",
-    "--mod-textfield-width"
+    ".spectrum-Slider.spectrum-Slider--precise:not(.is-disabled) .spectrum-Slider-handle.is-focused:before",
+    ".spectrum-Slider.spectrum-Slider--ramp .spectrum-Slider-handle"
   ],
-  "high-contrast": [
-    "--highcontrast-slider-filled-track-fill-color",
-    "--highcontrast-slider-handle-background-color",
-    "--highcontrast-slider-handle-border-color",
-    "--highcontrast-slider-handle-border-color-disabled",
-    "--highcontrast-slider-handle-border-color-down",
-    "--highcontrast-slider-handle-border-color-hover",
-    "--highcontrast-slider-handle-border-color-key-focus",
-    "--highcontrast-slider-handle-disabled-background-color",
-    "--highcontrast-slider-handle-focus-ring-color-key-focus",
-    "--highcontrast-slider-label-text-color",
-    "--highcontrast-slider-label-text-color-disabled",
-    "--highcontrast-slider-ramp-track-color",
-    "--highcontrast-slider-ramp-track-color-disabled",
-    "--highcontrast-slider-tick-mark-color",
-    "--highcontrast-slider-tick-mark-color-disabled",
-    "--highcontrast-slider-tick-mark-color-filled-track",
-    "--highcontrast-slider-track-color",
-    "--highcontrast-slider-track-color-disabled",
-    "--highcontrast-slider-track-color-static",
-    "--highcontrast-slider-track-fill-color-disabled"
-  ]
+  "modifiers": {
+    "mod-slider-editable-field-inline-size": {
+      "description": "Used by `--mod-textfield-width`. <br/>Defaults to `var(--spectrum-slider-editable-field-inline-size-medium)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-slider-inline-size": {
+      "description": "Used by `.spectrum-Slider`. <br/>Defaults to `var(--spectrum-slider-inline-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-slider-ramp-track-height": {
+      "description": "Used by `.spectrum-Slider:not(.spectrum-Slider--sideLabel) .spectrum-Slider-labelContainer + .spectrum-Slider-controls:has(.spectrum-Slider-ramp)`, `.spectrum-Slider-ramp`. <br/>Defaults to `var(--spectrum-slider-ramp-track-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-slider-control-height": {
+      "description": "Used by `.spectrum-Slider--precise .spectrum-Slider-handle`, `.spectrum-Slider-controls`, `.spectrum-Slider--tick`, `.spectrum-Slider-fill, .spectrum-Slider-track`, `.spectrum-Slider-handle`, `.spectrum-Slider-trackContainer`. <br/>Defaults to `var(--spectrum-slider-control-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-slider-control-to-side-field-label": {
+      "description": "Used by `.spectrum-Slider--sideLabel .spectrum-Slider-labelContainer .spectrum-Slider-label`. <br/>Defaults to `var(--spectrum-slider-control-to-side-field-label)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-slider-control-to-text-field": {
+      "description": "Used by `.spectrum-Slider--sideLabel .spectrum-Slider-value`, `.spectrum-Slider-content--editable`. <br/>Defaults to `var(--spectrum-slider-control-to-text-field)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-slider-value-inline-size": {
+      "description": "Used by `.spectrum-Slider--sideLabel .spectrum-Slider-value`. <br/>Defaults to `var(--spectrum-slider-value-inline-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-slider-track-fill-thickness": {
+      "description": "Used by `.spectrum-Slider-fill, .spectrum-Slider-track`. <br/>Defaults to `var(--spectrum-slider-track-fill-thickness)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-slider-track-corner-radius": {
+      "description": "Used by `.spectrum-Slider-track:first-of-type:before`, `.spectrum-Slider-track:last-of-type:before`, `.spectrum-Slider--range .spectrum-Slider-track:first-of-type:before`, `.spectrum-Slider--range .spectrum-Slider-track:last-of-type:before`, `.spectrum-Slider-track ~ .spectrum-Slider-track:before`, `.spectrum-Slider-fill:before`. <br/>Defaults to `var(--spectrum-slider-track-corner-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-slider-range-track-reset": {
+      "description": "Used by `.spectrum-Slider-track ~ .spectrum-Slider-track`, `.spectrum-Slider--range .spectrum-Slider-track ~ .spectrum-Slider-track`, `.spectrum-Slider--range .spectrum-Slider-track:first-of-type`, `.spectrum-Slider--range .spectrum-Slider-track:last-of-type`. <br/>Defaults to `var(--spectrum-slider-range-track-reset)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-slider-controls-margin": {
+      "description": "Used by `.spectrum-Slider-fill--right`. <br/>Defaults to `var(--spectrum-slider-controls-margin)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-slider-handle-border-color": {
+      "description": "Used by `.spectrum-Slider-handle`. <br/>Defaults to `var(--spectrum-slider-handle-border-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-slider-handle-background-color": {
+      "description": "Used by `.spectrum-Slider-handle`. <br/>Defaults to `var(--spectrum-slider-handle-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-slider-handle-size": {
+      "description": "Used by `.spectrum-Slider-handle`, `.spectrum-Slider-handle:before`, `.spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle.is-focused:before, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus-visible:before, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus:before`, `.spectrum-Slider-input`. <br/>Defaults to `var(--spectrum-slider-handle-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-slider-handle-border-width": {
+      "description": "Used by `.spectrum-Slider-handle`. <br/>Defaults to `var(--spectrum-slider-handle-border-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-slider-handle-border-radius": {
+      "description": "Used by `.spectrum-Slider-handle`. <br/>Defaults to `var(--spectrum-slider-handle-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-animation-duration-100": {
+      "description": "Used by `.spectrum-Slider-handle`, `.spectrum-Slider-handle:before`. <br/>Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-slider-handle-border-color-down": {
+      "description": "Used by `.spectrum-Slider-handle.is-dragged, .spectrum-Slider-handle:active`. <br/>Defaults to `var(--spectrum-slider-handle-border-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-slider-handle-border-color-key-focus": {
+      "description": "Used by `.spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle.is-focused, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus-visible`. <br/>Defaults to `var(--spectrum-slider-handle-border-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-slider-handle-focus-ring-color-key-focus": {
+      "description": "Used by `.spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle.is-focused:before, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus-visible:before, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus:before`. <br/>Defaults to `var(--spectrum-slider-handle-focus-ring-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-focus-indicator-gap": {
+      "description": "Used by `.spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle.is-focused:before, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus-visible:before, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus:before`. <br/>Defaults to `var(--spectrum-slider-focus-indicator-gap)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-slider-input-top-size": {
+      "description": "Used by `.spectrum-Slider-input`. <br/>Defaults to `var(--spectrum-slider-input-top-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-slider-input-left": {
+      "description": "Used by `.spectrum-Slider-input`. <br/>Defaults to `var(--spectrum-slider-input-left)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-slider-font-size": {
+      "description": "Used by `.spectrum-Slider-labelContainer`, `.spectrum-Slider-label`. <br/>Defaults to `var(--spectrum-slider-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-line-height-100": {
+      "description": "Used by `.spectrum-Slider-labelContainer`, `.spectrum-Slider-tick .spectrum-Slider-tickLabel`. <br/>Defaults to `var(--spectrum-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-slider-label-font-weight": {
+      "description": "Used by `.spectrum-Slider-labelContainer`. <br/>Defaults to `var(--spectrum-slider-label-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-slider-label-font-style": {
+      "description": "Used by `.spectrum-Slider-labelContainer`. <br/>Defaults to `var(--spectrum-slider-label-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-slider-label-font-family": {
+      "description": "Used by `.spectrum-Slider-labelContainer`. <br/>Defaults to `var(--spectrum-slider-label-font-family)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-slider-cjk-line-height": {
+      "description": "Used by `.spectrum-Slider-labelContainer:lang(ja), .spectrum-Slider-labelContainer:lang(ko), .spectrum-Slider-labelContainer:lang(zh)`. <br/>Defaults to `var(--spectrum-slider-cjk-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-slider-label-margin-start": {
+      "description": "Used by `.spectrum-Slider-value`. <br/>Defaults to `var(--spectrum-slider-label-margin-start)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-slider-tick-mark-height": {
+      "description": "Used by `.spectrum-Slider--tick .spectrum-Slider-controls`, `.spectrum-Slider--tick .spectrum-Slider-tickLabel`, `.spectrum-Slider-tick`, `.spectrum-Slider-tick:after`. <br/>Defaults to `var(--spectrum-slider-tick-mark-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-slider-track-height-medium": {
+      "description": "Used by `.spectrum-Slider--tick .spectrum-Slider-controls`. <br/>Defaults to `var(--spectrum-slider-track-height-medium)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-slider-ticks-handle-background-color": {
+      "description": "Used by `.spectrum-Slider-ticks ~ .spectrum-Slider-handleContainer .spectrum-Slider-handle`. <br/>Defaults to `var(--spectrum-slider-ticks-handle-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-slider-track-thickness": {
+      "description": "Used by `.spectrum-Slider-tick`. <br/>Defaults to `var(--spectrum-slider-control-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-slider-tick-mark-width": {
+      "description": "Used by `.spectrum-Slider-tick, .spectrum-Slider-tick:after`, `.spectrum-Slider-tick:after`, `.spectrum-Slider-tick:first-of-type`, `.spectrum-Slider-tick:last-of-type`. <br/>Defaults to `var(--spectrum-slider-tick-mark-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-slider-tick-mark-border-radius": {
+      "description": "Used by `.spectrum-Slider-tick:after`. <br/>Defaults to `var(--spectrum-slider-tick-mark-border-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-font-size-75": {
+      "description": "Used by `.spectrum-Slider-tick .spectrum-Slider-tickLabel`. <br/>Defaults to `var(--spectrum-font-size-75)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-slider-tick-label-color": {
+      "description": "Used by `.spectrum-Slider-tick .spectrum-Slider-tickLabel`. <br/>Defaults to `var(--spectrum-slider-tick-label-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-slider-track-color": {
+      "description": "Used by `.spectrum-Slider-track:before`, `.spectrum-Slider-track:not(:has(~ .spectrum-Slider-fill)):before`. <br/>Defaults to `var(--spectrum-slider-track-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-slider-label-text-color": {
+      "description": "Used by `.spectrum-Slider-labelContainer`. <br/>Defaults to `var(--spectrum-slider-label-text-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-slider-track-fill-color": {
+      "description": "Used by `.spectrum-Slider--filled .spectrum-Slider-track:first-child:before, .spectrum-Slider-fill:before`, `.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before`, `.spectrum-Slider--range .spectrum-Slider-track:first-of-type:before`. <br/>Defaults to `var(--spectrum-slider-track-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-slider-emphasized-track-fill-color": {
+      "description": "Used by `.spectrum-Slider--emphasized .spectrum-Slider-fill:before, .spectrum-Slider--emphasized .spectrum-Slider-track:first-child:before, .spectrum-Slider--emphasized.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before`. <br/>Defaults to `var(--spectrum-slider-emphasized-track-fill-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-slider-ramp-track-color": {
+      "description": "Used by `.spectrum-Slider-ramp .spectrum-Slider-ramp-track`. <br/>Defaults to `var(--spectrum-slider-track-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-slider-ramp-track-fill-color": {
+      "description": "Used by `.spectrum-Slider-ramp .spectrum-Slider-ramp-track-fill`. <br/>Defaults to `var(--spectrum-slider-track-fill-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-slider-emphasized-tick-mark-color": {
+      "description": "Used by `.spectrum-Slider--emphasized .spectrum-Slider-tick:nth-child(-n + 4):after`. <br/>Defaults to `var(--spectrum-slider-emphasized-tick-mark-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-slider-tick-mark-color-filled-track": {
+      "description": "Used by `.spectrum-Slider--filled:not(.spectrum-Slider--range, .is-disabled, .spectrum-Slider--emphasized) .spectrum-Slider-tick:nth-child(-n + 4):after, .spectrum-Slider--offset:not(.spectrum-Slider--range, .is-disabled, .spectrum-Slider--emphasized) .spectrum-Slider-tick:nth-child(-n + 4):after, .spectrum-Slider--range .spectrum-Slider-tick:nth-child(3):after, .spectrum-Slider--range .spectrum-Slider-tick:nth-child(4):after, .spectrum-Slider--range .spectrum-Slider-tick:nth-child(5):after`. <br/>Defaults to `var(--spectrum-slider-tick-mark-color-filled-track)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-slider-tick-mark-color": {
+      "description": "Used by `.spectrum-Slider-tick:after, .spectrum-Slider.is-disabled .spectrum-Slider-tick:after`, `.spectrum-Slider.is-disabled .spectrum-Slider-tick:after`. <br/>Defaults to `var(--spectrum-slider-tick-mark-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-slider-label-text-color-disabled": {
+      "description": "Used by `.spectrum-Slider.is-disabled .spectrum-Slider-labelContainer, .spectrum-Slider.is-disabled .spectrum-Slider-tickLabel`. <br/>Defaults to `var(--spectrum-slider-label-text-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-slider-handle-border-color-disabled": {
+      "description": "Used by `.spectrum-Slider.is-disabled .spectrum-Slider-handle`. <br/>Defaults to `var(--spectrum-slider-handle-border-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-slider-handle-disabled-background-color": {
+      "description": "Used by `.spectrum-Slider.is-disabled .spectrum-Slider-handle`. <br/>Defaults to `var(--spectrum-slider-handle-background-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-slider-disabled-border-color": {
+      "description": "Used by `.spectrum-Slider.is-disabled .spectrum-Slider-handle:active`, `.spectrum-Slider.is-disabled .spectrum-Slider-handle:hover`. <br/>Defaults to `var(--spectrum-slider-handle-border-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-slider-handle-background-color-disabled": {
+      "description": "Used by `.spectrum-Slider.is-disabled .spectrum-Slider-handle:active`, `.spectrum-Slider.is-disabled .spectrum-Slider-handle:hover`. <br/>Defaults to `var(--spectrum-slider-handle-background-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-slider-handle-border-color-hover": {
+      "description": "Used by `.spectrum-Slider-handle:hover`. <br/>Defaults to `var(--spectrum-slider-handle-border-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-slider-track-color-disabled": {
+      "description": "Used by `.spectrum-Slider.is-disabled .spectrum-Slider-track:before`, `.spectrum-Slider.is-disabled.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before`. <br/>Defaults to `var(--spectrum-slider-track-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-slider-track-fill-color-disabled": {
+      "description": "Used by `.spectrum-Slider.is-disabled .spectrum-Slider-fill:before, .spectrum-Slider.is-disabled.spectrum-Slider--filled .spectrum-Slider-track:first-child:before`. <br/>Defaults to `var(--spectrum-slider-track-fill-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-slider-ramp-track-color-disabled": {
+      "description": "Used by `.spectrum-Slider.is-disabled .spectrum-Slider-ramp path`. <br/>Defaults to `var(--spectrum-slider-ramp-track-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-slider-font-size": {
+      "value": "18px",
+      "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider--sizeS`, `.spectrum-Slider--sizeL`, `.spectrum-Slider--sizeXL`. <br/>Used by `.spectrum-Slider-labelContainer`, `.spectrum-Slider-label`. <br/>Defaults to `var(--spectrum-font-size-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-handle-size": {
+      "value": "24px",
+      "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider--sizeS`, `.spectrum-Slider--sizeL`, `.spectrum-Slider--sizeXL`. <br/>Used by `--spectrum-slider-handle-margin-left`, `--spectrum-slider-controls-margin`, `--spectrum-slider-input-top-size`, `--spectrum-slider-handle-border-radius`, `.spectrum-Slider-handle`, `.spectrum-Slider-handle:before`, `.spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle.is-focused:before, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus-visible:before, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus:before`, `.spectrum-Slider-input`, `.spectrum-Slider-handleContainer, .spectrum-Slider-trackContainer`. <br/>Defaults to `var(--spectrum-slider-handle-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-handle-medium": {
+      "value": "20px",
+      "description": "Used by `--spectrum-slider-handle-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-control-height": {
+      "value": "48px",
+      "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider--sizeS`, `.spectrum-Slider--sizeL`, `.spectrum-Slider--sizeXL`. <br/>Used by `.spectrum-Slider--precise .spectrum-Slider-handle`, `.spectrum-Slider-controls`, `.spectrum-Slider--tick`, `.spectrum-Slider-fill, .spectrum-Slider-track`, `.spectrum-Slider-handle`, `.spectrum-Slider-tick`, `.spectrum-Slider-trackContainer`. <br/>Defaults to `var(--spectrum-component-height-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-control-to-field-label": {
+      "value": "-20px",
+      "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider--sizeS`, `.spectrum-Slider--sizeL`, `.spectrum-Slider--sizeXL`. <br/>Used by `.spectrum-Slider-labelContainer + .spectrum-Slider-content`. <br/>Defaults to `var(--spectrum-slider-control-to-field-label-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-control-to-field-label-medium": {
+      "value": "-12px",
+      "description": "Used by `--spectrum-slider-control-to-field-label`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-control-to-side-field-label": {
+      "value": "24px",
+      "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider--sizeS`, `.spectrum-Slider--sizeL`, `.spectrum-Slider--sizeXL`. <br/>Used by `.spectrum-Slider--sideLabel .spectrum-Slider-labelContainer .spectrum-Slider-label`. <br/>Defaults to `var(--spectrum-slider-control-to-field-label-side-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-control-to-field-label-side-medium": {
+      "value": "16px",
+      "description": "Used by `--spectrum-slider-control-to-side-field-label`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-inline-size": {
+      "value": "240px",
+      "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider--sizeS`, `.spectrum-Slider--sizeL`, `.spectrum-Slider--sizeXL`. <br/>Used by `.spectrum-Slider`. <br/>Defaults to `var(--spectrum-field-default-width-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-label-font-weight": {
+      "value": "400",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider-labelContainer`. <br/>Defaults to `var(--spectrum-regular-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-label-font-style": {
+      "value": "normal",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider-labelContainer`. <br/>Defaults to `var(--spectrum-default-font-style)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-label-font-family": {
+      "value": "var(--spectrum-sans-font-family-stack)",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider-labelContainer`. <br/>Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-value-inline-size": {
+      "value": "22px",
+      "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider--sizeL`, `.spectrum-Slider--sizeXL`. <br/>Used by `.spectrum-Slider--sideLabel .spectrum-Slider-value`. <br/>Defaults to `22px`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-cjk-line-height": {
+      "value": "1.5",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider-labelContainer:lang(ja), .spectrum-Slider-labelContainer:lang(ko), .spectrum-Slider-labelContainer:lang(zh)`. <br/>Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-label-margin-start": {
+      "value": "16px",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider-value`. <br/>Defaults to `var(--spectrum-spacing-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-handle-border-width": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider--precise .spectrum-Slider-handle`, `.spectrum-Slider-handle`. <br/>Defaults to `var(--spectrum-border-width-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-handle-margin-left": {
+      "value": "calc(var(--spectrum-slider-handle-size) / -2)",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `--spectrum-slider-input-left`. <br/>Defaults to `calc(var(--spectrum-slider-handle-size) / -2)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-controls-margin": {
+      "value": "calc(var(--spectrum-slider-handle-size) / 2)",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider-fill--right`. <br/>Defaults to `calc(var(--spectrum-slider-handle-size) / 2)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-input-top-size": {
+      "value": "calc(var(--spectrum-slider-handle-size) / -2 / 4)",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider-input`. <br/>Defaults to `calc(var(--spectrum-slider-handle-size) / -2 / 4)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-track-fill-thickness": {
+      "value": "16px",
+      "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider--track-height-large .spectrum-Slider-fill, .spectrum-Slider--track-height-large .spectrum-Slider-track`. <br/>Used by `.spectrum-Slider-fill, .spectrum-Slider-track`. <br/>Defaults to `var(--spectrum-slider-track-height-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-track-height-medium": {
+      "value": "4px",
+      "description": "Used by `--spectrum-slider-track-fill-thickness`, `.spectrum-Slider--tick .spectrum-Slider-controls`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-tick-mark-width": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider-tick, .spectrum-Slider-tick:after`, `.spectrum-Slider-tick:after`, `.spectrum-Slider-tick:first-of-type`, `.spectrum-Slider-tick:last-of-type`. <br/>Defaults to `var(--spectrum-border-width-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-tick-mark-border-radius": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider-tick:after`. <br/>Defaults to `2px`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-focus-indicator-gap": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle.is-focused:before, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus-visible:before, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus:before`, `.spectrum-Slider.spectrum-Slider--precise:not(.is-disabled) .spectrum-Slider-handle.is-focused:before, .spectrum-Slider.spectrum-Slider--precise:not(.is-disabled) .spectrum-Slider-handle:focus-visible:before, .spectrum-Slider.spectrum-Slider--precise:not(.is-disabled) .spectrum-Slider-handle:focus:before`. <br/>Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-downstate-perspective": {
+      "value": "24px",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider-handle.is-dragged, .spectrum-Slider-handle:active`. <br/>Defaults to `var(--spectrum-component-size-minimum-perspective-down)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-track-color": {
+      "value": "var(--spectrum-gray-300)",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider-track:before`, `.spectrum-Slider-track:not(:has(~ .spectrum-Slider-fill)):before`, `.spectrum-Slider-ramp .spectrum-Slider-ramp-track`, `.spectrum-Slider--range .spectrum-Slider-track:first-of-type:before`. <br/>Defaults to `var(--spectrum-track-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-slider-track-fill-color": {
+      "value": "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider--filled .spectrum-Slider-track:first-child:before, .spectrum-Slider-fill:before`, `.spectrum-Slider-ramp .spectrum-Slider-ramp-track-fill`, `.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before`. <br/>Defaults to `var(--spectrum-gray-700)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-slider-track-color-disabled": {
+      "value": "var(--spectrum-gray-100)",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `--spectrum-slider-ramp-track-color-disabled`, `.spectrum-Slider.is-disabled .spectrum-Slider-track:before`, `.spectrum-Slider.is-disabled.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before`. <br/>Defaults to `var(--spectrum-disabled-background-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-slider-ramp-track-color-disabled": {
+      "value": "var(--spectrum-slider-track-color-disabled)",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider.is-disabled .spectrum-Slider-ramp path`. <br/>Defaults to `var(--spectrum-slider-track-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-slider-track-fill-color-disabled": {
+      "value": "var(--spectrum-gray-100)",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider.is-disabled .spectrum-Slider-fill:before, .spectrum-Slider.is-disabled.spectrum-Slider--filled .spectrum-Slider-track:first-child:before`. <br/>Defaults to `var(--spectrum-disabled-background-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-slider-handle-border-color-disabled": {
+      "value": "var(--spectrum-gray-300)",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider.is-disabled .spectrum-Slider-handle`, `.spectrum-Slider.is-disabled .spectrum-Slider-handle:active`, `.spectrum-Slider.is-disabled .spectrum-Slider-handle:hover`. <br/>Defaults to `var(--spectrum-disabled-border-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-slider-label-text-color": {
+      "value": "var(--spectrum-gray-700)",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider-labelContainer`. <br/>Defaults to `var(--spectrum-neutral-subdued-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-slider-tick-label-color": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider-tick .spectrum-Slider-tickLabel`. <br/>Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-slider-label-text-color-disabled": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider.is-disabled .spectrum-Slider-labelContainer, .spectrum-Slider.is-disabled .spectrum-Slider-tickLabel`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-slider-handle-background-color": {
+      "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `--spectrum-slider-handle-background-color-disabled`, `.spectrum-Slider-handle`. <br/>Defaults to `var(--spectrum-gray-25)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-slider-handle-background-color-disabled": {
+      "value": "var(--spectrum-slider-handle-background-color)",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider.is-disabled .spectrum-Slider-handle`, `.spectrum-Slider.is-disabled .spectrum-Slider-handle:active`, `.spectrum-Slider.is-disabled .spectrum-Slider-handle:hover`. <br/>Defaults to `var(--spectrum-slider-handle-background-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-slider-ticks-handle-background-color": {
+      "value": "light-dark(rgb(243, 243, 243), rgb(34, 34, 34))",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider-ticks ~ .spectrum-Slider-handleContainer .spectrum-Slider-handle`. <br/>Defaults to `var(--spectrum-gray-75)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-slider-handle-border-color": {
+      "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider-handle`. <br/>Defaults to `var(--spectrum-gray-800)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-slider-tick-mark-color": {
+      "value": "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider-tick:after, .spectrum-Slider.is-disabled .spectrum-Slider-tick:after`, `.spectrum-Slider.is-disabled .spectrum-Slider-tick:after`. <br/>Defaults to `var(--spectrum-gray-400)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-slider-tick-mark-color-filled-track": {
+      "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider--filled:not(.spectrum-Slider--range, .is-disabled, .spectrum-Slider--emphasized) .spectrum-Slider-tick:nth-child(-n + 4):after, .spectrum-Slider--offset:not(.spectrum-Slider--range, .is-disabled, .spectrum-Slider--emphasized) .spectrum-Slider-tick:nth-child(-n + 4):after, .spectrum-Slider--range .spectrum-Slider-tick:nth-child(3):after, .spectrum-Slider--range .spectrum-Slider-tick:nth-child(4):after, .spectrum-Slider--range .spectrum-Slider-tick:nth-child(5):after`. <br/>Defaults to `var(--spectrum-gray-800)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-slider-emphasized-tick-mark-color": {
+      "value": "var(--spectrum-blue-1000)",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider--emphasized .spectrum-Slider-tick:nth-child(-n + 4):after`. <br/>Defaults to `var(--spectrum-accent-color-1000)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-slider-emphasized-track-fill-color": {
+      "value": "var(--spectrum-accent-color-900)",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider--emphasized .spectrum-Slider-fill:before, .spectrum-Slider--emphasized .spectrum-Slider-track:first-child:before, .spectrum-Slider--emphasized.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before`, `.spectrum-Slider--emphasized .spectrum-Slider-ramp .spectrum-Slider-ramp-track-fill`. <br/>Defaults to `var(--spectrum-accent-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-slider-handle-border-color-hover": {
+      "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider-handle:hover`. <br/>Defaults to `var(--spectrum-gray-900)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-slider-handle-border-color-down": {
+      "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider-handle.is-dragged, .spectrum-Slider-handle:active`. <br/>Defaults to `var(--spectrum-gray-900)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-slider-handle-border-color-key-focus": {
+      "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle.is-focused, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus-visible`. <br/>Defaults to `var(--spectrum-gray-900)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-slider-handle-focus-ring-color-key-focus": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle.is-focused:before, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus-visible:before, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus:before`. <br/>Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-slider-precision-handle-height": {
+      "value": "var(--spectrum-slider-precision-handle-height-extra-large)",
+      "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider--sizeS`, `.spectrum-Slider--sizeL`, `.spectrum-Slider--sizeXL`. <br/>Used by `.spectrum-Slider--precise .spectrum-Slider-handle`, `.spectrum-Slider.spectrum-Slider--precise:not(.is-disabled) .spectrum-Slider-handle.is-focused:before, .spectrum-Slider.spectrum-Slider--precise:not(.is-disabled) .spectrum-Slider-handle:focus-visible:before, .spectrum-Slider.spectrum-Slider--precise:not(.is-disabled) .spectrum-Slider-handle:focus:before`. <br/>Defaults to `var(--spectrum-slider-precision-handle-height-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-precision-handle-height-medium": {
+      "description": "Used by `--spectrum-slider-precision-handle-height`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-control-to-text-field": {
+      "value": "24px",
+      "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider--sizeS`, `.spectrum-Slider--sizeL`, `.spectrum-Slider--sizeXL`. <br/>Used by `.spectrum-Slider--sideLabel .spectrum-Slider-value`, `.spectrum-Slider-content--editable`. <br/>Defaults to `var(--spectrum-slider-control-to-text-field-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-control-to-text-field-medium": {
+      "value": "16px",
+      "description": "Used by `--spectrum-slider-control-to-text-field`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-editable-control-to-field-label": {
+      "value": "-20px",
+      "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider--sizeS`, `.spectrum-Slider--sizeL`, `.spectrum-Slider--sizeXL`. <br/>Used by `.spectrum-Slider-labelContainer + .spectrum-Slider-content--editable`. <br/>Defaults to `var(--spectrum-slider-control-to-field-label-editable-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-control-to-field-label-editable-medium": {
+      "value": "-12px",
+      "description": "Used by `--spectrum-slider-editable-control-to-field-label`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-input-left": {
+      "value": "calc(var(--spectrum-slider-handle-margin-left) / 4)",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider-input`. <br/>Defaults to `calc(var(--spectrum-slider-handle-margin-left) / 4)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-range-track-reset": {
+      "value": "0",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider-track ~ .spectrum-Slider-track`, `.spectrum-Slider--range .spectrum-Slider-track ~ .spectrum-Slider-track`, `.spectrum-Slider--range .spectrum-Slider-track:first-of-type`, `.spectrum-Slider--range .spectrum-Slider-track:last-of-type`. <br/>Defaults to `0`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-track-corner-radius": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider-track:first-of-type:before`, `.spectrum-Slider-track:last-of-type:before`, `.spectrum-Slider--range .spectrum-Slider-track:first-of-type:before`, `.spectrum-Slider--range .spectrum-Slider-track:last-of-type:before`, `.spectrum-Slider-track ~ .spectrum-Slider-track:before`, `.spectrum-Slider-fill:before`. <br/>Defaults to `2px`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-handle-border-radius": {
+      "value": "calc(var(--spectrum-corner-radius-500) * 4)",
+      "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider--sizeS`, `.spectrum-Slider--sizeL`, `.spectrum-Slider--sizeXL`. <br/>Used by `.spectrum-Slider.spectrum-Slider--precise:not(.is-disabled) .spectrum-Slider-handle.is-focused:before, .spectrum-Slider.spectrum-Slider--precise:not(.is-disabled) .spectrum-Slider-handle:focus-visible:before, .spectrum-Slider.spectrum-Slider--precise:not(.is-disabled) .spectrum-Slider-handle:focus:before`. <br/>Defaults to `calc(var(--spectrum-corner-radius-500) * 4)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-editable-field-inline-size-medium": {
+      "description": "Used by `--mod-textfield-width`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-handle-small": {
+      "value": "18px",
+      "description": "Used by `--spectrum-slider-handle-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-control-to-field-label-small": {
+      "value": "-4px",
+      "description": "Used by `--spectrum-slider-control-to-field-label`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-control-to-field-label-side-small": {
+      "value": "16px",
+      "description": "Used by `--spectrum-slider-control-to-side-field-label`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-precision-handle-height-small": {
+      "description": "Used by `--spectrum-slider-precision-handle-height`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-control-to-text-field-small": {
+      "value": "16px",
+      "description": "Used by `--spectrum-slider-control-to-text-field`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-control-to-field-label-editable-small": {
+      "value": "-4px",
+      "description": "Used by `--spectrum-slider-editable-control-to-field-label`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-editable-field-inline-size-small": {
+      "description": "Used by `--mod-textfield-width`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-handle-large": {
+      "value": "22px",
+      "description": "Used by `--spectrum-slider-handle-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-control-to-field-label-large": {
+      "value": "-16px",
+      "description": "Used by `--spectrum-slider-control-to-field-label`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-control-to-field-label-side-large": {
+      "value": "20px",
+      "description": "Used by `--spectrum-slider-control-to-side-field-label`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-precision-handle-height-large": {
+      "description": "Used by `--spectrum-slider-precision-handle-height`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-control-to-text-field-large": {
+      "value": "20px",
+      "description": "Used by `--spectrum-slider-control-to-text-field`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-control-to-field-label-editable-large": {
+      "value": "-16px",
+      "description": "Used by `--spectrum-slider-editable-control-to-field-label`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-editable-field-inline-size-large": {
+      "description": "Used by `--mod-textfield-width`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-handle-extra-large": {
+      "value": "24px",
+      "description": "Used by `--spectrum-slider-handle-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-control-to-field-label-extra-large": {
+      "value": "-20px",
+      "description": "Used by `--spectrum-slider-control-to-field-label`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-control-to-field-label-side-extra-large": {
+      "value": "24px",
+      "description": "Used by `--spectrum-slider-control-to-side-field-label`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-precision-handle-height-extra-large": {
+      "description": "Used by `--spectrum-slider-precision-handle-height`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-control-to-text-field-extra-large": {
+      "value": "24px",
+      "description": "Used by `--spectrum-slider-control-to-text-field`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-control-to-field-label-editable-extra-large": {
+      "value": "-20px",
+      "description": "Used by `--spectrum-slider-editable-control-to-field-label`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-editable-field-inline-size-extra-large": {
+      "description": "Used by `--mod-textfield-width`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-ramp-track-height": {
+      "description": "Used by `.spectrum-Slider:not(.spectrum-Slider--sideLabel) .spectrum-Slider-labelContainer + .spectrum-Slider-controls:has(.spectrum-Slider-ramp)`, `.spectrum-Slider-ramp`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-track-height-large": {
+      "value": "16px",
+      "description": "Used by `--spectrum-slider-track-fill-thickness`, `.spectrum-Slider-tick.spectrum-Slider-tick--track-height-large:after`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-precision-handle-width": {
+      "description": "Used by `.spectrum-Slider--precise .spectrum-Slider-handle`, `.spectrum-Slider.spectrum-Slider--precise:not(.is-disabled) .spectrum-Slider-handle.is-focused:before, .spectrum-Slider.spectrum-Slider--precise:not(.is-disabled) .spectrum-Slider-handle:focus-visible:before, .spectrum-Slider.spectrum-Slider--precise:not(.is-disabled) .spectrum-Slider-handle:focus:before`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-handle-gap": {
+      "value": "4px",
+      "description": "Used by `.spectrum-Slider-fill--right`. <br/>Defaults to `var(--spectrum-slider-handle-gap)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-slider-tick-mark-height": {
+      "description": "Used by `.spectrum-Slider--tick .spectrum-Slider-controls`, `.spectrum-Slider--tick .spectrum-Slider-tickLabel`, `.spectrum-Slider-tick`, `.spectrum-Slider-tick:after`.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-font-size-100": {
+      "value": "14px",
+      "description": "Used by `--spectrum-slider-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-100": {
+      "value": "32px",
+      "description": "Used by `--spectrum-slider-control-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-default-width-medium": {
+      "value": "208px",
+      "description": "Used by `--spectrum-slider-inline-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-regular-font-weight": {
+      "value": "400",
+      "description": "Used by `--spectrum-slider-label-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-default-font-style": {
+      "value": "normal",
+      "description": "Used by `--spectrum-slider-label-font-style`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-sans-font-family-stack": {
+      "description": "Used by `--spectrum-slider-label-font-family`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-cjk-line-height-100": {
+      "value": "1.5",
+      "description": "Used by `--spectrum-slider-cjk-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-300": {
+      "value": "16px",
+      "description": "Used by `--spectrum-slider-label-margin-start`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-border-width-200": {
+      "value": "2px",
+      "description": "Used by `--spectrum-slider-handle-border-width`, `--spectrum-slider-tick-mark-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-gap": {
+      "value": "2px",
+      "description": "Used by `--spectrum-slider-focus-indicator-gap`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-size-minimum-perspective-down": {
+      "value": "24px",
+      "description": "Used by `--spectrum-slider-downstate-perspective`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-track-color": {
+      "value": "var(--spectrum-gray-300)",
+      "description": "Used by `--spectrum-slider-track-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-gray-700": {
+      "value": "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))",
+      "description": "Used by `--spectrum-slider-track-fill-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-disabled-background-color": {
+      "value": "var(--spectrum-gray-100)",
+      "description": "Used by `--spectrum-slider-track-color-disabled`, `--spectrum-slider-track-fill-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-disabled-border-color": {
+      "value": "var(--spectrum-gray-300)",
+      "description": "Used by `--spectrum-slider-handle-border-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-subdued-content-color-default": {
+      "value": "var(--spectrum-gray-700)",
+      "description": "Used by `--spectrum-slider-label-text-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-slider-tick-label-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-disabled-content-color": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Used by `--spectrum-slider-label-text-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-gray-25": {
+      "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+      "description": "Used by `--spectrum-slider-handle-background-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-75": {
+      "value": "light-dark(rgb(243, 243, 243), rgb(34, 34, 34))",
+      "description": "Used by `--spectrum-slider-ticks-handle-background-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-800": {
+      "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+      "description": "Used by `--spectrum-slider-handle-border-color`, `--spectrum-slider-tick-mark-color-filled-track`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-400": {
+      "value": "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))",
+      "description": "Used by `--spectrum-slider-tick-mark-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-accent-color-1000": {
+      "value": "var(--spectrum-blue-1000)",
+      "description": "Used by `--spectrum-slider-emphasized-tick-mark-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-accent-content-color-default": {
+      "value": "var(--spectrum-accent-color-900)",
+      "description": "Used by `--spectrum-slider-emphasized-track-fill-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-gray-900": {
+      "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+      "description": "Used by `--spectrum-slider-handle-border-color-hover`, `--spectrum-slider-handle-border-color-down`, `--spectrum-slider-handle-border-color-key-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Used by `--spectrum-slider-handle-focus-ring-color-key-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-100": {
+      "value": "6px",
+      "description": "Used by `--mod-fieldlabel-top-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-100": {
+      "value": "9px",
+      "description": "Used by `--mod-fieldlabel-bottom-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-75": {
+      "value": "12px",
+      "description": "Used by `--spectrum-slider-font-size`, `.spectrum-Slider-tick .spectrum-Slider-tickLabel`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-75": {
+      "value": "24px",
+      "description": "Used by `--spectrum-slider-control-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-500": {
+      "value": "8px",
+      "description": "Used by `--spectrum-slider-handle-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-default-width-small": {
+      "value": "192px",
+      "description": "Used by `--spectrum-slider-inline-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-75": {
+      "value": "4px",
+      "description": "Used by `--mod-fieldlabel-top-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-75": {
+      "value": "5px",
+      "description": "Used by `--mod-fieldlabel-bottom-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-200": {
+      "value": "16px",
+      "description": "Used by `--spectrum-slider-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-200": {
+      "value": "40px",
+      "description": "Used by `--spectrum-slider-control-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-default-width-large": {
+      "value": "224px",
+      "description": "Used by `--spectrum-slider-inline-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-200": {
+      "value": "9px",
+      "description": "Used by `--mod-fieldlabel-top-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-200": {
+      "value": "11px",
+      "description": "Used by `--mod-fieldlabel-bottom-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-300": {
+      "value": "18px",
+      "description": "Used by `--spectrum-slider-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-300": {
+      "value": "48px",
+      "description": "Used by `--spectrum-slider-control-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-default-width-extra-large": {
+      "value": "240px",
+      "description": "Used by `--spectrum-slider-inline-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-300": {
+      "value": "12px",
+      "description": "Used by `--mod-fieldlabel-top-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-300": {
+      "value": "14px",
+      "description": "Used by `--mod-fieldlabel-bottom-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-logical-rotation": {
+      "value": "matrix(-1, 0, 0, 1, 0, 0)",
+      "description": "Defined in `.spectrum-Slider:dir(rtl)`. <br/>Used by `.spectrum-Slider-ramp svg`. <br/>Defaults to `matrix(-1, 0, 0, 1, 0, 0)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-animation-duration-100": {
+      "description": "Used by `.spectrum-Slider-handle`, `.spectrum-Slider-handle:before`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-size-difference-down": {
+      "value": "-2px",
+      "description": "Used by `.spectrum-Slider-handle.is-dragged, .spectrum-Slider-handle:active`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Used by `.spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle.is-focused:before, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus-visible:before, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus:before`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-line-height-100": {
+      "value": "1.3",
+      "description": "Used by `.spectrum-Slider-labelContainer`, `.spectrum-Slider-tick .spectrum-Slider-tickLabel`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-75": {
+      "value": "5px",
+      "description": "Used by `.spectrum-Slider--tick .spectrum-Slider-controls`, `.spectrum-Slider--tick .spectrum-Slider-tickLabel`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {
+    "mod-textfield-width": {
+      "category": "Passthrough"
+    },
+    "mod-fieldlabel-top-to-text": {
+      "category": "Passthrough"
+    },
+    "mod-fieldlabel-bottom-to-text": {
+      "category": "Passthrough"
+    }
+  },
+  "high-contrast": {
+    "highcontrast-slider-handle-border-color": {
+      "value": "var(--mod-slider-handle-border-color, var(--spectrum-slider-handle-border-color))",
+      "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls.is-focused, .spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:active, .spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:focus-within`, `.spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:hover`. <br/>Used by `.spectrum-Slider-handle`. <br/>Defaults to `var(--mod-slider-handle-border-color, var(--spectrum-slider-handle-border-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-slider-handle-background-color": {
+      "value": "var(--mod-slider-handle-background-color, var(--spectrum-slider-handle-background-color))",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider-handle`. <br/>Defaults to `var(--mod-slider-handle-background-color, var(--spectrum-slider-handle-background-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-slider-handle-border-color-down": {
+      "value": "var(--mod-slider-handle-border-color-down, var(--spectrum-slider-handle-border-color-down))",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider-handle.is-dragged, .spectrum-Slider-handle:active`. <br/>Defaults to `var(--mod-slider-handle-border-color-down, var(--spectrum-slider-handle-border-color-down))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-slider-handle-border-color-key-focus": {
+      "value": "var(--mod-slider-handle-border-color-key-focus, var(--spectrum-slider-handle-border-color-key-focus))",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle.is-focused, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus-visible`. <br/>Defaults to `var(--mod-slider-handle-border-color-key-focus, var(--spectrum-slider-handle-border-color-key-focus))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-slider-handle-focus-ring-color-key-focus": {
+      "value": "var(--mod-slider-handle-focus-ring-color-key-focus, var(--spectrum-slider-handle-focus-ring-color-key-focus))",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle.is-focused:before, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus-visible:before, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus:before`. <br/>Defaults to `var(--mod-slider-handle-focus-ring-color-key-focus, var(--spectrum-slider-handle-focus-ring-color-key-focus))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-slider-label-text-color": {
+      "value": "var(--mod-slider-label-text-color, var(--spectrum-slider-label-text-color))",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider-tick .spectrum-Slider-tickLabel`, `.spectrum-Slider-labelContainer`. <br/>Defaults to `var(--mod-slider-label-text-color, var(--spectrum-slider-label-text-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-slider-track-color-static": {
+      "value": "var(--mod-slider-track-color, var(--spectrum-slider-track-color))",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider-track:before`. <br/>Defaults to `var(--mod-slider-track-color, var(--spectrum-slider-track-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-slider-track-color": {
+      "value": "var(--mod-slider-track-fill-color, var(--spectrum-slider-track-color))",
+      "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls.is-focused, .spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:active, .spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:focus-within`, `.spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:hover`. <br/>Used by `.spectrum-Slider-track:not(:has(~ .spectrum-Slider-fill)):before`, `.spectrum-Slider--range .spectrum-Slider-track:first-of-type:before`. <br/>Defaults to `var(--mod-slider-track-fill-color, var(--spectrum-slider-track-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-slider-filled-track-fill-color": {
+      "value": "var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color))",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider--filled .spectrum-Slider-track:first-child:before, .spectrum-Slider-fill:before`, `.spectrum-Slider--emphasized .spectrum-Slider-fill:before, .spectrum-Slider--emphasized .spectrum-Slider-track:first-child:before, .spectrum-Slider--emphasized.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before`, `.spectrum-Slider-ramp .spectrum-Slider-ramp-track-fill`, `.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before`. <br/>Defaults to `var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-slider-ramp-track-color": {
+      "value": "var(--mod-slider-ramp-track-color, var(--spectrum-slider-track-color))",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider-ramp .spectrum-Slider-ramp-track`. <br/>Defaults to `var(--mod-slider-ramp-track-color, var(--spectrum-slider-track-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-slider-tick-mark-color-filled-track": {
+      "value": "var(--mod-slider-tick-mark-color-filled-track, var(--spectrum-slider-tick-mark-color-filled-track))",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider--emphasized .spectrum-Slider-tick:nth-child(-n + 4):after`, `.spectrum-Slider--filled:not(.spectrum-Slider--range, .is-disabled, .spectrum-Slider--emphasized) .spectrum-Slider-tick:nth-child(-n + 4):after, .spectrum-Slider--offset:not(.spectrum-Slider--range, .is-disabled, .spectrum-Slider--emphasized) .spectrum-Slider-tick:nth-child(-n + 4):after, .spectrum-Slider--range .spectrum-Slider-tick:nth-child(3):after, .spectrum-Slider--range .spectrum-Slider-tick:nth-child(4):after, .spectrum-Slider--range .spectrum-Slider-tick:nth-child(5):after`. <br/>Defaults to `var(--mod-slider-tick-mark-color-filled-track, var(--spectrum-slider-tick-mark-color-filled-track))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-slider-tick-mark-color": {
+      "value": "var(--mod-slider-tick-mark-color, var(--spectrum-slider-tick-mark-color))",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider-tick:after, .spectrum-Slider.is-disabled .spectrum-Slider-tick:after`. <br/>Defaults to `var(--mod-slider-tick-mark-color, var(--spectrum-slider-tick-mark-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-slider-label-text-color-disabled": {
+      "value": "var(--mod-slider-label-text-color-disabled, var(--spectrum-slider-label-text-color-disabled))",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider.is-disabled .spectrum-Slider-labelContainer, .spectrum-Slider.is-disabled .spectrum-Slider-tickLabel`. <br/>Defaults to `var(--mod-slider-label-text-color-disabled, var(--spectrum-slider-label-text-color-disabled))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-slider-handle-border-color-disabled": {
+      "value": "var(--mod-slider-disabled-border-color, var(--spectrum-slider-handle-border-color-disabled))",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider.is-disabled .spectrum-Slider-handle`, `.spectrum-Slider.is-disabled .spectrum-Slider-handle:active`, `.spectrum-Slider.is-disabled .spectrum-Slider-handle:hover`. <br/>Defaults to `var(--mod-slider-disabled-border-color, var(--spectrum-slider-handle-border-color-disabled))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-slider-handle-disabled-background-color": {
+      "value": "var(--mod-slider-handle-background-color-disabled, var(--spectrum-slider-handle-background-color-disabled))",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider.is-disabled .spectrum-Slider-handle`, `.spectrum-Slider.is-disabled .spectrum-Slider-handle:active`, `.spectrum-Slider.is-disabled .spectrum-Slider-handle:hover`. <br/>Defaults to `var(--mod-slider-handle-background-color-disabled, var(--spectrum-slider-handle-background-color-disabled))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-slider-handle-border-color-hover": {
+      "value": "var(--mod-slider-handle-border-color-hover, var(--spectrum-slider-handle-border-color-hover))",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider-handle:hover`. <br/>Defaults to `var(--mod-slider-handle-border-color-hover, var(--spectrum-slider-handle-border-color-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-slider-track-color-disabled": {
+      "value": "var(--mod-slider-track-color-disabled, var(--spectrum-slider-track-color-disabled))",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider.is-disabled .spectrum-Slider-track:before`, `.spectrum-Slider.is-disabled.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before`. <br/>Defaults to `var(--mod-slider-track-color-disabled, var(--spectrum-slider-track-color-disabled))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-slider-track-fill-color-disabled": {
+      "value": "var(--mod-slider-track-fill-color-disabled, var(--spectrum-slider-track-fill-color-disabled))",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider.is-disabled .spectrum-Slider-fill:before, .spectrum-Slider.is-disabled.spectrum-Slider--filled .spectrum-Slider-track:first-child:before`. <br/>Defaults to `var(--mod-slider-track-fill-color-disabled, var(--spectrum-slider-track-fill-color-disabled))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-slider-ramp-track-color-disabled": {
+      "value": "var(--mod-slider-ramp-track-color-disabled, var(--spectrum-slider-ramp-track-color-disabled))",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider.is-disabled .spectrum-Slider-ramp path`. <br/>Defaults to `var(--mod-slider-ramp-track-color-disabled, var(--spectrum-slider-ramp-track-color-disabled))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-slider-tick-mark-color-disabled": {
+      "value": "var(--mod-slider-tick-mark-color, var(--spectrum-slider-tick-mark-color))",
+      "description": "Defined in `.spectrum-Slider`. <br/>Used by `.spectrum-Slider.is-disabled .spectrum-Slider-tick:after`. <br/>Defaults to `var(--mod-slider-tick-mark-color, var(--spectrum-slider-tick-mark-color))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/slider/stories/slider.stories.js b/components/slider/stories/slider.stories.js
index 3b69d70d1f5..c833fec9cae 100644
--- a/components/slider/stories/slider.stories.js
+++ b/components/slider/stories/slider.stories.js
@@ -1,11 +1,13 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isActive, isDisabled, isEmphasized, isFocused, isHovered, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { SliderGroup, VariantGroup } from "./slider.test.js";
 import { Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * A slider allows users to quickly select a value within a range. They should be used when the upper and lower bounds to the range are invariable.
  *
@@ -190,9 +192,7 @@ export default {
 		},
 		packageJson,
 		metadata,
-		status: {
-			type: "migrated",
-		},
+		cssprops: metadata.modifiers,
 	},
 	tags: ["migrated"],
 };
diff --git a/components/splitview/dist/metadata.json b/components/splitview/dist/metadata.json
index c6925723f7c..fb919b9312c 100644
--- a/components/splitview/dist/metadata.json
+++ b/components/splitview/dist/metadata.json
@@ -18,12 +18,6 @@
     ".spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper:before",
     ".spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper",
     ".spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper:before",
-    ".spectrum-SplitView-splitter.is-draggable.is-active",
-    ".spectrum-SplitView-splitter.is-draggable.is-active .spectrum-SplitView-gripper",
-    ".spectrum-SplitView-splitter.is-draggable.is-active .spectrum-SplitView-gripper:before",
-    ".spectrum-SplitView-splitter.is-draggable.is-hovered",
-    ".spectrum-SplitView-splitter.is-draggable.is-hovered .spectrum-SplitView-gripper",
-    ".spectrum-SplitView-splitter.is-draggable.is-hovered .spectrum-SplitView-gripper:before",
     ".spectrum-SplitView-splitter.is-draggable:active",
     ".spectrum-SplitView-splitter.is-draggable:active .spectrum-SplitView-gripper",
     ".spectrum-SplitView-splitter.is-draggable:active .spectrum-SplitView-gripper:before",
@@ -33,59 +27,265 @@
     ".spectrum-SplitView-splitter.is-draggable:focus-visible .spectrum-SplitView-gripper:before",
     ".spectrum-SplitView-splitter.is-draggable:hover",
     ".spectrum-SplitView-splitter.is-draggable:hover .spectrum-SplitView-gripper",
-    ".spectrum-SplitView-splitter.is-draggable:hover .spectrum-SplitView-gripper:before"
-  ],
-  "modifiers": [
-    "--mod-splitview-background-color",
-    "--mod-splitview-content-color",
-    "--mod-splitview-gripper-border-radius",
-    "--mod-splitview-gripper-border-width-horizontal",
-    "--mod-splitview-gripper-border-width-vertical",
-    "--mod-splitview-gripper-height",
-    "--mod-splitview-gripper-width",
-    "--mod-splitview-handle-background-color",
-    "--mod-splitview-handle-background-color-down",
-    "--mod-splitview-handle-background-color-focus",
-    "--mod-splitview-handle-background-color-hover",
-    "--mod-splitview-handle-width",
-    "--mod-splitview-vertical-gripper-outer-width",
-    "--mod-splitview-vertical-gripper-reset",
-    "--mod-splitview-vertical-gripper-width",
-    "--mod-splitview-vertical-width"
-  ],
-  "component": [
-    "--spectrum-splitview-background-color",
-    "--spectrum-splitview-content-color",
-    "--spectrum-splitview-gripper-border-radius",
-    "--spectrum-splitview-gripper-border-width-horizontal",
-    "--spectrum-splitview-gripper-border-width-vertical",
-    "--spectrum-splitview-gripper-height",
-    "--spectrum-splitview-gripper-width",
-    "--spectrum-splitview-handle-background-color",
-    "--spectrum-splitview-handle-background-color-down",
-    "--spectrum-splitview-handle-background-color-focus",
-    "--spectrum-splitview-handle-background-color-hover",
-    "--spectrum-splitview-handle-width",
-    "--spectrum-splitview-vertical-gripper-outer-width",
-    "--spectrum-splitview-vertical-gripper-reset",
-    "--spectrum-splitview-vertical-gripper-width",
-    "--spectrum-splitview-vertical-width"
-  ],
-  "global": [
-    "--spectrum-body-color",
-    "--spectrum-border-width-200",
-    "--spectrum-border-width-400",
-    "--spectrum-focus-indicator-color",
-    "--spectrum-gray-200",
-    "--spectrum-gray-400",
-    "--spectrum-gray-75",
-    "--spectrum-gray-800"
+    ".spectrum-SplitView-splitter.is-draggable:hover .spectrum-SplitView-gripper:before",
+    ".spectrum-SplitView-splitter.is-draggable.is-active",
+    ".spectrum-SplitView-splitter.is-draggable.is-active .spectrum-SplitView-gripper",
+    ".spectrum-SplitView-splitter.is-draggable.is-active .spectrum-SplitView-gripper:before",
+    ".spectrum-SplitView-splitter.is-draggable.is-hovered",
+    ".spectrum-SplitView-splitter.is-draggable.is-hovered .spectrum-SplitView-gripper",
+    ".spectrum-SplitView-splitter.is-draggable.is-hovered .spectrum-SplitView-gripper:before"
   ],
-  "passthroughs": [],
-  "high-contrast": [
-    "--highcontrast-splitview-handle-background-color",
-    "--highcontrast-splitview-handle-background-color-down",
-    "--highcontrast-splitview-handle-background-color-focus",
-    "--highcontrast-splitview-handle-background-color-hover"
-  ]
+  "modifiers": {
+    "mod-splitview-background-color": {
+      "description": "Used by `.spectrum-SplitView-pane`. <br/>Defaults to `var(--spectrum-splitview-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-splitview-content-color": {
+      "description": "Used by `.spectrum-SplitView-pane`. <br/>Defaults to `var(--spectrum-splitview-content-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-splitview-gripper-border-radius": {
+      "description": "Used by `.spectrum-SplitView-gripper`. <br/>Defaults to `var(--spectrum-splitview-gripper-border-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-splitview-handle-background-color": {
+      "description": "Used by `.spectrum-SplitView-gripper`, `.spectrum-SplitView-gripper:before`, `.spectrum-SplitView-splitter`. <br/>Defaults to `var(--spectrum-splitview-handle-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-splitview-gripper-width": {
+      "description": "Used by `.spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-gripper`. <br/>Defaults to `var(--spectrum-splitview-gripper-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-splitview-gripper-border-width-vertical": {
+      "description": "Used by `.spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-gripper`. <br/>Defaults to `var(--spectrum-splitview-gripper-border-width-vertical)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-splitview-gripper-height": {
+      "description": "Used by `.spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-gripper`. <br/>Defaults to `var(--spectrum-splitview-gripper-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-splitview-gripper-border-width-horizontal": {
+      "description": "Used by `.spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-gripper`. <br/>Defaults to `var(--spectrum-splitview-gripper-border-width-horizontal)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-splitview-handle-width": {
+      "description": "Used by `.spectrum-SplitView-splitter`, `.spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper:before, .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper:before`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper:before, .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper:before`. <br/>Defaults to `var(--spectrum-splitview-handle-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-splitview-handle-background-color-hover": {
+      "description": "Used by `.spectrum-SplitView-splitter.is-draggable.is-hovered`, `.spectrum-SplitView-splitter.is-draggable.is-hovered .spectrum-SplitView-gripper`, `.spectrum-SplitView-splitter.is-draggable.is-hovered .spectrum-SplitView-gripper:before`, `.spectrum-SplitView-splitter.is-draggable:hover`, `.spectrum-SplitView-splitter.is-draggable:hover .spectrum-SplitView-gripper`, `.spectrum-SplitView-splitter.is-draggable:hover .spectrum-SplitView-gripper:before`. <br/>Defaults to `var(--spectrum-splitview-handle-background-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-splitview-handle-background-color-down": {
+      "description": "Used by `.spectrum-SplitView-splitter.is-draggable.is-active, .spectrum-SplitView-splitter.is-draggable:active`, `.spectrum-SplitView-splitter.is-draggable.is-active .spectrum-SplitView-gripper, .spectrum-SplitView-splitter.is-draggable:active .spectrum-SplitView-gripper`, `.spectrum-SplitView-splitter.is-draggable.is-active .spectrum-SplitView-gripper:before, .spectrum-SplitView-splitter.is-draggable:active .spectrum-SplitView-gripper:before`. <br/>Defaults to `var(--spectrum-splitview-handle-background-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-splitview-handle-background-color-focus": {
+      "description": "Used by `.spectrum-SplitView-splitter.is-draggable:focus-visible`, `.spectrum-SplitView-splitter.is-draggable:focus-visible .spectrum-SplitView-gripper`, `.spectrum-SplitView-splitter.is-draggable:focus-visible .spectrum-SplitView-gripper:before`. <br/>Defaults to `var(--spectrum-splitview-handle-background-color-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-splitview-vertical-width": {
+      "description": "Used by `.spectrum-SplitView--vertical .spectrum-SplitView-pane`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter`. <br/>Defaults to `var(--spectrum-splitview-vertical-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-splitview-vertical-gripper-width": {
+      "description": "Used by `.spectrum-SplitView--vertical .spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper, .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper:before, .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper:before`. <br/>Defaults to `var(--spectrum-splitview-vertical-gripper-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-splitview-vertical-gripper-reset": {
+      "description": "Used by `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper:before, .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper:before`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper`. <br/>Defaults to `var(--spectrum-splitview-vertical-gripper-reset)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-splitview-vertical-gripper-outer-width": {
+      "description": "Used by `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper:before, .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper:before`. <br/>Defaults to `var(--spectrum-splitview-vertical-gripper-outer-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-splitview-background-color": {
+      "value": "light-dark(rgb(243, 243, 243), rgb(34, 34, 34))",
+      "description": "Defined in `.spectrum-SplitView`. <br/>Used by `.spectrum-SplitView-pane`. <br/>Defaults to `var(--spectrum-gray-75)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-splitview-handle-background-color": {
+      "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+      "description": "Defined in `.spectrum-SplitView`. <br/>Used by `.spectrum-SplitView-gripper`, `.spectrum-SplitView-gripper:before`, `.spectrum-SplitView-splitter`. <br/>Defaults to `var(--spectrum-gray-200)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-splitview-gripper-border-radius": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-SplitView`. <br/>Used by `.spectrum-SplitView-gripper`. <br/>Defaults to `2px`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-splitview-vertical-width": {
+      "value": "100%",
+      "description": "Defined in `.spectrum-SplitView`. <br/>Used by `.spectrum-SplitView--vertical .spectrum-SplitView-pane`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter`. <br/>Defaults to `100%`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-splitview-vertical-gripper-width": {
+      "value": "50%",
+      "description": "Defined in `.spectrum-SplitView`. <br/>Used by `.spectrum-SplitView--vertical .spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper, .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper:before, .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper:before`. <br/>Defaults to `50%`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-splitview-vertical-gripper-outer-width": {
+      "value": "100%",
+      "description": "Defined in `.spectrum-SplitView`. <br/>Used by `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper:before, .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper:before`. <br/>Defaults to `100%`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-splitview-vertical-gripper-reset": {
+      "value": "0",
+      "description": "Defined in `.spectrum-SplitView`. <br/>Used by `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper:before, .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper:before`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper`. <br/>Defaults to `0`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-splitview-content-color": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-SplitView`. <br/>Used by `.spectrum-SplitView-pane`. <br/>Defaults to `var(--spectrum-body-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-splitview-handle-background-color-hover": {
+      "value": "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))",
+      "description": "Defined in `.spectrum-SplitView`. <br/>Used by `.spectrum-SplitView-splitter.is-draggable.is-hovered`, `.spectrum-SplitView-splitter.is-draggable.is-hovered .spectrum-SplitView-gripper`, `.spectrum-SplitView-splitter.is-draggable.is-hovered .spectrum-SplitView-gripper:before`, `.spectrum-SplitView-splitter.is-draggable:hover`, `.spectrum-SplitView-splitter.is-draggable:hover .spectrum-SplitView-gripper`, `.spectrum-SplitView-splitter.is-draggable:hover .spectrum-SplitView-gripper:before`. <br/>Defaults to `var(--spectrum-gray-400)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-splitview-handle-background-color-down": {
+      "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+      "description": "Defined in `.spectrum-SplitView`. <br/>Used by `.spectrum-SplitView-splitter.is-draggable.is-active, .spectrum-SplitView-splitter.is-draggable:active`, `.spectrum-SplitView-splitter.is-draggable.is-active .spectrum-SplitView-gripper, .spectrum-SplitView-splitter.is-draggable:active .spectrum-SplitView-gripper`, `.spectrum-SplitView-splitter.is-draggable.is-active .spectrum-SplitView-gripper:before, .spectrum-SplitView-splitter.is-draggable:active .spectrum-SplitView-gripper:before`. <br/>Defaults to `var(--spectrum-gray-800)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-splitview-handle-background-color-focus": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Defined in `.spectrum-SplitView`. <br/>Used by `.spectrum-SplitView-splitter.is-draggable:focus-visible`, `.spectrum-SplitView-splitter.is-draggable:focus-visible .spectrum-SplitView-gripper`, `.spectrum-SplitView-splitter.is-draggable:focus-visible .spectrum-SplitView-gripper:before`. <br/>Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-splitview-handle-width": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-SplitView`. <br/>Used by `.spectrum-SplitView-splitter`, `.spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper:before, .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper:before`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper:before, .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper:before`. <br/>Defaults to `var(--spectrum-border-width-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-splitview-gripper-width": {
+      "value": "4px",
+      "description": "Defined in `.spectrum-SplitView`. <br/>Used by `.spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-gripper`. <br/>Defaults to `var(--spectrum-border-width-400)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-splitview-gripper-height": {
+      "value": "16px",
+      "description": "Defined in `.spectrum-SplitView`. <br/>Used by `.spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-gripper`. <br/>Defaults to `16px`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-splitview-gripper-border-width-horizontal": {
+      "value": "3px",
+      "description": "Defined in `.spectrum-SplitView`. <br/>Used by `.spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-gripper`. <br/>Defaults to `3px`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-splitview-gripper-border-width-vertical": {
+      "value": "4px",
+      "description": "Defined in `.spectrum-SplitView`. <br/>Used by `.spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-gripper`. <br/>Defaults to `var(--spectrum-border-width-400)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-gray-75": {
+      "value": "light-dark(rgb(243, 243, 243), rgb(34, 34, 34))",
+      "description": "Used by `--spectrum-splitview-background-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-200": {
+      "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+      "description": "Used by `--spectrum-splitview-handle-background-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-color": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-splitview-content-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-gray-400": {
+      "value": "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))",
+      "description": "Used by `--spectrum-splitview-handle-background-color-hover`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-800": {
+      "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+      "description": "Used by `--spectrum-splitview-handle-background-color-down`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Used by `--spectrum-splitview-handle-background-color-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-border-width-200": {
+      "value": "2px",
+      "description": "Used by `--spectrum-splitview-handle-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-border-width-400": {
+      "value": "4px",
+      "description": "Used by `--spectrum-splitview-gripper-width`, `--spectrum-splitview-gripper-border-width-vertical`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {
+    "highcontrast-splitview-handle-background-color": {
+      "value": "var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color))",
+      "description": "Defined in `.spectrum-SplitView`. <br/>Used by `.spectrum-SplitView-gripper`, `.spectrum-SplitView-gripper:before`, `.spectrum-SplitView-splitter`. <br/>Defaults to `var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-splitview-handle-background-color-hover": {
+      "value": "var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover))",
+      "description": "Defined in `.spectrum-SplitView`. <br/>Used by `.spectrum-SplitView-splitter.is-draggable.is-hovered`, `.spectrum-SplitView-splitter.is-draggable.is-hovered .spectrum-SplitView-gripper`, `.spectrum-SplitView-splitter.is-draggable.is-hovered .spectrum-SplitView-gripper:before`, `.spectrum-SplitView-splitter.is-draggable:hover`, `.spectrum-SplitView-splitter.is-draggable:hover .spectrum-SplitView-gripper`, `.spectrum-SplitView-splitter.is-draggable:hover .spectrum-SplitView-gripper:before`. <br/>Defaults to `var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-splitview-handle-background-color-down": {
+      "value": "var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down))",
+      "description": "Defined in `.spectrum-SplitView`. <br/>Used by `.spectrum-SplitView-splitter.is-draggable.is-active, .spectrum-SplitView-splitter.is-draggable:active`, `.spectrum-SplitView-splitter.is-draggable.is-active .spectrum-SplitView-gripper, .spectrum-SplitView-splitter.is-draggable:active .spectrum-SplitView-gripper`, `.spectrum-SplitView-splitter.is-draggable.is-active .spectrum-SplitView-gripper:before, .spectrum-SplitView-splitter.is-draggable:active .spectrum-SplitView-gripper:before`. <br/>Defaults to `var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-splitview-handle-background-color-focus": {
+      "value": "var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus))",
+      "description": "Defined in `.spectrum-SplitView`. <br/>Used by `.spectrum-SplitView-splitter.is-draggable:focus-visible`, `.spectrum-SplitView-splitter.is-draggable:focus-visible .spectrum-SplitView-gripper`, `.spectrum-SplitView-splitter.is-draggable:focus-visible .spectrum-SplitView-gripper:before`. <br/>Defaults to `var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/splitview/stories/splitview.stories.js b/components/splitview/stories/splitview.stories.js
index 1c615f12b97..57cd23ebff0 100644
--- a/components/splitview/stories/splitview.stories.js
+++ b/components/splitview/stories/splitview.stories.js
@@ -1,10 +1,12 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isFocused } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { SplitViewGroup } from "./splitview.test.js";
 import { Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 export default {
 	title: "Split view",
 	component: "SplitView",
@@ -81,6 +83,10 @@ export default {
 	parameters: {
 		packageJson,
 		metadata,
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 };
 
diff --git a/components/statuslight/dist/metadata.json b/components/statuslight/dist/metadata.json
index 07f3510d851..92203f6bf11 100644
--- a/components/statuslight/dist/metadata.json
+++ b/components/statuslight/dist/metadata.json
@@ -35,158 +35,840 @@
     ".spectrum-StatusLight:lang(ko)",
     ".spectrum-StatusLight:lang(zh)"
   ],
-  "modifiers": [
-    "--mod-statuslight-border-width",
-    "--mod-statuslight-content-color-default",
-    "--mod-statuslight-corner-radius",
-    "--mod-statuslight-dot-size",
-    "--mod-statuslight-font-family",
-    "--mod-statuslight-font-size",
-    "--mod-statuslight-font-style",
-    "--mod-statuslight-font-weight",
-    "--mod-statuslight-height",
-    "--mod-statuslight-line-height",
-    "--mod-statuslight-line-height-cjk",
-    "--mod-statuslight-nonsemantic-blue-color",
-    "--mod-statuslight-nonsemantic-brown-color",
-    "--mod-statuslight-nonsemantic-celery-color",
-    "--mod-statuslight-nonsemantic-chartreuse-color",
-    "--mod-statuslight-nonsemantic-cinnamon-color",
-    "--mod-statuslight-nonsemantic-cyan-color",
-    "--mod-statuslight-nonsemantic-fuchsia-color",
-    "--mod-statuslight-nonsemantic-gray-color",
-    "--mod-statuslight-nonsemantic-green-color",
-    "--mod-statuslight-nonsemantic-indigo-color",
-    "--mod-statuslight-nonsemantic-magenta-color",
-    "--mod-statuslight-nonsemantic-orange-color",
-    "--mod-statuslight-nonsemantic-pink-color",
-    "--mod-statuslight-nonsemantic-purple-color",
-    "--mod-statuslight-nonsemantic-red-color",
-    "--mod-statuslight-nonsemantic-seafoam-color",
-    "--mod-statuslight-nonsemantic-silver-color",
-    "--mod-statuslight-nonsemantic-turquoise-color",
-    "--mod-statuslight-nonsemantic-yellow-color",
-    "--mod-statuslight-semantic-info-color",
-    "--mod-statuslight-semantic-negative-color",
-    "--mod-statuslight-semantic-neutral-color",
-    "--mod-statuslight-semantic-notice-color",
-    "--mod-statuslight-semantic-positive-color",
-    "--mod-statuslight-spacing-bottom-to-label",
-    "--mod-statuslight-spacing-dot-to-label",
-    "--mod-statuslight-spacing-top-to-dot",
-    "--mod-statuslight-spacing-top-to-label",
-    "--mod-statuslight-subdued-content-color-default"
-  ],
-  "component": [
-    "--spectrum-status-light-dot-size-extra-large",
-    "--spectrum-status-light-dot-size-large",
-    "--spectrum-status-light-dot-size-medium",
-    "--spectrum-status-light-dot-size-small",
-    "--spectrum-status-light-text-to-visual-100",
-    "--spectrum-status-light-text-to-visual-200",
-    "--spectrum-status-light-text-to-visual-300",
-    "--spectrum-status-light-text-to-visual-75",
-    "--spectrum-status-light-top-to-dot-extra-large",
-    "--spectrum-status-light-top-to-dot-large",
-    "--spectrum-status-light-top-to-dot-medium",
-    "--spectrum-status-light-top-to-dot-small",
-    "--spectrum-statuslight-border-width",
-    "--spectrum-statuslight-content-color-default",
-    "--spectrum-statuslight-corner-radius",
-    "--spectrum-statuslight-dot-size",
-    "--spectrum-statuslight-font-family",
-    "--spectrum-statuslight-font-size",
-    "--spectrum-statuslight-font-style",
-    "--spectrum-statuslight-font-weight",
-    "--spectrum-statuslight-height",
-    "--spectrum-statuslight-line-height",
-    "--spectrum-statuslight-line-height-cjk",
-    "--spectrum-statuslight-nonsemantic-blue-color",
-    "--spectrum-statuslight-nonsemantic-brown-color",
-    "--spectrum-statuslight-nonsemantic-celery-color",
-    "--spectrum-statuslight-nonsemantic-chartreuse-color",
-    "--spectrum-statuslight-nonsemantic-cinnamon-color",
-    "--spectrum-statuslight-nonsemantic-cyan-color",
-    "--spectrum-statuslight-nonsemantic-fuchsia-color",
-    "--spectrum-statuslight-nonsemantic-gray-color",
-    "--spectrum-statuslight-nonsemantic-green-color",
-    "--spectrum-statuslight-nonsemantic-indigo-color",
-    "--spectrum-statuslight-nonsemantic-magenta-color",
-    "--spectrum-statuslight-nonsemantic-orange-color",
-    "--spectrum-statuslight-nonsemantic-pink-color",
-    "--spectrum-statuslight-nonsemantic-purple-color",
-    "--spectrum-statuslight-nonsemantic-red-color",
-    "--spectrum-statuslight-nonsemantic-seafoam-color",
-    "--spectrum-statuslight-nonsemantic-silver-color",
-    "--spectrum-statuslight-nonsemantic-turquoise-color",
-    "--spectrum-statuslight-nonsemantic-yellow-color",
-    "--spectrum-statuslight-semantic-info-color",
-    "--spectrum-statuslight-semantic-negative-color",
-    "--spectrum-statuslight-semantic-neutral-color",
-    "--spectrum-statuslight-semantic-notice-color",
-    "--spectrum-statuslight-semantic-positive-color",
-    "--spectrum-statuslight-spacing-bottom-to-label",
-    "--spectrum-statuslight-spacing-computed-top-to-dot",
-    "--spectrum-statuslight-spacing-dot-to-label",
-    "--spectrum-statuslight-spacing-top-to-dot",
-    "--spectrum-statuslight-spacing-top-to-label",
-    "--spectrum-statuslight-subdued-content-color-default"
-  ],
-  "global": [
-    "--spectrum-blue-visual-color",
-    "--spectrum-border-width-100",
-    "--spectrum-brown-visual-color",
-    "--spectrum-celery-visual-color",
-    "--spectrum-chartreuse-visual-color",
-    "--spectrum-cinnamon-visual-color",
-    "--spectrum-cjk-line-height-100",
-    "--spectrum-component-bottom-to-text-100",
-    "--spectrum-component-bottom-to-text-200",
-    "--spectrum-component-bottom-to-text-300",
-    "--spectrum-component-bottom-to-text-75",
-    "--spectrum-component-height-100",
-    "--spectrum-component-height-200",
-    "--spectrum-component-height-300",
-    "--spectrum-component-height-75",
-    "--spectrum-component-top-to-text-100",
-    "--spectrum-component-top-to-text-200",
-    "--spectrum-component-top-to-text-300",
-    "--spectrum-component-top-to-text-75",
-    "--spectrum-corner-radius-full",
-    "--spectrum-cyan-visual-color",
-    "--spectrum-default-font-style",
-    "--spectrum-font-size-100",
-    "--spectrum-font-size-200",
-    "--spectrum-font-size-300",
-    "--spectrum-font-size-75",
-    "--spectrum-fuchsia-visual-color",
-    "--spectrum-gray-600",
-    "--spectrum-gray-visual-color",
-    "--spectrum-green-visual-color",
-    "--spectrum-indigo-visual-color",
-    "--spectrum-informative-visual-color",
-    "--spectrum-line-height-100",
-    "--spectrum-magenta-visual-color",
-    "--spectrum-negative-visual-color",
-    "--spectrum-neutral-content-color-default",
-    "--spectrum-neutral-subdued-content-color-default",
-    "--spectrum-neutral-visual-color",
-    "--spectrum-notice-visual-color",
-    "--spectrum-orange-visual-color",
-    "--spectrum-pink-visual-color",
-    "--spectrum-positive-visual-color",
-    "--spectrum-purple-visual-color",
-    "--spectrum-red-visual-color",
-    "--spectrum-regular-font-weight",
-    "--spectrum-sans-font-family-stack",
-    "--spectrum-seafoam-visual-color",
-    "--spectrum-silver-visual-color",
-    "--spectrum-turquoise-visual-color",
-    "--spectrum-yellow-visual-color"
-  ],
-  "passthroughs": [],
-  "high-contrast": [
-    "--highcontrast-statuslight-content-color-default",
-    "--highcontrast-statuslight-subdued-content-color-default"
-  ]
+  "modifiers": {
+    "mod-statuslight-height": {
+      "description": "Used by `.spectrum-StatusLight`. <br/>Defaults to `var(--spectrum-statuslight-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-statuslight-spacing-top-to-label": {
+      "description": "Used by `.spectrum-StatusLight`, `--spectrum-statuslight-spacing-computed-top-to-dot`. <br/>Defaults to `var(--spectrum-statuslight-spacing-top-to-label)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-statuslight-spacing-bottom-to-label": {
+      "description": "Used by `.spectrum-StatusLight`. <br/>Defaults to `var(--spectrum-statuslight-spacing-bottom-to-label)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-statuslight-font-size": {
+      "description": "Used by `.spectrum-StatusLight`. <br/>Defaults to `var(--spectrum-statuslight-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-statuslight-font-weight": {
+      "description": "Used by `.spectrum-StatusLight`. <br/>Defaults to `var(--spectrum-statuslight-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-statuslight-font-family": {
+      "description": "Used by `.spectrum-StatusLight`. <br/>Defaults to `var(--spectrum-statuslight-font-family)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-statuslight-font-style": {
+      "description": "Used by `.spectrum-StatusLight`. <br/>Defaults to `var(--spectrum-statuslight-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-statuslight-line-height": {
+      "description": "Used by `.spectrum-StatusLight`. <br/>Defaults to `var(--spectrum-statuslight-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-statuslight-content-color-default": {
+      "description": "Used by `.spectrum-StatusLight`. <br/>Defaults to `var(--spectrum-statuslight-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-statuslight-line-height-cjk": {
+      "description": "Used by `.spectrum-StatusLight:lang(ja), .spectrum-StatusLight:lang(ko), .spectrum-StatusLight:lang(zh)`. <br/>Defaults to `var(--spectrum-statuslight-line-height-cjk)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-statuslight-spacing-top-to-dot": {
+      "description": "Used by `--spectrum-statuslight-spacing-computed-top-to-dot`. <br/>Defaults to `var(--spectrum-statuslight-spacing-top-to-dot)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-statuslight-dot-size": {
+      "description": "Used by `.spectrum-StatusLight:before`. <br/>Defaults to `var(--spectrum-statuslight-dot-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-statuslight-corner-radius": {
+      "description": "Used by `.spectrum-StatusLight:before`. <br/>Defaults to `var(--spectrum-statuslight-corner-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-statuslight-spacing-dot-to-label": {
+      "description": "Used by `.spectrum-StatusLight:before`. <br/>Defaults to `var(--spectrum-statuslight-spacing-dot-to-label)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-statuslight-subdued-content-color-default": {
+      "description": "Used by `.spectrum-StatusLight--neutral`. <br/>Defaults to `var(--spectrum-statuslight-subdued-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-statuslight-semantic-neutral-color": {
+      "description": "Used by `.spectrum-StatusLight--neutral:before`. <br/>Defaults to `var(--spectrum-statuslight-semantic-neutral-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-statuslight-semantic-info-color": {
+      "description": "Used by `.spectrum-StatusLight--info:before`. <br/>Defaults to `var(--spectrum-statuslight-semantic-info-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-statuslight-semantic-negative-color": {
+      "description": "Used by `.spectrum-StatusLight--negative:before`. <br/>Defaults to `var(--spectrum-statuslight-semantic-negative-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-statuslight-semantic-notice-color": {
+      "description": "Used by `.spectrum-StatusLight--notice:before`. <br/>Defaults to `var(--spectrum-statuslight-semantic-notice-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-statuslight-semantic-positive-color": {
+      "description": "Used by `.spectrum-StatusLight--positive:before`. <br/>Defaults to `var(--spectrum-statuslight-semantic-positive-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-statuslight-nonsemantic-gray-color": {
+      "description": "Used by `.spectrum-StatusLight--gray:before`. <br/>Defaults to `var(--spectrum-statuslight-nonsemantic-gray-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-statuslight-nonsemantic-red-color": {
+      "description": "Used by `.spectrum-StatusLight--red:before`. <br/>Defaults to `var(--spectrum-statuslight-nonsemantic-red-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-statuslight-nonsemantic-orange-color": {
+      "description": "Used by `.spectrum-StatusLight--orange:before`. <br/>Defaults to `var(--spectrum-statuslight-nonsemantic-orange-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-statuslight-nonsemantic-yellow-color": {
+      "description": "Used by `.spectrum-StatusLight--yellow:before`. <br/>Defaults to `var(--spectrum-statuslight-nonsemantic-yellow-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-statuslight-nonsemantic-chartreuse-color": {
+      "description": "Used by `.spectrum-StatusLight--chartreuse:before`. <br/>Defaults to `var(--spectrum-statuslight-nonsemantic-chartreuse-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-statuslight-nonsemantic-celery-color": {
+      "description": "Used by `.spectrum-StatusLight--celery:before`. <br/>Defaults to `var(--spectrum-statuslight-nonsemantic-celery-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-statuslight-nonsemantic-green-color": {
+      "description": "Used by `.spectrum-StatusLight--green:before`. <br/>Defaults to `var(--spectrum-statuslight-nonsemantic-green-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-statuslight-nonsemantic-seafoam-color": {
+      "description": "Used by `.spectrum-StatusLight--seafoam:before`. <br/>Defaults to `var(--spectrum-statuslight-nonsemantic-seafoam-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-statuslight-nonsemantic-cyan-color": {
+      "description": "Used by `.spectrum-StatusLight--cyan:before`. <br/>Defaults to `var(--spectrum-statuslight-nonsemantic-cyan-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-statuslight-nonsemantic-blue-color": {
+      "description": "Used by `.spectrum-StatusLight--blue:before`. <br/>Defaults to `var(--spectrum-statuslight-nonsemantic-blue-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-statuslight-nonsemantic-indigo-color": {
+      "description": "Used by `.spectrum-StatusLight--indigo:before`. <br/>Defaults to `var(--spectrum-statuslight-nonsemantic-indigo-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-statuslight-nonsemantic-purple-color": {
+      "description": "Used by `.spectrum-StatusLight--purple:before`. <br/>Defaults to `var(--spectrum-statuslight-nonsemantic-purple-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-statuslight-nonsemantic-fuchsia-color": {
+      "description": "Used by `.spectrum-StatusLight--fuchsia:before`. <br/>Defaults to `var(--spectrum-statuslight-nonsemantic-fuchsia-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-statuslight-nonsemantic-magenta-color": {
+      "description": "Used by `.spectrum-StatusLight--magenta:before`. <br/>Defaults to `var(--spectrum-statuslight-nonsemantic-magenta-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-statuslight-nonsemantic-pink-color": {
+      "description": "Used by `.spectrum-StatusLight--pink:before`. <br/>Defaults to `var(--spectrum-statuslight-nonsemantic-pink-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-statuslight-nonsemantic-turquoise-color": {
+      "description": "Used by `.spectrum-StatusLight--turquoise:before`. <br/>Defaults to `var(--spectrum-statuslight-nonsemantic-turquoise-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-statuslight-nonsemantic-cinnamon-color": {
+      "description": "Used by `.spectrum-StatusLight--cinnamon:before`. <br/>Defaults to `var(--spectrum-statuslight-nonsemantic-cinnamon-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-statuslight-nonsemantic-brown-color": {
+      "description": "Used by `.spectrum-StatusLight--brown:before`. <br/>Defaults to `var(--spectrum-statuslight-nonsemantic-brown-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-statuslight-nonsemantic-silver-color": {
+      "description": "Used by `.spectrum-StatusLight--silver:before`. <br/>Defaults to `var(--spectrum-statuslight-nonsemantic-silver-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-statuslight-border-width": {
+      "description": "Used by `.spectrum-StatusLight:before`. <br/>Defaults to `var(--spectrum-statuslight-border-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-statuslight-corner-radius": {
+      "value": "50%",
+      "description": "Defined in `.spectrum-StatusLight`. <br/>Used by `.spectrum-StatusLight:before`. <br/>Defaults to `50%`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-statuslight-height": {
+      "value": "48px",
+      "description": "Defined in `.spectrum-StatusLight`, `.spectrum-StatusLight--sizeS`, `.spectrum-StatusLight--sizeL`, `.spectrum-StatusLight--sizeXL`. <br/>Used by `.spectrum-StatusLight`. <br/>Defaults to `var(--spectrum-component-height-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-statuslight-dot-size": {
+      "value": "14px",
+      "description": "Defined in `.spectrum-StatusLight`, `.spectrum-StatusLight--sizeS`, `.spectrum-StatusLight--sizeL`, `.spectrum-StatusLight--sizeXL`. <br/>Used by `.spectrum-StatusLight:before`. <br/>Defaults to `var(--spectrum-status-light-dot-size-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-status-light-dot-size-medium": {
+      "value": "10px",
+      "description": "Used by `--spectrum-statuslight-dot-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-statuslight-font-family": {
+      "value": "var(--spectrum-sans-font-family-stack)",
+      "description": "Defined in `.spectrum-StatusLight`. <br/>Used by `.spectrum-StatusLight`. <br/>Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-statuslight-font-weight": {
+      "value": "400",
+      "description": "Defined in `.spectrum-StatusLight`. <br/>Used by `.spectrum-StatusLight`. <br/>Defaults to `400`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-statuslight-font-style": {
+      "value": "normal",
+      "description": "Defined in `.spectrum-StatusLight`. <br/>Used by `.spectrum-StatusLight`. <br/>Defaults to `var(--spectrum-default-font-style)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-statuslight-font-size": {
+      "value": "18px",
+      "description": "Defined in `.spectrum-StatusLight`, `.spectrum-StatusLight--sizeS`, `.spectrum-StatusLight--sizeL`, `.spectrum-StatusLight--sizeXL`. <br/>Used by `.spectrum-StatusLight`. <br/>Defaults to `var(--spectrum-font-size-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-statuslight-spacing-dot-to-label": {
+      "value": "var(--spectrum-text-to-visual-300)",
+      "description": "Defined in `.spectrum-StatusLight`, `.spectrum-StatusLight--sizeS`, `.spectrum-StatusLight--sizeL`, `.spectrum-StatusLight--sizeXL`. <br/>Used by `.spectrum-StatusLight:before`. <br/>Defaults to `var(--spectrum-status-light-text-to-visual-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-status-light-text-to-visual-100": {
+      "value": "var(--spectrum-text-to-visual-100)",
+      "description": "Used by `--spectrum-statuslight-spacing-dot-to-label`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-statuslight-spacing-top-to-dot": {
+      "value": "17px",
+      "description": "Defined in `.spectrum-StatusLight`, `.spectrum-StatusLight--sizeS`, `.spectrum-StatusLight--sizeL`, `.spectrum-StatusLight--sizeXL`. <br/>Used by `--spectrum-statuslight-spacing-computed-top-to-dot`. <br/>Defaults to `var(--spectrum-status-light-top-to-dot-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-status-light-top-to-dot-medium": {
+      "value": "11px",
+      "description": "Used by `--spectrum-statuslight-spacing-top-to-dot`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-statuslight-spacing-top-to-label": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-StatusLight`, `.spectrum-StatusLight--sizeS`, `.spectrum-StatusLight--sizeL`, `.spectrum-StatusLight--sizeXL`. <br/>Used by `.spectrum-StatusLight`, `--spectrum-statuslight-spacing-computed-top-to-dot`. <br/>Defaults to `var(--spectrum-component-top-to-text-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-statuslight-spacing-bottom-to-label": {
+      "value": "14px",
+      "description": "Defined in `.spectrum-StatusLight`, `.spectrum-StatusLight--sizeS`, `.spectrum-StatusLight--sizeL`, `.spectrum-StatusLight--sizeXL`. <br/>Used by `.spectrum-StatusLight`. <br/>Defaults to `var(--spectrum-component-bottom-to-text-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-statuslight-subdued-content-color-default": {
+      "value": "var(--spectrum-gray-700)",
+      "description": "Defined in `.spectrum-StatusLight`. <br/>Used by `.spectrum-StatusLight--neutral`. <br/>Defaults to `var(--spectrum-neutral-subdued-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-statuslight-nonsemantic-pink-color": {
+      "value": "var(--spectrum-pink-800)",
+      "description": "Defined in `.spectrum-StatusLight`. <br/>Used by `.spectrum-StatusLight--pink:before`. <br/>Defaults to `var(--spectrum-pink-visual-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-statuslight-nonsemantic-turquoise-color": {
+      "value": "var(--spectrum-turquoise-800)",
+      "description": "Defined in `.spectrum-StatusLight`. <br/>Used by `.spectrum-StatusLight--turquoise:before`. <br/>Defaults to `var(--spectrum-turquoise-visual-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-statuslight-nonsemantic-cinnamon-color": {
+      "value": "var(--spectrum-cinnamon-800)",
+      "description": "Defined in `.spectrum-StatusLight`. <br/>Used by `.spectrum-StatusLight--cinnamon:before`. <br/>Defaults to `var(--spectrum-cinnamon-visual-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-statuslight-nonsemantic-brown-color": {
+      "value": "var(--spectrum-brown-800)",
+      "description": "Defined in `.spectrum-StatusLight`. <br/>Used by `.spectrum-StatusLight--brown:before`. <br/>Defaults to `var(--spectrum-brown-visual-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-statuslight-nonsemantic-silver-color": {
+      "value": "var(--spectrum-silver-800)",
+      "description": "Defined in `.spectrum-StatusLight`. <br/>Used by `.spectrum-StatusLight--silver:before`. <br/>Defaults to `var(--spectrum-silver-visual-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-status-light-dot-size-small": {
+      "value": "8px",
+      "description": "Used by `--spectrum-statuslight-dot-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-status-light-text-to-visual-75": {
+      "value": "var(--spectrum-text-to-visual-75)",
+      "description": "Used by `--spectrum-statuslight-spacing-dot-to-label`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-status-light-top-to-dot-small": {
+      "value": "8px",
+      "description": "Used by `--spectrum-statuslight-spacing-top-to-dot`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-status-light-dot-size-large": {
+      "value": "12px",
+      "description": "Used by `--spectrum-statuslight-dot-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-status-light-text-to-visual-200": {
+      "value": "var(--spectrum-text-to-visual-200)",
+      "description": "Used by `--spectrum-statuslight-spacing-dot-to-label`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-status-light-top-to-dot-large": {
+      "value": "14px",
+      "description": "Used by `--spectrum-statuslight-spacing-top-to-dot`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-status-light-dot-size-extra-large": {
+      "value": "14px",
+      "description": "Used by `--spectrum-statuslight-dot-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-status-light-text-to-visual-300": {
+      "value": "var(--spectrum-text-to-visual-300)",
+      "description": "Used by `--spectrum-statuslight-spacing-dot-to-label`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-status-light-top-to-dot-extra-large": {
+      "value": "17px",
+      "description": "Used by `--spectrum-statuslight-spacing-top-to-dot`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-statuslight-border-width": {
+      "value": "1px",
+      "description": "Defined in `.spectrum-StatusLight`. <br/>Used by `.spectrum-StatusLight:before`. <br/>Defaults to `var(--spectrum-border-width-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-statuslight-line-height": {
+      "value": "1.3",
+      "description": "Defined in `.spectrum-StatusLight`. <br/>Used by `.spectrum-StatusLight`. <br/>Defaults to `var(--spectrum-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-statuslight-line-height-cjk": {
+      "value": "1.5",
+      "description": "Defined in `.spectrum-StatusLight`. <br/>Used by `.spectrum-StatusLight:lang(ja), .spectrum-StatusLight:lang(ko), .spectrum-StatusLight:lang(zh)`. <br/>Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-statuslight-content-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-StatusLight`. <br/>Used by `.spectrum-StatusLight`. <br/>Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-statuslight-semantic-neutral-color": {
+      "value": "var(--spectrum-gray-500)",
+      "description": "Defined in `.spectrum-StatusLight`. <br/>Used by `.spectrum-StatusLight--neutral:before`. <br/>Defaults to `var(--spectrum-neutral-visual-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-statuslight-semantic-negative-color": {
+      "value": "var(--spectrum-negative-color-800)",
+      "description": "Defined in `.spectrum-StatusLight`. <br/>Used by `.spectrum-StatusLight--negative:before`. <br/>Defaults to `var(--spectrum-negative-visual-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-statuslight-semantic-info-color": {
+      "value": "var(--spectrum-informative-color-800)",
+      "description": "Defined in `.spectrum-StatusLight`. <br/>Used by `.spectrum-StatusLight--info:before`. <br/>Defaults to `var(--spectrum-informative-visual-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-statuslight-semantic-notice-color": {
+      "value": "var(--spectrum-notice-color-800)",
+      "description": "Defined in `.spectrum-StatusLight`. <br/>Used by `.spectrum-StatusLight--notice:before`. <br/>Defaults to `var(--spectrum-notice-visual-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-statuslight-semantic-positive-color": {
+      "value": "var(--spectrum-positive-color-800)",
+      "description": "Defined in `.spectrum-StatusLight`. <br/>Used by `.spectrum-StatusLight--positive:before`. <br/>Defaults to `var(--spectrum-positive-visual-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-statuslight-nonsemantic-gray-color": {
+      "value": "var(--spectrum-gray-500)",
+      "description": "Defined in `.spectrum-StatusLight`. <br/>Used by `.spectrum-StatusLight--gray:before`. <br/>Defaults to `var(--spectrum-gray-visual-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-statuslight-nonsemantic-red-color": {
+      "value": "var(--spectrum-red-800)",
+      "description": "Defined in `.spectrum-StatusLight`. <br/>Used by `.spectrum-StatusLight--red:before`. <br/>Defaults to `var(--spectrum-red-visual-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-statuslight-nonsemantic-orange-color": {
+      "value": "var(--spectrum-orange-700)",
+      "description": "Defined in `.spectrum-StatusLight`. <br/>Used by `.spectrum-StatusLight--orange:before`. <br/>Defaults to `var(--spectrum-orange-visual-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-statuslight-nonsemantic-yellow-color": {
+      "value": "var(--spectrum-yellow-600)",
+      "description": "Defined in `.spectrum-StatusLight`. <br/>Used by `.spectrum-StatusLight--yellow:before`. <br/>Defaults to `var(--spectrum-yellow-visual-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-statuslight-nonsemantic-chartreuse-color": {
+      "value": "var(--spectrum-chartreuse-600)",
+      "description": "Defined in `.spectrum-StatusLight`. <br/>Used by `.spectrum-StatusLight--chartreuse:before`. <br/>Defaults to `var(--spectrum-chartreuse-visual-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-statuslight-nonsemantic-celery-color": {
+      "value": "var(--spectrum-celery-700)",
+      "description": "Defined in `.spectrum-StatusLight`. <br/>Used by `.spectrum-StatusLight--celery:before`. <br/>Defaults to `var(--spectrum-celery-visual-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-statuslight-nonsemantic-green-color": {
+      "value": "var(--spectrum-green-700)",
+      "description": "Defined in `.spectrum-StatusLight`. <br/>Used by `.spectrum-StatusLight--green:before`. <br/>Defaults to `var(--spectrum-green-visual-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-statuslight-nonsemantic-seafoam-color": {
+      "value": "var(--spectrum-seafoam-700)",
+      "description": "Defined in `.spectrum-StatusLight`. <br/>Used by `.spectrum-StatusLight--seafoam:before`. <br/>Defaults to `var(--spectrum-seafoam-visual-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-statuslight-nonsemantic-cyan-color": {
+      "value": "var(--spectrum-cyan-600)",
+      "description": "Defined in `.spectrum-StatusLight`. <br/>Used by `.spectrum-StatusLight--cyan:before`. <br/>Defaults to `var(--spectrum-cyan-visual-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-statuslight-nonsemantic-blue-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Defined in `.spectrum-StatusLight`. <br/>Used by `.spectrum-StatusLight--blue:before`. <br/>Defaults to `var(--spectrum-blue-visual-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-statuslight-nonsemantic-indigo-color": {
+      "value": "var(--spectrum-indigo-800)",
+      "description": "Defined in `.spectrum-StatusLight`. <br/>Used by `.spectrum-StatusLight--indigo:before`. <br/>Defaults to `var(--spectrum-indigo-visual-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-statuslight-nonsemantic-purple-color": {
+      "value": "var(--spectrum-purple-800)",
+      "description": "Defined in `.spectrum-StatusLight`. <br/>Used by `.spectrum-StatusLight--purple:before`. <br/>Defaults to `var(--spectrum-purple-visual-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-statuslight-nonsemantic-fuchsia-color": {
+      "value": "var(--spectrum-fuchsia-800)",
+      "description": "Defined in `.spectrum-StatusLight`. <br/>Used by `.spectrum-StatusLight--fuchsia:before`. <br/>Defaults to `var(--spectrum-fuchsia-visual-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-statuslight-nonsemantic-magenta-color": {
+      "value": "var(--spectrum-magenta-800)",
+      "description": "Defined in `.spectrum-StatusLight`. <br/>Used by `.spectrum-StatusLight--magenta:before`. <br/>Defaults to `var(--spectrum-magenta-visual-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-statuslight-spacing-computed-top-to-dot": {
+      "value": "calc(var(--mod-statuslight-spacing-top-to-dot, var(--spectrum-statuslight-spacing-top-to-dot)) - var(--mod-statuslight-spacing-top-to-label, var(--spectrum-statuslight-spacing-top-to-label)))",
+      "description": "Defined in `.spectrum-StatusLight:before`. <br/>Used by `.spectrum-StatusLight:before`. <br/>Defaults to `calc(var(--mod-statuslight-spacing-top-to-dot, var(--spectrum-statuslight-spacing-top-to-dot)) - var(--mod-statuslight-spacing-top-to-label, var(--spectrum-statuslight-spacing-top-to-label)))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-corner-radius-full": {
+      "value": "9999px",
+      "description": "Used by `--spectrum-statuslight-corner-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-100": {
+      "value": "32px",
+      "description": "Used by `--spectrum-statuslight-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-sans-font-family-stack": {
+      "description": "Used by `--spectrum-statuslight-font-family`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-regular-font-weight": {
+      "value": "400",
+      "description": "Used by `--spectrum-statuslight-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-default-font-style": {
+      "value": "normal",
+      "description": "Used by `--spectrum-statuslight-font-style`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-100": {
+      "value": "14px",
+      "description": "Used by `--spectrum-statuslight-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-statuslight-spacing-top-to-label`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-100": {
+      "value": "9px",
+      "description": "Used by `--spectrum-statuslight-spacing-bottom-to-label`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-600": {
+      "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))",
+      "description": "Used by `--spectrum-statuslight-subdued-content-color-default`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-pink-visual-color": {
+      "value": "var(--spectrum-pink-800)",
+      "description": "Used by `--spectrum-statuslight-nonsemantic-pink-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-turquoise-visual-color": {
+      "value": "var(--spectrum-turquoise-800)",
+      "description": "Used by `--spectrum-statuslight-nonsemantic-turquoise-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-cinnamon-visual-color": {
+      "value": "var(--spectrum-cinnamon-800)",
+      "description": "Used by `--spectrum-statuslight-nonsemantic-cinnamon-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-brown-visual-color": {
+      "value": "var(--spectrum-brown-800)",
+      "description": "Used by `--spectrum-statuslight-nonsemantic-brown-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-silver-visual-color": {
+      "value": "var(--spectrum-silver-800)",
+      "description": "Used by `--spectrum-statuslight-nonsemantic-silver-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-component-height-75": {
+      "value": "24px",
+      "description": "Used by `--spectrum-statuslight-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-75": {
+      "value": "12px",
+      "description": "Used by `--spectrum-statuslight-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-75": {
+      "value": "4px",
+      "description": "Used by `--spectrum-statuslight-spacing-top-to-label`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-75": {
+      "value": "5px",
+      "description": "Used by `--spectrum-statuslight-spacing-bottom-to-label`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-200": {
+      "value": "40px",
+      "description": "Used by `--spectrum-statuslight-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-200": {
+      "value": "16px",
+      "description": "Used by `--spectrum-statuslight-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-200": {
+      "value": "9px",
+      "description": "Used by `--spectrum-statuslight-spacing-top-to-label`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-200": {
+      "value": "11px",
+      "description": "Used by `--spectrum-statuslight-spacing-bottom-to-label`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-300": {
+      "value": "48px",
+      "description": "Used by `--spectrum-statuslight-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-300": {
+      "value": "18px",
+      "description": "Used by `--spectrum-statuslight-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-300": {
+      "value": "12px",
+      "description": "Used by `--spectrum-statuslight-spacing-top-to-label`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-300": {
+      "value": "14px",
+      "description": "Used by `--spectrum-statuslight-spacing-bottom-to-label`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-border-width-100": {
+      "value": "1px",
+      "description": "Used by `--spectrum-statuslight-border-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-line-height-100": {
+      "value": "1.3",
+      "description": "Used by `--spectrum-statuslight-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-cjk-line-height-100": {
+      "value": "1.5",
+      "description": "Used by `--spectrum-statuslight-line-height-cjk`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-statuslight-content-color-default`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-subdued-content-color-default": {
+      "value": "var(--spectrum-gray-700)",
+      "description": "Used by `--spectrum-statuslight-subdued-content-color-default`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-visual-color": {
+      "value": "var(--spectrum-gray-500)",
+      "description": "Used by `--spectrum-statuslight-semantic-neutral-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-visual-color": {
+      "value": "var(--spectrum-negative-color-800)",
+      "description": "Used by `--spectrum-statuslight-semantic-negative-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-informative-visual-color": {
+      "value": "var(--spectrum-informative-color-800)",
+      "description": "Used by `--spectrum-statuslight-semantic-info-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-notice-visual-color": {
+      "value": "var(--spectrum-notice-color-800)",
+      "description": "Used by `--spectrum-statuslight-semantic-notice-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-positive-visual-color": {
+      "value": "var(--spectrum-positive-color-800)",
+      "description": "Used by `--spectrum-statuslight-semantic-positive-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-gray-visual-color": {
+      "value": "var(--spectrum-gray-500)",
+      "description": "Used by `--spectrum-statuslight-nonsemantic-gray-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-red-visual-color": {
+      "value": "var(--spectrum-red-800)",
+      "description": "Used by `--spectrum-statuslight-nonsemantic-red-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-orange-visual-color": {
+      "value": "var(--spectrum-orange-700)",
+      "description": "Used by `--spectrum-statuslight-nonsemantic-orange-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-yellow-visual-color": {
+      "value": "var(--spectrum-yellow-600)",
+      "description": "Used by `--spectrum-statuslight-nonsemantic-yellow-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-chartreuse-visual-color": {
+      "value": "var(--spectrum-chartreuse-600)",
+      "description": "Used by `--spectrum-statuslight-nonsemantic-chartreuse-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-celery-visual-color": {
+      "value": "var(--spectrum-celery-700)",
+      "description": "Used by `--spectrum-statuslight-nonsemantic-celery-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-green-visual-color": {
+      "value": "var(--spectrum-green-700)",
+      "description": "Used by `--spectrum-statuslight-nonsemantic-green-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-seafoam-visual-color": {
+      "value": "var(--spectrum-seafoam-700)",
+      "description": "Used by `--spectrum-statuslight-nonsemantic-seafoam-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-cyan-visual-color": {
+      "value": "var(--spectrum-cyan-600)",
+      "description": "Used by `--spectrum-statuslight-nonsemantic-cyan-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-blue-visual-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Used by `--spectrum-statuslight-nonsemantic-blue-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-indigo-visual-color": {
+      "value": "var(--spectrum-indigo-800)",
+      "description": "Used by `--spectrum-statuslight-nonsemantic-indigo-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-purple-visual-color": {
+      "value": "var(--spectrum-purple-800)",
+      "description": "Used by `--spectrum-statuslight-nonsemantic-purple-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-fuchsia-visual-color": {
+      "value": "var(--spectrum-fuchsia-800)",
+      "description": "Used by `--spectrum-statuslight-nonsemantic-fuchsia-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-magenta-visual-color": {
+      "value": "var(--spectrum-magenta-800)",
+      "description": "Used by `--spectrum-statuslight-nonsemantic-magenta-color`.",
+      "control": "color",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {
+    "highcontrast-statuslight-content-color-default": {
+      "value": "var(--mod-statuslight-content-color-default, var(--spectrum-statuslight-content-color-default))",
+      "description": "Defined in `.spectrum-StatusLight`. <br/>Used by `.spectrum-StatusLight`. <br/>Defaults to `var(--mod-statuslight-content-color-default, var(--spectrum-statuslight-content-color-default))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-statuslight-subdued-content-color-default": {
+      "value": "var(--mod-statuslight-subdued-content-color-default, var(--spectrum-statuslight-subdued-content-color-default))",
+      "description": "Defined in `.spectrum-StatusLight`. <br/>Used by `.spectrum-StatusLight--neutral`. <br/>Defaults to `var(--mod-statuslight-subdued-content-color-default, var(--spectrum-statuslight-subdued-content-color-default))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/statuslight/stories/statuslight.stories.js b/components/statuslight/stories/statuslight.stories.js
index cec593c5216..a8dd5c72264 100644
--- a/components/statuslight/stories/statuslight.stories.js
+++ b/components/statuslight/stories/statuslight.stories.js
@@ -1,11 +1,13 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { StatusLightGroup } from "./statuslight.test.js";
 import { NonsemanticGroup, SemanticGroup, Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * Status lights describe the condition of an entity. They can be used to convey semantic meaning, such as statuses and categories.
  */
@@ -75,9 +77,7 @@ export default {
 		},
 		packageJson,
 		metadata,
-		status: {
-			type: "migrated",
-		},
+		cssprops: metadata.modifiers,
 	},
 	tags: ["migrated"],
 };
diff --git a/components/steplist/dist/metadata.json b/components/steplist/dist/metadata.json
index 27faf429c11..5abea316511 100644
--- a/components/steplist/dist/metadata.json
+++ b/components/steplist/dist/metadata.json
@@ -3,8 +3,8 @@
   "selectors": [
     ".spectrum-Steplist",
     ".spectrum-Steplist--interactive .spectrum-Steplist-item :focus .spectrum-Steplist-marker",
-    ".spectrum-Steplist--interactive .spectrum-Steplist-item.is-focused .spectrum-Steplist-marker",
     ".spectrum-Steplist--interactive .spectrum-Steplist-item:focus .spectrum-Steplist-marker",
+    ".spectrum-Steplist--interactive .spectrum-Steplist-item.is-focused .spectrum-Steplist-marker",
     ".spectrum-Steplist--interactive .spectrum-Steplist-label",
     ".spectrum-Steplist--interactive .spectrum-Steplist-markerContainer",
     ".spectrum-Steplist--small",
@@ -15,15 +15,6 @@
     ".spectrum-Steplist--small .spectrum-Steplist-item:last-child",
     ".spectrum-Steplist--small .spectrum-Steplist-item:last-child .spectrum-Steplist-markerContainer",
     ".spectrum-Steplist-item",
-    ".spectrum-Steplist-item.is-complete + .spectrum-Steplist-item .spectrum-Steplist-segment",
-    ".spectrum-Steplist-item.is-complete .spectrum-Steplist-label",
-    ".spectrum-Steplist-item.is-complete .spectrum-Steplist-marker",
-    ".spectrum-Steplist-item.is-complete .spectrum-Steplist-segment",
-    ".spectrum-Steplist-item.is-selected .spectrum-Steplist-label",
-    ".spectrum-Steplist-item.is-selected .spectrum-Steplist-marker",
-    ".spectrum-Steplist-item.is-selected .spectrum-Steplist-segment",
-    ".spectrum-Steplist-item.is-selected :focus",
-    ".spectrum-Steplist-item.is-selected:focus",
     ".spectrum-Steplist-item:first-child",
     ".spectrum-Steplist-item:first-child .spectrum-Steplist-label",
     ".spectrum-Steplist-item:first-child .spectrum-Steplist-markerContainer",
@@ -36,62 +27,264 @@
     ".spectrum-Steplist-item:only-child .spectrum-Steplist-label",
     ".spectrum-Steplist-item:only-child .spectrum-Steplist-label:dir(rtl)",
     ".spectrum-Steplist-item:only-child .spectrum-Steplist-markerContainer",
+    ".spectrum-Steplist-item.is-complete .spectrum-Steplist-label",
+    ".spectrum-Steplist-item.is-complete .spectrum-Steplist-marker",
+    ".spectrum-Steplist-item.is-complete .spectrum-Steplist-segment",
+    ".spectrum-Steplist-item.is-complete + .spectrum-Steplist-item .spectrum-Steplist-segment",
+    ".spectrum-Steplist-item.is-selected :focus",
+    ".spectrum-Steplist-item.is-selected .spectrum-Steplist-label",
+    ".spectrum-Steplist-item.is-selected .spectrum-Steplist-marker",
+    ".spectrum-Steplist-item.is-selected .spectrum-Steplist-segment",
+    ".spectrum-Steplist-item.is-selected:focus",
     ".spectrum-Steplist-label",
     ".spectrum-Steplist-label:dir(rtl)",
     ".spectrum-Steplist-marker",
     ".spectrum-Steplist-markerContainer",
     ".spectrum-Steplist-segment"
   ],
-  "modifiers": [
-    "--mod-steplist-complete-label-text-color",
-    "--mod-steplist-complete-marker-background-color",
-    "--mod-steplist-complete-segment-border-block-end-color",
-    "--mod-steplist-current-label-text-color",
-    "--mod-steplist-current-marker-color",
-    "--mod-steplist-current-marker-color-key-focus",
-    "--mod-steplist-incomplete-label-color",
-    "--mod-steplist-incomplete-marker-border-color",
-    "--mod-steplist-incomplete-segment-border-block-end-color",
-    "--mod-steplist-label-labelOffset",
-    "--mod-steplist-label-text-size",
-    "--mod-steplist-marker-diameter",
-    "--mod-steplist-marker-hitArea",
-    "--mod-steplist-segment-height",
-    "--mod-steplist-sidePadding",
-    "--mod-steplist-small-topPadding",
-    "--mod-steplist-step-width",
-    "--mod-steplist-topPadding"
-  ],
-  "component": [
-    "--spectrum-steplist-complete-label-text-color",
-    "--spectrum-steplist-complete-marker-background-color",
-    "--spectrum-steplist-complete-segment-border-block-end-color",
-    "--spectrum-steplist-current-label-text-color",
-    "--spectrum-steplist-current-marker-color",
-    "--spectrum-steplist-current-marker-color-key-focus",
-    "--spectrum-steplist-incomplete-label-color",
-    "--spectrum-steplist-incomplete-marker-border-color",
-    "--spectrum-steplist-incomplete-segment-border-block-end-color",
-    "--spectrum-steplist-label-labelOffset",
-    "--spectrum-steplist-label-text-size",
-    "--spectrum-steplist-marker-diameter",
-    "--spectrum-steplist-marker-hitArea",
-    "--spectrum-steplist-segment-height",
-    "--spectrum-steplist-sidePadding",
-    "--spectrum-steplist-small-topPadding",
-    "--spectrum-steplist-step-width",
-    "--spectrum-steplist-topPadding"
-  ],
-  "global": [
-    "--spectrum-gray-200",
-    "--spectrum-gray-600",
-    "--spectrum-gray-700",
-    "--spectrum-gray-800"
-  ],
-  "passthroughs": [],
-  "high-contrast": [
-    "--highcontrast-steplist-complete-marker-background-color",
-    "--highcontrast-steplist-current-marker-color",
-    "--highcontrast-steplist-current-marker-color-key-focus"
-  ]
+  "modifiers": {
+    "mod-steplist-topPadding": {
+      "description": "Used by `.spectrum-Steplist`. <br/>Defaults to `var(--spectrum-steplist-topPadding)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-steplist-sidePadding": {
+      "description": "Used by `.spectrum-Steplist`. <br/>Defaults to `var(--spectrum-steplist-sidePadding)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-steplist-current-marker-color-key-focus": {
+      "description": "Used by `.spectrum-Steplist--interactive .spectrum-Steplist-item :focus .spectrum-Steplist-marker, .spectrum-Steplist--interactive .spectrum-Steplist-item.is-focused .spectrum-Steplist-marker, .spectrum-Steplist--interactive .spectrum-Steplist-item:focus .spectrum-Steplist-marker`. <br/>Defaults to `var(--spectrum-steplist-current-marker-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-steplist-small-topPadding": {
+      "description": "Used by `.spectrum-Steplist--small`. <br/>Defaults to `var(--spectrum-steplist-small-topPadding)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-steplist-step-width": {
+      "description": "Used by `.spectrum-Steplist-item`, `.spectrum-Steplist-label`, `.spectrum-Steplist-segment`, `.spectrum-Steplist-item:first-child, .spectrum-Steplist-item:last-child`. <br/>Defaults to `var(--spectrum-steplist-step-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-steplist-complete-label-text-color": {
+      "description": "Used by `.spectrum-Steplist-item.is-complete .spectrum-Steplist-label`. <br/>Defaults to `var(--spectrum-steplist-complete-label-text-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-steplist-complete-marker-background-color": {
+      "description": "Used by `.spectrum-Steplist-item.is-complete .spectrum-Steplist-marker`. <br/>Defaults to `var(--spectrum-steplist-complete-marker-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-steplist-segment-height": {
+      "description": "Used by `.spectrum-Steplist-item.is-complete + .spectrum-Steplist-item .spectrum-Steplist-segment`, `.spectrum-Steplist-segment`. <br/>Defaults to `var(--spectrum-steplist-segment-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-steplist-current-label-text-color": {
+      "description": "Used by `.spectrum-Steplist-item.is-selected .spectrum-Steplist-label`. <br/>Defaults to `var(--spectrum-steplist-current-label-text-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-steplist-current-marker-color": {
+      "description": "Used by `.spectrum-Steplist-item.is-selected .spectrum-Steplist-marker`. <br/>Defaults to `var(--spectrum-steplist-current-marker-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-steplist-complete-segment-border-block-end-color": {
+      "description": "Used by `.spectrum-Steplist-item.is-complete .spectrum-Steplist-segment, .spectrum-Steplist-item.is-selected .spectrum-Steplist-segment`. <br/>Defaults to `var(--spectrum-steplist-complete-segment-border-block-end-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-steplist-label-labelOffset": {
+      "description": "Used by `.spectrum-Steplist-label`. <br/>Defaults to `var(--spectrum-steplist-label-labelOffset)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-steplist-label-text-size": {
+      "description": "Used by `.spectrum-Steplist-label`. <br/>Defaults to `var(--spectrum-steplist-label-text-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-steplist-incomplete-label-color": {
+      "description": "Used by `.spectrum-Steplist-label`. <br/>Defaults to `var(--spectrum-steplist-incomplete-label-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-steplist-marker-hitArea": {
+      "description": "Used by `.spectrum-Steplist-markerContainer`, `.spectrum-Steplist-item:last-child .spectrum-Steplist-markerContainer`, `.spectrum-Steplist-item:only-child .spectrum-Steplist-markerContainer`. <br/>Defaults to `var(--spectrum-steplist-marker-hitArea)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-steplist-marker-diameter": {
+      "description": "Used by `.spectrum-Steplist-marker`, `.spectrum-Steplist-segment`, `.spectrum-Steplist-item:last-child .spectrum-Steplist-segment`, `.spectrum-Steplist-item:first-child, .spectrum-Steplist-item:last-child`. <br/>Defaults to `var(--spectrum-steplist-marker-diameter)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-steplist-incomplete-marker-border-color": {
+      "description": "Used by `.spectrum-Steplist-marker`. <br/>Defaults to `var(--spectrum-steplist-incomplete-marker-border-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-steplist-incomplete-segment-border-block-end-color": {
+      "description": "Used by `.spectrum-Steplist-segment`. <br/>Defaults to `var(--spectrum-steplist-incomplete-segment-border-block-end-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-steplist-incomplete-marker-border-color": {
+      "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+      "description": "Defined in `.spectrum-Steplist`. <br/>Used by `.spectrum-Steplist-marker`. <br/>Defaults to `var(--spectrum-gray-200)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-steplist-incomplete-segment-border-block-end-color": {
+      "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+      "description": "Defined in `.spectrum-Steplist`. <br/>Used by `.spectrum-Steplist-segment`. <br/>Defaults to `var(--spectrum-gray-200)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-steplist-step-width": {
+      "value": "80px",
+      "description": "Defined in `.spectrum-Steplist`. <br/>Used by `.spectrum-Steplist-item`, `.spectrum-Steplist-label`, `.spectrum-Steplist-segment`, `.spectrum-Steplist-item:first-child, .spectrum-Steplist-item:last-child`. <br/>Defaults to `80px`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-steplist-marker-diameter": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-Steplist`. <br/>Used by `.spectrum-Steplist-marker`, `.spectrum-Steplist-segment`, `.spectrum-Steplist-item:last-child .spectrum-Steplist-segment`, `.spectrum-Steplist-item:first-child, .spectrum-Steplist-item:last-child`. <br/>Defaults to `8px`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-steplist-marker-hitArea": {
+      "value": "20px",
+      "description": "Defined in `.spectrum-Steplist`. <br/>Used by `.spectrum-Steplist-markerContainer`, `.spectrum-Steplist-item:last-child .spectrum-Steplist-markerContainer`, `.spectrum-Steplist-item:only-child .spectrum-Steplist-markerContainer`. <br/>Defaults to `20px`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-steplist-segment-height": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Steplist`. <br/>Used by `.spectrum-Steplist-item.is-complete + .spectrum-Steplist-item .spectrum-Steplist-segment`, `.spectrum-Steplist-segment`. <br/>Defaults to `2px`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-steplist-topPadding": {
+      "value": "22px",
+      "description": "Defined in `.spectrum-Steplist`. <br/>Used by `.spectrum-Steplist`. <br/>Defaults to `22px`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-steplist-small-topPadding": {
+      "value": "11px",
+      "description": "Defined in `.spectrum-Steplist`. <br/>Used by `.spectrum-Steplist--small`. <br/>Defaults to `11px`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-steplist-sidePadding": {
+      "value": "60px",
+      "description": "Defined in `.spectrum-Steplist`. <br/>Used by `.spectrum-Steplist`. <br/>Defaults to `60px`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-steplist-label-labelOffset": {
+      "value": "10px",
+      "description": "Defined in `.spectrum-Steplist`. <br/>Used by `.spectrum-Steplist-label`. <br/>Defaults to `10px`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-steplist-label-text-size": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-Steplist`. <br/>Used by `.spectrum-Steplist-label`. <br/>Defaults to `12px`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-steplist-current-label-text-color": {
+      "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+      "description": "Defined in `.spectrum-Steplist`. <br/>Used by `.spectrum-Steplist-item.is-selected .spectrum-Steplist-label`. <br/>Defaults to `var(--spectrum-gray-800)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-steplist-current-marker-color": {
+      "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+      "description": "Defined in `.spectrum-Steplist`. <br/>Used by `.spectrum-Steplist-item.is-selected .spectrum-Steplist-marker`. <br/>Defaults to `var(--spectrum-gray-800)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-steplist-complete-label-text-color": {
+      "value": "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))",
+      "description": "Defined in `.spectrum-Steplist`. <br/>Used by `.spectrum-Steplist-item.is-complete .spectrum-Steplist-label`. <br/>Defaults to `var(--spectrum-gray-700)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-steplist-complete-marker-background-color": {
+      "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))",
+      "description": "Defined in `.spectrum-Steplist`. <br/>Used by `.spectrum-Steplist-item.is-complete .spectrum-Steplist-marker`. <br/>Defaults to `var(--spectrum-gray-600)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-steplist-complete-segment-border-block-end-color": {
+      "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))",
+      "description": "Defined in `.spectrum-Steplist`. <br/>Used by `.spectrum-Steplist-item.is-complete .spectrum-Steplist-segment, .spectrum-Steplist-item.is-selected .spectrum-Steplist-segment`. <br/>Defaults to `var(--spectrum-gray-600)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-steplist-incomplete-label-color": {
+      "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))",
+      "description": "Defined in `.spectrum-Steplist`. <br/>Used by `.spectrum-Steplist-label`. <br/>Defaults to `var(--spectrum-gray-600)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-steplist-current-marker-color-key-focus": {
+      "description": "Used by `.spectrum-Steplist--interactive .spectrum-Steplist-item :focus .spectrum-Steplist-marker, .spectrum-Steplist--interactive .spectrum-Steplist-item.is-focused .spectrum-Steplist-marker, .spectrum-Steplist--interactive .spectrum-Steplist-item:focus .spectrum-Steplist-marker`.",
+      "control": "color",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-gray-200": {
+      "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+      "description": "Used by `--spectrum-steplist-incomplete-marker-border-color`, `--spectrum-steplist-incomplete-segment-border-block-end-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-800": {
+      "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+      "description": "Used by `--spectrum-steplist-current-label-text-color`, `--spectrum-steplist-current-marker-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-700": {
+      "value": "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))",
+      "description": "Used by `--spectrum-steplist-complete-label-text-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-600": {
+      "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))",
+      "description": "Used by `--spectrum-steplist-complete-marker-background-color`, `--spectrum-steplist-complete-segment-border-block-end-color`, `--spectrum-steplist-incomplete-label-color`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {
+    "highcontrast-steplist-current-marker-color-key-focus": {
+      "value": "var(--mod-steplist-current-marker-color-key-focus, var(--spectrum-steplist-current-marker-color-key-focus))",
+      "description": "Defined in `.spectrum-Steplist`. <br/>Used by `.spectrum-Steplist--interactive .spectrum-Steplist-item :focus .spectrum-Steplist-marker, .spectrum-Steplist--interactive .spectrum-Steplist-item.is-focused .spectrum-Steplist-marker, .spectrum-Steplist--interactive .spectrum-Steplist-item:focus .spectrum-Steplist-marker`. <br/>Defaults to `var(--mod-steplist-current-marker-color-key-focus, var(--spectrum-steplist-current-marker-color-key-focus))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-steplist-complete-marker-background-color": {
+      "value": "var(--mod-steplist-complete-marker-background-color, var(--spectrum-steplist-complete-marker-background-color))",
+      "description": "Defined in `.spectrum-Steplist`. <br/>Used by `.spectrum-Steplist-item.is-complete .spectrum-Steplist-marker`. <br/>Defaults to `var(--mod-steplist-complete-marker-background-color, var(--spectrum-steplist-complete-marker-background-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-steplist-current-marker-color": {
+      "value": "var(--mod-steplist-current-marker-color, var(--spectrum-steplist-current-marker-color))",
+      "description": "Defined in `.spectrum-Steplist`. <br/>Used by `.spectrum-Steplist-item.is-selected .spectrum-Steplist-marker`. <br/>Defaults to `var(--mod-steplist-current-marker-color, var(--spectrum-steplist-current-marker-color))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/steplist/stories/steplist.stories.js b/components/steplist/stories/steplist.stories.js
index 9266631e646..c426ab7f168 100644
--- a/components/steplist/stories/steplist.stories.js
+++ b/components/steplist/stories/steplist.stories.js
@@ -1,9 +1,11 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { SteplistGroup } from "./steplist.test.js";
 import { DocsSteplistGroup } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * A steplist can communicate the progress of a task or workflow. It can help users understand where they are in a process and what they need to do next.
  *
@@ -76,6 +78,10 @@ export default {
 	parameters: {
 		packageJson,
 		metadata,
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 };
 
diff --git a/components/stepper/dist/metadata.json b/components/stepper/dist/metadata.json
index a8b7ec49b01..d5cb9e9cc86 100644
--- a/components/stepper/dist/metadata.json
+++ b/components/stepper/dist/metadata.json
@@ -11,271 +11,1183 @@
     ".spectrum-NumberField-inputs .spectrum-Textfield.is-invalid .spectrum-NumberField-input",
     ".spectrum-NumberField-textfield",
     ".spectrum-NumberField-textfield.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon",
+    ".spectrum-NumberField:before",
+    ".spectrum-NumberField:focus-visible .spectrum-NumberField-inputs",
+    ".spectrum-NumberField:lang(ja)",
+    ".spectrum-NumberField:lang(ko)",
+    ".spectrum-NumberField:lang(zh)",
+    ".spectrum-NumberField:not(.is-disabled, .is-readOnly):focus",
+    ".spectrum-NumberField:not(.is-disabled, .is-readOnly):focus-visible",
+    ".spectrum-NumberField:not(.is-disabled, .is-readOnly):focus-visible:hover",
+    ".spectrum-NumberField:not(.is-disabled, .is-readOnly):focus-within",
+    ".spectrum-NumberField:not(.is-disabled, .is-readOnly):focus-within:hover",
+    ".spectrum-NumberField:not(.is-disabled, .is-readOnly):focus:hover",
+    ".spectrum-NumberField:not(.is-disabled, .is-readOnly):hover",
+    ".spectrum-NumberField:not(.is-disabled):focus",
+    ".spectrum-NumberField:not(.is-disabled):focus-visible",
+    ".spectrum-NumberField:not(.is-disabled):focus-visible:hover",
+    ".spectrum-NumberField:not(.is-disabled):focus-within",
+    ".spectrum-NumberField:not(.is-disabled):focus-within:hover",
+    ".spectrum-NumberField:not(.is-disabled):focus:hover",
+    ".spectrum-NumberField:not(.is-disabled):hover",
     ".spectrum-NumberField.is-disabled",
-    ".spectrum-NumberField.is-focused.is-hover:not(.is-disabled)",
-    ".spectrum-NumberField.is-focused.is-hover:not(.is-disabled, .is-readOnly)",
-    ".spectrum-NumberField.is-focused:not(.is-disabled)",
-    ".spectrum-NumberField.is-focused:not(.is-disabled):hover",
     ".spectrum-NumberField.is-focused:not(.is-disabled, .is-readOnly)",
     ".spectrum-NumberField.is-focused:not(.is-disabled, .is-readOnly):hover",
-    ".spectrum-NumberField.is-hover:not(.is-disabled)",
-    ".spectrum-NumberField.is-hover:not(.is-disabled):focus",
-    ".spectrum-NumberField.is-hover:not(.is-disabled):focus-visible",
-    ".spectrum-NumberField.is-hover:not(.is-disabled):focus-within",
+    ".spectrum-NumberField.is-focused:not(.is-disabled)",
+    ".spectrum-NumberField.is-focused:not(.is-disabled):hover",
+    ".spectrum-NumberField.is-focused.is-hover:not(.is-disabled, .is-readOnly)",
+    ".spectrum-NumberField.is-focused.is-hover:not(.is-disabled)",
     ".spectrum-NumberField.is-hover:not(.is-disabled, .is-readOnly)",
     ".spectrum-NumberField.is-hover:not(.is-disabled, .is-readOnly):focus",
     ".spectrum-NumberField.is-hover:not(.is-disabled, .is-readOnly):focus-visible",
     ".spectrum-NumberField.is-hover:not(.is-disabled, .is-readOnly):focus-within",
+    ".spectrum-NumberField.is-hover:not(.is-disabled)",
+    ".spectrum-NumberField.is-hover:not(.is-disabled):focus",
+    ".spectrum-NumberField.is-hover:not(.is-disabled):focus-visible",
+    ".spectrum-NumberField.is-hover:not(.is-disabled):focus-within",
     ".spectrum-NumberField.is-invalid",
-    ".spectrum-NumberField.is-keyboardFocused.is-hover:not(.is-disabled)",
-    ".spectrum-NumberField.is-keyboardFocused.is-hover:not(.is-disabled, .is-readOnly)",
-    ".spectrum-NumberField.is-keyboardFocused:not(.is-disabled)",
-    ".spectrum-NumberField.is-keyboardFocused:not(.is-disabled):hover",
     ".spectrum-NumberField.is-keyboardFocused:not(.is-disabled, .is-readOnly)",
     ".spectrum-NumberField.is-keyboardFocused:not(.is-disabled, .is-readOnly) .spectrum-NumberField-inputs",
     ".spectrum-NumberField.is-keyboardFocused:not(.is-disabled, .is-readOnly):hover",
+    ".spectrum-NumberField.is-keyboardFocused:not(.is-disabled)",
+    ".spectrum-NumberField.is-keyboardFocused:not(.is-disabled):hover",
+    ".spectrum-NumberField.is-keyboardFocused.is-hover:not(.is-disabled, .is-readOnly)",
+    ".spectrum-NumberField.is-keyboardFocused.is-hover:not(.is-disabled)",
     ".spectrum-NumberField.is-readOnly",
     ".spectrum-NumberField.spectrum-NumberField--hiddenStepper",
     ".spectrum-NumberField.spectrum-NumberField--hiddenStepper .spectrum-NumberField-textfield",
     ".spectrum-NumberField.spectrum-NumberField--hiddenStepper .spectrum-NumberField-textfield .spectrum-NumberField-input",
-    ".spectrum-NumberField.spectrum-NumberField--hiddenStepper .spectrum-NumberField-textfield.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon",
     ".spectrum-NumberField.spectrum-NumberField--hiddenStepper .spectrum-NumberField-textfield:not(:has(.spectrum-Textfield-validationIcon)) .spectrum-NumberField-input",
+    ".spectrum-NumberField.spectrum-NumberField--hiddenStepper .spectrum-NumberField-textfield.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon",
     ".spectrum-NumberField.spectrum-NumberField--sideLabel",
     ".spectrum-NumberField.spectrum-NumberField--sideLabel .spectrum-NumberField-fieldLabel",
     ".spectrum-NumberField.spectrum-NumberField--sideLabel .spectrum-NumberField-helpText",
     ".spectrum-NumberField.spectrum-NumberField--sideLabel .spectrum-NumberField-inputs",
     ".spectrum-NumberField.spectrum-NumberField--sizeL",
     ".spectrum-NumberField.spectrum-NumberField--sizeS",
-    ".spectrum-NumberField.spectrum-NumberField--sizeXL",
-    ".spectrum-NumberField:before",
-    ".spectrum-NumberField:focus-visible .spectrum-NumberField-inputs",
-    ".spectrum-NumberField:lang(ja)",
-    ".spectrum-NumberField:lang(ko)",
-    ".spectrum-NumberField:lang(zh)",
-    ".spectrum-NumberField:not(.is-disabled):focus",
-    ".spectrum-NumberField:not(.is-disabled):focus-visible",
-    ".spectrum-NumberField:not(.is-disabled):focus-visible:hover",
-    ".spectrum-NumberField:not(.is-disabled):focus-within",
-    ".spectrum-NumberField:not(.is-disabled):focus-within:hover",
-    ".spectrum-NumberField:not(.is-disabled):focus:hover",
-    ".spectrum-NumberField:not(.is-disabled):hover",
-    ".spectrum-NumberField:not(.is-disabled, .is-readOnly):focus",
-    ".spectrum-NumberField:not(.is-disabled, .is-readOnly):focus-visible",
-    ".spectrum-NumberField:not(.is-disabled, .is-readOnly):focus-visible:hover",
-    ".spectrum-NumberField:not(.is-disabled, .is-readOnly):focus-within",
-    ".spectrum-NumberField:not(.is-disabled, .is-readOnly):focus-within:hover",
-    ".spectrum-NumberField:not(.is-disabled, .is-readOnly):focus:hover",
-    ".spectrum-NumberField:not(.is-disabled, .is-readOnly):hover"
-  ],
-  "modifiers": [
-    "--mod-numberfield-background-color",
-    "--mod-numberfield-background-color-disabled",
-    "--mod-numberfield-block-size",
-    "--mod-numberfield-border-color",
-    "--mod-numberfield-border-color-disabled",
-    "--mod-numberfield-border-color-focus",
-    "--mod-numberfield-border-color-focus-hover",
-    "--mod-numberfield-border-color-focus-hover-invalid",
-    "--mod-numberfield-border-color-focus-invalid",
-    "--mod-numberfield-border-color-hover",
-    "--mod-numberfield-border-color-hover-invalid",
-    "--mod-numberfield-border-color-invalid",
-    "--mod-numberfield-border-color-invalid-default",
-    "--mod-numberfield-border-color-invalid-focus",
-    "--mod-numberfield-border-color-invalid-focus-hover",
-    "--mod-numberfield-border-color-invalid-hover",
-    "--mod-numberfield-border-color-invalid-keyboard-focus",
-    "--mod-numberfield-border-color-keyboard-focus",
-    "--mod-numberfield-border-color-keyboard-focus-invalid",
-    "--mod-numberfield-border-radius",
-    "--mod-numberfield-border-width",
-    "--mod-numberfield-button-inline-offset",
-    "--mod-numberfield-focus-indicator-color",
-    "--mod-numberfield-focus-indicator-gap",
-    "--mod-numberfield-focus-indicator-width",
-    "--mod-numberfield-font-family",
-    "--mod-numberfield-font-size",
-    "--mod-numberfield-font-style",
-    "--mod-numberfield-font-weight",
-    "--mod-numberfield-hidden-stepper-min-inline-size",
-    "--mod-numberfield-inline-size",
-    "--mod-numberfield-label-to-field",
-    "--mod-numberfield-line-height",
-    "--mod-numberfield-min-inline-size",
-    "--mod-numberfield-spacing-block-end-edge-to-text",
-    "--mod-numberfield-spacing-block-start-edge-to-text",
-    "--mod-numberfield-spacing-field-to-helptext",
-    "--mod-numberfield-text-color",
-    "--mod-numberfield-text-color-disabled",
-    "--mod-numberfield-text-color-focus",
-    "--mod-numberfield-text-color-focus-hover",
-    "--mod-numberfield-text-color-hover",
-    "--mod-numberfield-text-color-keyboard-focus"
-  ],
-  "component": [],
-  "global": [
-    "--spectrum-border-width-200",
-    "--spectrum-cjk-line-height-100",
-    "--spectrum-component-bottom-to-text-100",
-    "--spectrum-component-bottom-to-text-200",
-    "--spectrum-component-bottom-to-text-300",
-    "--spectrum-component-bottom-to-text-75",
-    "--spectrum-component-edge-to-text-100",
-    "--spectrum-component-edge-to-text-200",
-    "--spectrum-component-edge-to-text-300",
-    "--spectrum-component-edge-to-text-75",
-    "--spectrum-component-height-100",
-    "--spectrum-component-height-200",
-    "--spectrum-component-height-300",
-    "--spectrum-component-height-75",
-    "--spectrum-component-top-to-text-100",
-    "--spectrum-component-top-to-text-200",
-    "--spectrum-component-top-to-text-300",
-    "--spectrum-component-top-to-text-75",
-    "--spectrum-component-top-to-workflow-icon-100",
-    "--spectrum-component-top-to-workflow-icon-200",
-    "--spectrum-component-top-to-workflow-icon-300",
-    "--spectrum-component-top-to-workflow-icon-75",
-    "--spectrum-corner-radius-medium-size-extra-large",
-    "--spectrum-corner-radius-medium-size-large",
-    "--spectrum-corner-radius-medium-size-medium",
-    "--spectrum-corner-radius-medium-size-small",
-    "--spectrum-default-font-style",
-    "--spectrum-disabled-border-color",
-    "--spectrum-disabled-content-color",
-    "--spectrum-field-default-width-extra-large",
-    "--spectrum-field-default-width-large",
-    "--spectrum-field-default-width-medium",
-    "--spectrum-field-default-width-small",
-    "--spectrum-field-label-to-component",
-    "--spectrum-focus-indicator-color",
-    "--spectrum-focus-indicator-gap",
-    "--spectrum-focus-indicator-thickness",
-    "--spectrum-font-size-100",
-    "--spectrum-font-size-200",
-    "--spectrum-font-size-300",
-    "--spectrum-font-size-75",
-    "--spectrum-gray-25",
-    "--spectrum-gray-300",
-    "--spectrum-gray-400",
-    "--spectrum-gray-800",
-    "--spectrum-gray-900",
-    "--spectrum-help-text-to-component",
-    "--spectrum-in-field-button-edge-to-fill-extra-large",
-    "--spectrum-in-field-button-edge-to-fill-large",
-    "--spectrum-in-field-button-edge-to-fill-medium",
-    "--spectrum-in-field-button-side-edge-to-fill-extra-large",
-    "--spectrum-in-field-button-side-edge-to-fill-large",
-    "--spectrum-in-field-button-side-edge-to-fill-medium",
-    "--spectrum-in-field-button-side-edge-to-fill-small",
-    "--spectrum-in-field-stepper-to-end-extra-large",
-    "--spectrum-in-field-stepper-to-end-large",
-    "--spectrum-in-field-stepper-to-end-medium",
-    "--spectrum-in-field-stepper-to-end-small",
-    "--spectrum-line-height-100",
-    "--spectrum-negative-border-color-default",
-    "--spectrum-negative-border-color-focus",
-    "--spectrum-negative-border-color-focus-hover",
-    "--spectrum-negative-border-color-hover",
-    "--spectrum-negative-border-color-key-focus",
-    "--spectrum-neutral-content-color-default",
-    "--spectrum-neutral-content-color-focus",
-    "--spectrum-neutral-content-color-focus-hover",
-    "--spectrum-neutral-content-color-hover",
-    "--spectrum-neutral-content-color-key-focus",
-    "--spectrum-number-field-minimum-width-multiplier",
-    "--spectrum-number-field-visual-to-in-field-stepper-extra-large",
-    "--spectrum-number-field-visual-to-in-field-stepper-large",
-    "--spectrum-number-field-visual-to-in-field-stepper-medium",
-    "--spectrum-number-field-visual-to-in-field-stepper-small",
-    "--spectrum-number-field-with-stepper-minimum-width-extra-large",
-    "--spectrum-number-field-with-stepper-minimum-width-large",
-    "--spectrum-number-field-with-stepper-minimum-width-medium",
-    "--spectrum-number-field-with-stepper-minimum-width-small",
-    "--spectrum-numberfield-alert-icon-size",
-    "--spectrum-numberfield-background-color",
-    "--spectrum-numberfield-background-color-disabled",
-    "--spectrum-numberfield-block-size",
-    "--spectrum-numberfield-border-color-default",
-    "--spectrum-numberfield-border-color-disabled",
-    "--spectrum-numberfield-border-color-focus",
-    "--spectrum-numberfield-border-color-focus-hover",
-    "--spectrum-numberfield-border-color-hover",
-    "--spectrum-numberfield-border-color-invalid-default",
-    "--spectrum-numberfield-border-color-invalid-focus",
-    "--spectrum-numberfield-border-color-invalid-focus-hover",
-    "--spectrum-numberfield-border-color-invalid-hover",
-    "--spectrum-numberfield-border-color-invalid-keyboard-focus",
-    "--spectrum-numberfield-border-color-keyboard-focus",
-    "--spectrum-numberfield-border-radius",
-    "--spectrum-numberfield-border-width",
-    "--spectrum-numberfield-button-container-size",
-    "--spectrum-numberfield-button-inline-offset",
-    "--spectrum-numberfield-button-inline-padding",
-    "--spectrum-numberfield-focus-indicator-color",
-    "--spectrum-numberfield-focus-indicator-gap",
-    "--spectrum-numberfield-focus-indicator-width",
-    "--spectrum-numberfield-font-family",
-    "--spectrum-numberfield-font-size",
-    "--spectrum-numberfield-font-style",
-    "--spectrum-numberfield-font-weight",
-    "--spectrum-numberfield-hidden-stepper-min-inline-size",
-    "--spectrum-numberfield-inline-size",
-    "--spectrum-numberfield-line-height",
-    "--spectrum-numberfield-min-inline-size",
-    "--spectrum-numberfield-spacing-block-end-edge-to-alert-icon",
-    "--spectrum-numberfield-spacing-block-end-edge-to-text",
-    "--spectrum-numberfield-spacing-block-start-edge-to-alert-icon",
-    "--spectrum-numberfield-spacing-block-start-edge-to-text",
-    "--spectrum-numberfield-spacing-field-to-helptext",
-    "--spectrum-numberfield-spacing-inline-edge-to-text",
-    "--spectrum-numberfield-spacing-label-to-field",
-    "--spectrum-numberfield-spacing-min-inline-end-text-to-stepper",
-    "--spectrum-numberfield-spacing-min-inline-end-value-to-icon",
-    "--spectrum-numberfield-spacing-side-label-to-field",
-    "--spectrum-numberfield-spacing-validation-icon-to-stepper",
-    "--spectrum-numberfield-text-color",
-    "--spectrum-numberfield-text-color-disabled",
-    "--spectrum-numberfield-text-color-focus",
-    "--spectrum-numberfield-text-color-focus-hover",
-    "--spectrum-numberfield-text-color-hover",
-    "--spectrum-numberfield-text-color-keyboard-focus",
-    "--spectrum-regular-font-weight",
-    "--spectrum-sans-font-family-stack",
-    "--spectrum-spacing-200",
-    "--spectrum-text-to-visual-100",
-    "--spectrum-text-to-visual-200",
-    "--spectrum-text-to-visual-300",
-    "--spectrum-text-to-visual-75",
-    "--spectrum-workflow-icon-size-100",
-    "--spectrum-workflow-icon-size-200",
-    "--spectrum-workflow-icon-size-300",
-    "--spectrum-workflow-icon-size-75"
-  ],
-  "passthroughs": [
-    "--mod-textfield-background-color",
-    "--mod-textfield-background-color-disabled",
-    "--mod-textfield-font-family",
-    "--mod-textfield-font-size",
-    "--mod-textfield-font-style",
-    "--mod-textfield-font-weight",
-    "--mod-textfield-height",
-    "--mod-textfield-icon-spacing-block-invalid",
-    "--mod-textfield-spacing-block-end",
-    "--mod-textfield-spacing-block-start",
-    "--mod-textfield-text-color-default",
-    "--mod-textfield-text-color-disabled",
-    "--mod-textfield-text-color-focus",
-    "--mod-textfield-width"
+    ".spectrum-NumberField.spectrum-NumberField--sizeXL"
   ],
-  "high-contrast": [
-    "--highcontrast-numberfield-background-color",
-    "--highcontrast-numberfield-border-color",
-    "--highcontrast-numberfield-border-color-focus",
-    "--highcontrast-numberfield-border-color-focus-hover",
-    "--highcontrast-numberfield-border-color-hover",
-    "--highcontrast-numberfield-border-color-keyboard-focus",
-    "--highcontrast-numberfield-focus-indicator-color",
-    "--highcontrast-textfield-border-color"
-  ]
+  "modifiers": {
+    "mod-numberfield-border-radius": {
+      "description": "Used by `--spectrum-numberfield-border-radius`. <br/>Defaults to `var(--spectrum-corner-radius-medium-size-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-numberfield-border-width": {
+      "description": "Used by `--spectrum-numberfield-border-width`, `--mod-textfield-height`. <br/>Defaults to `var(--spectrum-numberfield-border-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-numberfield-border-color": {
+      "description": "Defined in `.spectrum-NumberField.is-hover:not(.is-disabled, .is-readOnly)`, `.spectrum-NumberField.is-invalid`, `.spectrum-NumberField.is-focused:not(.is-disabled, .is-readOnly), .spectrum-NumberField:not(.is-disabled, .is-readOnly):focus, .spectrum-NumberField:not(.is-disabled, .is-readOnly):focus-within`, `.spectrum-NumberField.is-focused.is-hover:not(.is-disabled, .is-readOnly), .spectrum-NumberField.is-hover:not(.is-disabled, .is-readOnly):focus, .spectrum-NumberField.is-hover:not(.is-disabled, .is-readOnly):focus-within`, `.spectrum-NumberField.is-keyboardFocused:not(.is-disabled, .is-readOnly), .spectrum-NumberField:not(.is-disabled, .is-readOnly):focus-visible, .spectrum-NumberField:not(.is-disabled, .is-readOnly):focus-within`, `.spectrum-NumberField.is-hover:not(.is-disabled, .is-readOnly):focus-visible, .spectrum-NumberField.is-hover:not(.is-disabled, .is-readOnly):focus-within, .spectrum-NumberField.is-keyboardFocused.is-hover:not(.is-disabled, .is-readOnly)`, `.spectrum-NumberField.is-disabled, .spectrum-NumberField.is-readOnly`, `.spectrum-NumberField:not(.is-disabled, .is-readOnly):hover`, `.spectrum-NumberField.is-focused:not(.is-disabled, .is-readOnly):hover, .spectrum-NumberField.is-keyboardFocused:not(.is-disabled, .is-readOnly):hover, .spectrum-NumberField:not(.is-disabled, .is-readOnly):focus-visible:hover, .spectrum-NumberField:not(.is-disabled, .is-readOnly):focus-within:hover, .spectrum-NumberField:not(.is-disabled, .is-readOnly):focus:hover`. <br/>Used by `--spectrum-numberfield-border-color-default`. <br/>Defaults to `var(--spectrum-gray-300)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-numberfield-border-color-hover": {
+      "description": "Defined in `.spectrum-NumberField.is-invalid`. <br/>Used by `--spectrum-numberfield-border-color-hover`, `--mod-numberfield-border-color`. <br/>Defaults to `var(--spectrum-numberfield-border-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-numberfield-border-color-focus": {
+      "description": "Defined in `.spectrum-NumberField.is-invalid`. <br/>Used by `--spectrum-numberfield-border-color-focus`, `--mod-numberfield-border-color`. <br/>Defaults to `var(--spectrum-numberfield-border-color-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-numberfield-border-color-keyboard-focus": {
+      "description": "Defined in `.spectrum-NumberField.is-invalid`. <br/>Used by `--spectrum-numberfield-border-color-keyboard-focus`, `--mod-numberfield-border-color`. <br/>Defaults to `var(--spectrum-numberfield-border-color-keyboard-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-numberfield-border-color-focus-hover": {
+      "description": "Defined in `.spectrum-NumberField.is-invalid`. <br/>Used by `--spectrum-numberfield-border-color-focus-hover`, `--mod-numberfield-border-color`. <br/>Defaults to `var(--spectrum-numberfield-border-color-focus-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-numberfield-border-color-disabled": {
+      "description": "Used by `--spectrum-numberfield-border-color-disabled`. <br/>Defaults to `var(--spectrum-disabled-border-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-numberfield-border-color-invalid-default": {
+      "description": "Used by `--spectrum-numberfield-border-color-invalid-default`. <br/>Defaults to `var(--spectrum-negative-border-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-numberfield-border-color-invalid-hover": {
+      "description": "Used by `--spectrum-numberfield-border-color-invalid-hover`. <br/>Defaults to `var(--spectrum-negative-border-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-numberfield-border-color-invalid-focus": {
+      "description": "Used by `--spectrum-numberfield-border-color-invalid-focus`. <br/>Defaults to `var(--spectrum-negative-border-color-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-numberfield-border-color-invalid-focus-hover": {
+      "description": "Used by `--spectrum-numberfield-border-color-invalid-focus-hover`. <br/>Defaults to `var(--spectrum-negative-border-color-focus-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-numberfield-border-color-invalid-keyboard-focus": {
+      "description": "Used by `--spectrum-numberfield-border-color-invalid-keyboard-focus`. <br/>Defaults to `var(--spectrum-negative-border-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-numberfield-text-color": {
+      "description": "Used by `--spectrum-numberfield-text-color`, `--mod-textfield-text-color-default`. <br/>Defaults to `var(--spectrum-numberfield-text-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-numberfield-text-color-hover": {
+      "description": "Used by `--spectrum-numberfield-text-color-hover`, `--mod-textfield-text-color-default`. <br/>Defaults to `var(--spectrum-numberfield-text-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-numberfield-text-color-focus": {
+      "description": "Used by `--spectrum-numberfield-text-color-focus`, `--mod-textfield-text-color-focus`. <br/>Defaults to `var(--spectrum-numberfield-text-color-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-numberfield-text-color-focus-hover": {
+      "description": "Used by `--spectrum-numberfield-text-color-focus-hover`, `--mod-textfield-text-color-focus`. <br/>Defaults to `var(--spectrum-numberfield-text-color-focus-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-numberfield-text-color-keyboard-focus": {
+      "description": "Used by `--spectrum-numberfield-text-color-keyboard-focus`, `--mod-textfield-text-color-default`. <br/>Defaults to `var(--spectrum-numberfield-text-color-keyboard-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-numberfield-text-color-disabled": {
+      "description": "Used by `--spectrum-numberfield-text-color-disabled`, `--mod-textfield-text-color-disabled`. <br/>Defaults to `var(--spectrum-numberfield-text-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-numberfield-background-color": {
+      "description": "Defined in `.spectrum-NumberField.is-disabled`. <br/>Used by `--spectrum-numberfield-background-color`, `--mod-textfield-background-color`. <br/>Defaults to `var(--spectrum-numberfield-background-color, transparent)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-numberfield-background-color-disabled": {
+      "description": "Used by `--spectrum-numberfield-background-color-disabled`, `--mod-textfield-background-color-disabled`. <br/>Defaults to `var(--spectrum-numberfield-background-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-numberfield-font-family": {
+      "description": "Used by `--spectrum-numberfield-font-family`, `--mod-textfield-font-family`. <br/>Defaults to `var(--spectrum-numberfield-font-family)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-numberfield-font-weight": {
+      "description": "Used by `--spectrum-numberfield-font-weight`, `--mod-textfield-font-weight`. <br/>Defaults to `var(--spectrum-numberfield-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-numberfield-font-size": {
+      "description": "Used by `--spectrum-numberfield-font-size`, `--mod-textfield-font-size`. <br/>Defaults to `var(--spectrum-font-size-300)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-numberfield-font-style": {
+      "description": "Used by `--spectrum-numberfield-font-style`, `--mod-textfield-font-style`. <br/>Defaults to `var(--spectrum-numberfield-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-numberfield-line-height": {
+      "description": "Used by `--spectrum-numberfield-line-height`. <br/>Defaults to `var(--spectrum-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-numberfield-focus-indicator-width": {
+      "description": "Used by `--spectrum-numberfield-focus-indicator-width`. <br/>Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-numberfield-focus-indicator-gap": {
+      "description": "Used by `--spectrum-numberfield-focus-indicator-gap`. <br/>Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-numberfield-focus-indicator-color": {
+      "description": "Used by `--spectrum-numberfield-focus-indicator-color`. <br/>Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-numberfield-block-size": {
+      "description": "Used by `--spectrum-numberfield-block-size`, `--mod-textfield-height`. <br/>Defaults to `var(--spectrum-component-height-300)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-numberfield-inline-size": {
+      "description": "Used by `--spectrum-numberfield-inline-size`. <br/>Defaults to `var(--spectrum-field-default-width-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-numberfield-min-inline-size": {
+      "description": "Used by `--spectrum-numberfield-min-inline-size`. <br/>Defaults to `var(--spectrum-number-field-with-stepper-minimum-width-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-numberfield-button-inline-offset": {
+      "description": "Used by `--spectrum-numberfield-button-inline-offset`, `.spectrum-NumberField-buttons`. <br/>Defaults to `var(--spectrum-numberfield-button-inline-offset, 0px)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-numberfield-spacing-block-start-edge-to-text": {
+      "description": "Used by `--mod-textfield-spacing-block-start`. <br/>Defaults to `var(--spectrum-numberfield-spacing-block-start-edge-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-numberfield-spacing-block-end-edge-to-text": {
+      "description": "Used by `--mod-textfield-spacing-block-end`. <br/>Defaults to `var(--spectrum-numberfield-spacing-block-end-edge-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-numberfield-border-color-invalid": {
+      "description": "Used by `--mod-numberfield-border-color`. <br/>Defaults to `var(--spectrum-numberfield-border-color-invalid-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-numberfield-border-color-hover-invalid": {
+      "description": "Used by `--mod-numberfield-border-color-hover`. <br/>Defaults to `var(--spectrum-numberfield-border-color-invalid-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-numberfield-border-color-focus-invalid": {
+      "description": "Used by `--mod-numberfield-border-color-focus`. <br/>Defaults to `var(--spectrum-numberfield-border-color-invalid-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-numberfield-border-color-focus-hover-invalid": {
+      "description": "Used by `--mod-numberfield-border-color-focus-hover`. <br/>Defaults to `var(--spectrum-numberfield-border-color-invalid-focus-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-numberfield-border-color-keyboard-focus-invalid": {
+      "description": "Used by `--mod-numberfield-border-color-keyboard-focus`. <br/>Defaults to `var(--spectrum-numberfield-border-color-invalid-keyboard-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-numberfield-hidden-stepper-min-inline-size": {
+      "description": "Used by `.spectrum-NumberField.spectrum-NumberField--hiddenStepper`. <br/>Defaults to `var(--spectrum-numberfield-hidden-stepper-min-inline-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-numberfield-label-to-field": {
+      "description": "Used by `.spectrum-NumberField-fieldLabel`. <br/>Defaults to `var(--spectrum-numberfield-spacing-label-to-field)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-numberfield-spacing-field-to-helptext": {
+      "description": "Used by `.spectrum-NumberField-helpText`. <br/>Defaults to `var(--spectrum-numberfield-spacing-field-to-helptext)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {},
+  "global": {
+    "spectrum-numberfield-border-radius": {
+      "value": "var(--mod-numberfield-border-radius, var(--spectrum-corner-radius-medium-size-extra-large))",
+      "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.spectrum-NumberField--sizeS`, `.spectrum-NumberField.spectrum-NumberField--sizeL`, `.spectrum-NumberField.spectrum-NumberField--sizeXL`. <br/>Used by `.spectrum-NumberField-inputs`, `.spectrum-NumberField-textfield`. <br/>Defaults to `var(--mod-numberfield-border-radius, var(--spectrum-corner-radius-medium-size-extra-large))`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-medium-size-medium": {
+      "value": "8px",
+      "description": "Used by `--spectrum-numberfield-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-numberfield-border-width": {
+      "value": "var(--mod-numberfield-border-width, var(--spectrum-border-width-200))",
+      "description": "Defined in `.spectrum-NumberField`. <br/>Used by `--spectrum-numberfield-spacing-inline-edge-to-text`, `--mod-textfield-icon-spacing-block-invalid`, `--mod-textfield-height`, `.spectrum-NumberField-textfield`. <br/>Defaults to `var(--mod-numberfield-border-width, var(--spectrum-border-width-200))`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-border-width-200": {
+      "value": "2px",
+      "description": "Used by `--spectrum-numberfield-border-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-numberfield-border-color-default": {
+      "value": "var(--highcontrast-numberfield-border-color, var(--mod-numberfield-border-color, var(--spectrum-gray-300)))",
+      "description": "Defined in `.spectrum-NumberField`. <br/>Used by `.spectrum-NumberField-textfield`. <br/>Defaults to `var(--highcontrast-numberfield-border-color, var(--mod-numberfield-border-color, var(--spectrum-gray-300)))`, if not set.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-gray-300": {
+      "value": "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))",
+      "description": "Used by `--spectrum-numberfield-border-color-default`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-numberfield-border-color-hover": {
+      "value": "var(--highcontrast-numberfield-border-color-hover, var(--mod-numberfield-border-color-hover, var(--spectrum-gray-400)))",
+      "description": "Defined in `.spectrum-NumberField`. <br/>Used by `--mod-numberfield-border-color`. <br/>Defaults to `var(--highcontrast-numberfield-border-color-hover, var(--mod-numberfield-border-color-hover, var(--spectrum-gray-400)))`, if not set.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-gray-400": {
+      "value": "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))",
+      "description": "Used by `--spectrum-numberfield-border-color-hover`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-numberfield-border-color-focus": {
+      "value": "var(--highcontrast-numberfield-border-color-focus, var(--mod-numberfield-border-color-focus, var(--spectrum-gray-800)))",
+      "description": "Defined in `.spectrum-NumberField`. <br/>Used by `--mod-numberfield-border-color`. <br/>Defaults to `var(--highcontrast-numberfield-border-color-focus, var(--mod-numberfield-border-color-focus, var(--spectrum-gray-800)))`, if not set.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-gray-800": {
+      "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+      "description": "Used by `--spectrum-numberfield-border-color-focus`, `--spectrum-numberfield-border-color-keyboard-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-numberfield-border-color-keyboard-focus": {
+      "value": "var(--highcontrast-numberfield-border-color-keyboard-focus, var(--mod-numberfield-border-color-keyboard-focus, var(--spectrum-gray-800)))",
+      "description": "Defined in `.spectrum-NumberField`. <br/>Used by `--mod-numberfield-border-color`. <br/>Defaults to `var(--highcontrast-numberfield-border-color-keyboard-focus, var(--mod-numberfield-border-color-keyboard-focus, var(--spectrum-gray-800)))`, if not set.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-numberfield-border-color-focus-hover": {
+      "value": "var(--highcontrast-numberfield-border-color-focus-hover, var(--mod-numberfield-border-color-focus-hover, var(--spectrum-gray-900)))",
+      "description": "Defined in `.spectrum-NumberField`. <br/>Used by `--mod-numberfield-border-color`. <br/>Defaults to `var(--highcontrast-numberfield-border-color-focus-hover, var(--mod-numberfield-border-color-focus-hover, var(--spectrum-gray-900)))`, if not set.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-gray-900": {
+      "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+      "description": "Used by `--spectrum-numberfield-border-color-focus-hover`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-numberfield-border-color-disabled": {
+      "value": "var(--mod-numberfield-border-color-disabled, var(--spectrum-disabled-border-color))",
+      "description": "Defined in `.spectrum-NumberField`. <br/>Used by `--mod-numberfield-border-color`. <br/>Defaults to `var(--mod-numberfield-border-color-disabled, var(--spectrum-disabled-border-color))`, if not set.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-disabled-border-color": {
+      "value": "var(--spectrum-gray-300)",
+      "description": "Used by `--spectrum-numberfield-border-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-numberfield-border-color-invalid-default": {
+      "value": "var(--mod-numberfield-border-color-invalid-default, var(--spectrum-negative-border-color-default))",
+      "description": "Defined in `.spectrum-NumberField`. <br/>Used by `--mod-numberfield-border-color`. <br/>Defaults to `var(--mod-numberfield-border-color-invalid-default, var(--spectrum-negative-border-color-default))`, if not set.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-border-color-default": {
+      "value": "var(--spectrum-negative-color-900)",
+      "description": "Used by `--spectrum-numberfield-border-color-invalid-default`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-numberfield-border-color-invalid-hover": {
+      "value": "var(--mod-numberfield-border-color-invalid-hover, var(--spectrum-negative-border-color-hover))",
+      "description": "Defined in `.spectrum-NumberField`. <br/>Used by `--mod-numberfield-border-color-hover`. <br/>Defaults to `var(--mod-numberfield-border-color-invalid-hover, var(--spectrum-negative-border-color-hover))`, if not set.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-border-color-hover": {
+      "value": "var(--spectrum-negative-color-1000)",
+      "description": "Used by `--spectrum-numberfield-border-color-invalid-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-numberfield-border-color-invalid-focus": {
+      "value": "var(--mod-numberfield-border-color-invalid-focus, var(--spectrum-negative-border-color-focus))",
+      "description": "Defined in `.spectrum-NumberField`. <br/>Used by `--mod-numberfield-border-color-focus`. <br/>Defaults to `var(--mod-numberfield-border-color-invalid-focus, var(--spectrum-negative-border-color-focus))`, if not set.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-border-color-focus": {
+      "value": "var(--spectrum-negative-color-1000)",
+      "description": "Used by `--spectrum-numberfield-border-color-invalid-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-numberfield-border-color-invalid-focus-hover": {
+      "value": "var(--mod-numberfield-border-color-invalid-focus-hover, var(--spectrum-negative-border-color-focus-hover))",
+      "description": "Defined in `.spectrum-NumberField`. <br/>Used by `--mod-numberfield-border-color-focus-hover`. <br/>Defaults to `var(--mod-numberfield-border-color-invalid-focus-hover, var(--spectrum-negative-border-color-focus-hover))`, if not set.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-border-color-focus-hover": {
+      "value": "var(--spectrum-negative-border-color-down)",
+      "description": "Used by `--spectrum-numberfield-border-color-invalid-focus-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-numberfield-border-color-invalid-keyboard-focus": {
+      "value": "var(--mod-numberfield-border-color-invalid-keyboard-focus, var(--spectrum-negative-border-color-key-focus))",
+      "description": "Defined in `.spectrum-NumberField`. <br/>Used by `--mod-numberfield-border-color-keyboard-focus`. <br/>Defaults to `var(--mod-numberfield-border-color-invalid-keyboard-focus, var(--spectrum-negative-border-color-key-focus))`, if not set.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-border-color-key-focus": {
+      "value": "var(--spectrum-negative-color-1000)",
+      "description": "Used by `--spectrum-numberfield-border-color-invalid-keyboard-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-numberfield-text-color": {
+      "value": "var(--mod-numberfield-text-color, var(--spectrum-neutral-content-color-default))",
+      "description": "Defined in `.spectrum-NumberField`. <br/>Used by `--mod-textfield-text-color-default`. <br/>Defaults to `var(--mod-numberfield-text-color, var(--spectrum-neutral-content-color-default))`, if not set.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-numberfield-text-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-numberfield-text-color-hover": {
+      "value": "var(--mod-numberfield-text-color-hover, var(--spectrum-neutral-content-color-hover))",
+      "description": "Defined in `.spectrum-NumberField`. <br/>Used by `--mod-textfield-text-color-default`. <br/>Defaults to `var(--mod-numberfield-text-color-hover, var(--spectrum-neutral-content-color-hover))`, if not set.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-numberfield-text-color-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-numberfield-text-color-focus": {
+      "value": "var(--mod-numberfield-text-color-focus, var(--spectrum-neutral-content-color-focus))",
+      "description": "Defined in `.spectrum-NumberField`. <br/>Used by `--mod-textfield-text-color-focus`. <br/>Defaults to `var(--mod-numberfield-text-color-focus, var(--spectrum-neutral-content-color-focus))`, if not set.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-focus": {
+      "value": "var(--spectrum-neutral-content-color-down)",
+      "description": "Used by `--spectrum-numberfield-text-color-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-numberfield-text-color-focus-hover": {
+      "value": "var(--mod-numberfield-text-color-focus-hover, var(--spectrum-neutral-content-color-focus-hover))",
+      "description": "Defined in `.spectrum-NumberField`. <br/>Used by `--mod-textfield-text-color-focus`. <br/>Defaults to `var(--mod-numberfield-text-color-focus-hover, var(--spectrum-neutral-content-color-focus-hover))`, if not set.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-focus-hover": {
+      "value": "var(--spectrum-neutral-content-color-down)",
+      "description": "Used by `--spectrum-numberfield-text-color-focus-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-numberfield-text-color-keyboard-focus": {
+      "value": "var(--mod-numberfield-text-color-keyboard-focus, var(--spectrum-neutral-content-color-key-focus))",
+      "description": "Defined in `.spectrum-NumberField`. <br/>Used by `--mod-textfield-text-color-default`. <br/>Defaults to `var(--mod-numberfield-text-color-keyboard-focus, var(--spectrum-neutral-content-color-key-focus))`, if not set.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-key-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-numberfield-text-color-keyboard-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-numberfield-text-color-disabled": {
+      "value": "var(--mod-numberfield-text-color-disabled, var(--spectrum-disabled-content-color))",
+      "description": "Defined in `.spectrum-NumberField`. <br/>Used by `--mod-textfield-text-color-disabled`. <br/>Defaults to `var(--mod-numberfield-text-color-disabled, var(--spectrum-disabled-content-color))`, if not set.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-disabled-content-color": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Used by `--spectrum-numberfield-text-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-numberfield-background-color": {
+      "value": "var(--highcontrast-numberfield-background-color, var(--mod-numberfield-background-color, var(--spectrum-gray-25)))",
+      "description": "Defined in `.spectrum-NumberField`. <br/>Used by `--mod-textfield-background-color`, `.spectrum-NumberField-textfield`. <br/>Defaults to `var(--highcontrast-numberfield-background-color, var(--mod-numberfield-background-color, var(--spectrum-gray-25)))`, if not set.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-gray-25": {
+      "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+      "description": "Used by `--spectrum-numberfield-background-color`, `--spectrum-numberfield-background-color-disabled`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-numberfield-background-color-disabled": {
+      "value": "var(--mod-numberfield-background-color-disabled, var(--spectrum-gray-25))",
+      "description": "Defined in `.spectrum-NumberField`. <br/>Used by `--mod-textfield-background-color-disabled`, `--mod-numberfield-background-color`. <br/>Defaults to `var(--mod-numberfield-background-color-disabled, var(--spectrum-gray-25))`, if not set.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-numberfield-font-family": {
+      "value": "var(--mod-numberfield-font-family, var(--spectrum-sans-font-family-stack))",
+      "description": "Defined in `.spectrum-NumberField`. <br/>Used by `--mod-textfield-font-family`. <br/>Defaults to `var(--mod-numberfield-font-family, var(--spectrum-sans-font-family-stack))`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-sans-font-family-stack": {
+      "description": "Used by `--spectrum-numberfield-font-family`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-numberfield-font-weight": {
+      "value": "var(--mod-numberfield-font-weight, var(--spectrum-regular-font-weight))",
+      "description": "Defined in `.spectrum-NumberField`. <br/>Used by `--mod-textfield-font-weight`. <br/>Defaults to `var(--mod-numberfield-font-weight, var(--spectrum-regular-font-weight))`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-regular-font-weight": {
+      "value": "400",
+      "description": "Used by `--spectrum-numberfield-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-numberfield-font-size": {
+      "value": "var(--mod-numberfield-font-size, var(--spectrum-font-size-300))",
+      "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.spectrum-NumberField--sizeS`, `.spectrum-NumberField.spectrum-NumberField--sizeL`, `.spectrum-NumberField.spectrum-NumberField--sizeXL`. <br/>Used by `--mod-textfield-font-size`. <br/>Defaults to `var(--mod-numberfield-font-size, var(--spectrum-font-size-300))`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-100": {
+      "value": "14px",
+      "description": "Used by `--spectrum-numberfield-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-numberfield-font-style": {
+      "value": "var(--mod-numberfield-font-style, var(--spectrum-default-font-style))",
+      "description": "Defined in `.spectrum-NumberField`. <br/>Used by `--mod-textfield-font-style`. <br/>Defaults to `var(--mod-numberfield-font-style, var(--spectrum-default-font-style))`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-default-font-style": {
+      "value": "normal",
+      "description": "Used by `--spectrum-numberfield-font-style`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-numberfield-line-height": {
+      "value": "1.5",
+      "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField:lang(ja), .spectrum-NumberField:lang(ko), .spectrum-NumberField:lang(zh)`. <br/>Used by `.spectrum-NumberField-input`. <br/>Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-line-height-100": {
+      "value": "1.3",
+      "description": "Used by `--spectrum-numberfield-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-numberfield-focus-indicator-width": {
+      "value": "var(--mod-numberfield-focus-indicator-width, var(--spectrum-focus-indicator-thickness))",
+      "description": "Defined in `.spectrum-NumberField`. <br/>Used by `.spectrum-NumberField.is-keyboardFocused:not(.is-disabled, .is-readOnly) .spectrum-NumberField-inputs, .spectrum-NumberField:focus-visible .spectrum-NumberField-inputs`. <br/>Defaults to `var(--mod-numberfield-focus-indicator-width, var(--spectrum-focus-indicator-thickness))`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Used by `--spectrum-numberfield-focus-indicator-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-numberfield-focus-indicator-gap": {
+      "value": "var(--mod-numberfield-focus-indicator-gap, var(--spectrum-focus-indicator-gap))",
+      "description": "Defined in `.spectrum-NumberField`. <br/>Used by `.spectrum-NumberField.is-keyboardFocused:not(.is-disabled, .is-readOnly) .spectrum-NumberField-inputs, .spectrum-NumberField:focus-visible .spectrum-NumberField-inputs`. <br/>Defaults to `var(--mod-numberfield-focus-indicator-gap, var(--spectrum-focus-indicator-gap))`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-gap": {
+      "value": "2px",
+      "description": "Used by `--spectrum-numberfield-focus-indicator-gap`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-numberfield-focus-indicator-color": {
+      "value": "var(--highcontrast-numberfield-focus-indicator-color, var(--mod-numberfield-focus-indicator-color, var(--spectrum-focus-indicator-color)))",
+      "description": "Defined in `.spectrum-NumberField`. <br/>Used by `.spectrum-NumberField.is-keyboardFocused:not(.is-disabled, .is-readOnly) .spectrum-NumberField-inputs, .spectrum-NumberField:focus-visible .spectrum-NumberField-inputs`. <br/>Defaults to `var(--highcontrast-numberfield-focus-indicator-color, var(--mod-numberfield-focus-indicator-color, var(--spectrum-focus-indicator-color)))`, if not set.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Used by `--spectrum-numberfield-focus-indicator-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-numberfield-block-size": {
+      "value": "var(--mod-numberfield-block-size, var(--spectrum-component-height-300))",
+      "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.spectrum-NumberField--sizeS`, `.spectrum-NumberField.spectrum-NumberField--sizeL`, `.spectrum-NumberField.spectrum-NumberField--sizeXL`. <br/>Used by `--spectrum-numberfield-hidden-stepper-min-inline-size`, `--mod-textfield-height`. <br/>Defaults to `var(--mod-numberfield-block-size, var(--spectrum-component-height-300))`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-100": {
+      "value": "32px",
+      "description": "Used by `--spectrum-numberfield-block-size`, `--spectrum-numberfield-button-container-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-numberfield-inline-size": {
+      "value": "var(--mod-numberfield-inline-size, var(--spectrum-field-default-width-extra-large))",
+      "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.spectrum-NumberField--sizeS`, `.spectrum-NumberField.spectrum-NumberField--sizeL`, `.spectrum-NumberField.spectrum-NumberField--sizeXL`. <br/>Used by `.spectrum-NumberField`. <br/>Defaults to `var(--mod-numberfield-inline-size, var(--spectrum-field-default-width-extra-large))`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-default-width-medium": {
+      "value": "208px",
+      "description": "Used by `--spectrum-numberfield-inline-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-numberfield-min-inline-size": {
+      "value": "var(--mod-numberfield-min-inline-size, var(--spectrum-number-field-with-stepper-minimum-width-extra-large))",
+      "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.spectrum-NumberField--sizeS`, `.spectrum-NumberField.spectrum-NumberField--sizeL`, `.spectrum-NumberField.spectrum-NumberField--sizeXL`. <br/>Used by `.spectrum-NumberField`. <br/>Defaults to `var(--mod-numberfield-min-inline-size, var(--spectrum-number-field-with-stepper-minimum-width-extra-large))`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-number-field-with-stepper-minimum-width-medium": {
+      "value": "120px",
+      "description": "Used by `--spectrum-numberfield-min-inline-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-numberfield-hidden-stepper-min-inline-size": {
+      "value": "calc(var(--spectrum-number-field-minimum-width-multiplier) * var(--spectrum-numberfield-block-size))",
+      "description": "Defined in `.spectrum-NumberField`. <br/>Used by `.spectrum-NumberField.spectrum-NumberField--hiddenStepper`. <br/>Defaults to `calc(var(--spectrum-number-field-minimum-width-multiplier) * var(--spectrum-numberfield-block-size))`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-number-field-minimum-width-multiplier": {
+      "value": "1.25",
+      "description": "Used by `--spectrum-numberfield-hidden-stepper-min-inline-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-numberfield-alert-icon-size": {
+      "value": "26px",
+      "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.spectrum-NumberField--sizeS`, `.spectrum-NumberField.spectrum-NumberField--sizeL`, `.spectrum-NumberField.spectrum-NumberField--sizeXL`. <br/>Used by `.spectrum-NumberField.spectrum-NumberField--hiddenStepper .spectrum-NumberField-textfield .spectrum-NumberField-input`, `.spectrum-NumberField-inputs .spectrum-Textfield.is-invalid .spectrum-NumberField-input`. <br/>Defaults to `var(--spectrum-workflow-icon-size-300)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-100": {
+      "value": "20px",
+      "description": "Used by `--spectrum-numberfield-alert-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-numberfield-spacing-inline-edge-to-text": {
+      "value": "calc(var(--spectrum-component-edge-to-text-300) - var(--spectrum-numberfield-border-width))",
+      "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.spectrum-NumberField--sizeS`, `.spectrum-NumberField.spectrum-NumberField--sizeL`, `.spectrum-NumberField.spectrum-NumberField--sizeXL`. <br/>Used by `.spectrum-NumberField.spectrum-NumberField--hiddenStepper .spectrum-NumberField-textfield`, `.spectrum-NumberField.spectrum-NumberField--hiddenStepper .spectrum-NumberField-textfield.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon`, `.spectrum-NumberField-textfield`. <br/>Defaults to `calc(var(--spectrum-component-edge-to-text-300) - var(--spectrum-numberfield-border-width))`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-text-100": {
+      "value": "12px",
+      "description": "Used by `--spectrum-numberfield-spacing-inline-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-numberfield-spacing-block-start-edge-to-text": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.spectrum-NumberField--sizeS`, `.spectrum-NumberField.spectrum-NumberField--sizeL`, `.spectrum-NumberField.spectrum-NumberField--sizeXL`. <br/>Used by `--mod-textfield-spacing-block-start`. <br/>Defaults to `var(--spectrum-component-top-to-text-300)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-numberfield-spacing-block-start-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-numberfield-spacing-block-end-edge-to-text": {
+      "value": "14px",
+      "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.spectrum-NumberField--sizeS`, `.spectrum-NumberField.spectrum-NumberField--sizeL`, `.spectrum-NumberField.spectrum-NumberField--sizeXL`. <br/>Used by `--mod-textfield-spacing-block-end`. <br/>Defaults to `var(--spectrum-component-bottom-to-text-300)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-100": {
+      "value": "9px",
+      "description": "Used by `--spectrum-numberfield-spacing-block-end-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-numberfield-button-inline-padding": {
+      "value": "var(--spectrum-in-field-button-side-edge-to-fill-extra-large)",
+      "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.spectrum-NumberField--sizeS`, `.spectrum-NumberField.spectrum-NumberField--sizeL`, `.spectrum-NumberField.spectrum-NumberField--sizeXL`. <br/>Used by `--spectrum-numberfield-spacing-min-inline-end-text-to-stepper`, `--spectrum-numberfield-spacing-validation-icon-to-stepper`. <br/>Defaults to `var(--spectrum-in-field-button-side-edge-to-fill-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-in-field-button-side-edge-to-fill-medium": {
+      "description": "Used by `--spectrum-numberfield-button-inline-padding`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-numberfield-button-container-size": {
+      "value": "calc((var(--spectrum-component-height-300) - var(--spectrum-in-field-button-edge-to-fill-extra-large)) * 2)",
+      "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.spectrum-NumberField--sizeS`, `.spectrum-NumberField.spectrum-NumberField--sizeL`, `.spectrum-NumberField.spectrum-NumberField--sizeXL`. <br/>Used by `.spectrum-NumberField-textfield`, `.spectrum-NumberField-textfield.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon`. <br/>Defaults to `calc((var(--spectrum-component-height-300) - var(--spectrum-in-field-button-edge-to-fill-extra-large)) * 2)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-in-field-button-edge-to-fill-medium": {
+      "value": "6px",
+      "description": "Used by `--spectrum-numberfield-button-container-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-numberfield-button-inline-offset": {
+      "value": "var(--mod-numberfield-button-inline-offset, var(--spectrum-in-field-stepper-to-end-extra-large))",
+      "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.spectrum-NumberField--sizeS`, `.spectrum-NumberField.spectrum-NumberField--sizeL`, `.spectrum-NumberField.spectrum-NumberField--sizeXL`. <br/>Used by `.spectrum-NumberField-textfield`, `.spectrum-NumberField-buttons`. <br/>Defaults to `var(--mod-numberfield-button-inline-offset, var(--spectrum-in-field-stepper-to-end-extra-large))`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-in-field-stepper-to-end-medium": {
+      "value": "3px",
+      "description": "Used by `--spectrum-numberfield-button-inline-offset`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-numberfield-spacing-min-inline-end-text-to-stepper": {
+      "value": "calc(var(--spectrum-text-to-visual-300) - var(--spectrum-numberfield-button-inline-padding))",
+      "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.spectrum-NumberField--sizeS`, `.spectrum-NumberField.spectrum-NumberField--sizeL`, `.spectrum-NumberField.spectrum-NumberField--sizeXL`. <br/>Used by `.spectrum-NumberField-input`. <br/>Defaults to `calc(var(--spectrum-text-to-visual-300) - var(--spectrum-numberfield-button-inline-padding))`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-numberfield-spacing-min-inline-end-text-to-stepper`, `--spectrum-numberfield-spacing-min-inline-end-value-to-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-numberfield-spacing-min-inline-end-value-to-icon": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.spectrum-NumberField--sizeS`, `.spectrum-NumberField.spectrum-NumberField--sizeL`, `.spectrum-NumberField.spectrum-NumberField--sizeXL`. <br/>Used by `.spectrum-NumberField.spectrum-NumberField--hiddenStepper .spectrum-NumberField-textfield .spectrum-NumberField-input`, `.spectrum-NumberField-inputs .spectrum-Textfield.is-invalid .spectrum-NumberField-input`. <br/>Defaults to `var(--spectrum-text-to-visual-300)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-numberfield-spacing-field-to-helptext": {
+      "value": "0px",
+      "description": "Defined in `.spectrum-NumberField`. <br/>Used by `.spectrum-NumberField-helpText`. <br/>Defaults to `var(--spectrum-help-text-to-component)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-help-text-to-component": {
+      "value": "0px",
+      "description": "Used by `--spectrum-numberfield-spacing-field-to-helptext`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-numberfield-spacing-label-to-field": {
+      "value": "0px",
+      "description": "Defined in `.spectrum-NumberField`. <br/>Used by `.spectrum-NumberField-fieldLabel`. <br/>Defaults to `var(--spectrum-field-label-to-component)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-label-to-component": {
+      "value": "0px",
+      "description": "Used by `--spectrum-numberfield-spacing-label-to-field`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-numberfield-spacing-validation-icon-to-stepper": {
+      "value": "calc(var(--spectrum-number-field-visual-to-in-field-stepper-extra-large) - var(--spectrum-numberfield-button-inline-padding))",
+      "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.spectrum-NumberField--sizeS`, `.spectrum-NumberField.spectrum-NumberField--sizeL`, `.spectrum-NumberField.spectrum-NumberField--sizeXL`. <br/>Used by `.spectrum-NumberField-inputs .spectrum-Textfield.is-invalid .spectrum-NumberField-input`, `.spectrum-NumberField-textfield.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon`. <br/>Defaults to `calc(var(--spectrum-number-field-visual-to-in-field-stepper-extra-large) - var(--spectrum-numberfield-button-inline-padding))`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-number-field-visual-to-in-field-stepper-medium": {
+      "value": "6px",
+      "description": "Used by `--spectrum-numberfield-spacing-validation-icon-to-stepper`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-numberfield-spacing-side-label-to-field": {
+      "value": "var(--spectrum-numberfield-spacing-side-label-to-field)",
+      "description": "Defined in `.spectrum-NumberField`. <br/>Used by `.spectrum-NumberField.spectrum-NumberField--sideLabel .spectrum-NumberField-fieldLabel`. <br/>Defaults to `var(--spectrum-numberfield-spacing-side-label-to-field)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-200": {
+      "value": "12px",
+      "description": "Used by `--spectrum-numberfield-spacing-side-label-to-field`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-numberfield-spacing-block-start-edge-to-alert-icon": {
+      "value": "11px",
+      "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.spectrum-NumberField--sizeS`, `.spectrum-NumberField.spectrum-NumberField--sizeL`, `.spectrum-NumberField.spectrum-NumberField--sizeXL`. <br/>Used by `--mod-textfield-icon-spacing-block-invalid`. <br/>Defaults to `var(--spectrum-component-top-to-workflow-icon-300)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-workflow-icon-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-numberfield-spacing-block-start-edge-to-alert-icon`, `--spectrum-numberfield-spacing-block-end-edge-to-alert-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-numberfield-spacing-block-end-edge-to-alert-icon": {
+      "value": "11px",
+      "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.spectrum-NumberField--sizeS`, `.spectrum-NumberField.spectrum-NumberField--sizeL`, `.spectrum-NumberField.spectrum-NumberField--sizeXL`. <br/>Defaults to `var(--spectrum-component-top-to-workflow-icon-300)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-medium-size-small": {
+      "value": "7px",
+      "description": "Used by `--spectrum-numberfield-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-75": {
+      "value": "24px",
+      "description": "Used by `--spectrum-numberfield-block-size`, `--spectrum-numberfield-button-container-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-default-width-small": {
+      "value": "192px",
+      "description": "Used by `--spectrum-numberfield-inline-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-number-field-with-stepper-minimum-width-small": {
+      "value": "104px",
+      "description": "Used by `--spectrum-numberfield-min-inline-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-text-75": {
+      "value": "9px",
+      "description": "Used by `--spectrum-numberfield-spacing-inline-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-75": {
+      "value": "12px",
+      "description": "Used by `--spectrum-numberfield-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-75": {
+      "value": "4px",
+      "description": "Used by `--spectrum-numberfield-spacing-block-start-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-75": {
+      "value": "5px",
+      "description": "Used by `--spectrum-numberfield-spacing-block-end-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-75": {
+      "value": "5px",
+      "description": "Used by `--spectrum-numberfield-spacing-min-inline-end-text-to-stepper`, `--spectrum-numberfield-spacing-min-inline-end-value-to-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-number-field-visual-to-in-field-stepper-small": {
+      "value": "5px",
+      "description": "Used by `--spectrum-numberfield-spacing-validation-icon-to-stepper`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-in-field-button-side-edge-to-fill-small": {
+      "description": "Used by `--spectrum-numberfield-button-inline-padding`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-in-field-stepper-to-end-small": {
+      "value": "0px",
+      "description": "Used by `--spectrum-numberfield-button-inline-offset`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-workflow-icon-75": {
+      "value": "4px",
+      "description": "Used by `--spectrum-numberfield-spacing-block-start-edge-to-alert-icon`, `--spectrum-numberfield-spacing-block-end-edge-to-alert-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-75": {
+      "value": "16px",
+      "description": "Used by `--spectrum-numberfield-alert-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-medium-size-large": {
+      "value": "9px",
+      "description": "Used by `--spectrum-numberfield-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-200": {
+      "value": "40px",
+      "description": "Used by `--spectrum-numberfield-block-size`, `--spectrum-numberfield-button-container-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-default-width-large": {
+      "value": "224px",
+      "description": "Used by `--spectrum-numberfield-inline-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-number-field-with-stepper-minimum-width-large": {
+      "value": "144px",
+      "description": "Used by `--spectrum-numberfield-min-inline-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-text-200": {
+      "value": "15px",
+      "description": "Used by `--spectrum-numberfield-spacing-inline-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-200": {
+      "value": "16px",
+      "description": "Used by `--spectrum-numberfield-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-200": {
+      "value": "9px",
+      "description": "Used by `--spectrum-numberfield-spacing-block-start-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-200": {
+      "value": "11px",
+      "description": "Used by `--spectrum-numberfield-spacing-block-end-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-200": {
+      "value": "7px",
+      "description": "Used by `--spectrum-numberfield-spacing-min-inline-end-text-to-stepper`, `--spectrum-numberfield-spacing-min-inline-end-value-to-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-number-field-visual-to-in-field-stepper-large": {
+      "value": "7px",
+      "description": "Used by `--spectrum-numberfield-spacing-validation-icon-to-stepper`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-in-field-button-side-edge-to-fill-large": {
+      "description": "Used by `--spectrum-numberfield-button-inline-padding`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-in-field-button-edge-to-fill-large": {
+      "value": "8px",
+      "description": "Used by `--spectrum-numberfield-button-container-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-in-field-stepper-to-end-large": {
+      "value": "4px",
+      "description": "Used by `--spectrum-numberfield-button-inline-offset`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-workflow-icon-200": {
+      "value": "9px",
+      "description": "Used by `--spectrum-numberfield-spacing-block-start-edge-to-alert-icon`, `--spectrum-numberfield-spacing-block-end-edge-to-alert-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-200": {
+      "value": "22px",
+      "description": "Used by `--spectrum-numberfield-alert-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-medium-size-extra-large": {
+      "value": "10px",
+      "description": "Used by `--spectrum-numberfield-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-300": {
+      "value": "48px",
+      "description": "Used by `--spectrum-numberfield-block-size`, `--spectrum-numberfield-button-container-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-default-width-extra-large": {
+      "value": "240px",
+      "description": "Used by `--spectrum-numberfield-inline-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-number-field-with-stepper-minimum-width-extra-large": {
+      "value": "168px",
+      "description": "Used by `--spectrum-numberfield-min-inline-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-text-300": {
+      "value": "18px",
+      "description": "Used by `--spectrum-numberfield-spacing-inline-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-300": {
+      "value": "18px",
+      "description": "Used by `--spectrum-numberfield-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-300": {
+      "value": "12px",
+      "description": "Used by `--spectrum-numberfield-spacing-block-start-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-300": {
+      "value": "14px",
+      "description": "Used by `--spectrum-numberfield-spacing-block-end-edge-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-300": {
+      "value": "8px",
+      "description": "Used by `--spectrum-numberfield-spacing-min-inline-end-text-to-stepper`, `--spectrum-numberfield-spacing-min-inline-end-value-to-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-number-field-visual-to-in-field-stepper-extra-large": {
+      "value": "8px",
+      "description": "Used by `--spectrum-numberfield-spacing-validation-icon-to-stepper`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-in-field-button-side-edge-to-fill-extra-large": {
+      "description": "Used by `--spectrum-numberfield-button-inline-padding`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-in-field-button-edge-to-fill-extra-large": {
+      "value": "8px",
+      "description": "Used by `--spectrum-numberfield-button-container-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-in-field-stepper-to-end-extra-large": {
+      "value": "4px",
+      "description": "Used by `--spectrum-numberfield-button-inline-offset`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-workflow-icon-300": {
+      "value": "11px",
+      "description": "Used by `--spectrum-numberfield-spacing-block-start-edge-to-alert-icon`, `--spectrum-numberfield-spacing-block-end-edge-to-alert-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-300": {
+      "value": "26px",
+      "description": "Used by `--spectrum-numberfield-alert-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-cjk-line-height-100": {
+      "value": "1.5",
+      "description": "Used by `--spectrum-numberfield-line-height`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {
+    "mod-textfield-spacing-block-start": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-spacing-block-end": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-icon-spacing-block-invalid": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-width": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-height": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-background-color": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-text-color-default": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-text-color-disabled": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-background-color-disabled": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-font-family": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-font-weight": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-font-style": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-font-size": {
+      "category": "Passthrough"
+    },
+    "mod-textfield-text-color-focus": {
+      "category": "Passthrough"
+    }
+  },
+  "high-contrast": {
+    "highcontrast-numberfield-border-color": {
+      "value": "var(--mod-numberfield-border-color, var(--spectrum-gray-300))",
+      "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.is-invalid`, `.spectrum-NumberField.is-disabled`, `.spectrum-NumberField.is-hover:not(.is-disabled)`, `.spectrum-NumberField.is-focused:not(.is-disabled), .spectrum-NumberField:not(.is-disabled):focus, .spectrum-NumberField:not(.is-disabled):focus-within`, `.spectrum-NumberField.is-focused.is-hover:not(.is-disabled), .spectrum-NumberField.is-hover:not(.is-disabled):focus, .spectrum-NumberField.is-hover:not(.is-disabled):focus-within`, `.spectrum-NumberField.is-keyboardFocused:not(.is-disabled), .spectrum-NumberField:not(.is-disabled):focus-visible, .spectrum-NumberField:not(.is-disabled):focus-within`, `.spectrum-NumberField.is-hover:not(.is-disabled):focus-visible, .spectrum-NumberField.is-hover:not(.is-disabled):focus-within, .spectrum-NumberField.is-keyboardFocused.is-hover:not(.is-disabled)`, `.spectrum-NumberField:not(.is-disabled):hover`, `.spectrum-NumberField.is-focused:not(.is-disabled):hover, \t.spectrum-NumberField.is-keyboardFocused:not(.is-disabled):hover, \t.spectrum-NumberField:not(.is-disabled):focus-visible:hover, \t.spectrum-NumberField:not(.is-disabled):focus-within:hover, \t.spectrum-NumberField:not(.is-disabled):focus:hover`. <br/>Used by `--spectrum-numberfield-border-color-default`, `--highcontrast-textfield-border-color`. <br/>Defaults to `var(--mod-numberfield-border-color, var(--spectrum-gray-300))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-numberfield-border-color-hover": {
+      "value": "var(--mod-numberfield-border-color-hover, var(--spectrum-numberfield-border-color-hover))",
+      "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.is-invalid`. <br/>Used by `--spectrum-numberfield-border-color-hover`, `--mod-numberfield-border-color`, `--highcontrast-numberfield-border-color`. <br/>Defaults to `var(--mod-numberfield-border-color-hover, var(--spectrum-numberfield-border-color-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-numberfield-border-color-focus": {
+      "value": "var(--mod-numberfield-border-color-keyboard-focus, var(--spectrum-numberfield-border-color-keyboard-focus))",
+      "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.is-invalid`. <br/>Used by `--spectrum-numberfield-border-color-focus`, `--mod-numberfield-border-color`, `--highcontrast-numberfield-border-color`. <br/>Defaults to `var(--mod-numberfield-border-color-keyboard-focus, var(--spectrum-numberfield-border-color-keyboard-focus))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-numberfield-border-color-keyboard-focus": {
+      "value": "var(--mod-numberfield-border-color-keyboard-focus, var(--spectrum-gray-800))",
+      "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.is-invalid`. <br/>Used by `--spectrum-numberfield-border-color-keyboard-focus`, `--highcontrast-numberfield-border-color`. <br/>Defaults to `var(--mod-numberfield-border-color-keyboard-focus, var(--spectrum-gray-800))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-numberfield-border-color-focus-hover": {
+      "value": "var(--mod-numberfield-border-color-focus-hover, var(--spectrum-numberfield-border-color-focus-hover))",
+      "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.is-invalid`. <br/>Used by `--spectrum-numberfield-border-color-focus-hover`, `--mod-numberfield-border-color`, `--highcontrast-numberfield-border-color`. <br/>Defaults to `var(--mod-numberfield-border-color-focus-hover, var(--spectrum-numberfield-border-color-focus-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-numberfield-background-color": {
+      "value": "var(--mod-numberfield-background-color, var(--spectrum-gray-25))",
+      "description": "Defined in `.spectrum-NumberField`. <br/>Used by `--spectrum-numberfield-background-color`. <br/>Defaults to `var(--mod-numberfield-background-color, var(--spectrum-gray-25))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-numberfield-focus-indicator-color": {
+      "value": "var(--mod-numberfield-focus-indicator-color, var(--spectrum-focus-indicator-color))",
+      "description": "Defined in `.spectrum-NumberField`. <br/>Used by `--spectrum-numberfield-focus-indicator-color`. <br/>Defaults to `var(--mod-numberfield-focus-indicator-color, var(--spectrum-focus-indicator-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-textfield-border-color": {
+      "value": "var(--highcontrast-numberfield-border-color)",
+      "description": "Defined in `.spectrum-NumberField-textfield`. <br/>Defaults to `var(--highcontrast-numberfield-border-color)`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/stepper/stories/stepper.stories.js b/components/stepper/stories/stepper.stories.js
index bd51dd147ca..367f4bda2de 100644
--- a/components/stepper/stories/stepper.stories.js
+++ b/components/stepper/stories/stepper.stories.js
@@ -2,11 +2,13 @@ import { Sizes, withDownStateDimensionCapture } from "@spectrum-css/preview/deco
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, isFocused, isHovered, isKeyboardFocused, isReadOnly, size } from "@spectrum-css/preview/types";
 import { default as TextfieldStories } from "@spectrum-css/textfield/stories/textfield.stories.js";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { NumberFieldGroup } from "./stepper.test.js";
 import { AllDefaultVariantsGroup, DisabledVariantsGroup, Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * A number field can be used to increment or decrement a value by a specified amount via add and subtract buttons. The input field displays the current value.
  *
@@ -80,15 +82,7 @@ export default {
 		},
 		packageJson,
 		metadata,
-		actions: {
-			handles: ["click .spectrum-InfieldButton:not([disabled])"],
-		},
-		downState: {
-			selectors: [".spectrum-InfieldButton:not(:disabled)"],
-		},
-		status: {
-			type: "migrated",
-		},
+		cssprops: metadata.modifiers,
 	},
 	tags: ["migrated"],
 	decorators: [
diff --git a/components/swatch/dist/metadata.json b/components/swatch/dist/metadata.json
index 5b40e74c96e..07a2c799adb 100644
--- a/components/swatch/dist/metadata.json
+++ b/components/swatch/dist/metadata.json
@@ -5,20 +5,20 @@
     ".spectrum-Swatch .spectrum-Swatch-disabledIcon",
     ".spectrum-Swatch .spectrum-Swatch-fill",
     ".spectrum-Swatch--rectangle",
-    ".spectrum-Swatch--roundingFull.is-selected:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill",
-    ".spectrum-Swatch--roundingFull.is-selected:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill:before",
     ".spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle)",
     ".spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill",
     ".spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill:before",
     ".spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle):after",
     ".spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle):before",
+    ".spectrum-Swatch--roundingFull.is-selected:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill",
+    ".spectrum-Swatch--roundingFull.is-selected:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill:before",
     ".spectrum-Swatch--roundingNone",
     ".spectrum-Swatch--roundingNone .spectrum-Swatch-fill",
     ".spectrum-Swatch--roundingNone .spectrum-Swatch-fill:before",
-    ".spectrum-Swatch--roundingNone.is-selected .spectrum-Swatch-fill",
-    ".spectrum-Swatch--roundingNone.is-selected .spectrum-Swatch-fill:before",
     ".spectrum-Swatch--roundingNone:after",
     ".spectrum-Swatch--roundingNone:before",
+    ".spectrum-Swatch--roundingNone.is-selected .spectrum-Swatch-fill",
+    ".spectrum-Swatch--roundingNone.is-selected .spectrum-Swatch-fill:before",
     ".spectrum-Swatch--sizeL",
     ".spectrum-Swatch--sizeS",
     ".spectrum-Swatch--sizeXS",
@@ -29,13 +29,15 @@
     ".spectrum-Swatch-fill:before",
     ".spectrum-Swatch-icon",
     ".spectrum-Swatch-image",
+    ".spectrum-Swatch:before",
+    ".spectrum-Swatch:focus-visible",
     ".spectrum-Swatch.is-addSwatch",
     ".spectrum-Swatch.is-addSwatch .spectrum-Swatch-fill",
     ".spectrum-Swatch.is-addSwatch .spectrum-Swatch-icon",
-    ".spectrum-Swatch.is-addSwatch.is-keyboardFocused",
     ".spectrum-Swatch.is-addSwatch:active",
     ".spectrum-Swatch.is-addSwatch:focus-visible",
     ".spectrum-Swatch.is-addSwatch:hover",
+    ".spectrum-Swatch.is-addSwatch.is-keyboardFocused",
     ".spectrum-Swatch.is-disabled",
     ".spectrum-Swatch.is-disabled .spectrum-Swatch-disabledIcon",
     ".spectrum-Swatch.is-image .spectrum-Swatch-fill:before",
@@ -43,110 +45,500 @@
     ".spectrum-Swatch.is-mixedValue",
     ".spectrum-Swatch.is-mixedValue .spectrum-Swatch-fill",
     ".spectrum-Swatch.is-mixedValue .spectrum-Swatch-icon",
-    ".spectrum-Swatch.is-nothing.spectrum-Swatch--rectangle:not(.spectrum-Swatch.is-mixedValue, .spectrum-Swatch.is-addSwatch) .spectrum-Swatch-fill:after",
     ".spectrum-Swatch.is-nothing:not(.spectrum-Swatch.is-mixedValue, .spectrum-Swatch.is-addSwatch) .spectrum-Swatch-fill",
     ".spectrum-Swatch.is-nothing:not(.spectrum-Swatch.is-mixedValue, .spectrum-Swatch.is-addSwatch) .spectrum-Swatch-fill:after",
+    ".spectrum-Swatch.is-nothing.spectrum-Swatch--rectangle:not(.spectrum-Swatch.is-mixedValue, .spectrum-Swatch.is-addSwatch) .spectrum-Swatch-fill:after",
     ".spectrum-Swatch.is-selected",
     ".spectrum-Swatch.is-selected .spectrum-Swatch-fill",
     ".spectrum-Swatch.is-selected .spectrum-Swatch-fill:before",
     ".spectrum-Swatch.is-selected:before",
-    ".spectrum-Swatch:before",
-    ".spectrum-Swatch:focus-visible",
     ".spectrum-Swatch[disabled]",
     ".spectrum-Swatch[disabled] .spectrum-Swatch-disabledIcon"
   ],
-  "modifiers": [
-    "--mod-add-button-background",
-    "--mod-add-button-background-down",
-    "--mod-add-button-background-hover",
-    "--mod-add-button-background-keyboard-focus",
-    "--mod-animation-duration-100",
-    "--mod-corner-radius-full",
-    "--mod-mixed-button-background",
-    "--mod-swatch-border",
-    "--mod-swatch-border-color",
-    "--mod-swatch-border-color-selected",
-    "--mod-swatch-border-opacity",
-    "--mod-swatch-border-radius",
-    "--mod-swatch-border-thickness",
-    "--mod-swatch-border-thickness-selected",
-    "--mod-swatch-disabled-icon-color",
-    "--mod-swatch-disabled-icon-size",
-    "--mod-swatch-focus-indicator-color",
-    "--mod-swatch-focus-indicator-gap",
-    "--mod-swatch-focus-indicator-thickness",
-    "--mod-swatch-icon-border-color",
-    "--mod-swatch-icon-color",
-    "--mod-swatch-inner-border-color-selected",
-    "--mod-swatch-size",
-    "--mod-swatch-slash-icon-color",
-    "--mod-swatch-slash-thickness"
-  ],
-  "component": [
-    "--spectrum-swatch-border",
-    "--spectrum-swatch-border-color",
-    "--spectrum-swatch-border-color-selected",
-    "--spectrum-swatch-border-opacity",
-    "--spectrum-swatch-border-radius",
-    "--spectrum-swatch-border-thickness",
-    "--spectrum-swatch-border-thickness-selected",
-    "--spectrum-swatch-disabled-icon-border-opacity",
-    "--spectrum-swatch-disabled-icon-color",
-    "--spectrum-swatch-disabled-icon-size",
-    "--spectrum-swatch-focus-indicator-color",
-    "--spectrum-swatch-focus-indicator-gap",
-    "--spectrum-swatch-focus-indicator-thickness",
-    "--spectrum-swatch-icon-border-color",
-    "--spectrum-swatch-icon-color",
-    "--spectrum-swatch-inner-border-color-selected",
-    "--spectrum-swatch-rectangle-width-multiplier",
-    "--spectrum-swatch-size",
-    "--spectrum-swatch-size-extra-small",
-    "--spectrum-swatch-size-large",
-    "--spectrum-swatch-size-medium",
-    "--spectrum-swatch-size-small",
-    "--spectrum-swatch-slash-icon-color",
-    "--spectrum-swatch-slash-thickness",
-    "--spectrum-swatch-slash-thickness-extra-small",
-    "--spectrum-swatch-slash-thickness-large",
-    "--spectrum-swatch-slash-thickness-medium",
-    "--spectrum-swatch-slash-thickness-small"
-  ],
-  "global": [
-    "--spectrum-add-button-background",
-    "--spectrum-add-button-background-down",
-    "--spectrum-add-button-background-hover",
-    "--spectrum-add-button-background-keyboard-focus",
-    "--spectrum-animation-duration-100",
-    "--spectrum-border-width-100",
-    "--spectrum-border-width-200",
-    "--spectrum-corner-radius-100",
-    "--spectrum-corner-radius-full",
-    "--spectrum-corner-radius-none",
-    "--spectrum-focus-indicator-color",
-    "--spectrum-focus-indicator-gap",
-    "--spectrum-focus-indicator-thickness",
-    "--spectrum-gray-100",
-    "--spectrum-gray-1000",
-    "--spectrum-gray-200",
-    "--spectrum-gray-25",
-    "--spectrum-mixed-button-background",
-    "--spectrum-negative-visual-color",
-    "--spectrum-neutral-content-color-default",
-    "--spectrum-picked-color",
-    "--spectrum-white",
-    "--spectrum-workflow-icon-size-200",
-    "--spectrum-workflow-icon-size-50",
-    "--spectrum-workflow-icon-size-75"
-  ],
-  "passthroughs": [],
-  "high-contrast": [
-    "--highcontrast-swatch-background-color-selected",
-    "--highcontrast-swatch-border-color",
-    "--highcontrast-swatch-border-color-selected",
-    "--highcontrast-swatch-disabled-icon-color",
-    "--highcontrast-swatch-fill-foreground-color",
-    "--highcontrast-swatch-focus-indicator-color",
-    "--highcontrast-swatch-icon-color"
-  ]
+  "modifiers": {
+    "mod-swatch-icon-border-color": {
+      "description": "Used by `--spectrum-swatch-icon-border-color`. <br/>Defaults to `rgb(0 0 0 / var(--spectrum-swatch-disabled-icon-border-opacity))`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-swatch-size": {
+      "description": "Used by `--spectrum-swatch-size`. <br/>Defaults to `var(--spectrum-swatch-size-large)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-swatch-border-radius": {
+      "description": "Used by `--spectrum-swatch-border-radius`, `.spectrum-Swatch-fill, .spectrum-Swatch-fill:before`. <br/>Defaults to `var(--spectrum-swatch-border-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-swatch-border-thickness": {
+      "description": "Used by `--spectrum-swatch-border-thickness`, `.spectrum-Swatch-fill:before`. <br/>Defaults to `var(--spectrum-swatch-border-thickness)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-swatch-border-thickness-selected": {
+      "description": "Used by `--spectrum-swatch-border-thickness-selected`. <br/>Defaults to `var(--spectrum-border-width-200)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-swatch-disabled-icon-size": {
+      "description": "Used by `--spectrum-swatch-disabled-icon-size`. <br/>Defaults to `var(--spectrum-workflow-icon-size-200)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-swatch-slash-thickness": {
+      "description": "Used by `--spectrum-swatch-slash-thickness`. <br/>Defaults to `var(--spectrum-swatch-slash-thickness-large)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-swatch-border-color-selected": {
+      "description": "Used by `--spectrum-swatch-border-color-selected`. <br/>Defaults to `var(--spectrum-gray-1000)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-swatch-inner-border-color-selected": {
+      "description": "Used by `--spectrum-swatch-inner-border-color-selected`. <br/>Defaults to `var(--spectrum-gray-25)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-swatch-disabled-icon-color": {
+      "description": "Used by `--spectrum-swatch-disabled-icon-color`. <br/>Defaults to `var(--spectrum-white)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-swatch-icon-color": {
+      "description": "Used by `--spectrum-swatch-icon-color`. <br/>Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-swatch-slash-icon-color": {
+      "description": "Used by `--spectrum-swatch-slash-icon-color`. <br/>Defaults to `var(--spectrum-negative-visual-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-swatch-border-color": {
+      "description": "Used by `--spectrum-swatch-border`. <br/>Defaults to `var(--spectrum-swatch-border-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-swatch-border-opacity": {
+      "description": "Used by `--spectrum-swatch-border`. <br/>Defaults to `var(--spectrum-swatch-border-opacity)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-swatch-focus-indicator-color": {
+      "description": "Used by `--spectrum-swatch-focus-indicator-color`, `.spectrum-Swatch.is-keyboardFocused, .spectrum-Swatch:focus-visible`. <br/>Defaults to `var(--spectrum-swatch-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-swatch-focus-indicator-thickness": {
+      "description": "Used by `--spectrum-swatch-focus-indicator-thickness`, `.spectrum-Swatch.is-keyboardFocused, .spectrum-Swatch:focus-visible`. <br/>Defaults to `var(--spectrum-swatch-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-swatch-focus-indicator-gap": {
+      "description": "Used by `--spectrum-swatch-focus-indicator-gap`, `.spectrum-Swatch.is-keyboardFocused, .spectrum-Swatch:focus-visible`. <br/>Defaults to `var(--spectrum-swatch-focus-indicator-gap)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-mixed-button-background": {
+      "description": "Defined in `.spectrum-Swatch`. <br/>Used by `--spectrum-picked-color`. <br/>Defaults to `var(--spectrum-mixed-button-background)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-add-button-background": {
+      "description": "Defined in `.spectrum-Swatch`. <br/>Used by `--spectrum-picked-color`. <br/>Defaults to `var(--spectrum-add-button-background)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-add-button-background-down": {
+      "description": "Defined in `.spectrum-Swatch`. <br/>Used by `--spectrum-picked-color`. <br/>Defaults to `var(--spectrum-add-button-background-down)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-add-button-background-hover": {
+      "description": "Defined in `.spectrum-Swatch`. <br/>Used by `--spectrum-picked-color`. <br/>Defaults to `var(--spectrum-add-button-background-hover)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-add-button-background-keyboard-focus": {
+      "description": "Used by `--spectrum-picked-color`. <br/>Defaults to `var(--spectrum-add-button-background-keyboard-focus)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-animation-duration-100": {
+      "description": "Used by `.spectrum-Swatch.is-keyboardFocused, .spectrum-Swatch:focus-visible`, `.spectrum-Swatch-image`. <br/>Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-swatch-border": {
+      "description": "Used by `.spectrum-Swatch-fill:before`. <br/>Defaults to `var(--spectrum-swatch-border)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-corner-radius-full": {
+      "description": "Used by `.spectrum-Swatch--roundingFull.is-selected:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill, .spectrum-Swatch--roundingFull.is-selected:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill:before, .spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle), .spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill, .spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill:before, .spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle):after, .spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle):before`. <br/>Defaults to `var(--spectrum-corner-radius-full)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-swatch-icon-border-color": {
+      "value": "var(--mod-swatch-icon-border-color, rgb(0 0 0 / var(--spectrum-swatch-disabled-icon-border-opacity)))",
+      "description": "Defined in `.spectrum-Swatch`. <br/>Used by `.spectrum-Swatch-disabledIcon path:last-child`. <br/>Defaults to `var(--mod-swatch-icon-border-color, rgb(0 0 0 / var(--spectrum-swatch-disabled-icon-border-opacity)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-swatch-disabled-icon-border-opacity": {
+      "value": "0.42",
+      "description": "Used by `--spectrum-swatch-icon-border-color`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-swatch-size": {
+      "value": "var(--mod-swatch-size, var(--spectrum-swatch-size-large))",
+      "description": "Defined in `.spectrum-Swatch`, `.spectrum-Swatch--sizeXS`, `.spectrum-Swatch--sizeS`, `.spectrum-Swatch--sizeL`. <br/>Used by `.spectrum-Swatch`, `.spectrum-Swatch--rectangle`. <br/>Defaults to `var(--mod-swatch-size, var(--spectrum-swatch-size-large))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-swatch-size-medium": {
+      "value": "32px",
+      "description": "Used by `--spectrum-swatch-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-swatch-border-radius": {
+      "value": "var(--mod-swatch-border-radius, var(--spectrum-corner-radius-100))",
+      "description": "Defined in `.spectrum-Swatch`. <br/>Used by `.spectrum-Swatch, .spectrum-Swatch:before`, `.spectrum-Swatch-fill, .spectrum-Swatch-fill:before`. <br/>Defaults to `var(--mod-swatch-border-radius, var(--spectrum-corner-radius-100))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-swatch-border-thickness": {
+      "value": "var(--mod-swatch-border-thickness, var(--spectrum-border-width-100))",
+      "description": "Defined in `.spectrum-Swatch`. <br/>Used by `.spectrum-Swatch-fill:before`. <br/>Defaults to `var(--mod-swatch-border-thickness, var(--spectrum-border-width-100))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-swatch-border-thickness-selected": {
+      "value": "var(--mod-swatch-border-thickness-selected, var(--spectrum-border-width-200))",
+      "description": "Defined in `.spectrum-Swatch`. <br/>Used by `.spectrum-Swatch.is-selected .spectrum-Swatch-fill`, `.spectrum-Swatch:before`, `.spectrum-Swatch--roundingFull.is-selected:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill`. <br/>Defaults to `var(--mod-swatch-border-thickness-selected, var(--spectrum-border-width-200))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-swatch-disabled-icon-size": {
+      "value": "var(--mod-swatch-disabled-icon-size, var(--spectrum-workflow-icon-size-200))",
+      "description": "Defined in `.spectrum-Swatch`, `.spectrum-Swatch--sizeXS`, `.spectrum-Swatch--sizeS`, `.spectrum-Swatch--sizeL`. <br/>Used by `.spectrum-Swatch .spectrum-Swatch-disabledIcon`. <br/>Defaults to `var(--mod-swatch-disabled-icon-size, var(--spectrum-workflow-icon-size-200))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-swatch-slash-thickness": {
+      "value": "var(--mod-swatch-slash-thickness, var(--spectrum-swatch-slash-thickness-large))",
+      "description": "Defined in `.spectrum-Swatch`, `.spectrum-Swatch--sizeXS`, `.spectrum-Swatch--sizeS`, `.spectrum-Swatch--sizeL`. <br/>Used by `.spectrum-Swatch.is-nothing:not(.spectrum-Swatch.is-mixedValue, .spectrum-Swatch.is-addSwatch) .spectrum-Swatch-fill:after`. <br/>Defaults to `var(--mod-swatch-slash-thickness, var(--spectrum-swatch-slash-thickness-large))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-swatch-slash-thickness-medium": {
+      "value": "4px",
+      "description": "Used by `--spectrum-swatch-slash-thickness`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-swatch-border-color-selected": {
+      "value": "var(--highcontrast-swatch-border-color-selected, var(--mod-swatch-border-color-selected, var(--spectrum-gray-1000)))",
+      "description": "Defined in `.spectrum-Swatch`. <br/>Used by `.spectrum-Swatch:before`. <br/>Defaults to `var(--highcontrast-swatch-border-color-selected, var(--mod-swatch-border-color-selected, var(--spectrum-gray-1000)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-swatch-inner-border-color-selected": {
+      "value": "var(--highcontrast-swatch-background-color-selected, var(--mod-swatch-inner-border-color-selected, var(--spectrum-gray-25)))",
+      "description": "Defined in `.spectrum-Swatch`. <br/>Used by `.spectrum-Swatch.is-selected`. <br/>Defaults to `var(--highcontrast-swatch-background-color-selected, var(--mod-swatch-inner-border-color-selected, var(--spectrum-gray-25)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-swatch-disabled-icon-color": {
+      "value": "var(--highcontrast-swatch-disabled-icon-color, var(--mod-swatch-disabled-icon-color, var(--spectrum-white)))",
+      "description": "Defined in `.spectrum-Swatch`. <br/>Used by `.spectrum-Swatch-disabledIcon`, `.spectrum-Swatch-disabledIcon path:first-child`. <br/>Defaults to `var(--highcontrast-swatch-disabled-icon-color, var(--mod-swatch-disabled-icon-color, var(--spectrum-white)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-swatch-icon-color": {
+      "value": "var(--highcontrast-swatch-icon-color, var(--mod-swatch-icon-color, var(--spectrum-neutral-content-color-default)))",
+      "description": "Defined in `.spectrum-Swatch`. <br/>Used by `.spectrum-Swatch.is-addSwatch .spectrum-Swatch-icon`, `.spectrum-Swatch.is-mixedValue .spectrum-Swatch-icon`. <br/>Defaults to `var(--highcontrast-swatch-icon-color, var(--mod-swatch-icon-color, var(--spectrum-neutral-content-color-default)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-swatch-slash-icon-color": {
+      "value": "var(--highcontrast-swatch-fill-foreground-color, var(--mod-swatch-slash-icon-color, var(--spectrum-negative-visual-color)))",
+      "description": "Defined in `.spectrum-Swatch`. <br/>Used by `.spectrum-Swatch.is-nothing:not(.spectrum-Swatch.is-mixedValue, .spectrum-Swatch.is-addSwatch) .spectrum-Swatch-fill:after`. <br/>Defaults to `var(--highcontrast-swatch-fill-foreground-color, var(--mod-swatch-slash-icon-color, var(--spectrum-negative-visual-color)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-swatch-border": {
+      "value": "var(--spectrum-add-button-background-hover)",
+      "description": "Defined in `.spectrum-Swatch`, `.spectrum-Swatch.is-addSwatch`, `.spectrum-Swatch.is-addSwatch:active`, `.spectrum-Swatch.is-addSwatch:hover`. <br/>Used by `.spectrum-Swatch-fill:before`. <br/>Defaults to `var(--spectrum-add-button-background-hover)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-swatch-border-color": {
+      "value": "var(--spectrum-gray-1000)",
+      "description": "Used by `--spectrum-swatch-border`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-swatch-border-opacity": {
+      "value": "0.42",
+      "description": "Used by `--spectrum-swatch-border`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-swatch-focus-indicator-color": {
+      "value": "var(--highcontrast-swatch-focus-indicator-color, var(--mod-swatch-focus-indicator-color, var(--spectrum-focus-indicator-color)))",
+      "description": "Defined in `.spectrum-Swatch`. <br/>Used by `.spectrum-Swatch.is-keyboardFocused, .spectrum-Swatch:focus-visible`. <br/>Defaults to `var(--highcontrast-swatch-focus-indicator-color, var(--mod-swatch-focus-indicator-color, var(--spectrum-focus-indicator-color)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-swatch-focus-indicator-thickness": {
+      "value": "var(--mod-swatch-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness))",
+      "description": "Defined in `.spectrum-Swatch`. <br/>Used by `.spectrum-Swatch.is-keyboardFocused, .spectrum-Swatch:focus-visible`. <br/>Defaults to `var(--mod-swatch-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-swatch-focus-indicator-gap": {
+      "value": "var(--mod-swatch-focus-indicator-gap, var(--spectrum-focus-indicator-gap))",
+      "description": "Defined in `.spectrum-Swatch`. <br/>Used by `.spectrum-Swatch.is-keyboardFocused, .spectrum-Swatch:focus-visible`. <br/>Defaults to `var(--mod-swatch-focus-indicator-gap, var(--spectrum-focus-indicator-gap))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-swatch-size-extra-small": {
+      "value": "16px",
+      "description": "Used by `--spectrum-swatch-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-swatch-slash-thickness-extra-small": {
+      "value": "2px",
+      "description": "Used by `--spectrum-swatch-slash-thickness`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-swatch-size-small": {
+      "value": "24px",
+      "description": "Used by `--spectrum-swatch-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-swatch-slash-thickness-small": {
+      "value": "3px",
+      "description": "Used by `--spectrum-swatch-slash-thickness`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-swatch-size-large": {
+      "value": "40px",
+      "description": "Used by `--spectrum-swatch-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-swatch-slash-thickness-large": {
+      "value": "5px",
+      "description": "Used by `--spectrum-swatch-slash-thickness`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-swatch-rectangle-width-multiplier": {
+      "value": "2",
+      "description": "Used by `.spectrum-Swatch--rectangle`.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-corner-radius-100": {
+      "value": "4px",
+      "description": "Used by `--spectrum-swatch-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-border-width-100": {
+      "value": "1px",
+      "description": "Used by `--spectrum-swatch-border-thickness`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-border-width-200": {
+      "value": "2px",
+      "description": "Used by `--spectrum-swatch-border-thickness-selected`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-75": {
+      "value": "16px",
+      "description": "Used by `--spectrum-swatch-disabled-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-1000": {
+      "value": "light-dark(rgb(0, 0, 0), rgb(255, 255, 255))",
+      "description": "Used by `--spectrum-swatch-border-color-selected`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-25": {
+      "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+      "description": "Used by `--spectrum-swatch-inner-border-color-selected`, `--spectrum-mixed-button-background`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-white": {
+      "value": "rgb(255, 255, 255)",
+      "description": "Used by `--spectrum-swatch-disabled-icon-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-swatch-icon-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-visual-color": {
+      "value": "var(--spectrum-negative-color-800)",
+      "description": "Used by `--spectrum-swatch-slash-icon-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-mixed-button-background": {
+      "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+      "description": "Defined in `.spectrum-Swatch`. <br/>Used by `--spectrum-picked-color`. <br/>Defaults to `var(--spectrum-gray-25)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-add-button-background": {
+      "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+      "description": "Defined in `.spectrum-Swatch`. <br/>Used by `--spectrum-swatch-border`, `--spectrum-picked-color`. <br/>Defaults to `var(--spectrum-gray-100)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-100": {
+      "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+      "description": "Used by `--spectrum-add-button-background`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-add-button-background-hover": {
+      "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+      "description": "Defined in `.spectrum-Swatch`. <br/>Used by `--spectrum-swatch-border`, `--spectrum-picked-color`. <br/>Defaults to `var(--spectrum-gray-200)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-200": {
+      "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+      "description": "Used by `--spectrum-add-button-background-hover`, `--spectrum-add-button-background-down`, `--spectrum-add-button-background-keyboard-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-add-button-background-down": {
+      "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+      "description": "Defined in `.spectrum-Swatch`. <br/>Used by `--spectrum-swatch-border`, `--spectrum-picked-color`. <br/>Defaults to `var(--spectrum-gray-200)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-add-button-background-keyboard-focus": {
+      "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+      "description": "Defined in `.spectrum-Swatch`. <br/>Used by `--spectrum-picked-color`. <br/>Defaults to `var(--spectrum-gray-200)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Used by `--spectrum-swatch-focus-indicator-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Used by `--spectrum-swatch-focus-indicator-thickness`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-gap": {
+      "value": "2px",
+      "description": "Used by `--spectrum-swatch-focus-indicator-gap`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-50": {
+      "value": "14px",
+      "description": "Used by `--spectrum-swatch-disabled-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-200": {
+      "value": "22px",
+      "description": "Used by `--spectrum-swatch-disabled-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-picked-color": {
+      "value": "var(--mod-add-button-background-keyboard-focus, var(--spectrum-add-button-background-keyboard-focus))",
+      "description": "Defined in `.spectrum-Swatch.is-mixedValue`, `.spectrum-Swatch.is-addSwatch`, `.spectrum-Swatch.is-addSwatch:active`, `.spectrum-Swatch.is-addSwatch:hover`, `.spectrum-Swatch.is-addSwatch.is-keyboardFocused, .spectrum-Swatch.is-addSwatch:focus-visible`. <br/>Used by `.spectrum-Swatch.is-addSwatch .spectrum-Swatch-fill`, `.spectrum-Swatch.is-mixedValue .spectrum-Swatch-fill`, `.spectrum-Swatch.is-nothing:not(.spectrum-Swatch.is-mixedValue, .spectrum-Swatch.is-addSwatch) .spectrum-Swatch-fill`, `.spectrum-Swatch-fill:before`, `.spectrum-Swatch-icon`. <br/>Defaults to `var(--mod-add-button-background-keyboard-focus, var(--spectrum-add-button-background-keyboard-focus))`, if not set.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-animation-duration-100": {
+      "description": "Used by `.spectrum-Swatch.is-keyboardFocused, .spectrum-Swatch:focus-visible`, `.spectrum-Swatch-image`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-none": {
+      "value": "0px",
+      "description": "Used by `.spectrum-Swatch--roundingNone, .spectrum-Swatch--roundingNone .spectrum-Swatch-fill, .spectrum-Swatch--roundingNone .spectrum-Swatch-fill:before, .spectrum-Swatch--roundingNone.is-selected .spectrum-Swatch-fill, .spectrum-Swatch--roundingNone.is-selected .spectrum-Swatch-fill:before, .spectrum-Swatch--roundingNone:after, .spectrum-Swatch--roundingNone:before`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-full": {
+      "value": "9999px",
+      "description": "Used by `.spectrum-Swatch--roundingFull.is-selected:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill, .spectrum-Swatch--roundingFull.is-selected:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill:before, .spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle), .spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill, .spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill:before, .spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle):after, .spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle):before`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {
+    "highcontrast-swatch-border-color-selected": {
+      "value": "var(--mod-swatch-border-color-selected, var(--spectrum-gray-1000))",
+      "description": "Defined in `.spectrum-Swatch`. <br/>Used by `--spectrum-swatch-border-color-selected`. <br/>Defaults to `var(--mod-swatch-border-color-selected, var(--spectrum-gray-1000))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-swatch-background-color-selected": {
+      "value": "var(--mod-swatch-inner-border-color-selected, var(--spectrum-gray-25))",
+      "description": "Defined in `.spectrum-Swatch`. <br/>Used by `--spectrum-swatch-inner-border-color-selected`. <br/>Defaults to `var(--mod-swatch-inner-border-color-selected, var(--spectrum-gray-25))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-swatch-disabled-icon-color": {
+      "value": "var(--mod-swatch-disabled-icon-color, var(--spectrum-white))",
+      "description": "Defined in `.spectrum-Swatch`. <br/>Used by `--spectrum-swatch-disabled-icon-color`. <br/>Defaults to `var(--mod-swatch-disabled-icon-color, var(--spectrum-white))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-swatch-icon-color": {
+      "value": "var(--mod-swatch-icon-color, var(--spectrum-neutral-content-color-default))",
+      "description": "Defined in `.spectrum-Swatch.is-addSwatch:active, .spectrum-Swatch.is-mixedValue`, `.spectrum-Swatch.is-addSwatch:hover`, `.spectrum-Swatch.is-addSwatch.is-keyboardFocused, .spectrum-Swatch.is-addSwatch:focus-visible`. <br/>Used by `--spectrum-swatch-icon-color`. <br/>Defaults to `var(--mod-swatch-icon-color, var(--spectrum-neutral-content-color-default))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-swatch-fill-foreground-color": {
+      "value": "var(--mod-swatch-slash-icon-color, var(--spectrum-negative-visual-color))",
+      "description": "Defined in `.spectrum-Swatch`. <br/>Used by `--spectrum-swatch-slash-icon-color`. <br/>Defaults to `var(--mod-swatch-slash-icon-color, var(--spectrum-negative-visual-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-swatch-focus-indicator-color": {
+      "value": "var(--mod-swatch-focus-indicator-color, var(--spectrum-focus-indicator-color))",
+      "description": "Defined in `.spectrum-Swatch`. <br/>Used by `--spectrum-swatch-focus-indicator-color`. <br/>Defaults to `var(--mod-swatch-focus-indicator-color, var(--spectrum-focus-indicator-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-swatch-border-color": {
+      "value": "var(--mod-swatch-border, var(--spectrum-swatch-border))",
+      "description": "Defined in `.spectrum-Swatch`, `.spectrum-Swatch.is-disabled, .spectrum-Swatch[disabled]`. <br/>Used by `.spectrum-Swatch-fill:before`. <br/>Defaults to `var(--mod-swatch-border, var(--spectrum-swatch-border))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/swatch/stories/swatch.stories.js b/components/swatch/stories/swatch.stories.js
index 50b2ec74522..e42a9af2090 100644
--- a/components/swatch/stories/swatch.stories.js
+++ b/components/swatch/stories/swatch.stories.js
@@ -1,11 +1,13 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, isHovered, isActive, isKeyboardFocused, isSelected, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { SwatchGroup } from "./swatch.test.js";
 import { DisabledGroup, EmptyGroup, RoundingGroup, SizingGroup, Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * A swatch shows a small sample of a fill--such as a color, gradient, texture, or material--that is intended to be applied to an object.
  *
@@ -126,9 +128,7 @@ export default {
 		},
 		packageJson,
 		metadata,
-		status: {
-			type: "migrated",
-		},
+		cssprops: metadata.modifiers,
 	},
 	tags: ["migrated"],
 };
diff --git a/components/swatchgroup/dist/metadata.json b/components/swatchgroup/dist/metadata.json
index 73ac1e248a6..8280df809d6 100644
--- a/components/swatchgroup/dist/metadata.json
+++ b/components/swatchgroup/dist/metadata.json
@@ -6,16 +6,51 @@
     ".spectrum-SwatchGroup--spacious:has(.spectrum-Swatch--sizeM, .spectrum-Swatch--sizeL)",
     ".spectrum-SwatchGroup--spacious:has(.spectrum-Swatch--sizeXS, .spectrum-Swatch--sizeS)"
   ],
-  "modifiers": ["--mod-swatchgroup-spacing"],
-  "component": [
-    "--spectrum-swatch-group-spacing-spacious",
-    "--spectrum-swatchgroup-spacing"
-  ],
-  "global": [
-    "--spectrum-spacing-100",
-    "--spectrum-spacing-50",
-    "--spectrum-spacing-75"
-  ],
-  "passthroughs": ["--mod-swatch-border-opacity"],
-  "high-contrast": []
+  "modifiers": {
+    "mod-swatchgroup-spacing": {
+      "description": "Used by `.spectrum-SwatchGroup`. <br/>Defaults to `var(--spectrum-swatchgroup-spacing)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-swatchgroup-spacing": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-SwatchGroup`, `.spectrum-SwatchGroup--compact`, `.spectrum-SwatchGroup--spacious:has(.spectrum-Swatch--sizeXS, .spectrum-Swatch--sizeS)`, `.spectrum-SwatchGroup--spacious:has(.spectrum-Swatch--sizeM, .spectrum-Swatch--sizeL)`. <br/>Used by `.spectrum-SwatchGroup`. <br/>Defaults to `var(--spectrum-spacing-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-swatch-group-spacing-spacious": {
+      "value": "6px",
+      "description": "Used by `--spectrum-swatchgroup-spacing`.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-spacing-75": {
+      "value": "4px",
+      "description": "Used by `--spectrum-swatchgroup-spacing`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-50": {
+      "value": "2px",
+      "description": "Used by `--spectrum-swatchgroup-spacing`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-100": {
+      "value": "8px",
+      "description": "Used by `--spectrum-swatchgroup-spacing`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {
+    "mod-swatch-border-opacity": {
+      "category": "Passthrough"
+    }
+  },
+  "high-contrast": {}
 }
diff --git a/components/swatchgroup/stories/swatchgroup.stories.js b/components/swatchgroup/stories/swatchgroup.stories.js
index 669280b0882..aad02ecc048 100644
--- a/components/swatchgroup/stories/swatchgroup.stories.js
+++ b/components/swatchgroup/stories/swatchgroup.stories.js
@@ -1,11 +1,13 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { default as Swatch } from "@spectrum-css/swatch/stories/swatch.stories.js";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { SwatchgroupGroup } from "./swatchgroup.test.js";
 import { RoundingTemplate, Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * The swatch group component is a collection of [swatches](?path=/docs/components-swatch--docs).
  *
@@ -103,9 +105,7 @@ export default {
 		},
 		packageJson,
 		metadata,
-		status: {
-			type: "migrated",
-		},
+		cssprops: metadata.modifiers,
 	},
 	tags: ["migrated"],
 };
diff --git a/components/swatchgroup/stories/template.js b/components/swatchgroup/stories/template.js
index f42b3fe0908..fd6181f0406 100644
--- a/components/swatchgroup/stories/template.js
+++ b/components/swatchgroup/stories/template.js
@@ -9,6 +9,7 @@ import "../index.css";
 
 export const Template = ({
 	rootClass = "spectrum-SwatchGroup",
+	id = getRandomId("swatch-group"),
 	customClasses = [],
 	size = "m",
 	density = "regular",
@@ -16,7 +17,6 @@ export const Template = ({
 	containerWidth,
 	items = [],
 	customStyles = {},
-	id = getRandomId("swatchgroup"),
 } = {}, context = {}) => html`
 	<div
 		class=${classMap({
diff --git a/components/switch/dist/metadata.json b/components/switch/dist/metadata.json
index 03beda3b924..388c7c0c7fd 100644
--- a/components/switch/dist/metadata.json
+++ b/components/switch/dist/metadata.json
@@ -40,11 +40,6 @@
     ".spectrum-Switch-switch .spectrum-Switch--active",
     ".spectrum-Switch-switch:after",
     ".spectrum-Switch-switch:before",
-    ".spectrum-Switch.spectrum-Switch--emphasized",
-    ".spectrum-Switch.spectrum-Switch:active .spectrum-Switch-input:checked + .spectrum-Switch-switch",
-    ".spectrum-Switch.spectrum-Switch:active .spectrum-Switch-input:checked + .spectrum-Switch-switch:before",
-    ".spectrum-Switch.spectrum-Switch:active .spectrum-Switch-switch",
-    ".spectrum-Switch.spectrum-Switch:active .spectrum-Switch-switch:before",
     ".spectrum-Switch:active .spectrum-Switch-input:not(:disabled) + .spectrum-Switch-switch:before",
     ".spectrum-Switch:active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before",
     ".spectrum-Switch:active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before:dir(rtl)",
@@ -63,202 +58,1065 @@
     ".spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch:before",
     ".spectrum-Switch:hover .spectrum-Switch-switch",
     ".spectrum-Switch:hover .spectrum-Switch-switch:before",
-    ".spectrum-Switch:hover ~ .spectrum-Switch-label"
-  ],
-  "modifiers": [
-    "--mod-switch-animation-duration-switch",
-    "--mod-switch-background-color",
-    "--mod-switch-background-color-disabled",
-    "--mod-switch-background-color-selected-default",
-    "--mod-switch-background-color-selected-disabled",
-    "--mod-switch-background-color-selected-down",
-    "--mod-switch-background-color-selected-focus",
-    "--mod-switch-background-color-selected-hover",
-    "--mod-switch-border-color-default",
-    "--mod-switch-border-color-disabled",
-    "--mod-switch-border-color-down",
-    "--mod-switch-border-color-focus",
-    "--mod-switch-border-color-hover",
-    "--mod-switch-border-color-selected-default",
-    "--mod-switch-border-color-selected-down",
-    "--mod-switch-border-color-selected-focus",
-    "--mod-switch-border-color-selected-hover",
-    "--mod-switch-border-radius",
-    "--mod-switch-border-width",
-    "--mod-switch-cjk-line-height",
-    "--mod-switch-control-height",
-    "--mod-switch-control-label-spacing",
-    "--mod-switch-control-width",
-    "--mod-switch-focus-indicator-color",
-    "--mod-switch-focus-indicator-gap",
-    "--mod-switch-focus-indicator-thickness",
-    "--mod-switch-font-size",
-    "--mod-switch-handle-background-color-default",
-    "--mod-switch-handle-background-color-disabled",
-    "--mod-switch-handle-background-color-down",
-    "--mod-switch-handle-background-color-focus",
-    "--mod-switch-handle-background-color-hover",
-    "--mod-switch-handle-background-color-selected",
-    "--mod-switch-handle-background-color-selected-disabled",
-    "--mod-switch-handle-selected-size",
-    "--mod-switch-handle-size",
-    "--mod-switch-height",
-    "--mod-switch-label-color-default",
-    "--mod-switch-label-color-disabled",
-    "--mod-switch-label-color-down",
-    "--mod-switch-label-color-focus",
-    "--mod-switch-label-color-hover",
-    "--mod-switch-line-height",
-    "--mod-switch-spacing-bottom-to-label",
-    "--mod-switch-spacing-top-to-control",
-    "--mod-switch-spacing-top-to-label"
-  ],
-  "component": [
-    "--spectrum-switch-animation-duration-label",
-    "--spectrum-switch-animation-duration-switch",
-    "--spectrum-switch-background-color",
-    "--spectrum-switch-background-color-disabled",
-    "--spectrum-switch-background-color-selected-default",
-    "--spectrum-switch-background-color-selected-disabled",
-    "--spectrum-switch-background-color-selected-down",
-    "--spectrum-switch-background-color-selected-focus",
-    "--spectrum-switch-background-color-selected-hover",
-    "--spectrum-switch-border-color-default",
-    "--spectrum-switch-border-color-disabled",
-    "--spectrum-switch-border-color-down",
-    "--spectrum-switch-border-color-focus",
-    "--spectrum-switch-border-color-hover",
-    "--spectrum-switch-border-color-selected-default",
-    "--spectrum-switch-border-color-selected-down",
-    "--spectrum-switch-border-color-selected-focus",
-    "--spectrum-switch-border-color-selected-hover",
-    "--spectrum-switch-border-radius",
-    "--spectrum-switch-border-width",
-    "--spectrum-switch-cjk-line-height",
-    "--spectrum-switch-control-height",
-    "--spectrum-switch-control-height-extra-large",
-    "--spectrum-switch-control-height-large",
-    "--spectrum-switch-control-height-medium",
-    "--spectrum-switch-control-height-small",
-    "--spectrum-switch-control-label-spacing",
-    "--spectrum-switch-control-width",
-    "--spectrum-switch-control-width-extra-large",
-    "--spectrum-switch-control-width-large",
-    "--spectrum-switch-control-width-medium",
-    "--spectrum-switch-control-width-small",
-    "--spectrum-switch-focus-indicator-color",
-    "--spectrum-switch-focus-indicator-gap",
-    "--spectrum-switch-focus-indicator-thickness",
-    "--spectrum-switch-font-size",
-    "--spectrum-switch-handle-background-color-default",
-    "--spectrum-switch-handle-background-color-disabled",
-    "--spectrum-switch-handle-background-color-down",
-    "--spectrum-switch-handle-background-color-focus",
-    "--spectrum-switch-handle-background-color-hover",
-    "--spectrum-switch-handle-background-color-selected",
-    "--spectrum-switch-handle-background-color-selected-disabled",
-    "--spectrum-switch-handle-selected-size",
-    "--spectrum-switch-handle-selected-size-extra-large",
-    "--spectrum-switch-handle-selected-size-large",
-    "--spectrum-switch-handle-selected-size-medium",
-    "--spectrum-switch-handle-selected-size-small",
-    "--spectrum-switch-handle-size",
-    "--spectrum-switch-handle-size-extra-large",
-    "--spectrum-switch-handle-size-large",
-    "--spectrum-switch-handle-size-medium",
-    "--spectrum-switch-handle-size-small",
-    "--spectrum-switch-label-color-default",
-    "--spectrum-switch-label-color-disabled",
-    "--spectrum-switch-label-color-down",
-    "--spectrum-switch-label-color-focus",
-    "--spectrum-switch-label-color-hover",
-    "--spectrum-switch-line-height",
-    "--spectrum-switch-min-height",
-    "--spectrum-switch-spacing-bottom-to-label",
-    "--spectrum-switch-spacing-top-to-control",
-    "--spectrum-switch-spacing-top-to-label",
-    "--spectrum-switch-top-to-control-extra-large",
-    "--spectrum-switch-top-to-control-large",
-    "--spectrum-switch-top-to-control-medium",
-    "--spectrum-switch-top-to-control-small"
-  ],
-  "global": [
-    "--spectrum-accent-background-color-default",
-    "--spectrum-accent-background-color-down",
-    "--spectrum-accent-background-color-hover",
-    "--spectrum-accent-background-color-key-focus",
-    "--spectrum-animation-duration-100",
-    "--spectrum-animation-duration-200",
-    "--spectrum-border-width-200",
-    "--spectrum-cjk-line-height-100",
-    "--spectrum-component-bottom-to-text-100",
-    "--spectrum-component-bottom-to-text-200",
-    "--spectrum-component-bottom-to-text-300",
-    "--spectrum-component-bottom-to-text-75",
-    "--spectrum-component-height-100",
-    "--spectrum-component-height-200",
-    "--spectrum-component-height-300",
-    "--spectrum-component-height-75",
-    "--spectrum-component-size-difference-down",
-    "--spectrum-component-size-minimum-perspective-down",
-    "--spectrum-component-top-to-text-100",
-    "--spectrum-component-top-to-text-200",
-    "--spectrum-component-top-to-text-300",
-    "--spectrum-component-top-to-text-75",
-    "--spectrum-corner-radius-full",
-    "--spectrum-disabled-content-color",
-    "--spectrum-focus-indicator-color",
-    "--spectrum-focus-indicator-gap",
-    "--spectrum-focus-indicator-thickness",
-    "--spectrum-font-size-100",
-    "--spectrum-font-size-200",
-    "--spectrum-font-size-300",
-    "--spectrum-font-size-75",
-    "--spectrum-gray-25",
-    "--spectrum-line-height-100",
-    "--spectrum-neutral-background-color-default",
-    "--spectrum-neutral-background-color-down",
-    "--spectrum-neutral-background-color-hover",
-    "--spectrum-neutral-background-color-key-focus",
-    "--spectrum-neutral-content-color-default",
-    "--spectrum-neutral-content-color-down",
-    "--spectrum-neutral-content-color-hover",
-    "--spectrum-neutral-content-color-key-focus",
-    "--spectrum-text-to-control-100",
-    "--spectrum-text-to-control-200",
-    "--spectrum-text-to-control-300",
-    "--spectrum-text-to-control-75"
+    ".spectrum-Switch:hover ~ .spectrum-Switch-label",
+    ".spectrum-Switch.spectrum-Switch--emphasized",
+    ".spectrum-Switch.spectrum-Switch:active .spectrum-Switch-input:checked + .spectrum-Switch-switch",
+    ".spectrum-Switch.spectrum-Switch:active .spectrum-Switch-input:checked + .spectrum-Switch-switch:before",
+    ".spectrum-Switch.spectrum-Switch:active .spectrum-Switch-switch",
+    ".spectrum-Switch.spectrum-Switch:active .spectrum-Switch-switch:before"
   ],
-  "passthroughs": [],
-  "high-contrast": [
-    "--highcontrast-switch-background-color",
-    "--highcontrast-switch-background-color-disabled",
-    "--highcontrast-switch-background-color-selected-default",
-    "--highcontrast-switch-background-color-selected-disabled",
-    "--highcontrast-switch-background-color-selected-down",
-    "--highcontrast-switch-background-color-selected-focus",
-    "--highcontrast-switch-background-color-selected-hover",
-    "--highcontrast-switch-border-color-default",
-    "--highcontrast-switch-border-color-disabled",
-    "--highcontrast-switch-border-color-down",
-    "--highcontrast-switch-border-color-focus",
-    "--highcontrast-switch-border-color-hover",
-    "--highcontrast-switch-border-color-selected-default",
-    "--highcontrast-switch-border-color-selected-down",
-    "--highcontrast-switch-border-color-selected-focus",
-    "--highcontrast-switch-border-color-selected-hover",
-    "--highcontrast-switch-focus-indicator-color",
-    "--highcontrast-switch-handle-background-color-default",
-    "--highcontrast-switch-handle-background-color-disabled",
-    "--highcontrast-switch-handle-background-color-down",
-    "--highcontrast-switch-handle-background-color-focus",
-    "--highcontrast-switch-handle-background-color-hover",
-    "--highcontrast-switch-handle-background-color-selected",
-    "--highcontrast-switch-handle-background-color-selected-disabled",
-    "--highcontrast-switch-label-color-default",
-    "--highcontrast-switch-label-color-disabled",
-    "--highcontrast-switch-label-color-down",
-    "--highcontrast-switch-label-color-focus",
-    "--highcontrast-switch-label-color-hover"
-  ]
+  "modifiers": {
+    "mod-switch-height": {
+      "description": "Used by `.spectrum-Switch`, `.spectrum-Switch-switch`. <br/>Defaults to `var(--spectrum-switch-min-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-switch-label-color-default": {
+      "description": "Used by `.spectrum-Switch-label`. <br/>Defaults to `var(--spectrum-switch-label-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-switch-control-label-spacing": {
+      "description": "Used by `.spectrum-Switch-label`. <br/>Defaults to `var(--spectrum-switch-control-label-spacing)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-switch-spacing-top-to-label": {
+      "description": "Used by `.spectrum-Switch-label`. <br/>Defaults to `var(--spectrum-switch-spacing-top-to-label)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-switch-spacing-bottom-to-label": {
+      "description": "Used by `.spectrum-Switch-label`. <br/>Defaults to `var(--spectrum-switch-spacing-bottom-to-label)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-switch-font-size": {
+      "description": "Used by `.spectrum-Switch-label`. <br/>Defaults to `var(--spectrum-switch-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-switch-line-height": {
+      "description": "Used by `.spectrum-Switch-label`. <br/>Defaults to `var(--spectrum-switch-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-switch-cjk-line-height": {
+      "description": "Used by `.spectrum-Switch-label:lang(ja), .spectrum-Switch-label:lang(ko), .spectrum-Switch-label:lang(zh)`. <br/>Defaults to `var(--spectrum-switch-cjk-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-switch-label-color-down": {
+      "description": "Used by `.spectrum-Switch:active ~ .spectrum-Switch-label`. <br/>Defaults to `var(--spectrum-switch-label-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-switch-label-color-focus": {
+      "description": "Used by `.spectrum-Switch-input:focus-visible ~ .spectrum-Switch-label`. <br/>Defaults to `var(--spectrum-switch-label-color-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-switch-control-width": {
+      "description": "Used by `.spectrum-Switch-switch`. <br/>Defaults to `var(--spectrum-switch-control-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-switch-control-height": {
+      "description": "Used by `.spectrum-Switch-switch`, `.spectrum-Switch-switch:before`, `.spectrum-Switch-input:checked + .spectrum-Switch-switch:before`. <br/>Defaults to `var(--spectrum-switch-control-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-switch-spacing-top-to-control": {
+      "description": "Used by `.spectrum-Switch-switch`. <br/>Defaults to `var(--spectrum-switch-spacing-top-to-control)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-switch-animation-duration-switch": {
+      "description": "Used by `.spectrum-Switch-switch`. <br/>Defaults to `var(--spectrum-switch-animation-duration-switch)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-switch-background-color": {
+      "description": "Used by `.spectrum-Switch-switch`. <br/>Defaults to `var(--spectrum-switch-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-switch-border-radius": {
+      "description": "Used by `.spectrum-Switch-switch`, `.spectrum-Switch-switch:before`, `.spectrum-Switch-switch:after`. <br/>Defaults to `var(--spectrum-switch-border-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-switch-border-width": {
+      "description": "Used by `.spectrum-Switch-switch`, `.spectrum-Switch-input:checked + .spectrum-Switch-switch:before`, `.spectrum-Switch-input:checked + .spectrum-Switch-switch:before:dir(rtl)`, `.spectrum-Switch--active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before, .spectrum-Switch:active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before`, `.spectrum-Switch--active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before:dir(rtl), .spectrum-Switch:active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before:dir(rtl)`. <br/>Defaults to `var(--spectrum-switch-border-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-switch-border-color-default": {
+      "description": "Used by `.spectrum-Switch-switch`. <br/>Defaults to `var(--spectrum-switch-border-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-switch-border-color-down": {
+      "description": "Used by `.spectrum-Switch-switch .spectrum-Switch--active, .spectrum-Switch.spectrum-Switch:active .spectrum-Switch-switch`. <br/>Defaults to `var(--spectrum-switch-border-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-switch-border-color-focus": {
+      "description": "Used by `.spectrum-Switch-input:focus-visible + .spectrum-Switch-switch`. <br/>Defaults to `var(--spectrum-switch-border-color-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-switch-background-color-selected-default": {
+      "description": "Used by `.spectrum-Switch-input:checked + .spectrum-Switch-switch`. <br/>Defaults to `var(--spectrum-switch-background-color-selected-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-switch-border-color-selected-default": {
+      "description": "Used by `.spectrum-Switch-input:checked + .spectrum-Switch-switch`. <br/>Defaults to `var(--spectrum-switch-border-color-selected-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-switch-background-color-selected-down": {
+      "description": "Used by `.spectrum-Switch--active .spectrum-Switch-input:checked + .spectrum-Switch-switch, .spectrum-Switch.spectrum-Switch:active .spectrum-Switch-input:checked + .spectrum-Switch-switch`. <br/>Defaults to `var(--spectrum-switch-background-color-selected-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-switch-border-color-selected-down": {
+      "description": "Used by `.spectrum-Switch--active .spectrum-Switch-input:checked + .spectrum-Switch-switch, .spectrum-Switch.spectrum-Switch:active .spectrum-Switch-input:checked + .spectrum-Switch-switch`. <br/>Defaults to `var(--spectrum-switch-border-color-selected-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-switch-background-color-selected-focus": {
+      "description": "Used by `.spectrum-Switch-input:checked:focus-visible + .spectrum-Switch-switch`. <br/>Defaults to `var(--spectrum-switch-background-color-selected-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-switch-border-color-selected-focus": {
+      "description": "Used by `.spectrum-Switch-input:checked:focus-visible + .spectrum-Switch-switch`. <br/>Defaults to `var(--spectrum-switch-border-color-selected-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-switch-handle-size": {
+      "description": "Used by `.spectrum-Switch-switch:before`. <br/>Defaults to `var(--spectrum-switch-handle-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-switch-handle-background-color-default": {
+      "description": "Used by `.spectrum-Switch-switch:before`. <br/>Defaults to `var(--spectrum-switch-handle-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-switch-handle-background-color-down": {
+      "description": "Used by `.spectrum-Switch.spectrum-Switch:active .spectrum-Switch-switch:before`. <br/>Defaults to `var(--spectrum-switch-handle-background-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-switch-handle-background-color-focus": {
+      "description": "Used by `.spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:before`. <br/>Defaults to `var(--spectrum-switch-handle-background-color-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-switch-handle-background-color-selected": {
+      "description": "Used by `.spectrum-Switch-input:checked + .spectrum-Switch-switch:before`, `.spectrum-Switch--active .spectrum-Switch-input:checked + .spectrum-Switch-switch:before, .spectrum-Switch.spectrum-Switch:active .spectrum-Switch-input:checked + .spectrum-Switch-switch:before`, `.spectrum-Switch:hover .spectrum-Switch-input:checked + .spectrum-Switch-switch:before`. <br/>Defaults to `var(--spectrum-switch-handle-background-color-selected)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-switch-handle-selected-size": {
+      "description": "Used by `.spectrum-Switch-input:checked + .spectrum-Switch-switch:before`. <br/>Defaults to `var(--spectrum-switch-handle-selected-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-switch-focus-indicator-thickness": {
+      "description": "Used by `.spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after`. <br/>Defaults to `var(--spectrum-switch-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-switch-focus-indicator-color": {
+      "description": "Used by `.spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after`. <br/>Defaults to `var(--spectrum-switch-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-switch-focus-indicator-gap": {
+      "description": "Used by `.spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after`. <br/>Defaults to `var(--spectrum-switch-focus-indicator-gap)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-switch-background-color-disabled": {
+      "description": "Used by `.spectrum-Switch .spectrum-Switch-input:disabled + .spectrum-Switch-switch, .spectrum-Switch .spectrum-Switch-input[disabled] + .spectrum-Switch-switch`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled + .spectrum-Switch-switch, .spectrum-Switch:hover .spectrum-Switch-input[disabled] + .spectrum-Switch-switch`. <br/>Defaults to `var(--spectrum-switch-background-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-switch-border-color-disabled": {
+      "description": "Used by `.spectrum-Switch .spectrum-Switch-input:disabled + .spectrum-Switch-switch, .spectrum-Switch .spectrum-Switch-input[disabled] + .spectrum-Switch-switch`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled + .spectrum-Switch-switch, .spectrum-Switch:hover .spectrum-Switch-input[disabled] + .spectrum-Switch-switch`. <br/>Defaults to `var(--spectrum-switch-border-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-switch-handle-background-color-disabled": {
+      "description": "Used by `.spectrum-Switch .spectrum-Switch-input:disabled + .spectrum-Switch-switch:before, .spectrum-Switch .spectrum-Switch-input[disabled] + .spectrum-Switch-switch:before`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled + .spectrum-Switch-switch:before, .spectrum-Switch:hover .spectrum-Switch-input[disabled] + .spectrum-Switch-switch:before`. <br/>Defaults to `var(--spectrum-switch-handle-background-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-switch-background-color-selected-disabled": {
+      "description": "Used by `.spectrum-Switch .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch, .spectrum-Switch .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch, .spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch`. <br/>Defaults to `var(--spectrum-switch-background-color-selected-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-switch-handle-background-color-selected-disabled": {
+      "description": "Used by `.spectrum-Switch .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch:before, .spectrum-Switch .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch:before`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch:before, .spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch:before`. <br/>Defaults to `var(--spectrum-switch-handle-background-color-selected-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-switch-label-color-disabled": {
+      "description": "Used by `.spectrum-Switch .spectrum-Switch-input:disabled ~ .spectrum-Switch-label, .spectrum-Switch .spectrum-Switch-input[disabled] ~ .spectrum-Switch-label`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled ~ .spectrum-Switch-label, .spectrum-Switch:hover .spectrum-Switch-input[disabled] ~ .spectrum-Switch-label`. <br/>Defaults to `var(--spectrum-switch-label-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-switch-label-color-hover": {
+      "description": "Used by `.spectrum-Switch:hover ~ .spectrum-Switch-label`. <br/>Defaults to `var(--spectrum-switch-label-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-switch-border-color-hover": {
+      "description": "Used by `.spectrum-Switch:hover .spectrum-Switch-switch`. <br/>Defaults to `var(--spectrum-switch-border-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-switch-background-color-selected-hover": {
+      "description": "Used by `.spectrum-Switch:hover .spectrum-Switch-input:checked + .spectrum-Switch-switch`. <br/>Defaults to `var(--spectrum-switch-background-color-selected-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-switch-border-color-selected-hover": {
+      "description": "Used by `.spectrum-Switch:hover .spectrum-Switch-input:checked + .spectrum-Switch-switch`. <br/>Defaults to `var(--spectrum-switch-border-color-selected-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-switch-handle-background-color-hover": {
+      "description": "Used by `.spectrum-Switch:hover .spectrum-Switch-switch:before`. <br/>Defaults to `var(--spectrum-switch-handle-background-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-switch-label-color-default": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch--disabled`. <br/>Used by `.spectrum-Switch-label`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-switch-label-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch:hover ~ .spectrum-Switch-label`. <br/>Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-switch-label-color-down": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch:active ~ .spectrum-Switch-label`. <br/>Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-switch-label-color-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch-input:focus-visible ~ .spectrum-Switch-label`. <br/>Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-switch-label-color-disabled": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch .spectrum-Switch-input:disabled ~ .spectrum-Switch-label, .spectrum-Switch .spectrum-Switch-input[disabled] ~ .spectrum-Switch-label`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled ~ .spectrum-Switch-label, .spectrum-Switch:hover .spectrum-Switch-input[disabled] ~ .spectrum-Switch-label`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-switch-border-width": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch-switch`, `.spectrum-Switch-input:checked + .spectrum-Switch-switch:before`, `.spectrum-Switch-input:checked + .spectrum-Switch-switch:before:dir(rtl)`, `.spectrum-Switch--active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before, .spectrum-Switch:active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before`, `.spectrum-Switch--active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before:dir(rtl), .spectrum-Switch:active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before:dir(rtl)`. <br/>Defaults to `var(--spectrum-border-width-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-switch-border-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch-switch`. <br/>Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-switch-border-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch:hover .spectrum-Switch-switch`. <br/>Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-switch-border-color-down": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch-switch .spectrum-Switch--active, .spectrum-Switch.spectrum-Switch:active .spectrum-Switch-switch`. <br/>Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-switch-border-color-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch-input:focus-visible + .spectrum-Switch-switch`. <br/>Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-switch-border-color-disabled": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch .spectrum-Switch-input:disabled + .spectrum-Switch-switch, .spectrum-Switch .spectrum-Switch-input[disabled] + .spectrum-Switch-switch`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled + .spectrum-Switch-switch, .spectrum-Switch:hover .spectrum-Switch-input[disabled] + .spectrum-Switch-switch`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-switch-border-color-selected-default": {
+      "value": "var(--spectrum-accent-color-900)",
+      "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch.spectrum-Switch--emphasized`. <br/>Used by `.spectrum-Switch-input:checked + .spectrum-Switch-switch`. <br/>Defaults to `var(--spectrum-accent-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-switch-border-color-selected-hover": {
+      "value": "var(--spectrum-accent-color-1000)",
+      "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch.spectrum-Switch--emphasized`. <br/>Used by `.spectrum-Switch:hover .spectrum-Switch-input:checked + .spectrum-Switch-switch`. <br/>Defaults to `var(--spectrum-accent-background-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-switch-border-color-selected-down": {
+      "value": "var(--spectrum-accent-color-1000)",
+      "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch.spectrum-Switch--emphasized`. <br/>Used by `.spectrum-Switch--active .spectrum-Switch-input:checked + .spectrum-Switch-switch, .spectrum-Switch.spectrum-Switch:active .spectrum-Switch-input:checked + .spectrum-Switch-switch`. <br/>Defaults to `var(--spectrum-accent-background-color-down)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-switch-border-color-selected-focus": {
+      "value": "var(--spectrum-accent-color-1000)",
+      "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch.spectrum-Switch--emphasized`. <br/>Used by `.spectrum-Switch-input:checked:focus-visible + .spectrum-Switch-switch`. <br/>Defaults to `var(--spectrum-accent-background-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-switch-background-color": {
+      "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch-switch`. <br/>Defaults to `var(--spectrum-gray-25)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-switch-background-color-disabled": {
+      "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch .spectrum-Switch-input:disabled + .spectrum-Switch-switch, .spectrum-Switch .spectrum-Switch-input[disabled] + .spectrum-Switch-switch`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled + .spectrum-Switch-switch, .spectrum-Switch:hover .spectrum-Switch-input[disabled] + .spectrum-Switch-switch`. <br/>Defaults to `var(--spectrum-gray-25)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-switch-background-color-selected-default": {
+      "value": "var(--spectrum-accent-color-900)",
+      "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch.spectrum-Switch--emphasized`. <br/>Used by `.spectrum-Switch-input:checked + .spectrum-Switch-switch`. <br/>Defaults to `var(--spectrum-accent-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-switch-background-color-selected-hover": {
+      "value": "var(--spectrum-accent-color-1000)",
+      "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch.spectrum-Switch--emphasized`. <br/>Used by `.spectrum-Switch:hover .spectrum-Switch-input:checked + .spectrum-Switch-switch`. <br/>Defaults to `var(--spectrum-accent-background-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-switch-background-color-selected-down": {
+      "value": "var(--spectrum-accent-color-1000)",
+      "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch.spectrum-Switch--emphasized`. <br/>Used by `.spectrum-Switch--active .spectrum-Switch-input:checked + .spectrum-Switch-switch, .spectrum-Switch.spectrum-Switch:active .spectrum-Switch-input:checked + .spectrum-Switch-switch`. <br/>Defaults to `var(--spectrum-accent-background-color-down)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-switch-background-color-selected-focus": {
+      "value": "var(--spectrum-accent-color-1000)",
+      "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch.spectrum-Switch--emphasized`. <br/>Used by `.spectrum-Switch-input:checked:focus-visible + .spectrum-Switch-switch`. <br/>Defaults to `var(--spectrum-accent-background-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-switch-background-color-selected-disabled": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch, .spectrum-Switch .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch, .spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-switch-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after`. <br/>Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-switch-focus-indicator-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after`. <br/>Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-switch-focus-indicator-gap": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after`. <br/>Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-switch-handle-background-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch-switch:before`. <br/>Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-switch-handle-background-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch:hover .spectrum-Switch-switch:before`. <br/>Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-switch-handle-background-color-down": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch.spectrum-Switch:active .spectrum-Switch-switch:before`. <br/>Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-switch-handle-background-color-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:before`. <br/>Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-switch-handle-background-color-disabled": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch .spectrum-Switch-input:disabled + .spectrum-Switch-switch:before, .spectrum-Switch .spectrum-Switch-input[disabled] + .spectrum-Switch-switch:before`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled + .spectrum-Switch-switch:before, .spectrum-Switch:hover .spectrum-Switch-input[disabled] + .spectrum-Switch-switch:before`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-switch-handle-background-color-selected": {
+      "value": "var(--mod-switch-handle-background-color-selected, var(--spectrum-switch-handle-background-color-selected))",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch-input:checked + .spectrum-Switch-switch:before`, `.spectrum-Switch--active .spectrum-Switch-input:checked + .spectrum-Switch-switch:before, .spectrum-Switch.spectrum-Switch:active .spectrum-Switch-input:checked + .spectrum-Switch-switch:before`, `.spectrum-Switch:hover .spectrum-Switch-input:checked + .spectrum-Switch-switch:before`. <br/>Defaults to `var(--mod-switch-handle-background-color-selected, var(--spectrum-switch-handle-background-color-selected))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-switch-handle-background-color-selected-disabled": {
+      "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch:before, .spectrum-Switch .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch:before`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch:before, .spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch:before`. <br/>Defaults to `var(--spectrum-gray-25)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-switch-handle-size": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch--sizeS`, `.spectrum-Switch--sizeL`, `.spectrum-Switch--sizeXL`. <br/>Used by `.spectrum-Switch-switch:before`. <br/>Defaults to `var(--spectrum-switch-handle-size-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-switch-handle-size-medium": {
+      "value": "8px",
+      "description": "Used by `--spectrum-switch-handle-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-switch-handle-selected-size": {
+      "value": "14px",
+      "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch--sizeS`, `.spectrum-Switch--sizeL`, `.spectrum-Switch--sizeXL`. <br/>Used by `.spectrum-Switch-input:checked + .spectrum-Switch-switch:before`. <br/>Defaults to `var(--spectrum-switch-handle-selected-size-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-switch-handle-selected-size-medium": {
+      "value": "10px",
+      "description": "Used by `--spectrum-switch-handle-selected-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-switch-animation-duration-switch": {
+      "value": "var(--spectrum-animation-duration-100)",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch-switch`, `.spectrum-Switch-switch:before`, `.spectrum-Switch-switch:after`. <br/>Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-switch-animation-duration-label": {
+      "value": "var(--spectrum-animation-duration-200)",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch-label`. <br/>Defaults to `var(--spectrum-animation-duration-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-switch-min-height": {
+      "value": "48px",
+      "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch--sizeS`, `.spectrum-Switch--sizeL`, `.spectrum-Switch--sizeXL`. <br/>Used by `.spectrum-Switch`, `.spectrum-Switch-switch`. <br/>Defaults to `var(--spectrum-component-height-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-switch-control-width": {
+      "value": "34px",
+      "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch--sizeS`, `.spectrum-Switch--sizeL`, `.spectrum-Switch--sizeXL`. <br/>Used by `.spectrum-Switch-switch`. <br/>Defaults to `var(--spectrum-switch-control-width-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-switch-control-width-medium": {
+      "value": "26px",
+      "description": "Used by `--spectrum-switch-control-width`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-switch-control-height": {
+      "value": "20px",
+      "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch--sizeS`, `.spectrum-Switch--sizeL`, `.spectrum-Switch--sizeXL`. <br/>Used by `.spectrum-Switch-switch`, `.spectrum-Switch-switch:before`, `.spectrum-Switch-input:checked + .spectrum-Switch-switch:before`. <br/>Defaults to `var(--spectrum-switch-control-height-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-switch-control-height-medium": {
+      "value": "16px",
+      "description": "Used by `--spectrum-switch-control-height`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-switch-control-label-spacing": {
+      "value": "13px",
+      "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch--sizeS`, `.spectrum-Switch--sizeL`, `.spectrum-Switch--sizeXL`. <br/>Used by `.spectrum-Switch-label`. <br/>Defaults to `var(--spectrum-text-to-control-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-switch-spacing-top-to-control": {
+      "value": "15px",
+      "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch--sizeS`, `.spectrum-Switch--sizeL`, `.spectrum-Switch--sizeXL`. <br/>Used by `.spectrum-Switch-switch`. <br/>Defaults to `var(--spectrum-switch-top-to-control-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-switch-top-to-control-medium": {
+      "value": "9px",
+      "description": "Used by `--spectrum-switch-spacing-top-to-control`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-switch-spacing-top-to-label": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch--sizeS`, `.spectrum-Switch--sizeL`, `.spectrum-Switch--sizeXL`. <br/>Used by `.spectrum-Switch-label`. <br/>Defaults to `var(--spectrum-component-top-to-text-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-switch-spacing-bottom-to-label": {
+      "value": "14px",
+      "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch--sizeS`, `.spectrum-Switch--sizeL`, `.spectrum-Switch--sizeXL`. <br/>Used by `.spectrum-Switch-label`. <br/>Defaults to `var(--spectrum-component-bottom-to-text-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-switch-font-size": {
+      "value": "18px",
+      "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch--sizeS`, `.spectrum-Switch--sizeL`, `.spectrum-Switch--sizeXL`. <br/>Used by `.spectrum-Switch-label`. <br/>Defaults to `var(--spectrum-font-size-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-switch-line-height": {
+      "value": "1.3",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch-label`. <br/>Defaults to `var(--spectrum-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-switch-cjk-line-height": {
+      "value": "1.5",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch-label:lang(ja), .spectrum-Switch-label:lang(ko), .spectrum-Switch-label:lang(zh)`. <br/>Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-switch-border-radius": {
+      "value": "9999px",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch-switch`, `.spectrum-Switch-switch:before`, `.spectrum-Switch-switch:after`. <br/>Defaults to `var(--spectrum-corner-radius-full)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-switch-control-width-small": {
+      "value": "22px",
+      "description": "Used by `--spectrum-switch-control-width`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-switch-control-height-small": {
+      "value": "14px",
+      "description": "Used by `--spectrum-switch-control-height`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-switch-top-to-control-small": {
+      "value": "6px",
+      "description": "Used by `--spectrum-switch-spacing-top-to-control`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-switch-handle-size-small": {
+      "value": "6px",
+      "description": "Used by `--spectrum-switch-handle-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-switch-handle-selected-size-small": {
+      "value": "8px",
+      "description": "Used by `--spectrum-switch-handle-selected-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-switch-control-width-large": {
+      "value": "30px",
+      "description": "Used by `--spectrum-switch-control-width`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-switch-control-height-large": {
+      "value": "18px",
+      "description": "Used by `--spectrum-switch-control-height`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-switch-top-to-control-large": {
+      "value": "12px",
+      "description": "Used by `--spectrum-switch-spacing-top-to-control`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-switch-handle-size-large": {
+      "value": "10px",
+      "description": "Used by `--spectrum-switch-handle-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-switch-handle-selected-size-large": {
+      "value": "12px",
+      "description": "Used by `--spectrum-switch-handle-selected-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-switch-control-width-extra-large": {
+      "value": "34px",
+      "description": "Used by `--spectrum-switch-control-width`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-switch-control-height-extra-large": {
+      "value": "20px",
+      "description": "Used by `--spectrum-switch-control-height`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-switch-top-to-control-extra-large": {
+      "value": "15px",
+      "description": "Used by `--spectrum-switch-spacing-top-to-control`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-switch-handle-size-extra-large": {
+      "value": "12px",
+      "description": "Used by `--spectrum-switch-handle-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-switch-handle-selected-size-extra-large": {
+      "value": "14px",
+      "description": "Used by `--spectrum-switch-handle-selected-size`.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-neutral-content-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-switch-label-color-default`, `--spectrum-switch-border-color-default`, `--spectrum-switch-border-color-selected-default`, `--spectrum-switch-handle-background-color-default`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-switch-label-color-hover`, `--spectrum-switch-border-color-hover`, `--spectrum-switch-border-color-selected-hover`, `--spectrum-switch-handle-background-color-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-down": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-switch-label-color-down`, `--spectrum-switch-border-color-down`, `--spectrum-switch-border-color-selected-down`, `--spectrum-switch-handle-background-color-down`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-key-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-switch-label-color-focus`, `--spectrum-switch-border-color-focus`, `--spectrum-switch-border-color-selected-focus`, `--spectrum-switch-handle-background-color-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-disabled-content-color": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Used by `--spectrum-switch-label-color-disabled`, `--spectrum-switch-border-color-disabled`, `--spectrum-switch-background-color-selected-disabled`, `--spectrum-switch-handle-background-color-disabled`, `--spectrum-switch-label-color-default`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-border-width-200": {
+      "value": "2px",
+      "description": "Used by `--spectrum-switch-border-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-25": {
+      "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+      "description": "Used by `--spectrum-switch-background-color`, `--spectrum-switch-background-color-disabled`, `--spectrum-switch-handle-background-color-selected`, `--spectrum-switch-handle-background-color-selected-disabled`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-background-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-switch-background-color-selected-default`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-background-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-switch-background-color-selected-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-background-color-down": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-switch-background-color-selected-down`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-background-color-key-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-switch-background-color-selected-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Used by `--spectrum-switch-focus-indicator-thickness`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Used by `--spectrum-switch-focus-indicator-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-gap": {
+      "value": "2px",
+      "description": "Used by `--spectrum-switch-focus-indicator-gap`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-animation-duration-100": {
+      "description": "Used by `--spectrum-switch-animation-duration-switch`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-animation-duration-200": {
+      "description": "Used by `--spectrum-switch-animation-duration-label`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-100": {
+      "value": "32px",
+      "description": "Used by `--spectrum-switch-min-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-control-100": {
+      "value": "10px",
+      "description": "Used by `--spectrum-switch-control-label-spacing`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-switch-spacing-top-to-label`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-100": {
+      "value": "9px",
+      "description": "Used by `--spectrum-switch-spacing-bottom-to-label`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-100": {
+      "value": "14px",
+      "description": "Used by `--spectrum-switch-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-line-height-100": {
+      "value": "1.3",
+      "description": "Used by `--spectrum-switch-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-cjk-line-height-100": {
+      "value": "1.5",
+      "description": "Used by `--spectrum-switch-cjk-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-full": {
+      "value": "9999px",
+      "description": "Used by `--spectrum-switch-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-accent-background-color-default": {
+      "value": "var(--spectrum-accent-color-900)",
+      "description": "Used by `--spectrum-switch-background-color-selected-default`, `--spectrum-switch-border-color-selected-default`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-accent-background-color-hover": {
+      "value": "var(--spectrum-accent-color-1000)",
+      "description": "Used by `--spectrum-switch-background-color-selected-hover`, `--spectrum-switch-border-color-selected-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-accent-background-color-down": {
+      "value": "var(--spectrum-accent-color-1000)",
+      "description": "Used by `--spectrum-switch-background-color-selected-down`, `--spectrum-switch-border-color-selected-down`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-accent-background-color-key-focus": {
+      "value": "var(--spectrum-accent-color-1000)",
+      "description": "Used by `--spectrum-switch-background-color-selected-focus`, `--spectrum-switch-border-color-selected-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-component-height-75": {
+      "value": "24px",
+      "description": "Used by `--spectrum-switch-min-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-control-75": {
+      "value": "9px",
+      "description": "Used by `--spectrum-switch-control-label-spacing`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-75": {
+      "value": "4px",
+      "description": "Used by `--spectrum-switch-spacing-top-to-label`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-75": {
+      "value": "5px",
+      "description": "Used by `--spectrum-switch-spacing-bottom-to-label`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-75": {
+      "value": "12px",
+      "description": "Used by `--spectrum-switch-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-200": {
+      "value": "40px",
+      "description": "Used by `--spectrum-switch-min-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-control-200": {
+      "value": "11px",
+      "description": "Used by `--spectrum-switch-control-label-spacing`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-200": {
+      "value": "9px",
+      "description": "Used by `--spectrum-switch-spacing-top-to-label`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-200": {
+      "value": "11px",
+      "description": "Used by `--spectrum-switch-spacing-bottom-to-label`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-200": {
+      "value": "16px",
+      "description": "Used by `--spectrum-switch-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-300": {
+      "value": "48px",
+      "description": "Used by `--spectrum-switch-min-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-control-300": {
+      "value": "13px",
+      "description": "Used by `--spectrum-switch-control-label-spacing`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-300": {
+      "value": "12px",
+      "description": "Used by `--spectrum-switch-spacing-top-to-label`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-300": {
+      "value": "14px",
+      "description": "Used by `--spectrum-switch-spacing-bottom-to-label`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-300": {
+      "value": "18px",
+      "description": "Used by `--spectrum-switch-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-size-minimum-perspective-down": {
+      "value": "24px",
+      "description": "Used by `.spectrum-Switch--active .spectrum-Switch-input:not(:disabled) + .spectrum-Switch-switch:before, .spectrum-Switch:active .spectrum-Switch-input:not(:disabled) + .spectrum-Switch-switch:before`, `.spectrum-Switch--active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before, .spectrum-Switch:active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before`, `.spectrum-Switch--active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before:dir(rtl), .spectrum-Switch:active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before:dir(rtl)`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-size-difference-down": {
+      "value": "-2px",
+      "description": "Used by `.spectrum-Switch--active .spectrum-Switch-input:not(:disabled) + .spectrum-Switch-switch:before, .spectrum-Switch:active .spectrum-Switch-input:not(:disabled) + .spectrum-Switch-switch:before`, `.spectrum-Switch--active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before, .spectrum-Switch:active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before`, `.spectrum-Switch--active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before:dir(rtl), .spectrum-Switch:active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before:dir(rtl)`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {
+    "highcontrast-switch-label-color-default": {
+      "value": "var(--mod-switch-label-color-default, var(--spectrum-switch-label-color-default))",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch-label`. <br/>Defaults to `var(--mod-switch-label-color-default, var(--spectrum-switch-label-color-default))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-switch-label-color-down": {
+      "value": "var(--mod-switch-label-color-down, var(--spectrum-switch-label-color-down))",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch:active ~ .spectrum-Switch-label`. <br/>Defaults to `var(--mod-switch-label-color-down, var(--spectrum-switch-label-color-down))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-switch-label-color-focus": {
+      "value": "var(--mod-switch-label-color-focus, var(--spectrum-switch-label-color-focus))",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch-input:focus-visible ~ .spectrum-Switch-label`. <br/>Defaults to `var(--mod-switch-label-color-focus, var(--spectrum-switch-label-color-focus))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-switch-background-color": {
+      "value": "var(--mod-switch-background-color, var(--spectrum-switch-background-color))",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch-switch`. <br/>Defaults to `var(--mod-switch-background-color, var(--spectrum-switch-background-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-switch-border-color-default": {
+      "value": "var(--mod-switch-border-color-default, var(--spectrum-switch-border-color-default))",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch-switch`. <br/>Defaults to `var(--mod-switch-border-color-default, var(--spectrum-switch-border-color-default))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-switch-border-color-down": {
+      "value": "var(--mod-switch-border-color-down, var(--spectrum-switch-border-color-down))",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch-switch .spectrum-Switch--active, .spectrum-Switch.spectrum-Switch:active .spectrum-Switch-switch`. <br/>Defaults to `var(--mod-switch-border-color-down, var(--spectrum-switch-border-color-down))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-switch-border-color-focus": {
+      "value": "var(--mod-switch-border-color-focus, var(--spectrum-switch-border-color-focus))",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch-input:focus-visible + .spectrum-Switch-switch`. <br/>Defaults to `var(--mod-switch-border-color-focus, var(--spectrum-switch-border-color-focus))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-switch-background-color-selected-default": {
+      "value": "var(--mod-switch-background-color-selected-default, var(--spectrum-switch-background-color-selected-default))",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch-input:checked + .spectrum-Switch-switch`. <br/>Defaults to `var(--mod-switch-background-color-selected-default, var(--spectrum-switch-background-color-selected-default))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-switch-border-color-selected-default": {
+      "value": "var(--mod-switch-border-color-selected-default, var(--spectrum-switch-border-color-selected-default))",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch-input:checked + .spectrum-Switch-switch`. <br/>Defaults to `var(--mod-switch-border-color-selected-default, var(--spectrum-switch-border-color-selected-default))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-switch-background-color-selected-down": {
+      "value": "var(--mod-switch-background-color-selected-down, var(--spectrum-switch-background-color-selected-down))",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch--active .spectrum-Switch-input:checked + .spectrum-Switch-switch, .spectrum-Switch.spectrum-Switch:active .spectrum-Switch-input:checked + .spectrum-Switch-switch`. <br/>Defaults to `var(--mod-switch-background-color-selected-down, var(--spectrum-switch-background-color-selected-down))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-switch-border-color-selected-down": {
+      "value": "var(--mod-switch-border-color-selected-down, var(--spectrum-switch-border-color-selected-down))",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch--active .spectrum-Switch-input:checked + .spectrum-Switch-switch, .spectrum-Switch.spectrum-Switch:active .spectrum-Switch-input:checked + .spectrum-Switch-switch`. <br/>Defaults to `var(--mod-switch-border-color-selected-down, var(--spectrum-switch-border-color-selected-down))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-switch-background-color-selected-focus": {
+      "value": "var(--mod-switch-background-color-selected-focus, var(--spectrum-switch-background-color-selected-focus))",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch-input:checked:focus-visible + .spectrum-Switch-switch`. <br/>Defaults to `var(--mod-switch-background-color-selected-focus, var(--spectrum-switch-background-color-selected-focus))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-switch-border-color-selected-focus": {
+      "value": "var(--mod-switch-border-color-selected-focus, var(--spectrum-switch-border-color-selected-focus))",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch-input:checked:focus-visible + .spectrum-Switch-switch`. <br/>Defaults to `var(--mod-switch-border-color-selected-focus, var(--spectrum-switch-border-color-selected-focus))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-switch-handle-background-color-default": {
+      "value": "var(--mod-switch-handle-background-color-default, var(--spectrum-switch-handle-background-color-default))",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch-switch:before`. <br/>Defaults to `var(--mod-switch-handle-background-color-default, var(--spectrum-switch-handle-background-color-default))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-switch-handle-background-color-down": {
+      "value": "var(--mod-switch-handle-background-color-down, var(--spectrum-switch-handle-background-color-down))",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch.spectrum-Switch:active .spectrum-Switch-switch:before`. <br/>Defaults to `var(--mod-switch-handle-background-color-down, var(--spectrum-switch-handle-background-color-down))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-switch-handle-background-color-focus": {
+      "value": "var(--mod-switch-handle-background-color-focus, var(--spectrum-switch-handle-background-color-focus))",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:before`. <br/>Defaults to `var(--mod-switch-handle-background-color-focus, var(--spectrum-switch-handle-background-color-focus))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-switch-handle-background-color-selected": {
+      "value": "var(--mod-switch-handle-background-color-selected, var(--spectrum-switch-handle-background-color-selected))",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch-input:checked + .spectrum-Switch-switch:before`, `.spectrum-Switch:hover .spectrum-Switch-input:checked + .spectrum-Switch-switch:before`. <br/>Defaults to `var(--mod-switch-handle-background-color-selected, var(--spectrum-switch-handle-background-color-selected))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-switch-focus-indicator-color": {
+      "value": "var(--mod-switch-focus-indicator-color, var(--spectrum-switch-focus-indicator-color))",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after`. <br/>Defaults to `var(--mod-switch-focus-indicator-color, var(--spectrum-switch-focus-indicator-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-switch-background-color-disabled": {
+      "value": "var(--mod-switch-background-color-disabled, var(--spectrum-switch-background-color-disabled))",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch .spectrum-Switch-input:disabled + .spectrum-Switch-switch, .spectrum-Switch .spectrum-Switch-input[disabled] + .spectrum-Switch-switch`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled + .spectrum-Switch-switch, .spectrum-Switch:hover .spectrum-Switch-input[disabled] + .spectrum-Switch-switch`. <br/>Defaults to `var(--mod-switch-background-color-disabled, var(--spectrum-switch-background-color-disabled))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-switch-border-color-disabled": {
+      "value": "var(--mod-switch-border-color-disabled, var(--spectrum-switch-border-color-disabled))",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch .spectrum-Switch-input:disabled + .spectrum-Switch-switch, .spectrum-Switch .spectrum-Switch-input[disabled] + .spectrum-Switch-switch`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled + .spectrum-Switch-switch, .spectrum-Switch:hover .spectrum-Switch-input[disabled] + .spectrum-Switch-switch`. <br/>Defaults to `var(--mod-switch-border-color-disabled, var(--spectrum-switch-border-color-disabled))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-switch-handle-background-color-disabled": {
+      "value": "var(--mod-switch-handle-background-color-disabled, var(--spectrum-switch-handle-background-color-disabled))",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch .spectrum-Switch-input:disabled + .spectrum-Switch-switch:before, .spectrum-Switch .spectrum-Switch-input[disabled] + .spectrum-Switch-switch:before`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled + .spectrum-Switch-switch:before, .spectrum-Switch:hover .spectrum-Switch-input[disabled] + .spectrum-Switch-switch:before`. <br/>Defaults to `var(--mod-switch-handle-background-color-disabled, var(--spectrum-switch-handle-background-color-disabled))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-switch-background-color-selected-disabled": {
+      "value": "var(--mod-switch-background-color-selected-disabled, var(--spectrum-switch-background-color-selected-disabled))",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch, .spectrum-Switch .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch, .spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch`. <br/>Defaults to `var(--mod-switch-background-color-selected-disabled, var(--spectrum-switch-background-color-selected-disabled))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-switch-handle-background-color-selected-disabled": {
+      "value": "var(--mod-switch-handle-background-color-selected-disabled, var(--spectrum-switch-handle-background-color-selected-disabled))",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch:before, .spectrum-Switch .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch:before`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch:before, .spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch:before`. <br/>Defaults to `var(--mod-switch-handle-background-color-selected-disabled, var(--spectrum-switch-handle-background-color-selected-disabled))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-switch-label-color-disabled": {
+      "value": "var(--mod-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled))",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch .spectrum-Switch-input:disabled ~ .spectrum-Switch-label, .spectrum-Switch .spectrum-Switch-input[disabled] ~ .spectrum-Switch-label`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled ~ .spectrum-Switch-label, .spectrum-Switch:hover .spectrum-Switch-input[disabled] ~ .spectrum-Switch-label`. <br/>Defaults to `var(--mod-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-switch-label-color-hover": {
+      "value": "var(--mod-switch-label-color-hover, var(--spectrum-switch-label-color-hover))",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch:hover ~ .spectrum-Switch-label`. <br/>Defaults to `var(--mod-switch-label-color-hover, var(--spectrum-switch-label-color-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-switch-border-color-hover": {
+      "value": "var(--mod-switch-border-color-hover, var(--spectrum-switch-border-color-hover))",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch:hover .spectrum-Switch-switch`. <br/>Defaults to `var(--mod-switch-border-color-hover, var(--spectrum-switch-border-color-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-switch-background-color-selected-hover": {
+      "value": "var(--mod-switch-background-color-selected-hover, var(--spectrum-switch-background-color-selected-hover))",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch:hover .spectrum-Switch-input:checked + .spectrum-Switch-switch`. <br/>Defaults to `var(--mod-switch-background-color-selected-hover, var(--spectrum-switch-background-color-selected-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-switch-border-color-selected-hover": {
+      "value": "var(--mod-switch-border-color-selected-hover, var(--spectrum-switch-border-color-selected-hover))",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch:hover .spectrum-Switch-input:checked + .spectrum-Switch-switch`. <br/>Defaults to `var(--mod-switch-border-color-selected-hover, var(--spectrum-switch-border-color-selected-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-switch-handle-background-color-hover": {
+      "value": "var(--mod-switch-handle-background-color-hover, var(--spectrum-switch-handle-background-color-hover))",
+      "description": "Defined in `.spectrum-Switch`. <br/>Used by `.spectrum-Switch:hover .spectrum-Switch-switch:before`. <br/>Defaults to `var(--mod-switch-handle-background-color-hover, var(--spectrum-switch-handle-background-color-hover))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/switch/stories/switch.stories.js b/components/switch/stories/switch.stories.js
index d3c38b01ad9..4eed1066672 100644
--- a/components/switch/stories/switch.stories.js
+++ b/components/switch/stories/switch.stories.js
@@ -1,11 +1,13 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isActive, isChecked, isDisabled, isEmphasized, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { SwitchGroup } from "./switch.test.js";
 import { DocsSwitchGroup, Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * A switch is used to turn an option on or off. Switches allow users to select the state of a single option at a time and are best used for communicating activation.
  */
@@ -47,9 +49,7 @@ export default {
 		},
 		packageJson,
 		metadata,
-		status: {
-			type: "migrated",
-		},
+		cssprops: metadata.modifiers,
 	},
 	tags: ["migrated"],
 };
diff --git a/components/table/dist/metadata.json b/components/table/dist/metadata.json
index cf66742117b..34dbcc2a2c8 100644
--- a/components/table/dist/metadata.json
+++ b/components/table/dist/metadata.json
@@ -33,13 +33,13 @@
     ".spectrum-Table-collapseInner",
     ".spectrum-Table-columnTitle",
     ".spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon",
-    ".spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon.is-keyboardFocused",
     ".spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:active",
     ".spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:after",
     ".spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:focus",
     ".spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:focus-visible",
     ".spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:focus:hover",
     ".spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:hover",
+    ".spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon.is-keyboardFocused",
     ".spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon[aria-expanded=\"true\"]",
     ".spectrum-Table-head",
     ".spectrum-Table-head [role=\"row\"]",
@@ -51,11 +51,15 @@
     ".spectrum-Table-headCell .spectrum-Table-menuButton:focus:hover",
     ".spectrum-Table-headCell .spectrum-Table-menuButton:hover",
     ".spectrum-Table-headCell .spectrum-Table-sortButton",
-    ".spectrum-Table-headCell .spectrum-Table-sortButton.is-keyboardFocused",
     ".spectrum-Table-headCell .spectrum-Table-sortButton:active",
     ".spectrum-Table-headCell .spectrum-Table-sortButton:focus",
     ".spectrum-Table-headCell .spectrum-Table-sortButton:focus-visible",
     ".spectrum-Table-headCell .spectrum-Table-sortButton:hover",
+    ".spectrum-Table-headCell .spectrum-Table-sortButton.is-keyboardFocused",
+    ".spectrum-Table-headCell:focus",
+    ".spectrum-Table-headCell:focus-visible",
+    ".spectrum-Table-headCell:focus-visible:after",
+    ".spectrum-Table-headCell:focus:after",
     ".spectrum-Table-headCell.is-sortable",
     ".spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton",
     ".spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton .spectrum-Icon",
@@ -64,11 +68,11 @@
     ".spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton:focus",
     ".spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton:focus-visible",
     ".spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton:hover",
-    ".spectrum-Table-headCell.is-sortable.is-keyboardFocused",
     ".spectrum-Table-headCell.is-sortable:active",
     ".spectrum-Table-headCell.is-sortable:focus",
     ".spectrum-Table-headCell.is-sortable:focus-visible",
     ".spectrum-Table-headCell.is-sortable:hover",
+    ".spectrum-Table-headCell.is-sortable.is-keyboardFocused",
     ".spectrum-Table-headCell.spectrum-Table-hasMenuButton",
     ".spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton",
     ".spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton .spectrum-Button-label",
@@ -76,15 +80,11 @@
     ".spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton .spectrum-Icon",
     ".spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton:focus-visible:after",
     ".spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton:hover",
-    ".spectrum-Table-headCell.spectrum-Table-hasMenuButton.is-keyboardFocused",
     ".spectrum-Table-headCell.spectrum-Table-hasMenuButton:active",
     ".spectrum-Table-headCell.spectrum-Table-hasMenuButton:focus",
     ".spectrum-Table-headCell.spectrum-Table-hasMenuButton:focus-visible",
     ".spectrum-Table-headCell.spectrum-Table-hasMenuButton:hover",
-    ".spectrum-Table-headCell:focus",
-    ".spectrum-Table-headCell:focus-visible",
-    ".spectrum-Table-headCell:focus-visible:after",
-    ".spectrum-Table-headCell:focus:after",
+    ".spectrum-Table-headCell.spectrum-Table-hasMenuButton.is-keyboardFocused",
     ".spectrum-Table-headRow .spectrum-ActionButton:after",
     ".spectrum-Table-headRow .spectrum-Table-checkboxCell",
     ".spectrum-Table-headRow .spectrum-Table-checkboxCell .spectrum-Table-checkbox",
@@ -115,16 +115,6 @@
     ".spectrum-Table-row--summary",
     ".spectrum-Table-row--summary .spectrum-Table-cell",
     ".spectrum-Table-row--summary:hover",
-    ".spectrum-Table-row.is-drop-target",
-    ".spectrum-Table-row.is-drop-target .spectrum-Table-cell",
-    ".spectrum-Table-row.is-drop-target .spectrum-Table-checkbox .spectrum-Checkbox-box:before",
-    ".spectrum-Table-row.is-selected",
-    ".spectrum-Table-row.is-selected .spectrum-Table-cell",
-    ".spectrum-Table-row.is-selected .spectrum-Table-checkbox .spectrum-Checkbox-box:before",
-    ".spectrum-Table-row.is-selected:active",
-    ".spectrum-Table-row.is-selected:focus-visible",
-    ".spectrum-Table-row.is-selected:hover",
-    ".spectrum-Table-row.is-selected:not(:has(+ .is-selected)) .spectrum-Table-cell",
     ".spectrum-Table-row:active",
     ".spectrum-Table-row:first-child",
     ".spectrum-Table-row:first-child .spectrum-Table-cell:last-child",
@@ -146,6 +136,16 @@
     ".spectrum-Table-row:last-child",
     ".spectrum-Table-row:last-child .spectrum-Table-cell:first-child",
     ".spectrum-Table-row:last-child .spectrum-Table-cell:last-child",
+    ".spectrum-Table-row.is-drop-target",
+    ".spectrum-Table-row.is-drop-target .spectrum-Table-cell",
+    ".spectrum-Table-row.is-drop-target .spectrum-Table-checkbox .spectrum-Checkbox-box:before",
+    ".spectrum-Table-row.is-selected",
+    ".spectrum-Table-row.is-selected .spectrum-Table-cell",
+    ".spectrum-Table-row.is-selected .spectrum-Table-checkbox .spectrum-Checkbox-box:before",
+    ".spectrum-Table-row.is-selected:active",
+    ".spectrum-Table-row.is-selected:focus-visible",
+    ".spectrum-Table-row.is-selected:hover",
+    ".spectrum-Table-row.is-selected:not(:has(+ .is-selected)) .spectrum-Table-cell",
     ".spectrum-Table-scroller",
     ".spectrum-Table-scroller .spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:first-child",
     ".spectrum-Table-scroller .spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:last-child",
@@ -163,293 +163,1501 @@
     ".spectrum-Table:lang(zh)",
     ".spectrum-Table:not(.spectrum-Table-scroller)"
   ],
-  "modifiers": [
-    "--mod-table-avatar-size",
-    "--mod-table-avatar-size-compact",
-    "--mod-table-avatar-size-spacious",
-    "--mod-table-border-color",
-    "--mod-table-border-radius",
-    "--mod-table-border-radius-quiet",
-    "--mod-table-border-width",
-    "--mod-table-cell-inline-spacing",
-    "--mod-table-checkbox-to-cell-content",
-    "--mod-table-collapsible-disclosure-inline-spacing",
-    "--mod-table-collapsible-icon-animation-duration",
-    "--mod-table-current-header-height",
-    "--mod-table-cursor-header-default",
-    "--mod-table-cursor-header-sortable",
-    "--mod-table-cursor-row-default",
-    "--mod-table-cursor-section-header",
-    "--mod-table-default-vertical-align",
-    "--mod-table-disclosure-icon-size",
-    "--mod-table-divider-color",
-    "--mod-table-drop-zone-background-color",
-    "--mod-table-drop-zone-outline-color",
-    "--mod-table-focus-indicator-color",
-    "--mod-table-focus-indicator-thickness",
-    "--mod-table-header-background-color",
-    "--mod-table-header-background-color-scrollable",
-    "--mod-table-header-font-family",
-    "--mod-table-header-font-size",
-    "--mod-table-header-font-style",
-    "--mod-table-header-font-weight",
-    "--mod-table-header-icons-color-active",
-    "--mod-table-header-icons-color-default",
-    "--mod-table-header-icons-color-hover",
-    "--mod-table-header-icons-color-key-focus",
-    "--mod-table-header-line-height",
-    "--mod-table-header-row-bottom-to-text",
-    "--mod-table-header-row-checkbox-block-spacing",
-    "--mod-table-header-row-top-to-text",
-    "--mod-table-header-text-color",
-    "--mod-table-header-text-transform",
-    "--mod-table-header-vertical-align",
-    "--mod-table-icon-color-active",
-    "--mod-table-icon-color-default",
-    "--mod-table-icon-color-focus",
-    "--mod-table-icon-color-focus-hover",
-    "--mod-table-icon-color-hover",
-    "--mod-table-icon-color-key-focus",
-    "--mod-table-min-header-height",
-    "--mod-table-min-row-height",
-    "--mod-table-min-row-height-compact",
-    "--mod-table-min-row-height-spacious",
-    "--mod-table-outer-border-inline-width",
-    "--mod-table-outer-border-inline-width-quiet",
-    "--mod-table-row-background-color",
-    "--mod-table-row-background-color-active",
-    "--mod-table-row-background-color-hover",
-    "--mod-table-row-bottom-to-text",
-    "--mod-table-row-checkbox-block-spacing",
-    "--mod-table-row-checkbox-block-spacing-compact",
-    "--mod-table-row-checkbox-block-spacing-spacious",
-    "--mod-table-row-font-family",
-    "--mod-table-row-font-size",
-    "--mod-table-row-font-style",
-    "--mod-table-row-font-weight",
-    "--mod-table-row-line-height",
-    "--mod-table-row-text-color",
-    "--mod-table-row-text-color-active",
-    "--mod-table-row-text-color-hover",
-    "--mod-table-row-top-to-text",
-    "--mod-table-section-header-background-color",
-    "--mod-table-section-header-block-end-spacing",
-    "--mod-table-section-header-block-start-spacing",
-    "--mod-table-section-header-font-family",
-    "--mod-table-section-header-font-size",
-    "--mod-table-section-header-font-style",
-    "--mod-table-section-header-font-weight",
-    "--mod-table-section-header-inline-start-spacing",
-    "--mod-table-section-header-line-height",
-    "--mod-table-section-header-min-height",
-    "--mod-table-section-header-text-color",
-    "--mod-table-selected-row-background-color",
-    "--mod-table-selected-row-background-color-focus",
-    "--mod-table-selected-row-background-color-non-emphasized",
-    "--mod-table-selected-row-background-color-non-emphasized-focus",
-    "--mod-table-summary-row-background-color",
-    "--mod-table-summary-row-bottom-to-text",
-    "--mod-table-summary-row-font-family",
-    "--mod-table-summary-row-font-size",
-    "--mod-table-summary-row-font-style",
-    "--mod-table-summary-row-font-weight",
-    "--mod-table-summary-row-line-height",
-    "--mod-table-summary-row-min-height",
-    "--mod-table-summary-row-text-color",
-    "--mod-table-summary-row-top-to-text",
-    "--mod-table-thumbnail-size",
-    "--mod-table-thumbnail-size-compact",
-    "--mod-table-thumbnail-size-spacious",
-    "--mod-table-transition-duration",
-    "--mod-table-visual-to-text"
-  ],
-  "component": [
-    "--spectrum-table-avatar-size",
-    "--spectrum-table-border-color",
-    "--spectrum-table-border-divider-width",
-    "--spectrum-table-border-radius",
-    "--spectrum-table-border-width",
-    "--spectrum-table-cell-background-color",
-    "--spectrum-table-cell-inline-spacing",
-    "--spectrum-table-checkbox-to-cell-content",
-    "--spectrum-table-checkbox-to-text",
-    "--spectrum-table-collapsible-disclosure-inline-spacing",
-    "--spectrum-table-collapsible-icon-animation-duration",
-    "--spectrum-table-collapsible-tier-indent",
-    "--spectrum-table-column-header-row-bottom-to-text-medium",
-    "--spectrum-table-column-header-row-top-to-text-medium",
-    "--spectrum-table-default-vertical-align",
-    "--spectrum-table-disclosure-icon-size",
-    "--spectrum-table-divider-color",
-    "--spectrum-table-drop-zone-background-color",
-    "--spectrum-table-drop-zone-outline-color",
-    "--spectrum-table-edge-to-content",
-    "--spectrum-table-focus-indicator-color",
-    "--spectrum-table-focus-indicator-thickness",
-    "--spectrum-table-focused-cell-border-radius",
-    "--spectrum-table-header-background-color",
-    "--spectrum-table-header-font-weight",
-    "--spectrum-table-header-icons-color-active",
-    "--spectrum-table-header-icons-color-default",
-    "--spectrum-table-header-icons-color-hover",
-    "--spectrum-table-header-icons-color-key-focus",
-    "--spectrum-table-header-row-bottom-to-text",
-    "--spectrum-table-header-row-checkbox-block-spacing",
-    "--spectrum-table-header-row-checkbox-to-top-medium",
-    "--spectrum-table-header-row-top-to-text",
-    "--spectrum-table-header-text-color",
-    "--spectrum-table-icon-color",
-    "--spectrum-table-icon-color-active",
-    "--spectrum-table-icon-color-default",
-    "--spectrum-table-icon-color-hover",
-    "--spectrum-table-icon-color-key-focus",
-    "--spectrum-table-min-header-row-height",
-    "--spectrum-table-min-row-height",
-    "--spectrum-table-outer-border-inline-width",
-    "--spectrum-table-row-background-color",
-    "--spectrum-table-row-background-color-active",
-    "--spectrum-table-row-background-color-hover",
-    "--spectrum-table-row-bottom-to-text",
-    "--spectrum-table-row-bottom-to-text-medium",
-    "--spectrum-table-row-bottom-to-text-medium-compact",
-    "--spectrum-table-row-bottom-to-text-medium-spacious",
-    "--spectrum-table-row-checkbox-block-spacing",
-    "--spectrum-table-row-checkbox-to-top-medium",
-    "--spectrum-table-row-checkbox-to-top-medium-compact",
-    "--spectrum-table-row-checkbox-to-top-medium-spacious",
-    "--spectrum-table-row-down-opacity",
-    "--spectrum-table-row-focus-indicator-width",
-    "--spectrum-table-row-font-family",
-    "--spectrum-table-row-font-size",
-    "--spectrum-table-row-font-style",
-    "--spectrum-table-row-font-weight",
-    "--spectrum-table-row-height-medium",
-    "--spectrum-table-row-height-medium-compact",
-    "--spectrum-table-row-height-medium-spacious",
-    "--spectrum-table-row-hover-opacity",
-    "--spectrum-table-row-line-height",
-    "--spectrum-table-row-text-color",
-    "--spectrum-table-row-text-color-active",
-    "--spectrum-table-row-text-color-hover",
-    "--spectrum-table-row-text-color-key-focus",
-    "--spectrum-table-row-tier",
-    "--spectrum-table-row-top-to-text",
-    "--spectrum-table-row-top-to-text-medium",
-    "--spectrum-table-row-top-to-text-medium-compact",
-    "--spectrum-table-row-top-to-text-medium-spacious",
-    "--spectrum-table-section-header-background-color",
-    "--spectrum-table-section-header-block-end-spacing",
-    "--spectrum-table-section-header-block-start-spacing",
-    "--spectrum-table-section-header-font-weight",
-    "--spectrum-table-section-header-min-height",
-    "--spectrum-table-section-header-row-height-medium",
-    "--spectrum-table-selected-cell-background-color",
-    "--spectrum-table-selected-cell-background-color-focus",
-    "--spectrum-table-selected-row-background-color",
-    "--spectrum-table-selected-row-background-color-active",
-    "--spectrum-table-selected-row-background-color-hover",
-    "--spectrum-table-selected-row-background-color-non-emphasized",
-    "--spectrum-table-selected-row-background-color-non-emphasized-focus",
-    "--spectrum-table-selected-row-background-color-rgb",
-    "--spectrum-table-selected-row-background-opacity",
-    "--spectrum-table-selected-row-background-opacity-hover",
-    "--spectrum-table-selected-row-background-opacity-non-emphasized",
-    "--spectrum-table-selected-row-background-opacity-non-emphasized-hover",
-    "--spectrum-table-summary-row-background-color",
-    "--spectrum-table-summary-row-font-weight",
-    "--spectrum-table-thumbnail-size",
-    "--spectrum-table-transition-duration",
-    "--spectrum-table-visual-to-text"
-  ],
-  "global": [
-    "--spectrum-accent-visual-color",
-    "--spectrum-animation-duration-100",
-    "--spectrum-avatar-size-100",
-    "--spectrum-avatar-size-50",
-    "--spectrum-avatar-size-75",
-    "--spectrum-body-color",
-    "--spectrum-bold-font-weight",
-    "--spectrum-checkbox-control-size-small",
-    "--spectrum-cjk-line-height-100",
-    "--spectrum-component-bottom-to-text-100",
-    "--spectrum-component-height-100",
-    "--spectrum-component-top-to-text-100",
-    "--spectrum-corner-radius-medium-size-extra-small",
-    "--spectrum-corner-radius-small-default",
-    "--spectrum-default-font-style",
-    "--spectrum-drop-zone-background-color-opacity",
-    "--spectrum-drop-zone-background-color-rgb",
-    "--spectrum-focus-indicator-color",
-    "--spectrum-focus-indicator-thickness",
-    "--spectrum-font-size-100",
-    "--spectrum-gray-200",
-    "--spectrum-gray-25",
-    "--spectrum-gray-300",
-    "--spectrum-gray-700-rgb",
-    "--spectrum-gray-75",
-    "--spectrum-gray-900-rgb",
-    "--spectrum-line-height-100",
-    "--spectrum-logical-rotation",
-    "--spectrum-neutral-content-color-default",
-    "--spectrum-neutral-content-color-down",
-    "--spectrum-neutral-content-color-hover",
-    "--spectrum-neutral-content-color-key-focus",
-    "--spectrum-neutral-subdued-content-color-default",
-    "--spectrum-neutral-subdued-content-color-down",
-    "--spectrum-neutral-subdued-content-color-hover",
-    "--spectrum-neutral-subdued-content-color-key-focus",
-    "--spectrum-regular-font-weight",
-    "--spectrum-sans-font-family-stack",
-    "--spectrum-side-focus-indicator",
-    "--spectrum-spacing-300",
-    "--spectrum-text-to-visual-300",
-    "--spectrum-thumbnail-size-100",
-    "--spectrum-thumbnail-size-200",
-    "--spectrum-thumbnail-size-75"
-  ],
-  "passthroughs": [
-    "--mod-avatar-block-size",
-    "--mod-avatar-inline-size",
-    "--mod-button-background-color-default",
-    "--mod-button-background-color-down",
-    "--mod-button-background-color-focus",
-    "--mod-button-background-color-hover",
-    "--mod-button-border-radius",
-    "--mod-button-content-color-default",
-    "--mod-button-content-color-down",
-    "--mod-button-content-color-focus",
-    "--mod-button-content-color-hover",
-    "--mod-button-edge-to-text",
-    "--mod-button-focus-ring-border-radius",
-    "--mod-button-font-family",
-    "--mod-button-font-size",
-    "--mod-button-font-weight",
-    "--mod-button-line-height",
-    "--mod-button-padding-label-to-icon",
-    "--mod-checkbox-margin-block",
-    "--mod-icon-color",
-    "--mod-thumbnail-size"
-  ],
-  "high-contrast": [
-    "--highcontrast-table-border-color",
-    "--highcontrast-table-cell-focus-indicator-color",
-    "--highcontrast-table-divider-color",
-    "--highcontrast-table-focus-indicator-color",
-    "--highcontrast-table-header-text-color",
-    "--highcontrast-table-header-text-color-hover",
-    "--highcontrast-table-icon-color",
-    "--highcontrast-table-icon-color-focus",
-    "--highcontrast-table-row-background-color",
-    "--highcontrast-table-row-background-color-hover",
-    "--highcontrast-table-row-text-color",
-    "--highcontrast-table-row-text-color-focus",
-    "--highcontrast-table-row-text-color-hover",
-    "--highcontrast-table-section-header-background-color",
-    "--highcontrast-table-section-header-text-color",
-    "--highcontrast-table-selected-row-background-color",
-    "--highcontrast-table-selected-row-background-color-focus",
-    "--highcontrast-table-selected-row-text-color",
-    "--highcontrast-table-selected-row-text-color-focus",
-    "--highcontrast-table-transition-duration"
-  ]
+  "modifiers": {
+    "mod-table-row-background-color": {
+      "description": "Used by `--spectrum-table-cell-background-color`. <br/>Defaults to `var(--spectrum-table-row-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-table-selected-row-background-color-non-emphasized": {
+      "description": "Used by `--spectrum-table-selected-cell-background-color`. <br/>Defaults to `var(--spectrum-table-selected-row-background-color-non-emphasized)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-table-selected-row-background-color-non-emphasized-focus": {
+      "description": "Used by `--spectrum-table-selected-cell-background-color-focus`. <br/>Defaults to `var(--spectrum-table-selected-row-background-color-non-emphasized-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-table-icon-color-default": {
+      "description": "Used by `--spectrum-table-icon-color`. <br/>Defaults to `var(--spectrum-table-icon-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-table-thumbnail-size": {
+      "description": "Defined in `.spectrum-Table--compact`, `.spectrum-Table--spacious`. <br/>Used by `--mod-thumbnail-size`. <br/>Defaults to `var(--spectrum-table-thumbnail-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-avatar-size": {
+      "description": "Defined in `.spectrum-Table--compact`, `.spectrum-Table--spacious`. <br/>Used by `--mod-avatar-block-size`, `--mod-avatar-inline-size`. <br/>Defaults to `var(--spectrum-table-avatar-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-header-font-weight": {
+      "description": "Used by `--mod-button-font-weight`, `.spectrum-Table-headRow .spectrum-Table-headCell`. <br/>Defaults to `var(--spectrum-table-header-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-header-font-size": {
+      "description": "Used by `--mod-button-font-size`, `.spectrum-Table-headRow .spectrum-Table-headCell`, `.spectrum-Table-scroller`. <br/>Defaults to `var(--spectrum-table-row-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-header-font-family": {
+      "description": "Used by `--mod-button-font-family`, `.spectrum-Table-headRow .spectrum-Table-headCell`. <br/>Defaults to `var(--spectrum-table-row-font-family)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-header-line-height": {
+      "description": "Used by `--mod-button-line-height`, `.spectrum-Table-headRow .spectrum-Table-headCell`, `.spectrum-Table-scroller`. <br/>Defaults to `var(--spectrum-table-row-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-header-text-color": {
+      "description": "Used by `--mod-button-content-color-default`, `--mod-button-content-color-hover`, `--mod-button-content-color-focus`, `--mod-button-content-color-down`, `.spectrum-Table-headRow .spectrum-Table-headCell`, `.spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton`, `.spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton:active, .spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton:focus, .spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton:focus-visible`, `.spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton`, `.spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton:hover, .spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton:hover`. <br/>Defaults to `var(--spectrum-table-header-text-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-table-cell-inline-spacing": {
+      "description": "Used by `--mod-button-edge-to-text`, `.spectrum-Table-headRow .spectrum-Table-headCell`, `.spectrum-Table-headRow .spectrum-Table-checkboxCell`, `.spectrum-Table-cell`, `.spectrum-Table-row:focus .spectrum-Table-cell:first-child, .spectrum-Table-row:focus-visible .spectrum-Table-cell:first-child`, `.spectrum-Table-checkboxCell`. <br/>Defaults to `var(--spectrum-table-cell-inline-spacing)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-visual-to-text": {
+      "description": "Used by `--mod-button-padding-label-to-icon`, `.spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton .spectrum-Button-label:after`, `.spectrum-Table-visualInner .spectrum-Avatar, .spectrum-Table-visualInner .spectrum-Icon, .spectrum-Table-visualInner .spectrum-Thumbnail`. <br/>Defaults to `var(--spectrum-table-visual-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-border-radius": {
+      "description": "Used by `--mod-button-border-radius`, `--mod-button-focus-ring-border-radius`, `.spectrum-Table-headRow:first-child .spectrum-Table-headCell:first-child`, `.spectrum-Table-headRow:last-child .spectrum-Table-headCell:last-child`, `.spectrum-Table-body`, `.spectrum-Table-body.is-drop-target:after`, `.spectrum-Table-cell:focus-visible:after, .spectrum-Table-cell:focus:after, .spectrum-Table-headCell:focus-visible:after, .spectrum-Table-headCell:focus:after`, `.spectrum-Table-row:last-child .spectrum-Table-cell:first-child`, `.spectrum-Table-row:last-child .spectrum-Table-cell:last-child`, `.spectrum-Table-row:first-child`, `.spectrum-Table-row:last-child`, `.spectrum-Table-row:focus-visible:last-child .spectrum-Table-cell:first-child:before, .spectrum-Table-row:focus:last-child .spectrum-Table-cell:first-child:before`, `.spectrum-Table-scroller`. <br/>Defaults to `var(--spectrum-table-border-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-border-width": {
+      "description": "Used by `--mod-button-border-radius`, `--mod-button-focus-ring-border-radius`, `.spectrum-Table-headRow .spectrum-Table-headCell`, `.spectrum-Table-headRow:first-child .spectrum-Table-headCell:first-child`, `.spectrum-Table-headRow:last-child .spectrum-Table-headCell:last-child`, `.spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton:after`, `.spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton:focus-visible:after`, `.spectrum-Table-body`, `.spectrum-Table-cell`, `.spectrum-Table-cell:focus-visible:after, .spectrum-Table-cell:focus:after, .spectrum-Table-headCell:focus-visible:after, .spectrum-Table-headCell:focus:after`, `.spectrum-Table-cell--divider`, `.spectrum-Table-body .spectrum-Table-row:first-child .spectrum-Table-cell`, `.spectrum-Table-body .spectrum-Table-row:last-child .spectrum-Table-cell`, `.spectrum-Table-row.is-selected:not(:has(+ .is-selected)) .spectrum-Table-cell`, `.spectrum-Table-row--summary .spectrum-Table-cell`, `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`, `.spectrum-Table-checkboxCell`, `.spectrum-Table-scroller`, `.spectrum-Table-scroller .spectrum-Table-headRow:first-child .spectrum-Table-headCell`. <br/>Defaults to `var(--spectrum-table-border-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-min-row-height-compact": {
+      "description": "Used by `--spectrum-table-min-row-height`. <br/>Defaults to `var(--spectrum-table-row-height-medium-compact)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-row-checkbox-block-spacing-compact": {
+      "description": "Used by `--spectrum-table-row-checkbox-block-spacing`. <br/>Defaults to `var(--spectrum-table-row-checkbox-to-top-medium-compact)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-thumbnail-size-compact": {
+      "description": "Used by `--mod-table-thumbnail-size`. <br/>Defaults to `var(--spectrum-thumbnail-size-75)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-avatar-size-compact": {
+      "description": "Used by `--mod-table-avatar-size`. <br/>Defaults to `var(--spectrum-avatar-size-50)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-min-row-height-spacious": {
+      "description": "Used by `--spectrum-table-min-row-height`. <br/>Defaults to `var(--spectrum-table-row-height-medium-spacious)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-row-checkbox-block-spacing-spacious": {
+      "description": "Used by `--spectrum-table-row-checkbox-block-spacing`. <br/>Defaults to `var(--spectrum-table-row-checkbox-to-top-medium-spacious)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-thumbnail-size-spacious": {
+      "description": "Used by `--mod-table-thumbnail-size`. <br/>Defaults to `var(--spectrum-thumbnail-size-200)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-avatar-size-spacious": {
+      "description": "Used by `--mod-table-avatar-size`. <br/>Defaults to `var(--spectrum-avatar-size-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-selected-row-background-color": {
+      "description": "Used by `--spectrum-table-selected-cell-background-color`. <br/>Defaults to `var(--spectrum-table-selected-row-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-table-selected-row-background-color-focus": {
+      "description": "Used by `--spectrum-table-selected-cell-background-color-focus`. <br/>Defaults to `var(--spectrum-table-selected-row-background-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-table-border-radius-quiet": {
+      "description": "Used by `--spectrum-table-border-radius`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-outer-border-inline-width-quiet": {
+      "description": "Used by `--spectrum-table-outer-border-inline-width`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-header-background-color-scrollable": {
+      "description": "Used by `--spectrum-table-header-background-color`. <br/>Defaults to `var(--spectrum-gray-75)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-table-row-background-color-active": {
+      "description": "Used by `--spectrum-table-cell-background-color`. <br/>Defaults to `var(--spectrum-table-row-background-color-active)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-table-row-text-color-active": {
+      "description": "Used by `--spectrum-table-row-text-color`. <br/>Defaults to `var(--spectrum-table-row-text-color-active)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-table-drop-zone-background-color": {
+      "description": "Used by `--spectrum-table-cell-background-color`. <br/>Defaults to `var(--spectrum-table-drop-zone-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-table-header-icons-color-default": {
+      "description": "Used by `--spectrum-table-icon-color`. <br/>Defaults to `var(--spectrum-table-header-icons-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-table-header-icons-color-active": {
+      "description": "Used by `--spectrum-table-icon-color`. <br/>Defaults to `var(--spectrum-table-header-icons-color-active)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-table-header-icons-color-key-focus": {
+      "description": "Used by `--spectrum-table-icon-color`. <br/>Defaults to `var(--spectrum-table-header-icons-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-table-summary-row-background-color": {
+      "description": "Used by `--spectrum-table-cell-background-color`. <br/>Defaults to `var(--spectrum-table-summary-row-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-table-section-header-background-color": {
+      "description": "Used by `--spectrum-table-cell-background-color`. <br/>Defaults to `var(--spectrum-table-section-header-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-table-header-vertical-align": {
+      "description": "Used by `.spectrum-Table-headRow .spectrum-Table-headCell`. <br/>Defaults to `var(--spectrum-table-default-vertical-align)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-header-font-style": {
+      "description": "Used by `.spectrum-Table-headRow .spectrum-Table-headCell`. <br/>Defaults to `var(--spectrum-table-row-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-header-text-transform": {
+      "description": "Used by `.spectrum-Table-headRow .spectrum-Table-headCell`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-min-header-height": {
+      "description": "Used by `.spectrum-Table-headRow .spectrum-Table-headCell`. <br/>Defaults to `var(--spectrum-table-min-header-row-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-header-row-top-to-text": {
+      "description": "Used by `.spectrum-Table-headRow .spectrum-Table-headCell`, `.spectrum-Table-scroller`. <br/>Defaults to `var(--spectrum-table-header-row-top-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-header-row-bottom-to-text": {
+      "description": "Used by `.spectrum-Table-headRow .spectrum-Table-headCell`, `.spectrum-Table-scroller`. <br/>Defaults to `var(--spectrum-table-header-row-bottom-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-header-background-color": {
+      "description": "Used by `.spectrum-Table-headRow .spectrum-Table-headCell`. <br/>Defaults to `var(--spectrum-table-header-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-table-border-color": {
+      "description": "Defined in `.spectrum-Table-body.is-drop-target`, `.spectrum-Table-row.is-drop-target`. <br/>Used by `.spectrum-Table-headRow .spectrum-Table-headCell`, `.spectrum-Table-headRow:first-child .spectrum-Table-headCell:first-child`, `.spectrum-Table-headRow:last-child .spectrum-Table-headCell:last-child`, `.spectrum-Table-body .spectrum-Table-row:last-child .spectrum-Table-cell`, `.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:first-child`, `.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:last-child`, `.spectrum-Table-scroller`, `.spectrum-Table-scroller .spectrum-Table-headRow:first-child .spectrum-Table-headCell`. <br/>Defaults to `var(--spectrum-table-border-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-table-cursor-header-default": {
+      "description": "Used by `.spectrum-Table-headRow .spectrum-Table-headCell`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-cursor-header-sortable": {
+      "description": "Used by `.spectrum-Table-headRow .spectrum-Table-headCell.is-sortable`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-outer-border-inline-width": {
+      "description": "Used by `.spectrum-Table-headRow .spectrum-Table-checkboxCell`, `.spectrum-Table-cell`, `.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:first-child`, `.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:last-child`, `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`, `.spectrum-Table-scroller`. <br/>Defaults to `var(--spectrum-table-outer-border-inline-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-checkbox-to-cell-content": {
+      "description": "Used by `.spectrum-Table-headRow .spectrum-Table-checkboxCell`, `.spectrum-Table-checkboxCell`. <br/>Defaults to `var(--spectrum-table-checkbox-to-cell-content)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-header-row-checkbox-block-spacing": {
+      "description": "Used by `.spectrum-Table-headRow .spectrum-Table-checkboxCell`. <br/>Defaults to `var(--spectrum-table-header-row-checkbox-block-spacing)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-transition-duration": {
+      "description": "Used by `.spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton .spectrum-Icon`, `.spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton .spectrum-Icon`, `.spectrum-Table-row`. <br/>Defaults to `var(--spectrum-table-transition-duration)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-focus-indicator-thickness": {
+      "description": "Used by `.spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton:focus-visible:after`, `.spectrum-Table-body.is-drop-target:after`, `.spectrum-Table-cell:focus-visible:after, .spectrum-Table-cell:focus:after, .spectrum-Table-headCell:focus-visible:after, .spectrum-Table-headCell:focus:after`, `.spectrum-Table-row.is-drop-target`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon.is-keyboardFocused, .spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:focus-visible`. <br/>Defaults to `var(--spectrum-table-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-focus-indicator-color": {
+      "description": "Used by `.spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton:focus-visible:after`, `.spectrum-Table-cell:focus-visible:after, .spectrum-Table-cell:focus:after, .spectrum-Table-headCell:focus-visible:after, .spectrum-Table-headCell:focus:after`, `.spectrum-Table-row.is-selected:not(:has(+ .is-selected)) .spectrum-Table-cell`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon.is-keyboardFocused, .spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:focus-visible`. <br/>Defaults to `var(--spectrum-table-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-table-drop-zone-outline-color": {
+      "description": "Used by `.spectrum-Table-body.is-drop-target:after`, `.spectrum-Table-row.is-drop-target`, `.spectrum-Table-row.is-drop-target .spectrum-Table-cell`. <br/>Defaults to `var(--spectrum-table-drop-zone-outline-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-table-divider-color": {
+      "description": "Used by `.spectrum-Table-cell`, `.spectrum-Table-cell--divider`, `.spectrum-Table-body .spectrum-Table-row:first-child .spectrum-Table-cell`. <br/>Defaults to `var(--spectrum-table-divider-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-table-row-font-family": {
+      "description": "Used by `.spectrum-Table-cell`. <br/>Defaults to `var(--spectrum-table-row-font-family)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-row-font-style": {
+      "description": "Used by `.spectrum-Table-cell`. <br/>Defaults to `var(--spectrum-table-row-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-row-font-size": {
+      "description": "Used by `.spectrum-Table-cell`. <br/>Defaults to `var(--spectrum-table-row-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-row-font-weight": {
+      "description": "Used by `.spectrum-Table-cell`. <br/>Defaults to `var(--spectrum-table-row-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-row-line-height": {
+      "description": "Used by `.spectrum-Table-cell`, `.spectrum-Table-visualInner .spectrum-Avatar, .spectrum-Table-visualInner .spectrum-Icon, .spectrum-Table-visualInner .spectrum-Thumbnail`. <br/>Defaults to `var(--spectrum-table-row-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-default-vertical-align": {
+      "description": "Used by `.spectrum-Table-cell`. <br/>Defaults to `var(--spectrum-table-default-vertical-align)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-row-text-color": {
+      "description": "Used by `.spectrum-Table-cell`. <br/>Defaults to `var(--spectrum-table-row-text-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-table-min-row-height": {
+      "description": "Used by `.spectrum-Table-cell`, `.spectrum-Table-row--collapsible .spectrum-Table-disclosureIcon`. <br/>Defaults to `var(--spectrum-table-min-row-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-row-top-to-text": {
+      "description": "Used by `.spectrum-Table-cell`. <br/>Defaults to `var(--spectrum-table-row-top-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-row-bottom-to-text": {
+      "description": "Used by `.spectrum-Table-cell`. <br/>Defaults to `var(--spectrum-table-row-bottom-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-cursor-row-default": {
+      "description": "Used by `.spectrum-Table-row`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-summary-row-font-weight": {
+      "description": "Used by `.spectrum-Table-row--summary .spectrum-Table-cell`. <br/>Defaults to `var(--spectrum-table-summary-row-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-summary-row-min-height": {
+      "description": "Used by `.spectrum-Table-row--summary .spectrum-Table-cell`. <br/>Defaults to `var(--spectrum-table-min-row-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-summary-row-top-to-text": {
+      "description": "Used by `.spectrum-Table-row--summary .spectrum-Table-cell`. <br/>Defaults to `var(--spectrum-table-row-top-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-summary-row-bottom-to-text": {
+      "description": "Used by `.spectrum-Table-row--summary .spectrum-Table-cell`. <br/>Defaults to `var(--spectrum-table-row-bottom-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-summary-row-font-size": {
+      "description": "Used by `.spectrum-Table-row--summary .spectrum-Table-cell`. <br/>Defaults to `var(--spectrum-table-row-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-summary-row-font-family": {
+      "description": "Used by `.spectrum-Table-row--summary .spectrum-Table-cell`. <br/>Defaults to `var(--spectrum-table-row-font-family)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-summary-row-font-style": {
+      "description": "Used by `.spectrum-Table-row--summary .spectrum-Table-cell`. <br/>Defaults to `var(--spectrum-table-row-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-summary-row-line-height": {
+      "description": "Used by `.spectrum-Table-row--summary .spectrum-Table-cell`. <br/>Defaults to `var(--spectrum-table-row-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-summary-row-text-color": {
+      "description": "Used by `.spectrum-Table-row--summary .spectrum-Table-cell`. <br/>Defaults to `var(--spectrum-table-row-text-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-table-cursor-section-header": {
+      "description": "Used by `.spectrum-Table-row--sectionHeader`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-section-header-font-weight": {
+      "description": "Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`. <br/>Defaults to `var(--spectrum-table-section-header-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-section-header-min-height": {
+      "description": "Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`. <br/>Defaults to `var(--spectrum-table-section-header-min-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-section-header-block-start-spacing": {
+      "description": "Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`. <br/>Defaults to `var(--spectrum-table-section-header-block-start-spacing)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-section-header-block-end-spacing": {
+      "description": "Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`. <br/>Defaults to `var(--spectrum-table-section-header-block-end-spacing)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-section-header-inline-start-spacing": {
+      "description": "Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`. <br/>Defaults to `var(--spectrum-table-cell-inline-spacing)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-section-header-font-size": {
+      "description": "Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`. <br/>Defaults to `var(--spectrum-table-row-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-section-header-font-family": {
+      "description": "Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`. <br/>Defaults to `var(--spectrum-table-row-font-family)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-section-header-font-style": {
+      "description": "Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`. <br/>Defaults to `var(--spectrum-table-row-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-section-header-line-height": {
+      "description": "Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`. <br/>Defaults to `var(--spectrum-table-row-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-section-header-text-color": {
+      "description": "Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`. <br/>Defaults to `var(--spectrum-table-row-text-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-table-row-checkbox-block-spacing": {
+      "description": "Used by `.spectrum-Table-checkboxCell`. <br/>Defaults to `var(--spectrum-table-row-checkbox-block-spacing)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-current-header-height": {
+      "description": "Used by `.spectrum-Table-scroller`. <br/>Defaults to `calc(var(--mod-table-header-line-height, var(--spectrum-table-row-line-height)) * var(--mod-table-header-font-size, var(--spectrum-table-row-font-size)) + var(--mod-table-header-row-top-to-text, var(--spectrum-table-header-row-top-to-text)) + var(--mod-table-header-row-bottom-to-text, var(--spectrum-table-header-row-bottom-to-text)) + var(--mod-table-border-width, var(--spectrum-table-border-width)))`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-disclosure-icon-size": {
+      "description": "Used by `.spectrum-Table-row--collapsible.is-last-tier .spectrum-Table-cell--collapsible`, `.spectrum-Table-row--collapsible .spectrum-Table-disclosureIcon`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon`. <br/>Defaults to `var(--spectrum-table-disclosure-icon-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-collapsible-disclosure-inline-spacing": {
+      "description": "Used by `.spectrum-Table-row--collapsible.is-last-tier .spectrum-Table-cell--collapsible`, `.spectrum-Table-row--collapsible .spectrum-Table-disclosureIcon`. <br/>Defaults to `var(--spectrum-table-collapsible-disclosure-inline-spacing)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-collapsible-icon-animation-duration": {
+      "description": "Used by `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon`. <br/>Defaults to `var(--spectrum-table-collapsible-icon-animation-duration)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-table-icon-color-active": {
+      "description": "Used by `--spectrum-table-icon-color`. <br/>Defaults to `var(--spectrum-table-icon-color-active)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-table-icon-color-focus": {
+      "description": "Used by `--spectrum-table-icon-color`. <br/>Defaults to `var(--spectrum-table-icon-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-table-row-background-color-hover": {
+      "description": "Used by `--spectrum-table-cell-background-color`. <br/>Defaults to `var(--spectrum-table-row-background-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-table-row-text-color-hover": {
+      "description": "Used by `--spectrum-table-row-text-color`. <br/>Defaults to `var(--spectrum-table-row-text-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-table-header-icons-color-hover": {
+      "description": "Used by `--spectrum-table-icon-color`. <br/>Defaults to `var(--spectrum-table-header-icons-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-table-icon-color-hover": {
+      "description": "Used by `--spectrum-table-icon-color`. <br/>Defaults to `var(--spectrum-table-icon-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-table-icon-color-focus-hover": {
+      "description": "Used by `--spectrum-table-icon-color`. <br/>Defaults to `var(--spectrum-table-icon-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-table-icon-color-key-focus": {
+      "description": "Used by `--spectrum-table-icon-color`. <br/>Defaults to `var(--spectrum-table-icon-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-table-transition-duration": {
+      "value": "var(--spectrum-animation-duration-100)",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `.spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton .spectrum-Icon`, `.spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton .spectrum-Icon`, `.spectrum-Table-row`. <br/>Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-header-background-color": {
+      "value": "var(--mod-table-header-background-color-scrollable, var(--spectrum-gray-75))",
+      "description": "Defined in `.spectrum-Table`, `.spectrum-Table-scroller`. <br/>Used by `.spectrum-Table-headRow .spectrum-Table-headCell`. <br/>Defaults to `var(--mod-table-header-background-color-scrollable, var(--spectrum-gray-75))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-table-row-background-color": {
+      "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--spectrum-table-cell-background-color`. <br/>Defaults to `var(--spectrum-gray-25)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-table-summary-row-background-color": {
+      "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--spectrum-table-cell-background-color`. <br/>Defaults to `var(--spectrum-gray-200)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-table-section-header-background-color": {
+      "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--spectrum-table-cell-background-color`. <br/>Defaults to `var(--spectrum-gray-200)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-table-selected-row-background-color": {
+      "value": "var(--spectrum-informative-background-color-default)",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--spectrum-table-selected-cell-background-color`. <br/>Defaults to `rgb(var(--spectrum-table-selected-row-background-color-rgb), var(--spectrum-table-selected-row-background-opacity))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-table-selected-row-background-color-rgb": {
+      "description": "Used by `--spectrum-table-selected-row-background-color`, `--spectrum-table-selected-row-background-color-hover`, `--spectrum-table-selected-row-background-color-active`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-table-selected-row-background-opacity": {
+      "value": "0.1",
+      "description": "Used by `--spectrum-table-selected-row-background-color`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-selected-row-background-color-non-emphasized": {
+      "value": "var(--spectrum-neutral-background-color-selected-default)",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--spectrum-table-selected-cell-background-color`. <br/>Defaults to `rgb(var(--spectrum-gray-700-rgb), var(--spectrum-table-selected-row-background-opacity-non-emphasized))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-table-selected-row-background-opacity-non-emphasized": {
+      "value": "0.1",
+      "description": "Used by `--spectrum-table-selected-row-background-color-non-emphasized`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-selected-row-background-color-hover": {
+      "value": "rgb(var(--spectrum-table-selected-row-background-color-rgb), var(--spectrum-table-selected-row-background-opacity-hover))",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--spectrum-table-selected-cell-background-color-focus`. <br/>Defaults to `rgb(var(--spectrum-table-selected-row-background-color-rgb), var(--spectrum-table-selected-row-background-opacity-hover))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-table-selected-row-background-opacity-hover": {
+      "value": "0.15",
+      "description": "Used by `--spectrum-table-selected-row-background-color-hover`, `--spectrum-table-selected-row-background-color-active`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-selected-row-background-color-active": {
+      "value": "rgb(var(--spectrum-table-selected-row-background-color-rgb), var(--spectrum-table-selected-row-background-opacity-hover))",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--spectrum-table-cell-background-color`. <br/>Defaults to `rgb(var(--spectrum-table-selected-row-background-color-rgb), var(--spectrum-table-selected-row-background-opacity-hover))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-table-selected-row-background-color-non-emphasized-focus": {
+      "value": "rgb(var(--spectrum-gray-700-rgb), var(--spectrum-table-selected-row-background-opacity-non-emphasized-hover))",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--spectrum-table-selected-cell-background-color-focus`. <br/>Defaults to `rgb(var(--spectrum-gray-700-rgb), var(--spectrum-table-selected-row-background-opacity-non-emphasized-hover))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-table-selected-row-background-opacity-non-emphasized-hover": {
+      "value": "0.15",
+      "description": "Used by `--spectrum-table-selected-row-background-color-non-emphasized-focus`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-cell-background-color": {
+      "value": "var(--highcontrast-table-section-header-background-color, var(--mod-table-section-header-background-color, var(--spectrum-table-section-header-background-color)))",
+      "description": "Defined in `.spectrum-Table`, `.spectrum-Table-row:active`, `.spectrum-Table-row.is-selected`, `.spectrum-Table-row.is-selected:focus-visible`, `.spectrum-Table-row.is-selected:active`, `.spectrum-Table-body.is-drop-target .spectrum-Table-row, .spectrum-Table-row.is-drop-target`, `.spectrum-Table-row--summary`, `.spectrum-Table-row--sectionHeader`, `.spectrum-Table-row:hover`, `.spectrum-Table-row.is-selected:hover`, `.spectrum-Table-row--summary:hover`, `.spectrum-Table-row--sectionHeader:hover`. <br/>Used by `.spectrum-Table-cell`. <br/>Defaults to `var(--highcontrast-table-section-header-background-color, var(--mod-table-section-header-background-color, var(--spectrum-table-section-header-background-color)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-table-selected-cell-background-color": {
+      "value": "var(--highcontrast-table-selected-row-background-color, var(--mod-table-selected-row-background-color, var(--spectrum-table-selected-row-background-color)))",
+      "description": "Defined in `.spectrum-Table`, `.spectrum-Table--emphasized, .spectrum-Table-row .is-emphasized`. <br/>Used by `--spectrum-table-cell-background-color`. <br/>Defaults to `var(--highcontrast-table-selected-row-background-color, var(--mod-table-selected-row-background-color, var(--spectrum-table-selected-row-background-color)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-table-drop-zone-background-color": {
+      "value": "rgb(var(--spectrum-drop-zone-background-color-rgb), var(--spectrum-drop-zone-background-color-opacity))",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--spectrum-table-cell-background-color`. <br/>Defaults to `rgb(var(--spectrum-drop-zone-background-color-rgb), var(--spectrum-drop-zone-background-color-opacity))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-table-drop-zone-outline-color": {
+      "value": "var(--spectrum-accent-color-800)",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `.spectrum-Table-body.is-drop-target:after`, `.spectrum-Table-row.is-drop-target`, `.spectrum-Table-row.is-drop-target .spectrum-Table-cell`. <br/>Defaults to `var(--spectrum-accent-visual-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-table-row-background-color-hover": {
+      "value": "rgb(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-hover-opacity))",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--spectrum-table-cell-background-color`. <br/>Defaults to `rgb(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-hover-opacity))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-table-row-hover-opacity": {
+      "value": "0.07",
+      "description": "Used by `--spectrum-table-row-background-color-hover`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-row-background-color-active": {
+      "value": "rgb(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-down-opacity))",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--spectrum-table-cell-background-color`. <br/>Defaults to `rgb(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-down-opacity))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-table-row-down-opacity": {
+      "value": "0.1",
+      "description": "Used by `--spectrum-table-row-background-color-active`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-border-color": {
+      "value": "var(--spectrum-table-focus-indicator-color)",
+      "description": "Defined in `.spectrum-Table`, `.spectrum-Table-row.is-selected`. <br/>Used by `.spectrum-Table-headRow .spectrum-Table-headCell`, `.spectrum-Table-headRow:first-child .spectrum-Table-headCell:first-child`, `.spectrum-Table-headRow:last-child .spectrum-Table-headCell:last-child`, `.spectrum-Table-body .spectrum-Table-row:last-child .spectrum-Table-cell`, `.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:first-child`, `.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:last-child`, `.spectrum-Table-scroller`, `.spectrum-Table-scroller .spectrum-Table-headRow:first-child .spectrum-Table-headCell`. <br/>Defaults to `var(--spectrum-table-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-table-border-radius": {
+      "value": "var(--mod-table-border-radius-quiet, 0px)",
+      "description": "Defined in `.spectrum-Table`, `.spectrum-Table--quiet`. <br/>Used by `.spectrum-Table-headRow:first-child .spectrum-Table-headCell:first-child`, `.spectrum-Table-headRow:last-child .spectrum-Table-headCell:last-child`, `.spectrum-Table-body`, `.spectrum-Table-body.is-drop-target:after`, `.spectrum-Table-row:last-child .spectrum-Table-cell:first-child`, `.spectrum-Table-row:last-child .spectrum-Table-cell:last-child`, `.spectrum-Table-row:first-child`, `.spectrum-Table-row:last-child`, `.spectrum-Table-row:focus-visible:last-child .spectrum-Table-cell:first-child:before, .spectrum-Table-row:focus:last-child .spectrum-Table-cell:first-child:before`, `.spectrum-Table-scroller`. <br/>Defaults to `var(--mod-table-border-radius-quiet, 0px)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-border-width": {
+      "value": "1px",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--mod-button-border-radius`, `--mod-button-focus-ring-border-radius`, `.spectrum-Table-headRow .spectrum-Table-headCell`, `.spectrum-Table-headRow:first-child .spectrum-Table-headCell:first-child`, `.spectrum-Table-headRow:last-child .spectrum-Table-headCell:last-child`, `.spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton:after`, `.spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton:focus-visible:after`, `.spectrum-Table-body`, `.spectrum-Table-cell`, `.spectrum-Table-cell:focus-visible:after, .spectrum-Table-cell:focus:after, .spectrum-Table-headCell:focus-visible:after, .spectrum-Table-headCell:focus:after`, `.spectrum-Table-cell--divider`, `.spectrum-Table-body .spectrum-Table-row:first-child .spectrum-Table-cell`, `.spectrum-Table-body .spectrum-Table-row:last-child .spectrum-Table-cell`, `.spectrum-Table-row.is-selected:not(:has(+ .is-selected)) .spectrum-Table-cell`, `.spectrum-Table-row--summary .spectrum-Table-cell`, `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`, `.spectrum-Table-checkboxCell`, `.spectrum-Table-scroller`, `.spectrum-Table-scroller .spectrum-Table-headRow:first-child .spectrum-Table-headCell`. <br/>Defaults to `var(--spectrum-table-border-divider-width)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-border-divider-width": {
+      "value": "1px",
+      "description": "Used by `--spectrum-table-border-width`, `--spectrum-table-outer-border-inline-width`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-outer-border-inline-width": {
+      "value": "var(--mod-table-outer-border-inline-width-quiet, 0px)",
+      "description": "Defined in `.spectrum-Table`, `.spectrum-Table--quiet`. <br/>Used by `.spectrum-Table-headRow .spectrum-Table-checkboxCell`, `.spectrum-Table-cell`, `.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:first-child`, `.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:last-child`, `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`, `.spectrum-Table-scroller`. <br/>Defaults to `var(--mod-table-outer-border-inline-width-quiet, 0px)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-divider-color": {
+      "value": "var(--spectrum-table-focus-indicator-color)",
+      "description": "Defined in `.spectrum-Table`, `.spectrum-Table-row.is-selected`. <br/>Used by `.spectrum-Table-cell`, `.spectrum-Table-cell--divider`, `.spectrum-Table-body .spectrum-Table-row:first-child .spectrum-Table-cell`. <br/>Defaults to `var(--spectrum-table-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-table-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `.spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton:focus-visible:after`, `.spectrum-Table-body.is-drop-target:after`, `.spectrum-Table-cell:focus-visible:after, .spectrum-Table-cell:focus:after, .spectrum-Table-headCell:focus-visible:after, .spectrum-Table-headCell:focus:after`, `.spectrum-Table-row.is-drop-target`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon.is-keyboardFocused, .spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:focus-visible`. <br/>Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-focus-indicator-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--spectrum-table-divider-color`, `--spectrum-table-border-color`, `.spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton:focus-visible:after`, `.spectrum-Table-cell:focus-visible:after, .spectrum-Table-cell:focus:after, .spectrum-Table-headCell:focus-visible:after, .spectrum-Table-headCell:focus:after`, `.spectrum-Table-row.is-selected:not(:has(+ .is-selected)) .spectrum-Table-cell`, `.spectrum-Table-row:focus .spectrum-Table-cell:first-child:before, .spectrum-Table-row:focus-visible .spectrum-Table-cell:first-child:before`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon.is-keyboardFocused, .spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:focus-visible`. <br/>Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-table-row-focus-indicator-width": {
+      "value": "4px",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `.spectrum-Table-row:focus .spectrum-Table-cell:first-child:before, .spectrum-Table-row:focus-visible .spectrum-Table-cell:first-child:before`. <br/>Defaults to `var(--spectrum-side-focus-indicator)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-focused-cell-border-radius": {
+      "value": "4px",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--mod-button-border-radius`, `--mod-button-focus-ring-border-radius`, `.spectrum-Table-cell:focus-visible:after, .spectrum-Table-cell:focus:after, .spectrum-Table-headCell:focus-visible:after, .spectrum-Table-headCell:focus:after`. <br/>Defaults to `var(--spectrum-corner-radius-small-default)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-selected-cell-background-color-focus": {
+      "value": "var(--highcontrast-table-selected-row-background-color-focus, var(--mod-table-selected-row-background-color-focus, var(--spectrum-table-selected-row-background-color-hover)))",
+      "description": "Defined in `.spectrum-Table`, `.spectrum-Table--emphasized, .spectrum-Table-row .is-emphasized`. <br/>Used by `--spectrum-table-cell-background-color`. <br/>Defaults to `var(--highcontrast-table-selected-row-background-color-focus, var(--mod-table-selected-row-background-color-focus, var(--spectrum-table-selected-row-background-color-hover)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-table-icon-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--spectrum-table-icon-color`. <br/>Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-table-icon-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--spectrum-table-icon-color`. <br/>Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-table-icon-color-active": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--spectrum-table-icon-color`. <br/>Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-table-icon-color-key-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--spectrum-table-icon-color`. <br/>Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-table-disclosure-icon-size": {
+      "value": "32px",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `.spectrum-Table-row--collapsible.is-last-tier .spectrum-Table-cell--collapsible`, `.spectrum-Table-row--collapsible .spectrum-Table-disclosureIcon`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon`. <br/>Defaults to `var(--spectrum-component-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-icon-color": {
+      "value": "var(--highcontrast-table-icon-color-focus, var(--mod-table-icon-color-key-focus, var(--spectrum-table-icon-color-key-focus)))",
+      "description": "Defined in `.spectrum-Table`, `.spectrum-Table-headCell .spectrum-Table-sortButton, .spectrum-Table-headCell.is-sortable, .spectrum-Table-headCell.spectrum-Table-hasMenuButton`, `.spectrum-Table-headCell .spectrum-Table-sortButton:active, .spectrum-Table-headCell.is-sortable:active, .spectrum-Table-headCell.spectrum-Table-hasMenuButton:active`, `.spectrum-Table-headCell .spectrum-Table-sortButton.is-keyboardFocused, .spectrum-Table-headCell .spectrum-Table-sortButton:focus, .spectrum-Table-headCell .spectrum-Table-sortButton:focus-visible, .spectrum-Table-headCell.is-sortable.is-keyboardFocused, .spectrum-Table-headCell.is-sortable:focus, .spectrum-Table-headCell.is-sortable:focus-visible, .spectrum-Table-headCell.spectrum-Table-hasMenuButton.is-keyboardFocused, .spectrum-Table-headCell.spectrum-Table-hasMenuButton:focus, .spectrum-Table-headCell.spectrum-Table-hasMenuButton:focus-visible`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:active`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:focus`, `.spectrum-Table-headCell .spectrum-Table-sortButton:hover, .spectrum-Table-headCell.is-sortable:hover, .spectrum-Table-headCell.spectrum-Table-hasMenuButton:hover`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:hover`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:focus:hover`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon.is-keyboardFocused, .spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:focus-visible`. <br/>Used by `.spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton .spectrum-Icon`, `.spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton .spectrum-Button-label:after`, `.spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton .spectrum-Icon`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon`. <br/>Defaults to `var(--highcontrast-table-icon-color-focus, var(--mod-table-icon-color-key-focus, var(--spectrum-table-icon-color-key-focus)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-table-header-icons-color-default": {
+      "value": "var(--spectrum-gray-700)",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--spectrum-table-icon-color`, `--mod-icon-color`. <br/>Defaults to `var(--spectrum-neutral-subdued-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-table-header-icons-color-hover": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--spectrum-table-icon-color`, `--mod-icon-color`. <br/>Defaults to `var(--spectrum-neutral-subdued-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-table-header-icons-color-active": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--spectrum-table-icon-color`, `--mod-icon-color`. <br/>Defaults to `var(--spectrum-neutral-subdued-content-color-down)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-table-header-icons-color-key-focus": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--spectrum-table-icon-color`, `--mod-icon-color`. <br/>Defaults to `var(--spectrum-neutral-subdued-content-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-table-default-vertical-align": {
+      "value": "middle",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `.spectrum-Table-headRow .spectrum-Table-headCell`, `.spectrum-Table-cell`. <br/>Defaults to `middle`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-header-font-weight": {
+      "value": "700",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--mod-button-font-weight`, `.spectrum-Table-headRow .spectrum-Table-headCell`. <br/>Defaults to `var(--spectrum-bold-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-header-text-color": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--mod-button-content-color-default`, `--mod-button-content-color-hover`, `--mod-button-content-color-focus`, `--mod-button-content-color-down`, `.spectrum-Table-headRow .spectrum-Table-headCell`, `.spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton`, `.spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton:active, .spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton:focus, .spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton:focus-visible`, `.spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton`, `.spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton:hover, .spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton:hover`. <br/>Defaults to `var(--spectrum-body-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-table-row-font-family": {
+      "value": "var(--spectrum-sans-font-family-stack)",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--mod-button-font-family`, `.spectrum-Table-headRow .spectrum-Table-headCell`, `.spectrum-Table-cell`, `.spectrum-Table-row--summary .spectrum-Table-cell`, `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`. <br/>Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-row-font-weight": {
+      "value": "400",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `.spectrum-Table-cell`. <br/>Defaults to `var(--spectrum-regular-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-row-font-style": {
+      "value": "normal",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `.spectrum-Table-headRow .spectrum-Table-headCell`, `.spectrum-Table-cell`, `.spectrum-Table-row--summary .spectrum-Table-cell`, `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`. <br/>Defaults to `var(--spectrum-default-font-style)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-row-line-height": {
+      "value": "1.5",
+      "description": "Defined in `.spectrum-Table`, `.spectrum-Table:lang(ja), .spectrum-Table:lang(ko), .spectrum-Table:lang(zh)`. <br/>Used by `--mod-button-line-height`, `.spectrum-Table-headRow .spectrum-Table-headCell`, `.spectrum-Table-cell`, `.spectrum-Table-row--summary .spectrum-Table-cell`, `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`, `.spectrum-Table-scroller`, `.spectrum-Table-visualInner .spectrum-Avatar, .spectrum-Table-visualInner .spectrum-Icon, .spectrum-Table-visualInner .spectrum-Thumbnail`. <br/>Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-row-text-color": {
+      "value": "var(--highcontrast-table-row-text-color-hover, var(--mod-table-row-text-color-hover, var(--spectrum-table-row-text-color-hover)))",
+      "description": "Defined in `.spectrum-Table`, `.spectrum-Table-row:focus, .spectrum-Table-row:focus-visible`, `.spectrum-Table-row:active`, `.spectrum-Table-row:focus-visible:hover, .spectrum-Table-row:focus:hover`, `.spectrum-Table-row:hover`. <br/>Used by `.spectrum-Table-cell`, `.spectrum-Table-row--summary .spectrum-Table-cell`, `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`. <br/>Defaults to `var(--highcontrast-table-row-text-color-hover, var(--mod-table-row-text-color-hover, var(--spectrum-table-row-text-color-hover)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-table-row-text-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--spectrum-table-row-text-color`. <br/>Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-table-row-text-color-active": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--spectrum-table-row-text-color`. <br/>Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-table-row-text-color-key-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--spectrum-table-row-text-color`. <br/>Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-table-row-font-size": {
+      "value": "14px",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--mod-button-font-size`, `.spectrum-Table-headRow .spectrum-Table-headCell`, `.spectrum-Table-cell`, `.spectrum-Table-row--summary .spectrum-Table-cell`, `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`, `.spectrum-Table-scroller`. <br/>Defaults to `var(--spectrum-font-size-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-summary-row-font-weight": {
+      "value": "700",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `.spectrum-Table-row--summary .spectrum-Table-cell`. <br/>Defaults to `var(--spectrum-bold-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-section-header-font-weight": {
+      "value": "700",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`. <br/>Defaults to `var(--spectrum-bold-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-min-header-row-height": {
+      "value": "32px",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `.spectrum-Table-headRow .spectrum-Table-headCell`. <br/>Defaults to `var(--spectrum-component-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-header-row-top-to-text": {
+      "value": "0",
+      "description": "Defined in `.spectrum-Table`, `.spectrum-Table-headCell.spectrum-Table-hasMenuButton`. <br/>Used by `.spectrum-Table-headRow .spectrum-Table-headCell`, `.spectrum-Table-scroller`. <br/>Defaults to `0`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-column-header-row-top-to-text-medium": {
+      "value": "6px",
+      "description": "Used by `--spectrum-table-header-row-top-to-text`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-header-row-bottom-to-text": {
+      "value": "0",
+      "description": "Defined in `.spectrum-Table`, `.spectrum-Table-headCell.spectrum-Table-hasMenuButton`. <br/>Used by `.spectrum-Table-headRow .spectrum-Table-headCell`, `.spectrum-Table-scroller`. <br/>Defaults to `0`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-column-header-row-bottom-to-text-medium": {
+      "value": "8px",
+      "description": "Used by `--spectrum-table-header-row-bottom-to-text`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-min-row-height": {
+      "value": "var(--mod-table-min-row-height-spacious, var(--spectrum-table-row-height-medium-spacious))",
+      "description": "Defined in `.spectrum-Table`, `.spectrum-Table--compact`, `.spectrum-Table--spacious`. <br/>Used by `.spectrum-Table-cell`, `.spectrum-Table-row--summary .spectrum-Table-cell`, `.spectrum-Table-row--collapsible .spectrum-Table-disclosureIcon`. <br/>Defaults to `var(--mod-table-min-row-height-spacious, var(--spectrum-table-row-height-medium-spacious))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-row-height-medium": {
+      "value": "40px",
+      "description": "Used by `--spectrum-table-min-row-height`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-row-top-to-text": {
+      "value": "15px",
+      "description": "Defined in `.spectrum-Table`, `.spectrum-Table--compact`, `.spectrum-Table--spacious`. <br/>Used by `.spectrum-Table-cell`, `.spectrum-Table-row--summary .spectrum-Table-cell`. <br/>Defaults to `var(--spectrum-table-row-top-to-text-medium-spacious)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-row-top-to-text-medium": {
+      "value": "10px",
+      "description": "Used by `--spectrum-table-row-top-to-text`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-row-bottom-to-text": {
+      "value": "16px",
+      "description": "Defined in `.spectrum-Table`, `.spectrum-Table--compact`, `.spectrum-Table--spacious`. <br/>Used by `.spectrum-Table-cell`, `.spectrum-Table-row--summary .spectrum-Table-cell`. <br/>Defaults to `var(--spectrum-table-row-bottom-to-text-medium-spacious)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-row-bottom-to-text-medium": {
+      "value": "13px",
+      "description": "Used by `--spectrum-table-row-bottom-to-text`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-header-row-checkbox-block-spacing": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `.spectrum-Table-headRow .spectrum-Table-checkboxCell`. <br/>Defaults to `var(--spectrum-table-header-row-checkbox-to-top-medium)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-header-row-checkbox-to-top-medium": {
+      "value": "8px",
+      "description": "Used by `--spectrum-table-header-row-checkbox-block-spacing`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-row-checkbox-block-spacing": {
+      "value": "var(--mod-table-row-checkbox-block-spacing-spacious, var(--spectrum-table-row-checkbox-to-top-medium-spacious))",
+      "description": "Defined in `.spectrum-Table`, `.spectrum-Table--compact`, `.spectrum-Table--spacious`. <br/>Used by `.spectrum-Table-checkboxCell`. <br/>Defaults to `var(--mod-table-row-checkbox-block-spacing-spacious, var(--spectrum-table-row-checkbox-to-top-medium-spacious))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-row-checkbox-to-top-medium": {
+      "value": "12px",
+      "description": "Used by `--spectrum-table-row-checkbox-block-spacing`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-section-header-min-height": {
+      "value": "32px",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`. <br/>Defaults to `var(--spectrum-table-section-header-row-height-medium)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-section-header-row-height-medium": {
+      "value": "32px",
+      "description": "Used by `--spectrum-table-section-header-min-height`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-section-header-block-start-spacing": {
+      "value": "6px",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`. <br/>Defaults to `var(--spectrum-component-top-to-text-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-section-header-block-end-spacing": {
+      "value": "9px",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`. <br/>Defaults to `var(--spectrum-component-bottom-to-text-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-visual-to-text": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--mod-button-padding-label-to-icon`, `.spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton .spectrum-Button-label:after`, `.spectrum-Table-visualInner`, `.spectrum-Table-visualInner .spectrum-Avatar, .spectrum-Table-visualInner .spectrum-Icon, .spectrum-Table-visualInner .spectrum-Thumbnail`. <br/>Defaults to `var(--spectrum-text-to-visual-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-thumbnail-size": {
+      "value": "24px",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--mod-thumbnail-size`. <br/>Defaults to `var(--spectrum-thumbnail-size-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-avatar-size": {
+      "value": "20px",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--mod-avatar-block-size`, `--mod-avatar-inline-size`. <br/>Defaults to `var(--spectrum-avatar-size-75)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-cell-inline-spacing": {
+      "value": "0",
+      "description": "Defined in `.spectrum-Table`, `.spectrum-Table-headCell.spectrum-Table-hasMenuButton`. <br/>Used by `--mod-button-edge-to-text`, `.spectrum-Table-headRow .spectrum-Table-headCell`, `.spectrum-Table-headRow .spectrum-Table-checkboxCell`, `.spectrum-Table-cell`, `.spectrum-Table-row:focus .spectrum-Table-cell:first-child, .spectrum-Table-row:focus-visible .spectrum-Table-cell:first-child`, `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`, `.spectrum-Table-checkboxCell`. <br/>Defaults to `0`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-edge-to-content": {
+      "value": "16px",
+      "description": "Used by `--spectrum-table-cell-inline-spacing`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-checkbox-to-cell-content": {
+      "value": "24px",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `.spectrum-Table-headRow .spectrum-Table-checkboxCell`, `.spectrum-Table-checkboxCell`. <br/>Defaults to `var(--spectrum-table-checkbox-to-text)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-checkbox-to-text": {
+      "value": "24px",
+      "description": "Used by `--spectrum-table-checkbox-to-cell-content`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-collapsible-tier-indent": {
+      "value": "16px",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `.spectrum-Table-row--collapsible.is-last-tier .spectrum-Table-cell--collapsible`, `.spectrum-Table-cell--collapsible`. <br/>Defaults to `var(--spectrum-spacing-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-collapsible-disclosure-inline-spacing": {
+      "value": "0px",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `.spectrum-Table-row--collapsible.is-last-tier .spectrum-Table-cell--collapsible`, `.spectrum-Table-row--collapsible .spectrum-Table-disclosureIcon`. <br/>Defaults to `0px`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-collapsible-icon-animation-duration": {
+      "value": "var(--spectrum-animation-duration-100)",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon`. <br/>Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-row-height-medium-compact": {
+      "value": "var(--spectrum-component-height-100)",
+      "description": "Used by `--spectrum-table-min-row-height`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-row-top-to-text-medium-compact": {
+      "value": "var(--spectrum-component-top-to-text-100)",
+      "description": "Used by `--spectrum-table-row-top-to-text`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-row-bottom-to-text-medium-compact": {
+      "value": "var(--spectrum-component-bottom-to-text-100)",
+      "description": "Used by `--spectrum-table-row-bottom-to-text`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-row-checkbox-to-top-medium-compact": {
+      "value": "8px",
+      "description": "Used by `--spectrum-table-row-checkbox-block-spacing`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-row-height-medium-spacious": {
+      "value": "48px",
+      "description": "Used by `--spectrum-table-min-row-height`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-row-top-to-text-medium-spacious": {
+      "value": "15px",
+      "description": "Used by `--spectrum-table-row-top-to-text`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-row-bottom-to-text-medium-spacious": {
+      "value": "16px",
+      "description": "Used by `--spectrum-table-row-bottom-to-text`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-row-checkbox-to-top-medium-spacious": {
+      "value": "16px",
+      "description": "Used by `--spectrum-table-row-checkbox-block-spacing`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-table-row-tier": {
+      "value": "6",
+      "description": "Defined in `.spectrum-Table-row--collapsible`, `.spectrum-Table-row--collapsible[data-tier=\"1\"]`, `.spectrum-Table-row--collapsible[data-tier=\"2\"]`, `.spectrum-Table-row--collapsible[data-tier=\"3\"]`, `.spectrum-Table-row--collapsible[data-tier=\"4\"]`, `.spectrum-Table-row--collapsible[data-tier=\"5\"]`, `.spectrum-Table-row--collapsible[data-tier=\"6\"]`. <br/>Used by `.spectrum-Table-row--collapsible.is-last-tier .spectrum-Table-cell--collapsible`, `.spectrum-Table-cell--collapsible`. <br/>Defaults to `6`, if not set.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-animation-duration-100": {
+      "description": "Used by `--spectrum-table-transition-duration`, `--spectrum-table-collapsible-icon-animation-duration`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-75": {
+      "value": "light-dark(rgb(243, 243, 243), rgb(34, 34, 34))",
+      "description": "Used by `--spectrum-table-header-background-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-25": {
+      "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+      "description": "Used by `--spectrum-table-row-background-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-200": {
+      "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+      "description": "Used by `--spectrum-table-summary-row-background-color`, `--spectrum-table-section-header-background-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-700-rgb": {
+      "description": "Used by `--spectrum-table-selected-row-background-color-non-emphasized`, `--spectrum-table-selected-row-background-color-non-emphasized-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-drop-zone-background-color-rgb": {
+      "description": "Used by `--spectrum-table-drop-zone-background-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-drop-zone-background-color-opacity": {
+      "value": "0.1",
+      "description": "Used by `--spectrum-table-drop-zone-background-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-accent-visual-color": {
+      "value": "var(--spectrum-accent-color-800)",
+      "description": "Used by `--spectrum-table-drop-zone-outline-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-gray-900-rgb": {
+      "description": "Used by `--spectrum-table-row-background-color-hover`, `--spectrum-table-row-background-color-active`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-300": {
+      "value": "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))",
+      "description": "Used by `--spectrum-table-border-color`, `--spectrum-table-divider-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-medium-size-extra-small": {
+      "value": "6px",
+      "description": "Used by `--spectrum-table-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Used by `--spectrum-table-focus-indicator-thickness`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Used by `--spectrum-table-focus-indicator-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-side-focus-indicator": {
+      "value": "4px",
+      "description": "Used by `--spectrum-table-row-focus-indicator-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-small-default": {
+      "value": "4px",
+      "description": "Used by `--spectrum-table-focused-cell-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-table-icon-color-default`, `--spectrum-table-row-text-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-table-icon-color-hover`, `--spectrum-table-row-text-color-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-down": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-table-icon-color-active`, `--spectrum-table-row-text-color-active`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-key-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-table-icon-color-key-focus`, `--spectrum-table-row-text-color-key-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-component-height-100": {
+      "value": "32px",
+      "description": "Used by `--spectrum-table-disclosure-icon-size`, `--spectrum-table-min-header-row-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-subdued-content-color-default": {
+      "value": "var(--spectrum-gray-700)",
+      "description": "Used by `--spectrum-table-header-icons-color-default`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-subdued-content-color-hover": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-table-header-icons-color-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-subdued-content-color-down": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-table-header-icons-color-active`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-subdued-content-color-key-focus": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-table-header-icons-color-key-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-bold-font-weight": {
+      "value": "700",
+      "description": "Used by `--spectrum-table-header-font-weight`, `--spectrum-table-summary-row-font-weight`, `--spectrum-table-section-header-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-color": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-table-header-text-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-sans-font-family-stack": {
+      "description": "Used by `--spectrum-table-row-font-family`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-regular-font-weight": {
+      "value": "400",
+      "description": "Used by `--spectrum-table-row-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-default-font-style": {
+      "value": "normal",
+      "description": "Used by `--spectrum-table-row-font-style`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-line-height-100": {
+      "value": "1.3",
+      "description": "Used by `--spectrum-table-row-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-100": {
+      "value": "14px",
+      "description": "Used by `--spectrum-table-row-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-table-section-header-block-start-spacing`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-100": {
+      "value": "9px",
+      "description": "Used by `--spectrum-table-section-header-block-end-spacing`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-300": {
+      "value": "8px",
+      "description": "Used by `--spectrum-table-visual-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-thumbnail-size-100": {
+      "value": "24px",
+      "description": "Used by `--spectrum-table-thumbnail-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-avatar-size-75": {
+      "value": "20px",
+      "description": "Used by `--spectrum-table-avatar-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-300": {
+      "value": "16px",
+      "description": "Used by `--spectrum-table-collapsible-tier-indent`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-logical-rotation": {
+      "value": "matrix(-1, 0, 0, 1, 0, 0)",
+      "description": "Defined in `.spectrum-Table:dir(rtl)`. <br/>Used by `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon[aria-expanded=\"true\"]`. <br/>Defaults to `matrix(-1, 0, 0, 1, 0, 0)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-cjk-line-height-100": {
+      "value": "1.5",
+      "description": "Used by `--spectrum-table-row-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-thumbnail-size-75": {
+      "value": "20px",
+      "description": "Used by `--mod-table-thumbnail-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-avatar-size-50": {
+      "value": "16px",
+      "description": "Used by `--mod-table-avatar-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-thumbnail-size-200": {
+      "value": "28px",
+      "description": "Used by `--mod-table-thumbnail-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-avatar-size-100": {
+      "value": "24px",
+      "description": "Used by `--mod-table-avatar-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-checkbox-control-size-small": {
+      "value": "14px",
+      "description": "Used by `.spectrum-Table-checkboxCell`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {
+    "mod-thumbnail-size": {
+      "category": "Passthrough"
+    },
+    "mod-avatar-block-size": {
+      "category": "Passthrough"
+    },
+    "mod-avatar-inline-size": {
+      "category": "Passthrough"
+    },
+    "mod-button-font-weight": {
+      "category": "Passthrough"
+    },
+    "mod-button-font-size": {
+      "category": "Passthrough"
+    },
+    "mod-button-font-family": {
+      "category": "Passthrough"
+    },
+    "mod-button-line-height": {
+      "category": "Passthrough"
+    },
+    "mod-button-background-color-default": {
+      "category": "Passthrough"
+    },
+    "mod-button-background-color-hover": {
+      "category": "Passthrough"
+    },
+    "mod-button-background-color-focus": {
+      "category": "Passthrough"
+    },
+    "mod-button-background-color-down": {
+      "category": "Passthrough"
+    },
+    "mod-button-content-color-default": {
+      "category": "Passthrough"
+    },
+    "mod-button-content-color-hover": {
+      "category": "Passthrough"
+    },
+    "mod-button-content-color-focus": {
+      "category": "Passthrough"
+    },
+    "mod-button-content-color-down": {
+      "category": "Passthrough"
+    },
+    "mod-button-edge-to-text": {
+      "category": "Passthrough"
+    },
+    "mod-button-padding-label-to-icon": {
+      "category": "Passthrough"
+    },
+    "mod-button-border-radius": {
+      "category": "Passthrough"
+    },
+    "mod-button-focus-ring-border-radius": {
+      "category": "Passthrough"
+    },
+    "mod-icon-color": {
+      "category": "Passthrough"
+    },
+    "mod-checkbox-margin-block": {
+      "category": "Passthrough"
+    }
+  },
+  "high-contrast": {
+    "highcontrast-table-row-background-color": {
+      "value": "var(--mod-table-summary-row-background-color, var(--spectrum-table-summary-row-background-color))",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--spectrum-table-cell-background-color`. <br/>Defaults to `var(--mod-table-summary-row-background-color, var(--spectrum-table-summary-row-background-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-table-selected-row-background-color": {
+      "value": "var(--mod-table-drop-zone-background-color, var(--spectrum-table-drop-zone-background-color))",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--spectrum-table-selected-cell-background-color`, `--spectrum-table-cell-background-color`. <br/>Defaults to `var(--mod-table-drop-zone-background-color, var(--spectrum-table-drop-zone-background-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-table-selected-row-background-color-focus": {
+      "value": "var(--spectrum-table-selected-cell-background-color-focus)",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--spectrum-table-selected-cell-background-color-focus`, `--spectrum-table-cell-background-color`. <br/>Defaults to `var(--spectrum-table-selected-cell-background-color-focus)`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-table-icon-color": {
+      "value": "var(--mod-table-icon-color-focus-hover, var(--spectrum-table-icon-color-key-focus))",
+      "description": "Defined in `.spectrum-Table-row:focus, .spectrum-Table-row:focus-visible`, `.spectrum-Table-row:active`, `.spectrum-Table-row.is-selected`, `.spectrum-Table-row.is-selected:focus-visible`, `.spectrum-Table-body.is-drop-target .spectrum-Table-row, .spectrum-Table-row.is-drop-target`, `.spectrum-Table-row:hover`, `.spectrum-Table-row.is-selected:hover`, `.spectrum-Table`. <br/>Used by `--spectrum-table-icon-color`. <br/>Defaults to `var(--mod-table-icon-color-focus-hover, var(--spectrum-table-icon-color-key-focus))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-table-row-text-color-focus": {
+      "value": "HighlightText",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--highcontrast-table-icon-color`. <br/>Defaults to `HighlightText`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-table-row-text-color": {
+      "value": "var(--mod-table-summary-row-text-color, var(--spectrum-table-row-text-color))",
+      "description": "Defined in `.spectrum-Table-row:active`, `.spectrum-Table-row.is-selected`, `.spectrum-Table-row.is-selected:focus-visible`, `.spectrum-Table-body.is-drop-target .spectrum-Table-row, .spectrum-Table-row.is-drop-target`, `.spectrum-Table-row:hover`, `.spectrum-Table-row.is-selected:hover`, `.spectrum-Table-row--sectionHeader:hover`, `.spectrum-Table`, `.spectrum-Table .spectrum-Table-row--summary`. <br/>Used by `.spectrum-Table-cell`, `.spectrum-Table-row--summary .spectrum-Table-cell`. <br/>Defaults to `var(--mod-table-summary-row-text-color, var(--spectrum-table-row-text-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-table-row-text-color-hover": {
+      "value": "var(--mod-table-row-text-color-hover, var(--spectrum-table-row-text-color-hover))",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--highcontrast-table-row-text-color`, `--highcontrast-table-icon-color`, `--spectrum-table-row-text-color`, `.spectrum-Table-row:focus .spectrum-Table-checkbox .spectrum-Checkbox-box:before, .spectrum-Table-row:focus-visible .spectrum-Table-checkbox .spectrum-Checkbox-box:before`, `.spectrum-Table-row:hover .spectrum-Table-checkbox .spectrum-Checkbox-box:before`. <br/>Defaults to `var(--mod-table-row-text-color-hover, var(--spectrum-table-row-text-color-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-table-row-background-color-hover": {
+      "value": "var(--mod-table-row-background-color-hover, var(--spectrum-table-row-background-color-hover))",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--spectrum-table-cell-background-color`. <br/>Defaults to `var(--mod-table-row-background-color-hover, var(--spectrum-table-row-background-color-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-table-selected-row-text-color": {
+      "value": "SelectedItemText",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--highcontrast-table-row-text-color`, `--highcontrast-table-icon-color`, `--highcontrast-table-cell-focus-indicator-color`, `.spectrum-Table-body.is-drop-target .spectrum-Table-row .spectrum-Table-checkbox .spectrum-Checkbox-box:before, .spectrum-Table-row.is-drop-target .spectrum-Table-checkbox .spectrum-Checkbox-box:before, .spectrum-Table-row.is-selected .spectrum-Table-checkbox .spectrum-Checkbox-box:before`. <br/>Defaults to `SelectedItemText`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-table-selected-row-text-color-focus": {
+      "value": "HighlightText",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--highcontrast-table-row-text-color`, `--highcontrast-table-icon-color`. <br/>Defaults to `HighlightText`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-table-icon-color-focus": {
+      "value": "var(--mod-table-icon-color-key-focus, var(--spectrum-table-icon-color-key-focus))",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--spectrum-table-icon-color`. <br/>Defaults to `var(--mod-table-icon-color-key-focus, var(--spectrum-table-icon-color-key-focus))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-table-section-header-background-color": {
+      "value": "var(--mod-table-section-header-background-color, var(--spectrum-table-section-header-background-color))",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `--spectrum-table-cell-background-color`. <br/>Defaults to `var(--mod-table-section-header-background-color, var(--spectrum-table-section-header-background-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-table-border-color": {
+      "value": "var(--mod-table-border-color, var(--spectrum-table-border-color))",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `.spectrum-Table-headRow .spectrum-Table-headCell`, `.spectrum-Table-headRow:first-child .spectrum-Table-headCell:first-child`, `.spectrum-Table-headRow:last-child .spectrum-Table-headCell:last-child`, `.spectrum-Table-body .spectrum-Table-row:first-child .spectrum-Table-cell`, `.spectrum-Table-body .spectrum-Table-row:last-child .spectrum-Table-cell`, `.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:first-child`, `.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:last-child`, `.spectrum-Table-scroller`, `.spectrum-Table-scroller .spectrum-Table-headRow:first-child .spectrum-Table-headCell`. <br/>Defaults to `var(--mod-table-border-color, var(--spectrum-table-border-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-table-header-text-color": {
+      "value": "var(--mod-table-header-text-color, var(--spectrum-table-header-text-color))",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `.spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton`, `.spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton`. <br/>Defaults to `var(--mod-table-header-text-color, var(--spectrum-table-header-text-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-table-header-text-color-hover": {
+      "value": "var(--mod-table-header-text-color, var(--spectrum-table-header-text-color))",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `.spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton:active, .spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton:focus, .spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton:focus-visible`, `.spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton:hover, .spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton:hover`. <br/>Defaults to `var(--mod-table-header-text-color, var(--spectrum-table-header-text-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-table-transition-duration": {
+      "value": "var(--mod-table-transition-duration, var(--spectrum-table-transition-duration))",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `.spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton .spectrum-Icon`, `.spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton .spectrum-Icon`, `.spectrum-Table-row`. <br/>Defaults to `var(--mod-table-transition-duration, var(--spectrum-table-transition-duration))`, if not set.",
+      "control": "text"
+    },
+    "highcontrast-table-cell-focus-indicator-color": {
+      "value": "var(--highcontrast-table-focus-indicator-color, var(--mod-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color)))",
+      "description": "Defined in `.spectrum-Table-body.is-drop-target .spectrum-Table-row, .spectrum-Table-row.is-drop-target, .spectrum-Table-row.is-selected`. <br/>Used by `.spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton:focus-visible:after`, `.spectrum-Table-cell:focus-visible:after, .spectrum-Table-cell:focus:after, .spectrum-Table-headCell:focus-visible:after, .spectrum-Table-headCell:focus:after`. <br/>Defaults to `var(--highcontrast-table-focus-indicator-color, var(--mod-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color)))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-table-focus-indicator-color": {
+      "value": "var(--mod-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color))",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `.spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton:focus-visible:after`, `.spectrum-Table-body.is-drop-target:after`, `.spectrum-Table-cell:focus-visible:after, .spectrum-Table-cell:focus:after, .spectrum-Table-headCell:focus-visible:after, .spectrum-Table-headCell:focus:after`, `.spectrum-Table-row.is-selected:not(:has(+ .is-selected)) .spectrum-Table-cell`, `--mod-table-border-color`, `.spectrum-Table-row.is-drop-target`, `.spectrum-Table-row.is-drop-target .spectrum-Table-cell`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon.is-keyboardFocused, .spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:focus-visible`. <br/>Defaults to `var(--mod-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-table-divider-color": {
+      "value": "var(--mod-table-divider-color, var(--spectrum-table-divider-color))",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `.spectrum-Table-cell`, `.spectrum-Table-cell--divider`. <br/>Defaults to `var(--mod-table-divider-color, var(--spectrum-table-divider-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-table-section-header-text-color": {
+      "value": "var(--mod-table-section-header-text-color, var(--spectrum-table-row-text-color))",
+      "description": "Defined in `.spectrum-Table`. <br/>Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`, `--highcontrast-table-row-text-color`. <br/>Defaults to `var(--mod-table-section-header-text-color, var(--spectrum-table-row-text-color))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/table/stories/table.stories.js b/components/table/stories/table.stories.js
index 3979b332cce..4cd2a56bcd1 100644
--- a/components/table/stories/table.stories.js
+++ b/components/table/stories/table.stories.js
@@ -1,10 +1,12 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isEmphasized, isLoading, isQuiet } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { TableGroup } from "./table.test.js";
 import { Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * A table is used to create a container for displaying information. It allows users to sort, compare, and take action on large amounts of data.
  */
@@ -168,9 +170,7 @@ export default {
 		},
 		packageJson,
 		metadata,
-		status: {
-			type: "migrated"
-		},
+		cssprops: metadata.modifiers,
 	},
 	tags: ["migrated"],
 };
diff --git a/components/tabs/dist/metadata.json b/components/tabs/dist/metadata.json
index 879d8bd7440..f8e84598150 100644
--- a/components/tabs/dist/metadata.json
+++ b/components/tabs/dist/metadata.json
@@ -22,153 +22,719 @@
     ".spectrum-Tabs-item",
     ".spectrum-Tabs-item .spectrum-Icon",
     ".spectrum-Tabs-item .spectrum-Icon + .spectrum-Tabs-itemLabel",
+    ".spectrum-Tabs-item:before",
+    ".spectrum-Tabs-item:focus-visible",
+    ".spectrum-Tabs-item:focus-visible:before",
+    ".spectrum-Tabs-item:hover",
     ".spectrum-Tabs-item.is-disabled",
     ".spectrum-Tabs-item.is-disabled .spectrum-Tabs-itemLabel",
     ".spectrum-Tabs-item.is-disabled .spectrum-Tabs-selectionIndicator",
     ".spectrum-Tabs-item.is-selected",
-    ".spectrum-Tabs-item.is-selected.is-disabled",
     ".spectrum-Tabs-item.is-selected:focus-visible",
     ".spectrum-Tabs-item.is-selected:hover",
-    ".spectrum-Tabs-item:before",
-    ".spectrum-Tabs-item:focus-visible",
-    ".spectrum-Tabs-item:focus-visible:before",
-    ".spectrum-Tabs-item:hover",
+    ".spectrum-Tabs-item.is-selected.is-disabled",
     ".spectrum-Tabs-itemLabel",
     ".spectrum-Tabs-itemLabel:empty",
     ".spectrum-Tabs-selectionIndicator",
     ".spectrum-Tabs.spectrum-Tabs--compact"
   ],
-  "modifiers": [
-    "--mod-tabs-animation-duration",
-    "--mod-tabs-animation-ease",
-    "--mod-tabs-bottom-to-text",
-    "--mod-tabs-bottom-to-text-compact",
-    "--mod-tabs-color",
-    "--mod-tabs-color-disabled",
-    "--mod-tabs-color-hover",
-    "--mod-tabs-color-key-focus",
-    "--mod-tabs-color-selected",
-    "--mod-tabs-color-selected-hover",
-    "--mod-tabs-color-selected-key-focus",
-    "--mod-tabs-focus-indicator-border-radius",
-    "--mod-tabs-focus-indicator-color",
-    "--mod-tabs-focus-indicator-gap",
-    "--mod-tabs-focus-indicator-width",
-    "--mod-tabs-font-family",
-    "--mod-tabs-font-size",
-    "--mod-tabs-font-style",
-    "--mod-tabs-font-weight",
-    "--mod-tabs-icon-size",
-    "--mod-tabs-icon-to-text",
-    "--mod-tabs-item-border-radius",
-    "--mod-tabs-item-height",
-    "--mod-tabs-item-height-compact",
-    "--mod-tabs-item-horizontal-spacing",
-    "--mod-tabs-item-horizontal-spacing-compact",
-    "--mod-tabs-label-to-selection-indicator",
-    "--mod-tabs-label-to-selection-indicator-compact",
-    "--mod-tabs-line-height",
-    "--mod-tabs-selection-indicator-border-radius",
-    "--mod-tabs-selection-indicator-color",
-    "--mod-tabs-selection-indicator-color-disabled",
-    "--mod-tabs-selection-indicator-thickness",
-    "--mod-tabs-side-to-icon",
-    "--mod-tabs-side-to-icon-compact",
-    "--mod-tabs-start-to-edge",
-    "--mod-tabs-top-to-icon",
-    "--mod-tabs-top-to-icon-compact",
-    "--mod-tabs-top-to-text",
-    "--mod-tabs-top-to-text-compact"
-  ],
-  "component": [
-    "--spectrum-tab-selection-indicator-thickness",
-    "--spectrum-tabs-animation-duration",
-    "--spectrum-tabs-animation-ease",
-    "--spectrum-tabs-bottom-to-text",
-    "--spectrum-tabs-color",
-    "--spectrum-tabs-color-disabled",
-    "--spectrum-tabs-color-hover",
-    "--spectrum-tabs-color-key-focus",
-    "--spectrum-tabs-color-selected",
-    "--spectrum-tabs-color-selected-hover",
-    "--spectrum-tabs-color-selected-key-focus",
-    "--spectrum-tabs-focus-indicator-border-radius",
-    "--spectrum-tabs-focus-indicator-color",
-    "--spectrum-tabs-focus-indicator-gap",
-    "--spectrum-tabs-focus-indicator-width",
-    "--spectrum-tabs-font-family",
-    "--spectrum-tabs-font-size",
-    "--spectrum-tabs-font-style",
-    "--spectrum-tabs-font-weight",
-    "--spectrum-tabs-icon-size",
-    "--spectrum-tabs-icon-to-text",
-    "--spectrum-tabs-item-border-radius",
-    "--spectrum-tabs-item-height",
-    "--spectrum-tabs-item-horizontal-spacing",
-    "--spectrum-tabs-label-to-selection-indicator",
-    "--spectrum-tabs-line-height",
-    "--spectrum-tabs-selection-indicator-border-radius",
-    "--spectrum-tabs-selection-indicator-color",
-    "--spectrum-tabs-selection-indicator-color-disabled",
-    "--spectrum-tabs-selection-indicator-thickness",
-    "--spectrum-tabs-side-to-icon",
-    "--spectrum-tabs-start-to-edge",
-    "--spectrum-tabs-top-to-icon",
-    "--spectrum-tabs-top-to-text"
-  ],
-  "global": [
-    "--spectrum-animation-duration-100",
-    "--spectrum-animation-ease-in-out",
-    "--spectrum-corner-radius-0",
-    "--spectrum-corner-radius-100",
-    "--spectrum-corner-radius-full",
-    "--spectrum-default-font-style",
-    "--spectrum-disabled-border-color",
-    "--spectrum-disabled-content-color",
-    "--spectrum-focus-indicator-color",
-    "--spectrum-focus-indicator-gap",
-    "--spectrum-focus-indicator-thickness",
-    "--spectrum-font-size-100",
-    "--spectrum-line-height-100",
-    "--spectrum-neutral-content-color-default",
-    "--spectrum-neutral-content-color-hover",
-    "--spectrum-neutral-content-color-key-focus",
-    "--spectrum-neutral-subdued-content-color-default",
-    "--spectrum-neutral-subdued-content-color-down",
-    "--spectrum-neutral-subdued-content-color-hover",
-    "--spectrum-neutral-subdued-content-color-key-focus",
-    "--spectrum-regular-font-weight",
-    "--spectrum-sans-font-family-stack",
-    "--spectrum-spacing-200",
-    "--spectrum-spacing-75",
-    "--spectrum-tab-item-bottom-to-text-compact-medium",
-    "--spectrum-tab-item-bottom-to-text-medium",
-    "--spectrum-tab-item-compact-height-medium",
-    "--spectrum-tab-item-height-medium",
-    "--spectrum-tab-item-side-to-workflow-icon-compact-medium",
-    "--spectrum-tab-item-side-to-workflow-icon-medium",
-    "--spectrum-tab-item-start-to-edge-medium",
-    "--spectrum-tab-item-to-tab-item-compact-horizontal-medium",
-    "--spectrum-tab-item-to-tab-item-horizontal-medium",
-    "--spectrum-tab-item-top-to-text-compact-medium",
-    "--spectrum-tab-item-top-to-text-medium",
-    "--spectrum-tab-item-top-to-workflow-icon-compact-medium",
-    "--spectrum-tab-item-top-to-workflow-icon-medium",
-    "--spectrum-text-to-visual-100",
-    "--spectrum-workflow-icon-size-100"
-  ],
-  "passthroughs": ["--mod-picker-block-size"],
-  "high-contrast": [
-    "--highcontrast-tabs-background-color-selected",
-    "--highcontrast-tabs-color",
-    "--highcontrast-tabs-color-disabled",
-    "--highcontrast-tabs-color-hover",
-    "--highcontrast-tabs-color-key-focus",
-    "--highcontrast-tabs-color-selected",
-    "--highcontrast-tabs-color-selected-hover",
-    "--highcontrast-tabs-color-selected-key-focus",
-    "--highcontrast-tabs-focus-indicator-color",
-    "--highcontrast-tabs-selection-indicator-color",
-    "--highcontrast-tabs-selection-indicator-color-disabled"
-  ]
+  "modifiers": {
+    "mod-tabs-item-height": {
+      "description": "Used by `--spectrum-tabs-item-height`. <br/>Defaults to `var(--spectrum-tab-item-height-medium)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tabs-start-to-edge": {
+      "description": "Used by `--spectrum-tabs-start-to-edge`. <br/>Defaults to `var(--spectrum-tab-item-start-to-edge-medium)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tabs-top-to-text": {
+      "description": "Used by `--spectrum-tabs-top-to-text`. <br/>Defaults to `var(--spectrum-tab-item-top-to-text-medium)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tabs-bottom-to-text": {
+      "description": "Used by `--spectrum-tabs-bottom-to-text`. <br/>Defaults to `var(--spectrum-tab-item-bottom-to-text-medium)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tabs-label-to-selection-indicator": {
+      "description": "Used by `--spectrum-tabs-label-to-selection-indicator`. <br/>Defaults to `var(--spectrum-spacing-200)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tabs-item-horizontal-spacing": {
+      "description": "Used by `--spectrum-tabs-item-horizontal-spacing`. <br/>Defaults to `var(--spectrum-tab-item-to-tab-item-horizontal-medium)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tabs-icon-size": {
+      "description": "Used by `--spectrum-tabs-icon-size`. <br/>Defaults to `var(--spectrum-workflow-icon-size-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tabs-icon-to-text": {
+      "description": "Used by `--spectrum-tabs-icon-to-text`. <br/>Defaults to `var(--spectrum-text-to-visual-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tabs-top-to-icon": {
+      "description": "Used by `--spectrum-tabs-top-to-icon`. <br/>Defaults to `var(--spectrum-tab-item-top-to-workflow-icon-medium)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tabs-side-to-icon": {
+      "description": "Used by `--spectrum-tabs-side-to-icon`. <br/>Defaults to `var(--spectrum-tab-item-side-to-workflow-icon-medium)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tabs-item-border-radius": {
+      "description": "Used by `--spectrum-tabs-item-border-radius`. <br/>Defaults to `var(--spectrum-corner-radius-0)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tabs-color": {
+      "description": "Used by `--spectrum-tabs-color`. <br/>Defaults to `var(--spectrum-neutral-subdued-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tabs-color-hover": {
+      "description": "Used by `--spectrum-tabs-color-hover`. <br/>Defaults to `var(--spectrum-neutral-subdued-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tabs-color-key-focus": {
+      "description": "Used by `--spectrum-tabs-color-key-focus`. <br/>Defaults to `var(--spectrum-neutral-subdued-content-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tabs-color-selected": {
+      "description": "Used by `--spectrum-tabs-color-selected`. <br/>Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tabs-color-selected-hover": {
+      "description": "Used by `--spectrum-tabs-color-selected-hover`. <br/>Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tabs-color-selected-key-focus": {
+      "description": "Used by `--spectrum-tabs-color-selected-key-focus`. <br/>Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tabs-color-disabled": {
+      "description": "Used by `--spectrum-tabs-color-disabled`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tabs-selection-indicator-color-disabled": {
+      "description": "Used by `--spectrum-tabs-selection-indicator-color-disabled`. <br/>Defaults to `var(--spectrum-disabled-border-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tabs-font-weight": {
+      "description": "Used by `--spectrum-tabs-font-weight`. <br/>Defaults to `var(--spectrum-regular-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tabs-font-family": {
+      "description": "Used by `--spectrum-tabs-font-family`. <br/>Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tabs-font-style": {
+      "description": "Used by `--spectrum-tabs-font-style`. <br/>Defaults to `var(--spectrum-default-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tabs-font-size": {
+      "description": "Used by `--spectrum-tabs-font-size`. <br/>Defaults to `var(--spectrum-font-size-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tabs-line-height": {
+      "description": "Used by `--spectrum-tabs-line-height`. <br/>Defaults to `var(--spectrum-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tabs-focus-indicator-width": {
+      "description": "Used by `--spectrum-tabs-focus-indicator-width`. <br/>Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tabs-focus-indicator-border-radius": {
+      "description": "Used by `--spectrum-tabs-focus-indicator-border-radius`. <br/>Defaults to `var(--spectrum-corner-radius-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tabs-focus-indicator-gap": {
+      "description": "Used by `--spectrum-tabs-focus-indicator-gap`. <br/>Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tabs-focus-indicator-color": {
+      "description": "Used by `--spectrum-tabs-focus-indicator-color`. <br/>Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tabs-selection-indicator-color": {
+      "description": "Used by `--spectrum-tabs-selection-indicator-color`. <br/>Defaults to `var(--spectrum-neutral-subdued-content-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tabs-selection-indicator-thickness": {
+      "description": "Used by `--spectrum-tabs-selection-indicator-thickness`. <br/>Defaults to `var(--spectrum-tab-selection-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tabs-selection-indicator-border-radius": {
+      "description": "Used by `--spectrum-tabs-selection-indicator-border-radius`. <br/>Defaults to `var(--spectrum-corner-radius-full)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tabs-animation-duration": {
+      "description": "Used by `--spectrum-tabs-animation-duration`. <br/>Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tabs-animation-ease": {
+      "description": "Used by `--spectrum-tabs-animation-ease`. <br/>Defaults to `var(--spectrum-animation-ease-in-out)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tabs-item-height-compact": {
+      "description": "Used by `--spectrum-tabs-item-height`. <br/>Defaults to `var(--spectrum-tab-item-compact-height-medium)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tabs-top-to-text-compact": {
+      "description": "Used by `--spectrum-tabs-top-to-text`. <br/>Defaults to `var(--spectrum-tab-item-top-to-text-compact-medium)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tabs-bottom-to-text-compact": {
+      "description": "Used by `--spectrum-tabs-bottom-to-text`. <br/>Defaults to `var(--spectrum-tab-item-bottom-to-text-compact-medium)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tabs-label-to-selection-indicator-compact": {
+      "description": "Used by `--spectrum-tabs-label-to-selection-indicator`. <br/>Defaults to `var(--spectrum-spacing-75)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tabs-item-horizontal-spacing-compact": {
+      "description": "Used by `--spectrum-tabs-item-horizontal-spacing`. <br/>Defaults to `var(--spectrum-tab-item-to-tab-item-compact-horizontal-medium)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tabs-top-to-icon-compact": {
+      "description": "Used by `--spectrum-tabs-top-to-icon`. <br/>Defaults to `var(--spectrum-tab-item-top-to-workflow-icon-compact-medium)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tabs-side-to-icon-compact": {
+      "description": "Used by `--spectrum-tabs-side-to-icon`. <br/>Defaults to `var(--spectrum-tab-item-side-to-workflow-icon-compact-medium)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-tabs-item-height": {
+      "value": "var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-medium))",
+      "description": "Defined in `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--compact`. <br/>Used by `--mod-picker-block-size`, `.spectrum-Tabs-item`, `.spectrum-Tabs--vertical .spectrum-Tabs-item, .spectrum-Tabs--vertical-right .spectrum-Tabs-item`, `.spectrum-Tabs--vertical .spectrum-Icon, .spectrum-Tabs--vertical-right .spectrum-Icon`. <br/>Defaults to `var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-medium))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tabs-start-to-edge": {
+      "value": "var(--mod-tabs-start-to-edge, var(--spectrum-tab-item-start-to-edge-medium))",
+      "description": "Defined in `.spectrum-Tabs`. <br/>Used by `.spectrum-Tabs--vertical .spectrum-Tabs-item, .spectrum-Tabs--vertical-right .spectrum-Tabs-item`, `.spectrum-Tabs--vertical .spectrum-Tabs-selectionIndicator, .spectrum-Tabs--vertical-right .spectrum-Tabs-selectionIndicator`, `.spectrum-Tabs--vertical-right .spectrum-Tabs-selectionIndicator`. <br/>Defaults to `var(--mod-tabs-start-to-edge, var(--spectrum-tab-item-start-to-edge-medium))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tabs-top-to-text": {
+      "value": "var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-medium))",
+      "description": "Defined in `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--compact`. <br/>Used by `.spectrum-Tabs-itemLabel`. <br/>Defaults to `var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-medium))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tabs-bottom-to-text": {
+      "value": "var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-bottom-to-text-compact-medium))",
+      "description": "Defined in `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--compact`. <br/>Used by `.spectrum-Tabs-itemLabel`. <br/>Defaults to `var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-bottom-to-text-compact-medium))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tabs-label-to-selection-indicator": {
+      "value": "var(--mod-tabs-label-to-selection-indicator-compact, var(--spectrum-spacing-75))",
+      "description": "Defined in `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--compact`. <br/>Used by `.spectrum-Tabs--horizontal .spectrum-Tabs-selectionIndicator`. <br/>Defaults to `var(--mod-tabs-label-to-selection-indicator-compact, var(--spectrum-spacing-75))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tabs-item-horizontal-spacing": {
+      "value": "var(--mod-tabs-item-horizontal-spacing-compact, var(--spectrum-tab-item-to-tab-item-compact-horizontal-medium))",
+      "description": "Defined in `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--compact`. <br/>Used by `.spectrum-Tabs`. <br/>Defaults to `var(--mod-tabs-item-horizontal-spacing-compact, var(--spectrum-tab-item-to-tab-item-compact-horizontal-medium))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tabs-icon-size": {
+      "value": "var(--mod-tabs-icon-size, var(--spectrum-workflow-icon-size-100))",
+      "description": "Defined in `.spectrum-Tabs`. <br/>Used by `.spectrum-Tabs-item .spectrum-Icon`. <br/>Defaults to `var(--mod-tabs-icon-size, var(--spectrum-workflow-icon-size-100))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tabs-icon-to-text": {
+      "value": "var(--mod-tabs-icon-to-text, var(--spectrum-text-to-visual-100))",
+      "description": "Defined in `.spectrum-Tabs`. <br/>Used by `.spectrum-Tabs-item .spectrum-Icon + .spectrum-Tabs-itemLabel`. <br/>Defaults to `var(--mod-tabs-icon-to-text, var(--spectrum-text-to-visual-100))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tabs-top-to-icon": {
+      "value": "var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-medium))",
+      "description": "Defined in `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--compact`. <br/>Used by `.spectrum-Tabs-item .spectrum-Icon`. <br/>Defaults to `var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-medium))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tabs-side-to-icon": {
+      "value": "var(--mod-tabs-side-to-icon-compact, var(--spectrum-tab-item-side-to-workflow-icon-compact-medium))",
+      "description": "Defined in `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--compact`. <br/>Used by `.spectrum-Tabs-item .spectrum-Icon`, `.spectrum-Tabs-item .spectrum-Icon + .spectrum-Tabs-itemLabel`. <br/>Defaults to `var(--mod-tabs-side-to-icon-compact, var(--spectrum-tab-item-side-to-workflow-icon-compact-medium))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tabs-item-border-radius": {
+      "value": "var(--mod-tabs-item-border-radius, var(--spectrum-corner-radius-0))",
+      "description": "Defined in `.spectrum-Tabs`. <br/>Used by `.spectrum-Tabs-item`. <br/>Defaults to `var(--mod-tabs-item-border-radius, var(--spectrum-corner-radius-0))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tabs-color": {
+      "value": "var(--highcontrast-tabs-color, var(--mod-tabs-color, var(--spectrum-neutral-subdued-content-color-default)))",
+      "description": "Defined in `.spectrum-Tabs`. <br/>Used by `.spectrum-Tabs-item`. <br/>Defaults to `var(--highcontrast-tabs-color, var(--mod-tabs-color, var(--spectrum-neutral-subdued-content-color-default)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-tabs-color-hover": {
+      "value": "var(--highcontrast-tabs-color-hover, var(--mod-tabs-color-hover, var(--spectrum-neutral-subdued-content-color-hover)))",
+      "description": "Defined in `.spectrum-Tabs`. <br/>Used by `.spectrum-Tabs-item:hover`. <br/>Defaults to `var(--highcontrast-tabs-color-hover, var(--mod-tabs-color-hover, var(--spectrum-neutral-subdued-content-color-hover)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-tabs-color-key-focus": {
+      "value": "var(--highcontrast-tabs-color-key-focus, var(--mod-tabs-color-key-focus, var(--spectrum-neutral-subdued-content-color-key-focus)))",
+      "description": "Defined in `.spectrum-Tabs`. <br/>Used by `.spectrum-Tabs-item:focus-visible`. <br/>Defaults to `var(--highcontrast-tabs-color-key-focus, var(--mod-tabs-color-key-focus, var(--spectrum-neutral-subdued-content-color-key-focus)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-tabs-color-selected": {
+      "value": "var(--highcontrast-tabs-color-selected, var(--mod-tabs-color-selected, var(--spectrum-neutral-content-color-default)))",
+      "description": "Defined in `.spectrum-Tabs`. <br/>Used by `.spectrum-Tabs-item.is-selected`. <br/>Defaults to `var(--highcontrast-tabs-color-selected, var(--mod-tabs-color-selected, var(--spectrum-neutral-content-color-default)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-tabs-color-selected-hover": {
+      "value": "var(--highcontrast-tabs-color-selected-hover, var(--mod-tabs-color-selected-hover, var(--spectrum-neutral-content-color-hover)))",
+      "description": "Defined in `.spectrum-Tabs`. <br/>Used by `.spectrum-Tabs-item.is-selected:hover`. <br/>Defaults to `var(--highcontrast-tabs-color-selected-hover, var(--mod-tabs-color-selected-hover, var(--spectrum-neutral-content-color-hover)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-tabs-color-selected-key-focus": {
+      "value": "var(--highcontrast-tabs-color-selected-key-focus, var(--mod-tabs-color-selected-key-focus, var(--spectrum-neutral-content-color-key-focus)))",
+      "description": "Defined in `.spectrum-Tabs`. <br/>Used by `.spectrum-Tabs-item.is-selected:focus-visible`. <br/>Defaults to `var(--highcontrast-tabs-color-selected-key-focus, var(--mod-tabs-color-selected-key-focus, var(--spectrum-neutral-content-color-key-focus)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-tabs-color-disabled": {
+      "value": "var(--highcontrast-tabs-color-disabled, var(--mod-tabs-color-disabled, var(--spectrum-disabled-content-color)))",
+      "description": "Defined in `.spectrum-Tabs`. <br/>Used by `.spectrum-Tabs-item.is-disabled, .spectrum-Tabs-item.is-selected.is-disabled`. <br/>Defaults to `var(--highcontrast-tabs-color-disabled, var(--mod-tabs-color-disabled, var(--spectrum-disabled-content-color)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-tabs-selection-indicator-color-disabled": {
+      "value": "var(--highcontrast-tabs-selection-indicator-color-disabled, var(--mod-tabs-selection-indicator-color-disabled, var(--spectrum-disabled-border-color)))",
+      "description": "Defined in `.spectrum-Tabs`. <br/>Used by `.spectrum-Tabs-item.is-disabled .spectrum-Tabs-selectionIndicator`. <br/>Defaults to `var(--highcontrast-tabs-selection-indicator-color-disabled, var(--mod-tabs-selection-indicator-color-disabled, var(--spectrum-disabled-border-color)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-tabs-font-weight": {
+      "value": "var(--mod-tabs-font-weight, var(--spectrum-regular-font-weight))",
+      "description": "Defined in `.spectrum-Tabs`. <br/>Used by `.spectrum-Tabs-itemLabel`. <br/>Defaults to `var(--mod-tabs-font-weight, var(--spectrum-regular-font-weight))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tabs-font-family": {
+      "value": "var(--mod-tabs-font-family, var(--spectrum-sans-font-family-stack))",
+      "description": "Defined in `.spectrum-Tabs`. <br/>Used by `.spectrum-Tabs-itemLabel`. <br/>Defaults to `var(--mod-tabs-font-family, var(--spectrum-sans-font-family-stack))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tabs-font-style": {
+      "value": "var(--mod-tabs-font-style, var(--spectrum-default-font-style))",
+      "description": "Defined in `.spectrum-Tabs`. <br/>Used by `.spectrum-Tabs-itemLabel`. <br/>Defaults to `var(--mod-tabs-font-style, var(--spectrum-default-font-style))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tabs-font-size": {
+      "value": "var(--mod-tabs-font-size, var(--spectrum-font-size-100))",
+      "description": "Defined in `.spectrum-Tabs`. <br/>Used by `.spectrum-Tabs-itemLabel`. <br/>Defaults to `var(--mod-tabs-font-size, var(--spectrum-font-size-100))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tabs-line-height": {
+      "value": "var(--mod-tabs-line-height, var(--spectrum-line-height-100))",
+      "description": "Defined in `.spectrum-Tabs`. <br/>Used by `.spectrum-Tabs-itemLabel`. <br/>Defaults to `var(--mod-tabs-line-height, var(--spectrum-line-height-100))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tabs-focus-indicator-width": {
+      "value": "var(--mod-tabs-focus-indicator-width, var(--spectrum-focus-indicator-thickness))",
+      "description": "Defined in `.spectrum-Tabs`. <br/>Used by `.spectrum-Tabs-item:before`. <br/>Defaults to `var(--mod-tabs-focus-indicator-width, var(--spectrum-focus-indicator-thickness))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tabs-focus-indicator-border-radius": {
+      "value": "var(--mod-tabs-focus-indicator-border-radius, var(--spectrum-corner-radius-100))",
+      "description": "Defined in `.spectrum-Tabs`. <br/>Used by `.spectrum-Tabs-item:before`. <br/>Defaults to `var(--mod-tabs-focus-indicator-border-radius, var(--spectrum-corner-radius-100))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tabs-focus-indicator-gap": {
+      "value": "var(--mod-tabs-focus-indicator-gap, var(--spectrum-focus-indicator-gap))",
+      "description": "Defined in `.spectrum-Tabs`. <br/>Used by `.spectrum-Tabs-item:before`. <br/>Defaults to `var(--mod-tabs-focus-indicator-gap, var(--spectrum-focus-indicator-gap))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tabs-focus-indicator-color": {
+      "value": "var(--highcontrast-tabs-focus-indicator-color, var(--mod-tabs-focus-indicator-color, var(--spectrum-focus-indicator-color)))",
+      "description": "Defined in `.spectrum-Tabs`. <br/>Used by `.spectrum-Tabs-item:focus-visible:before`. <br/>Defaults to `var(--highcontrast-tabs-focus-indicator-color, var(--mod-tabs-focus-indicator-color, var(--spectrum-focus-indicator-color)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-tabs-selection-indicator-color": {
+      "value": "var(--highcontrast-tabs-selection-indicator-color, var(--mod-tabs-selection-indicator-color, var(--spectrum-neutral-subdued-content-color-down)))",
+      "description": "Defined in `.spectrum-Tabs`. <br/>Used by `.spectrum-Tabs-selectionIndicator`. <br/>Defaults to `var(--highcontrast-tabs-selection-indicator-color, var(--mod-tabs-selection-indicator-color, var(--spectrum-neutral-subdued-content-color-down)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-tabs-selection-indicator-thickness": {
+      "value": "var(--mod-tabs-selection-indicator-thickness, var(--spectrum-tab-selection-indicator-thickness))",
+      "description": "Defined in `.spectrum-Tabs`. <br/>Used by `.spectrum-Tabs--horizontal .spectrum-Tabs-selectionIndicator`, `.spectrum-Tabs--vertical .spectrum-Tabs-selectionIndicator, .spectrum-Tabs--vertical-right .spectrum-Tabs-selectionIndicator`. <br/>Defaults to `var(--mod-tabs-selection-indicator-thickness, var(--spectrum-tab-selection-indicator-thickness))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tab-selection-indicator-thickness": {
+      "description": "Used by `--spectrum-tabs-selection-indicator-thickness`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tabs-selection-indicator-border-radius": {
+      "value": "var(--mod-tabs-selection-indicator-border-radius, var(--spectrum-corner-radius-full))",
+      "description": "Defined in `.spectrum-Tabs`. <br/>Used by `.spectrum-Tabs-selectionIndicator`. <br/>Defaults to `var(--mod-tabs-selection-indicator-border-radius, var(--spectrum-corner-radius-full))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tabs-animation-duration": {
+      "value": "var(--mod-tabs-animation-duration, var(--spectrum-animation-duration-100))",
+      "description": "Defined in `.spectrum-Tabs`. <br/>Used by `.spectrum-Tabs-item`, `.spectrum-Tabs-selectionIndicator`. <br/>Defaults to `var(--mod-tabs-animation-duration, var(--spectrum-animation-duration-100))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tabs-animation-ease": {
+      "value": "var(--mod-tabs-animation-ease, var(--spectrum-animation-ease-in-out))",
+      "description": "Defined in `.spectrum-Tabs`. <br/>Used by `.spectrum-Tabs-selectionIndicator`. <br/>Defaults to `var(--mod-tabs-animation-ease, var(--spectrum-animation-ease-in-out))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-tab-item-height-medium": {
+      "value": "var(--spectrum-component-height-300)",
+      "description": "Used by `--spectrum-tabs-item-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-tab-item-start-to-edge-medium": {
+      "value": "12px",
+      "description": "Used by `--spectrum-tabs-start-to-edge`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-tab-item-top-to-text-medium": {
+      "value": "14px",
+      "description": "Used by `--spectrum-tabs-top-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-tab-item-bottom-to-text-medium": {
+      "value": "14px",
+      "description": "Used by `--spectrum-tabs-bottom-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-200": {
+      "value": "12px",
+      "description": "Used by `--spectrum-tabs-label-to-selection-indicator`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-tab-item-to-tab-item-horizontal-medium": {
+      "value": "24px",
+      "description": "Used by `--spectrum-tabs-item-horizontal-spacing`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-100": {
+      "value": "20px",
+      "description": "Used by `--spectrum-tabs-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-tabs-icon-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-tab-item-top-to-workflow-icon-medium": {
+      "value": "15px",
+      "description": "Used by `--spectrum-tabs-top-to-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-tab-item-side-to-workflow-icon-medium": {
+      "description": "Used by `--spectrum-tabs-side-to-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-0": {
+      "value": "0px",
+      "description": "Used by `--spectrum-tabs-item-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-subdued-content-color-default": {
+      "value": "var(--spectrum-gray-700)",
+      "description": "Used by `--spectrum-tabs-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-subdued-content-color-hover": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-tabs-color-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-subdued-content-color-key-focus": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-tabs-color-key-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-tabs-color-selected`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-tabs-color-selected-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-key-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-tabs-color-selected-key-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-disabled-content-color": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Used by `--spectrum-tabs-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-disabled-border-color": {
+      "value": "var(--spectrum-gray-300)",
+      "description": "Used by `--spectrum-tabs-selection-indicator-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-regular-font-weight": {
+      "value": "400",
+      "description": "Used by `--spectrum-tabs-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-sans-font-family-stack": {
+      "description": "Used by `--spectrum-tabs-font-family`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-default-font-style": {
+      "value": "normal",
+      "description": "Used by `--spectrum-tabs-font-style`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-100": {
+      "value": "14px",
+      "description": "Used by `--spectrum-tabs-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-line-height-100": {
+      "value": "1.3",
+      "description": "Used by `--spectrum-tabs-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Used by `--spectrum-tabs-focus-indicator-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-100": {
+      "value": "4px",
+      "description": "Used by `--spectrum-tabs-focus-indicator-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-gap": {
+      "value": "2px",
+      "description": "Used by `--spectrum-tabs-focus-indicator-gap`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Used by `--spectrum-tabs-focus-indicator-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-subdued-content-color-down": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-tabs-selection-indicator-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-full": {
+      "value": "9999px",
+      "description": "Used by `--spectrum-tabs-selection-indicator-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-animation-duration-100": {
+      "description": "Used by `--spectrum-tabs-animation-duration`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-animation-ease-in-out": {
+      "description": "Used by `--spectrum-tabs-animation-ease`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-tab-item-compact-height-medium": {
+      "value": "var(--spectrum-component-height-100)",
+      "description": "Used by `--spectrum-tabs-item-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-tab-item-top-to-text-compact-medium": {
+      "value": "6px",
+      "description": "Used by `--spectrum-tabs-top-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-tab-item-bottom-to-text-compact-medium": {
+      "value": "8px",
+      "description": "Used by `--spectrum-tabs-bottom-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-75": {
+      "value": "4px",
+      "description": "Used by `--spectrum-tabs-label-to-selection-indicator`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-tab-item-to-tab-item-compact-horizontal-medium": {
+      "description": "Used by `--spectrum-tabs-item-horizontal-spacing`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-tab-item-top-to-workflow-icon-compact-medium": {
+      "value": "7px",
+      "description": "Used by `--spectrum-tabs-top-to-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-tab-item-side-to-workflow-icon-compact-medium": {
+      "description": "Used by `--spectrum-tabs-side-to-icon`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {
+    "mod-picker-block-size": {
+      "category": "Passthrough"
+    }
+  },
+  "high-contrast": {
+    "highcontrast-tabs-color": {
+      "value": "var(--mod-tabs-color, var(--spectrum-neutral-subdued-content-color-default))",
+      "description": "Defined in `.spectrum-Tabs`. <br/>Used by `--spectrum-tabs-color`. <br/>Defaults to `var(--mod-tabs-color, var(--spectrum-neutral-subdued-content-color-default))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-tabs-color-hover": {
+      "value": "var(--mod-tabs-color-hover, var(--spectrum-neutral-subdued-content-color-hover))",
+      "description": "Defined in `.spectrum-Tabs`. <br/>Used by `--spectrum-tabs-color-hover`. <br/>Defaults to `var(--mod-tabs-color-hover, var(--spectrum-neutral-subdued-content-color-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-tabs-color-key-focus": {
+      "value": "var(--mod-tabs-color-key-focus, var(--spectrum-neutral-subdued-content-color-key-focus))",
+      "description": "Defined in `.spectrum-Tabs`. <br/>Used by `--spectrum-tabs-color-key-focus`. <br/>Defaults to `var(--mod-tabs-color-key-focus, var(--spectrum-neutral-subdued-content-color-key-focus))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-tabs-color-selected": {
+      "value": "var(--mod-tabs-color-selected, var(--spectrum-neutral-content-color-default))",
+      "description": "Defined in `.spectrum-Tabs`. <br/>Used by `--spectrum-tabs-color-selected`, `.spectrum-Tabs .spectrum-Tabs-item.is-selected .spectrum-Icon`. <br/>Defaults to `var(--mod-tabs-color-selected, var(--spectrum-neutral-content-color-default))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-tabs-color-selected-hover": {
+      "value": "var(--mod-tabs-color-selected-hover, var(--spectrum-neutral-content-color-hover))",
+      "description": "Defined in `.spectrum-Tabs`. <br/>Used by `--spectrum-tabs-color-selected-hover`. <br/>Defaults to `var(--mod-tabs-color-selected-hover, var(--spectrum-neutral-content-color-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-tabs-color-selected-key-focus": {
+      "value": "var(--mod-tabs-color-selected-key-focus, var(--spectrum-neutral-content-color-key-focus))",
+      "description": "Defined in `.spectrum-Tabs`. <br/>Used by `--spectrum-tabs-color-selected-key-focus`. <br/>Defaults to `var(--mod-tabs-color-selected-key-focus, var(--spectrum-neutral-content-color-key-focus))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-tabs-color-disabled": {
+      "value": "var(--mod-tabs-color-disabled, var(--spectrum-disabled-content-color))",
+      "description": "Defined in `.spectrum-Tabs`. <br/>Used by `--spectrum-tabs-color-disabled`, `.spectrum-Tabs .spectrum-Tabs-item.is-selected.is-disabled .spectrum-Icon`. <br/>Defaults to `var(--mod-tabs-color-disabled, var(--spectrum-disabled-content-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-tabs-selection-indicator-color-disabled": {
+      "value": "var(--mod-tabs-selection-indicator-color-disabled, var(--spectrum-disabled-border-color))",
+      "description": "Defined in `.spectrum-Tabs`. <br/>Used by `--spectrum-tabs-selection-indicator-color-disabled`, `.spectrum-Tabs .spectrum-Tabs-item.is-selected.is-disabled .spectrum-Tabs-selectionIndicator`. <br/>Defaults to `var(--mod-tabs-selection-indicator-color-disabled, var(--spectrum-disabled-border-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-tabs-focus-indicator-color": {
+      "value": "var(--mod-tabs-focus-indicator-color, var(--spectrum-focus-indicator-color))",
+      "description": "Defined in `.spectrum-Tabs`. <br/>Used by `--spectrum-tabs-focus-indicator-color`. <br/>Defaults to `var(--mod-tabs-focus-indicator-color, var(--spectrum-focus-indicator-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-tabs-selection-indicator-color": {
+      "value": "var(--mod-tabs-selection-indicator-color, var(--spectrum-neutral-subdued-content-color-down))",
+      "description": "Defined in `.spectrum-Tabs`. <br/>Used by `--spectrum-tabs-selection-indicator-color`. <br/>Defaults to `var(--mod-tabs-selection-indicator-color, var(--spectrum-neutral-subdued-content-color-down))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-tabs-background-color-selected": {
+      "value": "SelectedItem",
+      "description": "Defined in `.spectrum-Tabs`. <br/>Used by `.spectrum-Tabs .spectrum-Tabs-item.is-selected`. <br/>Defaults to `SelectedItem`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/tabs/stories/tabs.stories.js b/components/tabs/stories/tabs.stories.js
index 7e7b45d5dbd..a25cbfae326 100644
--- a/components/tabs/stories/tabs.stories.js
+++ b/components/tabs/stories/tabs.stories.js
@@ -1,9 +1,11 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { TabsGroups } from "./tabs.test.js";
 import { CompactGroup, OverflowGroup, Template, VerticalGroup } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit. Tabs can be either horizontal or vertical.
  *
@@ -18,7 +20,6 @@ import { CompactGroup, OverflowGroup, Template, VerticalGroup } from "./template
  * ### Quiet tabs
  * The quiet variant has been deprecated for Spectrum 2. By default, all tabs look similar to what was formerly the quiet variant, with no divider spanning across all tab items.
  */
-
 export default {
 	title: "Tabs",
 	component: "Tabs",
@@ -121,9 +122,7 @@ export default {
 		},
 		packageJson,
 		metadata,
-		status: {
-			type: "migrated",
-		},
+		cssprops: metadata.modifiers,
 	},
 	tags: ["migrated"],
 };
diff --git a/components/tag/CHANGELOG.md b/components/tag/CHANGELOG.md
index fa41b7d1f81..f26a00bffaa 100644
--- a/components/tag/CHANGELOG.md
+++ b/components/tag/CHANGELOG.md
@@ -5,7 +5,6 @@
 ### Major Changes
 
 - [#3682](https://github.com/adobe/spectrum-css/pull/3682) [`6d53893`](https://github.com/adobe/spectrum-css/commit/6d5389364504bc8373212276651055aa6c51bb76) Thanks [@rise-erpelding](https://github.com/rise-erpelding)! - Tag now uses Spectrum 2 tokens and specifications:
-
   - The invalid variant has been removed, tag errors are now displayed with help text within the tag group only.
   - Borders remain in high contrast but are otherwise transparent.
   - Thumbnail has been added as a visual option.
@@ -17,7 +16,6 @@
   - Emphasized tags have accent coloring only when they are selected.
 
   Changed mods:
-
   - "--mod-tag-avatar-spacing-inline-end" --> "--mod-tag-visual-spacing-inline-end",
   - "--mod-tag-icon-spacing-inline-end" --> "--mod-tag-visual-spacing-inline-end",
   - "--mod-tag-spacing-inline-start" --> "--mod-tag-label-spacing-inline",
@@ -26,7 +24,6 @@
   - "--mod-tag-clear-button-spacing-inline-end" --> "--mod-tag-edge-to-clear-icon"
 
   Added mods:
-
   - "--mod-tag-avatar-size",
   - "--mod-tag-clear-button-size",
   - "--mod-tag-label-font-family",
@@ -38,7 +35,6 @@
   - "--mod-tag-visual-spacing-inline-start"
 
   Removed mods:
-
   - "--mod-tag-background-color-invalid-selected",
   - "--mod-tag-background-color-invalid-selected-active",
   - "--mod-tag-background-color-invalid-selected-focus",
diff --git a/components/tag/dist/metadata.json b/components/tag/dist/metadata.json
index e4503014031..4187040fdd0 100644
--- a/components/tag/dist/metadata.json
+++ b/components/tag/dist/metadata.json
@@ -9,6 +9,13 @@
     ".spectrum-Tag .spectrum-Thumbnail",
     ".spectrum-Tag--sizeL",
     ".spectrum-Tag--sizeM",
+    ".spectrum-Tag:lang(ja)",
+    ".spectrum-Tag:lang(ko)",
+    ".spectrum-Tag:lang(zh)",
+    ".spectrum-Tag:not(.is-disabled, .is-readOnly):active",
+    ".spectrum-Tag:not(.is-disabled, .is-readOnly):focus-visible",
+    ".spectrum-Tag:not(.is-disabled, .is-readOnly):focus-visible:after",
+    ".spectrum-Tag:not(.is-disabled, .is-readOnly):hover",
     ".spectrum-Tag.is-disabled",
     ".spectrum-Tag.is-disabled .spectrum-Avatar",
     ".spectrum-Tag.is-disabled .spectrum-Thumbnail",
@@ -16,247 +23,1235 @@
     ".spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly)",
     ".spectrum-Tag.spectrum-Tag--emphasized",
     ".spectrum-Tag.spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly)",
-    ".spectrum-Tag.spectrum-Tag.is-disabled",
-    ".spectrum-Tag:lang(ja)",
-    ".spectrum-Tag:lang(ko)",
-    ".spectrum-Tag:lang(zh)",
-    ".spectrum-Tag:not(.is-disabled, .is-readOnly):active",
-    ".spectrum-Tag:not(.is-disabled, .is-readOnly):focus-visible",
-    ".spectrum-Tag:not(.is-disabled, .is-readOnly):focus-visible:after",
-    ".spectrum-Tag:not(.is-disabled, .is-readOnly):hover"
-  ],
-  "modifiers": [
-    "--mod-tag-animation-duration",
-    "--mod-tag-avatar-size",
-    "--mod-tag-avatar-spacing-block-end",
-    "--mod-tag-avatar-spacing-block-start",
-    "--mod-tag-background-color",
-    "--mod-tag-background-color-active",
-    "--mod-tag-background-color-disabled",
-    "--mod-tag-background-color-emphasized",
-    "--mod-tag-background-color-emphasized-active",
-    "--mod-tag-background-color-emphasized-focus",
-    "--mod-tag-background-color-emphasized-hover",
-    "--mod-tag-background-color-focus",
-    "--mod-tag-background-color-hover",
-    "--mod-tag-background-color-selected",
-    "--mod-tag-background-color-selected-active",
-    "--mod-tag-background-color-selected-focus",
-    "--mod-tag-background-color-selected-hover",
-    "--mod-tag-border-color",
-    "--mod-tag-border-color-active",
-    "--mod-tag-border-color-disabled",
-    "--mod-tag-border-color-emphasized",
-    "--mod-tag-border-color-focus",
-    "--mod-tag-border-color-hover",
-    "--mod-tag-border-color-selected",
-    "--mod-tag-border-width",
-    "--mod-tag-clear-button-size",
-    "--mod-tag-clear-button-spacing-block",
-    "--mod-tag-content-color",
-    "--mod-tag-content-color-active",
-    "--mod-tag-content-color-disabled",
-    "--mod-tag-content-color-emphasized",
-    "--mod-tag-content-color-focus",
-    "--mod-tag-content-color-hover",
-    "--mod-tag-content-color-selected",
-    "--mod-tag-corner-radius",
-    "--mod-tag-edge-to-clear-icon",
-    "--mod-tag-focus-ring-color",
-    "--mod-tag-focus-ring-gap",
-    "--mod-tag-focus-ring-thickness",
-    "--mod-tag-font-size",
-    "--mod-tag-height",
-    "--mod-tag-icon-size",
-    "--mod-tag-icon-spacing-block-end",
-    "--mod-tag-icon-spacing-block-start",
-    "--mod-tag-label-font-family",
-    "--mod-tag-label-font-style",
-    "--mod-tag-label-font-weight",
-    "--mod-tag-label-line-height",
-    "--mod-tag-label-line-height-cjk",
-    "--mod-tag-label-spacing-block",
-    "--mod-tag-label-spacing-inline",
-    "--mod-tag-label-to-clear-icon",
-    "--mod-tag-maximum-width-multiplier",
-    "--mod-tag-min-inline-size",
-    "--mod-tag-thumbnail-size",
-    "--mod-tag-visual-spacing-inline-end",
-    "--mod-tag-visual-spacing-inline-start"
-  ],
-  "component": [
-    "--spectrum-tag-animation-duration",
-    "--spectrum-tag-avatar-size",
-    "--spectrum-tag-avatar-spacing-block-end",
-    "--spectrum-tag-avatar-spacing-block-start",
-    "--spectrum-tag-background-color",
-    "--spectrum-tag-background-color-active",
-    "--spectrum-tag-background-color-focus",
-    "--spectrum-tag-background-color-hover",
-    "--spectrum-tag-border-color",
-    "--spectrum-tag-border-color-active",
-    "--spectrum-tag-border-color-focus",
-    "--spectrum-tag-border-color-hover",
-    "--spectrum-tag-border-width",
-    "--spectrum-tag-clear-button-size",
-    "--spectrum-tag-clear-button-spacing-block",
-    "--spectrum-tag-content-color",
-    "--spectrum-tag-content-color-active",
-    "--spectrum-tag-content-color-focus",
-    "--spectrum-tag-content-color-hover",
-    "--spectrum-tag-corner-radius",
-    "--spectrum-tag-edge-to-clear-icon",
-    "--spectrum-tag-edge-to-clear-icon-large",
-    "--spectrum-tag-edge-to-clear-icon-medium",
-    "--spectrum-tag-edge-to-clear-icon-small",
-    "--spectrum-tag-focus-ring-color",
-    "--spectrum-tag-focus-ring-gap",
-    "--spectrum-tag-focus-ring-thickness",
-    "--spectrum-tag-font-size",
-    "--spectrum-tag-height",
-    "--spectrum-tag-icon-size",
-    "--spectrum-tag-icon-spacing-block-end",
-    "--spectrum-tag-icon-spacing-block-start",
-    "--spectrum-tag-label-font-family",
-    "--spectrum-tag-label-font-style",
-    "--spectrum-tag-label-font-weight",
-    "--spectrum-tag-label-line-height",
-    "--spectrum-tag-label-line-height-cjk",
-    "--spectrum-tag-label-spacing-block",
-    "--spectrum-tag-label-spacing-inline",
-    "--spectrum-tag-label-to-clear-icon",
-    "--spectrum-tag-label-to-clear-icon-large",
-    "--spectrum-tag-label-to-clear-icon-medium",
-    "--spectrum-tag-label-to-clear-icon-small",
-    "--spectrum-tag-maximum-width-multiplier",
-    "--spectrum-tag-min-inline-size",
-    "--spectrum-tag-minimum-width-large",
-    "--spectrum-tag-minimum-width-medium",
-    "--spectrum-tag-minimum-width-small",
-    "--spectrum-tag-thumbnail-size",
-    "--spectrum-tag-top-to-avatar-large",
-    "--spectrum-tag-top-to-avatar-medium",
-    "--spectrum-tag-top-to-avatar-small",
-    "--spectrum-tag-top-to-cross-icon-large",
-    "--spectrum-tag-top-to-cross-icon-medium",
-    "--spectrum-tag-top-to-cross-icon-small",
-    "--spectrum-tag-visual-spacing-inline-end",
-    "--spectrum-tag-visual-spacing-inline-start"
-  ],
-  "global": [
-    "--spectrum-accent-background-color-default",
-    "--spectrum-accent-background-color-down",
-    "--spectrum-accent-background-color-hover",
-    "--spectrum-accent-background-color-key-focus",
-    "--spectrum-animation-duration-100",
-    "--spectrum-avatar-opacity-disabled",
-    "--spectrum-avatar-size-100",
-    "--spectrum-avatar-size-50",
-    "--spectrum-avatar-size-75",
-    "--spectrum-border-width-100",
-    "--spectrum-cjk-line-height-100",
-    "--spectrum-component-edge-to-text-100",
-    "--spectrum-component-edge-to-text-200",
-    "--spectrum-component-edge-to-text-75",
-    "--spectrum-component-edge-to-visual-100",
-    "--spectrum-component-edge-to-visual-200",
-    "--spectrum-component-edge-to-visual-75",
-    "--spectrum-component-height-100",
-    "--spectrum-component-height-200",
-    "--spectrum-component-height-75",
-    "--spectrum-component-size-difference-down",
-    "--spectrum-component-size-width-ratio-down",
-    "--spectrum-component-top-to-text-100",
-    "--spectrum-component-top-to-text-200",
-    "--spectrum-component-top-to-text-75",
-    "--spectrum-component-top-to-workflow-icon-100",
-    "--spectrum-component-top-to-workflow-icon-200",
-    "--spectrum-component-top-to-workflow-icon-75",
-    "--spectrum-corner-radius-medium-size-large",
-    "--spectrum-corner-radius-medium-size-medium",
-    "--spectrum-corner-radius-medium-size-small",
-    "--spectrum-cross-icon-size-100",
-    "--spectrum-cross-icon-size-200",
-    "--spectrum-cross-icon-size-75",
-    "--spectrum-default-font-style",
-    "--spectrum-disabled-background-color",
-    "--spectrum-disabled-content-color",
-    "--spectrum-downstate-height",
-    "--spectrum-downstate-width",
-    "--spectrum-focus-indicator-color",
-    "--spectrum-focus-indicator-gap",
-    "--spectrum-focus-indicator-thickness",
-    "--spectrum-font-size-100",
-    "--spectrum-font-size-200",
-    "--spectrum-font-size-75",
-    "--spectrum-gray-100",
-    "--spectrum-gray-200",
-    "--spectrum-gray-25",
-    "--spectrum-line-height-100",
-    "--spectrum-medium-font-weight",
-    "--spectrum-neutral-background-color-default",
-    "--spectrum-neutral-background-color-down",
-    "--spectrum-neutral-background-color-hover",
-    "--spectrum-neutral-background-color-key-focus",
-    "--spectrum-neutral-content-color-default",
-    "--spectrum-neutral-content-color-down",
-    "--spectrum-neutral-content-color-hover",
-    "--spectrum-neutral-content-color-key-focus",
-    "--spectrum-sans-font-family-stack",
-    "--spectrum-text-to-visual-100",
-    "--spectrum-text-to-visual-200",
-    "--spectrum-text-to-visual-75",
-    "--spectrum-thumbnail-opacity-disabled",
-    "--spectrum-thumbnail-size-100",
-    "--spectrum-thumbnail-size-50",
-    "--spectrum-thumbnail-size-75",
-    "--spectrum-white",
-    "--spectrum-workflow-icon-size-100",
-    "--spectrum-workflow-icon-size-200",
-    "--spectrum-workflow-icon-size-75"
-  ],
-  "passthroughs": [
-    "--mod-avatar-block-size",
-    "--mod-avatar-inline-size",
-    "--mod-avatar-opacity-disabled",
-    "--mod-clear-button-background-color",
-    "--mod-clear-button-height",
-    "--mod-clear-button-icon-color",
-    "--mod-clear-button-icon-color-hover",
-    "--mod-clear-button-icon-color-key-focus",
-    "--mod-clear-button-width",
-    "--mod-icon-size",
-    "--mod-thumbnail-opacity-disabled",
-    "--mod-thumbnail-size"
+    ".spectrum-Tag.spectrum-Tag.is-disabled"
   ],
-  "high-contrast": [
-    "--highcontrast-tag-background-color",
-    "--highcontrast-tag-background-color-active",
-    "--highcontrast-tag-background-color-disabled",
-    "--highcontrast-tag-background-color-emphasized",
-    "--highcontrast-tag-background-color-emphasized-active",
-    "--highcontrast-tag-background-color-emphasized-focus",
-    "--highcontrast-tag-background-color-emphasized-hover",
-    "--highcontrast-tag-background-color-focus",
-    "--highcontrast-tag-background-color-hover",
-    "--highcontrast-tag-background-color-selected",
-    "--highcontrast-tag-background-color-selected-active",
-    "--highcontrast-tag-background-color-selected-focus",
-    "--highcontrast-tag-background-color-selected-hover",
-    "--highcontrast-tag-border-color",
-    "--highcontrast-tag-border-color-active",
-    "--highcontrast-tag-border-color-disabled",
-    "--highcontrast-tag-border-color-emphasized",
-    "--highcontrast-tag-border-color-focus",
-    "--highcontrast-tag-border-color-hover",
-    "--highcontrast-tag-border-color-selected",
-    "--highcontrast-tag-content-color",
-    "--highcontrast-tag-content-color-active",
-    "--highcontrast-tag-content-color-disabled",
-    "--highcontrast-tag-content-color-emphasized",
-    "--highcontrast-tag-content-color-focus",
-    "--highcontrast-tag-content-color-hover",
-    "--highcontrast-tag-content-color-selected",
-    "--highcontrast-tag-focus-ring-color"
-  ]
+  "modifiers": {
+    "mod-tag-border-color": {
+      "description": "Used by `--spectrum-tag-border-color`.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tag-border-color-hover": {
+      "description": "Used by `--spectrum-tag-border-color-hover`.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tag-border-color-active": {
+      "description": "Used by `--spectrum-tag-border-color-active`.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tag-border-color-focus": {
+      "description": "Used by `--spectrum-tag-border-color-focus`.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tag-background-color": {
+      "description": "Used by `--spectrum-tag-background-color`. <br/>Defaults to `var(--spectrum-gray-100)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tag-background-color-hover": {
+      "description": "Used by `--spectrum-tag-background-color-hover`. <br/>Defaults to `var(--spectrum-gray-200)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tag-background-color-active": {
+      "description": "Used by `--spectrum-tag-background-color-active`. <br/>Defaults to `var(--spectrum-gray-200)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tag-background-color-focus": {
+      "description": "Used by `--spectrum-tag-background-color-focus`. <br/>Defaults to `var(--spectrum-gray-200)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tag-content-color": {
+      "description": "Used by `--spectrum-tag-content-color`. <br/>Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tag-content-color-hover": {
+      "description": "Used by `--spectrum-tag-content-color-hover`. <br/>Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tag-content-color-active": {
+      "description": "Used by `--spectrum-tag-content-color-active`. <br/>Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tag-content-color-focus": {
+      "description": "Used by `--spectrum-tag-content-color-focus`. <br/>Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tag-focus-ring-color": {
+      "description": "Used by `--spectrum-tag-focus-ring-color`. <br/>Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tag-avatar-size": {
+      "description": "Used by `--mod-avatar-inline-size`, `--mod-avatar-block-size`. <br/>Defaults to `var(--spectrum-tag-avatar-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tag-thumbnail-size": {
+      "description": "Used by `--mod-thumbnail-size`. <br/>Defaults to `var(--spectrum-tag-thumbnail-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tag-clear-button-size": {
+      "description": "Used by `--mod-icon-size`, `--mod-clear-button-width`, `--mod-clear-button-height`. <br/>Defaults to `var(--spectrum-tag-clear-button-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tag-label-to-clear-icon": {
+      "description": "Used by `--mod-clear-button-width`. <br/>Defaults to `var(--spectrum-tag-label-to-clear-icon)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tag-edge-to-clear-icon": {
+      "description": "Used by `--mod-clear-button-width`. <br/>Defaults to `var(--spectrum-tag-edge-to-clear-icon)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tag-clear-button-spacing-block": {
+      "description": "Used by `--mod-clear-button-height`. <br/>Defaults to `var(--spectrum-tag-clear-button-spacing-block)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tag-label-line-height": {
+      "description": "Defined in `.spectrum-Tag:lang(ja), .spectrum-Tag:lang(ko), .spectrum-Tag:lang(zh)`. <br/>Used by `.spectrum-Tag .spectrum-Tag-itemLabel`. <br/>Defaults to `var(--spectrum-tag-label-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tag-label-line-height-cjk": {
+      "description": "Used by `--mod-tag-label-line-height`. <br/>Defaults to `var(--spectrum-tag-label-line-height-cjk)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tag-border-color-selected": {
+      "description": "Used by `--spectrum-tag-border-color`, `--spectrum-tag-border-color-hover`, `--spectrum-tag-border-color-active`, `--spectrum-tag-border-color-focus`.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tag-background-color-selected": {
+      "description": "Used by `--spectrum-tag-background-color`. <br/>Defaults to `var(--spectrum-neutral-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tag-content-color-selected": {
+      "description": "Used by `--spectrum-tag-content-color`, `--spectrum-tag-content-color-hover`, `--spectrum-tag-content-color-active`, `--spectrum-tag-content-color-focus`. <br/>Defaults to `var(--spectrum-gray-25)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tag-background-color-selected-hover": {
+      "description": "Used by `--spectrum-tag-background-color-hover`. <br/>Defaults to `var(--spectrum-neutral-background-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tag-background-color-selected-active": {
+      "description": "Used by `--spectrum-tag-background-color-active`. <br/>Defaults to `var(--spectrum-neutral-background-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tag-background-color-selected-focus": {
+      "description": "Used by `--spectrum-tag-background-color-focus`. <br/>Defaults to `var(--spectrum-neutral-background-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tag-border-color-emphasized": {
+      "description": "Used by `--spectrum-tag-border-color`, `--spectrum-tag-border-color-hover`, `--spectrum-tag-border-color-active`, `--spectrum-tag-border-color-focus`.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tag-background-color-emphasized": {
+      "description": "Used by `--spectrum-tag-background-color`. <br/>Defaults to `var(--spectrum-accent-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tag-content-color-emphasized": {
+      "description": "Used by `--spectrum-tag-content-color`, `--spectrum-tag-content-color-hover`, `--spectrum-tag-content-color-active`, `--spectrum-tag-content-color-focus`. <br/>Defaults to `var(--spectrum-white)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tag-background-color-emphasized-hover": {
+      "description": "Used by `--spectrum-tag-background-color-hover`. <br/>Defaults to `var(--spectrum-accent-background-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tag-background-color-emphasized-active": {
+      "description": "Used by `--spectrum-tag-background-color-active`. <br/>Defaults to `var(--spectrum-accent-background-color-down)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tag-background-color-emphasized-focus": {
+      "description": "Used by `--spectrum-tag-background-color-focus`. <br/>Defaults to `var(--spectrum-accent-background-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tag-border-color-disabled": {
+      "description": "Used by `--spectrum-tag-border-color`.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tag-background-color-disabled": {
+      "description": "Used by `--spectrum-tag-background-color`. <br/>Defaults to `var(--spectrum-disabled-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tag-content-color-disabled": {
+      "description": "Used by `--spectrum-tag-content-color`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tag-corner-radius": {
+      "description": "Used by `.spectrum-Tag`, `.spectrum-Tag:not(.is-disabled, .is-readOnly):focus-visible:after`. <br/>Defaults to `var(--spectrum-tag-corner-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tag-border-width": {
+      "description": "Used by `.spectrum-Tag`, `.spectrum-Tag .spectrum-Tag-itemIcon`, `.spectrum-Tag .spectrum-Avatar`, `.spectrum-Tag .spectrum-Tag-clearButton`, `.spectrum-Tag .spectrum-Tag-itemLabel`, `.spectrum-Tag:not(.is-disabled, .is-readOnly):focus-visible:after`. <br/>Defaults to `var(--spectrum-tag-border-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tag-label-spacing-inline": {
+      "description": "Used by `.spectrum-Tag`, `.spectrum-Tag .spectrum-Avatar, .spectrum-Tag .spectrum-Tag-itemIcon, .spectrum-Tag .spectrum-Thumbnail`, `.spectrum-Tag .spectrum-Tag-clearButton`, `.spectrum-Tag .spectrum-Tag-itemLabel`. <br/>Defaults to `var(--spectrum-tag-label-spacing-inline)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tag-height": {
+      "description": "Used by `.spectrum-Tag`. <br/>Defaults to `var(--spectrum-tag-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tag-min-inline-size": {
+      "description": "Used by `.spectrum-Tag`. <br/>Defaults to `var(--spectrum-tag-min-inline-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tag-maximum-width-multiplier": {
+      "description": "Used by `.spectrum-Tag`. <br/>Defaults to `var(--spectrum-tag-maximum-width-multiplier)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tag-animation-duration": {
+      "description": "Used by `.spectrum-Tag`. <br/>Defaults to `var(--spectrum-tag-animation-duration)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tag-icon-size": {
+      "description": "Used by `.spectrum-Tag .spectrum-Tag-itemIcon`. <br/>Defaults to `var(--spectrum-tag-icon-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tag-icon-spacing-block-start": {
+      "description": "Used by `.spectrum-Tag .spectrum-Tag-itemIcon`. <br/>Defaults to `var(--spectrum-tag-icon-spacing-block-start)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tag-icon-spacing-block-end": {
+      "description": "Used by `.spectrum-Tag .spectrum-Tag-itemIcon`. <br/>Defaults to `var(--spectrum-tag-icon-spacing-block-end)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tag-avatar-spacing-block-start": {
+      "description": "Used by `.spectrum-Tag .spectrum-Avatar`. <br/>Defaults to `var(--spectrum-tag-avatar-spacing-block-start)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tag-avatar-spacing-block-end": {
+      "description": "Used by `.spectrum-Tag .spectrum-Avatar`. <br/>Defaults to `var(--spectrum-tag-avatar-spacing-block-end)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tag-visual-spacing-inline-start": {
+      "description": "Used by `.spectrum-Tag .spectrum-Avatar, .spectrum-Tag .spectrum-Tag-itemIcon, .spectrum-Tag .spectrum-Thumbnail`. <br/>Defaults to `var(--spectrum-tag-visual-spacing-inline-start)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tag-visual-spacing-inline-end": {
+      "description": "Used by `.spectrum-Tag .spectrum-Avatar, .spectrum-Tag .spectrum-Tag-itemIcon, .spectrum-Tag .spectrum-Thumbnail`. <br/>Defaults to `var(--spectrum-tag-visual-spacing-inline-end)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tag-label-font-family": {
+      "description": "Used by `.spectrum-Tag .spectrum-Tag-itemLabel`. <br/>Defaults to `var(--spectrum-tag-label-font-family)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tag-label-font-style": {
+      "description": "Used by `.spectrum-Tag .spectrum-Tag-itemLabel`. <br/>Defaults to `var(--spectrum-tag-label-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tag-label-font-weight": {
+      "description": "Used by `.spectrum-Tag .spectrum-Tag-itemLabel`. <br/>Defaults to `var(--spectrum-tag-label-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tag-font-size": {
+      "description": "Used by `.spectrum-Tag .spectrum-Tag-itemLabel`. <br/>Defaults to `var(--spectrum-tag-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tag-label-spacing-block": {
+      "description": "Used by `.spectrum-Tag .spectrum-Tag-itemLabel`. <br/>Defaults to `var(--spectrum-tag-label-spacing-block)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tag-focus-ring-gap": {
+      "description": "Used by `.spectrum-Tag:not(.is-disabled, .is-readOnly):focus-visible:after`. <br/>Defaults to `var(--spectrum-tag-focus-ring-gap)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tag-focus-ring-thickness": {
+      "description": "Used by `.spectrum-Tag:not(.is-disabled, .is-readOnly):focus-visible:after`. <br/>Defaults to `var(--spectrum-tag-focus-ring-thickness)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-tag-animation-duration": {
+      "value": "var(--spectrum-animation-duration-100)",
+      "description": "Defined in `.spectrum-Tag`. <br/>Used by `.spectrum-Tag`. <br/>Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-border-width": {
+      "value": "1px",
+      "description": "Defined in `.spectrum-Tag`. <br/>Used by `.spectrum-Tag`, `.spectrum-Tag .spectrum-Tag-itemIcon`, `.spectrum-Tag .spectrum-Avatar`, `.spectrum-Tag .spectrum-Tag-clearButton`, `.spectrum-Tag .spectrum-Tag-itemLabel`, `.spectrum-Tag:not(.is-disabled, .is-readOnly):focus-visible:after`. <br/>Defaults to `var(--spectrum-border-width-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-border-color": {
+      "value": "var(--highcontrast-tag-border-color-disabled, var(--mod-tag-border-color-disabled, transparent))",
+      "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly)`, `.spectrum-Tag.spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly)`, `.spectrum-Tag.spectrum-Tag.is-disabled`. <br/>Used by `.spectrum-Tag`. <br/>Defaults to `var(--highcontrast-tag-border-color-disabled, var(--mod-tag-border-color-disabled, transparent))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-tag-border-color-hover": {
+      "value": "var(--highcontrast-tag-border-color-emphasized, var(--mod-tag-border-color-emphasized, transparent))",
+      "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly)`, `.spectrum-Tag.spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly)`. <br/>Used by `.spectrum-Tag:not(.is-disabled, .is-readOnly):hover`. <br/>Defaults to `var(--highcontrast-tag-border-color-emphasized, var(--mod-tag-border-color-emphasized, transparent))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-tag-border-color-active": {
+      "value": "var(--highcontrast-tag-border-color-emphasized, var(--mod-tag-border-color-emphasized, transparent))",
+      "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly)`, `.spectrum-Tag.spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly)`. <br/>Used by `.spectrum-Tag:not(.is-disabled, .is-readOnly):active`. <br/>Defaults to `var(--highcontrast-tag-border-color-emphasized, var(--mod-tag-border-color-emphasized, transparent))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-tag-border-color-focus": {
+      "value": "var(--highcontrast-tag-border-color-emphasized, var(--mod-tag-border-color-emphasized, transparent))",
+      "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly)`, `.spectrum-Tag.spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly)`. <br/>Used by `.spectrum-Tag:not(.is-disabled, .is-readOnly):focus-visible`. <br/>Defaults to `var(--highcontrast-tag-border-color-emphasized, var(--mod-tag-border-color-emphasized, transparent))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-tag-background-color": {
+      "value": "var(--highcontrast-tag-background-color-disabled, var(--mod-tag-background-color-disabled, var(--spectrum-disabled-background-color)))",
+      "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly)`, `.spectrum-Tag.spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly)`, `.spectrum-Tag.spectrum-Tag.is-disabled`. <br/>Used by `.spectrum-Tag`. <br/>Defaults to `var(--highcontrast-tag-background-color-disabled, var(--mod-tag-background-color-disabled, var(--spectrum-disabled-background-color)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-tag-background-color-hover": {
+      "value": "var(--highcontrast-tag-background-color-emphasized-hover, var(--mod-tag-background-color-emphasized-hover, var(--spectrum-accent-background-color-hover)))",
+      "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly)`, `.spectrum-Tag.spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly)`. <br/>Used by `.spectrum-Tag:not(.is-disabled, .is-readOnly):hover`. <br/>Defaults to `var(--highcontrast-tag-background-color-emphasized-hover, var(--mod-tag-background-color-emphasized-hover, var(--spectrum-accent-background-color-hover)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-tag-background-color-active": {
+      "value": "var(--highcontrast-tag-background-color-emphasized-active, var(--mod-tag-background-color-emphasized-active, var(--spectrum-accent-background-color-down)))",
+      "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly)`, `.spectrum-Tag.spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly)`. <br/>Used by `.spectrum-Tag:not(.is-disabled, .is-readOnly):active`. <br/>Defaults to `var(--highcontrast-tag-background-color-emphasized-active, var(--mod-tag-background-color-emphasized-active, var(--spectrum-accent-background-color-down)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-tag-background-color-focus": {
+      "value": "var(--highcontrast-tag-background-color-emphasized-focus, var(--mod-tag-background-color-emphasized-focus, var(--spectrum-accent-background-color-key-focus)))",
+      "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly)`, `.spectrum-Tag.spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly)`. <br/>Used by `.spectrum-Tag:not(.is-disabled, .is-readOnly):focus-visible`. <br/>Defaults to `var(--highcontrast-tag-background-color-emphasized-focus, var(--mod-tag-background-color-emphasized-focus, var(--spectrum-accent-background-color-key-focus)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-tag-content-color": {
+      "value": "var(--highcontrast-tag-content-color-disabled, var(--mod-tag-content-color-disabled, var(--spectrum-disabled-content-color)))",
+      "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly)`, `.spectrum-Tag.spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly)`, `.spectrum-Tag.spectrum-Tag.is-disabled`. <br/>Used by `.spectrum-Tag`. <br/>Defaults to `var(--highcontrast-tag-content-color-disabled, var(--mod-tag-content-color-disabled, var(--spectrum-disabled-content-color)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-tag-content-color-hover": {
+      "value": "var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-white)))",
+      "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly)`, `.spectrum-Tag.spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly)`. <br/>Used by `.spectrum-Tag:not(.is-disabled, .is-readOnly):hover`. <br/>Defaults to `var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-white)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-tag-content-color-active": {
+      "value": "var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-white)))",
+      "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly)`, `.spectrum-Tag.spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly)`. <br/>Used by `.spectrum-Tag:not(.is-disabled, .is-readOnly):active`. <br/>Defaults to `var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-white)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-tag-content-color-focus": {
+      "value": "var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-white)))",
+      "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly)`, `.spectrum-Tag.spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly)`. <br/>Used by `.spectrum-Tag:not(.is-disabled, .is-readOnly):focus-visible`. <br/>Defaults to `var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-white)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-tag-focus-ring-thickness": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Tag`. <br/>Used by `.spectrum-Tag:not(.is-disabled, .is-readOnly):focus-visible:after`. <br/>Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-focus-ring-gap": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Tag`. <br/>Used by `.spectrum-Tag:not(.is-disabled, .is-readOnly):focus-visible:after`. <br/>Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-focus-ring-color": {
+      "value": "var(--highcontrast-tag-focus-ring-color, var(--mod-tag-focus-ring-color, var(--spectrum-focus-indicator-color)))",
+      "description": "Defined in `.spectrum-Tag`. <br/>Used by `.spectrum-Tag:not(.is-disabled, .is-readOnly):focus-visible:after`. <br/>Defaults to `var(--highcontrast-tag-focus-ring-color, var(--mod-tag-focus-ring-color, var(--spectrum-focus-indicator-color)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-tag-label-line-height": {
+      "value": "1.3",
+      "description": "Defined in `.spectrum-Tag`. <br/>Used by `.spectrum-Tag .spectrum-Tag-itemLabel`. <br/>Defaults to `var(--spectrum-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-label-line-height-cjk": {
+      "value": "1.5",
+      "description": "Defined in `.spectrum-Tag`. <br/>Used by `--mod-tag-label-line-height`. <br/>Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-label-font-family": {
+      "value": "var(--spectrum-sans-font-family-stack)",
+      "description": "Defined in `.spectrum-Tag`. <br/>Used by `.spectrum-Tag .spectrum-Tag-itemLabel`. <br/>Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-label-font-style": {
+      "value": "normal",
+      "description": "Defined in `.spectrum-Tag`. <br/>Used by `.spectrum-Tag .spectrum-Tag-itemLabel`. <br/>Defaults to `var(--spectrum-default-font-style)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-label-font-weight": {
+      "value": "500",
+      "description": "Defined in `.spectrum-Tag`. <br/>Used by `.spectrum-Tag .spectrum-Tag-itemLabel`. <br/>Defaults to `var(--spectrum-medium-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-height": {
+      "value": "40px",
+      "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag--sizeM`, `.spectrum-Tag--sizeL`. <br/>Used by `.spectrum-Tag`. <br/>Defaults to `var(--spectrum-component-height-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-min-inline-size": {
+      "value": "33px",
+      "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag--sizeM`, `.spectrum-Tag--sizeL`. <br/>Used by `.spectrum-Tag`. <br/>Defaults to `var(--spectrum-tag-minimum-width-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-minimum-width-small": {
+      "value": "21px",
+      "description": "Used by `--spectrum-tag-min-inline-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-font-size": {
+      "value": "16px",
+      "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag--sizeM`, `.spectrum-Tag--sizeL`. <br/>Used by `.spectrum-Tag .spectrum-Tag-itemLabel`. <br/>Defaults to `var(--spectrum-font-size-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-icon-size": {
+      "value": "22px",
+      "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag--sizeM`, `.spectrum-Tag--sizeL`. <br/>Used by `.spectrum-Tag .spectrum-Tag-itemIcon`. <br/>Defaults to `var(--spectrum-workflow-icon-size-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-corner-radius": {
+      "value": "9px",
+      "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag--sizeM`, `.spectrum-Tag--sizeL`. <br/>Used by `.spectrum-Tag`, `.spectrum-Tag:not(.is-disabled, .is-readOnly):focus-visible:after`. <br/>Defaults to `var(--spectrum-corner-radius-medium-size-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-clear-button-size": {
+      "value": "10px",
+      "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag--sizeM`, `.spectrum-Tag--sizeL`. <br/>Used by `--mod-icon-size`, `--mod-clear-button-width`, `--mod-clear-button-height`. <br/>Defaults to `var(--spectrum-cross-icon-size-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-clear-button-spacing-block": {
+      "value": "15px",
+      "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag--sizeM`, `.spectrum-Tag--sizeL`. <br/>Used by `--mod-clear-button-height`. <br/>Defaults to `var(--spectrum-tag-top-to-cross-icon-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-top-to-cross-icon-small": {
+      "value": "8px",
+      "description": "Used by `--spectrum-tag-clear-button-spacing-block`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-label-to-clear-icon": {
+      "value": "15px",
+      "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag--sizeM`, `.spectrum-Tag--sizeL`. <br/>Used by `--mod-clear-button-width`. <br/>Defaults to `var(--spectrum-tag-label-to-clear-icon-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-label-to-clear-icon-small": {
+      "value": "8px",
+      "description": "Used by `--spectrum-tag-label-to-clear-icon`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-edge-to-clear-icon": {
+      "value": "15px",
+      "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag--sizeM`, `.spectrum-Tag--sizeL`. <br/>Used by `--mod-clear-button-width`. <br/>Defaults to `var(--spectrum-tag-edge-to-clear-icon-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-edge-to-clear-icon-small": {
+      "value": "8px",
+      "description": "Used by `--spectrum-tag-edge-to-clear-icon`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-visual-spacing-inline-start": {
+      "value": "13px",
+      "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag--sizeM`, `.spectrum-Tag--sizeL`. <br/>Used by `.spectrum-Tag .spectrum-Avatar, .spectrum-Tag .spectrum-Tag-itemIcon, .spectrum-Tag .spectrum-Thumbnail`. <br/>Defaults to `var(--spectrum-component-edge-to-visual-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-visual-spacing-inline-end": {
+      "value": "7px",
+      "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag--sizeM`, `.spectrum-Tag--sizeL`. <br/>Used by `.spectrum-Tag .spectrum-Avatar, .spectrum-Tag .spectrum-Tag-itemIcon, .spectrum-Tag .spectrum-Thumbnail`. <br/>Defaults to `var(--spectrum-text-to-visual-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-icon-spacing-block-start": {
+      "value": "9px",
+      "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag--sizeM`, `.spectrum-Tag--sizeL`. <br/>Used by `.spectrum-Tag .spectrum-Tag-itemIcon`. <br/>Defaults to `var(--spectrum-component-top-to-workflow-icon-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-icon-spacing-block-end": {
+      "value": "9px",
+      "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag--sizeM`, `.spectrum-Tag--sizeL`. <br/>Used by `.spectrum-Tag .spectrum-Tag-itemIcon`. <br/>Defaults to `var(--spectrum-component-top-to-workflow-icon-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-avatar-size": {
+      "value": "24px",
+      "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag--sizeM`, `.spectrum-Tag--sizeL`. <br/>Used by `--mod-avatar-inline-size`, `--mod-avatar-block-size`. <br/>Defaults to `var(--spectrum-avatar-size-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-avatar-spacing-block-start": {
+      "value": "9px",
+      "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag--sizeM`, `.spectrum-Tag--sizeL`. <br/>Used by `.spectrum-Tag .spectrum-Avatar`. <br/>Defaults to `var(--spectrum-tag-top-to-avatar-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-top-to-avatar-small": {
+      "value": "4px",
+      "description": "Used by `--spectrum-tag-avatar-spacing-block-start`, `--spectrum-tag-avatar-spacing-block-end`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-avatar-spacing-block-end": {
+      "value": "9px",
+      "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag--sizeM`, `.spectrum-Tag--sizeL`. <br/>Used by `.spectrum-Tag .spectrum-Avatar`. <br/>Defaults to `var(--spectrum-tag-top-to-avatar-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-thumbnail-size": {
+      "value": "24px",
+      "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag--sizeM`, `.spectrum-Tag--sizeL`. <br/>Used by `--mod-thumbnail-size`. <br/>Defaults to `var(--spectrum-thumbnail-size-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-label-spacing-block": {
+      "value": "9px",
+      "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag--sizeM`, `.spectrum-Tag--sizeL`. <br/>Used by `.spectrum-Tag .spectrum-Tag-itemLabel`. <br/>Defaults to `var(--spectrum-component-top-to-text-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-label-spacing-inline": {
+      "value": "15px",
+      "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag--sizeM`, `.spectrum-Tag--sizeL`. <br/>Used by `.spectrum-Tag`, `.spectrum-Tag .spectrum-Avatar, .spectrum-Tag .spectrum-Tag-itemIcon, .spectrum-Tag .spectrum-Thumbnail`, `.spectrum-Tag .spectrum-Tag-clearButton`, `.spectrum-Tag .spectrum-Tag-itemLabel`. <br/>Defaults to `var(--spectrum-component-edge-to-text-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-minimum-width-medium": {
+      "value": "27px",
+      "description": "Used by `--spectrum-tag-min-inline-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-top-to-cross-icon-medium": {
+      "value": "12px",
+      "description": "Used by `--spectrum-tag-clear-button-spacing-block`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-label-to-clear-icon-medium": {
+      "value": "12px",
+      "description": "Used by `--spectrum-tag-label-to-clear-icon`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-edge-to-clear-icon-medium": {
+      "value": "12px",
+      "description": "Used by `--spectrum-tag-edge-to-clear-icon`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-top-to-avatar-medium": {
+      "value": "6px",
+      "description": "Used by `--spectrum-tag-avatar-spacing-block-start`, `--spectrum-tag-avatar-spacing-block-end`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-minimum-width-large": {
+      "value": "33px",
+      "description": "Used by `--spectrum-tag-min-inline-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-top-to-cross-icon-large": {
+      "value": "15px",
+      "description": "Used by `--spectrum-tag-clear-button-spacing-block`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-label-to-clear-icon-large": {
+      "value": "15px",
+      "description": "Used by `--spectrum-tag-label-to-clear-icon`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-edge-to-clear-icon-large": {
+      "value": "15px",
+      "description": "Used by `--spectrum-tag-edge-to-clear-icon`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-top-to-avatar-large": {
+      "value": "9px",
+      "description": "Used by `--spectrum-tag-avatar-spacing-block-start`, `--spectrum-tag-avatar-spacing-block-end`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-maximum-width-multiplier": {
+      "value": "7",
+      "description": "Used by `.spectrum-Tag`.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-animation-duration-100": {
+      "description": "Used by `--spectrum-tag-animation-duration`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-border-width-100": {
+      "value": "1px",
+      "description": "Used by `--spectrum-tag-border-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-100": {
+      "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+      "description": "Used by `--spectrum-tag-background-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-200": {
+      "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+      "description": "Used by `--spectrum-tag-background-color-hover`, `--spectrum-tag-background-color-active`, `--spectrum-tag-background-color-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-tag-content-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-tag-content-color-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-down": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-tag-content-color-active`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-key-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-tag-content-color-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Used by `--spectrum-tag-focus-ring-thickness`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-gap": {
+      "value": "2px",
+      "description": "Used by `--spectrum-tag-focus-ring-gap`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Used by `--spectrum-tag-focus-ring-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-line-height-100": {
+      "value": "1.3",
+      "description": "Used by `--spectrum-tag-label-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-cjk-line-height-100": {
+      "value": "1.5",
+      "description": "Used by `--spectrum-tag-label-line-height-cjk`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-sans-font-family-stack": {
+      "description": "Used by `--spectrum-tag-label-font-family`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-default-font-style": {
+      "value": "normal",
+      "description": "Used by `--spectrum-tag-label-font-style`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-medium-font-weight": {
+      "value": "500",
+      "description": "Used by `--spectrum-tag-label-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-75": {
+      "value": "24px",
+      "description": "Used by `--spectrum-tag-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-75": {
+      "value": "12px",
+      "description": "Used by `--spectrum-tag-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-75": {
+      "value": "16px",
+      "description": "Used by `--spectrum-tag-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-medium-size-small": {
+      "value": "7px",
+      "description": "Used by `--spectrum-tag-corner-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-cross-icon-size-75": {
+      "value": "8px",
+      "description": "Used by `--spectrum-tag-clear-button-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-visual-75": {
+      "value": "7px",
+      "description": "Used by `--spectrum-tag-visual-spacing-inline-start`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-75": {
+      "value": "5px",
+      "description": "Used by `--spectrum-tag-visual-spacing-inline-end`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-workflow-icon-75": {
+      "value": "4px",
+      "description": "Used by `--spectrum-tag-icon-spacing-block-start`, `--spectrum-tag-icon-spacing-block-end`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-avatar-size-50": {
+      "value": "16px",
+      "description": "Used by `--spectrum-tag-avatar-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-thumbnail-size-50": {
+      "value": "16px",
+      "description": "Used by `--spectrum-tag-thumbnail-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-75": {
+      "value": "4px",
+      "description": "Used by `--spectrum-tag-label-spacing-block`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-text-75": {
+      "value": "9px",
+      "description": "Used by `--spectrum-tag-label-spacing-inline`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-background-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-tag-background-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-gray-25": {
+      "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+      "description": "Used by `--spectrum-tag-content-color`, `--spectrum-tag-content-color-hover`, `--spectrum-tag-content-color-active`, `--spectrum-tag-content-color-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-background-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-tag-background-color-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-background-color-down": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-tag-background-color-active`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-background-color-key-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-tag-background-color-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-accent-background-color-default": {
+      "value": "var(--spectrum-accent-color-900)",
+      "description": "Used by `--spectrum-tag-background-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-white": {
+      "value": "rgb(255, 255, 255)",
+      "description": "Used by `--spectrum-tag-content-color`, `--spectrum-tag-content-color-hover`, `--spectrum-tag-content-color-active`, `--spectrum-tag-content-color-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-accent-background-color-hover": {
+      "value": "var(--spectrum-accent-color-1000)",
+      "description": "Used by `--spectrum-tag-background-color-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-accent-background-color-down": {
+      "value": "var(--spectrum-accent-color-1000)",
+      "description": "Used by `--spectrum-tag-background-color-active`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-accent-background-color-key-focus": {
+      "value": "var(--spectrum-accent-color-1000)",
+      "description": "Used by `--spectrum-tag-background-color-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-disabled-background-color": {
+      "value": "var(--spectrum-gray-100)",
+      "description": "Used by `--spectrum-tag-background-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-disabled-content-color": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Used by `--spectrum-tag-content-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-component-height-100": {
+      "value": "32px",
+      "description": "Used by `--spectrum-tag-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-100": {
+      "value": "14px",
+      "description": "Used by `--spectrum-tag-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-100": {
+      "value": "20px",
+      "description": "Used by `--spectrum-tag-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-medium-size-medium": {
+      "value": "8px",
+      "description": "Used by `--spectrum-tag-corner-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-cross-icon-size-100": {
+      "value": "8px",
+      "description": "Used by `--spectrum-tag-clear-button-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-visual-100": {
+      "value": "10px",
+      "description": "Used by `--spectrum-tag-visual-spacing-inline-start`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-tag-visual-spacing-inline-end`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-workflow-icon-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-tag-icon-spacing-block-start`, `--spectrum-tag-icon-spacing-block-end`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-avatar-size-75": {
+      "value": "20px",
+      "description": "Used by `--spectrum-tag-avatar-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-thumbnail-size-75": {
+      "value": "20px",
+      "description": "Used by `--spectrum-tag-thumbnail-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-tag-label-spacing-block`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-text-100": {
+      "value": "12px",
+      "description": "Used by `--spectrum-tag-label-spacing-inline`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-200": {
+      "value": "40px",
+      "description": "Used by `--spectrum-tag-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-200": {
+      "value": "16px",
+      "description": "Used by `--spectrum-tag-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-200": {
+      "value": "22px",
+      "description": "Used by `--spectrum-tag-icon-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-medium-size-large": {
+      "value": "9px",
+      "description": "Used by `--spectrum-tag-corner-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-cross-icon-size-200": {
+      "value": "10px",
+      "description": "Used by `--spectrum-tag-clear-button-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-visual-200": {
+      "value": "13px",
+      "description": "Used by `--spectrum-tag-visual-spacing-inline-start`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-200": {
+      "value": "7px",
+      "description": "Used by `--spectrum-tag-visual-spacing-inline-end`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-workflow-icon-200": {
+      "value": "9px",
+      "description": "Used by `--spectrum-tag-icon-spacing-block-start`, `--spectrum-tag-icon-spacing-block-end`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-avatar-size-100": {
+      "value": "24px",
+      "description": "Used by `--spectrum-tag-avatar-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-thumbnail-size-100": {
+      "value": "24px",
+      "description": "Used by `--spectrum-tag-thumbnail-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-200": {
+      "value": "9px",
+      "description": "Used by `--spectrum-tag-label-spacing-block`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-text-200": {
+      "value": "15px",
+      "description": "Used by `--spectrum-tag-label-spacing-inline`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-downstate-height": {
+      "description": "Used by `.spectrum-Tag:not(.is-disabled, .is-readOnly):active`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-downstate-width": {
+      "description": "Used by `.spectrum-Tag:not(.is-disabled, .is-readOnly):active`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-size-width-ratio-down": {
+      "value": "0.3333",
+      "description": "Used by `.spectrum-Tag:not(.is-disabled, .is-readOnly):active`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-size-difference-down": {
+      "value": "-2px",
+      "description": "Used by `.spectrum-Tag:not(.is-disabled, .is-readOnly):active`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-avatar-opacity-disabled": {
+      "value": "0.3",
+      "description": "Used by `.spectrum-Tag.is-disabled .spectrum-Avatar`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-thumbnail-opacity-disabled": {
+      "value": "0.3",
+      "description": "Used by `.spectrum-Tag.is-disabled .spectrum-Thumbnail`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {
+    "mod-avatar-inline-size": {
+      "category": "Passthrough"
+    },
+    "mod-avatar-block-size": {
+      "category": "Passthrough"
+    },
+    "mod-thumbnail-size": {
+      "category": "Passthrough"
+    },
+    "mod-clear-button-background-color": {
+      "category": "Passthrough"
+    },
+    "mod-clear-button-icon-color": {
+      "category": "Passthrough"
+    },
+    "mod-clear-button-icon-color-hover": {
+      "category": "Passthrough"
+    },
+    "mod-clear-button-icon-color-key-focus": {
+      "category": "Passthrough"
+    },
+    "mod-icon-size": {
+      "category": "Passthrough"
+    },
+    "mod-clear-button-width": {
+      "category": "Passthrough"
+    },
+    "mod-clear-button-height": {
+      "category": "Passthrough"
+    },
+    "mod-avatar-opacity-disabled": {
+      "category": "Passthrough"
+    },
+    "mod-thumbnail-opacity-disabled": {
+      "category": "Passthrough"
+    }
+  },
+  "high-contrast": {
+    "highcontrast-tag-border-color": {
+      "value": "var(--mod-tag-border-color, transparent)",
+      "description": "Defined in `.spectrum-Tag`. <br/>Used by `--spectrum-tag-border-color`. <br/>Defaults to `var(--mod-tag-border-color, transparent)`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-tag-border-color-hover": {
+      "value": "var(--mod-tag-border-color-hover, transparent)",
+      "description": "Defined in `.spectrum-Tag`. <br/>Used by `--spectrum-tag-border-color-hover`. <br/>Defaults to `var(--mod-tag-border-color-hover, transparent)`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-tag-border-color-active": {
+      "value": "var(--mod-tag-border-color-active, transparent)",
+      "description": "Defined in `.spectrum-Tag`. <br/>Used by `--spectrum-tag-border-color-active`. <br/>Defaults to `var(--mod-tag-border-color-active, transparent)`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-tag-border-color-focus": {
+      "value": "var(--mod-tag-border-color-focus, transparent)",
+      "description": "Defined in `.spectrum-Tag`. <br/>Used by `--spectrum-tag-border-color-focus`. <br/>Defaults to `var(--mod-tag-border-color-focus, transparent)`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-tag-background-color": {
+      "value": "var(--mod-tag-background-color, var(--spectrum-gray-100))",
+      "description": "Defined in `.spectrum-Tag`. <br/>Used by `--spectrum-tag-background-color`. <br/>Defaults to `var(--mod-tag-background-color, var(--spectrum-gray-100))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-tag-background-color-hover": {
+      "value": "var(--mod-tag-background-color-hover, var(--spectrum-gray-200))",
+      "description": "Defined in `.spectrum-Tag`. <br/>Used by `--spectrum-tag-background-color-hover`. <br/>Defaults to `var(--mod-tag-background-color-hover, var(--spectrum-gray-200))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-tag-background-color-active": {
+      "value": "var(--mod-tag-background-color-active, var(--spectrum-gray-200))",
+      "description": "Defined in `.spectrum-Tag`. <br/>Used by `--spectrum-tag-background-color-active`. <br/>Defaults to `var(--mod-tag-background-color-active, var(--spectrum-gray-200))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-tag-background-color-focus": {
+      "value": "var(--mod-tag-background-color-focus, var(--spectrum-gray-200))",
+      "description": "Defined in `.spectrum-Tag`. <br/>Used by `--spectrum-tag-background-color-focus`. <br/>Defaults to `var(--mod-tag-background-color-focus, var(--spectrum-gray-200))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-tag-content-color": {
+      "value": "var(--mod-tag-content-color, var(--spectrum-neutral-content-color-default))",
+      "description": "Defined in `.spectrum-Tag`. <br/>Used by `--spectrum-tag-content-color`. <br/>Defaults to `var(--mod-tag-content-color, var(--spectrum-neutral-content-color-default))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-tag-content-color-hover": {
+      "value": "var(--mod-tag-content-color-hover, var(--spectrum-neutral-content-color-hover))",
+      "description": "Defined in `.spectrum-Tag`. <br/>Used by `--spectrum-tag-content-color-hover`. <br/>Defaults to `var(--mod-tag-content-color-hover, var(--spectrum-neutral-content-color-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-tag-content-color-active": {
+      "value": "var(--mod-tag-content-color-active, var(--spectrum-neutral-content-color-down))",
+      "description": "Defined in `.spectrum-Tag`. <br/>Used by `--spectrum-tag-content-color-active`. <br/>Defaults to `var(--mod-tag-content-color-active, var(--spectrum-neutral-content-color-down))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-tag-content-color-focus": {
+      "value": "var(--mod-tag-content-color-focus, var(--spectrum-neutral-content-color-key-focus))",
+      "description": "Defined in `.spectrum-Tag`. <br/>Used by `--spectrum-tag-content-color-focus`. <br/>Defaults to `var(--mod-tag-content-color-focus, var(--spectrum-neutral-content-color-key-focus))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-tag-focus-ring-color": {
+      "value": "var(--mod-tag-focus-ring-color, var(--spectrum-focus-indicator-color))",
+      "description": "Defined in `.spectrum-Tag`. <br/>Used by `--spectrum-tag-focus-ring-color`. <br/>Defaults to `var(--mod-tag-focus-ring-color, var(--spectrum-focus-indicator-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-tag-border-color-selected": {
+      "value": "var(--mod-tag-border-color-selected, transparent)",
+      "description": "Defined in `.spectrum-Tag.is-selected`. <br/>Used by `--spectrum-tag-border-color`, `--spectrum-tag-border-color-hover`, `--spectrum-tag-border-color-active`, `--spectrum-tag-border-color-focus`. <br/>Defaults to `var(--mod-tag-border-color-selected, transparent)`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-tag-background-color-selected": {
+      "value": "var(--mod-tag-background-color-selected, var(--spectrum-neutral-background-color-default))",
+      "description": "Defined in `.spectrum-Tag.is-selected`. <br/>Used by `--spectrum-tag-background-color`. <br/>Defaults to `var(--mod-tag-background-color-selected, var(--spectrum-neutral-background-color-default))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-tag-content-color-selected": {
+      "value": "var(--mod-tag-content-color-selected, var(--spectrum-gray-25))",
+      "description": "Defined in `.spectrum-Tag.is-selected`. <br/>Used by `--spectrum-tag-content-color`, `--spectrum-tag-content-color-hover`, `--spectrum-tag-content-color-active`, `--spectrum-tag-content-color-focus`. <br/>Defaults to `var(--mod-tag-content-color-selected, var(--spectrum-gray-25))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-tag-background-color-selected-hover": {
+      "value": "var(--mod-tag-background-color-selected-hover, var(--spectrum-neutral-background-color-hover))",
+      "description": "Defined in `.spectrum-Tag.is-selected`. <br/>Used by `--spectrum-tag-background-color-hover`. <br/>Defaults to `var(--mod-tag-background-color-selected-hover, var(--spectrum-neutral-background-color-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-tag-background-color-selected-active": {
+      "value": "var(--mod-tag-background-color-selected-active, var(--spectrum-neutral-background-color-down))",
+      "description": "Defined in `.spectrum-Tag.is-selected`. <br/>Used by `--spectrum-tag-background-color-active`. <br/>Defaults to `var(--mod-tag-background-color-selected-active, var(--spectrum-neutral-background-color-down))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-tag-background-color-selected-focus": {
+      "value": "var(--mod-tag-background-color-selected-focus, var(--spectrum-neutral-background-color-key-focus))",
+      "description": "Defined in `.spectrum-Tag.is-selected`. <br/>Used by `--spectrum-tag-background-color-focus`. <br/>Defaults to `var(--mod-tag-background-color-selected-focus, var(--spectrum-neutral-background-color-key-focus))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-tag-border-color-emphasized": {
+      "value": "var(--mod-tag-border-color-emphasized, transparent)",
+      "description": "Defined in `.spectrum-Tag.spectrum-Tag--emphasized`. <br/>Used by `--spectrum-tag-border-color`, `--spectrum-tag-border-color-hover`, `--spectrum-tag-border-color-active`, `--spectrum-tag-border-color-focus`. <br/>Defaults to `var(--mod-tag-border-color-emphasized, transparent)`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-tag-background-color-emphasized": {
+      "value": "var(--mod-tag-background-color-emphasized, var(--spectrum-accent-background-color-default))",
+      "description": "Defined in `.spectrum-Tag.spectrum-Tag--emphasized`. <br/>Used by `--spectrum-tag-background-color`. <br/>Defaults to `var(--mod-tag-background-color-emphasized, var(--spectrum-accent-background-color-default))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-tag-content-color-emphasized": {
+      "value": "var(--mod-tag-content-color-emphasized, var(--spectrum-white))",
+      "description": "Defined in `.spectrum-Tag.spectrum-Tag--emphasized`. <br/>Used by `--spectrum-tag-content-color`, `--spectrum-tag-content-color-hover`, `--spectrum-tag-content-color-active`, `--spectrum-tag-content-color-focus`. <br/>Defaults to `var(--mod-tag-content-color-emphasized, var(--spectrum-white))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-tag-background-color-emphasized-hover": {
+      "value": "var(--mod-tag-background-color-emphasized-hover, var(--spectrum-accent-background-color-hover))",
+      "description": "Defined in `.spectrum-Tag.spectrum-Tag--emphasized`. <br/>Used by `--spectrum-tag-background-color-hover`. <br/>Defaults to `var(--mod-tag-background-color-emphasized-hover, var(--spectrum-accent-background-color-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-tag-background-color-emphasized-active": {
+      "value": "var(--mod-tag-background-color-emphasized-active, var(--spectrum-accent-background-color-down))",
+      "description": "Defined in `.spectrum-Tag.spectrum-Tag--emphasized`. <br/>Used by `--spectrum-tag-background-color-active`. <br/>Defaults to `var(--mod-tag-background-color-emphasized-active, var(--spectrum-accent-background-color-down))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-tag-background-color-emphasized-focus": {
+      "value": "var(--mod-tag-background-color-emphasized-focus, var(--spectrum-accent-background-color-key-focus))",
+      "description": "Defined in `.spectrum-Tag.spectrum-Tag--emphasized`. <br/>Used by `--spectrum-tag-background-color-focus`. <br/>Defaults to `var(--mod-tag-background-color-emphasized-focus, var(--spectrum-accent-background-color-key-focus))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-tag-border-color-disabled": {
+      "value": "var(--mod-tag-border-color-disabled, transparent)",
+      "description": "Defined in `.spectrum-Tag.is-disabled`. <br/>Used by `--spectrum-tag-border-color`. <br/>Defaults to `var(--mod-tag-border-color-disabled, transparent)`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-tag-background-color-disabled": {
+      "value": "var(--mod-tag-background-color-disabled, var(--spectrum-disabled-background-color))",
+      "description": "Defined in `.spectrum-Tag.is-disabled`. <br/>Used by `--spectrum-tag-background-color`. <br/>Defaults to `var(--mod-tag-background-color-disabled, var(--spectrum-disabled-background-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-tag-content-color-disabled": {
+      "value": "var(--mod-tag-content-color-disabled, var(--spectrum-disabled-content-color))",
+      "description": "Defined in `.spectrum-Tag.is-disabled`. <br/>Used by `--spectrum-tag-content-color`. <br/>Defaults to `var(--mod-tag-content-color-disabled, var(--spectrum-disabled-content-color))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/tag/stories/tag.stories.js b/components/tag/stories/tag.stories.js
index cbbc0a1b485..b4a921fd221 100644
--- a/components/tag/stories/tag.stories.js
+++ b/components/tag/stories/tag.stories.js
@@ -2,11 +2,13 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.
 import { Sizes, withDownStateDimensionCapture } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isActive, isDisabled, isEmphasized, isHovered, isKeyboardFocused, isReadOnly, isSelected, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { TagGroups } from "./tag.test.js";
 import { TagsDefaultOptions } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * A tag categorizes content. It can represent keywords or people, and are [grouped](?path=/docs/components-tag-group--docs) to describe an item or a search request.
  */
@@ -103,12 +105,7 @@ export default {
 		},
 		packageJson,
 		metadata,
-		downState: {
-			selectors: [".spectrum-Tag:not(:disabled)"],
-		},
-		status: {
-			type: "migrated",
-		},
+		cssprops: metadata.modifiers,
 	},
 	decorators: [
 		withDownStateDimensionCapture,
diff --git a/components/taggroup/dist/metadata.json b/components/taggroup/dist/metadata.json
index 28ca5140d81..515e31d5deb 100644
--- a/components/taggroup/dist/metadata.json
+++ b/components/taggroup/dist/metadata.json
@@ -17,42 +17,182 @@
     ".spectrum-TagGroup:lang(ko)",
     ".spectrum-TagGroup:lang(zh)"
   ],
-  "modifiers": [
-    "--mod-body-cjk-line-height",
-    "--mod-body-font-size",
-    "--mod-body-line-height",
-    "--mod-body-margin-end",
-    "--mod-body-margin-start",
-    "--mod-tag-group-block-spacing-label-to-tags",
-    "--mod-tag-group-block-tag-spacing",
-    "--mod-tag-group-inline-spacing-label-to-tags",
-    "--mod-tag-group-inline-tag-spacing",
-    "--mod-tag-group-spacing-help-text-to-tags"
-  ],
-  "component": [
-    "--spectrum-tag-group-block-spacing-label-to-tags",
-    "--spectrum-tag-group-block-tag-spacing",
-    "--spectrum-tag-group-inline-spacing-label-to-tags",
-    "--spectrum-tag-group-inline-tag-spacing",
-    "--spectrum-tag-group-spacing-help-text-to-tags"
-  ],
-  "global": [
-    "--spectrum-cjk-line-height-100",
-    "--spectrum-component-bottom-to-text-100",
-    "--spectrum-component-bottom-to-text-200",
-    "--spectrum-component-bottom-to-text-75",
-    "--spectrum-component-top-to-text-100",
-    "--spectrum-component-top-to-text-200",
-    "--spectrum-component-top-to-text-75",
-    "--spectrum-field-label-to-component",
-    "--spectrum-font-size-100",
-    "--spectrum-font-size-200",
-    "--spectrum-font-size-75",
-    "--spectrum-help-text-to-component",
-    "--spectrum-line-height-100",
-    "--spectrum-spacing-100",
-    "--spectrum-spacing-200"
-  ],
-  "passthroughs": [],
-  "high-contrast": []
+  "modifiers": {
+    "mod-body-line-height": {
+      "description": "Defined in `.spectrum-TagGroup`. <br/>Defaults to `var(--spectrum-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-body-font-size": {
+      "description": "Defined in `.spectrum-TagGroup`, `.spectrum-TagGroup--sizeS`, `.spectrum-TagGroup--sizeL`. <br/>Defaults to `var(--spectrum-font-size-200)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-body-margin-start": {
+      "description": "Defined in `.spectrum-TagGroup`, `.spectrum-TagGroup--sizeS`, `.spectrum-TagGroup--sizeL`. <br/>Defaults to `var(--spectrum-component-top-to-text-200)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-body-margin-end": {
+      "description": "Defined in `.spectrum-TagGroup`, `.spectrum-TagGroup--sizeS`, `.spectrum-TagGroup--sizeL`. <br/>Defaults to `var(--spectrum-component-bottom-to-text-200)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-body-cjk-line-height": {
+      "description": "Defined in `.spectrum-TagGroup:lang(ja), .spectrum-TagGroup:lang(ko), .spectrum-TagGroup:lang(zh)`. <br/>Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tag-group-inline-tag-spacing": {
+      "description": "Used by `.spectrum-TagGroup-tags`. <br/>Defaults to `var(--spectrum-tag-group-inline-tag-spacing)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tag-group-block-tag-spacing": {
+      "description": "Used by `.spectrum-TagGroup-tags`. <br/>Defaults to `var(--spectrum-tag-group-block-tag-spacing)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tag-group-block-spacing-label-to-tags": {
+      "description": "Used by `.spectrum-TagGroup-label`. <br/>Defaults to `var(--spectrum-tag-group-block-spacing-label-to-tags)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tag-group-spacing-help-text-to-tags": {
+      "description": "Used by `.spectrum-TagGroup-helpText`. <br/>Defaults to `var(--spectrum-tag-group-spacing-help-text-to-tags)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tag-group-inline-spacing-label-to-tags": {
+      "description": "Used by `.spectrum-TagGroup--sideLabel .spectrum-TagGroup-label`. <br/>Defaults to `var(--spectrum-tag-group-inline-spacing-label-to-tags)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-tag-group-inline-tag-spacing": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-TagGroup`, `.spectrum-TagGroup--sizeS`, `.spectrum-TagGroup--sizeL`. <br/>Used by `.spectrum-TagGroup-tags`. <br/>Defaults to `var(--spectrum-spacing-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-group-block-tag-spacing": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-TagGroup`, `.spectrum-TagGroup--sizeS`, `.spectrum-TagGroup--sizeL`. <br/>Used by `.spectrum-TagGroup-tags`. <br/>Defaults to `var(--spectrum-spacing-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-group-block-spacing-label-to-tags": {
+      "value": "0px",
+      "description": "Defined in `.spectrum-TagGroup`. <br/>Used by `.spectrum-TagGroup-label`. <br/>Defaults to `var(--spectrum-field-label-to-component)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-group-inline-spacing-label-to-tags": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-TagGroup`. <br/>Used by `.spectrum-TagGroup--sideLabel .spectrum-TagGroup-label`. <br/>Defaults to `var(--spectrum-spacing-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tag-group-spacing-help-text-to-tags": {
+      "value": "0px",
+      "description": "Defined in `.spectrum-TagGroup`. <br/>Used by `.spectrum-TagGroup-helpText`. <br/>Defaults to `var(--spectrum-help-text-to-component)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-spacing-200": {
+      "value": "12px",
+      "description": "Used by `--spectrum-tag-group-inline-tag-spacing`, `--spectrum-tag-group-block-tag-spacing`, `--spectrum-tag-group-inline-spacing-label-to-tags`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-label-to-component": {
+      "value": "0px",
+      "description": "Used by `--spectrum-tag-group-block-spacing-label-to-tags`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-help-text-to-component": {
+      "value": "0px",
+      "description": "Used by `--spectrum-tag-group-spacing-help-text-to-tags`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-line-height-100": {
+      "value": "1.3",
+      "description": "Used by `--mod-body-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-100": {
+      "value": "14px",
+      "description": "Used by `--mod-body-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-100": {
+      "value": "6px",
+      "description": "Used by `--mod-body-margin-start`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-100": {
+      "value": "9px",
+      "description": "Used by `--mod-body-margin-end`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-cjk-line-height-100": {
+      "value": "1.5",
+      "description": "Used by `--mod-body-cjk-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-100": {
+      "value": "8px",
+      "description": "Used by `--spectrum-tag-group-inline-tag-spacing`, `--spectrum-tag-group-block-tag-spacing`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-75": {
+      "value": "12px",
+      "description": "Used by `--mod-body-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-75": {
+      "value": "4px",
+      "description": "Used by `--mod-body-margin-start`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-75": {
+      "value": "5px",
+      "description": "Used by `--mod-body-margin-end`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-200": {
+      "value": "16px",
+      "description": "Used by `--mod-body-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-200": {
+      "value": "9px",
+      "description": "Used by `--mod-body-margin-start`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-200": {
+      "value": "11px",
+      "description": "Used by `--mod-body-margin-end`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {}
 }
diff --git a/components/taggroup/stories/taggroup.stories.js b/components/taggroup/stories/taggroup.stories.js
index 0a10a82c09e..de7ea007075 100644
--- a/components/taggroup/stories/taggroup.stories.js
+++ b/components/taggroup/stories/taggroup.stories.js
@@ -2,11 +2,13 @@ import { Sizes, withDownStateDimensionCapture } from "@spectrum-css/preview/deco
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isInvalid } from "@spectrum-css/preview/types";
 import { default as TagStories } from "@spectrum-css/tag/stories/tag.stories.js";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { exampleTagItems, TagGroupDisabledItemAndActionButton, TagGroups, TagGroupSizingTemplate } from "./taggroup.test.js";
 import { Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 const ignoreProps = ["rootClass", "hasClearButton", "label"];
 
 /**
@@ -124,6 +126,10 @@ export default {
 		downState: {
 			selectors: [".spectrum-Tag", ".spectrum-ActionButton"],
 		},
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 		status: {
 			type: "migrated",
 		},
diff --git a/components/textfield/dist/metadata.json b/components/textfield/dist/metadata.json
index 073bc68dfb2..a0c8ae808da 100644
--- a/components/textfield/dist/metadata.json
+++ b/components/textfield/dist/metadata.json
@@ -40,6 +40,10 @@
     ".spectrum-Textfield-input[type=\"number\"]",
     ".spectrum-Textfield-input[type=\"number\"]::-webkit-inner-spin-button",
     ".spectrum-Textfield-input[type=\"number\"]::-webkit-outer-spin-button",
+    ".spectrum-Textfield:focus:hover .spectrum-Textfield-input",
+    ".spectrum-Textfield:focus:hover .spectrum-Textfield-input::placeholder",
+    ".spectrum-Textfield:hover .spectrum-Textfield-input",
+    ".spectrum-Textfield:hover .spectrum-Textfield-input::placeholder",
     ".spectrum-Textfield.is-disabled .spectrum-FieldLabel",
     ".spectrum-Textfield.is-disabled .spectrum-HelpText .spectrum-HelpText-text",
     ".spectrum-Textfield.is-disabled .spectrum-Textfield-characterCount",
@@ -64,16 +68,16 @@
     ".spectrum-Textfield.is-invalid .spectrum-Textfield-input:focus",
     ".spectrum-Textfield.is-invalid .spectrum-Textfield-input:focus:hover",
     ".spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon",
-    ".spectrum-Textfield.is-invalid.is-focused .spectrum-Textfield-input",
-    ".spectrum-Textfield.is-invalid.is-focused .spectrum-Textfield-input:hover",
-    ".spectrum-Textfield.is-invalid.is-focused:hover .spectrum-Textfield-input",
-    ".spectrum-Textfield.is-invalid.is-keyboardFocused .spectrum-Textfield-input",
-    ".spectrum-Textfield.is-invalid.is-keyboardFocused:hover .spectrum-Textfield-input",
     ".spectrum-Textfield.is-invalid:focus .spectrum-Textfield-input",
     ".spectrum-Textfield.is-invalid:focus .spectrum-Textfield-input:hover",
     ".spectrum-Textfield.is-invalid:focus:hover .spectrum-Textfield-input",
     ".spectrum-Textfield.is-invalid:hover:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input",
     ".spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input:hover",
+    ".spectrum-Textfield.is-invalid.is-focused .spectrum-Textfield-input",
+    ".spectrum-Textfield.is-invalid.is-focused .spectrum-Textfield-input:hover",
+    ".spectrum-Textfield.is-invalid.is-focused:hover .spectrum-Textfield-input",
+    ".spectrum-Textfield.is-invalid.is-keyboardFocused .spectrum-Textfield-input",
+    ".spectrum-Textfield.is-invalid.is-keyboardFocused:hover .spectrum-Textfield-input",
     ".spectrum-Textfield.is-keyboardFocused .spectrum-Textfield-input",
     ".spectrum-Textfield.is-keyboardFocused .spectrum-Textfield-input::placeholder",
     ".spectrum-Textfield.is-keyboardFocused:hover .spectrum-Textfield-input",
@@ -81,262 +85,1362 @@
     ".spectrum-Textfield.is-readOnly .spectrum-Textfield-input",
     ".spectrum-Textfield.is-readOnly .spectrum-Textfield-input::placeholder",
     ".spectrum-Textfield.is-readOnly .spectrum-Textfield-validationIcon",
-    ".spectrum-Textfield.is-readOnly.is-disabled .spectrum-Textfield-input",
     ".spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input",
     ".spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input::placeholder",
+    ".spectrum-Textfield.is-readOnly.is-disabled .spectrum-Textfield-input",
     ".spectrum-Textfield.is-valid .spectrum-Textfield-input",
     ".spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon",
-    ".spectrum-Textfield.spectrum-Textfield--sideLabel .spectrum-Textfield-validationIcon",
-    ".spectrum-Textfield:focus:hover .spectrum-Textfield-input",
-    ".spectrum-Textfield:focus:hover .spectrum-Textfield-input::placeholder",
-    ".spectrum-Textfield:hover .spectrum-Textfield-input",
-    ".spectrum-Textfield:hover .spectrum-Textfield-input::placeholder"
-  ],
-  "modifiers": [
-    "--mod-text-area-min-block-size",
-    "--mod-text-area-min-inline-size",
-    "--mod-textfield-animation-duration",
-    "--mod-textfield-background-color",
-    "--mod-textfield-background-color-disabled",
-    "--mod-textfield-border-color",
-    "--mod-textfield-border-color-disabled",
-    "--mod-textfield-border-color-focus",
-    "--mod-textfield-border-color-focus-hover",
-    "--mod-textfield-border-color-hover",
-    "--mod-textfield-border-color-invalid-default",
-    "--mod-textfield-border-color-invalid-focus",
-    "--mod-textfield-border-color-invalid-focus-hover",
-    "--mod-textfield-border-color-invalid-hover",
-    "--mod-textfield-border-color-invalid-keyboard-focus",
-    "--mod-textfield-border-color-keyboard-focus",
-    "--mod-textfield-border-width",
-    "--mod-textfield-character-count-color",
-    "--mod-textfield-character-count-spacing-block",
-    "--mod-textfield-character-count-spacing-block-side",
-    "--mod-textfield-character-count-spacing-inline",
-    "--mod-textfield-character-count-spacing-inline-side",
-    "--mod-textfield-corner-radius",
-    "--mod-textfield-focus-indicator-color",
-    "--mod-textfield-focus-indicator-gap",
-    "--mod-textfield-focus-indicator-width",
-    "--mod-textfield-font-family",
-    "--mod-textfield-font-size",
-    "--mod-textfield-font-style",
-    "--mod-textfield-font-weight",
-    "--mod-textfield-height",
-    "--mod-textfield-helptext-spacing-block",
-    "--mod-textfield-icon-color-invalid",
-    "--mod-textfield-icon-color-valid",
-    "--mod-textfield-icon-size-invalid",
-    "--mod-textfield-icon-size-valid",
-    "--mod-textfield-icon-spacing-block-invalid",
-    "--mod-textfield-icon-spacing-block-valid",
-    "--mod-textfield-icon-spacing-inline-end-invalid",
-    "--mod-textfield-icon-spacing-inline-end-valid",
-    "--mod-textfield-icon-spacing-inline-start-invalid",
-    "--mod-textfield-icon-spacing-inline-start-valid",
-    "--mod-textfield-label-spacing-block",
-    "--mod-textfield-label-spacing-inline-side-label",
-    "--mod-textfield-line-height",
-    "--mod-textfield-line-height-cjk",
-    "--mod-textfield-min-width",
-    "--mod-textfield-spacing-block-end",
-    "--mod-textfield-spacing-block-start",
-    "--mod-textfield-spacing-inline",
-    "--mod-textfield-text-color-default",
-    "--mod-textfield-text-color-disabled",
-    "--mod-textfield-text-color-focus",
-    "--mod-textfield-text-color-focus-hover",
-    "--mod-textfield-text-color-hover",
-    "--mod-textfield-text-color-invalid",
-    "--mod-textfield-text-color-keyboard-focus",
-    "--mod-textfield-text-color-readonly",
-    "--mod-textfield-text-color-valid",
-    "--mod-textfield-width"
-  ],
-  "component": [
-    "--spectrum-text-field-minimum-width-multiplier",
-    "--spectrum-textfield-animation-duration",
-    "--spectrum-textfield-background-color",
-    "--spectrum-textfield-background-color-disabled",
-    "--spectrum-textfield-border-color",
-    "--spectrum-textfield-border-color-disabled",
-    "--spectrum-textfield-border-color-focus",
-    "--spectrum-textfield-border-color-focus-hover",
-    "--spectrum-textfield-border-color-hover",
-    "--spectrum-textfield-border-color-invalid-default",
-    "--spectrum-textfield-border-color-invalid-focus",
-    "--spectrum-textfield-border-color-invalid-focus-hover",
-    "--spectrum-textfield-border-color-invalid-hover",
-    "--spectrum-textfield-border-color-invalid-keyboard-focus",
-    "--spectrum-textfield-border-color-keyboard-focus",
-    "--spectrum-textfield-border-width",
-    "--spectrum-textfield-character-count-color",
-    "--spectrum-textfield-character-count-spacing-block",
-    "--spectrum-textfield-character-count-spacing-block-side",
-    "--spectrum-textfield-character-count-spacing-inline",
-    "--spectrum-textfield-character-count-spacing-inline-side",
-    "--spectrum-textfield-corner-radius",
-    "--spectrum-textfield-focus-indicator-color",
-    "--spectrum-textfield-focus-indicator-gap",
-    "--spectrum-textfield-focus-indicator-width",
-    "--spectrum-textfield-font-family",
-    "--spectrum-textfield-font-size",
-    "--spectrum-textfield-font-style",
-    "--spectrum-textfield-font-weight",
-    "--spectrum-textfield-height",
-    "--spectrum-textfield-helptext-spacing-block",
-    "--spectrum-textfield-icon-color-invalid",
-    "--spectrum-textfield-icon-color-valid",
-    "--spectrum-textfield-icon-size-invalid",
-    "--spectrum-textfield-icon-size-valid",
-    "--spectrum-textfield-icon-spacing-block-invalid",
-    "--spectrum-textfield-icon-spacing-block-valid",
-    "--spectrum-textfield-icon-spacing-inline-end-invalid",
-    "--spectrum-textfield-icon-spacing-inline-end-valid",
-    "--spectrum-textfield-icon-spacing-inline-start-invalid",
-    "--spectrum-textfield-icon-spacing-inline-start-valid",
-    "--spectrum-textfield-input-line-height",
-    "--spectrum-textfield-label-spacing-block",
-    "--spectrum-textfield-label-spacing-inline-side-label",
-    "--spectrum-textfield-line-height",
-    "--spectrum-textfield-line-height-cjk",
-    "--spectrum-textfield-min-width",
-    "--spectrum-textfield-spacing-block-end",
-    "--spectrum-textfield-spacing-block-start",
-    "--spectrum-textfield-spacing-inline",
-    "--spectrum-textfield-text-color-default",
-    "--spectrum-textfield-text-color-disabled",
-    "--spectrum-textfield-text-color-focus",
-    "--spectrum-textfield-text-color-focus-hover",
-    "--spectrum-textfield-text-color-hover",
-    "--spectrum-textfield-text-color-invalid",
-    "--spectrum-textfield-text-color-keyboard-focus",
-    "--spectrum-textfield-text-color-readonly",
-    "--spectrum-textfield-text-color-valid",
-    "--spectrum-textfield-width"
-  ],
-  "global": [
-    "--spectrum-animation-duration-100",
-    "--spectrum-border-width-200",
-    "--spectrum-checkmark-icon-size-100",
-    "--spectrum-checkmark-icon-size-200",
-    "--spectrum-checkmark-icon-size-300",
-    "--spectrum-checkmark-icon-size-75",
-    "--spectrum-cjk-line-height-100",
-    "--spectrum-component-bottom-to-text-100",
-    "--spectrum-component-bottom-to-text-200",
-    "--spectrum-component-bottom-to-text-300",
-    "--spectrum-component-bottom-to-text-75",
-    "--spectrum-component-edge-to-text-100",
-    "--spectrum-component-edge-to-text-200",
-    "--spectrum-component-edge-to-text-300",
-    "--spectrum-component-edge-to-text-75",
-    "--spectrum-component-height-100",
-    "--spectrum-component-height-200",
-    "--spectrum-component-height-300",
-    "--spectrum-component-height-75",
-    "--spectrum-component-top-to-text-100",
-    "--spectrum-component-top-to-text-200",
-    "--spectrum-component-top-to-text-300",
-    "--spectrum-component-top-to-text-75",
-    "--spectrum-component-top-to-workflow-icon-100",
-    "--spectrum-component-top-to-workflow-icon-200",
-    "--spectrum-component-top-to-workflow-icon-300",
-    "--spectrum-component-top-to-workflow-icon-75",
-    "--spectrum-corner-radius-medium-size-extra-large",
-    "--spectrum-corner-radius-medium-size-large",
-    "--spectrum-corner-radius-medium-size-medium",
-    "--spectrum-corner-radius-medium-size-small",
-    "--spectrum-default-font-style",
-    "--spectrum-disabled-border-color",
-    "--spectrum-disabled-content-color",
-    "--spectrum-field-default-width-extra-large",
-    "--spectrum-field-default-width-large",
-    "--spectrum-field-default-width-medium",
-    "--spectrum-field-default-width-small",
-    "--spectrum-field-edge-to-alert-icon-extra-large",
-    "--spectrum-field-edge-to-alert-icon-large",
-    "--spectrum-field-edge-to-alert-icon-medium",
-    "--spectrum-field-edge-to-alert-icon-small",
-    "--spectrum-field-edge-to-validation-icon-extra-large",
-    "--spectrum-field-edge-to-validation-icon-large",
-    "--spectrum-field-edge-to-validation-icon-medium",
-    "--spectrum-field-edge-to-validation-icon-small",
-    "--spectrum-field-label-to-component",
-    "--spectrum-field-top-to-validation-icon-extra-large",
-    "--spectrum-field-top-to-validation-icon-large",
-    "--spectrum-field-top-to-validation-icon-medium",
-    "--spectrum-field-top-to-validation-icon-small",
-    "--spectrum-focus-indicator-color",
-    "--spectrum-focus-indicator-gap",
-    "--spectrum-focus-indicator-thickness",
-    "--spectrum-font-size-100",
-    "--spectrum-font-size-200",
-    "--spectrum-font-size-300",
-    "--spectrum-font-size-75",
-    "--spectrum-gray-25",
-    "--spectrum-gray-300",
-    "--spectrum-gray-400",
-    "--spectrum-gray-800",
-    "--spectrum-gray-900",
-    "--spectrum-help-text-to-component",
-    "--spectrum-line-height-100",
-    "--spectrum-negative-border-color-default",
-    "--spectrum-negative-border-color-focus",
-    "--spectrum-negative-border-color-focus-hover",
-    "--spectrum-negative-border-color-hover",
-    "--spectrum-negative-border-color-key-focus",
-    "--spectrum-negative-visual-color",
-    "--spectrum-neutral-content-color-default",
-    "--spectrum-neutral-content-color-focus",
-    "--spectrum-neutral-content-color-focus-hover",
-    "--spectrum-neutral-content-color-hover",
-    "--spectrum-neutral-content-color-key-focus",
-    "--spectrum-neutral-subdued-content-color-default",
-    "--spectrum-positive-visual-color",
-    "--spectrum-regular-font-weight",
-    "--spectrum-sans-font-family-stack",
-    "--spectrum-side-label-character-count-to-field",
-    "--spectrum-spacing-200",
-    "--spectrum-text-area-min-block-size",
-    "--spectrum-text-area-min-inline-size",
-    "--spectrum-text-area-minimum-height",
-    "--spectrum-text-area-minimum-width",
-    "--spectrum-text-to-visual-100",
-    "--spectrum-text-to-visual-200",
-    "--spectrum-text-to-visual-300",
-    "--spectrum-text-to-visual-75",
-    "--spectrum-workflow-icon-size-100",
-    "--spectrum-workflow-icon-size-200",
-    "--spectrum-workflow-icon-size-300",
-    "--spectrum-workflow-icon-size-75"
+    ".spectrum-Textfield.spectrum-Textfield--sideLabel .spectrum-Textfield-validationIcon"
   ],
-  "passthroughs": [],
-  "high-contrast": [
-    "--highcontrast-textfield-background-color",
-    "--highcontrast-textfield-background-color-disabled",
-    "--highcontrast-textfield-border-color",
-    "--highcontrast-textfield-border-color-disabled",
-    "--highcontrast-textfield-border-color-focus",
-    "--highcontrast-textfield-border-color-focus-hover",
-    "--highcontrast-textfield-border-color-hover",
-    "--highcontrast-textfield-border-color-invalid-default",
-    "--highcontrast-textfield-border-color-invalid-focus",
-    "--highcontrast-textfield-border-color-invalid-focus-hover",
-    "--highcontrast-textfield-border-color-invalid-hover",
-    "--highcontrast-textfield-border-color-invalid-keyboard-focus",
-    "--highcontrast-textfield-border-color-keyboard-focus",
-    "--highcontrast-textfield-border-color-readonly",
-    "--highcontrast-textfield-focus-indicator-color",
-    "--highcontrast-textfield-text-color-default",
-    "--highcontrast-textfield-text-color-disabled",
-    "--highcontrast-textfield-text-color-focus",
-    "--highcontrast-textfield-text-color-focus-hover",
-    "--highcontrast-textfield-text-color-hover",
-    "--highcontrast-textfield-text-color-invalid",
-    "--highcontrast-textfield-text-color-keyboard-focus",
-    "--highcontrast-textfield-text-color-readonly",
-    "--highcontrast-textfield-text-color-valid"
-  ]
+  "modifiers": {
+    "mod-textfield-background-color": {
+      "description": "Used by `--spectrum-textfield-background-color`. <br/>Defaults to `var(--spectrum-gray-25)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-textfield-background-color-disabled": {
+      "description": "Used by `--spectrum-textfield-background-color-disabled`. <br/>Defaults to `var(--spectrum-gray-25)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-textfield-border-color-disabled": {
+      "description": "Used by `--spectrum-textfield-border-color-disabled`. <br/>Defaults to `var(--spectrum-disabled-border-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-textfield-width": {
+      "description": "Used by `.spectrum-Textfield`. <br/>Defaults to `var(--spectrum-textfield-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-textfield-icon-spacing-block-valid": {
+      "description": "Used by `.spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon`. <br/>Defaults to `var(--spectrum-textfield-icon-spacing-block-valid)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-textfield-icon-spacing-inline-end-valid": {
+      "description": "Used by `.spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon`, `.spectrum-Textfield.is-valid .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-textfield-icon-spacing-inline-end-valid)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-textfield-icon-color-valid": {
+      "description": "Used by `.spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon`. <br/>Defaults to `var(--spectrum-textfield-icon-color-valid)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-textfield-icon-size-invalid": {
+      "description": "Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon`, `.spectrum-Textfield.is-invalid .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-textfield-icon-size-invalid)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-textfield-icon-spacing-block-invalid": {
+      "description": "Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon`. <br/>Defaults to `var(--spectrum-textfield-icon-spacing-block-invalid)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-textfield-icon-spacing-inline-end-invalid": {
+      "description": "Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon`, `.spectrum-Textfield.is-invalid .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-textfield-icon-spacing-inline-end-invalid)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-textfield-icon-color-invalid": {
+      "description": "Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon`. <br/>Defaults to `var(--spectrum-textfield-icon-color-invalid)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-textfield-label-spacing-block": {
+      "description": "Used by `.spectrum-Textfield .spectrum-FieldLabel`. <br/>Defaults to `var(--spectrum-textfield-label-spacing-block)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-textfield-text-color-disabled": {
+      "description": "Used by `.spectrum-Textfield.is-disabled .spectrum-FieldLabel`, `.spectrum-Textfield.is-disabled .spectrum-HelpText .spectrum-HelpText-text`, `.spectrum-Textfield.is-disabled .spectrum-Textfield-characterCount`, `.spectrum-Textfield-input:disabled, .spectrum-Textfield-input:disabled::placeholder, .spectrum-Textfield.is-disabled .spectrum-Textfield-input, .spectrum-Textfield.is-disabled .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield.is-disabled .spectrum-Textfield-input:read-only::placeholder, .spectrum-Textfield.is-disabled .spectrum-Textfield.is-readOnly .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input, .spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield.is-disabled .spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input::placeholder, .spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input:read-only::placeholder, .spectrum-Textfield.is-disabled:hover .spectrum-Textfield.is-readOnly .spectrum-Textfield-input::placeholder, .spectrum-Textfield.is-disabled:hover .spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield.is-readOnly.is-disabled .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-textfield-text-color-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-textfield-helptext-spacing-block": {
+      "description": "Used by `.spectrum-Textfield .spectrum-HelpText`. <br/>Defaults to `var(--spectrum-textfield-helptext-spacing-block)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-textfield-character-count-color": {
+      "description": "Used by `.spectrum-Textfield-characterCount`. <br/>Defaults to `var(--spectrum-textfield-character-count-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-textfield-character-count-spacing-block": {
+      "description": "Used by `.spectrum-Textfield-characterCount`. <br/>Defaults to `var(--spectrum-textfield-character-count-spacing-block)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-textfield-character-count-spacing-inline": {
+      "description": "Used by `.spectrum-Textfield-characterCount`. <br/>Defaults to `var(--spectrum-textfield-character-count-spacing-inline)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-textfield-font-size": {
+      "description": "Used by `.spectrum-Textfield-characterCount`, `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`. <br/>Defaults to `var(--spectrum-textfield-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-textfield-font-family": {
+      "description": "Used by `.spectrum-Textfield-characterCount`, `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`. <br/>Defaults to `var(--spectrum-textfield-font-family)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-textfield-font-weight": {
+      "description": "Used by `.spectrum-Textfield-characterCount`, `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`. <br/>Defaults to `var(--spectrum-textfield-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-textfield-font-style": {
+      "description": "Used by `.spectrum-Textfield-characterCount`, `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`. <br/>Defaults to `var(--spectrum-textfield-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-textfield-line-height": {
+      "description": "Used by `.spectrum-Textfield-characterCount`, `.spectrum-Textfield--multiline .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-textfield-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-textfield-corner-radius": {
+      "description": "Used by `.spectrum-Textfield-characterCount`, `.spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-textfield-corner-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-textfield-line-height-cjk": {
+      "description": "Used by `--spectrum-textfield-line-height`. <br/>Defaults to `var(--spectrum-textfield-line-height-cjk)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-textfield-min-width": {
+      "description": "Used by `.spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-textfield-min-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-textfield-height": {
+      "description": "Used by `.spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-textfield-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-textfield-spacing-block-start": {
+      "description": "Used by `.spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-textfield-spacing-block-start)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-textfield-border-width": {
+      "description": "Used by `.spectrum-Textfield-input`, `.spectrum-Textfield.is-valid .spectrum-Textfield-input`, `.spectrum-Textfield.is-invalid .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-textfield-border-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-textfield-spacing-block-end": {
+      "description": "Used by `.spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-textfield-spacing-block-end)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-textfield-spacing-inline": {
+      "description": "Used by `.spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-textfield-spacing-inline)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-textfield-border-color": {
+      "description": "Used by `.spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-textfield-border-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-textfield-animation-duration": {
+      "description": "Used by `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`. <br/>Defaults to `var(--spectrum-textfield-animation-duration)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-textfield-text-color-default": {
+      "description": "Used by `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`. <br/>Defaults to `var(--spectrum-textfield-text-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-textfield-border-color-focus": {
+      "description": "Used by `.spectrum-Textfield-input:focus, .spectrum-Textfield.is-focused .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-textfield-border-color-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-textfield-text-color-focus": {
+      "description": "Used by `.spectrum-Textfield-input:focus, .spectrum-Textfield-input:focus::placeholder, .spectrum-Textfield.is-focused .spectrum-Textfield-input, .spectrum-Textfield.is-focused .spectrum-Textfield-input::placeholder`. <br/>Defaults to `var(--spectrum-textfield-text-color-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-textfield-border-color-keyboard-focus": {
+      "description": "Used by `.spectrum-Textfield.is-keyboardFocused .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-textfield-border-color-keyboard-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-textfield-focus-indicator-width": {
+      "description": "Used by `.spectrum-Textfield.is-keyboardFocused .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-textfield-focus-indicator-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-textfield-focus-indicator-color": {
+      "description": "Used by `.spectrum-Textfield.is-keyboardFocused .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-textfield-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-textfield-focus-indicator-gap": {
+      "description": "Used by `.spectrum-Textfield.is-keyboardFocused .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-textfield-focus-indicator-gap)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-textfield-text-color-keyboard-focus": {
+      "description": "Used by `.spectrum-Textfield.is-keyboardFocused .spectrum-Textfield-input, .spectrum-Textfield.is-keyboardFocused .spectrum-Textfield-input::placeholder`. <br/>Defaults to `var(--spectrum-textfield-text-color-keyboard-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-textfield-icon-spacing-inline-start-valid": {
+      "description": "Used by `.spectrum-Textfield.is-valid .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-textfield-icon-spacing-inline-start-valid)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-textfield-icon-size-valid": {
+      "description": "Used by `.spectrum-Textfield.is-valid .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-textfield-icon-size-valid)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-textfield-text-color-valid": {
+      "description": "Used by `.spectrum-Textfield.is-valid .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-textfield-text-color-valid)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-textfield-icon-spacing-inline-start-invalid": {
+      "description": "Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-textfield-icon-spacing-inline-start-invalid)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-textfield-text-color-invalid": {
+      "description": "Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-textfield-text-color-invalid)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-textfield-border-color-invalid-default": {
+      "description": "Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-textfield-border-color-invalid-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-textfield-border-color-invalid-focus": {
+      "description": "Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-input:focus, .spectrum-Textfield.is-invalid.is-focused .spectrum-Textfield-input, .spectrum-Textfield.is-invalid:focus .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-textfield-border-color-invalid-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-textfield-border-color-invalid-keyboard-focus": {
+      "description": "Used by `.spectrum-Textfield.is-invalid.is-keyboardFocused .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-textfield-border-color-invalid-keyboard-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-textfield-text-color-readonly": {
+      "description": "Used by `.spectrum-Textfield-input:read-only, .spectrum-Textfield.is-readOnly .spectrum-Textfield-input`, `.spectrum-Textfield-input:read-only::placeholder, .spectrum-Textfield.is-readOnly .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input, .spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input::placeholder`. <br/>Defaults to `var(--spectrum-textfield-text-color-readonly)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-textfield-border-color-hover": {
+      "description": "Used by `.spectrum-Textfield-input:hover, .spectrum-Textfield:hover .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-textfield-border-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-textfield-text-color-hover": {
+      "description": "Used by `.spectrum-Textfield-input:hover, .spectrum-Textfield-input:hover::placeholder, .spectrum-Textfield:hover .spectrum-Textfield-input, .spectrum-Textfield:hover .spectrum-Textfield-input::placeholder`. <br/>Defaults to `var(--spectrum-textfield-text-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-textfield-border-color-focus-hover": {
+      "description": "Used by `.spectrum-Textfield-input:focus:hover, .spectrum-Textfield.is-focused .spectrum-Textfield-input:hover`, `.spectrum-Textfield-input:focus:hover, .spectrum-Textfield.is-focused:hover .spectrum-Textfield-input, .spectrum-Textfield.is-keyboardFocused:hover .spectrum-Textfield-input, .spectrum-Textfield:focus:hover .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-textfield-border-color-focus-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-textfield-text-color-focus-hover": {
+      "description": "Used by `.spectrum-Textfield-input:focus:hover, .spectrum-Textfield-input:focus:hover::placeholder, .spectrum-Textfield.is-focused .spectrum-Textfield-input:hover, .spectrum-Textfield.is-focused .spectrum-Textfield-input:hover::placeholder`, `.spectrum-Textfield-input:focus:hover, .spectrum-Textfield.is-focused:hover .spectrum-Textfield-input, .spectrum-Textfield.is-keyboardFocused:hover .spectrum-Textfield-input, .spectrum-Textfield:focus:hover .spectrum-Textfield-input`, `.spectrum-Textfield-input:focus:hover::placeholder, .spectrum-Textfield.is-focused:hover .spectrum-Textfield-input::placeholder, .spectrum-Textfield.is-keyboardFocused:hover .spectrum-Textfield-input::placeholder, .spectrum-Textfield:focus:hover .spectrum-Textfield-input::placeholder`. <br/>Defaults to `var(--spectrum-textfield-text-color-focus-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-textfield-border-color-invalid-hover": {
+      "description": "Used by `.spectrum-Textfield.is-invalid:hover:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input, .spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input:hover`. <br/>Defaults to `var(--spectrum-textfield-border-color-invalid-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-textfield-border-color-invalid-focus-hover": {
+      "description": "Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-input:focus:hover, .spectrum-Textfield.is-invalid.is-focused .spectrum-Textfield-input:hover, .spectrum-Textfield.is-invalid.is-focused:hover .spectrum-Textfield-input, .spectrum-Textfield.is-invalid.is-keyboardFocused:hover .spectrum-Textfield-input, .spectrum-Textfield.is-invalid:focus .spectrum-Textfield-input:hover, .spectrum-Textfield.is-invalid:focus:hover .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-textfield-border-color-invalid-focus-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-textfield-label-spacing-inline-side-label": {
+      "description": "Used by `.spectrum-Textfield--sideLabel .spectrum-FieldLabel`. <br/>Defaults to `var(--spectrum-textfield-label-spacing-inline-side-label)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-textfield-character-count-spacing-block-side": {
+      "description": "Used by `.spectrum-Textfield--sideLabel .spectrum-Textfield-characterCount`. <br/>Defaults to `var(--spectrum-textfield-character-count-spacing-block-side)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-textfield-character-count-spacing-inline-side": {
+      "description": "Used by `.spectrum-Textfield--sideLabel .spectrum-Textfield-characterCount`. <br/>Defaults to `var(--spectrum-textfield-character-count-spacing-inline-side)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-text-area-min-inline-size": {
+      "description": "Used by `.spectrum-Textfield--multiline .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-text-area-min-inline-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-text-area-min-block-size": {
+      "description": "Used by `.spectrum-Textfield--multiline .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-text-area-min-block-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-textfield-animation-duration": {
+      "value": "var(--spectrum-animation-duration-100)",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`. <br/>Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-textfield-height": {
+      "value": "48px",
+      "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`. <br/>Used by `--spectrum-textfield-min-width`, `--spectrum-textfield-input-line-height`, `.spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-component-height-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-textfield-width": {
+      "value": "240px",
+      "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`. <br/>Used by `.spectrum-Textfield`. <br/>Defaults to `var(--spectrum-field-default-width-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-textfield-min-width": {
+      "value": "calc(var(--spectrum-textfield-height) * var(--spectrum-text-field-minimum-width-multiplier))",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield-input`. <br/>Defaults to `calc(var(--spectrum-textfield-height) * var(--spectrum-text-field-minimum-width-multiplier))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-text-field-minimum-width-multiplier": {
+      "value": "1.5",
+      "description": "Used by `--spectrum-textfield-min-width`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-textfield-border-width": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield-input`, `.spectrum-Textfield.is-valid .spectrum-Textfield-input`, `.spectrum-Textfield.is-invalid .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-border-width-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-textfield-corner-radius": {
+      "value": "10px",
+      "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`. <br/>Used by `.spectrum-Textfield-characterCount`, `.spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-corner-radius-medium-size-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-textfield-spacing-inline": {
+      "value": "18px",
+      "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`. <br/>Used by `.spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-component-edge-to-text-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-textfield-spacing-block-start": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`. <br/>Used by `.spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-component-top-to-text-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-textfield-spacing-block-end": {
+      "value": "14px",
+      "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`. <br/>Used by `.spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-component-bottom-to-text-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-textfield-label-spacing-block": {
+      "value": "0px",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield .spectrum-FieldLabel`. <br/>Defaults to `var(--spectrum-field-label-to-component)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-textfield-label-spacing-inline-side-label": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield--sideLabel .spectrum-FieldLabel`. <br/>Defaults to `var(--spectrum-spacing-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-textfield-helptext-spacing-block": {
+      "value": "0px",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield .spectrum-HelpText`. <br/>Defaults to `var(--spectrum-help-text-to-component)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-textfield-icon-size-invalid": {
+      "value": "26px",
+      "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`. <br/>Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon`, `.spectrum-Textfield.is-invalid .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-workflow-icon-size-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-textfield-icon-size-valid": {
+      "value": "14px",
+      "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`. <br/>Used by `.spectrum-Textfield.is-valid .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-checkmark-icon-size-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-textfield-icon-spacing-inline-start-invalid": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`. <br/>Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-text-to-visual-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-textfield-icon-spacing-inline-end-invalid": {
+      "value": "18px",
+      "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`. <br/>Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon`, `.spectrum-Textfield.is-invalid .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-field-edge-to-alert-icon-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-textfield-icon-spacing-block-invalid": {
+      "value": "11px",
+      "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`. <br/>Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon`. <br/>Defaults to `var(--spectrum-component-top-to-workflow-icon-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-textfield-icon-spacing-inline-start-valid": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`. <br/>Used by `.spectrum-Textfield.is-valid .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-text-to-visual-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-textfield-icon-spacing-inline-end-valid": {
+      "value": "18px",
+      "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`. <br/>Used by `.spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon`, `.spectrum-Textfield.is-valid .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-field-edge-to-validation-icon-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-textfield-icon-spacing-block-valid": {
+      "value": "17px",
+      "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`. <br/>Used by `.spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon`. <br/>Defaults to `var(--spectrum-field-top-to-validation-icon-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-textfield-font-family": {
+      "value": "var(--spectrum-sans-font-family-stack)",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield-characterCount`, `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`. <br/>Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-textfield-font-weight": {
+      "value": "400",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield-characterCount`, `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`. <br/>Defaults to `var(--spectrum-regular-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-textfield-font-style": {
+      "value": "normal",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield-characterCount`, `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`. <br/>Defaults to `var(--spectrum-default-font-style)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-textfield-font-size": {
+      "value": "18px",
+      "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`. <br/>Used by `.spectrum-Textfield-characterCount`, `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`. <br/>Defaults to `var(--spectrum-font-size-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-textfield-line-height": {
+      "value": "var(--mod-textfield-line-height-cjk, var(--spectrum-textfield-line-height-cjk))",
+      "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield-characterCount:lang(ja), .spectrum-Textfield-characterCount:lang(ko), .spectrum-Textfield-characterCount:lang(zh)`, `.spectrum-Textfield--multiline .spectrum-Textfield-input:lang(ja), .spectrum-Textfield--multiline .spectrum-Textfield-input:lang(ko), .spectrum-Textfield--multiline .spectrum-Textfield-input:lang(zh)`. <br/>Used by `.spectrum-Textfield-characterCount`, `.spectrum-Textfield--multiline .spectrum-Textfield-input`. <br/>Defaults to `var(--mod-textfield-line-height-cjk, var(--spectrum-textfield-line-height-cjk))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-textfield-line-height-cjk": {
+      "value": "1.5",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `--spectrum-textfield-line-height`. <br/>Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-textfield-input-line-height": {
+      "value": "var(--spectrum-textfield-height)",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-textfield-height)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-textfield-character-count-color": {
+      "value": "var(--spectrum-gray-700)",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield-characterCount`. <br/>Defaults to `var(--spectrum-neutral-subdued-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-textfield-character-count-spacing-inline": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield-characterCount`. <br/>Defaults to `var(--spectrum-spacing-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-textfield-character-count-spacing-block": {
+      "value": "14px",
+      "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`. <br/>Used by `.spectrum-Textfield-characterCount`. <br/>Defaults to `var(--spectrum-component-bottom-to-text-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-textfield-character-count-spacing-inline-side": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield--sideLabel .spectrum-Textfield-characterCount`. <br/>Defaults to `var(--spectrum-side-label-character-count-to-field)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-textfield-character-count-spacing-block-side": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`. <br/>Used by `.spectrum-Textfield--sideLabel .spectrum-Textfield-characterCount`. <br/>Defaults to `var(--spectrum-component-top-to-text-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-textfield-focus-indicator-width": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield.is-keyboardFocused .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-textfield-focus-indicator-gap": {
+      "value": "2px",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield.is-keyboardFocused .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-textfield-background-color": {
+      "value": "var(--mod-textfield-background-color, var(--spectrum-gray-25))",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield-input`. <br/>Defaults to `var(--mod-textfield-background-color, var(--spectrum-gray-25))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-textfield-border-color": {
+      "value": "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-gray-300)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-textfield-border-color-hover": {
+      "value": "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield-input:hover, .spectrum-Textfield:hover .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-gray-400)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-textfield-border-color-focus": {
+      "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield-input:focus, .spectrum-Textfield.is-focused .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-gray-800)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-textfield-border-color-focus-hover": {
+      "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield-input:focus:hover, .spectrum-Textfield.is-focused .spectrum-Textfield-input:hover`, `.spectrum-Textfield-input:focus:hover, .spectrum-Textfield.is-focused:hover .spectrum-Textfield-input, .spectrum-Textfield.is-keyboardFocused:hover .spectrum-Textfield-input, .spectrum-Textfield:focus:hover .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-gray-900)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-textfield-border-color-keyboard-focus": {
+      "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield.is-keyboardFocused .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-gray-800)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-textfield-text-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`. <br/>Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-textfield-text-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield-input:hover, .spectrum-Textfield-input:hover::placeholder, .spectrum-Textfield:hover .spectrum-Textfield-input, .spectrum-Textfield:hover .spectrum-Textfield-input::placeholder`. <br/>Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-textfield-text-color-focus": {
+      "value": "var(--spectrum-neutral-content-color-down)",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield-input:focus, .spectrum-Textfield-input:focus::placeholder, .spectrum-Textfield.is-focused .spectrum-Textfield-input, .spectrum-Textfield.is-focused .spectrum-Textfield-input::placeholder`. <br/>Defaults to `var(--spectrum-neutral-content-color-focus)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-textfield-text-color-focus-hover": {
+      "value": "var(--spectrum-neutral-content-color-down)",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield-input:focus:hover, .spectrum-Textfield-input:focus:hover::placeholder, .spectrum-Textfield.is-focused .spectrum-Textfield-input:hover, .spectrum-Textfield.is-focused .spectrum-Textfield-input:hover::placeholder`, `.spectrum-Textfield-input:focus:hover, .spectrum-Textfield.is-focused:hover .spectrum-Textfield-input, .spectrum-Textfield.is-keyboardFocused:hover .spectrum-Textfield-input, .spectrum-Textfield:focus:hover .spectrum-Textfield-input`, `.spectrum-Textfield-input:focus:hover::placeholder, .spectrum-Textfield.is-focused:hover .spectrum-Textfield-input::placeholder, .spectrum-Textfield.is-keyboardFocused:hover .spectrum-Textfield-input::placeholder, .spectrum-Textfield:focus:hover .spectrum-Textfield-input::placeholder`. <br/>Defaults to `var(--spectrum-neutral-content-color-focus-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-textfield-text-color-keyboard-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield.is-keyboardFocused .spectrum-Textfield-input, .spectrum-Textfield.is-keyboardFocused .spectrum-Textfield-input::placeholder`. <br/>Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-textfield-text-color-readonly": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield-input:read-only, .spectrum-Textfield.is-readOnly .spectrum-Textfield-input`, `.spectrum-Textfield-input:read-only::placeholder, .spectrum-Textfield.is-readOnly .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input, .spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input::placeholder`. <br/>Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-textfield-background-color-disabled": {
+      "value": "var(--highcontrast-textfield-background-color-disabled, var(--mod-textfield-background-color-disabled, var(--spectrum-gray-25)))",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield-input:disabled, .spectrum-Textfield.is-disabled .spectrum-Textfield-input`, `.spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input`. <br/>Defaults to `var(--highcontrast-textfield-background-color-disabled, var(--mod-textfield-background-color-disabled, var(--spectrum-gray-25)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-textfield-border-color-disabled": {
+      "value": "var(--highcontrast-textfield-border-color-disabled, var(--mod-textfield-border-color-disabled, var(--spectrum-disabled-border-color)))",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield-input:disabled, .spectrum-Textfield.is-disabled .spectrum-Textfield-input`, `.spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input`. <br/>Defaults to `var(--highcontrast-textfield-border-color-disabled, var(--mod-textfield-border-color-disabled, var(--spectrum-disabled-border-color)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-textfield-text-color-disabled": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield.is-disabled .spectrum-FieldLabel`, `.spectrum-Textfield.is-disabled .spectrum-HelpText .spectrum-HelpText-text`, `.spectrum-Textfield.is-disabled .spectrum-Textfield-characterCount`, `.spectrum-Textfield-input:disabled, .spectrum-Textfield-input:disabled::placeholder, .spectrum-Textfield.is-disabled .spectrum-Textfield-input, .spectrum-Textfield.is-disabled .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield.is-disabled .spectrum-Textfield-input:read-only::placeholder, .spectrum-Textfield.is-disabled .spectrum-Textfield.is-readOnly .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input, .spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield.is-disabled .spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input::placeholder, .spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input:read-only::placeholder, .spectrum-Textfield.is-disabled:hover .spectrum-Textfield.is-readOnly .spectrum-Textfield-input::placeholder, .spectrum-Textfield.is-disabled:hover .spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield.is-readOnly.is-disabled .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-textfield-border-color-invalid-default": {
+      "value": "var(--spectrum-negative-color-900)",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-negative-border-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-textfield-border-color-invalid-hover": {
+      "value": "var(--spectrum-negative-color-1000)",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield.is-invalid:hover:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input, .spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input:hover`. <br/>Defaults to `var(--spectrum-negative-border-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-textfield-border-color-invalid-focus": {
+      "value": "var(--spectrum-negative-color-1000)",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-input:focus, .spectrum-Textfield.is-invalid.is-focused .spectrum-Textfield-input, .spectrum-Textfield.is-invalid:focus .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-negative-border-color-focus)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-textfield-border-color-invalid-focus-hover": {
+      "value": "var(--spectrum-negative-border-color-down)",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-input:focus:hover, .spectrum-Textfield.is-invalid.is-focused .spectrum-Textfield-input:hover, .spectrum-Textfield.is-invalid.is-focused:hover .spectrum-Textfield-input, .spectrum-Textfield.is-invalid.is-keyboardFocused:hover .spectrum-Textfield-input, .spectrum-Textfield.is-invalid:focus .spectrum-Textfield-input:hover, .spectrum-Textfield.is-invalid:focus:hover .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-negative-border-color-focus-hover)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-textfield-border-color-invalid-keyboard-focus": {
+      "value": "var(--spectrum-negative-color-1000)",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield.is-invalid.is-keyboardFocused .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-negative-border-color-key-focus)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-textfield-icon-color-invalid": {
+      "value": "var(--spectrum-negative-color-800)",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon`. <br/>Defaults to `var(--spectrum-negative-visual-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-textfield-text-color-invalid": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-textfield-text-color-valid": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield.is-valid .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-textfield-icon-color-valid": {
+      "value": "var(--spectrum-positive-color-800)",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon`. <br/>Defaults to `var(--spectrum-positive-visual-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-textfield-focus-indicator-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield.is-keyboardFocused .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-animation-duration-100": {
+      "description": "Used by `--spectrum-textfield-animation-duration`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-100": {
+      "value": "32px",
+      "description": "Used by `--spectrum-textfield-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-default-width-medium": {
+      "value": "208px",
+      "description": "Used by `--spectrum-textfield-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-border-width-200": {
+      "value": "2px",
+      "description": "Used by `--spectrum-textfield-border-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-medium-size-medium": {
+      "value": "8px",
+      "description": "Used by `--spectrum-textfield-corner-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-text-100": {
+      "value": "12px",
+      "description": "Used by `--spectrum-textfield-spacing-inline`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-textfield-spacing-block-start`, `--spectrum-textfield-character-count-spacing-block-side`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-100": {
+      "value": "9px",
+      "description": "Used by `--spectrum-textfield-spacing-block-end`, `--spectrum-textfield-character-count-spacing-block`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-label-to-component": {
+      "value": "0px",
+      "description": "Used by `--spectrum-textfield-label-spacing-block`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-200": {
+      "value": "12px",
+      "description": "Used by `--spectrum-textfield-label-spacing-inline-side-label`, `--spectrum-textfield-character-count-spacing-inline`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-help-text-to-component": {
+      "value": "0px",
+      "description": "Used by `--spectrum-textfield-helptext-spacing-block`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-100": {
+      "value": "20px",
+      "description": "Used by `--spectrum-textfield-icon-size-invalid`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-checkmark-icon-size-100": {
+      "value": "10px",
+      "description": "Used by `--spectrum-textfield-icon-size-valid`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-textfield-icon-spacing-inline-start-invalid`, `--spectrum-textfield-icon-spacing-inline-start-valid`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-edge-to-alert-icon-medium": {
+      "value": "12px",
+      "description": "Used by `--spectrum-textfield-icon-spacing-inline-end-invalid`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-workflow-icon-100": {
+      "value": "6px",
+      "description": "Used by `--spectrum-textfield-icon-spacing-block-invalid`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-edge-to-validation-icon-medium": {
+      "value": "12px",
+      "description": "Used by `--spectrum-textfield-icon-spacing-inline-end-valid`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-top-to-validation-icon-medium": {
+      "value": "11px",
+      "description": "Used by `--spectrum-textfield-icon-spacing-block-valid`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-sans-font-family-stack": {
+      "description": "Used by `--spectrum-textfield-font-family`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-regular-font-weight": {
+      "value": "400",
+      "description": "Used by `--spectrum-textfield-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-default-font-style": {
+      "value": "normal",
+      "description": "Used by `--spectrum-textfield-font-style`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-100": {
+      "value": "14px",
+      "description": "Used by `--spectrum-textfield-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-line-height-100": {
+      "value": "1.3",
+      "description": "Used by `--spectrum-textfield-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-cjk-line-height-100": {
+      "value": "1.5",
+      "description": "Used by `--spectrum-textfield-line-height-cjk`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-subdued-content-color-default": {
+      "value": "var(--spectrum-gray-700)",
+      "description": "Used by `--spectrum-textfield-character-count-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-side-label-character-count-to-field": {
+      "value": "12px",
+      "description": "Used by `--spectrum-textfield-character-count-spacing-inline-side`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Used by `--spectrum-textfield-focus-indicator-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-gap": {
+      "value": "2px",
+      "description": "Used by `--spectrum-textfield-focus-indicator-gap`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-25": {
+      "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+      "description": "Used by `--spectrum-textfield-background-color`, `--spectrum-textfield-background-color-disabled`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-300": {
+      "value": "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))",
+      "description": "Used by `--spectrum-textfield-border-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-400": {
+      "value": "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))",
+      "description": "Used by `--spectrum-textfield-border-color-hover`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-800": {
+      "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+      "description": "Used by `--spectrum-textfield-border-color-focus`, `--spectrum-textfield-border-color-keyboard-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-900": {
+      "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+      "description": "Used by `--spectrum-textfield-border-color-focus-hover`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-textfield-text-color-default`, `--spectrum-textfield-text-color-readonly`, `--spectrum-textfield-text-color-invalid`, `--spectrum-textfield-text-color-valid`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-hover": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-textfield-text-color-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-focus": {
+      "value": "var(--spectrum-neutral-content-color-down)",
+      "description": "Used by `--spectrum-textfield-text-color-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-focus-hover": {
+      "value": "var(--spectrum-neutral-content-color-down)",
+      "description": "Used by `--spectrum-textfield-text-color-focus-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-key-focus": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-textfield-text-color-keyboard-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-disabled-border-color": {
+      "value": "var(--spectrum-gray-300)",
+      "description": "Used by `--spectrum-textfield-border-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-disabled-content-color": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Used by `--spectrum-textfield-text-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-border-color-default": {
+      "value": "var(--spectrum-negative-color-900)",
+      "description": "Used by `--spectrum-textfield-border-color-invalid-default`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-border-color-hover": {
+      "value": "var(--spectrum-negative-color-1000)",
+      "description": "Used by `--spectrum-textfield-border-color-invalid-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-border-color-focus": {
+      "value": "var(--spectrum-negative-color-1000)",
+      "description": "Used by `--spectrum-textfield-border-color-invalid-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-border-color-focus-hover": {
+      "value": "var(--spectrum-negative-border-color-down)",
+      "description": "Used by `--spectrum-textfield-border-color-invalid-focus-hover`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-border-color-key-focus": {
+      "value": "var(--spectrum-negative-color-1000)",
+      "description": "Used by `--spectrum-textfield-border-color-invalid-keyboard-focus`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-visual-color": {
+      "value": "var(--spectrum-negative-color-800)",
+      "description": "Used by `--spectrum-textfield-icon-color-invalid`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-positive-visual-color": {
+      "value": "var(--spectrum-positive-color-800)",
+      "description": "Used by `--spectrum-textfield-icon-color-valid`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Used by `--spectrum-textfield-focus-indicator-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-text-area-min-inline-size": {
+      "value": "112px",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield--multiline .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-text-area-minimum-width)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-area-minimum-width": {
+      "value": "112px",
+      "description": "Used by `--spectrum-text-area-min-inline-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-area-min-block-size": {
+      "value": "56px",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield--multiline .spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-text-area-minimum-height)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-area-minimum-height": {
+      "value": "56px",
+      "description": "Used by `--spectrum-text-area-min-block-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-75": {
+      "value": "24px",
+      "description": "Used by `--spectrum-textfield-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-default-width-small": {
+      "value": "192px",
+      "description": "Used by `--spectrum-textfield-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-medium-size-small": {
+      "value": "7px",
+      "description": "Used by `--spectrum-textfield-corner-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-text-75": {
+      "value": "9px",
+      "description": "Used by `--spectrum-textfield-spacing-inline`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-75": {
+      "value": "4px",
+      "description": "Used by `--spectrum-textfield-spacing-block-start`, `--spectrum-textfield-character-count-spacing-block-side`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-75": {
+      "value": "5px",
+      "description": "Used by `--spectrum-textfield-spacing-block-end`, `--spectrum-textfield-character-count-spacing-block`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-75": {
+      "value": "16px",
+      "description": "Used by `--spectrum-textfield-icon-size-invalid`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-checkmark-icon-size-75": {
+      "value": "10px",
+      "description": "Used by `--spectrum-textfield-icon-size-valid`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-75": {
+      "value": "5px",
+      "description": "Used by `--spectrum-textfield-icon-spacing-inline-start-invalid`, `--spectrum-textfield-icon-spacing-inline-start-valid`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-edge-to-alert-icon-small": {
+      "value": "9px",
+      "description": "Used by `--spectrum-textfield-icon-spacing-inline-end-invalid`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-workflow-icon-75": {
+      "value": "4px",
+      "description": "Used by `--spectrum-textfield-icon-spacing-block-invalid`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-edge-to-validation-icon-small": {
+      "value": "9px",
+      "description": "Used by `--spectrum-textfield-icon-spacing-inline-end-valid`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-top-to-validation-icon-small": {
+      "value": "7px",
+      "description": "Used by `--spectrum-textfield-icon-spacing-block-valid`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-75": {
+      "value": "12px",
+      "description": "Used by `--spectrum-textfield-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-200": {
+      "value": "40px",
+      "description": "Used by `--spectrum-textfield-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-default-width-large": {
+      "value": "224px",
+      "description": "Used by `--spectrum-textfield-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-medium-size-large": {
+      "value": "9px",
+      "description": "Used by `--spectrum-textfield-corner-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-text-200": {
+      "value": "15px",
+      "description": "Used by `--spectrum-textfield-spacing-inline`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-200": {
+      "value": "9px",
+      "description": "Used by `--spectrum-textfield-spacing-block-start`, `--spectrum-textfield-character-count-spacing-block-side`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-200": {
+      "value": "11px",
+      "description": "Used by `--spectrum-textfield-spacing-block-end`, `--spectrum-textfield-character-count-spacing-block`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-200": {
+      "value": "22px",
+      "description": "Used by `--spectrum-textfield-icon-size-invalid`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-checkmark-icon-size-200": {
+      "value": "12px",
+      "description": "Used by `--spectrum-textfield-icon-size-valid`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-200": {
+      "value": "7px",
+      "description": "Used by `--spectrum-textfield-icon-spacing-inline-start-invalid`, `--spectrum-textfield-icon-spacing-inline-start-valid`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-edge-to-alert-icon-large": {
+      "value": "15px",
+      "description": "Used by `--spectrum-textfield-icon-spacing-inline-end-invalid`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-workflow-icon-200": {
+      "value": "9px",
+      "description": "Used by `--spectrum-textfield-icon-spacing-block-invalid`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-edge-to-validation-icon-large": {
+      "value": "15px",
+      "description": "Used by `--spectrum-textfield-icon-spacing-inline-end-valid`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-top-to-validation-icon-large": {
+      "value": "14px",
+      "description": "Used by `--spectrum-textfield-icon-spacing-block-valid`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-200": {
+      "value": "16px",
+      "description": "Used by `--spectrum-textfield-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-300": {
+      "value": "48px",
+      "description": "Used by `--spectrum-textfield-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-default-width-extra-large": {
+      "value": "240px",
+      "description": "Used by `--spectrum-textfield-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-medium-size-extra-large": {
+      "value": "10px",
+      "description": "Used by `--spectrum-textfield-corner-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-text-300": {
+      "value": "18px",
+      "description": "Used by `--spectrum-textfield-spacing-inline`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-300": {
+      "value": "12px",
+      "description": "Used by `--spectrum-textfield-spacing-block-start`, `--spectrum-textfield-character-count-spacing-block-side`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-300": {
+      "value": "14px",
+      "description": "Used by `--spectrum-textfield-spacing-block-end`, `--spectrum-textfield-character-count-spacing-block`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-300": {
+      "value": "26px",
+      "description": "Used by `--spectrum-textfield-icon-size-invalid`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-checkmark-icon-size-300": {
+      "value": "14px",
+      "description": "Used by `--spectrum-textfield-icon-size-valid`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-300": {
+      "value": "8px",
+      "description": "Used by `--spectrum-textfield-icon-spacing-inline-start-invalid`, `--spectrum-textfield-icon-spacing-inline-start-valid`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-edge-to-alert-icon-extra-large": {
+      "value": "18px",
+      "description": "Used by `--spectrum-textfield-icon-spacing-inline-end-invalid`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-workflow-icon-300": {
+      "value": "11px",
+      "description": "Used by `--spectrum-textfield-icon-spacing-block-invalid`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-edge-to-validation-icon-extra-large": {
+      "value": "18px",
+      "description": "Used by `--spectrum-textfield-icon-spacing-inline-end-valid`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-field-top-to-validation-icon-extra-large": {
+      "value": "17px",
+      "description": "Used by `--spectrum-textfield-icon-spacing-block-valid`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-300": {
+      "value": "18px",
+      "description": "Used by `--spectrum-textfield-font-size`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {
+    "highcontrast-textfield-background-color-disabled": {
+      "value": "var(--mod-textfield-background-color-disabled, var(--spectrum-gray-25))",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `--spectrum-textfield-background-color-disabled`. <br/>Defaults to `var(--mod-textfield-background-color-disabled, var(--spectrum-gray-25))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-textfield-border-color-disabled": {
+      "value": "var(--mod-textfield-border-color-disabled, var(--spectrum-disabled-border-color))",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `--spectrum-textfield-border-color-disabled`, `.spectrum-Textfield.is-readOnly.is-disabled .spectrum-Textfield-input`. <br/>Defaults to `var(--mod-textfield-border-color-disabled, var(--spectrum-disabled-border-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-textfield-text-color-disabled": {
+      "value": "var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))",
+      "description": "Defined in `.spectrum-Textfield, .spectrum-Textfield .spectrum-Textfield-input::placeholder`. <br/>Used by `.spectrum-Textfield.is-disabled .spectrum-FieldLabel`, `.spectrum-Textfield.is-disabled .spectrum-HelpText .spectrum-HelpText-text`, `.spectrum-Textfield.is-disabled .spectrum-Textfield-characterCount`, `.spectrum-Textfield-input:disabled, .spectrum-Textfield-input:disabled::placeholder, .spectrum-Textfield.is-disabled .spectrum-Textfield-input, .spectrum-Textfield.is-disabled .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield.is-disabled .spectrum-Textfield-input:read-only::placeholder, .spectrum-Textfield.is-disabled .spectrum-Textfield.is-readOnly .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input, .spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield.is-disabled .spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input::placeholder, .spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input:read-only::placeholder, .spectrum-Textfield.is-disabled:hover .spectrum-Textfield.is-readOnly .spectrum-Textfield-input::placeholder, .spectrum-Textfield.is-disabled:hover .spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield.is-readOnly.is-disabled .spectrum-Textfield-input`. <br/>Defaults to `var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-textfield-background-color": {
+      "value": "var(--spectrum-textfield-background-color)",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield-input`. <br/>Defaults to `var(--spectrum-textfield-background-color)`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-textfield-border-color": {
+      "value": "var(--mod-textfield-border-color, var(--spectrum-textfield-border-color))",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield-input`. <br/>Defaults to `var(--mod-textfield-border-color, var(--spectrum-textfield-border-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-textfield-text-color-default": {
+      "value": "var(--mod-textfield-text-color-default, var(--spectrum-textfield-text-color-default))",
+      "description": "Defined in `.spectrum-Textfield, .spectrum-Textfield .spectrum-Textfield-input::placeholder`. <br/>Used by `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`. <br/>Defaults to `var(--mod-textfield-text-color-default, var(--spectrum-textfield-text-color-default))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-textfield-border-color-focus": {
+      "value": "var(--mod-textfield-border-color-focus, var(--spectrum-textfield-border-color-focus))",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield-input:focus, .spectrum-Textfield.is-focused .spectrum-Textfield-input`. <br/>Defaults to `var(--mod-textfield-border-color-focus, var(--spectrum-textfield-border-color-focus))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-textfield-text-color-focus": {
+      "value": "var(--mod-textfield-text-color-focus, var(--spectrum-textfield-text-color-focus))",
+      "description": "Defined in `.spectrum-Textfield, .spectrum-Textfield .spectrum-Textfield-input::placeholder`. <br/>Used by `.spectrum-Textfield-input:focus, .spectrum-Textfield-input:focus::placeholder, .spectrum-Textfield.is-focused .spectrum-Textfield-input, .spectrum-Textfield.is-focused .spectrum-Textfield-input::placeholder`. <br/>Defaults to `var(--mod-textfield-text-color-focus, var(--spectrum-textfield-text-color-focus))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-textfield-border-color-keyboard-focus": {
+      "value": "var(--mod-textfield-border-color-keyboard-focus, var(--spectrum-textfield-border-color-keyboard-focus))",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield.is-keyboardFocused .spectrum-Textfield-input`. <br/>Defaults to `var(--mod-textfield-border-color-keyboard-focus, var(--spectrum-textfield-border-color-keyboard-focus))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-textfield-focus-indicator-color": {
+      "value": "var(--mod-textfield-focus-indicator-color, var(--spectrum-textfield-focus-indicator-color))",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield.is-keyboardFocused .spectrum-Textfield-input`. <br/>Defaults to `var(--mod-textfield-focus-indicator-color, var(--spectrum-textfield-focus-indicator-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-textfield-text-color-keyboard-focus": {
+      "value": "var(--mod-textfield-text-color-keyboard-focus, var(--spectrum-textfield-text-color-keyboard-focus))",
+      "description": "Defined in `.spectrum-Textfield, .spectrum-Textfield .spectrum-Textfield-input::placeholder`. <br/>Used by `.spectrum-Textfield.is-keyboardFocused .spectrum-Textfield-input, .spectrum-Textfield.is-keyboardFocused .spectrum-Textfield-input::placeholder`. <br/>Defaults to `var(--mod-textfield-text-color-keyboard-focus, var(--spectrum-textfield-text-color-keyboard-focus))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-textfield-text-color-valid": {
+      "value": "var(--mod-textfield-text-color-valid, var(--spectrum-textfield-text-color-valid))",
+      "description": "Defined in `.spectrum-Textfield, .spectrum-Textfield .spectrum-Textfield-input::placeholder`. <br/>Used by `.spectrum-Textfield.is-valid .spectrum-Textfield-input`. <br/>Defaults to `var(--mod-textfield-text-color-valid, var(--spectrum-textfield-text-color-valid))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-textfield-text-color-invalid": {
+      "value": "var(--mod-textfield-text-color-invalid, var(--spectrum-textfield-text-color-invalid))",
+      "description": "Defined in `.spectrum-Textfield, .spectrum-Textfield .spectrum-Textfield-input::placeholder`. <br/>Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-input`. <br/>Defaults to `var(--mod-textfield-text-color-invalid, var(--spectrum-textfield-text-color-invalid))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-textfield-border-color-invalid-default": {
+      "value": "var(--mod-textfield-border-color-invalid-default, var(--spectrum-textfield-border-color-invalid-default))",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-input`. <br/>Defaults to `var(--mod-textfield-border-color-invalid-default, var(--spectrum-textfield-border-color-invalid-default))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-textfield-border-color-invalid-focus": {
+      "value": "var(--mod-textfield-border-color-invalid-focus, var(--spectrum-textfield-border-color-invalid-focus))",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-input:focus, .spectrum-Textfield.is-invalid.is-focused .spectrum-Textfield-input, .spectrum-Textfield.is-invalid:focus .spectrum-Textfield-input`. <br/>Defaults to `var(--mod-textfield-border-color-invalid-focus, var(--spectrum-textfield-border-color-invalid-focus))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-textfield-border-color-invalid-keyboard-focus": {
+      "value": "var(--mod-textfield-border-color-invalid-keyboard-focus, var(--spectrum-textfield-border-color-invalid-keyboard-focus))",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield.is-invalid.is-keyboardFocused .spectrum-Textfield-input`. <br/>Defaults to `var(--mod-textfield-border-color-invalid-keyboard-focus, var(--spectrum-textfield-border-color-invalid-keyboard-focus))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-textfield-border-color-readonly": {
+      "value": "CanvasText",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield-input:read-only, .spectrum-Textfield.is-readOnly .spectrum-Textfield-input`, `.spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input`. <br/>Defaults to `CanvasText`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-textfield-text-color-readonly": {
+      "value": "var(--mod-textfield-text-color-readonly, var(--spectrum-textfield-text-color-readonly))",
+      "description": "Defined in `.spectrum-Textfield, .spectrum-Textfield .spectrum-Textfield-input::placeholder`. <br/>Used by `.spectrum-Textfield-input:read-only, .spectrum-Textfield.is-readOnly .spectrum-Textfield-input`, `.spectrum-Textfield-input:read-only::placeholder, .spectrum-Textfield.is-readOnly .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input, .spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input::placeholder`. <br/>Defaults to `var(--mod-textfield-text-color-readonly, var(--spectrum-textfield-text-color-readonly))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-textfield-border-color-hover": {
+      "value": "var(--mod-textfield-border-color-hover, var(--spectrum-textfield-border-color-hover))",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield-input:hover, .spectrum-Textfield:hover .spectrum-Textfield-input`. <br/>Defaults to `var(--mod-textfield-border-color-hover, var(--spectrum-textfield-border-color-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-textfield-text-color-hover": {
+      "value": "var(--mod-textfield-text-color-hover, var(--spectrum-textfield-text-color-hover))",
+      "description": "Defined in `.spectrum-Textfield, .spectrum-Textfield .spectrum-Textfield-input::placeholder`. <br/>Used by `.spectrum-Textfield-input:hover, .spectrum-Textfield-input:hover::placeholder, .spectrum-Textfield:hover .spectrum-Textfield-input, .spectrum-Textfield:hover .spectrum-Textfield-input::placeholder`. <br/>Defaults to `var(--mod-textfield-text-color-hover, var(--spectrum-textfield-text-color-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-textfield-border-color-focus-hover": {
+      "value": "var(--mod-textfield-border-color-focus-hover, var(--spectrum-textfield-border-color-focus-hover))",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield-input:focus:hover, .spectrum-Textfield.is-focused .spectrum-Textfield-input:hover`, `.spectrum-Textfield-input:focus:hover, .spectrum-Textfield.is-focused:hover .spectrum-Textfield-input, .spectrum-Textfield.is-keyboardFocused:hover .spectrum-Textfield-input, .spectrum-Textfield:focus:hover .spectrum-Textfield-input`. <br/>Defaults to `var(--mod-textfield-border-color-focus-hover, var(--spectrum-textfield-border-color-focus-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-textfield-text-color-focus-hover": {
+      "value": "var(--mod-textfield-text-color-focus-hover, var(--spectrum-textfield-text-color-focus-hover))",
+      "description": "Defined in `.spectrum-Textfield, .spectrum-Textfield .spectrum-Textfield-input::placeholder`. <br/>Used by `.spectrum-Textfield-input:focus:hover, .spectrum-Textfield-input:focus:hover::placeholder, .spectrum-Textfield.is-focused .spectrum-Textfield-input:hover, .spectrum-Textfield.is-focused .spectrum-Textfield-input:hover::placeholder`, `.spectrum-Textfield-input:focus:hover, .spectrum-Textfield.is-focused:hover .spectrum-Textfield-input, .spectrum-Textfield.is-keyboardFocused:hover .spectrum-Textfield-input, .spectrum-Textfield:focus:hover .spectrum-Textfield-input`, `.spectrum-Textfield-input:focus:hover::placeholder, .spectrum-Textfield.is-focused:hover .spectrum-Textfield-input::placeholder, .spectrum-Textfield.is-keyboardFocused:hover .spectrum-Textfield-input::placeholder, .spectrum-Textfield:focus:hover .spectrum-Textfield-input::placeholder`. <br/>Defaults to `var(--mod-textfield-text-color-focus-hover, var(--spectrum-textfield-text-color-focus-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-textfield-border-color-invalid-hover": {
+      "value": "var(--mod-textfield-border-color-invalid-hover, var(--spectrum-textfield-border-color-invalid-hover))",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield.is-invalid:hover:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input, .spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input:hover`. <br/>Defaults to `var(--mod-textfield-border-color-invalid-hover, var(--spectrum-textfield-border-color-invalid-hover))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-textfield-border-color-invalid-focus-hover": {
+      "value": "var(--mod-textfield-border-color-invalid-focus-hover, var(--spectrum-textfield-border-color-invalid-focus-hover))",
+      "description": "Defined in `.spectrum-Textfield`. <br/>Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-input:focus:hover, .spectrum-Textfield.is-invalid.is-focused .spectrum-Textfield-input:hover, .spectrum-Textfield.is-invalid.is-focused:hover .spectrum-Textfield-input, .spectrum-Textfield.is-invalid.is-keyboardFocused:hover .spectrum-Textfield-input, .spectrum-Textfield.is-invalid:focus .spectrum-Textfield-input:hover, .spectrum-Textfield.is-invalid:focus:hover .spectrum-Textfield-input`. <br/>Defaults to `var(--mod-textfield-border-color-invalid-focus-hover, var(--spectrum-textfield-border-color-invalid-focus-hover))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/textfield/stories/template.js b/components/textfield/stories/template.js
index 22d119703e8..5feb0356cbd 100644
--- a/components/textfield/stories/template.js
+++ b/components/textfield/stories/template.js
@@ -53,6 +53,7 @@ import "../index.css";
  */
 export const Template = ({
 	rootClass = "spectrum-Textfield",
+	id = getRandomId("text-field"),
 	size = "m",
 	customClasses = [],
 	customInputClasses = [],
@@ -81,7 +82,6 @@ export const Template = ({
 	name,
 	step,
 	helpText = "",
-	id = getRandomId("textfield"),
 	value = "",
 	type = "text",
 	autocomplete = true,
diff --git a/components/textfield/stories/textarea.stories.js b/components/textfield/stories/textarea.stories.js
index 2fda3aeded8..8f06ea1dd24 100644
--- a/components/textfield/stories/textarea.stories.js
+++ b/components/textfield/stories/textarea.stories.js
@@ -1,11 +1,13 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { HelpTextOptionsTextArea, InvalidOptionsTextArea, RequiredOptionsTextArea, Template, TextAreaOptions } from "./textarea.template.js";
 import { TextAreaGroup } from "./textarea.test.js";
 import { default as Textfield } from "./textfield.stories.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * A text area is multi-line text field using the `<textarea>` element that lets a user input a longer amount of text than a standard text field. It
  * can include all of the standard validation options supported by the text field component.
@@ -33,6 +35,10 @@ export default {
 		status: {
 			type: "migrated",
 		},
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 	tags: ["migrated"],
 };
diff --git a/components/textfield/stories/textfield.stories.js b/components/textfield/stories/textfield.stories.js
index 293bd831d9c..b8189b99c99 100644
--- a/components/textfield/stories/textfield.stories.js
+++ b/components/textfield/stories/textfield.stories.js
@@ -1,11 +1,13 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, isFocused, isHovered, isInvalid, isKeyboardFocused, isReadOnly, isRequired, isValid, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { HelpTextOptions, InvalidOptions, RequiredOptions, Template, TextFieldOptions } from "./template.js";
 import { TextFieldGroup } from "./textfield.test.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * Text fields are text boxes that allow users to input custom text entries with a keyboard. Various decorations can be displayed around the field to
  * communicate the entry requirements.
@@ -157,6 +159,10 @@ export default {
 		status: {
 			type: "migrated",
 		},
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 	tags: ["migrated"],
 };
diff --git a/components/thumbnail/dist/metadata.json b/components/thumbnail/dist/metadata.json
index 2a5fa051ef2..1976f3363ec 100644
--- a/components/thumbnail/dist/metadata.json
+++ b/components/thumbnail/dist/metadata.json
@@ -20,80 +20,370 @@
     ".spectrum-Thumbnail-image-wrapper",
     ".spectrum-Thumbnail-layer",
     ".spectrum-Thumbnail-layer-inner",
-    ".spectrum-Thumbnail-layer.is-selected",
     ".spectrum-Thumbnail-layer:before",
+    ".spectrum-Thumbnail-layer.is-selected",
+    ".spectrum-Thumbnail:before",
     ".spectrum-Thumbnail.is-disabled",
     ".spectrum-Thumbnail.is-focused",
     ".spectrum-Thumbnail.is-focused .spectrum-Thumbnail-image-wrapper",
-    ".spectrum-Thumbnail.is-focused:after",
-    ".spectrum-Thumbnail:before"
-  ],
-  "modifiers": [
-    "--mod-thumbnail-border-color",
-    "--mod-thumbnail-border-color-selected",
-    "--mod-thumbnail-border-radius",
-    "--mod-thumbnail-border-width",
-    "--mod-thumbnail-border-width-selected",
-    "--mod-thumbnail-color-opacity-disabled",
-    "--mod-thumbnail-focus-indicator-color",
-    "--mod-thumbnail-focus-indicator-gap",
-    "--mod-thumbnail-focus-indicator-thickness",
-    "--mod-thumbnail-layer-border-color-inner",
-    "--mod-thumbnail-layer-border-color-outer",
-    "--mod-thumbnail-layer-border-width-inner",
-    "--mod-thumbnail-layer-border-width-outer",
-    "--mod-thumbnail-size"
-  ],
-  "component": [
-    "--spectrum-thumbnail-border-color",
-    "--spectrum-thumbnail-border-color-selected",
-    "--spectrum-thumbnail-border-opacity",
-    "--spectrum-thumbnail-border-radius",
-    "--spectrum-thumbnail-border-width",
-    "--spectrum-thumbnail-border-width-selected",
-    "--spectrum-thumbnail-color-opacity-disabled",
-    "--spectrum-thumbnail-corner-radius",
-    "--spectrum-thumbnail-focus-indicator-color",
-    "--spectrum-thumbnail-focus-indicator-gap",
-    "--spectrum-thumbnail-focus-indicator-thickness",
-    "--spectrum-thumbnail-layer-border-color-inner",
-    "--spectrum-thumbnail-layer-border-color-outer",
-    "--spectrum-thumbnail-layer-border-width-inner",
-    "--spectrum-thumbnail-layer-border-width-outer",
-    "--spectrum-thumbnail-opacity-checkerboard-square-size",
-    "--spectrum-thumbnail-opacity-disabled",
-    "--spectrum-thumbnail-size",
-    "--spectrum-thumbnail-size-100",
-    "--spectrum-thumbnail-size-1000",
-    "--spectrum-thumbnail-size-200",
-    "--spectrum-thumbnail-size-300",
-    "--spectrum-thumbnail-size-400",
-    "--spectrum-thumbnail-size-50",
-    "--spectrum-thumbnail-size-500",
-    "--spectrum-thumbnail-size-600",
-    "--spectrum-thumbnail-size-700",
-    "--spectrum-thumbnail-size-75",
-    "--spectrum-thumbnail-size-800",
-    "--spectrum-thumbnail-size-900"
-  ],
-  "global": [
-    "--spectrum-accent-color-800",
-    "--spectrum-border-width-100",
-    "--spectrum-border-width-200",
-    "--spectrum-border-width-400",
-    "--spectrum-focus-indicator-color",
-    "--spectrum-focus-indicator-gap",
-    "--spectrum-focus-indicator-thickness",
-    "--spectrum-gray-500",
-    "--spectrum-gray-800-rgb",
-    "--spectrum-white"
+    ".spectrum-Thumbnail.is-focused:after"
   ],
-  "passthroughs": ["--mod-opacity-checkerboard-size"],
-  "high-contrast": [
-    "--highcontrast-thumbnail-border-color",
-    "--highcontrast-thumbnail-border-color-selected",
-    "--highcontrast-thumbnail-focus-indicator-color",
-    "--highcontrast-thumbnail-layer-border-color-inner",
-    "--highcontrast-thumbnail-layer-border-color-outer"
-  ]
+  "modifiers": {
+    "mod-thumbnail-size": {
+      "description": "Used by `--spectrum-thumbnail-size`, `.spectrum-Thumbnail`. <br/>Defaults to `var(--spectrum-thumbnail-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-thumbnail-border-color": {
+      "description": "Used by `--spectrum-thumbnail-border-color`, `.spectrum-Thumbnail:before`. <br/>Defaults to `var(--spectrum-thumbnail-border-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-thumbnail-border-color-selected": {
+      "description": "Used by `--spectrum-thumbnail-border-color-selected`, `.spectrum-Thumbnail-layer.is-selected`. <br/>Defaults to `var(--spectrum-thumbnail-border-color-selected)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-thumbnail-border-width": {
+      "description": "Used by `--spectrum-thumbnail-border-width`, `.spectrum-Thumbnail:before`. <br/>Defaults to `var(--spectrum-thumbnail-border-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-thumbnail-border-width-selected": {
+      "description": "Used by `--spectrum-thumbnail-border-width-selected`, `.spectrum-Thumbnail-layer.is-selected`. <br/>Defaults to `var(--spectrum-thumbnail-border-width-selected)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-thumbnail-border-radius": {
+      "description": "Used by `--spectrum-thumbnail-border-radius-default`, `.spectrum-Thumbnail, .spectrum-Thumbnail:before`, `.spectrum-Thumbnail.is-focused:after`, `.spectrum-Thumbnail.is-focused .spectrum-Thumbnail-image-wrapper`, `.spectrum-Thumbnail-background`. <br/>Defaults to `var(--spectrum-thumbnail-border-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-thumbnail-layer-border-color-inner": {
+      "description": "Used by `--spectrum-thumbnail-layer-border-color-inner`, `.spectrum-Thumbnail-layer-inner`. <br/>Defaults to `var(--spectrum-thumbnail-layer-border-color-inner)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-thumbnail-layer-border-color-outer": {
+      "description": "Used by `--spectrum-thumbnail-layer-border-color-outer`, `.spectrum-Thumbnail-layer`. <br/>Defaults to `var(--spectrum-thumbnail-layer-border-color-outer)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-thumbnail-layer-border-width-inner": {
+      "description": "Used by `--spectrum-thumbnail-layer-border-width-inner`, `.spectrum-Thumbnail-layer.is-selected`, `.spectrum-Thumbnail-layer-inner`. <br/>Defaults to `var(--spectrum-thumbnail-layer-border-width-inner)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-thumbnail-layer-border-width-outer": {
+      "description": "Used by `--spectrum-thumbnail-layer-border-width-outer`, `.spectrum-Thumbnail-layer`, `.spectrum-Thumbnail-layer-inner`. <br/>Defaults to `var(--spectrum-thumbnail-layer-border-width-outer)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-thumbnail-focus-indicator-thickness": {
+      "description": "Used by `--spectrum-thumbnail-focus-indicator-thickness`, `.spectrum-Thumbnail.is-focused:after`. <br/>Defaults to `var(--spectrum-thumbnail-focus-indicator-thickness)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-thumbnail-focus-indicator-gap": {
+      "description": "Used by `--spectrum-thumbnail-focus-indicator-gap`, `.spectrum-Thumbnail.is-focused:after`. <br/>Defaults to `var(--spectrum-thumbnail-focus-indicator-gap)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-thumbnail-focus-indicator-color": {
+      "description": "Used by `--spectrum-thumbnail-focus-indicator-color`, `.spectrum-Thumbnail.is-focused:after`. <br/>Defaults to `var(--spectrum-thumbnail-focus-indicator-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-thumbnail-color-opacity-disabled": {
+      "description": "Used by `.spectrum-Thumbnail.is-disabled`. <br/>Defaults to `var(--spectrum-thumbnail-color-opacity-disabled)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-thumbnail-size": {
+      "value": "var(--mod-thumbnail-size, var(--spectrum-thumbnail-sized-size))",
+      "description": "Defined in `.spectrum-Thumbnail`, `.spectrum-Thumbnail--size50`, `.spectrum-Thumbnail--size75`, `.spectrum-Thumbnail--size100`, `.spectrum-Thumbnail--size200`, `.spectrum-Thumbnail--size300`, `.spectrum-Thumbnail--size400`, `.spectrum-Thumbnail--size500`, `.spectrum-Thumbnail--size600`, `.spectrum-Thumbnail--size700`, `.spectrum-Thumbnail--size800`, `.spectrum-Thumbnail--size900`, `.spectrum-Thumbnail--size1000`. <br/>Used by `.spectrum-Thumbnail`, `.spectrum-Thumbnail-layer-inner`. <br/>Defaults to `var(--mod-thumbnail-size, var(--spectrum-thumbnail-sized-size))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-thumbnail-size-500": {
+      "value": "40px",
+      "description": "Used by `--spectrum-thumbnail-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-thumbnail-border-radius": {
+      "value": "3px",
+      "description": "Defined in `.spectrum-Thumbnail`. <br/>Used by `--spectrum-thumbnail-border-radius-default`, `.spectrum-Thumbnail, .spectrum-Thumbnail:before`, `.spectrum-Thumbnail.is-focused:after`, `.spectrum-Thumbnail.is-focused .spectrum-Thumbnail-image-wrapper`, `.spectrum-Thumbnail-background`. <br/>Defaults to `var(--spectrum-thumbnail-corner-radius)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-thumbnail-corner-radius": {
+      "value": "3px",
+      "description": "Used by `--spectrum-thumbnail-border-radius`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-thumbnail-border-width": {
+      "value": "var(--mod-thumbnail-border-width, var(--spectrum-border-width-100))",
+      "description": "Defined in `.spectrum-Thumbnail`. <br/>Used by `.spectrum-Thumbnail:before`. <br/>Defaults to `var(--mod-thumbnail-border-width, var(--spectrum-border-width-100))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-thumbnail-border-color": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-Thumbnail`. <br/>Used by `.spectrum-Thumbnail:before`. <br/>Defaults to `var(--highcontrast-thumbnail-border-color, var(--mod-thumbnail-border-color, rgb(var(--spectrum-gray-800-rgb), var(--spectrum-thumbnail-border-opacity))))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-thumbnail-border-opacity": {
+      "value": "0.1",
+      "description": "Used by `--spectrum-thumbnail-border-color`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-thumbnail-layer-border-width-inner": {
+      "value": "var(--mod-thumbnail-layer-border-width-inner, var(--spectrum-border-width-400))",
+      "description": "Defined in `.spectrum-Thumbnail`. <br/>Used by `.spectrum-Thumbnail-layer.is-selected`, `.spectrum-Thumbnail-layer-inner`. <br/>Defaults to `var(--mod-thumbnail-layer-border-width-inner, var(--spectrum-border-width-400))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-thumbnail-layer-border-color-inner": {
+      "value": "var(--highcontrast-thumbnail-layer-border-color-inner, var(--mod-thumbnail-layer-border-color-inner, var(--spectrum-white)))",
+      "description": "Defined in `.spectrum-Thumbnail`. <br/>Used by `.spectrum-Thumbnail-layer-inner`. <br/>Defaults to `var(--highcontrast-thumbnail-layer-border-color-inner, var(--mod-thumbnail-layer-border-color-inner, var(--spectrum-white)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-thumbnail-layer-border-width-outer": {
+      "value": "var(--mod-thumbnail-layer-border-width-outer, var(--spectrum-border-width-100))",
+      "description": "Defined in `.spectrum-Thumbnail`. <br/>Used by `.spectrum-Thumbnail-layer`, `.spectrum-Thumbnail-layer-inner`. <br/>Defaults to `var(--mod-thumbnail-layer-border-width-outer, var(--spectrum-border-width-100))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-thumbnail-layer-border-color-outer": {
+      "value": "var(--highcontrast-thumbnail-layer-border-color-outer, var(--mod-thumbnail-layer-border-color-outer, var(--spectrum-gray-500)))",
+      "description": "Defined in `.spectrum-Thumbnail`. <br/>Used by `.spectrum-Thumbnail-layer`. <br/>Defaults to `var(--highcontrast-thumbnail-layer-border-color-outer, var(--mod-thumbnail-layer-border-color-outer, var(--spectrum-gray-500)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-thumbnail-border-width-selected": {
+      "value": "var(--mod-thumbnail-border-width-selected, var(--spectrum-border-width-200))",
+      "description": "Defined in `.spectrum-Thumbnail`. <br/>Used by `.spectrum-Thumbnail-layer.is-selected`. <br/>Defaults to `var(--mod-thumbnail-border-width-selected, var(--spectrum-border-width-200))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-thumbnail-border-color-selected": {
+      "value": "var(--highcontrast-thumbnail-border-color-selected, var(--mod-thumbnail-border-color-selected, var(--spectrum-accent-color-800)))",
+      "description": "Defined in `.spectrum-Thumbnail`. <br/>Used by `.spectrum-Thumbnail-layer.is-selected`. <br/>Defaults to `var(--highcontrast-thumbnail-border-color-selected, var(--mod-thumbnail-border-color-selected, var(--spectrum-accent-color-800)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-thumbnail-focus-indicator-thickness": {
+      "value": "var(--mod-thumbnail-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness))",
+      "description": "Defined in `.spectrum-Thumbnail`. <br/>Used by `.spectrum-Thumbnail.is-focused:after`. <br/>Defaults to `var(--mod-thumbnail-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-thumbnail-focus-indicator-gap": {
+      "value": "var(--mod-thumbnail-focus-indicator-gap, var(--spectrum-focus-indicator-gap))",
+      "description": "Defined in `.spectrum-Thumbnail`. <br/>Used by `.spectrum-Thumbnail.is-focused:after`. <br/>Defaults to `var(--mod-thumbnail-focus-indicator-gap, var(--spectrum-focus-indicator-gap))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-thumbnail-focus-indicator-color": {
+      "value": "var(--highcontrast-thumbnail-focus-indicator-color, var(--mod-thumbnail-focus-indicator-color, var(--spectrum-focus-indicator-color)))",
+      "description": "Defined in `.spectrum-Thumbnail`. <br/>Used by `.spectrum-Thumbnail.is-focused:after`. <br/>Defaults to `var(--highcontrast-thumbnail-focus-indicator-color, var(--mod-thumbnail-focus-indicator-color, var(--spectrum-focus-indicator-color)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-thumbnail-opacity-checkerboard-square-size": {
+      "value": "4px",
+      "description": "Used by `--mod-opacity-checkerboard-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-thumbnail-size-50": {
+      "value": "16px",
+      "description": "Used by `--spectrum-thumbnail-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-thumbnail-size-75": {
+      "value": "20px",
+      "description": "Used by `--spectrum-thumbnail-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-thumbnail-size-100": {
+      "value": "24px",
+      "description": "Used by `--spectrum-thumbnail-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-thumbnail-size-200": {
+      "value": "28px",
+      "description": "Used by `--spectrum-thumbnail-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-thumbnail-size-300": {
+      "value": "32px",
+      "description": "Used by `--spectrum-thumbnail-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-thumbnail-size-400": {
+      "value": "36px",
+      "description": "Used by `--spectrum-thumbnail-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-thumbnail-size-600": {
+      "value": "44px",
+      "description": "Used by `--spectrum-thumbnail-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-thumbnail-size-700": {
+      "value": "48px",
+      "description": "Used by `--spectrum-thumbnail-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-thumbnail-size-800": {
+      "value": "52px",
+      "description": "Used by `--spectrum-thumbnail-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-thumbnail-size-900": {
+      "value": "56px",
+      "description": "Used by `--spectrum-thumbnail-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-thumbnail-size-1000": {
+      "value": "64px",
+      "description": "Used by `--spectrum-thumbnail-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-thumbnail-sized-size": {
+      "description": "Used by `--spectrum-thumbnail-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-thumbnail-border-radius-default": {
+      "value": "var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius))",
+      "description": "Defined in `.spectrum-Thumbnail`. <br/>Defaults to `var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-thumbnail-color-opacity-disabled": {
+      "value": "0.3",
+      "description": "Defined in `.spectrum-Thumbnail`. <br/>Used by `.spectrum-Thumbnail.is-disabled`. <br/>Defaults to `var(--spectrum-thumbnail-opacity-disabled)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-thumbnail-opacity-disabled": {
+      "value": "0.3",
+      "description": "Used by `--spectrum-thumbnail-color-opacity-disabled`.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-border-width-100": {
+      "value": "1px",
+      "description": "Used by `--spectrum-thumbnail-border-width`, `--spectrum-thumbnail-layer-border-width-outer`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-800-rgb": {
+      "description": "Used by `--spectrum-thumbnail-border-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-border-width-400": {
+      "value": "4px",
+      "description": "Used by `--spectrum-thumbnail-layer-border-width-inner`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-white": {
+      "value": "rgb(255, 255, 255)",
+      "description": "Used by `--spectrum-thumbnail-layer-border-color-inner`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-500": {
+      "value": "light-dark(rgb(143, 143, 143), rgb(109, 109, 109))",
+      "description": "Used by `--spectrum-thumbnail-layer-border-color-outer`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-border-width-200": {
+      "value": "2px",
+      "description": "Used by `--spectrum-thumbnail-border-width-selected`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-accent-color-800": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Used by `--spectrum-thumbnail-border-color-selected`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-thickness": {
+      "value": "2px",
+      "description": "Used by `--spectrum-thumbnail-focus-indicator-thickness`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-gap": {
+      "value": "2px",
+      "description": "Used by `--spectrum-thumbnail-focus-indicator-gap`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-focus-indicator-color": {
+      "value": "var(--spectrum-blue-800)",
+      "description": "Used by `--spectrum-thumbnail-focus-indicator-color`.",
+      "control": "color",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {
+    "mod-opacity-checkerboard-size": {
+      "category": "Passthrough"
+    }
+  },
+  "high-contrast": {
+    "highcontrast-thumbnail-border-color": {
+      "value": "var(--mod-thumbnail-border-color, var(--spectrum-thumbnail-border-color))",
+      "description": "Defined in `.spectrum-Thumbnail`. <br/>Used by `--spectrum-thumbnail-border-color`, `.spectrum-Thumbnail:before`. <br/>Defaults to `var(--mod-thumbnail-border-color, var(--spectrum-thumbnail-border-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-thumbnail-border-color-selected": {
+      "value": "var(--mod-thumbnail-border-color-selected, var(--spectrum-thumbnail-border-color-selected))",
+      "description": "Defined in `.spectrum-Thumbnail`. <br/>Used by `--spectrum-thumbnail-border-color-selected`, `.spectrum-Thumbnail-layer.is-selected`. <br/>Defaults to `var(--mod-thumbnail-border-color-selected, var(--spectrum-thumbnail-border-color-selected))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-thumbnail-layer-border-color-inner": {
+      "value": "var(--mod-thumbnail-layer-border-color-inner, var(--spectrum-thumbnail-layer-border-color-inner))",
+      "description": "Defined in `.spectrum-Thumbnail`. <br/>Used by `--spectrum-thumbnail-layer-border-color-inner`, `.spectrum-Thumbnail-layer-inner`. <br/>Defaults to `var(--mod-thumbnail-layer-border-color-inner, var(--spectrum-thumbnail-layer-border-color-inner))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-thumbnail-layer-border-color-outer": {
+      "value": "var(--mod-thumbnail-layer-border-color-outer, var(--spectrum-thumbnail-layer-border-color-outer))",
+      "description": "Defined in `.spectrum-Thumbnail`. <br/>Used by `--spectrum-thumbnail-layer-border-color-outer`, `.spectrum-Thumbnail-layer`. <br/>Defaults to `var(--mod-thumbnail-layer-border-color-outer, var(--spectrum-thumbnail-layer-border-color-outer))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-thumbnail-focus-indicator-color": {
+      "value": "var(--mod-thumbnail-focus-indicator-color, var(--spectrum-thumbnail-focus-indicator-color))",
+      "description": "Defined in `.spectrum-Thumbnail`. <br/>Used by `--spectrum-thumbnail-focus-indicator-color`, `.spectrum-Thumbnail.is-focused:after`. <br/>Defaults to `var(--mod-thumbnail-focus-indicator-color, var(--spectrum-thumbnail-focus-indicator-color))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/thumbnail/index.css b/components/thumbnail/index.css
index 4e28f1892e2..172a09c9258 100644
--- a/components/thumbnail/index.css
+++ b/components/thumbnail/index.css
@@ -86,6 +86,24 @@
 }
 
 .spectrum-Thumbnail {
+	--spectrum-thumbnail-size: var(--mod-thumbnail-size, var(--spectrum-thumbnail-sized-size));
+
+	/* @todo Refactor with --spectrum-thumbnail-border-color once gray rgb token is no longer necessary to workaround nested rgb color token value using rgba(). */
+	--spectrum-thumbnail-border-color: var(--highcontrast-thumbnail-border-color, var(--mod-thumbnail-border-color, rgb(var(--spectrum-gray-800-rgb), var(--spectrum-thumbnail-border-opacity))));
+	--spectrum-thumbnail-border-color-selected: var(--highcontrast-thumbnail-border-color-selected, var(--mod-thumbnail-border-color-selected, var(--spectrum-accent-color-800)));
+	--spectrum-thumbnail-border-width: var(--mod-thumbnail-border-width, var(--spectrum-border-width-100));
+	--spectrum-thumbnail-border-width-selected: var(--mod-thumbnail-border-width-selected, var(--spectrum-border-width-200));
+	--spectrum-thumbnail-border-radius-default: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius));
+
+	--spectrum-thumbnail-layer-border-color-inner: var(--highcontrast-thumbnail-layer-border-color-inner, var(--mod-thumbnail-layer-border-color-inner, var(--spectrum-white)));
+	--spectrum-thumbnail-layer-border-color-outer: var(--highcontrast-thumbnail-layer-border-color-outer, var(--mod-thumbnail-layer-border-color-outer, var(--spectrum-gray-500)));
+	--spectrum-thumbnail-layer-border-width-inner: var(--mod-thumbnail-layer-border-width-inner, var(--spectrum-border-width-400));
+	--spectrum-thumbnail-layer-border-width-outer: var(--mod-thumbnail-layer-border-width-outer, var(--spectrum-border-width-100));
+
+	--spectrum-thumbnail-focus-indicator-thickness: var(--mod-thumbnail-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness));
+	--spectrum-thumbnail-focus-indicator-gap: var(--mod-thumbnail-focus-indicator-gap, var(--spectrum-focus-indicator-gap));
+	--spectrum-thumbnail-focus-indicator-color: var(--highcontrast-thumbnail-focus-indicator-color, var(--mod-thumbnail-focus-indicator-color, var(--spectrum-focus-indicator-color)));
+
 	--spectrum-thumbnail-color-opacity-disabled: var(--spectrum-thumbnail-opacity-disabled);
 
 	position: relative;
diff --git a/components/thumbnail/stories/thumbnail.stories.js b/components/thumbnail/stories/thumbnail.stories.js
index f50ced94378..a9946580b37 100644
--- a/components/thumbnail/stories/thumbnail.stories.js
+++ b/components/thumbnail/stories/thumbnail.stories.js
@@ -1,11 +1,13 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isDisabled, isFocused, isSelected, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { Template } from "./template.js";
 import { ThumbnailGroup } from "./thumbnail.test.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * A thumbnail is used to display a preview of an image, layer, or effect.
  */
@@ -97,6 +99,10 @@ export default {
 		status: {
 			type: "migrated",
 		},
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 	tags: ["migrated"],
 };
diff --git a/components/toast/dist/metadata.json b/components/toast/dist/metadata.json
index 50e0b73d5b1..adfc977da86 100644
--- a/components/toast/dist/metadata.json
+++ b/components/toast/dist/metadata.json
@@ -14,88 +14,433 @@
     ".spectrum-Toast-content:lang(zh)",
     ".spectrum-Toast-text",
     ".spectrum-Toast-typeIcon",
-    ".spectrum-Toast.spectrum-Toast--noButton",
-    ".spectrum-Toast:not(:has(.spectrum-Button))"
+    ".spectrum-Toast:not(:has(.spectrum-Button))",
+    ".spectrum-Toast.spectrum-Toast--noButton"
   ],
-  "modifiers": [
-    "--mod-toast-background-color-default",
-    "--mod-toast-corner-radius",
-    "--mod-toast-font-family",
-    "--mod-toast-font-size",
-    "--mod-toast-font-style",
-    "--mod-toast-font-weight",
-    "--mod-toast-icon-block-size",
-    "--mod-toast-informative-background-color-default",
-    "--mod-toast-line-height",
-    "--mod-toast-line-height-cjk",
-    "--mod-toast-max-inline-size",
-    "--mod-toast-min-block-size",
-    "--mod-toast-negative-background-color-default",
-    "--mod-toast-positive-background-color-default",
-    "--mod-toast-spacing-block-close-button",
-    "--mod-toast-spacing-button-to-close-button-horizontal",
-    "--mod-toast-spacing-close-button-to-end-edge",
-    "--mod-toast-spacing-icon-to-text",
-    "--mod-toast-spacing-start-edge-to-text-and-icon",
-    "--mod-toast-spacing-text-to-button-vertical",
-    "--mod-toast-spacing-text-to-close-button",
-    "--mod-toast-spacing-toast-to-edge",
-    "--mod-toast-text-and-icon-color"
-  ],
-  "component": [
-    "--spectrum-toast-background-color-default",
-    "--spectrum-toast-bottom-to-text",
-    "--spectrum-toast-corner-radius",
-    "--spectrum-toast-font-family",
-    "--spectrum-toast-font-size",
-    "--spectrum-toast-font-style",
-    "--spectrum-toast-font-weight",
-    "--spectrum-toast-height",
-    "--spectrum-toast-icon-block-size",
-    "--spectrum-toast-informative-background-color-default",
-    "--spectrum-toast-line-height",
-    "--spectrum-toast-line-height-cjk",
-    "--spectrum-toast-max-inline-size",
-    "--spectrum-toast-maximum-width",
-    "--spectrum-toast-min-block-size",
-    "--spectrum-toast-negative-background-color-default",
-    "--spectrum-toast-positive-background-color-default",
-    "--spectrum-toast-spacing-block-close-button",
-    "--spectrum-toast-spacing-bottom-edge-to-text",
-    "--spectrum-toast-spacing-button-to-close-button-horizontal",
-    "--spectrum-toast-spacing-close-button-to-end-edge",
-    "--spectrum-toast-spacing-edge-to-button-vertical",
-    "--spectrum-toast-spacing-icon-to-text",
-    "--spectrum-toast-spacing-start-edge-to-text-and-icon",
-    "--spectrum-toast-spacing-text-to-button-horizontal",
-    "--spectrum-toast-spacing-text-to-close-button",
-    "--spectrum-toast-spacing-toast-to-edge",
-    "--spectrum-toast-spacing-top-edge-to-icon",
-    "--spectrum-toast-spacing-top-edge-to-text",
-    "--spectrum-toast-text-and-icon-color",
-    "--spectrum-toast-top-to-text",
-    "--spectrum-toast-top-to-workflow-icon"
-  ],
-  "global": [
-    "--spectrum-cjk-line-height-100",
-    "--spectrum-corner-radius-800",
-    "--spectrum-default-font-style",
-    "--spectrum-font-size-100",
-    "--spectrum-informative-background-color-default",
-    "--spectrum-line-height-100",
-    "--spectrum-negative-background-color-default",
-    "--spectrum-neutral-subdued-background-color-default",
-    "--spectrum-positive-background-color-default",
-    "--spectrum-regular-font-weight",
-    "--spectrum-sans-font-family-stack",
-    "--spectrum-spacing-100",
-    "--spectrum-spacing-200",
-    "--spectrum-spacing-300",
-    "--spectrum-spacing-400",
-    "--spectrum-text-to-visual-300",
-    "--spectrum-white",
-    "--spectrum-workflow-icon-size-100"
-  ],
-  "passthroughs": ["--mod-closebutton-icon-color-default"],
-  "high-contrast": []
+  "modifiers": {
+    "mod-toast-text-and-icon-color": {
+      "description": "Used by `--mod-closebutton-icon-color-default`, `.spectrum-Toast`, `.spectrum-Toast-content`. <br/>Defaults to `var(--spectrum-toast-text-and-icon-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-toast-spacing-toast-to-edge": {
+      "description": "Used by `.spectrum-Toast`. <br/>Defaults to `var(--spectrum-toast-spacing-toast-to-edge)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-toast-min-block-size": {
+      "description": "Used by `.spectrum-Toast`. <br/>Defaults to `var(--spectrum-toast-min-block-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-toast-max-inline-size": {
+      "description": "Used by `.spectrum-Toast`. <br/>Defaults to `var(--spectrum-toast-max-inline-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-toast-corner-radius": {
+      "description": "Used by `.spectrum-Toast`. <br/>Defaults to `var(--spectrum-toast-corner-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-toast-spacing-start-edge-to-text-and-icon": {
+      "description": "Used by `.spectrum-Toast`. <br/>Defaults to `var(--spectrum-toast-spacing-start-edge-to-text-and-icon)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-toast-font-family": {
+      "description": "Used by `.spectrum-Toast`. <br/>Defaults to `var(--spectrum-toast-font-family)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-toast-font-size": {
+      "description": "Used by `.spectrum-Toast`. <br/>Defaults to `var(--spectrum-toast-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-toast-font-style": {
+      "description": "Used by `.spectrum-Toast`. <br/>Defaults to `var(--spectrum-toast-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-toast-font-weight": {
+      "description": "Used by `.spectrum-Toast`. <br/>Defaults to `var(--spectrum-toast-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-toast-background-color-default": {
+      "description": "Used by `.spectrum-Toast`. <br/>Defaults to `var(--spectrum-toast-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-toast-spacing-text-to-close-button": {
+      "description": "Used by `.spectrum-Toast.spectrum-Toast--noButton, .spectrum-Toast:not(:has(.spectrum-Button))`. <br/>Defaults to `var(--spectrum-toast-spacing-text-to-close-button)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-toast-spacing-block-close-button": {
+      "description": "Used by `.spectrum-Toast .spectrum-CloseButton`. <br/>Defaults to `var(--spectrum-toast-spacing-block-close-button)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-toast-spacing-close-button-to-end-edge": {
+      "description": "Used by `.spectrum-Toast .spectrum-CloseButton`. <br/>Defaults to `var(--spectrum-toast-spacing-close-button-to-end-edge)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-toast-negative-background-color-default": {
+      "description": "Used by `.spectrum-Toast--negative`. <br/>Defaults to `var(--spectrum-toast-negative-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-toast-informative-background-color-default": {
+      "description": "Used by `.spectrum-Toast--info`. <br/>Defaults to `var(--spectrum-toast-informative-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-toast-positive-background-color-default": {
+      "description": "Used by `.spectrum-Toast--positive`. <br/>Defaults to `var(--spectrum-toast-positive-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-toast-icon-block-size": {
+      "description": "Used by `.spectrum-Toast-typeIcon`. <br/>Defaults to `var(--spectrum-toast-icon-block-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-toast-spacing-icon-to-text": {
+      "description": "Used by `.spectrum-Toast-typeIcon`. <br/>Defaults to `var(--spectrum-toast-spacing-icon-to-text)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-toast-spacing-button-to-close-button-horizontal": {
+      "description": "Used by `.spectrum-Toast .spectrum-Button`. <br/>Defaults to `var(--spectrum-toast-spacing-button-to-close-button-horizontal)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-toast-spacing-text-to-button-vertical": {
+      "description": "Used by `.spectrum-Toast-body`. <br/>Defaults to `var(--spectrum-toast-spacing-edge-to-button-vertical)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-toast-line-height": {
+      "description": "Used by `.spectrum-Toast-content`. <br/>Defaults to `var(--spectrum-toast-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-toast-line-height-cjk": {
+      "description": "Used by `.spectrum-Toast-content:lang(ja), .spectrum-Toast-content:lang(ko), .spectrum-Toast-content:lang(zh)`. <br/>Defaults to `var(--spectrum-toast-line-height-cjk)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-toast-font-family": {
+      "value": "var(--spectrum-sans-font-family-stack)",
+      "description": "Defined in `.spectrum-Toast`. <br/>Used by `.spectrum-Toast`. <br/>Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-toast-font-style": {
+      "value": "normal",
+      "description": "Defined in `.spectrum-Toast`. <br/>Used by `.spectrum-Toast`. <br/>Defaults to `var(--spectrum-default-font-style)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-toast-font-size": {
+      "value": "14px",
+      "description": "Defined in `.spectrum-Toast`. <br/>Used by `.spectrum-Toast`. <br/>Defaults to `var(--spectrum-font-size-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-toast-font-weight": {
+      "value": "400",
+      "description": "Defined in `.spectrum-Toast`. <br/>Used by `.spectrum-Toast`. <br/>Defaults to `var(--spectrum-regular-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-toast-corner-radius": {
+      "value": "16px",
+      "description": "Defined in `.spectrum-Toast`. <br/>Used by `.spectrum-Toast`. <br/>Defaults to `var(--spectrum-corner-radius-800)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-toast-icon-block-size": {
+      "value": "20px",
+      "description": "Defined in `.spectrum-Toast`. <br/>Used by `.spectrum-Toast-typeIcon`. <br/>Defaults to `var(--spectrum-workflow-icon-size-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-toast-min-block-size": {
+      "value": "52px",
+      "description": "Defined in `.spectrum-Toast`. <br/>Used by `.spectrum-Toast`. <br/>Defaults to `var(--spectrum-toast-height)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-toast-height": {
+      "value": "52px",
+      "description": "Used by `--spectrum-toast-min-block-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-toast-max-inline-size": {
+      "value": "336px",
+      "description": "Defined in `.spectrum-Toast`. <br/>Used by `.spectrum-Toast`. <br/>Defaults to `var(--spectrum-toast-maximum-width)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-toast-maximum-width": {
+      "value": "336px",
+      "description": "Used by `--spectrum-toast-max-inline-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-toast-line-height": {
+      "value": "1.3",
+      "description": "Defined in `.spectrum-Toast`. <br/>Used by `.spectrum-Toast-content`. <br/>Defaults to `var(--spectrum-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-toast-line-height-cjk": {
+      "value": "1.5",
+      "description": "Defined in `.spectrum-Toast`. <br/>Used by `.spectrum-Toast-content:lang(ja), .spectrum-Toast-content:lang(ko), .spectrum-Toast-content:lang(zh)`. <br/>Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-toast-spacing-toast-to-edge": {
+      "value": "16px",
+      "description": "Defined in `.spectrum-Toast`. <br/>Used by `.spectrum-Toast`. <br/>Defaults to `var(--spectrum-spacing-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-toast-spacing-block-close-button": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-Toast`. <br/>Used by `.spectrum-Toast .spectrum-CloseButton`. <br/>Defaults to `var(--spectrum-spacing-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-toast-spacing-close-button-to-end-edge": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-Toast`. <br/>Used by `.spectrum-Toast .spectrum-CloseButton`. <br/>Defaults to `var(--spectrum-spacing-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-toast-spacing-text-to-close-button": {
+      "value": "16px",
+      "description": "Defined in `.spectrum-Toast`. <br/>Used by `.spectrum-Toast.spectrum-Toast--noButton, .spectrum-Toast:not(:has(.spectrum-Button))`. <br/>Defaults to `var(--spectrum-spacing-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-toast-spacing-edge-to-button-vertical": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-Toast`. <br/>Used by `.spectrum-Toast-typeIcon`, `.spectrum-Toast-body`, `.spectrum-Toast-text`. <br/>Defaults to `var(--spectrum-spacing-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-toast-spacing-text-to-button-horizontal": {
+      "value": "24px",
+      "description": "Defined in `.spectrum-Toast`. <br/>Used by `.spectrum-Toast-body`. <br/>Defaults to `var(--spectrum-spacing-400)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-toast-spacing-button-to-close-button-horizontal": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-Toast`. <br/>Used by `.spectrum-Toast .spectrum-Button`. <br/>Defaults to `var(--spectrum-spacing-200)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-toast-spacing-icon-to-text": {
+      "value": "8px",
+      "description": "Defined in `.spectrum-Toast`. <br/>Used by `.spectrum-Toast-typeIcon`. <br/>Defaults to `var(--spectrum-text-to-visual-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-toast-spacing-start-edge-to-text-and-icon": {
+      "value": "16px",
+      "description": "Defined in `.spectrum-Toast`. <br/>Used by `.spectrum-Toast`. <br/>Defaults to `var(--spectrum-spacing-300)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-toast-spacing-top-edge-to-icon": {
+      "value": "18px",
+      "description": "Defined in `.spectrum-Toast`. <br/>Used by `.spectrum-Toast-typeIcon`. <br/>Defaults to `var(--spectrum-toast-top-to-workflow-icon)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-toast-top-to-workflow-icon": {
+      "value": "18px",
+      "description": "Used by `--spectrum-toast-spacing-top-edge-to-icon`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-toast-spacing-top-edge-to-text": {
+      "value": "18px",
+      "description": "Defined in `.spectrum-Toast`. <br/>Used by `.spectrum-Toast-text`. <br/>Defaults to `var(--spectrum-toast-top-to-text)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-toast-top-to-text": {
+      "value": "18px",
+      "description": "Used by `--spectrum-toast-spacing-top-edge-to-text`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-toast-spacing-bottom-edge-to-text": {
+      "value": "20px",
+      "description": "Defined in `.spectrum-Toast`. <br/>Used by `.spectrum-Toast-text`. <br/>Defaults to `var(--spectrum-toast-bottom-to-text)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-toast-bottom-to-text": {
+      "value": "20px",
+      "description": "Used by `--spectrum-toast-spacing-bottom-edge-to-text`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-toast-background-color-default": {
+      "value": "var(--spectrum-gray-700)",
+      "description": "Defined in `.spectrum-Toast`. <br/>Used by `.spectrum-Toast`. <br/>Defaults to `var(--spectrum-neutral-subdued-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-toast-negative-background-color-default": {
+      "value": "var(--spectrum-negative-color-900)",
+      "description": "Defined in `.spectrum-Toast`. <br/>Used by `.spectrum-Toast--negative`. <br/>Defaults to `var(--spectrum-negative-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-toast-positive-background-color-default": {
+      "value": "var(--spectrum-positive-color-900)",
+      "description": "Defined in `.spectrum-Toast`. <br/>Used by `.spectrum-Toast--positive`. <br/>Defaults to `var(--spectrum-positive-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-toast-informative-background-color-default": {
+      "value": "var(--spectrum-informative-color-900)",
+      "description": "Defined in `.spectrum-Toast`. <br/>Used by `.spectrum-Toast--info`. <br/>Defaults to `var(--spectrum-informative-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-toast-text-and-icon-color": {
+      "value": "rgb(255, 255, 255)",
+      "description": "Defined in `.spectrum-Toast`. <br/>Used by `--mod-closebutton-icon-color-default`, `.spectrum-Toast`, `.spectrum-Toast-content`. <br/>Defaults to `var(--spectrum-white)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-sans-font-family-stack": {
+      "description": "Used by `--spectrum-toast-font-family`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-default-font-style": {
+      "value": "normal",
+      "description": "Used by `--spectrum-toast-font-style`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-100": {
+      "value": "14px",
+      "description": "Used by `--spectrum-toast-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-regular-font-weight": {
+      "value": "400",
+      "description": "Used by `--spectrum-toast-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-800": {
+      "value": "16px",
+      "description": "Used by `--spectrum-toast-corner-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-workflow-icon-size-100": {
+      "value": "20px",
+      "description": "Used by `--spectrum-toast-icon-block-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-line-height-100": {
+      "value": "1.3",
+      "description": "Used by `--spectrum-toast-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-cjk-line-height-100": {
+      "value": "1.5",
+      "description": "Used by `--spectrum-toast-line-height-cjk`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-300": {
+      "value": "16px",
+      "description": "Used by `--spectrum-toast-spacing-toast-to-edge`, `--spectrum-toast-spacing-text-to-close-button`, `--spectrum-toast-spacing-start-edge-to-text-and-icon`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-200": {
+      "value": "12px",
+      "description": "Used by `--spectrum-toast-spacing-block-close-button`, `--spectrum-toast-spacing-edge-to-button-vertical`, `--spectrum-toast-spacing-button-to-close-button-horizontal`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-100": {
+      "value": "8px",
+      "description": "Used by `--spectrum-toast-spacing-close-button-to-end-edge`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-400": {
+      "value": "24px",
+      "description": "Used by `--spectrum-toast-spacing-text-to-button-horizontal`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-300": {
+      "value": "8px",
+      "description": "Used by `--spectrum-toast-spacing-icon-to-text`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-subdued-background-color-default": {
+      "value": "var(--spectrum-gray-700)",
+      "description": "Used by `--spectrum-toast-background-color-default`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-background-color-default": {
+      "value": "var(--spectrum-negative-color-900)",
+      "description": "Used by `--spectrum-toast-negative-background-color-default`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-positive-background-color-default": {
+      "value": "var(--spectrum-positive-color-900)",
+      "description": "Used by `--spectrum-toast-positive-background-color-default`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-informative-background-color-default": {
+      "value": "var(--spectrum-informative-color-900)",
+      "description": "Used by `--spectrum-toast-informative-background-color-default`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-white": {
+      "value": "rgb(255, 255, 255)",
+      "description": "Used by `--spectrum-toast-text-and-icon-color`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {
+    "mod-closebutton-icon-color-default": {
+      "category": "Passthrough"
+    }
+  },
+  "high-contrast": {}
 }
diff --git a/components/toast/stories/toast.stories.js b/components/toast/stories/toast.stories.js
index 26e9a593a15..b55dde68c31 100644
--- a/components/toast/stories/toast.stories.js
+++ b/components/toast/stories/toast.stories.js
@@ -1,9 +1,11 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { ActionTemplate, Template, ToastWrapOptions } from "./template.js";
 import { ToastGroup } from "./toast.test.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * Toasts display brief, temporary notifications. They are noticeable but do not disrupt the user experience and do not require an action to be taken.
  */
@@ -68,6 +70,10 @@ export default {
 		status: {
 			type: "migrated",
 		},
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 	tags: ["migrated"],
 };
diff --git a/components/tooltip/dist/metadata.json b/components/tooltip/dist/metadata.json
index 9c7a37c1250..d82d565d018 100644
--- a/components/tooltip/dist/metadata.json
+++ b/components/tooltip/dist/metadata.json
@@ -97,11 +97,34 @@
     ".spectrum-Tooltip--top.is-open",
     ".spectrum-Tooltip-label",
     ".spectrum-Tooltip-tip",
-    ".spectrum-Tooltip.is-open",
     ".spectrum-Tooltip:lang(ja)",
     ".spectrum-Tooltip:lang(ko)",
     ".spectrum-Tooltip:lang(zh)",
+    ".spectrum-Tooltip.is-open",
     ".u-tooltip-showOnHover",
+    ".u-tooltip-showOnHover :focus .spectrum-Tooltip",
+    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--bottom",
+    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--bottom-end",
+    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--bottom-left",
+    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--bottom-right",
+    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--bottom-start",
+    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--end",
+    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--end-bottom",
+    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--end-top",
+    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--left",
+    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--left-bottom",
+    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--left-top",
+    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--right",
+    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--right-bottom",
+    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--right-top",
+    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--start",
+    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--start-bottom",
+    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--start-top",
+    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--top",
+    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--top-end",
+    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--top-left",
+    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--top-right",
+    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--top-start",
     ".u-tooltip-showOnHover .spectrum-Tooltip",
     ".u-tooltip-showOnHover .spectrum-Tooltip--bottom",
     ".u-tooltip-showOnHover .spectrum-Tooltip--bottom-end",
@@ -126,70 +149,18 @@
     ".u-tooltip-showOnHover .spectrum-Tooltip--top-right",
     ".u-tooltip-showOnHover .spectrum-Tooltip--top-start",
     ".u-tooltip-showOnHover .spectrum-Tooltip-label",
-    ".u-tooltip-showOnHover :focus .spectrum-Tooltip",
-    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--bottom",
-    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--bottom-end",
-    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--bottom-left",
-    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--bottom-right",
-    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--bottom-start",
-    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--end",
-    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--end-bottom",
-    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--end-top",
-    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--left",
-    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--left-bottom",
-    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--left-top",
-    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--right",
-    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--right-bottom",
-    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--right-top",
-    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--start",
-    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--start-bottom",
-    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--start-top",
-    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--top",
-    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--top-end",
-    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--top-left",
-    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--top-right",
-    ".u-tooltip-showOnHover :focus .spectrum-Tooltip--top-start",
-    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip",
-    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--bottom",
-    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--bottom-end",
-    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--bottom-left",
-    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--bottom-right",
-    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--bottom-start",
-    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end",
-    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end-bottom",
-    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end-top",
-    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--left",
-    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--left-bottom",
-    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--left-top",
-    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--right",
-    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--right-bottom",
-    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--right-top",
-    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start",
-    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start-bottom",
-    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start-top",
-    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--top",
-    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--top-end",
-    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--top-left",
-    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--top-right",
-    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--top-start",
-    ".u-tooltip-showOnHover.is-focused:dir(rtl) .spectrum-Tooltip--end",
-    ".u-tooltip-showOnHover.is-focused:dir(rtl) .spectrum-Tooltip--end-bottom",
-    ".u-tooltip-showOnHover.is-focused:dir(rtl) .spectrum-Tooltip--end-top",
-    ".u-tooltip-showOnHover.is-focused:dir(rtl) .spectrum-Tooltip--start",
-    ".u-tooltip-showOnHover.is-focused:dir(rtl) .spectrum-Tooltip--start-bottom",
-    ".u-tooltip-showOnHover.is-focused:dir(rtl) .spectrum-Tooltip--start-top",
-    ".u-tooltip-showOnHover:dir(rtl) .spectrum-Tooltip--end",
-    ".u-tooltip-showOnHover:dir(rtl) .spectrum-Tooltip--end-bottom",
-    ".u-tooltip-showOnHover:dir(rtl) .spectrum-Tooltip--end-top",
-    ".u-tooltip-showOnHover:dir(rtl) .spectrum-Tooltip--start",
-    ".u-tooltip-showOnHover:dir(rtl) .spectrum-Tooltip--start-bottom",
-    ".u-tooltip-showOnHover:dir(rtl) .spectrum-Tooltip--start-top",
     ".u-tooltip-showOnHover:dir(rtl) :focus .spectrum-Tooltip--end",
     ".u-tooltip-showOnHover:dir(rtl) :focus .spectrum-Tooltip--end-bottom",
     ".u-tooltip-showOnHover:dir(rtl) :focus .spectrum-Tooltip--end-top",
     ".u-tooltip-showOnHover:dir(rtl) :focus .spectrum-Tooltip--start",
     ".u-tooltip-showOnHover:dir(rtl) :focus .spectrum-Tooltip--start-bottom",
     ".u-tooltip-showOnHover:dir(rtl) :focus .spectrum-Tooltip--start-top",
+    ".u-tooltip-showOnHover:dir(rtl) .spectrum-Tooltip--end",
+    ".u-tooltip-showOnHover:dir(rtl) .spectrum-Tooltip--end-bottom",
+    ".u-tooltip-showOnHover:dir(rtl) .spectrum-Tooltip--end-top",
+    ".u-tooltip-showOnHover:dir(rtl) .spectrum-Tooltip--start",
+    ".u-tooltip-showOnHover:dir(rtl) .spectrum-Tooltip--start-bottom",
+    ".u-tooltip-showOnHover:dir(rtl) .spectrum-Tooltip--start-top",
     ".u-tooltip-showOnHover:dir(rtl):focus .spectrum-Tooltip--end",
     ".u-tooltip-showOnHover:dir(rtl):focus .spectrum-Tooltip--end-bottom",
     ".u-tooltip-showOnHover:dir(rtl):focus .spectrum-Tooltip--end-top",
@@ -247,81 +218,411 @@
     ".u-tooltip-showOnHover:hover .spectrum-Tooltip--top-end",
     ".u-tooltip-showOnHover:hover .spectrum-Tooltip--top-left",
     ".u-tooltip-showOnHover:hover .spectrum-Tooltip--top-right",
-    ".u-tooltip-showOnHover:hover .spectrum-Tooltip--top-start"
-  ],
-  "modifiers": [
-    "--mod-overlay-animation-duration",
-    "--mod-overlay-animation-duration-opened",
-    "--mod-tooltip-animation-distance",
-    "--mod-tooltip-background-color-default",
-    "--mod-tooltip-background-color-informative",
-    "--mod-tooltip-background-color-negative",
-    "--mod-tooltip-border-radius",
-    "--mod-tooltip-cjk-line-height",
-    "--mod-tooltip-content-color",
-    "--mod-tooltip-font-size",
-    "--mod-tooltip-font-weight",
-    "--mod-tooltip-height",
-    "--mod-tooltip-line-height",
-    "--mod-tooltip-margin",
-    "--mod-tooltip-max-inline-size",
-    "--mod-tooltip-pointer-corner-spacing",
-    "--mod-tooltip-spacing-block-end",
-    "--mod-tooltip-spacing-block-start",
-    "--mod-tooltip-spacing-inline",
-    "--mod-tooltip-tip-antialiasing-inset",
-    "--mod-tooltip-tip-block-size",
-    "--mod-tooltip-tip-corner-radius",
-    "--mod-tooltip-tip-height-percentage",
-    "--mod-tooltip-tip-square-size"
-  ],
-  "component": [
-    "--spectrum-tooltip-animation-distance",
-    "--spectrum-tooltip-animation-duration",
-    "--spectrum-tooltip-background-color-default",
-    "--spectrum-tooltip-background-color-informative",
-    "--spectrum-tooltip-background-color-negative",
-    "--spectrum-tooltip-border-radius",
-    "--spectrum-tooltip-cjk-line-height",
-    "--spectrum-tooltip-content-color",
-    "--spectrum-tooltip-font-size",
-    "--spectrum-tooltip-font-weight",
-    "--spectrum-tooltip-height",
-    "--spectrum-tooltip-line-height",
-    "--spectrum-tooltip-margin",
-    "--spectrum-tooltip-max-inline-size",
-    "--spectrum-tooltip-maximum-width",
-    "--spectrum-tooltip-pointer-corner-spacing",
-    "--spectrum-tooltip-spacing-block-end",
-    "--spectrum-tooltip-spacing-block-start",
-    "--spectrum-tooltip-spacing-inline",
-    "--spectrum-tooltip-tip-antialiasing-inset",
-    "--spectrum-tooltip-tip-block-size",
-    "--spectrum-tooltip-tip-corner-radius",
-    "--spectrum-tooltip-tip-height",
-    "--spectrum-tooltip-tip-height-percentage",
-    "--spectrum-tooltip-tip-square-size"
-  ],
-  "global": [
-    "--spectrum-animation-duration-0",
-    "--spectrum-animation-duration-100",
-    "--spectrum-cjk-line-height-100",
-    "--spectrum-component-bottom-to-text-75",
-    "--spectrum-component-edge-to-text-75",
-    "--spectrum-component-height-75",
-    "--spectrum-component-top-to-text-75",
-    "--spectrum-corner-radius-400",
-    "--spectrum-font-size-75",
-    "--spectrum-gray-25",
-    "--spectrum-informative-background-color-default",
-    "--spectrum-negative-background-color-default",
-    "--spectrum-neutral-background-color-default",
-    "--spectrum-regular-font-weight",
-    "--spectrum-spacing-75"
+    ".u-tooltip-showOnHover:hover .spectrum-Tooltip--top-start",
+    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip",
+    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--bottom",
+    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--bottom-end",
+    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--bottom-left",
+    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--bottom-right",
+    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--bottom-start",
+    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end",
+    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end-bottom",
+    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end-top",
+    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--left",
+    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--left-bottom",
+    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--left-top",
+    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--right",
+    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--right-bottom",
+    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--right-top",
+    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start",
+    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start-bottom",
+    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start-top",
+    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--top",
+    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--top-end",
+    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--top-left",
+    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--top-right",
+    ".u-tooltip-showOnHover.is-focused .spectrum-Tooltip--top-start",
+    ".u-tooltip-showOnHover.is-focused:dir(rtl) .spectrum-Tooltip--end",
+    ".u-tooltip-showOnHover.is-focused:dir(rtl) .spectrum-Tooltip--end-bottom",
+    ".u-tooltip-showOnHover.is-focused:dir(rtl) .spectrum-Tooltip--end-top",
+    ".u-tooltip-showOnHover.is-focused:dir(rtl) .spectrum-Tooltip--start",
+    ".u-tooltip-showOnHover.is-focused:dir(rtl) .spectrum-Tooltip--start-bottom",
+    ".u-tooltip-showOnHover.is-focused:dir(rtl) .spectrum-Tooltip--start-top"
   ],
-  "passthroughs": [],
-  "high-contrast": [
-    "--highcontrast-tooltip-background-color-default",
-    "--highcontrast-tooltip-border-width"
-  ]
+  "modifiers": {
+    "mod-overlay-animation-duration": {
+      "description": "Used by `.spectrum-Tooltip`. <br/>Defaults to `var(--spectrum-animation-duration-100, 0.13s)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-overlay-animation-duration-opened": {
+      "description": "Used by `.spectrum-Tooltip.is-open`. <br/>Defaults to `var(--spectrum-animation-duration-0, 0s)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tooltip-border-radius": {
+      "description": "Used by `--spectrum-tooltip-pointer-corner-spacing`, `.spectrum-Tooltip`. <br/>Defaults to `var(--spectrum-tooltip-border-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tooltip-spacing-inline": {
+      "description": "Used by `.spectrum-Tooltip`. <br/>Defaults to `var(--spectrum-tooltip-spacing-inline)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tooltip-height": {
+      "description": "Used by `.spectrum-Tooltip`. <br/>Defaults to `var(--spectrum-tooltip-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tooltip-max-inline-size": {
+      "description": "Used by `.spectrum-Tooltip`. <br/>Defaults to `var(--spectrum-tooltip-max-inline-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tooltip-background-color-default": {
+      "description": "Used by `.spectrum-Tooltip`, `.spectrum-Tooltip-tip`. <br/>Defaults to `var(--spectrum-tooltip-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tooltip-content-color": {
+      "description": "Used by `.spectrum-Tooltip`. <br/>Defaults to `var(--spectrum-tooltip-content-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tooltip-font-size": {
+      "description": "Used by `.spectrum-Tooltip`. <br/>Defaults to `var(--spectrum-tooltip-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tooltip-font-weight": {
+      "description": "Used by `.spectrum-Tooltip`. <br/>Defaults to `var(--spectrum-tooltip-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tooltip-line-height": {
+      "description": "Used by `.spectrum-Tooltip`, `.spectrum-Tooltip-label`. <br/>Defaults to `var(--spectrum-tooltip-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tooltip-cjk-line-height": {
+      "description": "Used by `.spectrum-Tooltip:lang(ja), .spectrum-Tooltip:lang(ko), .spectrum-Tooltip:lang(zh)`. <br/>Defaults to `var(--spectrum-tooltip-cjk-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tooltip-background-color-informative": {
+      "description": "Used by `.spectrum-Tooltip--info`, `.spectrum-Tooltip--info .spectrum-Tooltip-tip`. <br/>Defaults to `var(--spectrum-tooltip-background-color-informative)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tooltip-background-color-negative": {
+      "description": "Used by `.spectrum-Tooltip--negative`, `.spectrum-Tooltip--negative .spectrum-Tooltip-tip`. <br/>Defaults to `var(--spectrum-tooltip-background-color-negative)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tooltip-tip-square-size": {
+      "description": "Used by `.spectrum-Tooltip-tip`, `.spectrum-Tooltip--top .spectrum-Tooltip-tip, .spectrum-Tooltip--top-end .spectrum-Tooltip-tip, .spectrum-Tooltip--top-left .spectrum-Tooltip-tip, .spectrum-Tooltip--top-right .spectrum-Tooltip-tip, .spectrum-Tooltip--top-start .spectrum-Tooltip-tip`, `.spectrum-Tooltip--bottom .spectrum-Tooltip-tip, .spectrum-Tooltip--bottom-end .spectrum-Tooltip-tip, .spectrum-Tooltip--bottom-left .spectrum-Tooltip-tip, .spectrum-Tooltip--bottom-right .spectrum-Tooltip-tip, .spectrum-Tooltip--bottom-start .spectrum-Tooltip-tip`, `.spectrum-Tooltip--end .spectrum-Tooltip-tip, .spectrum-Tooltip--end-bottom .spectrum-Tooltip-tip, .spectrum-Tooltip--end-top .spectrum-Tooltip-tip, .spectrum-Tooltip--left .spectrum-Tooltip-tip, .spectrum-Tooltip--left-bottom .spectrum-Tooltip-tip, .spectrum-Tooltip--left-top .spectrum-Tooltip-tip, .spectrum-Tooltip--right .spectrum-Tooltip-tip, .spectrum-Tooltip--right-bottom .spectrum-Tooltip-tip, .spectrum-Tooltip--right-top .spectrum-Tooltip-tip, .spectrum-Tooltip--start .spectrum-Tooltip-tip, .spectrum-Tooltip--start-bottom .spectrum-Tooltip-tip, .spectrum-Tooltip--start-top .spectrum-Tooltip-tip`, `.spectrum-Tooltip--end .spectrum-Tooltip-tip, .spectrum-Tooltip--end-bottom .spectrum-Tooltip-tip, .spectrum-Tooltip--end-top .spectrum-Tooltip-tip, .spectrum-Tooltip--right .spectrum-Tooltip-tip, .spectrum-Tooltip--right-bottom .spectrum-Tooltip-tip, .spectrum-Tooltip--right-top .spectrum-Tooltip-tip`, `.spectrum-Tooltip--left .spectrum-Tooltip-tip, .spectrum-Tooltip--left-bottom .spectrum-Tooltip-tip, .spectrum-Tooltip--left-top .spectrum-Tooltip-tip, .spectrum-Tooltip--start .spectrum-Tooltip-tip, .spectrum-Tooltip--start-bottom .spectrum-Tooltip-tip, .spectrum-Tooltip--start-top .spectrum-Tooltip-tip`, `.spectrum-Tooltip--end .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--end-bottom .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--end-top .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--left .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--left-bottom .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--left-top .spectrum-Tooltip-tip:dir(rtl)`, `.spectrum-Tooltip--right .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--right-bottom .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--right-top .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--start .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--start-bottom .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--start-top .spectrum-Tooltip-tip:dir(rtl)`. <br/>Defaults to `var(--spectrum-tooltip-tip-square-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tooltip-tip-antialiasing-inset": {
+      "description": "Used by `.spectrum-Tooltip-tip`, `.spectrum-Tooltip--top .spectrum-Tooltip-tip, .spectrum-Tooltip--top-end .spectrum-Tooltip-tip, .spectrum-Tooltip--top-left .spectrum-Tooltip-tip, .spectrum-Tooltip--top-right .spectrum-Tooltip-tip, .spectrum-Tooltip--top-start .spectrum-Tooltip-tip`, `.spectrum-Tooltip--bottom .spectrum-Tooltip-tip, .spectrum-Tooltip--bottom-end .spectrum-Tooltip-tip, .spectrum-Tooltip--bottom-left .spectrum-Tooltip-tip, .spectrum-Tooltip--bottom-right .spectrum-Tooltip-tip, .spectrum-Tooltip--bottom-start .spectrum-Tooltip-tip`, `.spectrum-Tooltip--end .spectrum-Tooltip-tip, .spectrum-Tooltip--end-bottom .spectrum-Tooltip-tip, .spectrum-Tooltip--end-top .spectrum-Tooltip-tip, .spectrum-Tooltip--right .spectrum-Tooltip-tip, .spectrum-Tooltip--right-bottom .spectrum-Tooltip-tip, .spectrum-Tooltip--right-top .spectrum-Tooltip-tip`, `.spectrum-Tooltip--left .spectrum-Tooltip-tip, .spectrum-Tooltip--left-bottom .spectrum-Tooltip-tip, .spectrum-Tooltip--left-top .spectrum-Tooltip-tip, .spectrum-Tooltip--start .spectrum-Tooltip-tip, .spectrum-Tooltip--start-bottom .spectrum-Tooltip-tip, .spectrum-Tooltip--start-top .spectrum-Tooltip-tip`, `.spectrum-Tooltip--end .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--end-bottom .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--end-top .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--left .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--left-bottom .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--left-top .spectrum-Tooltip-tip:dir(rtl)`, `.spectrum-Tooltip--right .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--right-bottom .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--right-top .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--start .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--start-bottom .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--start-top .spectrum-Tooltip-tip:dir(rtl)`. <br/>Defaults to `var(--spectrum-tooltip-tip-antialiasing-inset)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tooltip-tip-height-percentage": {
+      "description": "Used by `.spectrum-Tooltip-tip`. <br/>Defaults to `var(--spectrum-tooltip-tip-height-percentage)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tooltip-tip-corner-radius": {
+      "description": "Used by `.spectrum-Tooltip-tip`. <br/>Defaults to `var(--spectrum-tooltip-tip-corner-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tooltip-pointer-corner-spacing": {
+      "description": "Used by `.spectrum-Tooltip--bottom-left .spectrum-Tooltip-tip, .spectrum-Tooltip--top-left .spectrum-Tooltip-tip`, `.spectrum-Tooltip--bottom-right .spectrum-Tooltip-tip, .spectrum-Tooltip--top-right .spectrum-Tooltip-tip`, `.spectrum-Tooltip--bottom-start .spectrum-Tooltip-tip, .spectrum-Tooltip--top-start .spectrum-Tooltip-tip`, `.spectrum-Tooltip--bottom-start .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--top-start .spectrum-Tooltip-tip:dir(rtl)`, `.spectrum-Tooltip--bottom-end .spectrum-Tooltip-tip, .spectrum-Tooltip--top-end .spectrum-Tooltip-tip`, `.spectrum-Tooltip--bottom-end .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--top-end .spectrum-Tooltip-tip:dir(rtl)`, `.spectrum-Tooltip--end-top .spectrum-Tooltip-tip, .spectrum-Tooltip--left-top .spectrum-Tooltip-tip, .spectrum-Tooltip--right-top .spectrum-Tooltip-tip, .spectrum-Tooltip--start-top .spectrum-Tooltip-tip`, `.spectrum-Tooltip--end-bottom .spectrum-Tooltip-tip, .spectrum-Tooltip--left-bottom .spectrum-Tooltip-tip, .spectrum-Tooltip--right-bottom .spectrum-Tooltip-tip, .spectrum-Tooltip--start-bottom .spectrum-Tooltip-tip`. <br/>Defaults to `var(--spectrum-tooltip-pointer-corner-spacing)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tooltip-spacing-block-start": {
+      "description": "Used by `.spectrum-Tooltip-label`. <br/>Defaults to `var(--spectrum-tooltip-spacing-block-start)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tooltip-spacing-block-end": {
+      "description": "Used by `.spectrum-Tooltip-label`. <br/>Defaults to `var(--spectrum-tooltip-spacing-block-end)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tooltip-tip-block-size": {
+      "description": "Used by `.spectrum-Tooltip, .spectrum-Tooltip--top, .spectrum-Tooltip--top-end, .spectrum-Tooltip--top-left, .spectrum-Tooltip--top-right, .spectrum-Tooltip--top-start`, `.spectrum-Tooltip--bottom, .spectrum-Tooltip--bottom-end, .spectrum-Tooltip--bottom-left, .spectrum-Tooltip--bottom-right, .spectrum-Tooltip--bottom-start`, `.spectrum-Tooltip--right, .spectrum-Tooltip--right-bottom, .spectrum-Tooltip--right-top`, `.spectrum-Tooltip--left, .spectrum-Tooltip--left-bottom, .spectrum-Tooltip--left-top`, `.spectrum-Tooltip--start, .spectrum-Tooltip--start-bottom, .spectrum-Tooltip--start-top`, `.spectrum-Tooltip--end, .spectrum-Tooltip--end-bottom, .spectrum-Tooltip--end-top`. <br/>Defaults to `var(--spectrum-tooltip-tip-block-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tooltip-margin": {
+      "description": "Used by `.spectrum-Tooltip, .spectrum-Tooltip--top, .spectrum-Tooltip--top-end, .spectrum-Tooltip--top-left, .spectrum-Tooltip--top-right, .spectrum-Tooltip--top-start`, `.spectrum-Tooltip--bottom, .spectrum-Tooltip--bottom-end, .spectrum-Tooltip--bottom-left, .spectrum-Tooltip--bottom-right, .spectrum-Tooltip--bottom-start`, `.spectrum-Tooltip--right, .spectrum-Tooltip--right-bottom, .spectrum-Tooltip--right-top`, `.spectrum-Tooltip--left, .spectrum-Tooltip--left-bottom, .spectrum-Tooltip--left-top`, `.spectrum-Tooltip--start, .spectrum-Tooltip--start-bottom, .spectrum-Tooltip--start-top`, `.spectrum-Tooltip--end, .spectrum-Tooltip--end-bottom, .spectrum-Tooltip--end-top`. <br/>Defaults to `var(--spectrum-tooltip-margin)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tooltip-animation-distance": {
+      "description": "Used by `.spectrum-Tooltip--top-end.is-open, .spectrum-Tooltip--top-left.is-open, .spectrum-Tooltip--top-right.is-open, .spectrum-Tooltip--top-start.is-open, .spectrum-Tooltip--top.is-open, .spectrum-Tooltip.is-open`, `.spectrum-Tooltip--bottom-end.is-open, .spectrum-Tooltip--bottom-left.is-open, .spectrum-Tooltip--bottom-right.is-open, .spectrum-Tooltip--bottom-start.is-open, .spectrum-Tooltip--bottom.is-open`, `.spectrum-Tooltip--right-bottom.is-open, .spectrum-Tooltip--right-top.is-open, .spectrum-Tooltip--right.is-open`, `.spectrum-Tooltip--left-bottom.is-open, .spectrum-Tooltip--left-top.is-open, .spectrum-Tooltip--left.is-open`, `.spectrum-Tooltip--start-bottom.is-open, .spectrum-Tooltip--start-top.is-open, .spectrum-Tooltip--start.is-open`, `.spectrum-Tooltip--start-bottom.is-open:dir(rtl), .spectrum-Tooltip--start-top.is-open:dir(rtl), .spectrum-Tooltip--start.is-open:dir(rtl)`, `.spectrum-Tooltip--end-bottom.is-open, .spectrum-Tooltip--end-top.is-open, .spectrum-Tooltip--end.is-open`, `.spectrum-Tooltip--end-bottom.is-open:dir(rtl), .spectrum-Tooltip--end-top.is-open:dir(rtl), .spectrum-Tooltip--end.is-open:dir(rtl)`, `.u-tooltip-showOnHover :focus .spectrum-Tooltip--top, .u-tooltip-showOnHover :focus .spectrum-Tooltip--top-end, .u-tooltip-showOnHover :focus .spectrum-Tooltip--top-left, .u-tooltip-showOnHover :focus .spectrum-Tooltip--top-right, .u-tooltip-showOnHover :focus .spectrum-Tooltip--top-start, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--top, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--top-end, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--top-left, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--top-right, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--top-start, .u-tooltip-showOnHover:focus .spectrum-Tooltip--top, .u-tooltip-showOnHover:focus .spectrum-Tooltip--top-end, .u-tooltip-showOnHover:focus .spectrum-Tooltip--top-left, .u-tooltip-showOnHover:focus .spectrum-Tooltip--top-right, .u-tooltip-showOnHover:focus .spectrum-Tooltip--top-start`, `.u-tooltip-showOnHover :focus .spectrum-Tooltip--bottom, .u-tooltip-showOnHover :focus .spectrum-Tooltip--bottom-end, .u-tooltip-showOnHover :focus .spectrum-Tooltip--bottom-left, .u-tooltip-showOnHover :focus .spectrum-Tooltip--bottom-right, .u-tooltip-showOnHover :focus .spectrum-Tooltip--bottom-start, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--bottom, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--bottom-end, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--bottom-left, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--bottom-right, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--bottom-start, .u-tooltip-showOnHover:focus .spectrum-Tooltip--bottom, .u-tooltip-showOnHover:focus .spectrum-Tooltip--bottom-end, .u-tooltip-showOnHover:focus .spectrum-Tooltip--bottom-left, .u-tooltip-showOnHover:focus .spectrum-Tooltip--bottom-right, .u-tooltip-showOnHover:focus .spectrum-Tooltip--bottom-start`, `.u-tooltip-showOnHover :focus .spectrum-Tooltip--left, .u-tooltip-showOnHover :focus .spectrum-Tooltip--left-bottom, .u-tooltip-showOnHover :focus .spectrum-Tooltip--left-top, .u-tooltip-showOnHover :focus .spectrum-Tooltip--start, .u-tooltip-showOnHover :focus .spectrum-Tooltip--start-bottom, .u-tooltip-showOnHover :focus .spectrum-Tooltip--start-top, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--left, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--left-bottom, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--left-top, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start-bottom, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start-top, .u-tooltip-showOnHover:focus .spectrum-Tooltip--left, .u-tooltip-showOnHover:focus .spectrum-Tooltip--left-bottom, .u-tooltip-showOnHover:focus .spectrum-Tooltip--left-top, .u-tooltip-showOnHover:focus .spectrum-Tooltip--start, .u-tooltip-showOnHover:focus .spectrum-Tooltip--start-bottom, .u-tooltip-showOnHover:focus .spectrum-Tooltip--start-top`, `.u-tooltip-showOnHover :focus .spectrum-Tooltip--end, .u-tooltip-showOnHover :focus .spectrum-Tooltip--end-bottom, .u-tooltip-showOnHover :focus .spectrum-Tooltip--end-top, .u-tooltip-showOnHover :focus .spectrum-Tooltip--right, .u-tooltip-showOnHover :focus .spectrum-Tooltip--right-bottom, .u-tooltip-showOnHover :focus .spectrum-Tooltip--right-top, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end-bottom, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end-top, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--right, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--right-bottom, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--right-top, .u-tooltip-showOnHover.is-focused:dir(rtl) .spectrum-Tooltip--start, .u-tooltip-showOnHover.is-focused:dir(rtl) .spectrum-Tooltip--start-bottom, .u-tooltip-showOnHover.is-focused:dir(rtl) .spectrum-Tooltip--start-top, .u-tooltip-showOnHover:dir(rtl) :focus .spectrum-Tooltip--start, .u-tooltip-showOnHover:dir(rtl) :focus .spectrum-Tooltip--start-bottom, .u-tooltip-showOnHover:dir(rtl) :focus .spectrum-Tooltip--start-top, .u-tooltip-showOnHover:dir(rtl):focus .spectrum-Tooltip--start, .u-tooltip-showOnHover:dir(rtl):focus .spectrum-Tooltip--start-bottom, .u-tooltip-showOnHover:dir(rtl):focus .spectrum-Tooltip--start-top, .u-tooltip-showOnHover:focus .spectrum-Tooltip--end, .u-tooltip-showOnHover:focus .spectrum-Tooltip--end-bottom, .u-tooltip-showOnHover:focus .spectrum-Tooltip--end-top, .u-tooltip-showOnHover:focus .spectrum-Tooltip--right, .u-tooltip-showOnHover:focus .spectrum-Tooltip--right-bottom, .u-tooltip-showOnHover:focus .spectrum-Tooltip--right-top`, `.u-tooltip-showOnHover.is-focused:dir(rtl) .spectrum-Tooltip--end, .u-tooltip-showOnHover.is-focused:dir(rtl) .spectrum-Tooltip--end-bottom, .u-tooltip-showOnHover.is-focused:dir(rtl) .spectrum-Tooltip--end-top, .u-tooltip-showOnHover:dir(rtl) :focus .spectrum-Tooltip--end, .u-tooltip-showOnHover:dir(rtl) :focus .spectrum-Tooltip--end-bottom, .u-tooltip-showOnHover:dir(rtl) :focus .spectrum-Tooltip--end-top, .u-tooltip-showOnHover:dir(rtl):focus .spectrum-Tooltip--end, .u-tooltip-showOnHover:dir(rtl):focus .spectrum-Tooltip--end-bottom, .u-tooltip-showOnHover:dir(rtl):focus .spectrum-Tooltip--end-top`, `.u-tooltip-showOnHover:hover .spectrum-Tooltip--top, .u-tooltip-showOnHover:hover .spectrum-Tooltip--top-end, .u-tooltip-showOnHover:hover .spectrum-Tooltip--top-left, .u-tooltip-showOnHover:hover .spectrum-Tooltip--top-right, .u-tooltip-showOnHover:hover .spectrum-Tooltip--top-start`, `.u-tooltip-showOnHover:hover .spectrum-Tooltip--bottom, .u-tooltip-showOnHover:hover .spectrum-Tooltip--bottom-end, .u-tooltip-showOnHover:hover .spectrum-Tooltip--bottom-left, .u-tooltip-showOnHover:hover .spectrum-Tooltip--bottom-right, .u-tooltip-showOnHover:hover .spectrum-Tooltip--bottom-start`, `.u-tooltip-showOnHover:hover .spectrum-Tooltip--left, .u-tooltip-showOnHover:hover .spectrum-Tooltip--left-bottom, .u-tooltip-showOnHover:hover .spectrum-Tooltip--left-top, .u-tooltip-showOnHover:hover .spectrum-Tooltip--start, .u-tooltip-showOnHover:hover .spectrum-Tooltip--start-bottom, .u-tooltip-showOnHover:hover .spectrum-Tooltip--start-top`, `.u-tooltip-showOnHover:dir(rtl):hover .spectrum-Tooltip--start, .u-tooltip-showOnHover:dir(rtl):hover .spectrum-Tooltip--start-bottom, .u-tooltip-showOnHover:dir(rtl):hover .spectrum-Tooltip--start-top, .u-tooltip-showOnHover:hover .spectrum-Tooltip--end, .u-tooltip-showOnHover:hover .spectrum-Tooltip--end-bottom, .u-tooltip-showOnHover:hover .spectrum-Tooltip--end-top, .u-tooltip-showOnHover:hover .spectrum-Tooltip--right, .u-tooltip-showOnHover:hover .spectrum-Tooltip--right-bottom, .u-tooltip-showOnHover:hover .spectrum-Tooltip--right-top`, `.u-tooltip-showOnHover:dir(rtl):hover .spectrum-Tooltip--end, .u-tooltip-showOnHover:dir(rtl):hover .spectrum-Tooltip--end-bottom, .u-tooltip-showOnHover:dir(rtl):hover .spectrum-Tooltip--end-top`. <br/>Defaults to `var(--spectrum-tooltip-animation-distance)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-tooltip-animation-duration": {
+      "value": "var(--spectrum-animation-duration-100)",
+      "description": "Defined in `.spectrum-Tooltip`. <br/>Used by `.u-tooltip-showOnHover .spectrum-Tooltip`. <br/>Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tooltip-animation-distance": {
+      "value": "4px",
+      "description": "Defined in `.spectrum-Tooltip`. <br/>Used by `.spectrum-Tooltip--top-end.is-open, .spectrum-Tooltip--top-left.is-open, .spectrum-Tooltip--top-right.is-open, .spectrum-Tooltip--top-start.is-open, .spectrum-Tooltip--top.is-open, .spectrum-Tooltip.is-open`, `.spectrum-Tooltip--bottom-end.is-open, .spectrum-Tooltip--bottom-left.is-open, .spectrum-Tooltip--bottom-right.is-open, .spectrum-Tooltip--bottom-start.is-open, .spectrum-Tooltip--bottom.is-open`, `.spectrum-Tooltip--right-bottom.is-open, .spectrum-Tooltip--right-top.is-open, .spectrum-Tooltip--right.is-open`, `.spectrum-Tooltip--left-bottom.is-open, .spectrum-Tooltip--left-top.is-open, .spectrum-Tooltip--left.is-open`, `.spectrum-Tooltip--start-bottom.is-open, .spectrum-Tooltip--start-top.is-open, .spectrum-Tooltip--start.is-open`, `.spectrum-Tooltip--start-bottom.is-open:dir(rtl), .spectrum-Tooltip--start-top.is-open:dir(rtl), .spectrum-Tooltip--start.is-open:dir(rtl)`, `.spectrum-Tooltip--end-bottom.is-open, .spectrum-Tooltip--end-top.is-open, .spectrum-Tooltip--end.is-open`, `.spectrum-Tooltip--end-bottom.is-open:dir(rtl), .spectrum-Tooltip--end-top.is-open:dir(rtl), .spectrum-Tooltip--end.is-open:dir(rtl)`, `.u-tooltip-showOnHover :focus .spectrum-Tooltip--top, .u-tooltip-showOnHover :focus .spectrum-Tooltip--top-end, .u-tooltip-showOnHover :focus .spectrum-Tooltip--top-left, .u-tooltip-showOnHover :focus .spectrum-Tooltip--top-right, .u-tooltip-showOnHover :focus .spectrum-Tooltip--top-start, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--top, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--top-end, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--top-left, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--top-right, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--top-start, .u-tooltip-showOnHover:focus .spectrum-Tooltip--top, .u-tooltip-showOnHover:focus .spectrum-Tooltip--top-end, .u-tooltip-showOnHover:focus .spectrum-Tooltip--top-left, .u-tooltip-showOnHover:focus .spectrum-Tooltip--top-right, .u-tooltip-showOnHover:focus .spectrum-Tooltip--top-start`, `.u-tooltip-showOnHover :focus .spectrum-Tooltip--bottom, .u-tooltip-showOnHover :focus .spectrum-Tooltip--bottom-end, .u-tooltip-showOnHover :focus .spectrum-Tooltip--bottom-left, .u-tooltip-showOnHover :focus .spectrum-Tooltip--bottom-right, .u-tooltip-showOnHover :focus .spectrum-Tooltip--bottom-start, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--bottom, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--bottom-end, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--bottom-left, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--bottom-right, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--bottom-start, .u-tooltip-showOnHover:focus .spectrum-Tooltip--bottom, .u-tooltip-showOnHover:focus .spectrum-Tooltip--bottom-end, .u-tooltip-showOnHover:focus .spectrum-Tooltip--bottom-left, .u-tooltip-showOnHover:focus .spectrum-Tooltip--bottom-right, .u-tooltip-showOnHover:focus .spectrum-Tooltip--bottom-start`, `.u-tooltip-showOnHover :focus .spectrum-Tooltip--left, .u-tooltip-showOnHover :focus .spectrum-Tooltip--left-bottom, .u-tooltip-showOnHover :focus .spectrum-Tooltip--left-top, .u-tooltip-showOnHover :focus .spectrum-Tooltip--start, .u-tooltip-showOnHover :focus .spectrum-Tooltip--start-bottom, .u-tooltip-showOnHover :focus .spectrum-Tooltip--start-top, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--left, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--left-bottom, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--left-top, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start-bottom, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start-top, .u-tooltip-showOnHover:focus .spectrum-Tooltip--left, .u-tooltip-showOnHover:focus .spectrum-Tooltip--left-bottom, .u-tooltip-showOnHover:focus .spectrum-Tooltip--left-top, .u-tooltip-showOnHover:focus .spectrum-Tooltip--start, .u-tooltip-showOnHover:focus .spectrum-Tooltip--start-bottom, .u-tooltip-showOnHover:focus .spectrum-Tooltip--start-top`, `.u-tooltip-showOnHover :focus .spectrum-Tooltip--end, .u-tooltip-showOnHover :focus .spectrum-Tooltip--end-bottom, .u-tooltip-showOnHover :focus .spectrum-Tooltip--end-top, .u-tooltip-showOnHover :focus .spectrum-Tooltip--right, .u-tooltip-showOnHover :focus .spectrum-Tooltip--right-bottom, .u-tooltip-showOnHover :focus .spectrum-Tooltip--right-top, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end-bottom, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end-top, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--right, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--right-bottom, .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--right-top, .u-tooltip-showOnHover.is-focused:dir(rtl) .spectrum-Tooltip--start, .u-tooltip-showOnHover.is-focused:dir(rtl) .spectrum-Tooltip--start-bottom, .u-tooltip-showOnHover.is-focused:dir(rtl) .spectrum-Tooltip--start-top, .u-tooltip-showOnHover:dir(rtl) :focus .spectrum-Tooltip--start, .u-tooltip-showOnHover:dir(rtl) :focus .spectrum-Tooltip--start-bottom, .u-tooltip-showOnHover:dir(rtl) :focus .spectrum-Tooltip--start-top, .u-tooltip-showOnHover:dir(rtl):focus .spectrum-Tooltip--start, .u-tooltip-showOnHover:dir(rtl):focus .spectrum-Tooltip--start-bottom, .u-tooltip-showOnHover:dir(rtl):focus .spectrum-Tooltip--start-top, .u-tooltip-showOnHover:focus .spectrum-Tooltip--end, .u-tooltip-showOnHover:focus .spectrum-Tooltip--end-bottom, .u-tooltip-showOnHover:focus .spectrum-Tooltip--end-top, .u-tooltip-showOnHover:focus .spectrum-Tooltip--right, .u-tooltip-showOnHover:focus .spectrum-Tooltip--right-bottom, .u-tooltip-showOnHover:focus .spectrum-Tooltip--right-top`, `.u-tooltip-showOnHover.is-focused:dir(rtl) .spectrum-Tooltip--end, .u-tooltip-showOnHover.is-focused:dir(rtl) .spectrum-Tooltip--end-bottom, .u-tooltip-showOnHover.is-focused:dir(rtl) .spectrum-Tooltip--end-top, .u-tooltip-showOnHover:dir(rtl) :focus .spectrum-Tooltip--end, .u-tooltip-showOnHover:dir(rtl) :focus .spectrum-Tooltip--end-bottom, .u-tooltip-showOnHover:dir(rtl) :focus .spectrum-Tooltip--end-top, .u-tooltip-showOnHover:dir(rtl):focus .spectrum-Tooltip--end, .u-tooltip-showOnHover:dir(rtl):focus .spectrum-Tooltip--end-bottom, .u-tooltip-showOnHover:dir(rtl):focus .spectrum-Tooltip--end-top`, `.u-tooltip-showOnHover:hover .spectrum-Tooltip--top, .u-tooltip-showOnHover:hover .spectrum-Tooltip--top-end, .u-tooltip-showOnHover:hover .spectrum-Tooltip--top-left, .u-tooltip-showOnHover:hover .spectrum-Tooltip--top-right, .u-tooltip-showOnHover:hover .spectrum-Tooltip--top-start`, `.u-tooltip-showOnHover:hover .spectrum-Tooltip--bottom, .u-tooltip-showOnHover:hover .spectrum-Tooltip--bottom-end, .u-tooltip-showOnHover:hover .spectrum-Tooltip--bottom-left, .u-tooltip-showOnHover:hover .spectrum-Tooltip--bottom-right, .u-tooltip-showOnHover:hover .spectrum-Tooltip--bottom-start`, `.u-tooltip-showOnHover:hover .spectrum-Tooltip--left, .u-tooltip-showOnHover:hover .spectrum-Tooltip--left-bottom, .u-tooltip-showOnHover:hover .spectrum-Tooltip--left-top, .u-tooltip-showOnHover:hover .spectrum-Tooltip--start, .u-tooltip-showOnHover:hover .spectrum-Tooltip--start-bottom, .u-tooltip-showOnHover:hover .spectrum-Tooltip--start-top`, `.u-tooltip-showOnHover:dir(rtl):hover .spectrum-Tooltip--start, .u-tooltip-showOnHover:dir(rtl):hover .spectrum-Tooltip--start-bottom, .u-tooltip-showOnHover:dir(rtl):hover .spectrum-Tooltip--start-top, .u-tooltip-showOnHover:hover .spectrum-Tooltip--end, .u-tooltip-showOnHover:hover .spectrum-Tooltip--end-bottom, .u-tooltip-showOnHover:hover .spectrum-Tooltip--end-top, .u-tooltip-showOnHover:hover .spectrum-Tooltip--right, .u-tooltip-showOnHover:hover .spectrum-Tooltip--right-bottom, .u-tooltip-showOnHover:hover .spectrum-Tooltip--right-top`, `.u-tooltip-showOnHover:dir(rtl):hover .spectrum-Tooltip--end, .u-tooltip-showOnHover:dir(rtl):hover .spectrum-Tooltip--end-bottom, .u-tooltip-showOnHover:dir(rtl):hover .spectrum-Tooltip--end-top`. <br/>Defaults to `var(--spectrum-spacing-75)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tooltip-margin": {
+      "value": "0px",
+      "description": "Defined in `.spectrum-Tooltip`. <br/>Used by `.spectrum-Tooltip, .spectrum-Tooltip--top, .spectrum-Tooltip--top-end, .spectrum-Tooltip--top-left, .spectrum-Tooltip--top-right, .spectrum-Tooltip--top-start`, `.spectrum-Tooltip--bottom, .spectrum-Tooltip--bottom-end, .spectrum-Tooltip--bottom-left, .spectrum-Tooltip--bottom-right, .spectrum-Tooltip--bottom-start`, `.spectrum-Tooltip--right, .spectrum-Tooltip--right-bottom, .spectrum-Tooltip--right-top`, `.spectrum-Tooltip--left, .spectrum-Tooltip--left-bottom, .spectrum-Tooltip--left-top`, `.spectrum-Tooltip--start, .spectrum-Tooltip--start-bottom, .spectrum-Tooltip--start-top`, `.spectrum-Tooltip--end, .spectrum-Tooltip--end-bottom, .spectrum-Tooltip--end-top`. <br/>Defaults to `0px`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tooltip-height": {
+      "value": "24px",
+      "description": "Defined in `.spectrum-Tooltip`. <br/>Used by `.spectrum-Tooltip`. <br/>Defaults to `var(--spectrum-component-height-75)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tooltip-max-inline-size": {
+      "value": "160px",
+      "description": "Defined in `.spectrum-Tooltip`. <br/>Used by `.spectrum-Tooltip`. <br/>Defaults to `var(--spectrum-tooltip-maximum-width)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tooltip-maximum-width": {
+      "value": "160px",
+      "description": "Used by `--spectrum-tooltip-max-inline-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tooltip-border-radius": {
+      "value": "7px",
+      "description": "Defined in `.spectrum-Tooltip`. <br/>Used by `--spectrum-tooltip-pointer-corner-spacing`, `.spectrum-Tooltip`. <br/>Defaults to `var(--spectrum-corner-radius-400)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tooltip-font-size": {
+      "value": "12px",
+      "description": "Defined in `.spectrum-Tooltip`. <br/>Used by `.spectrum-Tooltip`. <br/>Defaults to `var(--spectrum-font-size-75)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tooltip-line-height": {
+      "value": "1.2",
+      "description": "Defined in `.spectrum-Tooltip`. <br/>Used by `.spectrum-Tooltip`, `.spectrum-Tooltip-label`. <br/>Defaults to `1.2`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tooltip-cjk-line-height": {
+      "value": "1.5",
+      "description": "Defined in `.spectrum-Tooltip`. <br/>Used by `.spectrum-Tooltip:lang(ja), .spectrum-Tooltip:lang(ko), .spectrum-Tooltip:lang(zh)`. <br/>Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tooltip-font-weight": {
+      "value": "400",
+      "description": "Defined in `.spectrum-Tooltip`. <br/>Used by `.spectrum-Tooltip`. <br/>Defaults to `var(--spectrum-regular-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tooltip-spacing-inline": {
+      "value": "9px",
+      "description": "Defined in `.spectrum-Tooltip`. <br/>Used by `.spectrum-Tooltip`. <br/>Defaults to `var(--spectrum-component-edge-to-text-75)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tooltip-spacing-block-start": {
+      "value": "4px",
+      "description": "Defined in `.spectrum-Tooltip`. <br/>Used by `.spectrum-Tooltip-label`. <br/>Defaults to `var(--spectrum-component-top-to-text-75)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tooltip-spacing-block-end": {
+      "value": "5px",
+      "description": "Defined in `.spectrum-Tooltip`. <br/>Used by `.spectrum-Tooltip-label`. <br/>Defaults to `var(--spectrum-component-bottom-to-text-75)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tooltip-content-color": {
+      "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+      "description": "Defined in `.spectrum-Tooltip`. <br/>Used by `.spectrum-Tooltip`. <br/>Defaults to `var(--spectrum-gray-25)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-tooltip-background-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-Tooltip`. <br/>Used by `.spectrum-Tooltip`, `.spectrum-Tooltip-tip`. <br/>Defaults to `var(--spectrum-neutral-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-tooltip-background-color-informative": {
+      "value": "var(--spectrum-informative-color-900)",
+      "description": "Defined in `.spectrum-Tooltip`. <br/>Used by `.spectrum-Tooltip--info`, `.spectrum-Tooltip--info .spectrum-Tooltip-tip`. <br/>Defaults to `var(--spectrum-informative-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-tooltip-background-color-negative": {
+      "value": "var(--spectrum-negative-color-900)",
+      "description": "Defined in `.spectrum-Tooltip`. <br/>Used by `.spectrum-Tooltip--negative`, `.spectrum-Tooltip--negative .spectrum-Tooltip-tip`. <br/>Defaults to `var(--spectrum-negative-background-color-default)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-tooltip-tip-block-size": {
+      "value": "5px",
+      "description": "Defined in `.spectrum-Tooltip`. <br/>Used by `.spectrum-Tooltip, .spectrum-Tooltip--top, .spectrum-Tooltip--top-end, .spectrum-Tooltip--top-left, .spectrum-Tooltip--top-right, .spectrum-Tooltip--top-start`, `.spectrum-Tooltip--bottom, .spectrum-Tooltip--bottom-end, .spectrum-Tooltip--bottom-left, .spectrum-Tooltip--bottom-right, .spectrum-Tooltip--bottom-start`, `.spectrum-Tooltip--right, .spectrum-Tooltip--right-bottom, .spectrum-Tooltip--right-top`, `.spectrum-Tooltip--left, .spectrum-Tooltip--left-bottom, .spectrum-Tooltip--left-top`, `.spectrum-Tooltip--start, .spectrum-Tooltip--start-bottom, .spectrum-Tooltip--start-top`, `.spectrum-Tooltip--end, .spectrum-Tooltip--end-bottom, .spectrum-Tooltip--end-top`. <br/>Defaults to `var(--spectrum-tooltip-tip-height)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tooltip-tip-height": {
+      "value": "5px",
+      "description": "Used by `--spectrum-tooltip-tip-block-size`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tooltip-tip-height-percentage": {
+      "value": "100%",
+      "description": "Defined in `.spectrum-Tooltip`. <br/>Used by `.spectrum-Tooltip-tip`. <br/>Defaults to `100%`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tooltip-tip-antialiasing-inset": {
+      "value": "0.5px",
+      "description": "Defined in `.spectrum-Tooltip`. <br/>Used by `.spectrum-Tooltip-tip`, `.spectrum-Tooltip--top .spectrum-Tooltip-tip, .spectrum-Tooltip--top-end .spectrum-Tooltip-tip, .spectrum-Tooltip--top-left .spectrum-Tooltip-tip, .spectrum-Tooltip--top-right .spectrum-Tooltip-tip, .spectrum-Tooltip--top-start .spectrum-Tooltip-tip`, `.spectrum-Tooltip--bottom .spectrum-Tooltip-tip, .spectrum-Tooltip--bottom-end .spectrum-Tooltip-tip, .spectrum-Tooltip--bottom-left .spectrum-Tooltip-tip, .spectrum-Tooltip--bottom-right .spectrum-Tooltip-tip, .spectrum-Tooltip--bottom-start .spectrum-Tooltip-tip`, `.spectrum-Tooltip--end .spectrum-Tooltip-tip, .spectrum-Tooltip--end-bottom .spectrum-Tooltip-tip, .spectrum-Tooltip--end-top .spectrum-Tooltip-tip, .spectrum-Tooltip--right .spectrum-Tooltip-tip, .spectrum-Tooltip--right-bottom .spectrum-Tooltip-tip, .spectrum-Tooltip--right-top .spectrum-Tooltip-tip`, `.spectrum-Tooltip--left .spectrum-Tooltip-tip, .spectrum-Tooltip--left-bottom .spectrum-Tooltip-tip, .spectrum-Tooltip--left-top .spectrum-Tooltip-tip, .spectrum-Tooltip--start .spectrum-Tooltip-tip, .spectrum-Tooltip--start-bottom .spectrum-Tooltip-tip, .spectrum-Tooltip--start-top .spectrum-Tooltip-tip`, `.spectrum-Tooltip--end .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--end-bottom .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--end-top .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--left .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--left-bottom .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--left-top .spectrum-Tooltip-tip:dir(rtl)`, `.spectrum-Tooltip--right .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--right-bottom .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--right-top .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--start .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--start-bottom .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--start-top .spectrum-Tooltip-tip:dir(rtl)`. <br/>Defaults to `0.5px`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tooltip-pointer-corner-spacing": {
+      "value": "var(--mod-tooltip-border-radius, var(--spectrum-tooltip-border-radius))",
+      "description": "Defined in `.spectrum-Tooltip`. <br/>Used by `.spectrum-Tooltip--bottom-left .spectrum-Tooltip-tip, .spectrum-Tooltip--top-left .spectrum-Tooltip-tip`, `.spectrum-Tooltip--bottom-right .spectrum-Tooltip-tip, .spectrum-Tooltip--top-right .spectrum-Tooltip-tip`, `.spectrum-Tooltip--bottom-start .spectrum-Tooltip-tip, .spectrum-Tooltip--top-start .spectrum-Tooltip-tip`, `.spectrum-Tooltip--bottom-start .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--top-start .spectrum-Tooltip-tip:dir(rtl)`, `.spectrum-Tooltip--bottom-end .spectrum-Tooltip-tip, .spectrum-Tooltip--top-end .spectrum-Tooltip-tip`, `.spectrum-Tooltip--bottom-end .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--top-end .spectrum-Tooltip-tip:dir(rtl)`, `.spectrum-Tooltip--end-top .spectrum-Tooltip-tip, .spectrum-Tooltip--left-top .spectrum-Tooltip-tip, .spectrum-Tooltip--right-top .spectrum-Tooltip-tip, .spectrum-Tooltip--start-top .spectrum-Tooltip-tip`, `.spectrum-Tooltip--end-bottom .spectrum-Tooltip-tip, .spectrum-Tooltip--left-bottom .spectrum-Tooltip-tip, .spectrum-Tooltip--right-bottom .spectrum-Tooltip-tip, .spectrum-Tooltip--start-bottom .spectrum-Tooltip-tip`. <br/>Defaults to `var(--mod-tooltip-border-radius, var(--spectrum-tooltip-border-radius))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tooltip-tip-square-size": {
+      "description": "Used by `.spectrum-Tooltip-tip`, `.spectrum-Tooltip--top .spectrum-Tooltip-tip, .spectrum-Tooltip--top-end .spectrum-Tooltip-tip, .spectrum-Tooltip--top-left .spectrum-Tooltip-tip, .spectrum-Tooltip--top-right .spectrum-Tooltip-tip, .spectrum-Tooltip--top-start .spectrum-Tooltip-tip`, `.spectrum-Tooltip--bottom .spectrum-Tooltip-tip, .spectrum-Tooltip--bottom-end .spectrum-Tooltip-tip, .spectrum-Tooltip--bottom-left .spectrum-Tooltip-tip, .spectrum-Tooltip--bottom-right .spectrum-Tooltip-tip, .spectrum-Tooltip--bottom-start .spectrum-Tooltip-tip`, `.spectrum-Tooltip--end .spectrum-Tooltip-tip, .spectrum-Tooltip--end-bottom .spectrum-Tooltip-tip, .spectrum-Tooltip--end-top .spectrum-Tooltip-tip, .spectrum-Tooltip--left .spectrum-Tooltip-tip, .spectrum-Tooltip--left-bottom .spectrum-Tooltip-tip, .spectrum-Tooltip--left-top .spectrum-Tooltip-tip, .spectrum-Tooltip--right .spectrum-Tooltip-tip, .spectrum-Tooltip--right-bottom .spectrum-Tooltip-tip, .spectrum-Tooltip--right-top .spectrum-Tooltip-tip, .spectrum-Tooltip--start .spectrum-Tooltip-tip, .spectrum-Tooltip--start-bottom .spectrum-Tooltip-tip, .spectrum-Tooltip--start-top .spectrum-Tooltip-tip`, `.spectrum-Tooltip--end .spectrum-Tooltip-tip, .spectrum-Tooltip--end-bottom .spectrum-Tooltip-tip, .spectrum-Tooltip--end-top .spectrum-Tooltip-tip, .spectrum-Tooltip--right .spectrum-Tooltip-tip, .spectrum-Tooltip--right-bottom .spectrum-Tooltip-tip, .spectrum-Tooltip--right-top .spectrum-Tooltip-tip`, `.spectrum-Tooltip--left .spectrum-Tooltip-tip, .spectrum-Tooltip--left-bottom .spectrum-Tooltip-tip, .spectrum-Tooltip--left-top .spectrum-Tooltip-tip, .spectrum-Tooltip--start .spectrum-Tooltip-tip, .spectrum-Tooltip--start-bottom .spectrum-Tooltip-tip, .spectrum-Tooltip--start-top .spectrum-Tooltip-tip`, `.spectrum-Tooltip--end .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--end-bottom .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--end-top .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--left .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--left-bottom .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--left-top .spectrum-Tooltip-tip:dir(rtl)`, `.spectrum-Tooltip--right .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--right-bottom .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--right-top .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--start .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--start-bottom .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--start-top .spectrum-Tooltip-tip:dir(rtl)`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tooltip-tip-corner-radius": {
+      "value": "1px",
+      "description": "Used by `.spectrum-Tooltip-tip`.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-animation-duration-100": {
+      "description": "Used by `.spectrum-Tooltip`, `--spectrum-tooltip-animation-duration`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-animation-duration-0": {
+      "description": "Used by `.spectrum-Tooltip.is-open`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-spacing-75": {
+      "value": "4px",
+      "description": "Used by `--spectrum-tooltip-animation-distance`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-75": {
+      "value": "24px",
+      "description": "Used by `--spectrum-tooltip-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-400": {
+      "value": "7px",
+      "description": "Used by `--spectrum-tooltip-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-75": {
+      "value": "12px",
+      "description": "Used by `--spectrum-tooltip-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-cjk-line-height-100": {
+      "value": "1.5",
+      "description": "Used by `--spectrum-tooltip-cjk-line-height`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-regular-font-weight": {
+      "value": "400",
+      "description": "Used by `--spectrum-tooltip-font-weight`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-text-75": {
+      "value": "9px",
+      "description": "Used by `--spectrum-tooltip-spacing-inline`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-top-to-text-75": {
+      "value": "4px",
+      "description": "Used by `--spectrum-tooltip-spacing-block-start`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-bottom-to-text-75": {
+      "value": "5px",
+      "description": "Used by `--spectrum-tooltip-spacing-block-end`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-25": {
+      "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+      "description": "Used by `--spectrum-tooltip-content-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-neutral-background-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-tooltip-background-color-default`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-informative-background-color-default": {
+      "value": "var(--spectrum-informative-color-900)",
+      "description": "Used by `--spectrum-tooltip-background-color-informative`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-negative-background-color-default": {
+      "value": "var(--spectrum-negative-color-900)",
+      "description": "Used by `--spectrum-tooltip-background-color-negative`.",
+      "control": "color",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {
+    "highcontrast-tooltip-border-width": {
+      "value": "1px",
+      "description": "Defined in `.spectrum-Tooltip`. <br/>Used by `.spectrum-Tooltip-tip`, `.spectrum-Tooltip--top .spectrum-Tooltip-tip, .spectrum-Tooltip--top-end .spectrum-Tooltip-tip, .spectrum-Tooltip--top-left .spectrum-Tooltip-tip, .spectrum-Tooltip--top-right .spectrum-Tooltip-tip, .spectrum-Tooltip--top-start .spectrum-Tooltip-tip`, `.spectrum-Tooltip--bottom .spectrum-Tooltip-tip, .spectrum-Tooltip--bottom-end .spectrum-Tooltip-tip, .spectrum-Tooltip--bottom-left .spectrum-Tooltip-tip, .spectrum-Tooltip--bottom-right .spectrum-Tooltip-tip, .spectrum-Tooltip--bottom-start .spectrum-Tooltip-tip`, `.spectrum-Tooltip--end .spectrum-Tooltip-tip, .spectrum-Tooltip--end-bottom .spectrum-Tooltip-tip, .spectrum-Tooltip--end-top .spectrum-Tooltip-tip, .spectrum-Tooltip--right .spectrum-Tooltip-tip, .spectrum-Tooltip--right-bottom .spectrum-Tooltip-tip, .spectrum-Tooltip--right-top .spectrum-Tooltip-tip`, `.spectrum-Tooltip--left .spectrum-Tooltip-tip, .spectrum-Tooltip--left-bottom .spectrum-Tooltip-tip, .spectrum-Tooltip--left-top .spectrum-Tooltip-tip, .spectrum-Tooltip--start .spectrum-Tooltip-tip, .spectrum-Tooltip--start-bottom .spectrum-Tooltip-tip, .spectrum-Tooltip--start-top .spectrum-Tooltip-tip`, `.spectrum-Tooltip--end .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--end-bottom .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--end-top .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--left .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--left-bottom .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--left-top .spectrum-Tooltip-tip:dir(rtl)`, `.spectrum-Tooltip--right .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--right-bottom .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--right-top .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--start .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--start-bottom .spectrum-Tooltip-tip:dir(rtl), .spectrum-Tooltip--start-top .spectrum-Tooltip-tip:dir(rtl)`, `.spectrum-Tooltip`. <br/>Defaults to `1px`, if not set.",
+      "control": "text"
+    },
+    "highcontrast-tooltip-background-color-default": {
+      "value": "var(--mod-tooltip-background-color-negative, var(--spectrum-tooltip-background-color-negative))",
+      "description": "Defined in `.spectrum-Tooltip-tip`. <br/>Used by `.spectrum-Tooltip`, `.spectrum-Tooltip--info`, `.spectrum-Tooltip--negative`, `.spectrum-Tooltip-tip`, `.spectrum-Tooltip--info .spectrum-Tooltip-tip`, `.spectrum-Tooltip--negative .spectrum-Tooltip-tip`. <br/>Defaults to `var(--mod-tooltip-background-color-negative, var(--spectrum-tooltip-background-color-negative))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/tooltip/stories/tooltip.stories.js b/components/tooltip/stories/tooltip.stories.js
index 9b8541ea287..7300f5a9284 100644
--- a/components/tooltip/stories/tooltip.stories.js
+++ b/components/tooltip/stories/tooltip.stories.js
@@ -1,10 +1,12 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isFocused, isOpen } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { SemanticVariantGroup, TooltipPlacementGroup, TooltipShowOnHover } from "./template.js";
 import { PlacementVariants } from "./tooltip.test.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * A tooltip shows contextual help or information about specific components when a user hovers or focuses on it.
  */
@@ -99,6 +101,10 @@ export default {
 		status: {
 			type: "migrated",
 		},
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 	tags: ["migrated"],
 };
diff --git a/components/tray/dist/metadata.json b/components/tray/dist/metadata.json
index db6c152c441..4199236a06f 100644
--- a/components/tray/dist/metadata.json
+++ b/components/tray/dist/metadata.json
@@ -6,36 +6,153 @@
     ".spectrum-Tray-wrapper",
     ".spectrum-Tray.is-open"
   ],
-  "modifiers": [
-    "--mod-tray-background-color",
-    "--mod-tray-bottom-to-content-area",
-    "--mod-tray-corner-radius",
-    "--mod-tray-corner-radius-portrait",
-    "--mod-tray-entry-animation-delay",
-    "--mod-tray-entry-animation-duration",
-    "--mod-tray-exit-animation-delay",
-    "--mod-tray-exit-animation-duration",
-    "--mod-tray-max-inline-size",
-    "--mod-tray-spacing-edge-to-tray-safe-zone",
-    "--mod-tray-top-to-content-area"
-  ],
-  "component": [
-    "--spectrum-tray-background-color",
-    "--spectrum-tray-corner-radius",
-    "--spectrum-tray-entry-animation-delay",
-    "--spectrum-tray-entry-animation-duration",
-    "--spectrum-tray-exit-animation-delay",
-    "--spectrum-tray-exit-animation-duration",
-    "--spectrum-tray-max-inline-size",
-    "--spectrum-tray-spacing-edge-to-tray-safe-zone",
-    "--spectrum-tray-top-to-content-area"
-  ],
-  "global": [
-    "--spectrum-animation-duration-100",
-    "--spectrum-animation-duration-500",
-    "--spectrum-background-layer-2-color",
-    "--spectrum-corner-radius-100"
-  ],
-  "passthroughs": ["--mod-modal-max-width"],
-  "high-contrast": ["--highcontrast-tray-background-color"]
+  "modifiers": {
+    "mod-tray-max-inline-size": {
+      "description": "Used by `--spectrum-tray-max-inline-size`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tray-spacing-edge-to-tray-safe-zone": {
+      "description": "Used by `--spectrum-tray-spacing-edge-to-tray-safe-zone`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tray-entry-animation-delay": {
+      "description": "Used by `--spectrum-tray-entry-animation-delay`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tray-entry-animation-duration": {
+      "description": "Used by `--spectrum-tray-entry-animation-duration`. <br/>Defaults to `var(--spectrum-animation-duration-500)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tray-exit-animation-delay": {
+      "description": "Used by `--spectrum-tray-exit-animation-delay`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tray-exit-animation-duration": {
+      "description": "Used by `--spectrum-tray-exit-animation-duration`. <br/>Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tray-corner-radius": {
+      "description": "Used by `--spectrum-tray-corner-radius`. <br/>Defaults to `var(--spectrum-corner-radius-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tray-background-color": {
+      "description": "Used by `--spectrum-tray-background-color`. <br/>Defaults to `var(--spectrum-background-layer-2-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-tray-top-to-content-area": {
+      "description": "Used by `.spectrum-Tray`. <br/>Defaults to `var(--spectrum-tray-top-to-content-area)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tray-bottom-to-content-area": {
+      "description": "Used by `.spectrum-Tray`. <br/>Defaults to `var(--spectrum-tray-top-to-content-area)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-tray-corner-radius-portrait": {
+      "description": "Used by `.spectrum-Tray`.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-tray-max-inline-size": {
+      "value": "var(--mod-tray-max-inline-size, 375px)",
+      "description": "Defined in `.spectrum-Tray`. <br/>Used by `.spectrum-Tray`. <br/>Defaults to `var(--mod-tray-max-inline-size, 375px)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tray-spacing-edge-to-tray-safe-zone": {
+      "value": "var(--mod-tray-spacing-edge-to-tray-safe-zone, 64px)",
+      "description": "Defined in `.spectrum-Tray`. <br/>Used by `.spectrum-Tray`. <br/>Defaults to `var(--mod-tray-spacing-edge-to-tray-safe-zone, 64px)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tray-entry-animation-delay": {
+      "value": "var(--mod-tray-entry-animation-delay, 160ms)",
+      "description": "Defined in `.spectrum-Tray`. <br/>Used by `.spectrum-Tray.is-open`. <br/>Defaults to `var(--mod-tray-entry-animation-delay, 160ms)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tray-entry-animation-duration": {
+      "value": "var(--mod-tray-entry-animation-duration, var(--spectrum-animation-duration-500))",
+      "description": "Defined in `.spectrum-Tray`. <br/>Used by `.spectrum-Tray.is-open`. <br/>Defaults to `var(--mod-tray-entry-animation-duration, var(--spectrum-animation-duration-500))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tray-exit-animation-delay": {
+      "value": "var(--mod-tray-exit-animation-delay, 0ms)",
+      "description": "Defined in `.spectrum-Tray`. <br/>Used by `.spectrum-Tray`. <br/>Defaults to `var(--mod-tray-exit-animation-delay, 0ms)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tray-exit-animation-duration": {
+      "value": "var(--mod-tray-exit-animation-duration, var(--spectrum-animation-duration-100))",
+      "description": "Defined in `.spectrum-Tray`. <br/>Used by `.spectrum-Tray`. <br/>Defaults to `var(--mod-tray-exit-animation-duration, var(--spectrum-animation-duration-100))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tray-corner-radius": {
+      "value": "var(--mod-tray-corner-radius, var(--spectrum-corner-radius-100))",
+      "description": "Defined in `.spectrum-Tray`. <br/>Used by `.spectrum-Tray`. <br/>Defaults to `var(--mod-tray-corner-radius, var(--spectrum-corner-radius-100))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-tray-background-color": {
+      "value": "var(--highcontrast-tray-background-color, var(--mod-tray-background-color, var(--spectrum-background-layer-2-color)))",
+      "description": "Defined in `.spectrum-Tray`. <br/>Used by `.spectrum-Tray`. <br/>Defaults to `var(--highcontrast-tray-background-color, var(--mod-tray-background-color, var(--spectrum-background-layer-2-color)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-tray-top-to-content-area": {
+      "value": "4px",
+      "description": "Used by `.spectrum-Tray`.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-animation-duration-500": {
+      "description": "Used by `--spectrum-tray-entry-animation-duration`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-animation-duration-100": {
+      "description": "Used by `--spectrum-tray-exit-animation-duration`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-100": {
+      "value": "4px",
+      "description": "Used by `--spectrum-tray-corner-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-background-layer-2-color": {
+      "value": "var(--spectrum-gray-25)",
+      "description": "Used by `--spectrum-tray-background-color`.",
+      "control": "color",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {
+    "mod-modal-max-width": {
+      "category": "Passthrough"
+    }
+  },
+  "high-contrast": {
+    "highcontrast-tray-background-color": {
+      "value": "var(--mod-tray-background-color, var(--spectrum-background-layer-2-color))",
+      "description": "Defined in `.spectrum-Tray`. <br/>Used by `--spectrum-tray-background-color`. <br/>Defaults to `var(--mod-tray-background-color, var(--spectrum-background-layer-2-color))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/tray/stories/tray.stories.js b/components/tray/stories/tray.stories.js
index 2f9221df9f6..f4c3a03255f 100644
--- a/components/tray/stories/tray.stories.js
+++ b/components/tray/stories/tray.stories.js
@@ -1,9 +1,11 @@
 import { Template as Dialog } from "@spectrum-css/dialog/stories/template.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isOpen } from "@spectrum-css/preview/types";
+import { TrayGroup } from "./tray.test.js";
+
+// Local assets to render the component styles and structure
 import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
-import { TrayGroup } from "./tray.test.js";
 
 /**
  * A tray is typically used to display transient content (menus, options, additional actions, etc.) on mobile devices or smaller screens, exposing types of content that may be too overwhelming for [popovers](?path=/docs/components-popover--docs).
@@ -40,6 +42,10 @@ export default {
 		},
 		packageJson,
 		metadata,
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 };
 
diff --git a/components/treeview/dist/metadata.json b/components/treeview/dist/metadata.json
index b8515093336..3639a7a1d16 100644
--- a/components/treeview/dist/metadata.json
+++ b/components/treeview/dist/metadata.json
@@ -45,142 +45,702 @@
     ".spectrum-TreeView-itemLink:hover:before",
     ".spectrum-TreeView-section > .spectrum-TreeView",
     ".spectrum-TreeView-section:not(:first-child)",
+    ".spectrum-TreeView:dir(rtl)",
     ".spectrum-TreeView.spectrum-TreeView--detached",
     ".spectrum-TreeView.spectrum-TreeView--quiet",
-    ".spectrum-TreeView.spectrum-TreeView--thumbnail",
-    ".spectrum-TreeView:dir(rtl)"
+    ".spectrum-TreeView.spectrum-TreeView--thumbnail"
   ],
-  "modifiers": [
-    "--mod-treeview-font-size",
-    "--mod-treeview-heading-bottom-to-text",
-    "--mod-treeview-heading-color",
-    "--mod-treeview-heading-font-weight",
-    "--mod-treeview-indicator-animation-duration",
-    "--mod-treeview-indicator-margin-inline-start",
-    "--mod-treeview-indicator-padding-block",
-    "--mod-treeview-indicator-padding-inline",
-    "--mod-treeview-item-background-color-focus",
-    "--mod-treeview-item-background-color-hover",
-    "--mod-treeview-item-background-color-quiet-selected",
-    "--mod-treeview-item-background-color-selected",
-    "--mod-treeview-item-border-color-focus",
-    "--mod-treeview-item-border-color-selected",
-    "--mod-treeview-item-border-color-selected-quiet",
-    "--mod-treeview-item-border-radius",
-    "--mod-treeview-item-border-radius-detached",
-    "--mod-treeview-item-border-size",
-    "--mod-treeview-item-border-size-selected",
-    "--mod-treeview-item-icon-color",
-    "--mod-treeview-item-icon-color-disabled",
-    "--mod-treeview-item-icon-color-focus",
-    "--mod-treeview-item-icon-color-hover",
-    "--mod-treeview-item-icon-color-selected",
-    "--mod-treeview-item-icon-gap",
-    "--mod-treeview-item-indentation",
-    "--mod-treeview-item-min-block-size",
-    "--mod-treeview-item-min-block-size-thumbnail",
-    "--mod-treeview-item-padding-inline-end",
-    "--mod-treeview-item-padding-inline-start",
-    "--mod-treeview-item-text-color",
-    "--mod-treeview-item-text-color-disabled",
-    "--mod-treeview-item-text-color-focus",
-    "--mod-treeview-item-text-color-hover",
-    "--mod-treeview-item-text-color-selected",
-    "--mod-treeview-line-height",
-    "--mod-treeview-margin-block",
-    "--mod-treeview-section-spacing"
-  ],
-  "component": [
-    "--spectrum-treeview-font-size",
-    "--spectrum-treeview-heading-bottom-to-text",
-    "--spectrum-treeview-heading-color",
-    "--spectrum-treeview-indicator-animation-duration",
-    "--spectrum-treeview-indicator-margin-inline-start",
-    "--spectrum-treeview-indicator-padding",
-    "--spectrum-treeview-item-background-color-focus",
-    "--spectrum-treeview-item-background-color-hover",
-    "--spectrum-treeview-item-background-color-quiet-selected",
-    "--spectrum-treeview-item-background-color-selected",
-    "--spectrum-treeview-item-border-color-focus",
-    "--spectrum-treeview-item-border-color-quiet-selected",
-    "--spectrum-treeview-item-border-color-selected",
-    "--spectrum-treeview-item-border-radius",
-    "--spectrum-treeview-item-border-size",
-    "--spectrum-treeview-item-border-size-selected",
-    "--spectrum-treeview-item-icon-color",
-    "--spectrum-treeview-item-icon-color-disabled",
-    "--spectrum-treeview-item-icon-color-focus",
-    "--spectrum-treeview-item-icon-color-hover",
-    "--spectrum-treeview-item-icon-color-selected",
-    "--spectrum-treeview-item-icon-gap",
-    "--spectrum-treeview-item-indentation",
-    "--spectrum-treeview-item-indentation-extra-large",
-    "--spectrum-treeview-item-indentation-large",
-    "--spectrum-treeview-item-indentation-medium",
-    "--spectrum-treeview-item-indentation-small",
-    "--spectrum-treeview-item-min-block-size",
-    "--spectrum-treeview-item-min-block-size-thumbnail-offset",
-    "--spectrum-treeview-item-min-block-size-thumbnail-offset-medium",
-    "--spectrum-treeview-item-padding-inline-end",
-    "--spectrum-treeview-item-padding-inline-start",
-    "--spectrum-treeview-item-sized-indentation",
-    "--spectrum-treeview-item-sized-min-block-size",
-    "--spectrum-treeview-item-text-color",
-    "--spectrum-treeview-item-text-color-disabled",
-    "--spectrum-treeview-item-text-color-focus",
-    "--spectrum-treeview-item-text-color-hover",
-    "--spectrum-treeview-item-text-color-selected",
-    "--spectrum-treeview-section-spacing"
-  ],
-  "global": [
-    "--spectrum-animation-duration-100",
-    "--spectrum-blue-700",
-    "--spectrum-blue-800",
-    "--spectrum-bold-font-weight",
-    "--spectrum-border-width-200",
-    "--spectrum-component-edge-to-text-100",
-    "--spectrum-component-edge-to-text-200",
-    "--spectrum-component-edge-to-text-300",
-    "--spectrum-component-edge-to-text-75",
-    "--spectrum-component-height-100",
-    "--spectrum-component-height-200",
-    "--spectrum-component-height-300",
-    "--spectrum-component-height-75",
-    "--spectrum-corner-radius-100",
-    "--spectrum-disabled-content-color",
-    "--spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large",
-    "--spectrum-disclosure-indicator-top-to-disclosure-icon-large",
-    "--spectrum-disclosure-indicator-top-to-disclosure-icon-medium",
-    "--spectrum-disclosure-indicator-top-to-disclosure-icon-small",
-    "--spectrum-font-size-100",
-    "--spectrum-font-size-200",
-    "--spectrum-font-size-300",
-    "--spectrum-font-size-75",
-    "--spectrum-gray-100",
-    "--spectrum-gray-500",
-    "--spectrum-gray-700",
-    "--spectrum-gray-900",
-    "--spectrum-heading-color",
-    "--spectrum-line-height-200",
-    "--spectrum-logical-rotation",
-    "--spectrum-neutral-content-color-default",
-    "--spectrum-text-to-visual-75"
-  ],
-  "passthroughs": [],
-  "high-contrast": [
-    "--highcontrast-treeview-heading-color",
-    "--highcontrast-treeview-item-background-color-disabled",
-    "--highcontrast-treeview-item-background-color-focus",
-    "--highcontrast-treeview-item-background-color-selected",
-    "--highcontrast-treeview-item-border-color-focus",
-    "--highcontrast-treeview-item-border-color-selected",
-    "--highcontrast-treeview-item-icon-color",
-    "--highcontrast-treeview-item-icon-color-disabled",
-    "--highcontrast-treeview-item-icon-color-focus",
-    "--highcontrast-treeview-item-icon-color-selected",
-    "--highcontrast-treeview-item-text-color",
-    "--highcontrast-treeview-item-text-color-disabled",
-    "--highcontrast-treeview-item-text-color-focus",
-    "--highcontrast-treeview-item-text-color-selected"
-  ]
+  "modifiers": {
+    "mod-treeview-font-size": {
+      "description": "Used by `--spectrum-treeview-font-size`. <br/>Defaults to `var(--spectrum-font-size-300)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-treeview-item-min-block-size": {
+      "description": "Used by `--spectrum-treeview-item-sized-min-block-size`, `--spectrum-treeview-item-min-block-size`. <br/>Defaults to `var(--spectrum-treeview-item-sized-min-block-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-treeview-heading-bottom-to-text": {
+      "description": "Used by `--spectrum-treeview-heading-bottom-to-text`. <br/>Defaults to `var(--spectrum-component-edge-to-text-300)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-treeview-item-padding-inline-start": {
+      "description": "Used by `--spectrum-treeview-item-padding-inline-start`. <br/>Defaults to `var(--spectrum-component-height-300)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-treeview-item-padding-inline-end": {
+      "description": "Used by `--spectrum-treeview-item-padding-inline-end`. <br/>Defaults to `var(--spectrum-component-edge-to-text-300)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-treeview-indicator-margin-inline-start": {
+      "description": "Used by `--spectrum-treeview-indicator-margin-inline-start`. <br/>Defaults to `calc(var(--spectrum-component-height-300) * -1)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-treeview-item-indentation": {
+      "description": "Used by `--spectrum-treeview-item-indentation`. <br/>Defaults to `var(--spectrum-treeview-item-sized-indentation)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-treeview-section-spacing": {
+      "description": "Used by `--spectrum-treeview-section-spacing`. <br/>Defaults to `var(--spectrum-treeview-item-indentation)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-treeview-heading-color": {
+      "description": "Used by `--spectrum-treeview-heading-color`. <br/>Defaults to `var(--spectrum-heading-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-treeview-item-border-size": {
+      "description": "Used by `--spectrum-treeview-item-border-size`. <br/>Defaults to `var(--spectrum-border-width-200)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-treeview-item-border-size-selected": {
+      "description": "Used by `--spectrum-treeview-item-border-size-selected`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-treeview-item-border-radius": {
+      "description": "Defined in `.spectrum-TreeView.spectrum-TreeView--detached`. <br/>Used by `--spectrum-treeview-item-border-radius`. <br/>Defaults to `var(--mod-treeview-item-border-radius-detached, var(--spectrum-corner-radius-100))`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-treeview-item-border-color-selected": {
+      "description": "Defined in `.spectrum-TreeView.spectrum-TreeView--quiet`. <br/>Used by `--spectrum-treeview-item-border-color-selected`. <br/>Defaults to `var(--spectrum-blue-800)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-treeview-item-border-color-focus": {
+      "description": "Used by `--spectrum-treeview-item-border-color-focus`. <br/>Defaults to `var(--spectrum-blue-700)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-treeview-item-border-color-selected-quiet": {
+      "description": "Used by `--spectrum-treeview-item-border-color-quiet-selected`.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-treeview-item-icon-gap": {
+      "description": "Used by `--spectrum-treeview-item-icon-gap`. <br/>Defaults to `var(--spectrum-text-to-visual-75)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-treeview-item-icon-color": {
+      "description": "Used by `--spectrum-treeview-item-icon-color`. <br/>Defaults to `var(--spectrum-gray-700)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-treeview-item-icon-color-hover": {
+      "description": "Used by `--spectrum-treeview-item-icon-color-hover`. <br/>Defaults to `var(--spectrum-gray-900)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-treeview-item-icon-color-focus": {
+      "description": "Used by `--spectrum-treeview-item-icon-color-focus`. <br/>Defaults to `var(--spectrum-gray-900)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-treeview-item-icon-color-selected": {
+      "description": "Used by `--spectrum-treeview-item-icon-color-selected`. <br/>Defaults to `var(--spectrum-gray-900)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-treeview-item-icon-color-disabled": {
+      "description": "Used by `--spectrum-treeview-item-icon-color-disabled`. <br/>Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-treeview-item-text-color": {
+      "description": "Used by `--spectrum-treeview-item-text-color`. <br/>Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-treeview-item-text-color-selected": {
+      "description": "Used by `--spectrum-treeview-item-text-color-selected`. <br/>Defaults to `var(--spectrum-gray-900)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-treeview-item-text-color-disabled": {
+      "description": "Used by `--spectrum-treeview-item-text-color-disabled`. <br/>Defaults to `var(--spectrum-gray-500)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-treeview-item-text-color-focus": {
+      "description": "Used by `--spectrum-treeview-item-text-color-focus`. <br/>Defaults to `var(--spectrum-gray-900)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-treeview-item-text-color-hover": {
+      "description": "Used by `--spectrum-treeview-item-text-color-hover`. <br/>Defaults to `var(--spectrum-gray-900)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-treeview-indicator-animation-duration": {
+      "description": "Used by `--spectrum-treeview-indicator-animation-duration`. <br/>Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-treeview-line-height": {
+      "description": "Used by `.spectrum-TreeView`. <br/>Defaults to `var(--spectrum-line-height-200)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-treeview-margin-block": {
+      "description": "Used by `.spectrum-TreeView`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-treeview-item-background-color-selected": {
+      "description": "Defined in `.spectrum-TreeView.spectrum-TreeView--quiet`. <br/>Used by `.spectrum-TreeView-item.is-drop-target > .spectrum-TreeView-itemLink:before, .spectrum-TreeView-item.is-selected > .spectrum-TreeView-itemLink:before`. <br/>Defaults to `var(--spectrum-treeview-item-background-color-selected)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-treeview-item-background-color-quiet-selected": {
+      "description": "Used by `--mod-treeview-item-background-color-selected`. <br/>Defaults to `var(--spectrum-treeview-item-background-color-quiet-selected)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-treeview-item-min-block-size-thumbnail": {
+      "description": "Used by `--spectrum-treeview-item-min-block-size`. <br/>Defaults to `calc(var(--spectrum-treeview-item-sized-min-block-size) + var(--spectrum-treeview-item-min-block-size-thumbnail-offset))`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-treeview-item-border-radius-detached": {
+      "description": "Used by `--mod-treeview-item-border-radius`. <br/>Defaults to `var(--spectrum-corner-radius-100)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-treeview-item-background-color-focus": {
+      "description": "Used by `.spectrum-TreeView-itemLink:focus-visible:before`. <br/>Defaults to `var(--spectrum-treeview-item-background-color-focus)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-treeview-item-background-color-hover": {
+      "description": "Used by `.spectrum-TreeView-itemLink:hover:before`. <br/>Defaults to `var(--spectrum-treeview-item-background-color-hover)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-treeview-indicator-padding-inline": {
+      "description": "Used by `.spectrum-TreeView-itemIndicator`. <br/>Defaults to `var(--spectrum-treeview-indicator-padding)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-treeview-indicator-padding-block": {
+      "description": "Used by `.spectrum-TreeView-itemIndicator`. <br/>Defaults to `var(--spectrum-treeview-indicator-padding)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-treeview-heading-font-weight": {
+      "description": "Used by `.spectrum-TreeView-heading`. <br/>Defaults to `var(--spectrum-bold-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-treeview-item-background-color-hover": {
+      "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+      "description": "Defined in `.spectrum-TreeView`. <br/>Used by `.spectrum-TreeView-itemLink:hover:before`. <br/>Defaults to `var(--spectrum-gray-100)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-treeview-item-background-color-focus": {
+      "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+      "description": "Defined in `.spectrum-TreeView`. <br/>Used by `.spectrum-TreeView-itemLink:focus-visible:before`. <br/>Defaults to `var(--spectrum-gray-100)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-treeview-font-size": {
+      "value": "var(--mod-treeview-font-size, var(--spectrum-font-size-300))",
+      "description": "Defined in `.spectrum-TreeView`, `.spectrum-TreeView--sizeS`, `.spectrum-TreeView--sizeL`, `.spectrum-TreeView--sizeXL`. <br/>Used by `.spectrum-TreeView`. <br/>Defaults to `var(--mod-treeview-font-size, var(--spectrum-font-size-300))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-treeview-item-sized-min-block-size": {
+      "value": "var(--mod-treeview-item-min-block-size, var(--spectrum-component-height-300))",
+      "description": "Defined in `.spectrum-TreeView`, `.spectrum-TreeView--sizeS`, `.spectrum-TreeView--sizeL`, `.spectrum-TreeView--sizeXL`. <br/>Used by `--spectrum-treeview-item-min-block-size`. <br/>Defaults to `var(--mod-treeview-item-min-block-size, var(--spectrum-component-height-300))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-treeview-item-sized-indentation": {
+      "value": "var(--spectrum-treeview-item-indentation-extra-large)",
+      "description": "Defined in `.spectrum-TreeView`, `.spectrum-TreeView--sizeS`, `.spectrum-TreeView--sizeL`, `.spectrum-TreeView--sizeXL`. <br/>Used by `--spectrum-treeview-item-indentation`. <br/>Defaults to `var(--spectrum-treeview-item-indentation-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-treeview-item-indentation-medium": {
+      "description": "Used by `--spectrum-treeview-item-sized-indentation`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-treeview-heading-bottom-to-text": {
+      "value": "var(--mod-treeview-heading-bottom-to-text, var(--spectrum-component-edge-to-text-300))",
+      "description": "Defined in `.spectrum-TreeView`, `.spectrum-TreeView--sizeS`, `.spectrum-TreeView--sizeL`, `.spectrum-TreeView--sizeXL`. <br/>Used by `.spectrum-TreeView-heading`. <br/>Defaults to `var(--mod-treeview-heading-bottom-to-text, var(--spectrum-component-edge-to-text-300))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-treeview-item-padding-inline-start": {
+      "value": "var(--mod-treeview-item-padding-inline-start, var(--spectrum-component-height-300))",
+      "description": "Defined in `.spectrum-TreeView`, `.spectrum-TreeView--sizeS`, `.spectrum-TreeView--sizeL`, `.spectrum-TreeView--sizeXL`. <br/>Used by `.spectrum-TreeView-itemLink`. <br/>Defaults to `var(--mod-treeview-item-padding-inline-start, var(--spectrum-component-height-300))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-treeview-item-padding-inline-end": {
+      "value": "var(--mod-treeview-item-padding-inline-end, var(--spectrum-component-edge-to-text-300))",
+      "description": "Defined in `.spectrum-TreeView`, `.spectrum-TreeView--sizeS`, `.spectrum-TreeView--sizeL`, `.spectrum-TreeView--sizeXL`. <br/>Used by `.spectrum-TreeView-itemLink`. <br/>Defaults to `var(--mod-treeview-item-padding-inline-end, var(--spectrum-component-edge-to-text-300))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-treeview-indicator-margin-inline-start": {
+      "value": "var(--mod-treeview-indicator-margin-inline-start, calc(var(--spectrum-component-height-300) * -1))",
+      "description": "Defined in `.spectrum-TreeView`, `.spectrum-TreeView--sizeS`, `.spectrum-TreeView--sizeL`, `.spectrum-TreeView--sizeXL`. <br/>Used by `.spectrum-TreeView-itemIndicator`. <br/>Defaults to `var(--mod-treeview-indicator-margin-inline-start, calc(var(--spectrum-component-height-300) * -1))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-treeview-indicator-padding": {
+      "value": "17px",
+      "description": "Defined in `.spectrum-TreeView`, `.spectrum-TreeView--sizeS`, `.spectrum-TreeView--sizeL`, `.spectrum-TreeView--sizeXL`. <br/>Used by `.spectrum-TreeView-itemIndicator`. <br/>Defaults to `var(--spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-treeview-item-min-block-size-thumbnail-offset": {
+      "value": "0",
+      "description": "Defined in `.spectrum-TreeView`, `.spectrum-TreeView--sizeS`, `.spectrum-TreeView--sizeL`, `.spectrum-TreeView--sizeXL`. <br/>Used by `--spectrum-treeview-item-min-block-size`. <br/>Defaults to `0`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-treeview-item-min-block-size-thumbnail-offset-medium": {
+      "description": "Used by `--spectrum-treeview-item-min-block-size-thumbnail-offset`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-treeview-item-indentation-small": {
+      "description": "Used by `--spectrum-treeview-item-sized-indentation`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-treeview-item-indentation-large": {
+      "description": "Used by `--spectrum-treeview-item-sized-indentation`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-treeview-item-indentation-extra-large": {
+      "description": "Used by `--spectrum-treeview-item-sized-indentation`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-treeview-item-indentation": {
+      "value": "var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-sized-indentation))",
+      "description": "Defined in `.spectrum-TreeView`. <br/>Used by `--spectrum-treeview-section-spacing`, `.spectrum-TreeView .spectrum-TreeView`, `.spectrum-TreeView-item--indent1`, `.spectrum-TreeView-item--indent2`, `.spectrum-TreeView-item--indent3`, `.spectrum-TreeView-item--indent4`, `.spectrum-TreeView-item--indent5`, `.spectrum-TreeView-item--indent6`, `.spectrum-TreeView-item--indent7`, `.spectrum-TreeView-item--indent8`, `.spectrum-TreeView-item--indent9`, `.spectrum-TreeView-item--indent10`. <br/>Defaults to `var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-sized-indentation))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-treeview-section-spacing": {
+      "value": "var(--mod-treeview-section-spacing, var(--spectrum-treeview-item-indentation))",
+      "description": "Defined in `.spectrum-TreeView`. <br/>Used by `.spectrum-TreeView-section:not(:first-child)`. <br/>Defaults to `var(--mod-treeview-section-spacing, var(--spectrum-treeview-item-indentation))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-treeview-heading-color": {
+      "value": "var(--highcontrast-treeview-heading-color, var(--mod-treeview-heading-color, var(--spectrum-heading-color)))",
+      "description": "Defined in `.spectrum-TreeView`. <br/>Used by `.spectrum-TreeView-heading`. <br/>Defaults to `var(--highcontrast-treeview-heading-color, var(--mod-treeview-heading-color, var(--spectrum-heading-color)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-treeview-item-border-size": {
+      "value": "var(--mod-treeview-item-border-size, var(--spectrum-border-width-200))",
+      "description": "Defined in `.spectrum-TreeView`. <br/>Used by `.spectrum-TreeView-item.is-drop-target > .spectrum-TreeView-itemLink:before`, `.spectrum-TreeView-itemLink:before`, `.spectrum-TreeView-itemLink:focus-visible:before`. <br/>Defaults to `var(--mod-treeview-item-border-size, var(--spectrum-border-width-200))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-treeview-item-border-size-selected": {
+      "value": "var(--mod-treeview-item-border-size-selected, 1px)",
+      "description": "Defined in `.spectrum-TreeView`. <br/>Used by `.spectrum-TreeView-item.is-selected > .spectrum-TreeView-itemLink:not(:focus-visible):before`. <br/>Defaults to `var(--mod-treeview-item-border-size-selected, 1px)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-treeview-item-border-radius": {
+      "value": "var(--mod-treeview-item-border-radius, 0px)",
+      "description": "Defined in `.spectrum-TreeView`. <br/>Used by `.spectrum-TreeView-itemLink:before`. <br/>Defaults to `var(--mod-treeview-item-border-radius, 0px)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-treeview-item-border-color-selected": {
+      "value": "var(--highcontrast-treeview-item-border-color-selected, var(--mod-treeview-item-border-color-selected, var(--spectrum-blue-800)))",
+      "description": "Defined in `.spectrum-TreeView`. <br/>Used by `.spectrum-TreeView-item.is-drop-target > .spectrum-TreeView-itemLink:not(:focus-visible):before, .spectrum-TreeView-item.is-selected > .spectrum-TreeView-itemLink:not(:focus-visible):before`. <br/>Defaults to `var(--highcontrast-treeview-item-border-color-selected, var(--mod-treeview-item-border-color-selected, var(--spectrum-blue-800)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-treeview-item-border-color-focus": {
+      "value": "var(--highcontrast-treeview-item-border-color-focus, var(--mod-treeview-item-border-color-focus, var(--spectrum-blue-700)))",
+      "description": "Defined in `.spectrum-TreeView`. <br/>Used by `.spectrum-TreeView-itemLink:focus-visible:before`. <br/>Defaults to `var(--highcontrast-treeview-item-border-color-focus, var(--mod-treeview-item-border-color-focus, var(--spectrum-blue-700)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-treeview-item-border-color-quiet-selected": {
+      "value": "var(--highcontrast-treeview-item-border-color-selected, var(--mod-treeview-item-border-color-selected-quiet, transparent))",
+      "description": "Defined in `.spectrum-TreeView`. <br/>Used by `--mod-treeview-item-border-color-selected`. <br/>Defaults to `var(--highcontrast-treeview-item-border-color-selected, var(--mod-treeview-item-border-color-selected-quiet, transparent))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-treeview-item-icon-gap": {
+      "value": "var(--mod-treeview-item-icon-gap, var(--spectrum-text-to-visual-75))",
+      "description": "Defined in `.spectrum-TreeView`. <br/>Used by `.spectrum-TreeView-itemIcon`, `.spectrum-TreeView--thumbnail .spectrum-TreeView-itemThumbnail`. <br/>Defaults to `var(--mod-treeview-item-icon-gap, var(--spectrum-text-to-visual-75))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-treeview-item-icon-color": {
+      "value": "var(--highcontrast-treeview-item-icon-color, var(--mod-treeview-item-icon-color, var(--spectrum-gray-700)))",
+      "description": "Defined in `.spectrum-TreeView`. <br/>Used by `.spectrum-TreeView-itemIcon`. <br/>Defaults to `var(--highcontrast-treeview-item-icon-color, var(--mod-treeview-item-icon-color, var(--spectrum-gray-700)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-treeview-item-icon-color-hover": {
+      "value": "var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-icon-color-hover, var(--spectrum-gray-900)))",
+      "description": "Defined in `.spectrum-TreeView`. <br/>Used by `.spectrum-TreeView-itemLink:hover .spectrum-TreeView-itemIcon`. <br/>Defaults to `var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-icon-color-hover, var(--spectrum-gray-900)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-treeview-item-icon-color-focus": {
+      "value": "var(--highcontrast-treeview-item-icon-color-focus, var(--mod-treeview-item-icon-color-focus, var(--spectrum-gray-900)))",
+      "description": "Defined in `.spectrum-TreeView`. <br/>Used by `.spectrum-TreeView-itemLink:focus-visible .spectrum-TreeView-itemIcon`. <br/>Defaults to `var(--highcontrast-treeview-item-icon-color-focus, var(--mod-treeview-item-icon-color-focus, var(--spectrum-gray-900)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-treeview-item-icon-color-selected": {
+      "value": "var(--highcontrast-treeview-item-icon-color-selected, var(--mod-treeview-item-icon-color-selected, var(--spectrum-gray-900)))",
+      "description": "Defined in `.spectrum-TreeView`. <br/>Used by `.spectrum-TreeView-item.is-drop-target > .spectrum-TreeView-itemLink .spectrum-TreeView-itemIcon, .spectrum-TreeView-item.is-selected > .spectrum-TreeView-itemLink .spectrum-TreeView-itemIcon`. <br/>Defaults to `var(--highcontrast-treeview-item-icon-color-selected, var(--mod-treeview-item-icon-color-selected, var(--spectrum-gray-900)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-treeview-item-icon-color-disabled": {
+      "value": "var(--highcontrast-treeview-item-icon-color-disabled, var(--mod-treeview-item-icon-color-disabled, var(--spectrum-disabled-content-color)))",
+      "description": "Defined in `.spectrum-TreeView`. <br/>Used by `.spectrum-TreeView-item.is-disabled > .spectrum-TreeView-itemLink .spectrum-Icon`. <br/>Defaults to `var(--highcontrast-treeview-item-icon-color-disabled, var(--mod-treeview-item-icon-color-disabled, var(--spectrum-disabled-content-color)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-treeview-item-text-color": {
+      "value": "var(--highcontrast-treeview-item-text-color, var(--mod-treeview-item-text-color, var(--spectrum-neutral-content-color-default)))",
+      "description": "Defined in `.spectrum-TreeView`. <br/>Used by `.spectrum-TreeView-itemLink`. <br/>Defaults to `var(--highcontrast-treeview-item-text-color, var(--mod-treeview-item-text-color, var(--spectrum-neutral-content-color-default)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-treeview-item-text-color-selected": {
+      "value": "var(--highcontrast-treeview-item-text-color-selected, var(--mod-treeview-item-text-color-selected, var(--spectrum-gray-900)))",
+      "description": "Defined in `.spectrum-TreeView`. <br/>Used by `.spectrum-TreeView-item.is-drop-target > .spectrum-TreeView-itemLink, .spectrum-TreeView-item.is-selected > .spectrum-TreeView-itemLink`. <br/>Defaults to `var(--highcontrast-treeview-item-text-color-selected, var(--mod-treeview-item-text-color-selected, var(--spectrum-gray-900)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-treeview-item-text-color-disabled": {
+      "value": "var(--highcontrast-treeview-item-text-color-disabled, var(--mod-treeview-item-text-color-disabled, var(--spectrum-gray-500)))",
+      "description": "Defined in `.spectrum-TreeView`. <br/>Used by `.spectrum-TreeView-item.is-disabled > .spectrum-TreeView-itemLink`. <br/>Defaults to `var(--highcontrast-treeview-item-text-color-disabled, var(--mod-treeview-item-text-color-disabled, var(--spectrum-gray-500)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-treeview-item-text-color-focus": {
+      "value": "var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-text-color-focus, var(--spectrum-gray-900)))",
+      "description": "Defined in `.spectrum-TreeView`. <br/>Used by `.spectrum-TreeView-itemLink:focus-visible`. <br/>Defaults to `var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-text-color-focus, var(--spectrum-gray-900)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-treeview-item-text-color-hover": {
+      "value": "var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-text-color-hover, var(--spectrum-gray-900)))",
+      "description": "Defined in `.spectrum-TreeView`. <br/>Used by `.spectrum-TreeView-itemLink:hover`. <br/>Defaults to `var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-text-color-hover, var(--spectrum-gray-900)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-treeview-indicator-animation-duration": {
+      "value": "var(--mod-treeview-indicator-animation-duration, var(--spectrum-animation-duration-100))",
+      "description": "Defined in `.spectrum-TreeView`. <br/>Used by `.spectrum-TreeView-itemIndicator`. <br/>Defaults to `var(--mod-treeview-indicator-animation-duration, var(--spectrum-animation-duration-100))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-treeview-item-min-block-size": {
+      "value": "var(--mod-treeview-item-min-block-size-thumbnail, calc(var(--spectrum-treeview-item-sized-min-block-size) + var(--spectrum-treeview-item-min-block-size-thumbnail-offset)))",
+      "description": "Defined in `.spectrum-TreeView`, `.spectrum-TreeView.spectrum-TreeView--thumbnail`. <br/>Used by `.spectrum-TreeView-itemLink, .spectrum-TreeView-itemLink:before`. <br/>Defaults to `var(--mod-treeview-item-min-block-size-thumbnail, calc(var(--spectrum-treeview-item-sized-min-block-size) + var(--spectrum-treeview-item-min-block-size-thumbnail-offset)))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-treeview-item-background-color-quiet-selected": {
+      "description": "Used by `--mod-treeview-item-background-color-selected`.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-treeview-item-background-color-selected": {
+      "description": "Used by `.spectrum-TreeView-item.is-drop-target > .spectrum-TreeView-itemLink:before, .spectrum-TreeView-item.is-selected > .spectrum-TreeView-itemLink:before`.",
+      "control": "color",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-gray-100": {
+      "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+      "description": "Used by `--spectrum-treeview-item-background-color-hover`, `--spectrum-treeview-item-background-color-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-100": {
+      "value": "14px",
+      "description": "Used by `--spectrum-treeview-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-100": {
+      "value": "32px",
+      "description": "Used by `--spectrum-treeview-item-sized-min-block-size`, `--spectrum-treeview-item-padding-inline-start`, `--spectrum-treeview-indicator-margin-inline-start`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-text-100": {
+      "value": "12px",
+      "description": "Used by `--spectrum-treeview-heading-bottom-to-text`, `--spectrum-treeview-item-padding-inline-end`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-disclosure-indicator-top-to-disclosure-icon-medium": {
+      "value": "11px",
+      "description": "Used by `--spectrum-treeview-indicator-padding`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-75": {
+      "value": "12px",
+      "description": "Used by `--spectrum-treeview-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-75": {
+      "value": "24px",
+      "description": "Used by `--spectrum-treeview-item-sized-min-block-size`, `--spectrum-treeview-item-padding-inline-start`, `--spectrum-treeview-indicator-margin-inline-start`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-text-75": {
+      "value": "9px",
+      "description": "Used by `--spectrum-treeview-heading-bottom-to-text`, `--spectrum-treeview-item-padding-inline-end`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-disclosure-indicator-top-to-disclosure-icon-small": {
+      "value": "7px",
+      "description": "Used by `--spectrum-treeview-indicator-padding`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-200": {
+      "value": "16px",
+      "description": "Used by `--spectrum-treeview-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-200": {
+      "value": "40px",
+      "description": "Used by `--spectrum-treeview-item-sized-min-block-size`, `--spectrum-treeview-item-padding-inline-start`, `--spectrum-treeview-indicator-margin-inline-start`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-text-200": {
+      "value": "15px",
+      "description": "Used by `--spectrum-treeview-heading-bottom-to-text`, `--spectrum-treeview-item-padding-inline-end`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-disclosure-indicator-top-to-disclosure-icon-large": {
+      "value": "14px",
+      "description": "Used by `--spectrum-treeview-indicator-padding`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size-300": {
+      "value": "18px",
+      "description": "Used by `--spectrum-treeview-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-height-300": {
+      "value": "48px",
+      "description": "Used by `--spectrum-treeview-item-sized-min-block-size`, `--spectrum-treeview-item-padding-inline-start`, `--spectrum-treeview-indicator-margin-inline-start`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-component-edge-to-text-300": {
+      "value": "18px",
+      "description": "Used by `--spectrum-treeview-heading-bottom-to-text`, `--spectrum-treeview-item-padding-inline-end`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large": {
+      "value": "17px",
+      "description": "Used by `--spectrum-treeview-indicator-padding`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-color": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-treeview-heading-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-border-width-200": {
+      "value": "2px",
+      "description": "Used by `--spectrum-treeview-item-border-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-blue-800": {
+      "value": "light-dark(rgb(75, 117, 255), rgb(64, 105, 253))",
+      "description": "Used by `--spectrum-treeview-item-border-color-selected`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-blue-700": {
+      "value": "light-dark(rgb(93, 137, 255), rgb(52, 91, 248))",
+      "description": "Used by `--spectrum-treeview-item-border-color-focus`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-text-to-visual-75": {
+      "value": "5px",
+      "description": "Used by `--spectrum-treeview-item-icon-gap`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-700": {
+      "value": "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))",
+      "description": "Used by `--spectrum-treeview-item-icon-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-gray-900": {
+      "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+      "description": "Used by `--spectrum-treeview-item-icon-color-hover`, `--spectrum-treeview-item-icon-color-focus`, `--spectrum-treeview-item-icon-color-selected`, `--spectrum-treeview-item-text-color-selected`, `--spectrum-treeview-item-text-color-focus`, `--spectrum-treeview-item-text-color-hover`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-disabled-content-color": {
+      "value": "var(--spectrum-gray-400)",
+      "description": "Used by `--spectrum-treeview-item-icon-color-disabled`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-neutral-content-color-default": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-treeview-item-text-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-gray-500": {
+      "value": "light-dark(rgb(143, 143, 143), rgb(109, 109, 109))",
+      "description": "Used by `--spectrum-treeview-item-text-color-disabled`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-animation-duration-100": {
+      "description": "Used by `--spectrum-treeview-indicator-animation-duration`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-line-height-200": {
+      "value": "1.5",
+      "description": "Used by `.spectrum-TreeView`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-corner-radius-100": {
+      "value": "4px",
+      "description": "Used by `--mod-treeview-item-border-radius`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-logical-rotation": {
+      "value": "matrix(-1, 0, 0, 1, 0, 0)",
+      "description": "Defined in `.spectrum-TreeView:dir(rtl)`. <br/>Used by `.spectrum-TreeView-item.is-open > .spectrum-TreeView-itemLink > .spectrum-TreeView-itemIndicator`, `.spectrum-TreeView-itemIndicator`. <br/>Defaults to `matrix(-1, 0, 0, 1, 0, 0)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-bold-font-weight": {
+      "value": "700",
+      "description": "Used by `.spectrum-TreeView-heading`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {
+    "highcontrast-treeview-heading-color": {
+      "value": "var(--mod-treeview-heading-color, var(--spectrum-heading-color))",
+      "description": "Defined in `.spectrum-TreeView`. <br/>Used by `--spectrum-treeview-heading-color`. <br/>Defaults to `var(--mod-treeview-heading-color, var(--spectrum-heading-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-treeview-item-border-color-selected": {
+      "value": "var(--mod-treeview-item-border-color-selected-quiet, transparent)",
+      "description": "Defined in `.spectrum-TreeView`. <br/>Used by `--spectrum-treeview-item-border-color-selected`, `--spectrum-treeview-item-border-color-quiet-selected`. <br/>Defaults to `var(--mod-treeview-item-border-color-selected-quiet, transparent)`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-treeview-item-border-color-focus": {
+      "value": "var(--mod-treeview-item-border-color-focus, var(--spectrum-blue-700))",
+      "description": "Defined in `.spectrum-TreeView`. <br/>Used by `--spectrum-treeview-item-border-color-focus`. <br/>Defaults to `var(--mod-treeview-item-border-color-focus, var(--spectrum-blue-700))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-treeview-item-icon-color": {
+      "value": "var(--mod-treeview-item-icon-color, var(--spectrum-gray-700))",
+      "description": "Defined in `.spectrum-TreeView`. <br/>Used by `--spectrum-treeview-item-icon-color`. <br/>Defaults to `var(--mod-treeview-item-icon-color, var(--spectrum-gray-700))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-treeview-item-text-color-focus": {
+      "value": "var(--mod-treeview-item-text-color-hover, var(--spectrum-gray-900))",
+      "description": "Defined in `.spectrum-TreeView`. <br/>Used by `--spectrum-treeview-item-icon-color-hover`, `--spectrum-treeview-item-text-color-focus`, `--spectrum-treeview-item-text-color-hover`. <br/>Defaults to `var(--mod-treeview-item-text-color-hover, var(--spectrum-gray-900))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-treeview-item-icon-color-focus": {
+      "value": "var(--mod-treeview-item-icon-color-focus, var(--spectrum-gray-900))",
+      "description": "Defined in `.spectrum-TreeView`. <br/>Used by `--spectrum-treeview-item-icon-color-focus`. <br/>Defaults to `var(--mod-treeview-item-icon-color-focus, var(--spectrum-gray-900))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-treeview-item-icon-color-selected": {
+      "value": "var(--mod-treeview-item-icon-color-selected, var(--spectrum-gray-900))",
+      "description": "Defined in `.spectrum-TreeView`. <br/>Used by `--spectrum-treeview-item-icon-color-selected`. <br/>Defaults to `var(--mod-treeview-item-icon-color-selected, var(--spectrum-gray-900))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-treeview-item-icon-color-disabled": {
+      "value": "var(--mod-treeview-item-icon-color-disabled, var(--spectrum-disabled-content-color))",
+      "description": "Defined in `.spectrum-TreeView`. <br/>Used by `--spectrum-treeview-item-icon-color-disabled`. <br/>Defaults to `var(--mod-treeview-item-icon-color-disabled, var(--spectrum-disabled-content-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-treeview-item-text-color": {
+      "value": "var(--mod-treeview-item-text-color, var(--spectrum-neutral-content-color-default))",
+      "description": "Defined in `.spectrum-TreeView`. <br/>Used by `--spectrum-treeview-item-text-color`. <br/>Defaults to `var(--mod-treeview-item-text-color, var(--spectrum-neutral-content-color-default))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-treeview-item-text-color-selected": {
+      "value": "var(--mod-treeview-item-text-color-selected, var(--spectrum-gray-900))",
+      "description": "Defined in `.spectrum-TreeView`. <br/>Used by `--spectrum-treeview-item-text-color-selected`. <br/>Defaults to `var(--mod-treeview-item-text-color-selected, var(--spectrum-gray-900))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-treeview-item-text-color-disabled": {
+      "value": "var(--mod-treeview-item-text-color-disabled, var(--spectrum-gray-500))",
+      "description": "Defined in `.spectrum-TreeView`. <br/>Used by `--spectrum-treeview-item-text-color-disabled`. <br/>Defaults to `var(--mod-treeview-item-text-color-disabled, var(--spectrum-gray-500))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-treeview-item-background-color-selected": {
+      "value": "var(--mod-treeview-item-background-color-selected, var(--spectrum-treeview-item-background-color-selected))",
+      "description": "Defined in `.spectrum-TreeView`. <br/>Used by `--mod-treeview-item-background-color-selected`, `.spectrum-TreeView-item.is-drop-target > .spectrum-TreeView-itemLink:before, .spectrum-TreeView-item.is-selected > .spectrum-TreeView-itemLink:before`. <br/>Defaults to `var(--mod-treeview-item-background-color-selected, var(--spectrum-treeview-item-background-color-selected))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-treeview-item-background-color-disabled": {
+      "value": "Canvas",
+      "description": "Defined in `.spectrum-TreeView`. <br/>Used by `.spectrum-TreeView-item.is-disabled > .spectrum-TreeView-itemLink:before`. <br/>Defaults to `Canvas`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-treeview-item-background-color-focus": {
+      "value": "var(--mod-treeview-item-background-color-hover, var(--spectrum-treeview-item-background-color-hover))",
+      "description": "Defined in `.spectrum-TreeView`. <br/>Used by `.spectrum-TreeView-itemLink:focus-visible:before`, `.spectrum-TreeView-itemLink:hover:before`. <br/>Defaults to `var(--mod-treeview-item-background-color-hover, var(--spectrum-treeview-item-background-color-hover))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/treeview/stories/treeview.stories.js b/components/treeview/stories/treeview.stories.js
index 19621954270..b2374c1f32b 100644
--- a/components/treeview/stories/treeview.stories.js
+++ b/components/treeview/stories/treeview.stories.js
@@ -1,11 +1,13 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isQuiet, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { Template } from "./template.js";
 import { TreeViewGroup } from "./treeview.test.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * The typical usage of a treeview involves nesting a `.spectrum-Treeview element` within the `.spectrum-TreeView-item` parent element.
  *
@@ -43,6 +45,10 @@ export default {
 		},
 		packageJson,
 		metadata,
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 };
 
diff --git a/components/typography/dist/metadata.json b/components/typography/dist/metadata.json
index 3ef566f741d..908e239f04a 100644
--- a/components/typography/dist/metadata.json
+++ b/components/typography/dist/metadata.json
@@ -298,464 +298,2511 @@
     ".spectrum-Typography:lang(ar)",
     ".spectrum-Typography:lang(he)"
   ],
-  "modifiers": [
-    "--mod-body-cjk-emphasized-font-style",
-    "--mod-body-cjk-emphasized-font-weight",
-    "--mod-body-cjk-font-family",
-    "--mod-body-cjk-font-style",
-    "--mod-body-cjk-font-weight",
-    "--mod-body-cjk-letter-spacing",
-    "--mod-body-cjk-line-height",
-    "--mod-body-cjk-strong-emphasized-font-style",
-    "--mod-body-cjk-strong-emphasized-font-weight",
-    "--mod-body-cjk-strong-font-style",
-    "--mod-body-cjk-strong-font-weight",
-    "--mod-body-font-color",
-    "--mod-body-font-size",
-    "--mod-body-line-height",
-    "--mod-body-margin",
-    "--mod-body-margin-end",
-    "--mod-body-margin-start",
-    "--mod-body-sans-serif-emphasized-font-style",
-    "--mod-body-sans-serif-emphasized-font-weight",
-    "--mod-body-sans-serif-font-family",
-    "--mod-body-sans-serif-font-style",
-    "--mod-body-sans-serif-font-weight",
-    "--mod-body-sans-serif-strong-emphasized-font-style",
-    "--mod-body-sans-serif-strong-emphasized-font-weight",
-    "--mod-body-sans-serif-strong-font-style",
-    "--mod-body-sans-serif-strong-font-weight",
-    "--mod-body-serif-emphasized-font-style",
-    "--mod-body-serif-emphasized-font-weight",
-    "--mod-body-serif-font-family",
-    "--mod-body-serif-font-style",
-    "--mod-body-serif-font-weight",
-    "--mod-body-serif-strong-emphasized-font-style",
-    "--mod-body-serif-strong-emphasized-font-weight",
-    "--mod-body-serif-strong-font-style",
-    "--mod-body-serif-strong-font-weight",
-    "--mod-code-cjk-emphasized-font-style",
-    "--mod-code-cjk-emphasized-font-weight",
-    "--mod-code-cjk-font-family",
-    "--mod-code-cjk-font-style",
-    "--mod-code-cjk-font-weight",
-    "--mod-code-cjk-letter-spacing",
-    "--mod-code-cjk-line-height",
-    "--mod-code-cjk-strong-emphasized-font-style",
-    "--mod-code-cjk-strong-emphasized-font-weight",
-    "--mod-code-cjk-strong-font-style",
-    "--mod-code-cjk-strong-font-weight",
-    "--mod-code-emphasized-font-style",
-    "--mod-code-emphasized-font-weight",
-    "--mod-code-font-color",
-    "--mod-code-font-family",
-    "--mod-code-font-size",
-    "--mod-code-font-style",
-    "--mod-code-font-weight",
-    "--mod-code-line-height",
-    "--mod-code-margin-end",
-    "--mod-code-margin-start",
-    "--mod-code-strong-emphasized-font-style",
-    "--mod-code-strong-emphasized-font-weight",
-    "--mod-code-strong-font-style",
-    "--mod-code-strong-font-weight",
-    "--mod-detail-cjk-emphasized-font-style",
-    "--mod-detail-cjk-emphasized-font-weight",
-    "--mod-detail-cjk-font-family",
-    "--mod-detail-cjk-font-style",
-    "--mod-detail-cjk-font-weight",
-    "--mod-detail-cjk-light-emphasized-font-style",
-    "--mod-detail-cjk-light-emphasized-font-weight",
-    "--mod-detail-cjk-light-font-style",
-    "--mod-detail-cjk-light-font-weight",
-    "--mod-detail-cjk-light-strong-emphasized-font-style",
-    "--mod-detail-cjk-light-strong-emphasized-font-weight",
-    "--mod-detail-cjk-light-strong-font-style",
-    "--mod-detail-cjk-light-strong-font-weight",
-    "--mod-detail-cjk-line-height",
-    "--mod-detail-cjk-strong-emphasized-font-style",
-    "--mod-detail-cjk-strong-emphasized-font-weight",
-    "--mod-detail-cjk-strong-font-style",
-    "--mod-detail-cjk-strong-font-weight",
-    "--mod-detail-font-color",
-    "--mod-detail-font-size",
-    "--mod-detail-letter-spacing",
-    "--mod-detail-line-height",
-    "--mod-detail-margin-end",
-    "--mod-detail-margin-start",
-    "--mod-detail-sans-serif-emphasized-font-style",
-    "--mod-detail-sans-serif-emphasized-font-weight",
-    "--mod-detail-sans-serif-font-family",
-    "--mod-detail-sans-serif-font-style",
-    "--mod-detail-sans-serif-font-weight",
-    "--mod-detail-sans-serif-light-emphasized-font-style",
-    "--mod-detail-sans-serif-light-emphasized-font-weight",
-    "--mod-detail-sans-serif-light-font-style",
-    "--mod-detail-sans-serif-light-strong-emphasized-font-style",
-    "--mod-detail-sans-serif-light-strong-emphasized-font-weight",
-    "--mod-detail-sans-serif-light-strong-font-style",
-    "--mod-detail-sans-serif-light-strong-font-weight",
-    "--mod-detail-sans-serif-strong-emphasized-font-style",
-    "--mod-detail-sans-serif-strong-emphasized-font-weight",
-    "--mod-detail-sans-serif-strong-font-style",
-    "--mod-detail-sans-serif-strong-font-weight",
-    "--mod-detail-serif-emphasized-font-style",
-    "--mod-detail-serif-emphasized-font-weight",
-    "--mod-detail-serif-font-family",
-    "--mod-detail-serif-font-style",
-    "--mod-detail-serif-font-weight",
-    "--mod-detail-serif-light-emphasized-font-style",
-    "--mod-detail-serif-light-emphasized-font-weight",
-    "--mod-detail-serif-light-font-style",
-    "--mod-detail-serif-light-font-weight",
-    "--mod-detail-serif-light-strong-emphasized-font-style",
-    "--mod-detail-serif-light-strong-emphasized-font-weight",
-    "--mod-detail-serif-light-strong-font-style",
-    "--mod-detail-serif-light-strong-font-weight",
-    "--mod-detail-serif-strong-emphasized-font-style",
-    "--mod-detail-serif-strong-emphasized-font-weight",
-    "--mod-detail-serif-strong-font-style",
-    "--mod-detail-serif-strong-font-weight",
-    "--mod-heading-cjk-emphasized-font-style",
-    "--mod-heading-cjk-emphasized-font-weight",
-    "--mod-heading-cjk-font-family",
-    "--mod-heading-cjk-font-size",
-    "--mod-heading-cjk-font-style",
-    "--mod-heading-cjk-font-weight",
-    "--mod-heading-cjk-heavy-emphasized-font-style",
-    "--mod-heading-cjk-heavy-emphasized-font-weight",
-    "--mod-heading-cjk-heavy-font-style",
-    "--mod-heading-cjk-heavy-font-weight",
-    "--mod-heading-cjk-heavy-strong-emphasized-font-style",
-    "--mod-heading-cjk-heavy-strong-emphasized-font-weight",
-    "--mod-heading-cjk-heavy-strong-font-style",
-    "--mod-heading-cjk-heavy-strong-font-weight",
-    "--mod-heading-cjk-letter-spacing",
-    "--mod-heading-cjk-light-emphasized-font-style",
-    "--mod-heading-cjk-light-emphasized-font-weight",
-    "--mod-heading-cjk-light-font-style",
-    "--mod-heading-cjk-light-font-weight",
-    "--mod-heading-cjk-light-strong-emphasized-font-style",
-    "--mod-heading-cjk-light-strong-emphasized-font-weight",
-    "--mod-heading-cjk-light-strong-font-style",
-    "--mod-heading-cjk-light-strong-font-weight",
-    "--mod-heading-cjk-line-height",
-    "--mod-heading-cjk-strong-emphasized-font-style",
-    "--mod-heading-cjk-strong-emphasized-font-weight",
-    "--mod-heading-cjk-strong-font-style",
-    "--mod-heading-cjk-strong-font-weight",
-    "--mod-heading-font-color",
-    "--mod-heading-font-size",
-    "--mod-heading-line-height",
-    "--mod-heading-margin-end",
-    "--mod-heading-margin-start",
-    "--mod-heading-sans-serif-emphasized-font-style",
-    "--mod-heading-sans-serif-emphasized-font-weight",
-    "--mod-heading-sans-serif-font-family",
-    "--mod-heading-sans-serif-font-style",
-    "--mod-heading-sans-serif-font-weight",
-    "--mod-heading-sans-serif-heavy-emphasized-font-style",
-    "--mod-heading-sans-serif-heavy-emphasized-font-weight",
-    "--mod-heading-sans-serif-heavy-font-style",
-    "--mod-heading-sans-serif-heavy-font-weight",
-    "--mod-heading-sans-serif-heavy-strong-emphasized-font-style",
-    "--mod-heading-sans-serif-heavy-strong-emphasized-font-weight",
-    "--mod-heading-sans-serif-heavy-strong-font-style",
-    "--mod-heading-sans-serif-heavy-strong-font-weight",
-    "--mod-heading-sans-serif-light-emphasized-font-style",
-    "--mod-heading-sans-serif-light-emphasized-font-weight",
-    "--mod-heading-sans-serif-light-font-style",
-    "--mod-heading-sans-serif-light-font-weight",
-    "--mod-heading-sans-serif-light-strong-emphasized-font-style",
-    "--mod-heading-sans-serif-light-strong-emphasized-font-weight",
-    "--mod-heading-sans-serif-light-strong-font-style",
-    "--mod-heading-sans-serif-light-strong-font-weight",
-    "--mod-heading-sans-serif-strong-emphasized-font-style",
-    "--mod-heading-sans-serif-strong-emphasized-font-weight",
-    "--mod-heading-sans-serif-strong-font-style",
-    "--mod-heading-sans-serif-strong-font-weight",
-    "--mod-heading-serif-emphasized-font-style",
-    "--mod-heading-serif-emphasized-font-weight",
-    "--mod-heading-serif-font-family",
-    "--mod-heading-serif-font-style",
-    "--mod-heading-serif-font-weight",
-    "--mod-heading-serif-heavy-emphasized-font-style",
-    "--mod-heading-serif-heavy-emphasized-font-weight",
-    "--mod-heading-serif-heavy-font-style",
-    "--mod-heading-serif-heavy-font-weight",
-    "--mod-heading-serif-heavy-strong-emphasized-font-style",
-    "--mod-heading-serif-heavy-strong-emphasized-font-weight",
-    "--mod-heading-serif-heavy-strong-font-style",
-    "--mod-heading-serif-heavy-strong-font-weight",
-    "--mod-heading-serif-light-emphasized-font-style",
-    "--mod-heading-serif-light-emphasized-font-weight",
-    "--mod-heading-serif-light-font-style",
-    "--mod-heading-serif-light-font-weight",
-    "--mod-heading-serif-light-strong-emphasized-font-style",
-    "--mod-heading-serif-light-strong-emphasized-font-weight",
-    "--mod-heading-serif-light-strong-font-style",
-    "--mod-heading-serif-light-strong-font-weight",
-    "--mod-heading-serif-strong-emphasized-font-style",
-    "--mod-heading-serif-strong-emphasized-font-weight",
-    "--mod-heading-serif-strong-font-style",
-    "--mod-heading-serif-strong-font-weight"
-  ],
-  "component": [],
-  "global": [
-    "--spectrum-body-cjk-emphasized-font-style",
-    "--spectrum-body-cjk-emphasized-font-weight",
-    "--spectrum-body-cjk-font-family",
-    "--spectrum-body-cjk-font-style",
-    "--spectrum-body-cjk-font-weight",
-    "--spectrum-body-cjk-letter-spacing",
-    "--spectrum-body-cjk-line-height",
-    "--spectrum-body-cjk-strong-emphasized-font-style",
-    "--spectrum-body-cjk-strong-emphasized-font-weight",
-    "--spectrum-body-cjk-strong-font-style",
-    "--spectrum-body-cjk-strong-font-weight",
-    "--spectrum-body-color",
-    "--spectrum-body-font-color",
-    "--spectrum-body-font-size",
-    "--spectrum-body-line-height",
-    "--spectrum-body-margin-end",
-    "--spectrum-body-margin-multiplier",
-    "--spectrum-body-sans-serif-emphasized-font-style",
-    "--spectrum-body-sans-serif-emphasized-font-weight",
-    "--spectrum-body-sans-serif-font-family",
-    "--spectrum-body-sans-serif-font-style",
-    "--spectrum-body-sans-serif-font-weight",
-    "--spectrum-body-sans-serif-strong-emphasized-font-style",
-    "--spectrum-body-sans-serif-strong-emphasized-font-weight",
-    "--spectrum-body-sans-serif-strong-font-style",
-    "--spectrum-body-sans-serif-strong-font-weight",
-    "--spectrum-body-serif-emphasized-font-style",
-    "--spectrum-body-serif-emphasized-font-weight",
-    "--spectrum-body-serif-font-family",
-    "--spectrum-body-serif-font-style",
-    "--spectrum-body-serif-font-weight",
-    "--spectrum-body-serif-strong-emphasized-font-style",
-    "--spectrum-body-serif-strong-emphasized-font-weight",
-    "--spectrum-body-serif-strong-font-style",
-    "--spectrum-body-serif-strong-font-weight",
-    "--spectrum-body-size-l",
-    "--spectrum-body-size-m",
-    "--spectrum-body-size-s",
-    "--spectrum-body-size-xl",
-    "--spectrum-body-size-xs",
-    "--spectrum-body-size-xxl",
-    "--spectrum-body-size-xxxl",
-    "--spectrum-cjk-font-family-stack",
-    "--spectrum-cjk-letter-spacing",
-    "--spectrum-code-cjk-emphasized-font-style",
-    "--spectrum-code-cjk-emphasized-font-weight",
-    "--spectrum-code-cjk-font-family",
-    "--spectrum-code-cjk-font-style",
-    "--spectrum-code-cjk-font-weight",
-    "--spectrum-code-cjk-letter-spacing",
-    "--spectrum-code-cjk-line-height",
-    "--spectrum-code-cjk-strong-emphasized-font-style",
-    "--spectrum-code-cjk-strong-emphasized-font-weight",
-    "--spectrum-code-cjk-strong-font-style",
-    "--spectrum-code-cjk-strong-font-weight",
-    "--spectrum-code-color",
-    "--spectrum-code-emphasized-font-style",
-    "--spectrum-code-emphasized-font-weight",
-    "--spectrum-code-font-color",
-    "--spectrum-code-font-family",
-    "--spectrum-code-font-family-stack",
-    "--spectrum-code-font-size",
-    "--spectrum-code-font-style",
-    "--spectrum-code-font-weight",
-    "--spectrum-code-line-height",
-    "--spectrum-code-size-l",
-    "--spectrum-code-size-m",
-    "--spectrum-code-size-s",
-    "--spectrum-code-size-xl",
-    "--spectrum-code-size-xs",
-    "--spectrum-code-strong-emphasized-font-style",
-    "--spectrum-code-strong-emphasized-font-weight",
-    "--spectrum-code-strong-font-style",
-    "--spectrum-code-strong-font-weight",
-    "--spectrum-detail-cjk-emphasized-font-style",
-    "--spectrum-detail-cjk-emphasized-font-weight",
-    "--spectrum-detail-cjk-font-family",
-    "--spectrum-detail-cjk-font-style",
-    "--spectrum-detail-cjk-font-weight",
-    "--spectrum-detail-cjk-light-emphasized-font-style",
-    "--spectrum-detail-cjk-light-emphasized-font-weight",
-    "--spectrum-detail-cjk-light-font-style",
-    "--spectrum-detail-cjk-light-font-weight",
-    "--spectrum-detail-cjk-light-strong-emphasized-font-style",
-    "--spectrum-detail-cjk-light-strong-emphasized-font-weight",
-    "--spectrum-detail-cjk-light-strong-font-style",
-    "--spectrum-detail-cjk-light-strong-font-weight",
-    "--spectrum-detail-cjk-line-height",
-    "--spectrum-detail-cjk-strong-emphasized-font-style",
-    "--spectrum-detail-cjk-strong-emphasized-font-weight",
-    "--spectrum-detail-cjk-strong-font-style",
-    "--spectrum-detail-cjk-strong-font-weight",
-    "--spectrum-detail-color",
-    "--spectrum-detail-font-color",
-    "--spectrum-detail-font-size",
-    "--spectrum-detail-letter-spacing",
-    "--spectrum-detail-line-height",
-    "--spectrum-detail-margin-bottom-multiplier",
-    "--spectrum-detail-margin-end",
-    "--spectrum-detail-margin-start",
-    "--spectrum-detail-margin-top-multiplier",
-    "--spectrum-detail-sans-serif-emphasized-font-style",
-    "--spectrum-detail-sans-serif-emphasized-font-weight",
-    "--spectrum-detail-sans-serif-font-family",
-    "--spectrum-detail-sans-serif-font-style",
-    "--spectrum-detail-sans-serif-font-weight",
-    "--spectrum-detail-sans-serif-light-emphasized-font-style",
-    "--spectrum-detail-sans-serif-light-emphasized-font-weight",
-    "--spectrum-detail-sans-serif-light-font-style",
-    "--spectrum-detail-sans-serif-light-font-weight",
-    "--spectrum-detail-sans-serif-light-strong-emphasized-font-style",
-    "--spectrum-detail-sans-serif-light-strong-emphasized-font-weight",
-    "--spectrum-detail-sans-serif-light-strong-font-style",
-    "--spectrum-detail-sans-serif-light-strong-font-weight",
-    "--spectrum-detail-sans-serif-strong-emphasized-font-style",
-    "--spectrum-detail-sans-serif-strong-emphasized-font-weight",
-    "--spectrum-detail-sans-serif-strong-font-style",
-    "--spectrum-detail-sans-serif-strong-font-weight",
-    "--spectrum-detail-serif-emphasized-font-style",
-    "--spectrum-detail-serif-emphasized-font-weight",
-    "--spectrum-detail-serif-font-family",
-    "--spectrum-detail-serif-font-style",
-    "--spectrum-detail-serif-font-weight",
-    "--spectrum-detail-serif-light-emphasized-font-style",
-    "--spectrum-detail-serif-light-emphasized-font-weight",
-    "--spectrum-detail-serif-light-font-style",
-    "--spectrum-detail-serif-light-font-weight",
-    "--spectrum-detail-serif-light-strong-emphasized-font-style",
-    "--spectrum-detail-serif-light-strong-emphasized-font-weight",
-    "--spectrum-detail-serif-light-strong-font-style",
-    "--spectrum-detail-serif-light-strong-font-weight",
-    "--spectrum-detail-serif-strong-emphasized-font-style",
-    "--spectrum-detail-serif-strong-emphasized-font-weight",
-    "--spectrum-detail-serif-strong-font-style",
-    "--spectrum-detail-serif-strong-font-weight",
-    "--spectrum-detail-size-l",
-    "--spectrum-detail-size-m",
-    "--spectrum-detail-size-s",
-    "--spectrum-detail-size-xl",
-    "--spectrum-font-family",
-    "--spectrum-font-family-ar",
-    "--spectrum-font-family-he",
-    "--spectrum-font-size",
-    "--spectrum-font-style",
-    "--spectrum-heading-cjk-emphasized-font-style",
-    "--spectrum-heading-cjk-emphasized-font-weight",
-    "--spectrum-heading-cjk-font-family",
-    "--spectrum-heading-cjk-font-size",
-    "--spectrum-heading-cjk-font-style",
-    "--spectrum-heading-cjk-font-weight",
-    "--spectrum-heading-cjk-heavy-emphasized-font-style",
-    "--spectrum-heading-cjk-heavy-emphasized-font-weight",
-    "--spectrum-heading-cjk-heavy-font-style",
-    "--spectrum-heading-cjk-heavy-font-weight",
-    "--spectrum-heading-cjk-heavy-strong-emphasized-font-style",
-    "--spectrum-heading-cjk-heavy-strong-emphasized-font-weight",
-    "--spectrum-heading-cjk-heavy-strong-font-style",
-    "--spectrum-heading-cjk-heavy-strong-font-weight",
-    "--spectrum-heading-cjk-letter-spacing",
-    "--spectrum-heading-cjk-light-emphasized-font-style",
-    "--spectrum-heading-cjk-light-emphasized-font-weight",
-    "--spectrum-heading-cjk-light-font-style",
-    "--spectrum-heading-cjk-light-font-weight",
-    "--spectrum-heading-cjk-light-strong-emphasized-font-style",
-    "--spectrum-heading-cjk-light-strong-emphasized-font-weight",
-    "--spectrum-heading-cjk-light-strong-font-style",
-    "--spectrum-heading-cjk-light-strong-font-weight",
-    "--spectrum-heading-cjk-line-height",
-    "--spectrum-heading-cjk-size-l",
-    "--spectrum-heading-cjk-size-m",
-    "--spectrum-heading-cjk-size-s",
-    "--spectrum-heading-cjk-size-xl",
-    "--spectrum-heading-cjk-size-xs",
-    "--spectrum-heading-cjk-size-xxl",
-    "--spectrum-heading-cjk-size-xxs",
-    "--spectrum-heading-cjk-size-xxxl",
-    "--spectrum-heading-cjk-strong-emphasized-font-style",
-    "--spectrum-heading-cjk-strong-emphasized-font-weight",
-    "--spectrum-heading-cjk-strong-font-style",
-    "--spectrum-heading-cjk-strong-font-weight",
-    "--spectrum-heading-color",
-    "--spectrum-heading-font-color",
-    "--spectrum-heading-font-size",
-    "--spectrum-heading-line-height",
-    "--spectrum-heading-margin-bottom-multiplier",
-    "--spectrum-heading-margin-end",
-    "--spectrum-heading-margin-start",
-    "--spectrum-heading-margin-top-multiplier",
-    "--spectrum-heading-sans-serif-emphasized-font-style",
-    "--spectrum-heading-sans-serif-emphasized-font-weight",
-    "--spectrum-heading-sans-serif-font-family",
-    "--spectrum-heading-sans-serif-font-style",
-    "--spectrum-heading-sans-serif-font-weight",
-    "--spectrum-heading-sans-serif-heavy-emphasized-font-style",
-    "--spectrum-heading-sans-serif-heavy-emphasized-font-weight",
-    "--spectrum-heading-sans-serif-heavy-font-style",
-    "--spectrum-heading-sans-serif-heavy-font-weight",
-    "--spectrum-heading-sans-serif-heavy-strong-emphasized-font-style",
-    "--spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight",
-    "--spectrum-heading-sans-serif-heavy-strong-font-style",
-    "--spectrum-heading-sans-serif-heavy-strong-font-weight",
-    "--spectrum-heading-sans-serif-light-emphasized-font-style",
-    "--spectrum-heading-sans-serif-light-emphasized-font-weight",
-    "--spectrum-heading-sans-serif-light-font-style",
-    "--spectrum-heading-sans-serif-light-font-weight",
-    "--spectrum-heading-sans-serif-light-strong-emphasized-font-style",
-    "--spectrum-heading-sans-serif-light-strong-emphasized-font-weight",
-    "--spectrum-heading-sans-serif-light-strong-font-style",
-    "--spectrum-heading-sans-serif-light-strong-font-weight",
-    "--spectrum-heading-sans-serif-strong-emphasized-font-style",
-    "--spectrum-heading-sans-serif-strong-emphasized-font-weight",
-    "--spectrum-heading-sans-serif-strong-font-style",
-    "--spectrum-heading-sans-serif-strong-font-weight",
-    "--spectrum-heading-serif-emphasized-font-style",
-    "--spectrum-heading-serif-emphasized-font-weight",
-    "--spectrum-heading-serif-font-family",
-    "--spectrum-heading-serif-font-style",
-    "--spectrum-heading-serif-font-weight",
-    "--spectrum-heading-serif-heavy-emphasized-font-style",
-    "--spectrum-heading-serif-heavy-emphasized-font-weight",
-    "--spectrum-heading-serif-heavy-font-style",
-    "--spectrum-heading-serif-heavy-font-weight",
-    "--spectrum-heading-serif-heavy-strong-emphasized-font-style",
-    "--spectrum-heading-serif-heavy-strong-emphasized-font-weight",
-    "--spectrum-heading-serif-heavy-strong-font-style",
-    "--spectrum-heading-serif-heavy-strong-font-weight",
-    "--spectrum-heading-serif-light-emphasized-font-style",
-    "--spectrum-heading-serif-light-emphasized-font-weight",
-    "--spectrum-heading-serif-light-font-style",
-    "--spectrum-heading-serif-light-font-weight",
-    "--spectrum-heading-serif-light-strong-emphasized-font-style",
-    "--spectrum-heading-serif-light-strong-emphasized-font-weight",
-    "--spectrum-heading-serif-light-strong-font-style",
-    "--spectrum-heading-serif-light-strong-font-weight",
-    "--spectrum-heading-serif-strong-emphasized-font-style",
-    "--spectrum-heading-serif-strong-emphasized-font-weight",
-    "--spectrum-heading-serif-strong-font-style",
-    "--spectrum-heading-serif-strong-font-weight",
-    "--spectrum-heading-size-l",
-    "--spectrum-heading-size-m",
-    "--spectrum-heading-size-s",
-    "--spectrum-heading-size-xl",
-    "--spectrum-heading-size-xs",
-    "--spectrum-heading-size-xxl",
-    "--spectrum-heading-size-xxs",
-    "--spectrum-heading-size-xxxl",
-    "--spectrum-sans-font-family-stack",
-    "--spectrum-serif-font-family-stack"
-  ],
-  "passthroughs": [],
-  "high-contrast": [
-    "--highcontrast-body-font-color",
-    "--highcontrast-code-font-color",
-    "--highcontrast-detail-font-color",
-    "--highcontrast-heading-font-color"
-  ]
+  "modifiers": {
+    "mod-heading-font-size": {
+      "description": "Used by `--spectrum-heading-margin-start`, `--spectrum-heading-margin-end`, `.spectrum-Heading`. <br/>Defaults to `var(--spectrum-heading-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-body-font-size": {
+      "description": "Used by `--spectrum-body-margin-end`, `.spectrum-Body`. <br/>Defaults to `var(--spectrum-body-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-font-size": {
+      "description": "Used by `--spectrum-detail-margin-start`, `--spectrum-detail-margin-end`, `.spectrum-Detail`. <br/>Defaults to `var(--spectrum-detail-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-sans-serif-font-family": {
+      "description": "Used by `.spectrum-Heading`. <br/>Defaults to `var(--spectrum-heading-sans-serif-font-family)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-sans-serif-font-style": {
+      "description": "Used by `.spectrum-Heading`. <br/>Defaults to `var(--spectrum-heading-sans-serif-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-sans-serif-font-weight": {
+      "description": "Used by `.spectrum-Heading`. <br/>Defaults to `var(--spectrum-heading-sans-serif-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-font-color": {
+      "description": "Used by `.spectrum-Heading`. <br/>Defaults to `var(--spectrum-heading-font-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-heading-line-height": {
+      "description": "Used by `.spectrum-Heading`. <br/>Defaults to `var(--spectrum-heading-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-margin-start": {
+      "description": "Used by `.spectrum-Heading`. <br/>Defaults to `var(--spectrum-heading-margin-start, 0)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-margin-end": {
+      "description": "Used by `.spectrum-Heading`. <br/>Defaults to `var(--spectrum-heading-margin-end, 0)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-sans-serif-strong-font-style": {
+      "description": "Used by `.spectrum-Heading .spectrum-Heading-strong, .spectrum-Heading strong`. <br/>Defaults to `var(--spectrum-heading-sans-serif-strong-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-sans-serif-strong-font-weight": {
+      "description": "Used by `.spectrum-Heading .spectrum-Heading-strong, .spectrum-Heading strong`. <br/>Defaults to `var(--spectrum-heading-sans-serif-strong-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-sans-serif-emphasized-font-style": {
+      "description": "Used by `.spectrum-Heading .spectrum-Heading-emphasized, .spectrum-Heading em`. <br/>Defaults to `var(--spectrum-heading-sans-serif-emphasized-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-sans-serif-emphasized-font-weight": {
+      "description": "Used by `.spectrum-Heading .spectrum-Heading-emphasized, .spectrum-Heading em`. <br/>Defaults to `var(--spectrum-heading-sans-serif-emphasized-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-sans-serif-strong-emphasized-font-style": {
+      "description": "Used by `.spectrum-Heading .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading em strong, .spectrum-Heading strong em`. <br/>Defaults to `var(--spectrum-heading-sans-serif-strong-emphasized-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-sans-serif-strong-emphasized-font-weight": {
+      "description": "Used by `.spectrum-Heading .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading em strong, .spectrum-Heading strong em`. <br/>Defaults to `var(--spectrum-heading-sans-serif-strong-emphasized-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-cjk-font-family": {
+      "description": "Used by `.spectrum-Heading:lang(ja), .spectrum-Heading:lang(ko), .spectrum-Heading:lang(zh)`. <br/>Defaults to `var(--spectrum-heading-cjk-font-family)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-cjk-font-style": {
+      "description": "Used by `.spectrum-Heading:lang(ja), .spectrum-Heading:lang(ko), .spectrum-Heading:lang(zh)`. <br/>Defaults to `var(--spectrum-heading-cjk-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-cjk-font-weight": {
+      "description": "Used by `.spectrum-Heading:lang(ja), .spectrum-Heading:lang(ko), .spectrum-Heading:lang(zh)`. <br/>Defaults to `var(--spectrum-heading-cjk-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-cjk-font-size": {
+      "description": "Used by `.spectrum-Heading:lang(ja), .spectrum-Heading:lang(ko), .spectrum-Heading:lang(zh)`. <br/>Defaults to `var(--spectrum-heading-cjk-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-cjk-line-height": {
+      "description": "Used by `.spectrum-Heading:lang(ja), .spectrum-Heading:lang(ko), .spectrum-Heading:lang(zh)`. <br/>Defaults to `var(--spectrum-heading-cjk-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-cjk-letter-spacing": {
+      "description": "Used by `.spectrum-Heading:lang(ja), .spectrum-Heading:lang(ko), .spectrum-Heading:lang(zh)`. <br/>Defaults to `var(--spectrum-heading-cjk-letter-spacing)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-cjk-emphasized-font-style": {
+      "description": "Used by `.spectrum-Heading:lang(ja) .spectrum-Heading-emphasized, .spectrum-Heading:lang(ja) em, .spectrum-Heading:lang(ko) .spectrum-Heading-emphasized, .spectrum-Heading:lang(ko) em, .spectrum-Heading:lang(zh) .spectrum-Heading-emphasized, .spectrum-Heading:lang(zh) em`. <br/>Defaults to `var(--spectrum-heading-cjk-emphasized-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-cjk-emphasized-font-weight": {
+      "description": "Used by `.spectrum-Heading:lang(ja) .spectrum-Heading-emphasized, .spectrum-Heading:lang(ja) em, .spectrum-Heading:lang(ko) .spectrum-Heading-emphasized, .spectrum-Heading:lang(ko) em, .spectrum-Heading:lang(zh) .spectrum-Heading-emphasized, .spectrum-Heading:lang(zh) em`. <br/>Defaults to `var(--spectrum-heading-cjk-emphasized-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-cjk-strong-font-style": {
+      "description": "Used by `.spectrum-Heading:lang(ja) .spectrum-Heading-strong, .spectrum-Heading:lang(ja) strong, .spectrum-Heading:lang(ko) .spectrum-Heading-strong, .spectrum-Heading:lang(ko) strong, .spectrum-Heading:lang(zh) .spectrum-Heading-strong, .spectrum-Heading:lang(zh) strong`. <br/>Defaults to `var(--spectrum-heading-cjk-strong-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-cjk-strong-font-weight": {
+      "description": "Used by `.spectrum-Heading:lang(ja) .spectrum-Heading-strong, .spectrum-Heading:lang(ja) strong, .spectrum-Heading:lang(ko) .spectrum-Heading-strong, .spectrum-Heading:lang(ko) strong, .spectrum-Heading:lang(zh) .spectrum-Heading-strong, .spectrum-Heading:lang(zh) strong`. <br/>Defaults to `var(--spectrum-heading-cjk-strong-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-cjk-strong-emphasized-font-style": {
+      "description": "Used by `.spectrum-Heading:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading:lang(ja) em strong, .spectrum-Heading:lang(ja) strong em, .spectrum-Heading:lang(ko) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading:lang(ko) em strong, .spectrum-Heading:lang(ko) strong em, .spectrum-Heading:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading:lang(zh) em strong, .spectrum-Heading:lang(zh) strong em`. <br/>Defaults to `var(--spectrum-heading-cjk-strong-emphasized-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-cjk-strong-emphasized-font-weight": {
+      "description": "Used by `.spectrum-Heading:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading:lang(ja) em strong, .spectrum-Heading:lang(ja) strong em, .spectrum-Heading:lang(ko) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading:lang(ko) em strong, .spectrum-Heading:lang(ko) strong em, .spectrum-Heading:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading:lang(zh) em strong, .spectrum-Heading:lang(zh) strong em`. <br/>Defaults to `var(--spectrum-heading-cjk-strong-emphasized-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-sans-serif-heavy-font-style": {
+      "description": "Used by `.spectrum-Heading--heavy`. <br/>Defaults to `var(--spectrum-heading-sans-serif-heavy-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-sans-serif-heavy-font-weight": {
+      "description": "Used by `.spectrum-Heading--heavy`. <br/>Defaults to `var(--spectrum-heading-sans-serif-heavy-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-sans-serif-heavy-strong-font-style": {
+      "description": "Used by `.spectrum-Heading--heavy .spectrum-Heading-strong, .spectrum-Heading--heavy strong`. <br/>Defaults to `var(--spectrum-heading-sans-serif-heavy-strong-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-sans-serif-heavy-strong-font-weight": {
+      "description": "Used by `.spectrum-Heading--heavy .spectrum-Heading-strong, .spectrum-Heading--heavy strong`. <br/>Defaults to `var(--spectrum-heading-sans-serif-heavy-strong-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-sans-serif-heavy-emphasized-font-style": {
+      "description": "Used by `.spectrum-Heading--heavy .spectrum-Heading-emphasized, .spectrum-Heading--heavy em`. <br/>Defaults to `var(--spectrum-heading-sans-serif-heavy-emphasized-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-sans-serif-heavy-emphasized-font-weight": {
+      "description": "Used by `.spectrum-Heading--heavy .spectrum-Heading-emphasized, .spectrum-Heading--heavy em`. <br/>Defaults to `var(--spectrum-heading-sans-serif-heavy-emphasized-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-sans-serif-heavy-strong-emphasized-font-style": {
+      "description": "Used by `.spectrum-Heading--heavy .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy em strong, .spectrum-Heading--heavy strong em`. <br/>Defaults to `var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-sans-serif-heavy-strong-emphasized-font-weight": {
+      "description": "Used by `.spectrum-Heading--heavy .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy em strong, .spectrum-Heading--heavy strong em`. <br/>Defaults to `var(--spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-cjk-heavy-font-style": {
+      "description": "Used by `.spectrum-Heading--heavy:lang(ja), .spectrum-Heading--heavy:lang(ko), .spectrum-Heading--heavy:lang(zh)`. <br/>Defaults to `var(--spectrum-heading-cjk-heavy-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-cjk-heavy-font-weight": {
+      "description": "Used by `.spectrum-Heading--heavy:lang(ja), .spectrum-Heading--heavy:lang(ko), .spectrum-Heading--heavy:lang(zh)`. <br/>Defaults to `var(--spectrum-heading-cjk-heavy-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-cjk-heavy-emphasized-font-style": {
+      "description": "Used by `.spectrum-Heading--heavy:lang(ja) .spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(ja) em, .spectrum-Heading--heavy:lang(ko) .spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(ko) em, .spectrum-Heading--heavy:lang(zh) .spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(zh) em`. <br/>Defaults to `var(--spectrum-heading-cjk-heavy-emphasized-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-cjk-heavy-emphasized-font-weight": {
+      "description": "Used by `.spectrum-Heading--heavy:lang(ja) .spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(ja) em, .spectrum-Heading--heavy:lang(ko) .spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(ko) em, .spectrum-Heading--heavy:lang(zh) .spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(zh) em`. <br/>Defaults to `var(--spectrum-heading-cjk-heavy-emphasized-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-cjk-heavy-strong-font-style": {
+      "description": "Used by `.spectrum-Heading--heavy:lang(ja) .spectrum-Heading-strong, .spectrum-Heading--heavy:lang(ja) strong, .spectrum-Heading--heavy:lang(ko) .spectrum-Heading-strong, .spectrum-Heading--heavy:lang(ko) strong, .spectrum-Heading--heavy:lang(zh) .spectrum-Heading-strong, .spectrum-Heading--heavy:lang(zh) strong`. <br/>Defaults to `var(--spectrum-heading-cjk-heavy-strong-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-cjk-heavy-strong-font-weight": {
+      "description": "Used by `.spectrum-Heading--heavy:lang(ja) .spectrum-Heading-strong, .spectrum-Heading--heavy:lang(ja) strong, .spectrum-Heading--heavy:lang(ko) .spectrum-Heading-strong, .spectrum-Heading--heavy:lang(ko) strong, .spectrum-Heading--heavy:lang(zh) .spectrum-Heading-strong, .spectrum-Heading--heavy:lang(zh) strong`. <br/>Defaults to `var(--spectrum-heading-cjk-heavy-strong-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-cjk-heavy-strong-emphasized-font-style": {
+      "description": "Used by `.spectrum-Heading--heavy:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(ja) em strong, .spectrum-Heading--heavy:lang(ja) strong em, .spectrum-Heading--heavy:lang(ko) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(ko) em strong, .spectrum-Heading--heavy:lang(ko) strong em, .spectrum-Heading--heavy:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(zh) em strong, .spectrum-Heading--heavy:lang(zh) strong em`. <br/>Defaults to `var(--spectrum-heading-cjk-heavy-strong-emphasized-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-cjk-heavy-strong-emphasized-font-weight": {
+      "description": "Used by `.spectrum-Heading--heavy:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(ja) em strong, .spectrum-Heading--heavy:lang(ja) strong em, .spectrum-Heading--heavy:lang(ko) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(ko) em strong, .spectrum-Heading--heavy:lang(ko) strong em, .spectrum-Heading--heavy:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(zh) em strong, .spectrum-Heading--heavy:lang(zh) strong em`. <br/>Defaults to `var(--spectrum-heading-cjk-heavy-strong-emphasized-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-sans-serif-light-font-style": {
+      "description": "Used by `.spectrum-Heading--light`. <br/>Defaults to `var(--spectrum-heading-sans-serif-light-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-sans-serif-light-font-weight": {
+      "description": "Used by `.spectrum-Heading--light`. <br/>Defaults to `var(--spectrum-heading-sans-serif-light-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-sans-serif-light-emphasized-font-style": {
+      "description": "Used by `.spectrum-Heading--light .spectrum-Heading-emphasized, .spectrum-Heading--light em`. <br/>Defaults to `var(--spectrum-heading-sans-serif-light-emphasized-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-sans-serif-light-emphasized-font-weight": {
+      "description": "Used by `.spectrum-Heading--light .spectrum-Heading-emphasized, .spectrum-Heading--light em`. <br/>Defaults to `var(--spectrum-heading-sans-serif-light-emphasized-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-sans-serif-light-strong-font-style": {
+      "description": "Used by `.spectrum-Heading--light .spectrum-Heading-strong, .spectrum-Heading--light strong`. <br/>Defaults to `var(--spectrum-heading-sans-serif-light-strong-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-sans-serif-light-strong-font-weight": {
+      "description": "Used by `.spectrum-Heading--light .spectrum-Heading-strong, .spectrum-Heading--light strong`. <br/>Defaults to `var(--spectrum-heading-sans-serif-light-strong-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-sans-serif-light-strong-emphasized-font-style": {
+      "description": "Used by `.spectrum-Heading--light .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light em strong, .spectrum-Heading--light strong em`. <br/>Defaults to `var(--spectrum-heading-sans-serif-light-strong-emphasized-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-sans-serif-light-strong-emphasized-font-weight": {
+      "description": "Used by `.spectrum-Heading--light .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light em strong, .spectrum-Heading--light strong em`. <br/>Defaults to `var(--spectrum-heading-sans-serif-light-strong-emphasized-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-cjk-light-font-style": {
+      "description": "Used by `.spectrum-Heading--light:lang(ja), .spectrum-Heading--light:lang(ko), .spectrum-Heading--light:lang(zh)`. <br/>Defaults to `var(--spectrum-heading-cjk-light-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-cjk-light-font-weight": {
+      "description": "Used by `.spectrum-Heading--light:lang(ja), .spectrum-Heading--light:lang(ko), .spectrum-Heading--light:lang(zh)`. <br/>Defaults to `var(--spectrum-heading-cjk-light-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-cjk-light-strong-font-style": {
+      "description": "Used by `.spectrum-Heading--light:lang(ja) .spectrum-Heading-strong, .spectrum-Heading--light:lang(ja) strong, .spectrum-Heading--light:lang(ko) .spectrum-Heading-strong, .spectrum-Heading--light:lang(ko) strong, .spectrum-Heading--light:lang(zh) .spectrum-Heading-strong, .spectrum-Heading--light:lang(zh) strong`. <br/>Defaults to `var(--spectrum-heading-cjk-light-strong-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-cjk-light-strong-font-weight": {
+      "description": "Used by `.spectrum-Heading--light:lang(ja) .spectrum-Heading-strong, .spectrum-Heading--light:lang(ja) strong, .spectrum-Heading--light:lang(ko) .spectrum-Heading-strong, .spectrum-Heading--light:lang(ko) strong, .spectrum-Heading--light:lang(zh) .spectrum-Heading-strong, .spectrum-Heading--light:lang(zh) strong`. <br/>Defaults to `var(--spectrum-heading-cjk-light-strong-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-cjk-light-emphasized-font-style": {
+      "description": "Used by `.spectrum-Heading--light:lang(ja) .spectrum-Heading-emphasized, .spectrum-Heading--light:lang(ja) em, .spectrum-Heading--light:lang(ko) .spectrum-Heading-emphasized, .spectrum-Heading--light:lang(ko) em, .spectrum-Heading--light:lang(zh) .spectrum-Heading-emphasized, .spectrum-Heading--light:lang(zh) em`. <br/>Defaults to `var(--spectrum-heading-cjk-light-emphasized-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-cjk-light-emphasized-font-weight": {
+      "description": "Used by `.spectrum-Heading--light:lang(ja) .spectrum-Heading-emphasized, .spectrum-Heading--light:lang(ja) em, .spectrum-Heading--light:lang(ko) .spectrum-Heading-emphasized, .spectrum-Heading--light:lang(ko) em, .spectrum-Heading--light:lang(zh) .spectrum-Heading-emphasized, .spectrum-Heading--light:lang(zh) em`. <br/>Defaults to `var(--spectrum-heading-cjk-light-emphasized-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-cjk-light-strong-emphasized-font-style": {
+      "description": "Used by `.spectrum-Heading--light:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light:lang(ja) em strong, .spectrum-Heading--light:lang(ja) strong em, .spectrum-Heading--light:lang(ko) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light:lang(ko) em strong, .spectrum-Heading--light:lang(ko) strong em, .spectrum-Heading--light:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light:lang(zh) em strong, .spectrum-Heading--light:lang(zh) strong em`. <br/>Defaults to `var(--spectrum-heading-cjk-light-strong-emphasized-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-cjk-light-strong-emphasized-font-weight": {
+      "description": "Used by `.spectrum-Heading--light:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light:lang(ja) em strong, .spectrum-Heading--light:lang(ja) strong em, .spectrum-Heading--light:lang(ko) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light:lang(ko) em strong, .spectrum-Heading--light:lang(ko) strong em, .spectrum-Heading--light:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light:lang(zh) em strong, .spectrum-Heading--light:lang(zh) strong em`. <br/>Defaults to `var(--spectrum-heading-cjk-light-strong-emphasized-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-serif-font-family": {
+      "description": "Used by `.spectrum-Heading--serif`. <br/>Defaults to `var(--spectrum-heading-serif-font-family)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-serif-font-style": {
+      "description": "Used by `.spectrum-Heading--serif`. <br/>Defaults to `var(--spectrum-heading-serif-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-serif-font-weight": {
+      "description": "Used by `.spectrum-Heading--serif`. <br/>Defaults to `var(--spectrum-heading-serif-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-serif-emphasized-font-style": {
+      "description": "Used by `.spectrum-Heading--serif .spectrum-Heading-emphasized, .spectrum-Heading--serif em`. <br/>Defaults to `var(--spectrum-heading-serif-emphasized-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-serif-emphasized-font-weight": {
+      "description": "Used by `.spectrum-Heading--serif .spectrum-Heading-emphasized, .spectrum-Heading--serif em`. <br/>Defaults to `var(--spectrum-heading-serif-emphasized-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-serif-strong-font-style": {
+      "description": "Used by `.spectrum-Heading--serif .spectrum-Heading-strong, .spectrum-Heading--serif strong`. <br/>Defaults to `var(--spectrum-heading-serif-strong-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-serif-strong-font-weight": {
+      "description": "Used by `.spectrum-Heading--serif .spectrum-Heading-strong, .spectrum-Heading--serif strong`. <br/>Defaults to `var(--spectrum-heading-serif-strong-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-serif-strong-emphasized-font-style": {
+      "description": "Used by `.spectrum-Heading--serif .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--serif em strong, .spectrum-Heading--serif strong em`. <br/>Defaults to `var(--spectrum-heading-serif-strong-emphasized-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-serif-strong-emphasized-font-weight": {
+      "description": "Used by `.spectrum-Heading--serif .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--serif em strong, .spectrum-Heading--serif strong em`. <br/>Defaults to `var(--spectrum-heading-serif-strong-emphasized-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-serif-heavy-font-style": {
+      "description": "Used by `.spectrum-Heading--serif.spectrum-Heading--heavy`. <br/>Defaults to `var(--spectrum-heading-serif-heavy-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-serif-heavy-font-weight": {
+      "description": "Used by `.spectrum-Heading--serif.spectrum-Heading--heavy`. <br/>Defaults to `var(--spectrum-heading-serif-heavy-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-serif-heavy-strong-font-style": {
+      "description": "Used by `.spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-strong, .spectrum-Heading--serif.spectrum-Heading--heavy strong`. <br/>Defaults to `var(--spectrum-heading-serif-heavy-strong-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-serif-heavy-strong-font-weight": {
+      "description": "Used by `.spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-strong, .spectrum-Heading--serif.spectrum-Heading--heavy strong`. <br/>Defaults to `var(--spectrum-heading-serif-heavy-strong-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-serif-heavy-emphasized-font-style": {
+      "description": "Used by `.spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-emphasized, .spectrum-Heading--serif.spectrum-Heading--heavy em`. <br/>Defaults to `var(--spectrum-heading-serif-heavy-emphasized-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-serif-heavy-emphasized-font-weight": {
+      "description": "Used by `.spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-emphasized, .spectrum-Heading--serif.spectrum-Heading--heavy em`. <br/>Defaults to `var(--spectrum-heading-serif-heavy-emphasized-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-serif-heavy-strong-emphasized-font-style": {
+      "description": "Used by `.spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--serif.spectrum-Heading--heavy em strong, .spectrum-Heading--serif.spectrum-Heading--heavy strong em`. <br/>Defaults to `var(--spectrum-heading-serif-heavy-strong-emphasized-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-serif-heavy-strong-emphasized-font-weight": {
+      "description": "Used by `.spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--serif.spectrum-Heading--heavy em strong, .spectrum-Heading--serif.spectrum-Heading--heavy strong em`. <br/>Defaults to `var(--spectrum-heading-serif-heavy-strong-emphasized-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-serif-light-font-style": {
+      "description": "Used by `.spectrum-Heading--serif.spectrum-Heading--light`. <br/>Defaults to `var(--spectrum-heading-serif-light-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-serif-light-font-weight": {
+      "description": "Used by `.spectrum-Heading--serif.spectrum-Heading--light`. <br/>Defaults to `var(--spectrum-heading-serif-light-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-serif-light-emphasized-font-style": {
+      "description": "Used by `.spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-emphasized, .spectrum-Heading--serif.spectrum-Heading--light em`. <br/>Defaults to `var(--spectrum-heading-serif-light-emphasized-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-serif-light-emphasized-font-weight": {
+      "description": "Used by `.spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-emphasized, .spectrum-Heading--serif.spectrum-Heading--light em`. <br/>Defaults to `var(--spectrum-heading-serif-light-emphasized-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-serif-light-strong-font-style": {
+      "description": "Used by `.spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-strong, .spectrum-Heading--serif.spectrum-Heading--light strong`. <br/>Defaults to `var(--spectrum-heading-serif-light-strong-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-serif-light-strong-font-weight": {
+      "description": "Used by `.spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-strong, .spectrum-Heading--serif.spectrum-Heading--light strong`. <br/>Defaults to `var(--spectrum-heading-serif-light-strong-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-serif-light-strong-emphasized-font-style": {
+      "description": "Used by `.spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--serif.spectrum-Heading--light em strong, .spectrum-Heading--serif.spectrum-Heading--light strong em`. <br/>Defaults to `var(--spectrum-heading-serif-light-strong-emphasized-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-heading-serif-light-strong-emphasized-font-weight": {
+      "description": "Used by `.spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--serif.spectrum-Heading--light em strong, .spectrum-Heading--serif.spectrum-Heading--light strong em`. <br/>Defaults to `var(--spectrum-heading-serif-light-strong-emphasized-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-body-sans-serif-font-family": {
+      "description": "Used by `.spectrum-Body`. <br/>Defaults to `var(--spectrum-body-sans-serif-font-family)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-body-sans-serif-font-style": {
+      "description": "Used by `.spectrum-Body`. <br/>Defaults to `var(--spectrum-body-sans-serif-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-body-sans-serif-font-weight": {
+      "description": "Used by `.spectrum-Body`. <br/>Defaults to `var(--spectrum-body-sans-serif-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-body-font-color": {
+      "description": "Used by `.spectrum-Body`. <br/>Defaults to `var(--spectrum-body-font-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-body-margin-start": {
+      "description": "Used by `.spectrum-Body`. <br/>Defaults to `var(--mod-body-margin, 0)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-body-margin": {
+      "description": "Used by `.spectrum-Body`. <br/>Defaults to `var(--spectrum-body-margin-end, 0)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-body-margin-end": {
+      "description": "Used by `.spectrum-Body`. <br/>Defaults to `var(--mod-body-margin, var(--spectrum-body-margin-end, 0))`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-body-line-height": {
+      "description": "Used by `.spectrum-Body`. <br/>Defaults to `var(--spectrum-body-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-body-sans-serif-strong-font-style": {
+      "description": "Used by `.spectrum-Body .spectrum-Body-strong, .spectrum-Body strong`. <br/>Defaults to `var(--spectrum-body-sans-serif-strong-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-body-sans-serif-strong-font-weight": {
+      "description": "Used by `.spectrum-Body .spectrum-Body-strong, .spectrum-Body strong`. <br/>Defaults to `var(--spectrum-body-sans-serif-strong-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-body-sans-serif-emphasized-font-style": {
+      "description": "Used by `.spectrum-Body .spectrum-Body-emphasized, .spectrum-Body em`. <br/>Defaults to `var(--spectrum-body-sans-serif-emphasized-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-body-sans-serif-emphasized-font-weight": {
+      "description": "Used by `.spectrum-Body .spectrum-Body-emphasized, .spectrum-Body em`. <br/>Defaults to `var(--spectrum-body-sans-serif-emphasized-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-body-sans-serif-strong-emphasized-font-style": {
+      "description": "Used by `.spectrum-Body .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body em strong, .spectrum-Body strong em`. <br/>Defaults to `var(--spectrum-body-sans-serif-strong-emphasized-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-body-sans-serif-strong-emphasized-font-weight": {
+      "description": "Used by `.spectrum-Body .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body em strong, .spectrum-Body strong em`. <br/>Defaults to `var(--spectrum-body-sans-serif-strong-emphasized-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-body-cjk-font-family": {
+      "description": "Used by `.spectrum-Body:lang(ja), .spectrum-Body:lang(ko), .spectrum-Body:lang(zh)`. <br/>Defaults to `var(--spectrum-body-cjk-font-family)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-body-cjk-font-style": {
+      "description": "Used by `.spectrum-Body:lang(ja), .spectrum-Body:lang(ko), .spectrum-Body:lang(zh)`. <br/>Defaults to `var(--spectrum-body-cjk-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-body-cjk-font-weight": {
+      "description": "Used by `.spectrum-Body:lang(ja), .spectrum-Body:lang(ko), .spectrum-Body:lang(zh)`. <br/>Defaults to `var(--spectrum-body-cjk-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-body-cjk-line-height": {
+      "description": "Used by `.spectrum-Body:lang(ja), .spectrum-Body:lang(ko), .spectrum-Body:lang(zh)`. <br/>Defaults to `var(--spectrum-body-cjk-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-body-cjk-letter-spacing": {
+      "description": "Used by `.spectrum-Body:lang(ja), .spectrum-Body:lang(ko), .spectrum-Body:lang(zh)`. <br/>Defaults to `var(--spectrum-body-cjk-letter-spacing)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-body-cjk-strong-font-style": {
+      "description": "Used by `.spectrum-Body:lang(ja) .spectrum-Body-strong, .spectrum-Body:lang(ja) strong, .spectrum-Body:lang(ko) .spectrum-Body-strong, .spectrum-Body:lang(ko) strong, .spectrum-Body:lang(zh) .spectrum-Body-strong, .spectrum-Body:lang(zh) strong`. <br/>Defaults to `var(--spectrum-body-cjk-strong-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-body-cjk-strong-font-weight": {
+      "description": "Used by `.spectrum-Body:lang(ja) .spectrum-Body-strong, .spectrum-Body:lang(ja) strong, .spectrum-Body:lang(ko) .spectrum-Body-strong, .spectrum-Body:lang(ko) strong, .spectrum-Body:lang(zh) .spectrum-Body-strong, .spectrum-Body:lang(zh) strong`. <br/>Defaults to `var(--spectrum-body-cjk-strong-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-body-cjk-emphasized-font-style": {
+      "description": "Used by `.spectrum-Body:lang(ja) .spectrum-Body-emphasized, .spectrum-Body:lang(ja) em, .spectrum-Body:lang(ko) .spectrum-Body-emphasized, .spectrum-Body:lang(ko) em, .spectrum-Body:lang(zh) .spectrum-Body-emphasized, .spectrum-Body:lang(zh) em`. <br/>Defaults to `var(--spectrum-body-cjk-emphasized-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-body-cjk-emphasized-font-weight": {
+      "description": "Used by `.spectrum-Body:lang(ja) .spectrum-Body-emphasized, .spectrum-Body:lang(ja) em, .spectrum-Body:lang(ko) .spectrum-Body-emphasized, .spectrum-Body:lang(ko) em, .spectrum-Body:lang(zh) .spectrum-Body-emphasized, .spectrum-Body:lang(zh) em`. <br/>Defaults to `var(--spectrum-body-cjk-emphasized-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-body-cjk-strong-emphasized-font-style": {
+      "description": "Used by `.spectrum-Body:lang(ja) .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body:lang(ja) em strong, .spectrum-Body:lang(ja) strong em, .spectrum-Body:lang(ko) .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body:lang(ko) em strong, .spectrum-Body:lang(ko) strong em, .spectrum-Body:lang(zh) .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body:lang(zh) em strong, .spectrum-Body:lang(zh) strong em`. <br/>Defaults to `var(--spectrum-body-cjk-strong-emphasized-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-body-cjk-strong-emphasized-font-weight": {
+      "description": "Used by `.spectrum-Body:lang(ja) .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body:lang(ja) em strong, .spectrum-Body:lang(ja) strong em, .spectrum-Body:lang(ko) .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body:lang(ko) em strong, .spectrum-Body:lang(ko) strong em, .spectrum-Body:lang(zh) .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body:lang(zh) em strong, .spectrum-Body:lang(zh) strong em`. <br/>Defaults to `var(--spectrum-body-cjk-strong-emphasized-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-body-serif-font-family": {
+      "description": "Used by `.spectrum-Body--serif`. <br/>Defaults to `var(--spectrum-body-serif-font-family)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-body-serif-font-weight": {
+      "description": "Used by `.spectrum-Body--serif`. <br/>Defaults to `var(--spectrum-body-serif-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-body-serif-font-style": {
+      "description": "Used by `.spectrum-Body--serif`. <br/>Defaults to `var(--spectrum-body-serif-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-body-serif-strong-font-style": {
+      "description": "Used by `.spectrum-Body--serif .spectrum-Body-strong, .spectrum-Body--serif strong`. <br/>Defaults to `var(--spectrum-body-serif-strong-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-body-serif-strong-font-weight": {
+      "description": "Used by `.spectrum-Body--serif .spectrum-Body-strong, .spectrum-Body--serif strong`. <br/>Defaults to `var(--spectrum-body-serif-strong-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-body-serif-emphasized-font-style": {
+      "description": "Used by `.spectrum-Body--serif .spectrum-Body-emphasized, .spectrum-Body--serif em`. <br/>Defaults to `var(--spectrum-body-serif-emphasized-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-body-serif-emphasized-font-weight": {
+      "description": "Used by `.spectrum-Body--serif .spectrum-Body-emphasized, .spectrum-Body--serif em`. <br/>Defaults to `var(--spectrum-body-serif-emphasized-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-body-serif-strong-emphasized-font-style": {
+      "description": "Used by `.spectrum-Body--serif .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body--serif em strong, .spectrum-Body--serif strong em`. <br/>Defaults to `var(--spectrum-body-serif-strong-emphasized-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-body-serif-strong-emphasized-font-weight": {
+      "description": "Used by `.spectrum-Body--serif .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body--serif em strong, .spectrum-Body--serif strong em`. <br/>Defaults to `var(--spectrum-body-serif-strong-emphasized-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-sans-serif-font-family": {
+      "description": "Used by `.spectrum-Detail`. <br/>Defaults to `var(--spectrum-detail-sans-serif-font-family)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-sans-serif-font-style": {
+      "description": "Used by `.spectrum-Detail`. <br/>Defaults to `var(--spectrum-detail-sans-serif-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-sans-serif-font-weight": {
+      "description": "Used by `.spectrum-Detail`. <br/>Defaults to `var(--spectrum-detail-sans-serif-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-margin-start": {
+      "description": "Used by `.spectrum-Detail`. <br/>Defaults to `var(--spectrum-detail-margin-start, 0)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-margin-end": {
+      "description": "Used by `.spectrum-Detail`. <br/>Defaults to `var(--spectrum-detail-margin-end, 0)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-font-color": {
+      "description": "Used by `.spectrum-Detail`. <br/>Defaults to `var(--spectrum-detail-font-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-detail-line-height": {
+      "description": "Used by `.spectrum-Detail`. <br/>Defaults to `var(--spectrum-detail-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-letter-spacing": {
+      "description": "Used by `.spectrum-Detail`. <br/>Defaults to `var(--spectrum-detail-letter-spacing)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-sans-serif-strong-font-style": {
+      "description": "Used by `.spectrum-Detail .spectrum-Detail-strong, .spectrum-Detail strong`. <br/>Defaults to `var(--spectrum-detail-sans-serif-strong-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-sans-serif-strong-font-weight": {
+      "description": "Used by `.spectrum-Detail .spectrum-Detail-strong, .spectrum-Detail strong`. <br/>Defaults to `var(--spectrum-detail-sans-serif-strong-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-sans-serif-emphasized-font-style": {
+      "description": "Used by `.spectrum-Detail .spectrum-Detail-emphasized, .spectrum-Detail em`. <br/>Defaults to `var(--spectrum-detail-sans-serif-emphasized-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-sans-serif-emphasized-font-weight": {
+      "description": "Used by `.spectrum-Detail .spectrum-Detail-emphasized, .spectrum-Detail em`. <br/>Defaults to `var(--spectrum-detail-sans-serif-emphasized-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-sans-serif-strong-emphasized-font-style": {
+      "description": "Used by `.spectrum-Detail .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail em strong, .spectrum-Detail strong em`. <br/>Defaults to `var(--spectrum-detail-sans-serif-strong-emphasized-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-sans-serif-strong-emphasized-font-weight": {
+      "description": "Used by `.spectrum-Detail .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail em strong, .spectrum-Detail strong em`. <br/>Defaults to `var(--spectrum-detail-sans-serif-strong-emphasized-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-cjk-font-family": {
+      "description": "Used by `.spectrum-Detail:lang(ja), .spectrum-Detail:lang(ko), .spectrum-Detail:lang(zh)`. <br/>Defaults to `var(--spectrum-detail-cjk-font-family)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-cjk-font-style": {
+      "description": "Used by `.spectrum-Detail:lang(ja), .spectrum-Detail:lang(ko), .spectrum-Detail:lang(zh)`. <br/>Defaults to `var(--spectrum-detail-cjk-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-cjk-font-weight": {
+      "description": "Used by `.spectrum-Detail:lang(ja), .spectrum-Detail:lang(ko), .spectrum-Detail:lang(zh)`. <br/>Defaults to `var(--spectrum-detail-cjk-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-cjk-line-height": {
+      "description": "Used by `.spectrum-Detail:lang(ja), .spectrum-Detail:lang(ko), .spectrum-Detail:lang(zh)`. <br/>Defaults to `var(--spectrum-detail-cjk-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-cjk-strong-font-style": {
+      "description": "Used by `.spectrum-Detail:lang(ja) .spectrum-Detail-strong, .spectrum-Detail:lang(ja) strong, .spectrum-Detail:lang(ko) .spectrum-Detail-strong, .spectrum-Detail:lang(ko) strong, .spectrum-Detail:lang(zh) .spectrum-Detail-strong, .spectrum-Detail:lang(zh) strong`. <br/>Defaults to `var(--spectrum-detail-cjk-strong-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-cjk-strong-font-weight": {
+      "description": "Used by `.spectrum-Detail:lang(ja) .spectrum-Detail-strong, .spectrum-Detail:lang(ja) strong, .spectrum-Detail:lang(ko) .spectrum-Detail-strong, .spectrum-Detail:lang(ko) strong, .spectrum-Detail:lang(zh) .spectrum-Detail-strong, .spectrum-Detail:lang(zh) strong`. <br/>Defaults to `var(--spectrum-detail-cjk-strong-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-cjk-emphasized-font-style": {
+      "description": "Used by `.spectrum-Detail:lang(ja) .spectrum-Detail-emphasized, .spectrum-Detail:lang(ja) em, .spectrum-Detail:lang(ko) .spectrum-Detail-emphasized, .spectrum-Detail:lang(ko) em, .spectrum-Detail:lang(zh) .spectrum-Detail-emphasized, .spectrum-Detail:lang(zh) em`. <br/>Defaults to `var(--spectrum-detail-cjk-emphasized-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-cjk-emphasized-font-weight": {
+      "description": "Used by `.spectrum-Detail:lang(ja) .spectrum-Detail-emphasized, .spectrum-Detail:lang(ja) em, .spectrum-Detail:lang(ko) .spectrum-Detail-emphasized, .spectrum-Detail:lang(ko) em, .spectrum-Detail:lang(zh) .spectrum-Detail-emphasized, .spectrum-Detail:lang(zh) em`. <br/>Defaults to `var(--spectrum-detail-cjk-emphasized-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-cjk-strong-emphasized-font-style": {
+      "description": "Used by `.spectrum-Detail:lang(ja) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail:lang(ja) em strong, .spectrum-Detail:lang(ja) strong em, .spectrum-Detail:lang(ko) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail:lang(ko) em strong, .spectrum-Detail:lang(ko) strong em, .spectrum-Detail:lang(zh) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail:lang(zh) em strong, .spectrum-Detail:lang(zh) strong em`. <br/>Defaults to `var(--spectrum-detail-cjk-strong-emphasized-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-cjk-strong-emphasized-font-weight": {
+      "description": "Used by `.spectrum-Detail:lang(ja) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail:lang(ja) em strong, .spectrum-Detail:lang(ja) strong em, .spectrum-Detail:lang(ko) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail:lang(ko) em strong, .spectrum-Detail:lang(ko) strong em, .spectrum-Detail:lang(zh) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail:lang(zh) em strong, .spectrum-Detail:lang(zh) strong em`. <br/>Defaults to `var(--spectrum-detail-cjk-strong-emphasized-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-serif-font-family": {
+      "description": "Used by `.spectrum-Detail--serif`. <br/>Defaults to `var(--spectrum-detail-serif-font-family)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-serif-font-style": {
+      "description": "Used by `.spectrum-Detail--serif`. <br/>Defaults to `var(--spectrum-detail-serif-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-serif-font-weight": {
+      "description": "Used by `.spectrum-Detail--serif`. <br/>Defaults to `var(--spectrum-detail-serif-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-serif-strong-font-style": {
+      "description": "Used by `.spectrum-Detail--serif .spectrum-Detail-strong, .spectrum-Detail--serif strong`. <br/>Defaults to `var(--spectrum-detail-serif-strong-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-serif-strong-font-weight": {
+      "description": "Used by `.spectrum-Detail--serif .spectrum-Detail-strong, .spectrum-Detail--serif strong`. <br/>Defaults to `var(--spectrum-detail-serif-strong-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-serif-emphasized-font-style": {
+      "description": "Used by `.spectrum-Detail--serif .spectrum-Detail-emphasized, .spectrum-Detail--serif em`. <br/>Defaults to `var(--spectrum-detail-serif-emphasized-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-serif-emphasized-font-weight": {
+      "description": "Used by `.spectrum-Detail--serif .spectrum-Detail-emphasized, .spectrum-Detail--serif em`. <br/>Defaults to `var(--spectrum-detail-serif-emphasized-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-serif-strong-emphasized-font-style": {
+      "description": "Used by `.spectrum-Detail--serif .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail--serif em strong, .spectrum-Detail--serif strong em`. <br/>Defaults to `var(--spectrum-detail-serif-strong-emphasized-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-serif-strong-emphasized-font-weight": {
+      "description": "Used by `.spectrum-Detail--serif .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail--serif em strong, .spectrum-Detail--serif strong em`. <br/>Defaults to `var(--spectrum-detail-serif-strong-emphasized-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-sans-serif-light-font-style": {
+      "description": "Used by `.spectrum-Detail--light`. <br/>Defaults to `var(--spectrum-detail-sans-serif-light-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-sans-serif-light-strong-font-style": {
+      "description": "Used by `.spectrum-Detail--light .spectrum-Detail-strong, .spectrum-Detail--light strong`. <br/>Defaults to `var(--spectrum-detail-sans-serif-light-strong-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-sans-serif-light-strong-font-weight": {
+      "description": "Used by `.spectrum-Detail--light .spectrum-Detail-strong, .spectrum-Detail--light strong`. <br/>Defaults to `var(--spectrum-detail-sans-serif-light-strong-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-sans-serif-light-emphasized-font-style": {
+      "description": "Used by `.spectrum-Detail--light .spectrum-Detail-emphasized, .spectrum-Detail--light em`. <br/>Defaults to `var(--spectrum-detail-sans-serif-light-emphasized-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-sans-serif-light-emphasized-font-weight": {
+      "description": "Used by `.spectrum-Detail--light .spectrum-Detail-emphasized, .spectrum-Detail--light em`. <br/>Defaults to `var(--spectrum-detail-sans-serif-light-emphasized-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-sans-serif-light-strong-emphasized-font-style": {
+      "description": "Used by `.spectrum-Detail--light .spectrum-Detail-strong.spectrum-Body-emphasized, .spectrum-Detail--light em strong, .spectrum-Detail--light strong em`. <br/>Defaults to `var(--spectrum-detail-sans-serif-light-strong-emphasized-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-sans-serif-light-strong-emphasized-font-weight": {
+      "description": "Used by `.spectrum-Detail--light .spectrum-Detail-strong.spectrum-Body-emphasized, .spectrum-Detail--light em strong, .spectrum-Detail--light strong em`. <br/>Defaults to `var(--spectrum-detail-sans-serif-light-strong-emphasized-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-cjk-light-font-style": {
+      "description": "Used by `.spectrum-Detail--light:lang(ja), .spectrum-Detail--light:lang(ko), .spectrum-Detail--light:lang(zh)`. <br/>Defaults to `var(--spectrum-detail-cjk-light-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-cjk-light-font-weight": {
+      "description": "Used by `.spectrum-Detail--light:lang(ja), .spectrum-Detail--light:lang(ko), .spectrum-Detail--light:lang(zh)`. <br/>Defaults to `var(--spectrum-detail-cjk-light-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-cjk-light-strong-font-style": {
+      "description": "Used by `.spectrum-Detail--light:lang(ja) .spectrum-Detail-strong, .spectrum-Detail--light:lang(ja) strong, .spectrum-Detail--light:lang(ko) .spectrum-Detail-strong, .spectrum-Detail--light:lang(ko) strong, .spectrum-Detail--light:lang(zh) .spectrum-Detail-strong, .spectrum-Detail--light:lang(zh) strong`. <br/>Defaults to `var(--spectrum-detail-cjk-light-strong-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-cjk-light-strong-font-weight": {
+      "description": "Used by `.spectrum-Detail--light:lang(ja) .spectrum-Detail-strong, .spectrum-Detail--light:lang(ja) strong, .spectrum-Detail--light:lang(ko) .spectrum-Detail-strong, .spectrum-Detail--light:lang(ko) strong, .spectrum-Detail--light:lang(zh) .spectrum-Detail-strong, .spectrum-Detail--light:lang(zh) strong`. <br/>Defaults to `var(--spectrum-detail-cjk-light-strong-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-cjk-light-emphasized-font-style": {
+      "description": "Used by `.spectrum-Detail--light:lang(ja) .spectrum-Detail-emphasized, .spectrum-Detail--light:lang(ja) em, .spectrum-Detail--light:lang(ko) .spectrum-Detail-emphasized, .spectrum-Detail--light:lang(ko) em, .spectrum-Detail--light:lang(zh) .spectrum-Detail-emphasized, .spectrum-Detail--light:lang(zh) em`. <br/>Defaults to `var(--spectrum-detail-cjk-light-emphasized-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-cjk-light-emphasized-font-weight": {
+      "description": "Used by `.spectrum-Detail--light:lang(ja) .spectrum-Detail-emphasized, .spectrum-Detail--light:lang(ja) em, .spectrum-Detail--light:lang(ko) .spectrum-Detail-emphasized, .spectrum-Detail--light:lang(ko) em, .spectrum-Detail--light:lang(zh) .spectrum-Detail-emphasized, .spectrum-Detail--light:lang(zh) em`. <br/>Defaults to `var(--spectrum-detail-cjk-light-emphasized-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-cjk-light-strong-emphasized-font-style": {
+      "description": "Used by `.spectrum-Detail--light:lang(ja) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail--light:lang(ko) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail--light:lang(zh) .spectrum-Detail-strong.spectrum-Detail-emphasized`. <br/>Defaults to `var(--spectrum-detail-cjk-light-strong-emphasized-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-cjk-light-strong-emphasized-font-weight": {
+      "description": "Used by `.spectrum-Detail--light:lang(ja) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail--light:lang(ko) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail--light:lang(zh) .spectrum-Detail-strong.spectrum-Detail-emphasized`. <br/>Defaults to `var(--spectrum-detail-cjk-light-strong-emphasized-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-serif-light-font-style": {
+      "description": "Used by `.spectrum-Detail--serif.spectrum-Detail--light`. <br/>Defaults to `var(--spectrum-detail-serif-light-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-serif-light-font-weight": {
+      "description": "Used by `.spectrum-Detail--serif.spectrum-Detail--light`. <br/>Defaults to `var(--spectrum-detail-serif-light-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-serif-light-strong-font-style": {
+      "description": "Used by `.spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-strong, .spectrum-Detail--serif.spectrum-Detail--light strong`. <br/>Defaults to `var(--spectrum-detail-serif-light-strong-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-serif-light-strong-font-weight": {
+      "description": "Used by `.spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-strong, .spectrum-Detail--serif.spectrum-Detail--light strong`. <br/>Defaults to `var(--spectrum-detail-serif-light-strong-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-serif-light-emphasized-font-style": {
+      "description": "Used by `.spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-emphasized, .spectrum-Detail--serif.spectrum-Detail--light em`. <br/>Defaults to `var(--spectrum-detail-serif-light-emphasized-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-serif-light-emphasized-font-weight": {
+      "description": "Used by `.spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-emphasized, .spectrum-Detail--serif.spectrum-Detail--light em`. <br/>Defaults to `var(--spectrum-detail-serif-light-emphasized-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-serif-light-strong-emphasized-font-style": {
+      "description": "Used by `.spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-strong.spectrum-Body-emphasized, .spectrum-Detail--serif.spectrum-Detail--light em strong, .spectrum-Detail--serif.spectrum-Detail--light strong em`. <br/>Defaults to `var(--spectrum-detail-serif-light-strong-emphasized-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-detail-serif-light-strong-emphasized-font-weight": {
+      "description": "Used by `.spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-strong.spectrum-Body-emphasized, .spectrum-Detail--serif.spectrum-Detail--light em strong, .spectrum-Detail--serif.spectrum-Detail--light strong em`. <br/>Defaults to `var(--spectrum-detail-serif-light-strong-emphasized-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-code-font-family": {
+      "description": "Used by `.spectrum-Code`. <br/>Defaults to `var(--spectrum-code-font-family)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-code-font-style": {
+      "description": "Used by `.spectrum-Code`. <br/>Defaults to `var(--spectrum-code-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-code-font-weight": {
+      "description": "Used by `.spectrum-Code`. <br/>Defaults to `var(--spectrum-code-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-code-font-size": {
+      "description": "Used by `.spectrum-Code`. <br/>Defaults to `var(--spectrum-code-font-size)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-code-margin-start": {
+      "description": "Used by `.spectrum-Code`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-code-margin-end": {
+      "description": "Used by `.spectrum-Code`.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-code-line-height": {
+      "description": "Used by `.spectrum-Code`. <br/>Defaults to `var(--spectrum-code-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-code-font-color": {
+      "description": "Used by `.spectrum-Code`. <br/>Defaults to `var(--spectrum-code-font-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-code-strong-font-style": {
+      "description": "Used by `.spectrum-Code .spectrum-Code-strong, .spectrum-Code strong`. <br/>Defaults to `var(--spectrum-code-strong-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-code-strong-font-weight": {
+      "description": "Used by `.spectrum-Code .spectrum-Code-strong, .spectrum-Code strong`. <br/>Defaults to `var(--spectrum-code-strong-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-code-emphasized-font-style": {
+      "description": "Used by `.spectrum-Code .spectrum-Code-emphasized, .spectrum-Code em`. <br/>Defaults to `var(--spectrum-code-emphasized-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-code-emphasized-font-weight": {
+      "description": "Used by `.spectrum-Code .spectrum-Code-emphasized, .spectrum-Code em`. <br/>Defaults to `var(--spectrum-code-emphasized-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-code-strong-emphasized-font-style": {
+      "description": "Used by `.spectrum-Code .spectrum-Code-strong.spectrum-Code-emphasized, .spectrum-Code em strong, .spectrum-Code strong em`. <br/>Defaults to `var(--spectrum-code-strong-emphasized-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-code-strong-emphasized-font-weight": {
+      "description": "Used by `.spectrum-Code .spectrum-Code-strong.spectrum-Code-emphasized, .spectrum-Code em strong, .spectrum-Code strong em`. <br/>Defaults to `var(--spectrum-code-strong-emphasized-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-code-cjk-font-family": {
+      "description": "Used by `.spectrum-Code:lang(ja), .spectrum-Code:lang(ko), .spectrum-Code:lang(zh)`. <br/>Defaults to `var(--spectrum-code-cjk-font-family)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-code-cjk-font-style": {
+      "description": "Used by `.spectrum-Code:lang(ja), .spectrum-Code:lang(ko), .spectrum-Code:lang(zh)`. <br/>Defaults to `var(--spectrum-code-cjk-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-code-cjk-font-weight": {
+      "description": "Used by `.spectrum-Code:lang(ja), .spectrum-Code:lang(ko), .spectrum-Code:lang(zh)`. <br/>Defaults to `var(--spectrum-code-cjk-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-code-cjk-line-height": {
+      "description": "Used by `.spectrum-Code:lang(ja), .spectrum-Code:lang(ko), .spectrum-Code:lang(zh)`. <br/>Defaults to `var(--spectrum-code-cjk-line-height)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-code-cjk-letter-spacing": {
+      "description": "Used by `.spectrum-Code:lang(ja), .spectrum-Code:lang(ko), .spectrum-Code:lang(zh)`. <br/>Defaults to `var(--spectrum-code-cjk-letter-spacing)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-code-cjk-strong-font-style": {
+      "description": "Used by `.spectrum-Code:lang(ja) .spectrum-Code-strong, .spectrum-Code:lang(ja) strong, .spectrum-Code:lang(ko) .spectrum-Code-strong, .spectrum-Code:lang(ko) strong, .spectrum-Code:lang(zh) .spectrum-Code-strong, .spectrum-Code:lang(zh) strong`. <br/>Defaults to `var(--spectrum-code-cjk-strong-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-code-cjk-strong-font-weight": {
+      "description": "Used by `.spectrum-Code:lang(ja) .spectrum-Code-strong, .spectrum-Code:lang(ja) strong, .spectrum-Code:lang(ko) .spectrum-Code-strong, .spectrum-Code:lang(ko) strong, .spectrum-Code:lang(zh) .spectrum-Code-strong, .spectrum-Code:lang(zh) strong`. <br/>Defaults to `var(--spectrum-code-cjk-strong-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-code-cjk-emphasized-font-style": {
+      "description": "Used by `.spectrum-Code:lang(ja) .spectrum-Code-emphasized, .spectrum-Code:lang(ja) em, .spectrum-Code:lang(ko) .spectrum-Code-emphasized, .spectrum-Code:lang(ko) em, .spectrum-Code:lang(zh) .spectrum-Code-emphasized, .spectrum-Code:lang(zh) em`. <br/>Defaults to `var(--spectrum-code-cjk-emphasized-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-code-cjk-emphasized-font-weight": {
+      "description": "Used by `.spectrum-Code:lang(ja) .spectrum-Code-emphasized, .spectrum-Code:lang(ja) em, .spectrum-Code:lang(ko) .spectrum-Code-emphasized, .spectrum-Code:lang(ko) em, .spectrum-Code:lang(zh) .spectrum-Code-emphasized, .spectrum-Code:lang(zh) em`. <br/>Defaults to `var(--spectrum-code-cjk-emphasized-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-code-cjk-strong-emphasized-font-style": {
+      "description": "Used by `.spectrum-Code:lang(ja) .spectrum-Code-strong.spectrum-Code-emphasized, .spectrum-Code:lang(ja) em strong, .spectrum-Code:lang(ja) strong em, .spectrum-Code:lang(ko) .spectrum-Code-strong.spectrum-Code-emphasized, .spectrum-Code:lang(ko) em strong, .spectrum-Code:lang(ko) strong em, .spectrum-Code:lang(zh) .spectrum-Code-strong.spectrum-Code-emphasized, .spectrum-Code:lang(zh) em strong, .spectrum-Code:lang(zh) strong em`. <br/>Defaults to `var(--spectrum-code-cjk-strong-emphasized-font-style)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-code-cjk-strong-emphasized-font-weight": {
+      "description": "Used by `.spectrum-Code:lang(ja) .spectrum-Code-strong.spectrum-Code-emphasized, .spectrum-Code:lang(ja) em strong, .spectrum-Code:lang(ja) strong em, .spectrum-Code:lang(ko) .spectrum-Code-strong.spectrum-Code-emphasized, .spectrum-Code:lang(ko) em strong, .spectrum-Code:lang(ko) strong em, .spectrum-Code:lang(zh) .spectrum-Code-strong.spectrum-Code-emphasized, .spectrum-Code:lang(zh) em strong, .spectrum-Code:lang(zh) strong em`. <br/>Defaults to `var(--spectrum-code-cjk-strong-emphasized-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    }
+  },
+  "component": {},
+  "global": {
+    "spectrum-font-family": {
+      "description": "Used by `.spectrum-Typography`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-style": {
+      "description": "Used by `.spectrum-Typography`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-size": {
+      "description": "Used by `.spectrum-Typography`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-family-ar": {
+      "description": "Used by `.spectrum-Typography:lang(ar)`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-font-family-he": {
+      "description": "Used by `.spectrum-Typography:lang(he)`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-margin-start": {
+      "value": "calc(var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * var(--spectrum-heading-margin-top-multiplier))",
+      "description": "Defined in `.spectrum-Typography .spectrum-Heading`, `.spectrum-Heading`. <br/>Used by `.spectrum-Heading`. <br/>Defaults to `calc(var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * var(--spectrum-heading-margin-top-multiplier))`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-font-size": {
+      "value": "var(--spectrum-font-size-1300)",
+      "description": "Defined in `.spectrum-Heading, .spectrum-Heading--sizeM`, `.spectrum-Heading--sizeXXS`, `.spectrum-Heading--sizeXS`, `.spectrum-Heading--sizeS`, `.spectrum-Heading--sizeL`, `.spectrum-Heading--sizeXL`, `.spectrum-Heading--sizeXXL`, `.spectrum-Heading--sizeXXXL`. <br/>Used by `--spectrum-heading-margin-start`, `--spectrum-heading-margin-end`, `.spectrum-Heading`. <br/>Defaults to `var(--spectrum-heading-size-xxxl)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-margin-top-multiplier": {
+      "value": "0.88888889",
+      "description": "Used by `--spectrum-heading-margin-start`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-margin-end": {
+      "value": "calc(var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * var(--spectrum-heading-margin-bottom-multiplier))",
+      "description": "Defined in `.spectrum-Typography .spectrum-Heading`, `.spectrum-Heading`. <br/>Used by `.spectrum-Heading`. <br/>Defaults to `calc(var(--mod-heading-font-size, var(--spectrum-heading-font-size)) * var(--spectrum-heading-margin-bottom-multiplier))`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-margin-bottom-multiplier": {
+      "value": "0.25",
+      "description": "Used by `--spectrum-heading-margin-end`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-margin-end": {
+      "value": "calc(var(--mod-body-font-size, var(--spectrum-body-font-size)) * var(--spectrum-body-margin-multiplier))",
+      "description": "Defined in `.spectrum-Typography .spectrum-Body`. <br/>Used by `.spectrum-Body`. <br/>Defaults to `calc(var(--mod-body-font-size, var(--spectrum-body-font-size)) * var(--spectrum-body-margin-multiplier))`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-font-size": {
+      "value": "var(--spectrum-font-size-600)",
+      "description": "Defined in `.spectrum-Body, .spectrum-Body--sizeM`, `.spectrum-Body--sizeXS`, `.spectrum-Body--sizeS`, `.spectrum-Body--sizeL`, `.spectrum-Body--sizeXL`, `.spectrum-Body--sizeXXL`, `.spectrum-Body--sizeXXXL`. <br/>Used by `--spectrum-body-margin-end`, `.spectrum-Body`. <br/>Defaults to `var(--spectrum-body-size-xxxl)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-margin-multiplier": {
+      "value": "0.75",
+      "description": "Used by `--spectrum-body-margin-end`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-margin-start": {
+      "value": "calc(var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * var(--spectrum-detail-margin-top-multiplier))",
+      "description": "Defined in `.spectrum-Typography .spectrum-Detail`, `.spectrum-Detail`. <br/>Used by `.spectrum-Detail`. <br/>Defaults to `calc(var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * var(--spectrum-detail-margin-top-multiplier))`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-font-size": {
+      "value": "var(--spectrum-font-size-300)",
+      "description": "Defined in `.spectrum-Detail, .spectrum-Detail--sizeM`, `.spectrum-Detail--sizeS`, `.spectrum-Detail--sizeL`, `.spectrum-Detail--sizeXL`. <br/>Used by `--spectrum-detail-margin-start`, `--spectrum-detail-margin-end`, `.spectrum-Detail`. <br/>Defaults to `var(--spectrum-detail-size-xl)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-margin-top-multiplier": {
+      "value": "0.88888889",
+      "description": "Used by `--spectrum-detail-margin-start`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-margin-end": {
+      "value": "calc(var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * var(--spectrum-detail-margin-bottom-multiplier))",
+      "description": "Defined in `.spectrum-Typography .spectrum-Detail`, `.spectrum-Detail`. <br/>Used by `.spectrum-Detail`. <br/>Defaults to `calc(var(--mod-detail-font-size, var(--spectrum-detail-font-size)) * var(--spectrum-detail-margin-bottom-multiplier))`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-margin-bottom-multiplier": {
+      "value": "0.25",
+      "description": "Used by `--spectrum-detail-margin-end`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-size-m": {
+      "value": "var(--spectrum-font-size-500)",
+      "description": "Used by `--spectrum-heading-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-cjk-font-size": {
+      "value": "var(--spectrum-font-size-1200)",
+      "description": "Defined in `.spectrum-Heading, .spectrum-Heading--sizeM`, `.spectrum-Heading--sizeXXS`, `.spectrum-Heading--sizeXS`, `.spectrum-Heading--sizeS`, `.spectrum-Heading--sizeL`, `.spectrum-Heading--sizeXL`, `.spectrum-Heading--sizeXXL`, `.spectrum-Heading--sizeXXXL`. <br/>Used by `.spectrum-Heading:lang(ja), .spectrum-Heading:lang(ko), .spectrum-Heading:lang(zh)`. <br/>Defaults to `var(--spectrum-heading-cjk-size-xxxl)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-cjk-size-m": {
+      "value": "var(--spectrum-font-size-400)",
+      "description": "Used by `--spectrum-heading-cjk-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-size-xxs": {
+      "value": "var(--spectrum-font-size-100)",
+      "description": "Used by `--spectrum-heading-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-cjk-size-xxs": {
+      "value": "var(--spectrum-font-size-100)",
+      "description": "Used by `--spectrum-heading-cjk-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-size-xs": {
+      "value": "var(--spectrum-font-size-300)",
+      "description": "Used by `--spectrum-heading-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-cjk-size-xs": {
+      "value": "var(--spectrum-font-size-200)",
+      "description": "Used by `--spectrum-heading-cjk-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-size-s": {
+      "value": "var(--spectrum-font-size-400)",
+      "description": "Used by `--spectrum-heading-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-cjk-size-s": {
+      "value": "var(--spectrum-font-size-300)",
+      "description": "Used by `--spectrum-heading-cjk-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-size-l": {
+      "value": "var(--spectrum-font-size-700)",
+      "description": "Used by `--spectrum-heading-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-cjk-size-l": {
+      "value": "var(--spectrum-font-size-600)",
+      "description": "Used by `--spectrum-heading-cjk-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-size-xl": {
+      "value": "var(--spectrum-font-size-900)",
+      "description": "Used by `--spectrum-heading-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-cjk-size-xl": {
+      "value": "var(--spectrum-font-size-800)",
+      "description": "Used by `--spectrum-heading-cjk-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-size-xxl": {
+      "value": "var(--spectrum-font-size-1100)",
+      "description": "Used by `--spectrum-heading-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-cjk-size-xxl": {
+      "value": "var(--spectrum-font-size-1000)",
+      "description": "Used by `--spectrum-heading-cjk-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-size-xxxl": {
+      "value": "var(--spectrum-font-size-1300)",
+      "description": "Used by `--spectrum-heading-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-cjk-size-xxxl": {
+      "value": "var(--spectrum-font-size-1200)",
+      "description": "Used by `--spectrum-heading-cjk-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-sans-serif-font-family": {
+      "value": "Adobe Clean Spectrum VF",
+      "description": "Defined in `.spectrum-Heading`. <br/>Used by `.spectrum-Heading`. <br/>Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-sans-font-family-stack": {
+      "description": "Used by `--spectrum-heading-sans-serif-font-family`, `--spectrum-body-sans-serif-font-family`, `--spectrum-detail-sans-serif-font-family`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-serif-font-family": {
+      "value": "Adobe Clean Serif",
+      "description": "Defined in `.spectrum-Heading`. <br/>Used by `.spectrum-Heading--serif`. <br/>Defaults to `var(--spectrum-serif-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-serif-font-family-stack": {
+      "description": "Used by `--spectrum-heading-serif-font-family`, `--spectrum-body-serif-font-family`, `--spectrum-detail-serif-font-family`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-cjk-font-family": {
+      "value": "Adobe Clean Han",
+      "description": "Defined in `.spectrum-Heading`. <br/>Used by `.spectrum-Heading:lang(ja), .spectrum-Heading:lang(ko), .spectrum-Heading:lang(zh)`. <br/>Defaults to `var(--spectrum-cjk-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-cjk-font-family-stack": {
+      "description": "Used by `--spectrum-heading-cjk-font-family`, `--spectrum-body-cjk-font-family`, `--spectrum-detail-cjk-font-family`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-cjk-letter-spacing": {
+      "value": "0em",
+      "description": "Defined in `.spectrum-Heading`. <br/>Used by `.spectrum-Heading:lang(ja), .spectrum-Heading:lang(ko), .spectrum-Heading:lang(zh)`. <br/>Defaults to `var(--spectrum-cjk-letter-spacing)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-cjk-letter-spacing": {
+      "value": "0em",
+      "description": "Used by `--spectrum-heading-cjk-letter-spacing`, `--spectrum-body-cjk-letter-spacing`, `--spectrum-code-cjk-letter-spacing`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-font-color": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Defined in `.spectrum-Heading`. <br/>Used by `.spectrum-Heading`. <br/>Defaults to `var(--spectrum-heading-color)`, if not set.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-heading-color": {
+      "value": "var(--spectrum-gray-900)",
+      "description": "Used by `--spectrum-heading-font-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-heading-sans-serif-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Heading`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-sans-serif-font-weight": {
+      "value": "800",
+      "description": "Used by `.spectrum-Heading`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-line-height": {
+      "value": "1.3",
+      "description": "Used by `.spectrum-Heading`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-sans-serif-strong-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Heading .spectrum-Heading-strong, .spectrum-Heading strong`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-sans-serif-strong-font-weight": {
+      "value": "900",
+      "description": "Used by `.spectrum-Heading .spectrum-Heading-strong, .spectrum-Heading strong`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-sans-serif-emphasized-font-style": {
+      "value": "italic",
+      "description": "Used by `.spectrum-Heading .spectrum-Heading-emphasized, .spectrum-Heading em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-sans-serif-emphasized-font-weight": {
+      "value": "800",
+      "description": "Used by `.spectrum-Heading .spectrum-Heading-emphasized, .spectrum-Heading em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-sans-serif-strong-emphasized-font-style": {
+      "value": "italic",
+      "description": "Used by `.spectrum-Heading .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading em strong, .spectrum-Heading strong em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-sans-serif-strong-emphasized-font-weight": {
+      "value": "900",
+      "description": "Used by `.spectrum-Heading .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading em strong, .spectrum-Heading strong em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-cjk-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Heading:lang(ja), .spectrum-Heading:lang(ko), .spectrum-Heading:lang(zh)`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-cjk-font-weight": {
+      "value": "800",
+      "description": "Used by `.spectrum-Heading:lang(ja), .spectrum-Heading:lang(ko), .spectrum-Heading:lang(zh)`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-cjk-line-height": {
+      "value": "1.5",
+      "description": "Used by `.spectrum-Heading:lang(ja), .spectrum-Heading:lang(ko), .spectrum-Heading:lang(zh)`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-cjk-emphasized-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Heading:lang(ja) .spectrum-Heading-emphasized, .spectrum-Heading:lang(ja) em, .spectrum-Heading:lang(ko) .spectrum-Heading-emphasized, .spectrum-Heading:lang(ko) em, .spectrum-Heading:lang(zh) .spectrum-Heading-emphasized, .spectrum-Heading:lang(zh) em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-cjk-emphasized-font-weight": {
+      "value": "900",
+      "description": "Used by `.spectrum-Heading:lang(ja) .spectrum-Heading-emphasized, .spectrum-Heading:lang(ja) em, .spectrum-Heading:lang(ko) .spectrum-Heading-emphasized, .spectrum-Heading:lang(ko) em, .spectrum-Heading:lang(zh) .spectrum-Heading-emphasized, .spectrum-Heading:lang(zh) em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-cjk-strong-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Heading:lang(ja) .spectrum-Heading-strong, .spectrum-Heading:lang(ja) strong, .spectrum-Heading:lang(ko) .spectrum-Heading-strong, .spectrum-Heading:lang(ko) strong, .spectrum-Heading:lang(zh) .spectrum-Heading-strong, .spectrum-Heading:lang(zh) strong`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-cjk-strong-font-weight": {
+      "value": "900",
+      "description": "Used by `.spectrum-Heading:lang(ja) .spectrum-Heading-strong, .spectrum-Heading:lang(ja) strong, .spectrum-Heading:lang(ko) .spectrum-Heading-strong, .spectrum-Heading:lang(ko) strong, .spectrum-Heading:lang(zh) .spectrum-Heading-strong, .spectrum-Heading:lang(zh) strong`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-cjk-strong-emphasized-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Heading:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading:lang(ja) em strong, .spectrum-Heading:lang(ja) strong em, .spectrum-Heading:lang(ko) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading:lang(ko) em strong, .spectrum-Heading:lang(ko) strong em, .spectrum-Heading:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading:lang(zh) em strong, .spectrum-Heading:lang(zh) strong em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-cjk-strong-emphasized-font-weight": {
+      "value": "900",
+      "description": "Used by `.spectrum-Heading:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading:lang(ja) em strong, .spectrum-Heading:lang(ja) strong em, .spectrum-Heading:lang(ko) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading:lang(ko) em strong, .spectrum-Heading:lang(ko) strong em, .spectrum-Heading:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading:lang(zh) em strong, .spectrum-Heading:lang(zh) strong em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-sans-serif-heavy-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Heading--heavy`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-sans-serif-heavy-font-weight": {
+      "value": "900",
+      "description": "Used by `.spectrum-Heading--heavy`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-sans-serif-heavy-strong-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Heading--heavy .spectrum-Heading-strong, .spectrum-Heading--heavy strong`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-sans-serif-heavy-strong-font-weight": {
+      "value": "900",
+      "description": "Used by `.spectrum-Heading--heavy .spectrum-Heading-strong, .spectrum-Heading--heavy strong`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-sans-serif-heavy-emphasized-font-style": {
+      "value": "italic",
+      "description": "Used by `.spectrum-Heading--heavy .spectrum-Heading-emphasized, .spectrum-Heading--heavy em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-sans-serif-heavy-emphasized-font-weight": {
+      "value": "900",
+      "description": "Used by `.spectrum-Heading--heavy .spectrum-Heading-emphasized, .spectrum-Heading--heavy em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-sans-serif-heavy-strong-emphasized-font-style": {
+      "value": "italic",
+      "description": "Used by `.spectrum-Heading--heavy .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy em strong, .spectrum-Heading--heavy strong em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-sans-serif-heavy-strong-emphasized-font-weight": {
+      "value": "900",
+      "description": "Used by `.spectrum-Heading--heavy .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy em strong, .spectrum-Heading--heavy strong em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-cjk-heavy-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Heading--heavy:lang(ja), .spectrum-Heading--heavy:lang(ko), .spectrum-Heading--heavy:lang(zh)`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-cjk-heavy-font-weight": {
+      "value": "800",
+      "description": "Used by `.spectrum-Heading--heavy:lang(ja), .spectrum-Heading--heavy:lang(ko), .spectrum-Heading--heavy:lang(zh)`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-cjk-heavy-emphasized-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Heading--heavy:lang(ja) .spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(ja) em, .spectrum-Heading--heavy:lang(ko) .spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(ko) em, .spectrum-Heading--heavy:lang(zh) .spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(zh) em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-cjk-heavy-emphasized-font-weight": {
+      "value": "900",
+      "description": "Used by `.spectrum-Heading--heavy:lang(ja) .spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(ja) em, .spectrum-Heading--heavy:lang(ko) .spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(ko) em, .spectrum-Heading--heavy:lang(zh) .spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(zh) em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-cjk-heavy-strong-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Heading--heavy:lang(ja) .spectrum-Heading-strong, .spectrum-Heading--heavy:lang(ja) strong, .spectrum-Heading--heavy:lang(ko) .spectrum-Heading-strong, .spectrum-Heading--heavy:lang(ko) strong, .spectrum-Heading--heavy:lang(zh) .spectrum-Heading-strong, .spectrum-Heading--heavy:lang(zh) strong`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-cjk-heavy-strong-font-weight": {
+      "value": "900",
+      "description": "Used by `.spectrum-Heading--heavy:lang(ja) .spectrum-Heading-strong, .spectrum-Heading--heavy:lang(ja) strong, .spectrum-Heading--heavy:lang(ko) .spectrum-Heading-strong, .spectrum-Heading--heavy:lang(ko) strong, .spectrum-Heading--heavy:lang(zh) .spectrum-Heading-strong, .spectrum-Heading--heavy:lang(zh) strong`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-cjk-heavy-strong-emphasized-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Heading--heavy:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(ja) em strong, .spectrum-Heading--heavy:lang(ja) strong em, .spectrum-Heading--heavy:lang(ko) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(ko) em strong, .spectrum-Heading--heavy:lang(ko) strong em, .spectrum-Heading--heavy:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(zh) em strong, .spectrum-Heading--heavy:lang(zh) strong em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-cjk-heavy-strong-emphasized-font-weight": {
+      "value": "900",
+      "description": "Used by `.spectrum-Heading--heavy:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(ja) em strong, .spectrum-Heading--heavy:lang(ja) strong em, .spectrum-Heading--heavy:lang(ko) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(ko) em strong, .spectrum-Heading--heavy:lang(ko) strong em, .spectrum-Heading--heavy:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--heavy:lang(zh) em strong, .spectrum-Heading--heavy:lang(zh) strong em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-sans-serif-light-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Heading--light`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-sans-serif-light-font-weight": {
+      "value": "300",
+      "description": "Used by `.spectrum-Heading--light`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-sans-serif-light-emphasized-font-style": {
+      "value": "italic",
+      "description": "Used by `.spectrum-Heading--light .spectrum-Heading-emphasized, .spectrum-Heading--light em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-sans-serif-light-emphasized-font-weight": {
+      "value": "300",
+      "description": "Used by `.spectrum-Heading--light .spectrum-Heading-emphasized, .spectrum-Heading--light em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-sans-serif-light-strong-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Heading--light .spectrum-Heading-strong, .spectrum-Heading--light strong`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-sans-serif-light-strong-font-weight": {
+      "value": "700",
+      "description": "Used by `.spectrum-Heading--light .spectrum-Heading-strong, .spectrum-Heading--light strong`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-sans-serif-light-strong-emphasized-font-style": {
+      "value": "italic",
+      "description": "Used by `.spectrum-Heading--light .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light em strong, .spectrum-Heading--light strong em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-sans-serif-light-strong-emphasized-font-weight": {
+      "value": "700",
+      "description": "Used by `.spectrum-Heading--light .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light em strong, .spectrum-Heading--light strong em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-cjk-light-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Heading--light:lang(ja), .spectrum-Heading--light:lang(ko), .spectrum-Heading--light:lang(zh)`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-cjk-light-font-weight": {
+      "value": "300",
+      "description": "Used by `.spectrum-Heading--light:lang(ja), .spectrum-Heading--light:lang(ko), .spectrum-Heading--light:lang(zh)`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-cjk-light-strong-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Heading--light:lang(ja) .spectrum-Heading-strong, .spectrum-Heading--light:lang(ja) strong, .spectrum-Heading--light:lang(ko) .spectrum-Heading-strong, .spectrum-Heading--light:lang(ko) strong, .spectrum-Heading--light:lang(zh) .spectrum-Heading-strong, .spectrum-Heading--light:lang(zh) strong`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-cjk-light-strong-font-weight": {
+      "value": "800",
+      "description": "Used by `.spectrum-Heading--light:lang(ja) .spectrum-Heading-strong, .spectrum-Heading--light:lang(ja) strong, .spectrum-Heading--light:lang(ko) .spectrum-Heading-strong, .spectrum-Heading--light:lang(ko) strong, .spectrum-Heading--light:lang(zh) .spectrum-Heading-strong, .spectrum-Heading--light:lang(zh) strong`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-cjk-light-emphasized-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Heading--light:lang(ja) .spectrum-Heading-emphasized, .spectrum-Heading--light:lang(ja) em, .spectrum-Heading--light:lang(ko) .spectrum-Heading-emphasized, .spectrum-Heading--light:lang(ko) em, .spectrum-Heading--light:lang(zh) .spectrum-Heading-emphasized, .spectrum-Heading--light:lang(zh) em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-cjk-light-emphasized-font-weight": {
+      "value": "400",
+      "description": "Used by `.spectrum-Heading--light:lang(ja) .spectrum-Heading-emphasized, .spectrum-Heading--light:lang(ja) em, .spectrum-Heading--light:lang(ko) .spectrum-Heading-emphasized, .spectrum-Heading--light:lang(ko) em, .spectrum-Heading--light:lang(zh) .spectrum-Heading-emphasized, .spectrum-Heading--light:lang(zh) em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-cjk-light-strong-emphasized-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Heading--light:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light:lang(ja) em strong, .spectrum-Heading--light:lang(ja) strong em, .spectrum-Heading--light:lang(ko) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light:lang(ko) em strong, .spectrum-Heading--light:lang(ko) strong em, .spectrum-Heading--light:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light:lang(zh) em strong, .spectrum-Heading--light:lang(zh) strong em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-cjk-light-strong-emphasized-font-weight": {
+      "value": "800",
+      "description": "Used by `.spectrum-Heading--light:lang(ja) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light:lang(ja) em strong, .spectrum-Heading--light:lang(ja) strong em, .spectrum-Heading--light:lang(ko) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light:lang(ko) em strong, .spectrum-Heading--light:lang(ko) strong em, .spectrum-Heading--light:lang(zh) .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--light:lang(zh) em strong, .spectrum-Heading--light:lang(zh) strong em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-serif-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Heading--serif`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-serif-font-weight": {
+      "value": "700",
+      "description": "Used by `.spectrum-Heading--serif`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-serif-emphasized-font-style": {
+      "value": "italic",
+      "description": "Used by `.spectrum-Heading--serif .spectrum-Heading-emphasized, .spectrum-Heading--serif em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-serif-emphasized-font-weight": {
+      "value": "700",
+      "description": "Used by `.spectrum-Heading--serif .spectrum-Heading-emphasized, .spectrum-Heading--serif em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-serif-strong-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Heading--serif .spectrum-Heading-strong, .spectrum-Heading--serif strong`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-serif-strong-font-weight": {
+      "value": "900",
+      "description": "Used by `.spectrum-Heading--serif .spectrum-Heading-strong, .spectrum-Heading--serif strong`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-serif-strong-emphasized-font-style": {
+      "value": "italic",
+      "description": "Used by `.spectrum-Heading--serif .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--serif em strong, .spectrum-Heading--serif strong em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-serif-strong-emphasized-font-weight": {
+      "value": "900",
+      "description": "Used by `.spectrum-Heading--serif .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--serif em strong, .spectrum-Heading--serif strong em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-serif-heavy-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Heading--serif.spectrum-Heading--heavy`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-serif-heavy-font-weight": {
+      "value": "900",
+      "description": "Used by `.spectrum-Heading--serif.spectrum-Heading--heavy`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-serif-heavy-strong-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-strong, .spectrum-Heading--serif.spectrum-Heading--heavy strong`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-serif-heavy-strong-font-weight": {
+      "value": "900",
+      "description": "Used by `.spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-strong, .spectrum-Heading--serif.spectrum-Heading--heavy strong`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-serif-heavy-emphasized-font-style": {
+      "value": "italic",
+      "description": "Used by `.spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-emphasized, .spectrum-Heading--serif.spectrum-Heading--heavy em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-serif-heavy-emphasized-font-weight": {
+      "value": "900",
+      "description": "Used by `.spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-emphasized, .spectrum-Heading--serif.spectrum-Heading--heavy em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-serif-heavy-strong-emphasized-font-style": {
+      "value": "italic",
+      "description": "Used by `.spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--serif.spectrum-Heading--heavy em strong, .spectrum-Heading--serif.spectrum-Heading--heavy strong em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-serif-heavy-strong-emphasized-font-weight": {
+      "value": "900",
+      "description": "Used by `.spectrum-Heading--serif.spectrum-Heading--heavy .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--serif.spectrum-Heading--heavy em strong, .spectrum-Heading--serif.spectrum-Heading--heavy strong em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-serif-light-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Heading--serif.spectrum-Heading--light`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-serif-light-font-weight": {
+      "value": "400",
+      "description": "Used by `.spectrum-Heading--serif.spectrum-Heading--light`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-serif-light-emphasized-font-style": {
+      "value": "italic",
+      "description": "Used by `.spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-emphasized, .spectrum-Heading--serif.spectrum-Heading--light em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-serif-light-emphasized-font-weight": {
+      "value": "400",
+      "description": "Used by `.spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-emphasized, .spectrum-Heading--serif.spectrum-Heading--light em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-serif-light-strong-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-strong, .spectrum-Heading--serif.spectrum-Heading--light strong`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-serif-light-strong-font-weight": {
+      "value": "700",
+      "description": "Used by `.spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-strong, .spectrum-Heading--serif.spectrum-Heading--light strong`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-serif-light-strong-emphasized-font-style": {
+      "value": "italic",
+      "description": "Used by `.spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--serif.spectrum-Heading--light em strong, .spectrum-Heading--serif.spectrum-Heading--light strong em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-heading-serif-light-strong-emphasized-font-weight": {
+      "value": "700",
+      "description": "Used by `.spectrum-Heading--serif.spectrum-Heading--light .spectrum-Heading-strong.spectrum-Heading-emphasized, .spectrum-Heading--serif.spectrum-Heading--light em strong, .spectrum-Heading--serif.spectrum-Heading--light strong em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-size-m": {
+      "value": "var(--spectrum-font-size-200)",
+      "description": "Used by `--spectrum-body-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-size-xs": {
+      "value": "var(--spectrum-font-size-75)",
+      "description": "Used by `--spectrum-body-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-size-s": {
+      "value": "var(--spectrum-font-size-100)",
+      "description": "Used by `--spectrum-body-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-size-l": {
+      "value": "var(--spectrum-font-size-300)",
+      "description": "Used by `--spectrum-body-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-size-xl": {
+      "value": "var(--spectrum-font-size-400)",
+      "description": "Used by `--spectrum-body-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-size-xxl": {
+      "value": "var(--spectrum-font-size-500)",
+      "description": "Used by `--spectrum-body-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-size-xxxl": {
+      "value": "var(--spectrum-font-size-600)",
+      "description": "Used by `--spectrum-body-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-sans-serif-font-family": {
+      "value": "Adobe Clean Spectrum VF",
+      "description": "Defined in `.spectrum-Body`. <br/>Used by `.spectrum-Body`. <br/>Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-serif-font-family": {
+      "value": "Adobe Clean Serif",
+      "description": "Defined in `.spectrum-Body`. <br/>Used by `.spectrum-Body--serif`. <br/>Defaults to `var(--spectrum-serif-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-cjk-font-family": {
+      "value": "Adobe Clean Han",
+      "description": "Defined in `.spectrum-Body`. <br/>Used by `.spectrum-Body:lang(ja), .spectrum-Body:lang(ko), .spectrum-Body:lang(zh)`. <br/>Defaults to `var(--spectrum-cjk-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-cjk-letter-spacing": {
+      "value": "0em",
+      "description": "Defined in `.spectrum-Body`. <br/>Used by `.spectrum-Body:lang(ja), .spectrum-Body:lang(ko), .spectrum-Body:lang(zh)`. <br/>Defaults to `var(--spectrum-cjk-letter-spacing)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-font-color": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-Body`. <br/>Used by `.spectrum-Body`. <br/>Defaults to `var(--spectrum-body-color)`, if not set.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-body-color": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-body-font-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-body-sans-serif-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Body`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-sans-serif-font-weight": {
+      "value": "400",
+      "description": "Used by `.spectrum-Body`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-line-height": {
+      "value": "1.5",
+      "description": "Used by `.spectrum-Body`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-sans-serif-strong-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Body .spectrum-Body-strong, .spectrum-Body strong`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-sans-serif-strong-font-weight": {
+      "value": "700",
+      "description": "Used by `.spectrum-Body .spectrum-Body-strong, .spectrum-Body strong`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-sans-serif-emphasized-font-style": {
+      "value": "italic",
+      "description": "Used by `.spectrum-Body .spectrum-Body-emphasized, .spectrum-Body em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-sans-serif-emphasized-font-weight": {
+      "value": "400",
+      "description": "Used by `.spectrum-Body .spectrum-Body-emphasized, .spectrum-Body em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-sans-serif-strong-emphasized-font-style": {
+      "value": "italic",
+      "description": "Used by `.spectrum-Body .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body em strong, .spectrum-Body strong em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-sans-serif-strong-emphasized-font-weight": {
+      "value": "700",
+      "description": "Used by `.spectrum-Body .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body em strong, .spectrum-Body strong em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-cjk-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Body:lang(ja), .spectrum-Body:lang(ko), .spectrum-Body:lang(zh)`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-cjk-font-weight": {
+      "value": "400",
+      "description": "Used by `.spectrum-Body:lang(ja), .spectrum-Body:lang(ko), .spectrum-Body:lang(zh)`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-cjk-line-height": {
+      "value": "1.7",
+      "description": "Used by `.spectrum-Body:lang(ja), .spectrum-Body:lang(ko), .spectrum-Body:lang(zh)`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-cjk-strong-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Body:lang(ja) .spectrum-Body-strong, .spectrum-Body:lang(ja) strong, .spectrum-Body:lang(ko) .spectrum-Body-strong, .spectrum-Body:lang(ko) strong, .spectrum-Body:lang(zh) .spectrum-Body-strong, .spectrum-Body:lang(zh) strong`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-cjk-strong-font-weight": {
+      "value": "800",
+      "description": "Used by `.spectrum-Body:lang(ja) .spectrum-Body-strong, .spectrum-Body:lang(ja) strong, .spectrum-Body:lang(ko) .spectrum-Body-strong, .spectrum-Body:lang(ko) strong, .spectrum-Body:lang(zh) .spectrum-Body-strong, .spectrum-Body:lang(zh) strong`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-cjk-emphasized-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Body:lang(ja) .spectrum-Body-emphasized, .spectrum-Body:lang(ja) em, .spectrum-Body:lang(ko) .spectrum-Body-emphasized, .spectrum-Body:lang(ko) em, .spectrum-Body:lang(zh) .spectrum-Body-emphasized, .spectrum-Body:lang(zh) em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-cjk-emphasized-font-weight": {
+      "value": "800",
+      "description": "Used by `.spectrum-Body:lang(ja) .spectrum-Body-emphasized, .spectrum-Body:lang(ja) em, .spectrum-Body:lang(ko) .spectrum-Body-emphasized, .spectrum-Body:lang(ko) em, .spectrum-Body:lang(zh) .spectrum-Body-emphasized, .spectrum-Body:lang(zh) em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-cjk-strong-emphasized-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Body:lang(ja) .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body:lang(ja) em strong, .spectrum-Body:lang(ja) strong em, .spectrum-Body:lang(ko) .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body:lang(ko) em strong, .spectrum-Body:lang(ko) strong em, .spectrum-Body:lang(zh) .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body:lang(zh) em strong, .spectrum-Body:lang(zh) strong em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-cjk-strong-emphasized-font-weight": {
+      "value": "800",
+      "description": "Used by `.spectrum-Body:lang(ja) .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body:lang(ja) em strong, .spectrum-Body:lang(ja) strong em, .spectrum-Body:lang(ko) .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body:lang(ko) em strong, .spectrum-Body:lang(ko) strong em, .spectrum-Body:lang(zh) .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body:lang(zh) em strong, .spectrum-Body:lang(zh) strong em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-serif-font-weight": {
+      "value": "400",
+      "description": "Used by `.spectrum-Body--serif`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-serif-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Body--serif`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-serif-strong-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Body--serif .spectrum-Body-strong, .spectrum-Body--serif strong`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-serif-strong-font-weight": {
+      "value": "700",
+      "description": "Used by `.spectrum-Body--serif .spectrum-Body-strong, .spectrum-Body--serif strong`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-serif-emphasized-font-style": {
+      "value": "italic",
+      "description": "Used by `.spectrum-Body--serif .spectrum-Body-emphasized, .spectrum-Body--serif em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-serif-emphasized-font-weight": {
+      "value": "400",
+      "description": "Used by `.spectrum-Body--serif .spectrum-Body-emphasized, .spectrum-Body--serif em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-serif-strong-emphasized-font-style": {
+      "value": "italic",
+      "description": "Used by `.spectrum-Body--serif .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body--serif em strong, .spectrum-Body--serif strong em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-serif-strong-emphasized-font-weight": {
+      "value": "700",
+      "description": "Used by `.spectrum-Body--serif .spectrum-Body-strong.spectrum-Body-emphasized, .spectrum-Body--serif em strong, .spectrum-Body--serif strong em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-size-m": {
+      "value": "var(--spectrum-font-size-100)",
+      "description": "Used by `--spectrum-detail-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-size-s": {
+      "value": "var(--spectrum-font-size-75)",
+      "description": "Used by `--spectrum-detail-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-size-l": {
+      "value": "var(--spectrum-font-size-200)",
+      "description": "Used by `--spectrum-detail-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-size-xl": {
+      "value": "var(--spectrum-font-size-300)",
+      "description": "Used by `--spectrum-detail-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-sans-serif-font-family": {
+      "value": "Adobe Clean Spectrum VF",
+      "description": "Defined in `.spectrum-Detail`. <br/>Used by `.spectrum-Detail`. <br/>Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-serif-font-family": {
+      "value": "Adobe Clean Serif",
+      "description": "Defined in `.spectrum-Detail`. <br/>Used by `.spectrum-Detail--serif`. <br/>Defaults to `var(--spectrum-serif-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-cjk-font-family": {
+      "value": "Adobe Clean Han",
+      "description": "Defined in `.spectrum-Detail`. <br/>Used by `.spectrum-Detail:lang(ja), .spectrum-Detail:lang(ko), .spectrum-Detail:lang(zh)`. <br/>Defaults to `var(--spectrum-cjk-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-font-color": {
+      "value": "var(--spectrum-gray-600)",
+      "description": "Defined in `.spectrum-Detail`. <br/>Used by `.spectrum-Detail`. <br/>Defaults to `var(--spectrum-detail-color)`, if not set.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-detail-color": {
+      "value": "var(--spectrum-gray-600)",
+      "description": "Used by `--spectrum-detail-font-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-detail-sans-serif-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Detail`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-sans-serif-font-weight": {
+      "value": "500",
+      "description": "Used by `.spectrum-Detail`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-line-height": {
+      "value": "1.3",
+      "description": "Used by `.spectrum-Detail`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-letter-spacing": {
+      "value": "0.06em",
+      "description": "Used by `.spectrum-Detail`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-sans-serif-strong-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Detail .spectrum-Detail-strong, .spectrum-Detail strong`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-sans-serif-strong-font-weight": {
+      "value": "700",
+      "description": "Used by `.spectrum-Detail .spectrum-Detail-strong, .spectrum-Detail strong`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-sans-serif-emphasized-font-style": {
+      "value": "italic",
+      "description": "Used by `.spectrum-Detail .spectrum-Detail-emphasized, .spectrum-Detail em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-sans-serif-emphasized-font-weight": {
+      "value": "400",
+      "description": "Used by `.spectrum-Detail .spectrum-Detail-emphasized, .spectrum-Detail em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-sans-serif-strong-emphasized-font-style": {
+      "value": "italic",
+      "description": "Used by `.spectrum-Detail .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail em strong, .spectrum-Detail strong em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-sans-serif-strong-emphasized-font-weight": {
+      "value": "700",
+      "description": "Used by `.spectrum-Detail .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail em strong, .spectrum-Detail strong em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-cjk-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Detail:lang(ja), .spectrum-Detail:lang(ko), .spectrum-Detail:lang(zh)`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-cjk-font-weight": {
+      "value": "700",
+      "description": "Used by `.spectrum-Detail:lang(ja), .spectrum-Detail:lang(ko), .spectrum-Detail:lang(zh)`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-cjk-line-height": {
+      "value": "1.5",
+      "description": "Used by `.spectrum-Detail:lang(ja), .spectrum-Detail:lang(ko), .spectrum-Detail:lang(zh)`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-cjk-strong-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Detail:lang(ja) .spectrum-Detail-strong, .spectrum-Detail:lang(ja) strong, .spectrum-Detail:lang(ko) .spectrum-Detail-strong, .spectrum-Detail:lang(ko) strong, .spectrum-Detail:lang(zh) .spectrum-Detail-strong, .spectrum-Detail:lang(zh) strong`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-cjk-strong-font-weight": {
+      "value": "800",
+      "description": "Used by `.spectrum-Detail:lang(ja) .spectrum-Detail-strong, .spectrum-Detail:lang(ja) strong, .spectrum-Detail:lang(ko) .spectrum-Detail-strong, .spectrum-Detail:lang(ko) strong, .spectrum-Detail:lang(zh) .spectrum-Detail-strong, .spectrum-Detail:lang(zh) strong`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-cjk-emphasized-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Detail:lang(ja) .spectrum-Detail-emphasized, .spectrum-Detail:lang(ja) em, .spectrum-Detail:lang(ko) .spectrum-Detail-emphasized, .spectrum-Detail:lang(ko) em, .spectrum-Detail:lang(zh) .spectrum-Detail-emphasized, .spectrum-Detail:lang(zh) em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-cjk-emphasized-font-weight": {
+      "value": "800",
+      "description": "Used by `.spectrum-Detail:lang(ja) .spectrum-Detail-emphasized, .spectrum-Detail:lang(ja) em, .spectrum-Detail:lang(ko) .spectrum-Detail-emphasized, .spectrum-Detail:lang(ko) em, .spectrum-Detail:lang(zh) .spectrum-Detail-emphasized, .spectrum-Detail:lang(zh) em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-cjk-strong-emphasized-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Detail:lang(ja) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail:lang(ja) em strong, .spectrum-Detail:lang(ja) strong em, .spectrum-Detail:lang(ko) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail:lang(ko) em strong, .spectrum-Detail:lang(ko) strong em, .spectrum-Detail:lang(zh) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail:lang(zh) em strong, .spectrum-Detail:lang(zh) strong em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-cjk-strong-emphasized-font-weight": {
+      "value": "800",
+      "description": "Used by `.spectrum-Detail:lang(ja) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail:lang(ja) em strong, .spectrum-Detail:lang(ja) strong em, .spectrum-Detail:lang(ko) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail:lang(ko) em strong, .spectrum-Detail:lang(ko) strong em, .spectrum-Detail:lang(zh) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail:lang(zh) em strong, .spectrum-Detail:lang(zh) strong em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-serif-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Detail--serif`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-serif-font-weight": {
+      "value": "500",
+      "description": "Used by `.spectrum-Detail--serif`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-serif-strong-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Detail--serif .spectrum-Detail-strong, .spectrum-Detail--serif strong`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-serif-strong-font-weight": {
+      "value": "700",
+      "description": "Used by `.spectrum-Detail--serif .spectrum-Detail-strong, .spectrum-Detail--serif strong`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-serif-emphasized-font-style": {
+      "value": "italic",
+      "description": "Used by `.spectrum-Detail--serif .spectrum-Detail-emphasized, .spectrum-Detail--serif em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-serif-emphasized-font-weight": {
+      "value": "500",
+      "description": "Used by `.spectrum-Detail--serif .spectrum-Detail-emphasized, .spectrum-Detail--serif em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-serif-strong-emphasized-font-style": {
+      "value": "italic",
+      "description": "Used by `.spectrum-Detail--serif .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail--serif em strong, .spectrum-Detail--serif strong em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-serif-strong-emphasized-font-weight": {
+      "value": "700",
+      "description": "Used by `.spectrum-Detail--serif .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail--serif em strong, .spectrum-Detail--serif strong em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-sans-serif-light-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Detail--light`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-sans-serif-light-font-weight": {
+      "value": "400",
+      "description": "Used by `.spectrum-Detail--light`. <br/>Defaults to `var(--spectrum-detail-sans-serif-light-font-weight)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-sans-serif-light-strong-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Detail--light .spectrum-Detail-strong, .spectrum-Detail--light strong`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-sans-serif-light-strong-font-weight": {
+      "value": "400",
+      "description": "Used by `.spectrum-Detail--light .spectrum-Detail-strong, .spectrum-Detail--light strong`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-sans-serif-light-emphasized-font-style": {
+      "value": "italic",
+      "description": "Used by `.spectrum-Detail--light .spectrum-Detail-emphasized, .spectrum-Detail--light em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-sans-serif-light-emphasized-font-weight": {
+      "value": "400",
+      "description": "Used by `.spectrum-Detail--light .spectrum-Detail-emphasized, .spectrum-Detail--light em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-sans-serif-light-strong-emphasized-font-style": {
+      "value": "italic",
+      "description": "Used by `.spectrum-Detail--light .spectrum-Detail-strong.spectrum-Body-emphasized, .spectrum-Detail--light em strong, .spectrum-Detail--light strong em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-sans-serif-light-strong-emphasized-font-weight": {
+      "value": "400",
+      "description": "Used by `.spectrum-Detail--light .spectrum-Detail-strong.spectrum-Body-emphasized, .spectrum-Detail--light em strong, .spectrum-Detail--light strong em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-cjk-light-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Detail--light:lang(ja), .spectrum-Detail--light:lang(ko), .spectrum-Detail--light:lang(zh)`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-cjk-light-font-weight": {
+      "value": "300",
+      "description": "Used by `.spectrum-Detail--light:lang(ja), .spectrum-Detail--light:lang(ko), .spectrum-Detail--light:lang(zh)`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-cjk-light-strong-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Detail--light:lang(ja) .spectrum-Detail-strong, .spectrum-Detail--light:lang(ja) strong, .spectrum-Detail--light:lang(ko) .spectrum-Detail-strong, .spectrum-Detail--light:lang(ko) strong, .spectrum-Detail--light:lang(zh) .spectrum-Detail-strong, .spectrum-Detail--light:lang(zh) strong`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-cjk-light-strong-font-weight": {
+      "value": "800",
+      "description": "Used by `.spectrum-Detail--light:lang(ja) .spectrum-Detail-strong, .spectrum-Detail--light:lang(ja) strong, .spectrum-Detail--light:lang(ko) .spectrum-Detail-strong, .spectrum-Detail--light:lang(ko) strong, .spectrum-Detail--light:lang(zh) .spectrum-Detail-strong, .spectrum-Detail--light:lang(zh) strong`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-cjk-light-emphasized-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Detail--light:lang(ja) .spectrum-Detail-emphasized, .spectrum-Detail--light:lang(ja) em, .spectrum-Detail--light:lang(ko) .spectrum-Detail-emphasized, .spectrum-Detail--light:lang(ko) em, .spectrum-Detail--light:lang(zh) .spectrum-Detail-emphasized, .spectrum-Detail--light:lang(zh) em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-cjk-light-emphasized-font-weight": {
+      "value": "400",
+      "description": "Used by `.spectrum-Detail--light:lang(ja) .spectrum-Detail-emphasized, .spectrum-Detail--light:lang(ja) em, .spectrum-Detail--light:lang(ko) .spectrum-Detail-emphasized, .spectrum-Detail--light:lang(ko) em, .spectrum-Detail--light:lang(zh) .spectrum-Detail-emphasized, .spectrum-Detail--light:lang(zh) em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-cjk-light-strong-emphasized-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Detail--light:lang(ja) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail--light:lang(ko) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail--light:lang(zh) .spectrum-Detail-strong.spectrum-Detail-emphasized`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-cjk-light-strong-emphasized-font-weight": {
+      "value": "800",
+      "description": "Used by `.spectrum-Detail--light:lang(ja) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail--light:lang(ko) .spectrum-Detail-strong.spectrum-Detail-emphasized, .spectrum-Detail--light:lang(zh) .spectrum-Detail-strong.spectrum-Detail-emphasized`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-serif-light-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Detail--serif.spectrum-Detail--light`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-serif-light-font-weight": {
+      "value": "400",
+      "description": "Used by `.spectrum-Detail--serif.spectrum-Detail--light`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-serif-light-strong-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-strong, .spectrum-Detail--serif.spectrum-Detail--light strong`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-serif-light-strong-font-weight": {
+      "value": "400",
+      "description": "Used by `.spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-strong, .spectrum-Detail--serif.spectrum-Detail--light strong`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-serif-light-emphasized-font-style": {
+      "value": "italic",
+      "description": "Used by `.spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-emphasized, .spectrum-Detail--serif.spectrum-Detail--light em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-serif-light-emphasized-font-weight": {
+      "value": "400",
+      "description": "Used by `.spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-emphasized, .spectrum-Detail--serif.spectrum-Detail--light em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-serif-light-strong-emphasized-font-style": {
+      "value": "italic",
+      "description": "Used by `.spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-strong.spectrum-Body-emphasized, .spectrum-Detail--serif.spectrum-Detail--light em strong, .spectrum-Detail--serif.spectrum-Detail--light strong em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-detail-serif-light-strong-emphasized-font-weight": {
+      "value": "400",
+      "description": "Used by `.spectrum-Detail--serif.spectrum-Detail--light .spectrum-Detail-strong.spectrum-Body-emphasized, .spectrum-Detail--serif.spectrum-Detail--light em strong, .spectrum-Detail--serif.spectrum-Detail--light strong em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-code-font-size": {
+      "value": "var(--spectrum-font-size-400)",
+      "description": "Defined in `.spectrum-Code, .spectrum-Code--sizeM`, `.spectrum-Code--sizeXS`, `.spectrum-Code--sizeS`, `.spectrum-Code--sizeL`, `.spectrum-Code--sizeXL`. <br/>Used by `.spectrum-Code`. <br/>Defaults to `var(--spectrum-code-size-xl)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-code-size-m": {
+      "value": "var(--spectrum-font-size-200)",
+      "description": "Used by `--spectrum-code-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-code-size-xs": {
+      "value": "var(--spectrum-font-size-75)",
+      "description": "Used by `--spectrum-code-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-code-size-s": {
+      "value": "var(--spectrum-font-size-100)",
+      "description": "Used by `--spectrum-code-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-code-size-l": {
+      "value": "var(--spectrum-font-size-300)",
+      "description": "Used by `--spectrum-code-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-code-size-xl": {
+      "value": "var(--spectrum-font-size-400)",
+      "description": "Used by `--spectrum-code-font-size`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-code-font-family": {
+      "value": "Source Code Pro",
+      "description": "Defined in `.spectrum-Code`. <br/>Used by `.spectrum-Code`. <br/>Defaults to `var(--spectrum-code-font-family-stack)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-code-font-family-stack": {
+      "description": "Used by `--spectrum-code-font-family`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-code-cjk-letter-spacing": {
+      "value": "0em",
+      "description": "Defined in `.spectrum-Code`. <br/>Used by `.spectrum-Code:lang(ja), .spectrum-Code:lang(ko), .spectrum-Code:lang(zh)`. <br/>Defaults to `var(--spectrum-cjk-letter-spacing)`, if not set.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-code-font-color": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-Code`. <br/>Used by `.spectrum-Code`. <br/>Defaults to `var(--spectrum-code-color)`, if not set.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-code-color": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-code-font-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-code-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Code`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-code-font-weight": {
+      "value": "400",
+      "description": "Used by `.spectrum-Code`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-code-line-height": {
+      "value": "1.5",
+      "description": "Used by `.spectrum-Code`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-code-strong-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Code .spectrum-Code-strong, .spectrum-Code strong`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-code-strong-font-weight": {
+      "value": "700",
+      "description": "Used by `.spectrum-Code .spectrum-Code-strong, .spectrum-Code strong`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-code-emphasized-font-style": {
+      "value": "italic",
+      "description": "Used by `.spectrum-Code .spectrum-Code-emphasized, .spectrum-Code em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-code-emphasized-font-weight": {
+      "value": "400",
+      "description": "Used by `.spectrum-Code .spectrum-Code-emphasized, .spectrum-Code em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-code-strong-emphasized-font-style": {
+      "value": "italic",
+      "description": "Used by `.spectrum-Code .spectrum-Code-strong.spectrum-Code-emphasized, .spectrum-Code em strong, .spectrum-Code strong em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-code-strong-emphasized-font-weight": {
+      "value": "700",
+      "description": "Used by `.spectrum-Code .spectrum-Code-strong.spectrum-Code-emphasized, .spectrum-Code em strong, .spectrum-Code strong em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-code-cjk-font-family": {
+      "value": "Source Code Pro",
+      "description": "Used by `.spectrum-Code:lang(ja), .spectrum-Code:lang(ko), .spectrum-Code:lang(zh)`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-code-cjk-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Code:lang(ja), .spectrum-Code:lang(ko), .spectrum-Code:lang(zh)`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-code-cjk-font-weight": {
+      "value": "400",
+      "description": "Used by `.spectrum-Code:lang(ja), .spectrum-Code:lang(ko), .spectrum-Code:lang(zh)`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-code-cjk-line-height": {
+      "value": "1.7",
+      "description": "Used by `.spectrum-Code:lang(ja), .spectrum-Code:lang(ko), .spectrum-Code:lang(zh)`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-code-cjk-strong-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Code:lang(ja) .spectrum-Code-strong, .spectrum-Code:lang(ja) strong, .spectrum-Code:lang(ko) .spectrum-Code-strong, .spectrum-Code:lang(ko) strong, .spectrum-Code:lang(zh) .spectrum-Code-strong, .spectrum-Code:lang(zh) strong`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-code-cjk-strong-font-weight": {
+      "value": "700",
+      "description": "Used by `.spectrum-Code:lang(ja) .spectrum-Code-strong, .spectrum-Code:lang(ja) strong, .spectrum-Code:lang(ko) .spectrum-Code-strong, .spectrum-Code:lang(ko) strong, .spectrum-Code:lang(zh) .spectrum-Code-strong, .spectrum-Code:lang(zh) strong`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-code-cjk-emphasized-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Code:lang(ja) .spectrum-Code-emphasized, .spectrum-Code:lang(ja) em, .spectrum-Code:lang(ko) .spectrum-Code-emphasized, .spectrum-Code:lang(ko) em, .spectrum-Code:lang(zh) .spectrum-Code-emphasized, .spectrum-Code:lang(zh) em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-code-cjk-emphasized-font-weight": {
+      "value": "700",
+      "description": "Used by `.spectrum-Code:lang(ja) .spectrum-Code-emphasized, .spectrum-Code:lang(ja) em, .spectrum-Code:lang(ko) .spectrum-Code-emphasized, .spectrum-Code:lang(ko) em, .spectrum-Code:lang(zh) .spectrum-Code-emphasized, .spectrum-Code:lang(zh) em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-code-cjk-strong-emphasized-font-style": {
+      "value": "normal",
+      "description": "Used by `.spectrum-Code:lang(ja) .spectrum-Code-strong.spectrum-Code-emphasized, .spectrum-Code:lang(ja) em strong, .spectrum-Code:lang(ja) strong em, .spectrum-Code:lang(ko) .spectrum-Code-strong.spectrum-Code-emphasized, .spectrum-Code:lang(ko) em strong, .spectrum-Code:lang(ko) strong em, .spectrum-Code:lang(zh) .spectrum-Code-strong.spectrum-Code-emphasized, .spectrum-Code:lang(zh) em strong, .spectrum-Code:lang(zh) strong em`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-code-cjk-strong-emphasized-font-weight": {
+      "value": "700",
+      "description": "Used by `.spectrum-Code:lang(ja) .spectrum-Code-strong.spectrum-Code-emphasized, .spectrum-Code:lang(ja) em strong, .spectrum-Code:lang(ja) strong em, .spectrum-Code:lang(ko) .spectrum-Code-strong.spectrum-Code-emphasized, .spectrum-Code:lang(ko) em strong, .spectrum-Code:lang(ko) strong em, .spectrum-Code:lang(zh) .spectrum-Code-strong.spectrum-Code-emphasized, .spectrum-Code:lang(zh) em strong, .spectrum-Code:lang(zh) strong em`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {
+    "highcontrast-heading-font-color": {
+      "value": "var(--mod-heading-font-color, var(--spectrum-heading-font-color))",
+      "description": "Defined in `.spectrum-Heading`. <br/>Used by `.spectrum-Heading`. <br/>Defaults to `var(--mod-heading-font-color, var(--spectrum-heading-font-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-body-font-color": {
+      "value": "var(--mod-body-font-color, var(--spectrum-body-font-color))",
+      "description": "Defined in `.spectrum-Body`. <br/>Used by `.spectrum-Body`. <br/>Defaults to `var(--mod-body-font-color, var(--spectrum-body-font-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-detail-font-color": {
+      "value": "var(--mod-detail-font-color, var(--spectrum-detail-font-color))",
+      "description": "Defined in `.spectrum-Detail`. <br/>Used by `.spectrum-Detail`. <br/>Defaults to `var(--mod-detail-font-color, var(--spectrum-detail-font-color))`, if not set.",
+      "control": "color"
+    },
+    "highcontrast-code-font-color": {
+      "value": "var(--mod-code-font-color, var(--spectrum-code-font-color))",
+      "description": "Defined in `.spectrum-Code`. <br/>Used by `.spectrum-Code`. <br/>Defaults to `var(--mod-code-font-color, var(--spectrum-code-font-color))`, if not set.",
+      "control": "color"
+    }
+  }
 }
diff --git a/components/typography/stories/typography.stories.js b/components/typography/stories/typography.stories.js
index ac19708ed4f..4fce31655eb 100644
--- a/components/typography/stories/typography.stories.js
+++ b/components/typography/stories/typography.stories.js
@@ -1,8 +1,7 @@
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
+
 import {
     DocsBodyVariants,
     DocsCodeVariants,
@@ -17,6 +16,10 @@ import {
 } from "./template.js";
 import { TypographyGroup } from "./typography.test.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * Spectrum typography is broken out into several separate components: heading, body, detail, and code. Internationalized typography examples are also shown.
  */
@@ -83,6 +86,10 @@ export default {
 		},
 		packageJson,
 		metadata,
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 };
 
diff --git a/components/underlay/dist/metadata.json b/components/underlay/dist/metadata.json
index 21a3e4aa1d0..db6ce850cf2 100644
--- a/components/underlay/dist/metadata.json
+++ b/components/underlay/dist/metadata.json
@@ -1,35 +1,135 @@
 {
   "sourceFile": "index.css",
   "selectors": [".spectrum-Underlay", ".spectrum-Underlay.is-open"],
-  "modifiers": [
-    "--mod-overlay-animation-duration-opened",
-    "--mod-underlay-background-color",
-    "--mod-underlay-background-entry-animation-delay",
-    "--mod-underlay-background-entry-animation-duration",
-    "--mod-underlay-background-entry-animation-ease",
-    "--mod-underlay-background-exit-animation-delay",
-    "--mod-underlay-background-exit-animation-duration",
-    "--mod-underlay-background-exit-animation-ease"
-  ],
-  "component": [
-    "--spectrum-underlay-background-color",
-    "--spectrum-underlay-background-entry-animation-delay",
-    "--spectrum-underlay-background-entry-animation-duration",
-    "--spectrum-underlay-background-entry-animation-ease",
-    "--spectrum-underlay-background-exit-animation-delay",
-    "--spectrum-underlay-background-exit-animation-duration",
-    "--spectrum-underlay-background-exit-animation-ease"
-  ],
-  "global": [
-    "--spectrum-animation-duration-0",
-    "--spectrum-animation-duration-200",
-    "--spectrum-animation-duration-300",
-    "--spectrum-animation-duration-600",
-    "--spectrum-animation-ease-in",
-    "--spectrum-animation-ease-out",
-    "--spectrum-black-rgb",
-    "--spectrum-overlay-opacity"
-  ],
-  "passthroughs": [],
-  "high-contrast": []
+  "modifiers": {
+    "mod-underlay-background-exit-animation-duration": {
+      "description": "Used by `--spectrum-underlay-background-exit-animation-duration`. <br/>Defaults to `var(--spectrum-animation-duration-300)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-underlay-background-exit-animation-ease": {
+      "description": "Used by `--spectrum-underlay-background-exit-animation-ease`. <br/>Defaults to `var(--spectrum-animation-ease-in)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-underlay-background-exit-animation-delay": {
+      "description": "Used by `--spectrum-underlay-background-exit-animation-delay`. <br/>Defaults to `var(--spectrum-animation-duration-200)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-underlay-background-entry-animation-duration": {
+      "description": "Used by `--spectrum-underlay-background-entry-animation-duration`. <br/>Defaults to `var(--spectrum-animation-duration-600)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-underlay-background-entry-animation-ease": {
+      "description": "Used by `--spectrum-underlay-background-entry-animation-ease`. <br/>Defaults to `var(--spectrum-animation-ease-out)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-underlay-background-entry-animation-delay": {
+      "description": "Used by `--spectrum-underlay-background-entry-animation-delay`. <br/>Defaults to `var(--mod-overlay-animation-duration-opened, var(--spectrum-animation-duration-0))`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-overlay-animation-duration-opened": {
+      "description": "Used by `--spectrum-underlay-background-entry-animation-delay`. <br/>Defaults to `var(--spectrum-animation-duration-0)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-underlay-background-color": {
+      "description": "Used by `--spectrum-underlay-background-color`. <br/>Defaults to `rgb(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity))`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-underlay-background-exit-animation-duration": {
+      "value": "var(--mod-underlay-background-exit-animation-duration, var(--spectrum-animation-duration-300))",
+      "description": "Defined in `.spectrum-Underlay`. <br/>Used by `.spectrum-Underlay`. <br/>Defaults to `var(--mod-underlay-background-exit-animation-duration, var(--spectrum-animation-duration-300))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-underlay-background-exit-animation-ease": {
+      "value": "var(--mod-underlay-background-exit-animation-ease, var(--spectrum-animation-ease-in))",
+      "description": "Defined in `.spectrum-Underlay`. <br/>Used by `.spectrum-Underlay`. <br/>Defaults to `var(--mod-underlay-background-exit-animation-ease, var(--spectrum-animation-ease-in))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-underlay-background-exit-animation-delay": {
+      "value": "var(--mod-underlay-background-exit-animation-delay, var(--spectrum-animation-duration-200))",
+      "description": "Defined in `.spectrum-Underlay`. <br/>Used by `.spectrum-Underlay`. <br/>Defaults to `var(--mod-underlay-background-exit-animation-delay, var(--spectrum-animation-duration-200))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-underlay-background-entry-animation-duration": {
+      "value": "var(--mod-underlay-background-entry-animation-duration, var(--spectrum-animation-duration-600))",
+      "description": "Defined in `.spectrum-Underlay`. <br/>Used by `.spectrum-Underlay.is-open`. <br/>Defaults to `var(--mod-underlay-background-entry-animation-duration, var(--spectrum-animation-duration-600))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-underlay-background-entry-animation-ease": {
+      "value": "var(--mod-underlay-background-entry-animation-ease, var(--spectrum-animation-ease-out))",
+      "description": "Defined in `.spectrum-Underlay`. <br/>Used by `.spectrum-Underlay.is-open`. <br/>Defaults to `var(--mod-underlay-background-entry-animation-ease, var(--spectrum-animation-ease-out))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-underlay-background-entry-animation-delay": {
+      "value": "var(--mod-underlay-background-entry-animation-delay, var(--mod-overlay-animation-duration-opened, var(--spectrum-animation-duration-0)))",
+      "description": "Defined in `.spectrum-Underlay`. <br/>Used by `.spectrum-Underlay.is-open`. <br/>Defaults to `var(--mod-underlay-background-entry-animation-delay, var(--mod-overlay-animation-duration-opened, var(--spectrum-animation-duration-0)))`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-underlay-background-color": {
+      "value": "var(--mod-underlay-background-color, rgb(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity)))",
+      "description": "Defined in `.spectrum-Underlay`. <br/>Used by `.spectrum-Underlay`. <br/>Defaults to `var(--mod-underlay-background-color, rgb(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity)))`, if not set.",
+      "control": "color",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-animation-duration-300": {
+      "description": "Used by `--spectrum-underlay-background-exit-animation-duration`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-animation-ease-in": {
+      "description": "Used by `--spectrum-underlay-background-exit-animation-ease`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-animation-duration-200": {
+      "description": "Used by `--spectrum-underlay-background-exit-animation-delay`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-animation-duration-600": {
+      "description": "Used by `--spectrum-underlay-background-entry-animation-duration`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-animation-ease-out": {
+      "description": "Used by `--spectrum-underlay-background-entry-animation-ease`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-animation-duration-0": {
+      "description": "Used by `--spectrum-underlay-background-entry-animation-delay`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-black-rgb": {
+      "description": "Used by `--spectrum-underlay-background-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-overlay-opacity": {
+      "value": "light-dark(0.4, 0.6)",
+      "description": "Used by `--spectrum-underlay-background-color`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {}
 }
diff --git a/components/underlay/stories/underlay.stories.js b/components/underlay/stories/underlay.stories.js
index 4b9a61662ba..f6afbeffe8d 100644
--- a/components/underlay/stories/underlay.stories.js
+++ b/components/underlay/stories/underlay.stories.js
@@ -1,9 +1,11 @@
 import { Default as ModalStory } from "@spectrum-css/modal/stories/modal.stories.js";
 import { Template as Modal } from "@spectrum-css/modal/stories/template.js";
 import { isOpen } from "@spectrum-css/preview/types";
+import { Template } from "./template.js";
+
+// Local assets to render the component styles and structure
 import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
-import { Template } from "./template.js";
 
 /**
  * An underlay component is used with [modal](?path=/docs/components-modal--docs) and [dialog](?path=/docs/components-dialog--docs). It lays over the rest of the page to deliver a blocking layer between the two contexts.
@@ -31,6 +33,10 @@ export default {
 		chromatic: { disableSnapshot: true },
 		packageJson,
 		metadata,
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	}
 };
 
diff --git a/components/well/dist/metadata.json b/components/well/dist/metadata.json
index c9fdd7f6da1..3e0f32c6ad4 100644
--- a/components/well/dist/metadata.json
+++ b/components/well/dist/metadata.json
@@ -1,32 +1,118 @@
 {
   "sourceFile": "index.css",
   "selectors": [".spectrum-Well"],
-  "modifiers": [
-    "--mod-well-background-color",
-    "--mod-well-border-color",
-    "--mod-well-border-radius",
-    "--mod-well-border-width",
-    "--mod-well-content-color",
-    "--mod-well-margin-top",
-    "--mod-well-min-width",
-    "--mod-well-padding"
-  ],
-  "component": [
-    "--spectrum-well-background-color",
-    "--spectrum-well-border-color",
-    "--spectrum-well-border-radius",
-    "--spectrum-well-border-width",
-    "--spectrum-well-content-color",
-    "--spectrum-well-margin-top",
-    "--spectrum-well-min-width",
-    "--spectrum-well-padding"
-  ],
-  "global": [
-    "--spectrum-body-color",
-    "--spectrum-border-width-100",
-    "--spectrum-gray-1000-rgb",
-    "--spectrum-gray-800-rgb"
-  ],
-  "passthroughs": [],
-  "high-contrast": []
+  "modifiers": {
+    "mod-well-min-width": {
+      "description": "Used by `.spectrum-Well`. <br/>Defaults to `var(--spectrum-well-min-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-well-padding": {
+      "description": "Used by `.spectrum-Well`. <br/>Defaults to `var(--spectrum-well-padding)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-well-margin-top": {
+      "description": "Used by `.spectrum-Well`. <br/>Defaults to `var(--spectrum-well-margin-top)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-well-border-width": {
+      "description": "Used by `.spectrum-Well`. <br/>Defaults to `var(--spectrum-well-border-width)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-well-border-radius": {
+      "description": "Used by `.spectrum-Well`. <br/>Defaults to `var(--spectrum-well-border-radius)`, if not set.",
+      "control": "text",
+      "category": "Modifier"
+    },
+    "mod-well-background-color": {
+      "description": "Used by `.spectrum-Well`. <br/>Defaults to `var(--spectrum-well-background-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-well-border-color": {
+      "description": "Used by `.spectrum-Well`. <br/>Defaults to `var(--spectrum-well-border-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    },
+    "mod-well-content-color": {
+      "description": "Used by `.spectrum-Well`. <br/>Defaults to `var(--spectrum-well-content-color)`, if not set.",
+      "control": "color",
+      "category": "Modifier"
+    }
+  },
+  "component": {
+    "spectrum-well-border-color": {
+      "value": "rgb(var(--spectrum-gray-1000-rgb), 0.05)",
+      "description": "Defined in `.spectrum-Well`. <br/>Used by `.spectrum-Well`. <br/>Defaults to `rgb(var(--spectrum-gray-1000-rgb), 0.05)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-well-border-width": {
+      "value": "1px",
+      "description": "Defined in `.spectrum-Well`. <br/>Used by `.spectrum-Well`. <br/>Defaults to `var(--spectrum-border-width-100)`, if not set.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-well-content-color": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Defined in `.spectrum-Well`. <br/>Used by `.spectrum-Well`. <br/>Defaults to `var(--spectrum-body-color)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-well-background-color": {
+      "value": "rgb(var(--spectrum-gray-800-rgb), 0.02)",
+      "description": "Defined in `.spectrum-Well`. <br/>Used by `.spectrum-Well`. <br/>Defaults to `rgb(var(--spectrum-gray-800-rgb), 0.02)`, if not set.",
+      "control": "color",
+      "category": "Component"
+    },
+    "spectrum-well-min-width": {
+      "description": "Used by `.spectrum-Well`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-well-padding": {
+      "description": "Used by `.spectrum-Well`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-well-margin-top": {
+      "description": "Used by `.spectrum-Well`.",
+      "control": "text",
+      "category": "Component"
+    },
+    "spectrum-well-border-radius": {
+      "description": "Used by `.spectrum-Well`.",
+      "control": "text",
+      "category": "Component"
+    }
+  },
+  "global": {
+    "spectrum-gray-1000-rgb": {
+      "description": "Used by `--spectrum-well-border-color`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-border-width-100": {
+      "value": "1px",
+      "description": "Used by `--spectrum-well-border-width`.",
+      "control": "text",
+      "category": "Global"
+    },
+    "spectrum-body-color": {
+      "value": "var(--spectrum-gray-800)",
+      "description": "Used by `--spectrum-well-content-color`.",
+      "control": "color",
+      "category": "Global"
+    },
+    "spectrum-gray-800-rgb": {
+      "description": "Used by `--spectrum-well-background-color`.",
+      "control": "text",
+      "category": "Global"
+    }
+  },
+  "passthroughs": {},
+  "high-contrast": {}
 }
diff --git a/components/well/stories/well.stories.js b/components/well/stories/well.stories.js
index 0858075e6e4..7cc596651d9 100644
--- a/components/well/stories/well.stories.js
+++ b/components/well/stories/well.stories.js
@@ -1,9 +1,11 @@
 import { Template as Link } from "@spectrum-css/link/stories/template.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
+import { WellGroup } from "./well.test.js";
+
+// Local assets to render the component styles and structure
 import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
-import { WellGroup } from "./well.test.js";
 
 /**
  * A well is a content container that displays non-editable content separate from other content on the screen. Often this is used to display preformatted text, such as code/markup examples on a documentation page. The well may also be labeled by an optional heading outside of the component.
@@ -23,6 +25,10 @@ export default {
 		},
 		packageJson,
 		metadata,
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
 	},
 };
 
diff --git a/lint-staged.config.js b/lint-staged.config.js
index 4ca6f1ca9c4..8a678d24d5a 100644
--- a/lint-staged.config.js
+++ b/lint-staged.config.js
@@ -4,16 +4,16 @@ module.exports = {
 		"prettier --no-error-on-unmatched-pattern --ignore-unknown --log-level silent --write --config .prettierrc",
 	],
 	"*.{js,json},!package.json": [
-		"eslint --fix --cache --no-error-on-unmatched-pattern"
+		"eslint --fix --cache --no-error-on-unmatched-pattern --config .eslintrc"
 	],
-	"*.{md,mdx}": [
+	"*.md": [
 		"prettier --no-error-on-unmatched-pattern --ignore-unknown --log-level silent --write --config .prettierrc",
 		"markdownlint --config .markdownlint.json --fix"
 	],
 	"package.json": (files) => ([
 		"yarn constraints --fix",
 		"yarn install --refresh-lockfile",
-		`eslint --fix --cache --no-error-on-unmatched-pattern ${files.join(" ")}`,
+		`eslint --fix --cache --no-error-on-unmatched-pattern --config .eslintrc ${files.join(" ")}`,
 		"git add yarn.lock"
 	]),
 	"dist/*.css": [
diff --git a/nx.json b/nx.json
index bf1055ed8b7..bbece606f30 100644
--- a/nx.json
+++ b/nx.json
@@ -151,7 +151,7 @@
 				"commands": [
 					"stylelint --fix --cache --allow-empty-input {projectRoot}/*.css",
 					"eslint --fix --cache --no-ignore --no-error-on-unmatched-pattern {projectRoot}/*.{js,json} {projectRoot}/**/*.{js,json} --ignore-pattern {projectRoot}/dist || exit 0",
-					"prettier --write --cache --log-level error --ignore-unknown --no-error-on-unmatched-pattern {projectRoot}/*.{md,mdx} {projectRoot}/**/*.{md,mdx} && markdownlint --fix --config .markdownlint.json {projectRoot}/*.{md,mdx} {projectRoot}/**/*.{md,mdx}"
+					"prettier --write --cache --log-level error --ignore-unknown --no-error-on-unmatched-pattern {projectRoot}/*.{md,mdx} {projectRoot}/**/*.{md,mdx} && markdownlint --fix --config .markdownlint.json {projectRoot}/*.md {projectRoot}/**/*.md"
 				]
 			}
 		},
@@ -172,12 +172,13 @@
 				"commands": [
 					"stylelint --cache --allow-empty-input --report-descriptionless-disables --report-invalid-scope-disables --report-needless-disables {projectRoot}/*.css {projectRoot}/**/*.css --ignore-pattern {projectRoot}/dist",
 					"eslint --cache --no-ignore --no-error-on-unmatched-pattern --report-unused-disable-directives {projectRoot}/*.{js,json} {projectRoot}/**/*.{js,json} --ignore-pattern {projectRoot}/dist || exit 0",
-					"markdownlint --config .markdownlint.json {projectRoot}/*.{md,mdx} {projectRoot}/**/*.{md,mdx}"
+					"markdownlint --config .markdownlint.json {projectRoot}/*.md {projectRoot}/**/*.md"
 				]
 			}
 		},
 		"report": {
 			"cache": true,
+			"dependsOn": [{ "projects": ["tokens"], "target": "build" }],
 			"executor": "nx:run-commands",
 			"inputs": ["styles", "postcss", "stylelint", "reporter"],
 			"options": {
diff --git a/package.json b/package.json
index 58bdaa1ed49..d0b991b97fb 100644
--- a/package.json
+++ b/package.json
@@ -83,6 +83,7 @@
 		"eslint": "^8.57.1",
 		"eslint-plugin-jsonc": "^2.20.1",
 		"eslint-plugin-prettier": "^5.5.4",
+		"eslint-plugin-react": "^7.37.5",
 		"fast-glob": "^3.3.3",
 		"gh-pages": "^6.3.0",
 		"husky": "^9.1.7",
diff --git a/schemas/metadata.schema.json b/schemas/metadata.schema.json
index 1352f802900..b8a510c6c31 100644
--- a/schemas/metadata.schema.json
+++ b/schemas/metadata.schema.json
@@ -10,54 +10,277 @@
 			"pattern": "^.+\\.css$",
 			"description": "The path to the source file used in generating the metadata."
 		},
-        "selectors": {
-            "description": "These are the selectors available for the component.",
-            "type": "array",
-            "items": {
-                "type": "string"
-            }
-        },
-        "modifiers": {
-            "description": "These are the modifiers available for the component.",
-            "type": "array",
-            "items": {
-                "type": "string",
-                "pattern": "^--mod-"
-            }
-        },
-        "component": {
-            "description": "The component-level custom properties for the component.",
-            "type": "array",
-            "items": {
-                "type": "string",
-                "pattern": "^--spectrum-"
-            }
-        },
-        "global": {
-            "description": "The global custom properties used in this component as generated by the design tokens.",
-            "type": "array",
-            "items": {
-                "type": "string",
-                "pattern": "^--spectrum-"
-            }
-        },
-        "passthroughs": {
-            "description": "Modifier custom properties for nested components that are passed through by this component.",
-            "type": "array",
-            "items": {
-                "type": "string",
-                "pattern": "^--mod-"
-            }
-        },
-        "high-contrast": {
-            "description": "Custom properties that allow high-contrast styles to be applied to the component.",
-            "type": "array",
-            "items": {
-                "type": "string",
-                "pattern": "^--highcontrast-"
-            }
-        }
+		"selectors": {
+			"description": "These are the selectors available for the component.",
+			"type": "array",
+			"items": {
+				"type": "string"
+			}
+		},
+		"modifiers": {
+			"description": "These are the modifiers available for the component.",
+			"type": "object",
+			"patternProperties": {
+				"^mod-": {
+					"$ref": "#/definitions/argType"
+				}
+			}
+		},
+		"component": {
+			"description": "The component-level custom properties for the component.",
+			"type": "object",
+			"patternProperties": {
+				"^spectrum-": {
+					"$ref": "#/definitions/argType"
+				}
+			}
+		},
+		"global": {
+			"description": "The global custom properties used in this component as generated by the design tokens.",
+			"type": "object",
+			"patternProperties": {
+				"^spectrum-": {
+					"$ref": "#/definitions/argType"
+				}
+			}
+		},
+		"passthroughs": {
+			"description": "Modifier custom properties for nested components that are passed through by this component.",
+			"type": "object",
+			"patternProperties": {
+				"^mod-": {
+					"$ref": "#/definitions/argType"
+				}
+			}
+		},
+		"high-contrast": {
+			"description": "Custom properties that allow high-contrast styles to be applied to the component.",
+			"type": "object",
+			"patternProperties": {
+				"^highcontrast-": {
+					"$ref": "#/definitions/argType"
+				}
+			}
+		}
 	},
-	"required": ["sourceFile", "selectors", "modifiers", "component", "global", "passthroughs", "high-contrast"],
-	"additionalProperties": false
+	"required": [
+		"sourceFile",
+		"selectors",
+		"modifiers",
+		"component",
+		"global",
+		"passthroughs",
+		"high-contrast"
+	],
+	"additionalProperties": false,
+	"definitions": {
+		"argType": {
+			"type": "object",
+			"properties": {
+				"description": {
+					"type": "string"
+				},
+				"control": {
+					"$ref": "#/definitions/control"
+				},
+				"category": {
+					"type": "string"
+				},
+				"subcategory": {
+					"type": "string"
+				},
+				"value": {
+					"type": "string"
+				},
+				"if": {
+					"type": "object",
+					"allOf": [
+						{
+							"oneOf": [
+								{
+									"properties": {
+										"arg": {
+											"type": "string"
+										}
+									},
+									"required": ["arg"]
+								},
+								{
+									"properties": {
+										"global": {
+											"type": "string"
+										}
+									},
+									"required": ["global"]
+								}
+							]
+						},
+						{
+							"oneOf": [
+								{
+									"properties": {
+										"truthy": {
+											"type": "boolean"
+										}
+									}
+								},
+								{
+									"properties": {
+										"exists": {
+											"type": "boolean"
+										}
+									},
+									"required": ["exists"]
+								},
+								{
+									"properties": {
+										"eq": {
+											"type": "string"
+										}
+									},
+									"required": ["eq"]
+								},
+								{
+									"properties": {
+										"neq": {
+											"type": "string"
+										}
+									},
+									"required": ["neq"]
+								}
+							]
+						}
+					]
+				},
+				"mapping": {
+					"type": "object"
+				},
+				"name": {
+					"type": "string"
+				},
+				"options": {
+					"type": "array",
+					"readonly": true
+				},
+				"table": {
+					"type": "object",
+					"properties": {
+						"category": {
+							"type": "string"
+						},
+						"subcategory": {
+							"type": "string"
+						},
+						"defaultValue": {
+							"type": "object",
+							"properties": {
+								"summary": {
+									"type": "string"
+								},
+								"detail": {
+									"type": "string"
+								}
+							}
+						},
+						"disable": {
+							"type": "boolean"
+						},
+						"type": {
+							"type": "object",
+							"properties": {
+								"summary": {
+									"type": "string"
+								},
+								"detail": {
+									"type": "string"
+								}
+							}
+						}
+					},
+					"additionalProperties": true
+				},
+				"type": {}
+			},
+			"additionalProperties": false
+		},
+		"control": {
+			"oneOf": [
+				{
+					"$ref": "#/definitions/controlTypes"
+				},
+				{
+					"type": "boolean",
+					"enum": [false]
+				},
+				{
+					"type": "object",
+					"properties": {
+						"type": {
+							"$ref": "#/definitions/controlTypes"
+						},
+						"disable": {
+							"type": "boolean"
+						}
+					},
+					"required": ["type"],
+					"allOf": [
+						{
+							"if": {
+								"properties": {
+									"type": { "const": "color" }
+								},
+								"then": {
+									"properties": {
+										"presetColors": { "type": "array", "items": { "type": "string" } }
+									}
+								}
+							}
+						},
+						{
+							"if": {
+								"properties": {
+									"type": { "const": "file" }
+								},
+								"then": {
+									"properties": {
+										"accept": { "type": "string" }
+									}
+								}
+							}
+						},
+						{
+							"if": {
+								"properties": {
+									"type": { "anyOf": [ { "const": "inline-check" }, { "const": "radio" }, { "const": "inline-radio" }, { "const": "select" }, { "const": "multi-select" } ] }
+								},
+								"then": {
+									"properties": {
+										"labels": { "type": "object", "patternProperties": { "^.*$": { "type": "string" } } }
+									}
+								}
+							}
+						},
+						{
+							"if": {
+								"properties": {
+									"type": { "anyOf": [ { "const": "range" }, { "const": "number" } ] }
+								},
+								"then": {
+									"properties": {
+										"max": { "type": "number" },
+										"min": { "type": "number" },
+										"step": { "type": "number" }
+									}
+								}
+							}
+						}
+					]
+				}
+			]
+		},
+		"controlTypes": {
+			"type": "string",
+			"enum": ["color", "date", "boolean", "number", "text", "object", "check", "inline-check", "radio", "inline-radio", "select", "multi-select", "file", "range"]
+		}
+	}
 }
diff --git a/tasks/component-reporter.js b/tasks/component-reporter.js
index b281de49bc9..b9382c6c700 100644
--- a/tasks/component-reporter.js
+++ b/tasks/component-reporter.js
@@ -23,6 +23,8 @@ const prettier = require("prettier");
 
 require("colors");
 
+const tokens = require("../tokens/dist/json/tokens.json");
+
 const {
 	dirs,
 	extractProperties,
@@ -82,11 +84,52 @@ async function extractModifiers(
 		}
 	});
 
-	meta.selectors = [...selectors].sort();
+	meta.selectors = [...selectors].sort((a, b) => a.localeCompare(b));
+
+	const getTokenValue = (key, value) => {
+		let fallthrough = false;
+		if (!value) {
+			value = key;
+			fallthrough = true;
+		}
+
+		const cleanKey = value.replace(/^var\((.*)\)$/, "$1").replace(/^--/, "").replace(/^spectrum-/, "");
+		if (tokens?.[cleanKey]) {
+			const tokenObj = tokens[cleanKey] ?? {};
+			if (tokenObj.value) {
+				return tokenObj.value;
+			}
+			if (tokenObj.ref) {
+				return tokenObj.ref;
+			}
+			if (tokenObj.desktop?.value) {
+				return tokenObj.desktop.value;
+			}
+			if (tokenObj.light?.value && tokenObj.dark?.value) {
+				return `light-dark(${tokenObj.light.value}, ${tokenObj.dark.value})`;
+			}
+			if (tokenObj.light?.value) {
+				return tokenObj.light.value;
+			}
+		}
+
+		if (fallthrough) {
+			return undefined;
+		}
+
+		return getTokenValue(key) ?? value;
+	};
 
 	// Iterate over the spectrum values and see if the 2nd part of the variable
 	// name matches the component name
-	const spectrum = meta.spectrum ?? [];
+	const spectrum = Object.keys(meta.spectrum ?? {}).reduce((acc, key) => {
+		acc[key] = {
+			...meta.spectrum[key],
+			value: getTokenValue(key, meta.spectrum[key].value),
+		};
+
+		return acc;
+	}, {});
 
 	function isComponentVar(value, componentName) {
 		if (!componentName) return value;
@@ -103,13 +146,25 @@ async function extractModifiers(
 		return;
 	}
 
-	const componentLevel = new Set(spectrum.map((value) => isComponentVar(value, componentName)).filter(Boolean));
+	const componentLevel = Object.keys(spectrum).filter((value) => isComponentVar(value, componentName)).reduce((acc, value) => {
+		acc[value] = {
+			...spectrum[value],
+			category: "Component",
+		};
+		return acc;
+	}, {});
 
 	// Filter out the component level values from the global spectrum values
-	meta.global = spectrum.filter((value) => !componentLevel.has(value));
+	meta.global = Object.keys(spectrum).filter((value) => !Object.keys(componentLevel).includes(value)).reduce((acc, value) => {
+		acc[value] = {
+			...spectrum[value],
+			category: "Global",
+		};
+		return acc;
+	}, {});
 
 	// Filter out mods that reference other components --mod-<componentName>-*
-	meta.passthroughs = meta.modifiers.filter((mod) => {
+	meta.passthroughs = Object.keys(meta.modifiers).filter((mod) => {
 		if (!componentName) return false;
 
 		if (isComponentVar(mod, componentName)) return false;
@@ -120,14 +175,29 @@ async function extractModifiers(
 		if (!otherComponents.some((component) => isComponentVar(mod, component))) return false;
 
 		// Remove the mod from the modifiers list if it's a passthrough
-		meta.modifiers = meta.modifiers.filter((m) => m !== mod);
+		delete meta.modifiers[mod];
 		return true;
-	});
+	}).reduce((acc, mod) => {
+		acc[mod] = {
+			...meta.modifiers[mod],
+			category: "Passthrough",
+		};
+		return acc;
+	}, {});
 
 	// Remove the spectrum values from the meta object
 	delete meta.spectrum;
 
-	meta.component = [...componentLevel].sort();
+	meta.component = componentLevel;
+	meta.modifiers = Object.keys(meta.modifiers).reduce((acc, mod) => {
+		acc[mod] = {
+			...meta.modifiers[mod],
+			// we want this to be undefined because this is an empty hook
+			value: undefined,
+			category: "Modifier",
+		};
+		return acc;
+	}, {});
 
 	return meta;
 }
diff --git a/tasks/utilities.js b/tasks/utilities.js
index 14f55a58c89..3b11d945d14 100644
--- a/tasks/utilities.js
+++ b/tasks/utilities.js
@@ -165,42 +165,147 @@ function validateComponentName(componentName) {
  * sub-component passthrough properties that should not be listed as mods.
  * @param {string} content
  * @param {{ [string]: (string)[] }} [meta={}]
- * @returns { [string]: string[] }
+ * @returns { [string]: { [string]: { value: string, description: string, usedBy: string[], fallback: string } } }
  */
 function extractProperties(content, meta = {}) {
-	if (!content) return new Set();
+	if (!content) return {};
 
 	const found = {};
 
+	function getArgType(key, data = []) {
+		if (!key) return {};
+
+		const control = key.includes("color") ? "color" : "text";
+
+		let defined = new Set();
+		let used = new Set();
+		let defaultValue;
+
+		// Start by parsing the definition data
+		data.filter((item) => item.type === "definition").forEach((item) => {
+			if (item.value) defaultValue = item.value;
+
+			if (item.usedBy?.length) {
+				item.usedBy.forEach((ub) => {
+					defined.add(ub);
+				});
+			}
+		});
+
+		// Then parse the reference data
+		data.filter((item) => item.type === "reference").forEach((item) => {
+			if (item.usedBy?.length) {
+				item.usedBy.forEach((ub) => {
+					used.add(ub);
+				});
+			}
+
+			if (item.fallback) {
+				// @todo: improve on this reporting in the future
+				// if (defaultValue && defaultValue !== item.fallback) console.log(key, defaultValue, item.fallback);
+
+				defaultValue = item.fallback;
+			}
+		});
+
+		// Deduplicate the descriptions
+		let descriptions = [];
+
+		if (defined.size) {
+			descriptions.push(`Defined in ${[...defined].map((defined) => `\`${defined.replaceAll(new RegExp("\\n(\\t)?", "g"), " ")}\``).join(", ")}.`);
+		}
+
+		if (used.size) {
+			descriptions.push(`Used by ${[...used].map((used) => `\`${used.replaceAll(new RegExp("\\n(\\t)?", "g"), " ")}\``).join(", ")}.`);
+		}
+
+		if (defaultValue) {
+			descriptions.push(`Defaults to \`${defaultValue}\`, if not set.`);
+		}
+
+		return { value: defaultValue, description: descriptions.join(" <br/>")?.trim(), control };
+	}
+
 	// Process CSS content through the valuesParser an postcss to capture
 	// all the custom properties defined and used in the CSS
 	postcss.parse(content).walkDecls((decl) => {
 		Object.entries(meta).forEach(([key, values]) => {
-			found[key] = found[key] ?? new Set();
+			found[key] = found[key] ?? {};
+
+			// Iterate over custom property DEFINITIONS
+			values.forEach((property) => {
+				if (decl.prop.startsWith(`--${property}-`)) {
+					// Remove the -- prefix in order to create a clean key
+					const cleanProp = decl.prop.replace(/^--/, "");
+					const prevDefinition = found[key]?.[cleanProp];
+					let usedBy = [];
+					if (decl.parent?.selector) {
+						usedBy = [ decl.parent.selector ];
+					}
+
+					let value;
+					if (decl.value) {
+						value = decl.value?.replaceAll(/[\n|\t]/g, "");
+					}
 
-			values.forEach((value) => {
-				if (decl.prop.startsWith("--") && decl.prop.startsWith(`--${value}-`)) {
-					found[key].add(decl.prop);
+					found[key][cleanProp] = [
+						...(prevDefinition ?? []),
+						{ type: "definition", value, usedBy },
+					];
 				}
 			});
 
-			// Parse the value of the declaration to extract custom properties
+			// Parse the value of the declaration to extract custom properties being USED
 			valuesParser.parse(decl.value).walk((node) => {
-				if (node.type !== "word" || !node.isVariable) return;
+				if (!node || node.type !== "word" || !node.isVariable) return;
 
 				// Extract the custom property name from the var() function
-				values.forEach((value) => {
-					if (node.value.startsWith(`--${value}-`)) {
-						found[key].add(node.value);
+				values.forEach((property) => {
+					if (!node.value?.startsWith(`--${property}-`)) return;
+
+					const cleanProp = node.value.replace(/^--/, "");
+					const prevReference = found[key]?.[cleanProp];
+					let value = decl.value?.replaceAll(/[\n|\t]/g, "");
+
+					let usedBy = [];
+					if (decl.prop.startsWith("--")) {
+						usedBy = [ decl.prop ];
+					}
+					else if (decl.parent?.selector) {
+						usedBy = [ decl.parent.selector ];
+					}
+
+					let fallback;
+					node.parent?.nodes?.forEach((leaf, idx) => {
+						// if cleanProp is the first node, capture the last node as the fallback
+						if (idx > 0 && leaf.type !== "punctuation" && leaf.params) {
+							fallback = `${leaf.name}${leaf.params}`;
+						}
+					});
+
+					if (value.includes(cleanProp)) {
+						// Unset the value if the custom property is used in the value
+						value = fallback;
 					}
+
+					found[key][cleanProp] = [
+						...(prevReference ?? []),
+						{ type: "reference", value, usedBy, fallback },
+					];
 				});
 			});
 		});
 	});
 
-	// Sort the custom properties alphabetically and return them as an array
-	Object.keys(found).forEach((key) => {
-		found[key] = [...found[key]].sort();
+	Object.keys(meta).forEach((key) => {
+		Object.entries(found[key]).forEach(([prop, data]) => {
+			if (Array.isArray(data)) {
+				found[key][prop] = getArgType(prop, data);
+			}
+			else {
+				found[key][prop] = getArgType(prop, [ data ]);
+			}
+		});
 	});
 
 	return found;
diff --git a/tools/generator/templates/stories/{{ folderName }}.stories.js.hbs b/tools/generator/templates/stories/{{ folderName }}.stories.js.hbs
index f161bee76cf..135fadf8bd1 100644
--- a/tools/generator/templates/stories/{{ folderName }}.stories.js.hbs	
+++ b/tools/generator/templates/stories/{{ folderName }}.stories.js.hbs	
@@ -1,7 +1,9 @@
-import { Template } from "./template.js";
-import { isDisabled, isSelected, isHovered, isFocused } from "@spectrum-css/preview/types";
-import { {{ pascalCase name }}Group } from "./{{ pascalCase name }}.test.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
+import { isDisabled, isSelected, isHovered, isFocused, size } from "@spectrum-css/preview/types";
+import { {{ pascalCase name }}Group } from "./{{ pascalCase name }}.test.js";
+import { Template } from "./template.js";
+
+// Local assets to render the component styles and structure
 import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 
@@ -9,42 +11,35 @@ import packageJson from "../package.json";
   * {{ description }}
   */
 export default {
-  title: "{{ name }}",
-  component: "{{ pascalCase name }}",
-  argTypes: {
-    size: {
-      name: "Size",
-      type: { name: "string", required: true },
-      defaultValue: "m",
-      table: {
-        type: { summary: "string" },
-        category: "Component",
-        defaultValue: { summary: "m" }
-      },
-      options: ["s", "m", "l", "xl"],
-      control: "select"
-    },
-    isDisabled,
-    isSelected,
-    isHovered,
-    isFocused,
-  },
-  args: {
-    rootClass: "spectrum-{{ pascalCase name }}",
-    size: "m",
-    isDisabled: false
-  },
-  parameters: {
-    actions: {
-      handles: ["click .spectrum-{{ pascalCase name }}"],
-    },
-    design: {
-      type: "figma",
-      url: "",
-    },
-    packageJson,
-    metadata,
-  }
+	title: "{{ name }}",
+	component: "{{ pascalCase name }}",
+	argTypes: {
+		size: size(["s", "m", "l", "xl"]),
+		isDisabled,
+		isSelected,
+		isHovered,
+		isFocused,
+	},
+	args: {
+		rootClass: "spectrum-{{ pascalCase name }}",
+		size: "m",
+		isDisabled: false
+	},
+	parameters: {
+		actions: {
+			handles: ["click .spectrum-{{ pascalCase name }}"],
+		},
+		design: {
+			type: "figma",
+			url: "",
+		},
+		packageJson,
+		metadata,
+		cssprops: {
+			...metadata.modifiers,
+			...metadata.component,
+		},
+	}
 };
 
 export const Default = {{ pascalCase name }}Group.bind({});
@@ -54,14 +49,14 @@ Default.args = {};
 export const Disabled = Template.bind({});
 Disabled.tags = ["!dev"];
 Disabled.args = {
-  isDisabled: true
+	isDisabled: true
 };
 Disabled.parameters = {
-  chromatic: { disableSnapshot: true },
+	chromatic: { disableSnapshot: true },
 };
 
 // ********* VRT ONLY ********* //
-export const WithForcedColors = Default.bind({});
+export const WithForcedColors = {{ pascalCase name }}Group.bind({});
 WithForcedColors.args = Default.args;
 WithForcedColors.tags = ["!autodocs", "!dev"];
 WithForcedColors.parameters = {
diff --git a/yarn.lock b/yarn.lock
index 94c095d5e16..7e15bf30f19 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -137,6 +137,7 @@ __metadata:
     eslint: "npm:^8.57.1"
     eslint-plugin-jsonc: "npm:^2.20.1"
     eslint-plugin-prettier: "npm:^5.5.4"
+    eslint-plugin-react: "npm:^7.37.5"
     fast-glob: "npm:^3.3.3"
     gh-pages: "npm:^6.3.0"
     husky: "npm:^9.1.7"
@@ -893,7 +894,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5":
+"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.3.1":
   version: 7.26.10
   resolution: "@babel/runtime@npm:7.26.10"
   dependencies:
@@ -902,6 +903,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.5.5":
+  version: 7.24.4
+  resolution: "@babel/runtime@npm:7.24.4"
+  dependencies:
+    regenerator-runtime: "npm:^0.14.0"
+  checksum: 10c0/785aff96a3aa8ff97f90958e1e8a7b1d47f793b204b47c6455eaadc3f694f48c97cd5c0a921fe3596d818e71f18106610a164fb0f1c71fd68c622a58269d537c
+  languageName: node
+  linkType: hard
+
 "@babel/template@npm:^7.22.5, @babel/template@npm:^7.3.3":
   version: 7.26.9
   resolution: "@babel/template@npm:7.26.9"
@@ -3266,6 +3276,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@ljcl/storybook-addon-cssprops@npm:4.0.0":
+  version: 4.0.0
+  resolution: "@ljcl/storybook-addon-cssprops@npm:4.0.0"
+  checksum: 10c0/8b04b83da0d0ac955c66184c1f5a91eaff54cf21cf190537fd21f8402575ae87e68f6ff0928a8e34777ef9fd023c27fd7582af0ecd3e8717512a58650c51be29
+  languageName: node
+  linkType: hard
+
 "@manypkg/find-root@npm:^1.1.0":
   version: 1.1.0
   resolution: "@manypkg/find-root@npm:1.1.0"
@@ -5346,6 +5363,7 @@ __metadata:
     "@babel/core": "npm:^7.28.0"
     "@chromatic-com/storybook": "npm:^3.2.7"
     "@etchteam/storybook-addon-status": "npm:^5.0.0"
+    "@ljcl/storybook-addon-cssprops": "npm:4.0.0"
     "@spectrum-css/bundle": "npm:2.0.0-next.9"
     "@spectrum-css/tokens": "npm:16.1.0-next.7"
     "@spectrum-css/ui-icons": "npm:2.0.0-next.2"
@@ -5361,7 +5379,7 @@ __metadata:
     "@storybook/core-events": "npm:8.4.7"
     "@storybook/manager-api": "npm:8.4.7"
     "@storybook/preview-api": "npm:8.4.7"
-    "@storybook/test-runner": "npm:^0.22.0"
+    "@storybook/test-runner": "npm:^0.23.0"
     "@storybook/theming": "npm:8.4.7"
     "@storybook/web-components-vite": "npm:8.4.7"
     "@whitespace/storybook-addon-html": "npm:^7.0.0"
@@ -6342,16 +6360,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/test-runner@npm:^0.22.0":
-  version: 0.22.0
-  resolution: "@storybook/test-runner@npm:0.22.0"
+"@storybook/test-runner@npm:^0.23.0":
+  version: 0.23.0
+  resolution: "@storybook/test-runner@npm:0.23.0"
   dependencies:
     "@babel/core": "npm:^7.22.5"
     "@babel/generator": "npm:^7.22.5"
     "@babel/template": "npm:^7.22.5"
     "@babel/types": "npm:^7.22.5"
     "@jest/types": "npm:^29.6.3"
-    "@storybook/csf": "npm:^0.1.11"
     "@swc/core": "npm:^1.5.22"
     "@swc/jest": "npm:^0.2.23"
     expect-playwright: "npm:^0.8.0"
@@ -6366,10 +6383,10 @@ __metadata:
     nyc: "npm:^15.1.0"
     playwright: "npm:^1.14.0"
   peerDependencies:
-    storybook: ^0.0.0-0 || ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 || ^9.0.0-0
+    storybook: ^0.0.0-0 || ^8.2.0 || ^9.0.0 || ^9.1.0-0
   bin:
     test-storybook: dist/test-storybook.js
-  checksum: 10c0/f644ee495298e013f85f57643afbcbd26fe6579890aeb2e7e28a06f1a488e3dbbaf01473a3d961e75c5b9b341a484895eb464cd1b5781abdc6db8dd796eabafd
+  checksum: 10c0/5838f2c2d8ed761f9136a6c6d6bc7ce2b12aeed424ad5dbf1a9d0170aa722372dd49f7d9ee52c8ea94da4f7790623597c11269ee02b2446a097ca1a7dd96bcf3
   languageName: node
   linkType: hard
 
@@ -7488,6 +7505,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"array-includes@npm:^3.1.6, array-includes@npm:^3.1.8":
+  version: 3.1.8
+  resolution: "array-includes@npm:3.1.8"
+  dependencies:
+    call-bind: "npm:^1.0.7"
+    define-properties: "npm:^1.2.1"
+    es-abstract: "npm:^1.23.2"
+    es-object-atoms: "npm:^1.0.0"
+    get-intrinsic: "npm:^1.2.4"
+    is-string: "npm:^1.0.7"
+  checksum: 10c0/5b1004d203e85873b96ddc493f090c9672fd6c80d7a60b798da8a14bff8a670ff95db5aafc9abc14a211943f05220dacf8ea17638ae0af1a6a47b8c0b48ce370
+  languageName: node
+  linkType: hard
+
 "array-slice@npm:^1.0.0":
   version: 1.1.0
   resolution: "array-slice@npm:1.1.0"
@@ -7502,6 +7533,44 @@ __metadata:
   languageName: node
   linkType: hard
 
+"array.prototype.findlast@npm:^1.2.5":
+  version: 1.2.5
+  resolution: "array.prototype.findlast@npm:1.2.5"
+  dependencies:
+    call-bind: "npm:^1.0.7"
+    define-properties: "npm:^1.2.1"
+    es-abstract: "npm:^1.23.2"
+    es-errors: "npm:^1.3.0"
+    es-object-atoms: "npm:^1.0.0"
+    es-shim-unscopables: "npm:^1.0.2"
+  checksum: 10c0/ddc952b829145ab45411b9d6adcb51a8c17c76bf89c9dd64b52d5dffa65d033da8c076ed2e17091779e83bc892b9848188d7b4b33453c5565e65a92863cb2775
+  languageName: node
+  linkType: hard
+
+"array.prototype.flat@npm:^1.3.1":
+  version: 1.3.3
+  resolution: "array.prototype.flat@npm:1.3.3"
+  dependencies:
+    call-bind: "npm:^1.0.8"
+    define-properties: "npm:^1.2.1"
+    es-abstract: "npm:^1.23.5"
+    es-shim-unscopables: "npm:^1.0.2"
+  checksum: 10c0/d90e04dfbc43bb96b3d2248576753d1fb2298d2d972e29ca7ad5ec621f0d9e16ff8074dae647eac4f31f4fb7d3f561a7ac005fb01a71f51705a13b5af06a7d8a
+  languageName: node
+  linkType: hard
+
+"array.prototype.flatmap@npm:^1.3.3":
+  version: 1.3.3
+  resolution: "array.prototype.flatmap@npm:1.3.3"
+  dependencies:
+    call-bind: "npm:^1.0.8"
+    define-properties: "npm:^1.2.1"
+    es-abstract: "npm:^1.23.5"
+    es-shim-unscopables: "npm:^1.0.2"
+  checksum: 10c0/ba899ea22b9dc9bf276e773e98ac84638ed5e0236de06f13d63a90b18ca9e0ec7c97d622d899796e3773930b946cd2413d098656c0c5d8cc58c6f25c21e6bd54
+  languageName: node
+  linkType: hard
+
 "array.prototype.reduce@npm:^1.0.6":
   version: 1.0.7
   resolution: "array.prototype.reduce@npm:1.0.7"
@@ -7517,6 +7586,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"array.prototype.tosorted@npm:^1.1.4":
+  version: 1.1.4
+  resolution: "array.prototype.tosorted@npm:1.1.4"
+  dependencies:
+    call-bind: "npm:^1.0.7"
+    define-properties: "npm:^1.2.1"
+    es-abstract: "npm:^1.23.3"
+    es-errors: "npm:^1.3.0"
+    es-shim-unscopables: "npm:^1.0.2"
+  checksum: 10c0/eb3c4c4fc0381b0bf6dba2ea4d48d367c2827a0d4236a5718d97caaccc6b78f11f4cadf090736e86301d295a6aa4967ed45568f92ced51be8cbbacd9ca410943
+  languageName: node
+  linkType: hard
+
 "arraybuffer.prototype.slice@npm:^1.0.4":
   version: 1.0.4
   resolution: "arraybuffer.prototype.slice@npm:1.0.4"
@@ -8236,7 +8318,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"call-bind@npm:^1.0.2, call-bind@npm:^1.0.7":
+"call-bind@npm:^1.0.2, call-bind@npm:^1.0.5, call-bind@npm:^1.0.6, call-bind@npm:^1.0.7":
   version: 1.0.7
   resolution: "call-bind@npm:1.0.7"
   dependencies:
@@ -8309,13 +8391,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001669, caniuse-lite@npm:^1.0.30001688, caniuse-lite@npm:^1.0.30001702":
+"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001688, caniuse-lite@npm:^1.0.30001702":
   version: 1.0.30001703
   resolution: "caniuse-lite@npm:1.0.30001703"
   checksum: 10c0/ed88e318da28e9e59c4ac3a2e3c42859558b7b713aebf03696a1f916e4ed4b70734dda82be04635e2b62ec355b8639bbed829b7b12ff528d7f9cc31a3a5bea91
   languageName: node
   linkType: hard
 
+"caniuse-lite@npm:^1.0.30001669":
+  version: 1.0.30001673
+  resolution: "caniuse-lite@npm:1.0.30001673"
+  checksum: 10c0/0e73a2b0f06973052e563dec9990a6fd440d510fa2ff54fa50310e736abb86e96c96b43c10e609fc22f2109f98fe76428b70441baf6b1a49f69ccf50c1879f6b
+  languageName: node
+  linkType: hard
+
 "caniuse-lite@npm:^1.0.30001716":
   version: 1.0.30001717
   resolution: "caniuse-lite@npm:1.0.30001717"
@@ -9534,6 +9623,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"data-view-buffer@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "data-view-buffer@npm:1.0.1"
+  dependencies:
+    call-bind: "npm:^1.0.6"
+    es-errors: "npm:^1.3.0"
+    is-data-view: "npm:^1.0.1"
+  checksum: 10c0/8984119e59dbed906a11fcfb417d7d861936f16697a0e7216fe2c6c810f6b5e8f4a5281e73f2c28e8e9259027190ac4a33e2a65fdd7fa86ac06b76e838918583
+  languageName: node
+  linkType: hard
+
 "data-view-buffer@npm:^1.0.2":
   version: 1.0.2
   resolution: "data-view-buffer@npm:1.0.2"
@@ -9545,6 +9645,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"data-view-byte-length@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "data-view-byte-length@npm:1.0.1"
+  dependencies:
+    call-bind: "npm:^1.0.7"
+    es-errors: "npm:^1.3.0"
+    is-data-view: "npm:^1.0.1"
+  checksum: 10c0/b7d9e48a0cf5aefed9ab7d123559917b2d7e0d65531f43b2fd95b9d3a6b46042dd3fca597c42bba384e66b70d7ad66ff23932f8367b241f53d93af42cfe04ec2
+  languageName: node
+  linkType: hard
+
 "data-view-byte-length@npm:^1.0.2":
   version: 1.0.2
   resolution: "data-view-byte-length@npm:1.0.2"
@@ -9556,6 +9667,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"data-view-byte-offset@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "data-view-byte-offset@npm:1.0.0"
+  dependencies:
+    call-bind: "npm:^1.0.6"
+    es-errors: "npm:^1.3.0"
+    is-data-view: "npm:^1.0.1"
+  checksum: 10c0/21b0d2e53fd6e20cc4257c873bf6d36d77bd6185624b84076c0a1ddaa757b49aaf076254006341d35568e89f52eecd1ccb1a502cfb620f2beca04f48a6a62a8f
+  languageName: node
+  linkType: hard
+
 "data-view-byte-offset@npm:^1.0.1":
   version: 1.0.1
   resolution: "data-view-byte-offset@npm:1.0.1"
@@ -9917,6 +10039,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"doctrine@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "doctrine@npm:2.1.0"
+  dependencies:
+    esutils: "npm:^2.0.2"
+  checksum: 10c0/b6416aaff1f380bf56c3b552f31fdf7a69b45689368deca72d28636f41c16bb28ec3ebc40ace97db4c1afc0ceeb8120e8492fe0046841c94c2933b2e30a7d5ac
+  languageName: node
+  linkType: hard
+
 "doctrine@npm:^3.0.0":
   version: 3.0.0
   resolution: "doctrine@npm:3.0.0"
@@ -10325,7 +10456,63 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-abstract@npm:^1.23.2, es-abstract@npm:^1.23.5, es-abstract@npm:^1.23.9":
+"es-abstract@npm:^1.17.5, es-abstract@npm:^1.23.3":
+  version: 1.23.6
+  resolution: "es-abstract@npm:1.23.6"
+  dependencies:
+    array-buffer-byte-length: "npm:^1.0.1"
+    arraybuffer.prototype.slice: "npm:^1.0.4"
+    available-typed-arrays: "npm:^1.0.7"
+    call-bind: "npm:^1.0.8"
+    call-bound: "npm:^1.0.3"
+    data-view-buffer: "npm:^1.0.1"
+    data-view-byte-length: "npm:^1.0.1"
+    data-view-byte-offset: "npm:^1.0.0"
+    es-define-property: "npm:^1.0.1"
+    es-errors: "npm:^1.3.0"
+    es-object-atoms: "npm:^1.0.0"
+    es-set-tostringtag: "npm:^2.0.3"
+    es-to-primitive: "npm:^1.3.0"
+    function.prototype.name: "npm:^1.1.7"
+    get-intrinsic: "npm:^1.2.6"
+    get-symbol-description: "npm:^1.0.2"
+    globalthis: "npm:^1.0.4"
+    gopd: "npm:^1.2.0"
+    has-property-descriptors: "npm:^1.0.2"
+    has-proto: "npm:^1.2.0"
+    has-symbols: "npm:^1.1.0"
+    hasown: "npm:^2.0.2"
+    internal-slot: "npm:^1.1.0"
+    is-array-buffer: "npm:^3.0.4"
+    is-callable: "npm:^1.2.7"
+    is-data-view: "npm:^1.0.2"
+    is-negative-zero: "npm:^2.0.3"
+    is-regex: "npm:^1.2.1"
+    is-shared-array-buffer: "npm:^1.0.3"
+    is-string: "npm:^1.1.1"
+    is-typed-array: "npm:^1.1.13"
+    is-weakref: "npm:^1.1.0"
+    math-intrinsics: "npm:^1.0.0"
+    object-inspect: "npm:^1.13.3"
+    object-keys: "npm:^1.1.1"
+    object.assign: "npm:^4.1.5"
+    regexp.prototype.flags: "npm:^1.5.3"
+    safe-array-concat: "npm:^1.1.3"
+    safe-regex-test: "npm:^1.1.0"
+    string.prototype.trim: "npm:^1.2.10"
+    string.prototype.trimend: "npm:^1.0.9"
+    string.prototype.trimstart: "npm:^1.0.8"
+    typed-array-buffer: "npm:^1.0.2"
+    typed-array-byte-length: "npm:^1.0.1"
+    typed-array-byte-offset: "npm:^1.0.3"
+    typed-array-length: "npm:^1.0.7"
+    unbox-primitive: "npm:^1.0.2"
+    which-typed-array: "npm:^1.1.16"
+  checksum: 10c0/87c9cd85264f42e993ee2f7157c5e49c2866651bd7ff89a0799cc5bcfb962b19814e1f58c9970101072bab2a68a4fb859f094c6e8f161ba8042569431f0c1ec4
+  languageName: node
+  linkType: hard
+
+"es-abstract@npm:^1.23.2, es-abstract@npm:^1.23.5, es-abstract@npm:^1.23.6, es-abstract@npm:^1.23.9":
   version: 1.23.9
   resolution: "es-abstract@npm:1.23.9"
   dependencies:
@@ -10405,6 +10592,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"es-iterator-helpers@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "es-iterator-helpers@npm:1.2.1"
+  dependencies:
+    call-bind: "npm:^1.0.8"
+    call-bound: "npm:^1.0.3"
+    define-properties: "npm:^1.2.1"
+    es-abstract: "npm:^1.23.6"
+    es-errors: "npm:^1.3.0"
+    es-set-tostringtag: "npm:^2.0.3"
+    function-bind: "npm:^1.1.2"
+    get-intrinsic: "npm:^1.2.6"
+    globalthis: "npm:^1.0.4"
+    gopd: "npm:^1.2.0"
+    has-property-descriptors: "npm:^1.0.2"
+    has-proto: "npm:^1.2.0"
+    has-symbols: "npm:^1.1.0"
+    internal-slot: "npm:^1.1.0"
+    iterator.prototype: "npm:^1.1.4"
+    safe-array-concat: "npm:^1.1.3"
+  checksum: 10c0/97e3125ca472d82d8aceea11b790397648b52c26d8768ea1c1ee6309ef45a8755bb63225a43f3150c7591cffc17caf5752459f1e70d583b4184370a8f04ebd2f
+  languageName: node
+  linkType: hard
+
 "es-object-atoms@npm:^1.0.0, es-object-atoms@npm:^1.1.1":
   version: 1.1.1
   resolution: "es-object-atoms@npm:1.1.1"
@@ -10414,6 +10625,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"es-set-tostringtag@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "es-set-tostringtag@npm:2.0.3"
+  dependencies:
+    get-intrinsic: "npm:^1.2.4"
+    has-tostringtag: "npm:^1.0.2"
+    hasown: "npm:^2.0.1"
+  checksum: 10c0/f22aff1585eb33569c326323f0b0d175844a1f11618b86e193b386f8be0ea9474cfbe46df39c45d959f7aa8f6c06985dc51dd6bce5401645ec5a74c4ceaa836a
+  languageName: node
+  linkType: hard
+
 "es-set-tostringtag@npm:^2.1.0":
   version: 2.1.0
   resolution: "es-set-tostringtag@npm:2.1.0"
@@ -10426,6 +10648,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"es-shim-unscopables@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "es-shim-unscopables@npm:1.0.2"
+  dependencies:
+    hasown: "npm:^2.0.0"
+  checksum: 10c0/f495af7b4b7601a4c0cfb893581c352636e5c08654d129590386a33a0432cf13a7bdc7b6493801cadd990d838e2839b9013d1de3b880440cb537825e834fe783
+  languageName: node
+  linkType: hard
+
 "es-to-primitive@npm:^1.3.0":
   version: 1.3.0
   resolution: "es-to-primitive@npm:1.3.0"
@@ -10726,6 +10957,34 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-plugin-react@npm:^7.37.5":
+  version: 7.37.5
+  resolution: "eslint-plugin-react@npm:7.37.5"
+  dependencies:
+    array-includes: "npm:^3.1.8"
+    array.prototype.findlast: "npm:^1.2.5"
+    array.prototype.flatmap: "npm:^1.3.3"
+    array.prototype.tosorted: "npm:^1.1.4"
+    doctrine: "npm:^2.1.0"
+    es-iterator-helpers: "npm:^1.2.1"
+    estraverse: "npm:^5.3.0"
+    hasown: "npm:^2.0.2"
+    jsx-ast-utils: "npm:^2.4.1 || ^3.0.0"
+    minimatch: "npm:^3.1.2"
+    object.entries: "npm:^1.1.9"
+    object.fromentries: "npm:^2.0.8"
+    object.values: "npm:^1.2.1"
+    prop-types: "npm:^15.8.1"
+    resolve: "npm:^2.0.0-next.5"
+    semver: "npm:^6.3.1"
+    string.prototype.matchall: "npm:^4.0.12"
+    string.prototype.repeat: "npm:^1.0.0"
+  peerDependencies:
+    eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
+  checksum: 10c0/c850bfd556291d4d9234f5ca38db1436924a1013627c8ab1853f77cac73ec19b020e861e6c7b783436a48b6ffcdfba4547598235a37ad4611b6739f65fd8ad57
+  languageName: node
+  linkType: hard
+
 "eslint-scope@npm:^7.2.2":
   version: 7.2.2
   resolution: "eslint-scope@npm:7.2.2"
@@ -10848,7 +11107,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"estraverse@npm:^5.1.0, estraverse@npm:^5.2.0":
+"estraverse@npm:^5.1.0, estraverse@npm:^5.2.0, estraverse@npm:^5.3.0":
   version: 5.3.0
   resolution: "estraverse@npm:5.3.0"
   checksum: 10c0/1ff9447b96263dec95d6d67431c5e0771eb9776427421260a3e2f0fdd5d6bd4f8e37a7338f5ad2880c9f143450c9b1e4fc2069060724570a49cf9cf0312bd107
@@ -11688,6 +11947,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"function.prototype.name@npm:^1.1.7":
+  version: 1.1.7
+  resolution: "function.prototype.name@npm:1.1.7"
+  dependencies:
+    call-bind: "npm:^1.0.8"
+    define-properties: "npm:^1.2.1"
+    functions-have-names: "npm:^1.2.3"
+    hasown: "npm:^2.0.2"
+    is-callable: "npm:^1.2.7"
+  checksum: 10c0/f369f794099a9883e8253290d84a7a3e37ed9d4e2b185bdb3034fcfe02d6ee9dd72b41ea1e6e556c49bce897c535aa373b8e31dab5b018875cf9bc0a70c5215f
+  languageName: node
+  linkType: hard
+
 "functions-have-names@npm:^1.2.3":
   version: 1.2.3
   resolution: "functions-have-names@npm:1.2.3"
@@ -11739,7 +12011,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-intrinsic@npm:^1.2.4, get-intrinsic@npm:^1.2.5, get-intrinsic@npm:^1.2.6, get-intrinsic@npm:^1.2.7, get-intrinsic@npm:^1.3.0":
+"get-intrinsic@npm:^1.2.4, get-intrinsic@npm:^1.2.7, get-intrinsic@npm:^1.3.0":
   version: 1.3.0
   resolution: "get-intrinsic@npm:1.3.0"
   dependencies:
@@ -11757,6 +12029,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"get-intrinsic@npm:^1.2.5, get-intrinsic@npm:^1.2.6":
+  version: 1.2.6
+  resolution: "get-intrinsic@npm:1.2.6"
+  dependencies:
+    call-bind-apply-helpers: "npm:^1.0.1"
+    dunder-proto: "npm:^1.0.0"
+    es-define-property: "npm:^1.0.1"
+    es-errors: "npm:^1.3.0"
+    es-object-atoms: "npm:^1.0.0"
+    function-bind: "npm:^1.1.2"
+    gopd: "npm:^1.2.0"
+    has-symbols: "npm:^1.1.0"
+    hasown: "npm:^2.0.2"
+    math-intrinsics: "npm:^1.0.0"
+  checksum: 10c0/0f1ea6d807d97d074e8a31ac698213a12757fcfa9a8f4778263d2e4702c40fe83198aadd3dba2e99aabc2e4cf8a38345545dbb0518297d3df8b00b56a156c32a
+  languageName: node
+  linkType: hard
+
 "get-package-type@npm:^0.1.0":
   version: 0.1.0
   resolution: "get-package-type@npm:0.1.0"
@@ -11781,6 +12071,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"get-symbol-description@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "get-symbol-description@npm:1.0.2"
+  dependencies:
+    call-bind: "npm:^1.0.5"
+    es-errors: "npm:^1.3.0"
+    get-intrinsic: "npm:^1.2.4"
+  checksum: 10c0/867be6d63f5e0eb026cb3b0ef695ec9ecf9310febb041072d2e142f260bd91ced9eeb426b3af98791d1064e324e653424afa6fd1af17dee373bea48ae03162bc
+  languageName: node
+  linkType: hard
+
 "get-symbol-description@npm:^1.1.0":
   version: 1.1.0
   resolution: "get-symbol-description@npm:1.1.0"
@@ -12116,6 +12417,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"has-bigints@npm:^1.0.1":
+  version: 1.0.2
+  resolution: "has-bigints@npm:1.0.2"
+  checksum: 10c0/724eb1485bfa3cdff6f18d95130aa190561f00b3fcf9f19dc640baf8176b5917c143b81ec2123f8cddb6c05164a198c94b13e1377c497705ccc8e1a80306e83b
+  languageName: node
+  linkType: hard
+
 "has-bigints@npm:^1.0.2":
   version: 1.1.0
   resolution: "has-bigints@npm:1.1.0"
@@ -12153,7 +12461,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"has-proto@npm:^1.0.1":
+"has-proto@npm:^1.0.1, has-proto@npm:^1.0.3":
   version: 1.0.3
   resolution: "has-proto@npm:1.0.3"
   checksum: 10c0/35a6989f81e9f8022c2f4027f8b48a552de714938765d019dbea6bb547bd49ce5010a3c7c32ec6ddac6e48fc546166a3583b128f5a7add8b058a6d8b4afec205
@@ -12169,6 +12477,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"has-symbols@npm:^1.0.2":
+  version: 1.0.3
+  resolution: "has-symbols@npm:1.0.3"
+  checksum: 10c0/e6922b4345a3f37069cdfe8600febbca791c94988c01af3394d86ca3360b4b93928bbf395859158f88099cb10b19d98e3bbab7c9ff2c1bd09cf665ee90afa2c3
+  languageName: node
+  linkType: hard
+
 "has-symbols@npm:^1.0.3, has-symbols@npm:^1.1.0":
   version: 1.1.0
   resolution: "has-symbols@npm:1.1.0"
@@ -12195,7 +12510,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hasown@npm:^2.0.2":
+"hasown@npm:^2.0.0, hasown@npm:^2.0.1, hasown@npm:^2.0.2":
   version: 2.0.2
   resolution: "hasown@npm:2.0.2"
   dependencies:
@@ -12749,6 +13064,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-bigint@npm:^1.0.1":
+  version: 1.0.4
+  resolution: "is-bigint@npm:1.0.4"
+  dependencies:
+    has-bigints: "npm:^1.0.1"
+  checksum: 10c0/eb9c88e418a0d195ca545aff2b715c9903d9b0a5033bc5922fec600eb0c3d7b1ee7f882dbf2e0d5a6e694e42391be3683e4368737bd3c4a77f8ac293e7773696
+  languageName: node
+  linkType: hard
+
 "is-bigint@npm:^1.1.0":
   version: 1.1.0
   resolution: "is-bigint@npm:1.1.0"
@@ -12767,6 +13091,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-boolean-object@npm:^1.1.0":
+  version: 1.1.2
+  resolution: "is-boolean-object@npm:1.1.2"
+  dependencies:
+    call-bind: "npm:^1.0.2"
+    has-tostringtag: "npm:^1.0.0"
+  checksum: 10c0/6090587f8a8a8534c0f816da868bc94f32810f08807aa72fa7e79f7e11c466d281486ffe7a788178809c2aa71fe3e700b167fe80dd96dad68026bfff8ebf39f7
+  languageName: node
+  linkType: hard
+
 "is-boolean-object@npm:^1.2.1":
   version: 1.2.2
   resolution: "is-boolean-object@npm:1.2.2"
@@ -12901,19 +13235,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-generator-function@npm:^1.0.10":
-  version: 1.1.0
-  resolution: "is-generator-function@npm:1.1.0"
-  dependencies:
-    call-bound: "npm:^1.0.3"
-    get-proto: "npm:^1.0.0"
-    has-tostringtag: "npm:^1.0.2"
-    safe-regex-test: "npm:^1.1.0"
-  checksum: 10c0/fdfa96c8087bf36fc4cd514b474ba2ff404219a4dd4cfa6cf5426404a1eed259bdcdb98f082a71029a48d01f27733e3436ecc6690129a7ec09cb0434bee03a2a
-  languageName: node
-  linkType: hard
-
-"is-generator-function@npm:^1.0.7":
+"is-generator-function@npm:^1.0.10, is-generator-function@npm:^1.0.7":
   version: 1.0.10
   resolution: "is-generator-function@npm:1.0.10"
   dependencies:
@@ -12987,6 +13309,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-negative-zero@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "is-negative-zero@npm:2.0.3"
+  checksum: 10c0/bcdcf6b8b9714063ffcfa9929c575ac69bfdabb8f4574ff557dfc086df2836cf07e3906f5bbc4f2a5c12f8f3ba56af640c843cdfc74da8caed86c7c7d66fd08e
+  languageName: node
+  linkType: hard
+
+"is-number-object@npm:^1.0.4":
+  version: 1.0.7
+  resolution: "is-number-object@npm:1.0.7"
+  dependencies:
+    has-tostringtag: "npm:^1.0.0"
+  checksum: 10c0/aad266da1e530f1804a2b7bd2e874b4869f71c98590b3964f9d06cc9869b18f8d1f4778f838ecd2a11011bce20aeecb53cb269ba916209b79c24580416b74b1b
+  languageName: node
+  linkType: hard
+
 "is-number-object@npm:^1.1.1":
   version: 1.1.1
   resolution: "is-number-object@npm:1.1.1"
@@ -13081,6 +13419,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-shared-array-buffer@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "is-shared-array-buffer@npm:1.0.3"
+  dependencies:
+    call-bind: "npm:^1.0.7"
+  checksum: 10c0/adc11ab0acbc934a7b9e5e9d6c588d4ec6682f6fea8cda5180721704fa32927582ede5b123349e32517fdadd07958973d24716c80e7ab198970c47acc09e59c7
+  languageName: node
+  linkType: hard
+
 "is-shared-array-buffer@npm:^1.0.4":
   version: 1.0.4
   resolution: "is-shared-array-buffer@npm:1.0.4"
@@ -13097,6 +13444,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-string@npm:^1.0.5":
+  version: 1.0.7
+  resolution: "is-string@npm:1.0.7"
+  dependencies:
+    has-tostringtag: "npm:^1.0.0"
+  checksum: 10c0/905f805cbc6eedfa678aaa103ab7f626aac9ebbdc8737abb5243acaa61d9820f8edc5819106b8fcd1839e33db21de9f0116ae20de380c8382d16dc2a601921f6
+  languageName: node
+  linkType: hard
+
 "is-string@npm:^1.0.7, is-string@npm:^1.1.1":
   version: 1.1.1
   resolution: "is-string@npm:1.1.1"
@@ -13116,6 +13472,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-symbol@npm:^1.0.3":
+  version: 1.0.4
+  resolution: "is-symbol@npm:1.0.4"
+  dependencies:
+    has-symbols: "npm:^1.0.2"
+  checksum: 10c0/9381dd015f7c8906154dbcbf93fad769de16b4b961edc94f88d26eb8c555935caa23af88bda0c93a18e65560f6d7cca0fd5a3f8a8e1df6f1abbb9bead4502ef7
+  languageName: node
+  linkType: hard
+
 "is-symbol@npm:^1.0.4, is-symbol@npm:^1.1.1":
   version: 1.1.1
   resolution: "is-symbol@npm:1.1.1"
@@ -13205,7 +13570,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-weakref@npm:^1.0.2, is-weakref@npm:^1.1.0":
+"is-weakref@npm:^1.0.2":
   version: 1.1.1
   resolution: "is-weakref@npm:1.1.1"
   dependencies:
@@ -13214,6 +13579,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-weakref@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "is-weakref@npm:1.1.0"
+  dependencies:
+    call-bound: "npm:^1.0.2"
+  checksum: 10c0/aa835f62e29cb60132ecb3ec7d11bd0f39ec7322325abe8412b805aef47153ec2daefdb21759b049711c674f49b13202a31d8d126bcdff7d8671c78babd4ae5b
+  languageName: node
+  linkType: hard
+
 "is-weakset@npm:^2.0.3":
   version: 2.0.4
   resolution: "is-weakset@npm:2.0.4"
@@ -13398,6 +13772,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"iterator.prototype@npm:^1.1.4":
+  version: 1.1.5
+  resolution: "iterator.prototype@npm:1.1.5"
+  dependencies:
+    define-data-property: "npm:^1.1.4"
+    es-object-atoms: "npm:^1.0.0"
+    get-intrinsic: "npm:^1.2.6"
+    get-proto: "npm:^1.0.0"
+    has-symbols: "npm:^1.1.0"
+    set-function-name: "npm:^2.0.2"
+  checksum: 10c0/f7a262808e1b41049ab55f1e9c29af7ec1025a000d243b83edf34ce2416eedd56079b117fa59376bb4a724110690f13aa8427f2ee29a09eec63a7e72367626d0
+  languageName: node
+  linkType: hard
+
 "jackspeak@npm:^3.1.2":
   version: 3.4.3
   resolution: "jackspeak@npm:3.4.3"
@@ -14193,6 +14581,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jsx-ast-utils@npm:^2.4.1 || ^3.0.0":
+  version: 3.3.5
+  resolution: "jsx-ast-utils@npm:3.3.5"
+  dependencies:
+    array-includes: "npm:^3.1.6"
+    array.prototype.flat: "npm:^1.3.1"
+    object.assign: "npm:^4.1.4"
+    object.values: "npm:^1.1.6"
+  checksum: 10c0/a32679e9cb55469cb6d8bbc863f7d631b2c98b7fc7bf172629261751a6e7bc8da6ae374ddb74d5fbd8b06cf0eb4572287b259813d92b36e384024ed35e4c13e1
+  languageName: node
+  linkType: hard
+
 "jwt-decode@npm:^3.1.2":
   version: 3.1.2
   resolution: "jwt-decode@npm:3.1.2"
@@ -14620,7 +15020,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loose-envify@npm:^1.1.0":
+"loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0":
   version: 1.4.0
   resolution: "loose-envify@npm:1.4.0"
   dependencies:
@@ -14871,6 +15271,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"math-intrinsics@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "math-intrinsics@npm:1.0.0"
+  checksum: 10c0/470ee2f267b4b3698eb9faa7f0bcf88696d87e2eeab25bba867dc676c09ddbae9b6f2e8ac7a2c1f0c9c2c5299c2a89f4f1f6d0e70d682725e2e7fca7507eef9f
+  languageName: node
+  linkType: hard
+
 "math-intrinsics@npm:^1.1.0":
   version: 1.1.0
   resolution: "math-intrinsics@npm:1.1.0"
@@ -16160,6 +16567,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"object-assign@npm:^4.1.1":
+  version: 4.1.1
+  resolution: "object-assign@npm:4.1.1"
+  checksum: 10c0/1f4df9945120325d041ccf7b86f31e8bcc14e73d29171e37a7903050e96b81323784ec59f93f102ec635bcf6fa8034ba3ea0a8c7e69fa202b87ae3b6cec5a414
+  languageName: node
+  linkType: hard
+
 "object-extended@npm:0.0.7":
   version: 0.0.7
   resolution: "object-extended@npm:0.0.7"
@@ -16209,6 +16623,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"object.assign@npm:^4.1.5":
+  version: 4.1.5
+  resolution: "object.assign@npm:4.1.5"
+  dependencies:
+    call-bind: "npm:^1.0.5"
+    define-properties: "npm:^1.2.1"
+    has-symbols: "npm:^1.0.3"
+    object-keys: "npm:^1.1.1"
+  checksum: 10c0/60108e1fa2706f22554a4648299b0955236c62b3685c52abf4988d14fffb0e7731e00aa8c6448397e3eb63d087dcc124a9f21e1980f36d0b2667f3c18bacd469
+  languageName: node
+  linkType: hard
+
 "object.defaults@npm:^1.1.0":
   version: 1.1.0
   resolution: "object.defaults@npm:1.1.0"
@@ -16221,6 +16647,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"object.entries@npm:^1.1.9":
+  version: 1.1.9
+  resolution: "object.entries@npm:1.1.9"
+  dependencies:
+    call-bind: "npm:^1.0.8"
+    call-bound: "npm:^1.0.4"
+    define-properties: "npm:^1.2.1"
+    es-object-atoms: "npm:^1.1.1"
+  checksum: 10c0/d4b8c1e586650407da03370845f029aa14076caca4e4d4afadbc69cfb5b78035fd3ee7be417141abdb0258fa142e59b11923b4c44d8b1255b28f5ffcc50da7db
+  languageName: node
+  linkType: hard
+
+"object.fromentries@npm:^2.0.8":
+  version: 2.0.8
+  resolution: "object.fromentries@npm:2.0.8"
+  dependencies:
+    call-bind: "npm:^1.0.7"
+    define-properties: "npm:^1.2.1"
+    es-abstract: "npm:^1.23.2"
+    es-object-atoms: "npm:^1.0.0"
+  checksum: 10c0/cd4327e6c3369cfa805deb4cbbe919bfb7d3aeebf0bcaba291bb568ea7169f8f8cdbcabe2f00b40db0c20cd20f08e11b5f3a5a36fb7dd3fe04850c50db3bf83b
+  languageName: node
+  linkType: hard
+
 "object.getownpropertydescriptors@npm:^2.1.6":
   version: 2.1.8
   resolution: "object.getownpropertydescriptors@npm:2.1.8"
@@ -16255,6 +16705,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"object.values@npm:^1.1.6":
+  version: 1.2.0
+  resolution: "object.values@npm:1.2.0"
+  dependencies:
+    call-bind: "npm:^1.0.7"
+    define-properties: "npm:^1.2.1"
+    es-object-atoms: "npm:^1.0.0"
+  checksum: 10c0/15809dc40fd6c5529501324fec5ff08570b7d70fb5ebbe8e2b3901afec35cf2b3dc484d1210c6c642cd3e7e0a5e18dd1d6850115337fef46bdae14ab0cb18ac3
+  languageName: node
+  linkType: hard
+
+"object.values@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "object.values@npm:1.2.1"
+  dependencies:
+    call-bind: "npm:^1.0.8"
+    call-bound: "npm:^1.0.3"
+    define-properties: "npm:^1.2.1"
+    es-object-atoms: "npm:^1.0.0"
+  checksum: 10c0/3c47814fdc64842ae3d5a74bc9d06bdd8d21563c04d9939bf6716a9c00596a4ebc342552f8934013d1ec991c74e3671b26710a0c51815f0b603795605ab6b2c9
+  languageName: node
+  linkType: hard
+
 "once@npm:^1.3.0, once@npm:^1.4.0":
   version: 1.4.0
   resolution: "once@npm:1.4.0"
@@ -18130,6 +18603,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prop-types@npm:^15.8.1":
+  version: 15.8.1
+  resolution: "prop-types@npm:15.8.1"
+  dependencies:
+    loose-envify: "npm:^1.4.0"
+    object-assign: "npm:^4.1.1"
+    react-is: "npm:^16.13.1"
+  checksum: 10c0/59ece7ca2fb9838031d73a48d4becb9a7cc1ed10e610517c7d8f19a1e02fa47f7c27d557d8a5702bec3cfeccddc853579832b43f449e54635803f277b1c78077
+  languageName: node
+  linkType: hard
+
 "property-information@npm:^5.0.0":
   version: 5.6.0
   resolution: "property-information@npm:5.6.0"
@@ -18238,6 +18722,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-is@npm:^16.13.1":
+  version: 16.13.1
+  resolution: "react-is@npm:16.13.1"
+  checksum: 10c0/33977da7a5f1a287936a0c85639fec6ca74f4f15ef1e59a6bc20338fc73dc69555381e211f7a3529b8150a1f71e4225525b41b60b52965bda53ce7d47377ada1
+  languageName: node
+  linkType: hard
+
 "react-is@npm:^17.0.1":
   version: 17.0.2
   resolution: "react-is@npm:17.0.2"
@@ -18581,6 +19072,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"resolve@npm:^2.0.0-next.5":
+  version: 2.0.0-next.5
+  resolution: "resolve@npm:2.0.0-next.5"
+  dependencies:
+    is-core-module: "npm:^2.13.0"
+    path-parse: "npm:^1.0.7"
+    supports-preserve-symlinks-flag: "npm:^1.0.0"
+  bin:
+    resolve: bin/resolve
+  checksum: 10c0/a6c33555e3482ea2ec4c6e3d3bf0d78128abf69dca99ae468e64f1e30acaa318fd267fb66c8836b04d558d3e2d6ed875fe388067e7d8e0de647d3c21af21c43a
+  languageName: node
+  linkType: hard
+
 "resolve@patch:resolve@npm%3A^1.1.7#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.20.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.4#optional!builtin<compat/resolve>":
   version: 1.22.8
   resolution: "resolve@patch:resolve@npm%3A1.22.8#optional!builtin<compat/resolve>::version=1.22.8&hash=c3c19d"
@@ -18594,6 +19098,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"resolve@patch:resolve@npm%3A^2.0.0-next.5#optional!builtin<compat/resolve>":
+  version: 2.0.0-next.5
+  resolution: "resolve@patch:resolve@npm%3A2.0.0-next.5#optional!builtin<compat/resolve>::version=2.0.0-next.5&hash=c3c19d"
+  dependencies:
+    is-core-module: "npm:^2.13.0"
+    path-parse: "npm:^1.0.7"
+    supports-preserve-symlinks-flag: "npm:^1.0.0"
+  bin:
+    resolve: bin/resolve
+  checksum: 10c0/78ad6edb8309a2bfb720c2c1898f7907a37f858866ce11a5974643af1203a6a6e05b2fa9c53d8064a673a447b83d42569260c306d43628bff5bb101969708355
+  languageName: node
+  linkType: hard
+
 "restore-cursor@npm:^3.1.0":
   version: 3.1.0
   resolution: "restore-cursor@npm:3.1.0"
@@ -19499,6 +20016,37 @@ __metadata:
   languageName: node
   linkType: hard
 
+"string.prototype.matchall@npm:^4.0.12":
+  version: 4.0.12
+  resolution: "string.prototype.matchall@npm:4.0.12"
+  dependencies:
+    call-bind: "npm:^1.0.8"
+    call-bound: "npm:^1.0.3"
+    define-properties: "npm:^1.2.1"
+    es-abstract: "npm:^1.23.6"
+    es-errors: "npm:^1.3.0"
+    es-object-atoms: "npm:^1.0.0"
+    get-intrinsic: "npm:^1.2.6"
+    gopd: "npm:^1.2.0"
+    has-symbols: "npm:^1.1.0"
+    internal-slot: "npm:^1.1.0"
+    regexp.prototype.flags: "npm:^1.5.3"
+    set-function-name: "npm:^2.0.2"
+    side-channel: "npm:^1.1.0"
+  checksum: 10c0/1a53328ada73f4a77f1fdf1c79414700cf718d0a8ef6672af5603e709d26a24f2181208144aed7e858b1bcc1a0d08567a570abfb45567db4ae47637ed2c2f85c
+  languageName: node
+  linkType: hard
+
+"string.prototype.repeat@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "string.prototype.repeat@npm:1.0.0"
+  dependencies:
+    define-properties: "npm:^1.1.3"
+    es-abstract: "npm:^1.17.5"
+  checksum: 10c0/94c7978566cffa1327d470fd924366438af9b04b497c43a9805e476e2e908aa37a1fd34cc0911156c17556dab62159d12c7b92b3cc304c3e1281fe4c8e668f40
+  languageName: node
+  linkType: hard
+
 "string.prototype.trim@npm:^1.2.10":
   version: 1.2.10
   resolution: "string.prototype.trim@npm:1.2.10"
@@ -20359,6 +20907,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typed-array-buffer@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "typed-array-buffer@npm:1.0.2"
+  dependencies:
+    call-bind: "npm:^1.0.7"
+    es-errors: "npm:^1.3.0"
+    is-typed-array: "npm:^1.1.13"
+  checksum: 10c0/9e043eb38e1b4df4ddf9dde1aa64919ae8bb909571c1cc4490ba777d55d23a0c74c7d73afcdd29ec98616d91bb3ae0f705fad4421ea147e1daf9528200b562da
+  languageName: node
+  linkType: hard
+
 "typed-array-buffer@npm:^1.0.3":
   version: 1.0.3
   resolution: "typed-array-buffer@npm:1.0.3"
@@ -20370,6 +20929,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typed-array-byte-length@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "typed-array-byte-length@npm:1.0.1"
+  dependencies:
+    call-bind: "npm:^1.0.7"
+    for-each: "npm:^0.3.3"
+    gopd: "npm:^1.0.1"
+    has-proto: "npm:^1.0.3"
+    is-typed-array: "npm:^1.1.13"
+  checksum: 10c0/fcebeffb2436c9f355e91bd19e2368273b88c11d1acc0948a2a306792f1ab672bce4cfe524ab9f51a0505c9d7cd1c98eff4235c4f6bfef6a198f6cfc4ff3d4f3
+  languageName: node
+  linkType: hard
+
 "typed-array-byte-length@npm:^1.0.3":
   version: 1.0.3
   resolution: "typed-array-byte-length@npm:1.0.3"
@@ -20383,6 +20955,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typed-array-byte-offset@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "typed-array-byte-offset@npm:1.0.3"
+  dependencies:
+    available-typed-arrays: "npm:^1.0.7"
+    call-bind: "npm:^1.0.7"
+    for-each: "npm:^0.3.3"
+    gopd: "npm:^1.0.1"
+    has-proto: "npm:^1.0.3"
+    is-typed-array: "npm:^1.1.13"
+    reflect.getprototypeof: "npm:^1.0.6"
+  checksum: 10c0/5da29585f96671c0521475226d3227000b3e01d1e99208b66bb05b75c7c8f4d0e9cc2e79920f3bfbc792a00102df1daa2608a2753e3f291b671d5a80245bde5b
+  languageName: node
+  linkType: hard
+
 "typed-array-byte-offset@npm:^1.0.4":
   version: 1.0.4
   resolution: "typed-array-byte-offset@npm:1.0.4"
@@ -20477,6 +21064,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unbox-primitive@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "unbox-primitive@npm:1.0.2"
+  dependencies:
+    call-bind: "npm:^1.0.2"
+    has-bigints: "npm:^1.0.2"
+    has-symbols: "npm:^1.0.3"
+    which-boxed-primitive: "npm:^1.0.2"
+  checksum: 10c0/81ca2e81134167cc8f75fa79fbcc8a94379d6c61de67090986a2273850989dd3bae8440c163121b77434b68263e34787a675cbdcb34bb2f764c6b9c843a11b66
+  languageName: node
+  linkType: hard
+
 "unbox-primitive@npm:^1.1.0":
   version: 1.1.0
   resolution: "unbox-primitive@npm:1.1.0"
@@ -20977,6 +21576,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"which-boxed-primitive@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "which-boxed-primitive@npm:1.0.2"
+  dependencies:
+    is-bigint: "npm:^1.0.1"
+    is-boolean-object: "npm:^1.1.0"
+    is-number-object: "npm:^1.0.4"
+    is-string: "npm:^1.0.5"
+    is-symbol: "npm:^1.0.3"
+  checksum: 10c0/0a62a03c00c91dd4fb1035b2f0733c341d805753b027eebd3a304b9cb70e8ce33e25317add2fe9b5fea6f53a175c0633ae701ff812e604410ddd049777cd435e
+  languageName: node
+  linkType: hard
+
 "which-boxed-primitive@npm:^1.1.0, which-boxed-primitive@npm:^1.1.1":
   version: 1.1.1
   resolution: "which-boxed-primitive@npm:1.1.1"