From dbf1406822be32aa1dbd2864b097853423bf06d8 Mon Sep 17 00:00:00 2001
From: Josh Winn <965114+jawinn@users.noreply.github.com>
Date: Tue, 14 May 2024 09:51:58 -0400
Subject: [PATCH] feat: define missing color property in some components
 (#2754)

* docs(meter): use typography in storybook for heading

Use typography template in Meter storybook. Helps make sure that color
is set on this heading without coming from higher up in the DOM, and
completes code TODO item.

* feat: define color property in some components

During the work to create a single entry point for PostCSS, it was
discovered that parts of several components did not define a color, and
instead relied on a color being set higher up in the DOM. This update
sets a color on some of these and adds mods where necessary.
---
 .changeset/new-sheep-bathe.md                 |   11 +
 components/datepicker/index.css               |  521 ++++----
 components/datepicker/metadata/mods.md        |    1 +
 .../progressbar/stories/meter.template.js     |   11 +-
 components/radio/index.css                    |  794 +++++------
 components/slider/index.css                   | 1176 ++++++++---------
 components/slider/metadata/mods.md            |    1 +
 components/splitview/index.css                |  399 +++---
 components/splitview/metadata/mods.md         |    1 +
 components/treeview/index.css                 |  575 ++++----
 components/well/index.css                     |   24 +-
 components/well/metadata/mods.md              |    1 +
 12 files changed, 1714 insertions(+), 1801 deletions(-)
 create mode 100644 .changeset/new-sheep-bathe.md

diff --git a/.changeset/new-sheep-bathe.md b/.changeset/new-sheep-bathe.md
new file mode 100644
index 0000000000..51a0f3f2d9
--- /dev/null
+++ b/.changeset/new-sheep-bathe.md
@@ -0,0 +1,11 @@
+---
+"@spectrum-css/datepicker": minor
+"@spectrum-css/splitview": minor
+"@spectrum-css/treeview": minor
+"@spectrum-css/slider": minor
+"@spectrum-css/radio": minor
+"@spectrum-css/well": minor
+"@spectrum-css/progressbar": patch
+---
+
+Sets the `color` property in parts of some components that were relying on inheriting a color from higher up in the DOM.
diff --git a/components/datepicker/index.css b/components/datepicker/index.css
index 362ce4b424..be305ceb30 100644
--- a/components/datepicker/index.css
+++ b/components/datepicker/index.css
@@ -13,302 +13,307 @@ governing permissions and limitations under the License.
 @import "./themes/express.css";
 
 .spectrum-DatePicker {
-  --spectrum-datepicker-border-radius: var(--spectrum-corner-radius-100);
-  --spectrum-datepicker-border-radius-quiet: 0;
-  --spectrum-datepicker-border-width: var(--spectrum-border-width-100);
-  --spectrum-datepicker-min-width: var(--spectrum-field-width);
-  --spectrum-datepicker-icon-size: var(--spectrum-workflow-icon-size-100);
-
-  /* button */
-  --spectrum-datepicker-pickerbutton-border-color: var(--spectrum-gray-500);
-  --spectrum-datepicker-pickerbutton-border-color-invalid: var(--spectrum-negative-border-color-default);
-  --spectrum-datepicker-pickerbutton-width: calc((var(--spectrum-field-edge-to-disclosure-icon-100) * 2) + var(--spectrum-workflow-icon-size-100));
-  --spectrum-datepicker-pickerbutton-width-quiet: calc(var(--spectrum-datepicker-pickerbutton-width) - var(--spectrum-datepicker-quiet-button-offset));
-  --spectrum-datepicker-quiet-button-offset: var(--spectrum-text-to-visual-100);
-  --spectrum-datepicker-icon-to-button: var(--spectrum-text-to-visual-100);
-  --spectrum-datepicker-icon-to-text: var(--spectrum-component-edge-to-text-100);
-
-  /* focus */
-  --spectrum-datepicker-focus-ring-gap: var(--spectrum-focus-indicator-gap);
-  --spectrum-datepicker-focus-thickness: var(--spectrum-focus-indicator-thickness);
-  --spectrum-datepicker-focus-animation: var(--spectrum-animation-duration-100);
-  --spectrum-datepicker-focus-ring-width: var(--spectrum-border-width-100);
-  --spectrum-datepicker-focus-ring-color: var(--spectrum-focus-indicator-color);
-  --spectrum-datepicker-focus-line-gap: var(--spectrum-spacing-75);
-
-  /* color */
-  --spectrum-datepicker-invalid-quiet-color: var(--spectrum-negative-border-color-default);
-  --spectrum-datepicker-quiet-border-color-hover: var(--spectrum-gray-500);
-  --spectrum-datepicker-border-color-disabled: var(--spectrum-disabled-border-color);
-
-  /* dash */
-  --spectrum-datepicker-dash-font-size: var(--spectrum-font-size-100);
-  --spectrum-datepicker-dash-color-disabled: var(--spectrum-disabled-content-color);
-  --spectrum-datepicker-range-dash-marin-inline-start: calc( -0.5 * var(--spectrum-datepicker-dash-font-size));
-  --spectrum-datepicker-range-dash-padding-top: 0;
-
-  /* calculating widths */
-  /* todo: if we add t-shirt sizing, this will be wrong ❤️ */
-  --spectrum-datepicker-input-width-base: calc(var(--spectrum-datepicker-range-input-width-first) + var(--spectrum-datepicker-icon-size));
-  --spectrum-datepicker-input-width: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-initial-height));
-  --spectrum-datepicker-input-width-quiet: calc(var(--spectrum-datepicker-range-input-width-quiet-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height));
-
-  --spectrum-datepicker-range-input-width-first: calc(var(--spectrum-datepicker-initial-width) - 2 * var(--spectrum-datepicker-generic-padding));
-  --spectrum-datepicker-range-input-width-quiet-first: calc(var(--spectrum-datepicker-width-quiet-first) + var(--spectrum-datepicker-width-quiet-second));
-
-  --spectrum-datepicker-datetime-input-width-first: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-datetime-width-first));
-  --spectrum-datepicker-datetime-input-width: calc(var(--spectrum-datepicker-datetime-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height));
-  --spectrum-datepicker-datetime-quiet-input-width-first: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-input-datetime-width));
-  --spectrum-datepicker-datetime-quiet-input-width: calc(var(--spectrum-datepicker-datetime-quiet-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height));
-
-  /* padding inline end */
-  --spectrum-datepicker-padding-inline-end:  calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - (var(--spectrum-datepicker-border-width) * 2));
-  --spectrum-datepicker-padding-inline-end-quiet: calc((var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100)) - var(--spectrum-datepicker-quiet-button-offset));
-  --spectrum-datepicker-padding-inline-end-invalid: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) + var(--spectrum-datepicker-icon-to-button) + var(--spectrum-datepicker-icon-size) - (var(--spectrum-datepicker-border-width) * 2));
-  --spectrum-datepicker-padding-inline-end-invalid-quiet: calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-icon-to-text));
+	--spectrum-datepicker-border-radius: var(--spectrum-corner-radius-100);
+	--spectrum-datepicker-border-radius-quiet: 0;
+	--spectrum-datepicker-border-width: var(--spectrum-border-width-100);
+	--spectrum-datepicker-min-width: var(--spectrum-field-width);
+	--spectrum-datepicker-icon-size: var(--spectrum-workflow-icon-size-100);
+
+	/* button */
+	--spectrum-datepicker-pickerbutton-border-color: var(--spectrum-gray-500);
+	--spectrum-datepicker-pickerbutton-border-color-invalid: var(--spectrum-negative-border-color-default);
+	--spectrum-datepicker-pickerbutton-width: calc((var(--spectrum-field-edge-to-disclosure-icon-100) * 2) + var(--spectrum-workflow-icon-size-100));
+	--spectrum-datepicker-pickerbutton-width-quiet: calc(var(--spectrum-datepicker-pickerbutton-width) - var(--spectrum-datepicker-quiet-button-offset));
+	--spectrum-datepicker-quiet-button-offset: var(--spectrum-text-to-visual-100);
+	--spectrum-datepicker-icon-to-button: var(--spectrum-text-to-visual-100);
+	--spectrum-datepicker-icon-to-text: var(--spectrum-component-edge-to-text-100);
+
+	/* focus */
+	--spectrum-datepicker-focus-ring-gap: var(--spectrum-focus-indicator-gap);
+	--spectrum-datepicker-focus-thickness: var(--spectrum-focus-indicator-thickness);
+	--spectrum-datepicker-focus-animation: var(--spectrum-animation-duration-100);
+	--spectrum-datepicker-focus-ring-width: var(--spectrum-border-width-100);
+	--spectrum-datepicker-focus-ring-color: var(--spectrum-focus-indicator-color);
+	--spectrum-datepicker-focus-line-gap: var(--spectrum-spacing-75);
+
+	/* color */
+	--spectrum-datepicker-invalid-quiet-color: var(--spectrum-negative-border-color-default);
+	--spectrum-datepicker-quiet-border-color-hover: var(--spectrum-gray-500);
+	--spectrum-datepicker-border-color-disabled: var(--spectrum-disabled-border-color);
+
+	/* dash */
+	--spectrum-datepicker-dash-font-size: var(--spectrum-font-size-100);
+	--spectrum-datepicker-dash-color: var(--spectrum-neutral-content-color-default);
+	--spectrum-datepicker-dash-color-disabled: var(--spectrum-disabled-content-color);
+	--spectrum-datepicker-range-dash-marin-inline-start: calc(-0.5 * var(--spectrum-datepicker-dash-font-size));
+	--spectrum-datepicker-range-dash-padding-top: 0;
+
+	/* calculating widths */
+	/* todo: if we add t-shirt sizing, this will be wrong ❤️ */
+	--spectrum-datepicker-input-width-base: calc(var(--spectrum-datepicker-range-input-width-first) + var(--spectrum-datepicker-icon-size));
+	--spectrum-datepicker-input-width: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-initial-height));
+	--spectrum-datepicker-input-width-quiet: calc(var(--spectrum-datepicker-range-input-width-quiet-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height));
+
+	--spectrum-datepicker-range-input-width-first: calc(var(--spectrum-datepicker-initial-width) - 2 * var(--spectrum-datepicker-generic-padding));
+	--spectrum-datepicker-range-input-width-quiet-first: calc(var(--spectrum-datepicker-width-quiet-first) + var(--spectrum-datepicker-width-quiet-second));
+
+	--spectrum-datepicker-datetime-input-width-first: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-datetime-width-first));
+	--spectrum-datepicker-datetime-input-width: calc(var(--spectrum-datepicker-datetime-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height));
+	--spectrum-datepicker-datetime-quiet-input-width-first: calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-input-datetime-width));
+	--spectrum-datepicker-datetime-quiet-input-width: calc(var(--spectrum-datepicker-datetime-quiet-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height));
+
+	/* padding inline end */
+	--spectrum-datepicker-padding-inline-end: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - (var(--spectrum-datepicker-border-width) * 2));
+	--spectrum-datepicker-padding-inline-end-quiet: calc((var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100)) - var(--spectrum-datepicker-quiet-button-offset));
+	--spectrum-datepicker-padding-inline-end-invalid: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) + var(--spectrum-datepicker-icon-to-button) + var(--spectrum-datepicker-icon-size) - (var(--spectrum-datepicker-border-width) * 2));
+	--spectrum-datepicker-padding-inline-end-invalid-quiet: calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-icon-to-text));
 }
 
 .spectrum-DatePicker {
-  position: relative;
-  display: inline-flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  min-inline-size: var(--mod-datepicker-min-width, var(--spectrum-datepicker-min-width));
-  border-radius: var(--mod-datepicker-border-radius, var(--spectrum-datepicker-border-radius));
-
-  &.is-disabled {
-    .spectrum-DatePicker-rangeDash {
-      color: var(--highcontrast-datepicker-dash-color-disabled, var(--mod-datepicker-dash-color-disabled, var(--spectrum-datepicker-dash-color-disabled)))
-    }
-  }
-
-  &.is-invalid {
-    --mod-textfield-icon-spacing-inline-end-invalid: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-datepicker-invalid-icon-to-button));
-    --mod-textfield-icon-spacing-inline-end-quiet-invalid: calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-invalid-icon-to-button-quiet));
-  }
+	position: relative;
+	display: inline-flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	min-inline-size: var(--mod-datepicker-min-width, var(--spectrum-datepicker-min-width));
+	border-radius: var(--mod-datepicker-border-radius, var(--spectrum-datepicker-border-radius));
+
+	&.is-disabled {
+		.spectrum-DatePicker-rangeDash {
+			color: var(--highcontrast-datepicker-dash-color-disabled, var(--mod-datepicker-dash-color-disabled, var(--spectrum-datepicker-dash-color-disabled)));
+		}
+	}
+
+	&.is-invalid {
+		--mod-textfield-icon-spacing-inline-end-invalid: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-datepicker-invalid-icon-to-button));
+		--mod-textfield-icon-spacing-inline-end-quiet-invalid: calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-invalid-icon-to-button-quiet));
+	}
 }
 
 .spectrum-DatePicker:not(.spectrum-DatePicker--quiet, .is-disabled) {
-  /* ensures picker button border color matches the textfield border color */
-  --mod-picker-button-border-color: var(--highcontrast-datepicker-pickerbutton-border-color, var(--mod-datepicker-pickerbutton-border-color, var(--spectrum-datepicker-pickerbutton-border-color)));
+	/* ensures picker button border color matches the textfield border color */
+	--mod-picker-button-border-color: var(--highcontrast-datepicker-pickerbutton-border-color, var(--mod-datepicker-pickerbutton-border-color, var(--spectrum-datepicker-pickerbutton-border-color)));
 
-  &.is-invalid {
-    --mod-picker-button-border-color: var(--highcontrast-datepicker-pickerbutton-border-color, var(--mod-datepicker-pickerbutton-border-color-invalid, var(--spectrum-datepicker-pickerbutton-border-color-invalid)));
-  }
+	&.is-invalid {
+		--mod-picker-button-border-color: var(--highcontrast-datepicker-pickerbutton-border-color, var(--mod-datepicker-pickerbutton-border-color-invalid, var(--spectrum-datepicker-pickerbutton-border-color-invalid)));
+	}
 }
 
 /* input padding inline end */
 /* standard and range  */
 .spectrum-DatePicker-input {
-  padding-inline-end: var(--mod-datepicker-padding-inline, var(--spectrum-datepicker-padding-inline-end));
+	padding-inline-end: var(--mod-datepicker-padding-inline, var(--spectrum-datepicker-padding-inline-end));
 
-  &.spectrum-DatePicker-endField {
-    padding-inline-end: var(--mod-datepicker-padding-inline, var(--spectrum-datepicker-padding-inline-end));
-  }
+	&.spectrum-DatePicker-endField {
+		padding-inline-end: var(--mod-datepicker-padding-inline, var(--spectrum-datepicker-padding-inline-end));
+	}
 }
 
 /* standard and range invalid */
 .is-invalid .spectrum-DatePicker-input {
-    padding-inline-end: var(--mod-datepicker-padding-inline-end-invalid, var(--spectrum-datepicker-padding-inline-end-invalid));
+	padding-inline-end: var(--mod-datepicker-padding-inline-end-invalid, var(--spectrum-datepicker-padding-inline-end-invalid));
 }
 
 /* quiet */
 .spectrum-DatePicker--quiet {
-  .spectrum-DatePicker-input {
-    padding-inline-end: var(--mod-datepicker-padding-inline-end-quiet, var(--spectrum-datepicker-padding-inline-end-quiet));
-  }
-
-  /* quiet invalid and quiet range invalid */
-  .is-invalid .spectrum-DatePicker-input:not(.spectrum-DatePicker-startField) {
-    padding-inline-end: var(--mod-datepicker-padding-inline-end-invalid-quiet, var(--spectrum-datepicker-padding-inline-end-invalid-quiet));
-  }
+	.spectrum-DatePicker-input {
+		padding-inline-end: var(--mod-datepicker-padding-inline-end-quiet, var(--spectrum-datepicker-padding-inline-end-quiet));
+	}
+
+	/* quiet invalid and quiet range invalid */
+	.is-invalid .spectrum-DatePicker-input:not(.spectrum-DatePicker-startField) {
+		padding-inline-end: var(--mod-datepicker-padding-inline-end-invalid-quiet, var(--spectrum-datepicker-padding-inline-end-invalid-quiet));
+	}
 }
 
 /* quiet range */
 .spectrum-DatePicker--quiet .spectrum-DatePicker-input {
-  &.spectrum-DatePicker-endField {
-    padding-inline-end: var(--mod-datepicker-padding-inline-end-quiet, var(--spectrum-datepicker-padding-inline-end-quiet));
-  }
+	&.spectrum-DatePicker-endField {
+		padding-inline-end: var(--mod-datepicker-padding-inline-end-quiet, var(--spectrum-datepicker-padding-inline-end-quiet));
+	}
 }
 
 .spectrum-DatePicker-button {
-  /* Be above textfield so box shadow shines through */
-  position: absolute;
-  inset-inline-end: 0;
+	/* Be above textfield so box shadow shines through */
+	position: absolute;
+	inset-inline-end: 0;
 }
 
 .spectrum-DatePicker--quiet {
-  border-radius: var(--mod-datepicker-border-radius-quiet, var(--spectrum-datepicker-border-radius-quiet));
-
-  .spectrum-DatePicker-button {
-    inline-size: auto;
-    inset-inline-end: calc(-1 * var(--mod-datepicker-quiet-button-offset, var(--spectrum-datepicker-quiet-button-offset)));
-
-    &:disabled,
-    &:disabled:hover {
-      border-color: var(--mod-datepicker-border-color-disabled, var(--spectrum-datepicker-border-color-disabled));
-    }
-
-    &:disabled:not(.is-open) {
-      .spectrum-PickerButton-fill {
-        border-color: transparent;
-      }
-    }
-
-    &:not(:disabled, .is-open) {
-      .spectrum-PickerButton-fill {
-        background-color: transparent;
-      }
-    }
-  }
-
-  &:hover:not(.is-focused, .is-keyboardFocused, .is-disabled, .is-invalid) {
-    .spectrum-DatePicker-input,
-    .spectrum-DatePicker-button {
-      border-color: var(--mod-datepicker-quiet-border-color-hover, var(--spectrum-datepicker-quiet-border-color-hover));
-    }
-  }
-
-  /* invalid bottom border color */
-  &.is-invalid {
-    .spectrum-DatePicker-input,
-    .spectrum-DatePicker-button {
-      border-color: var(--highcontrast-datepicker-invalid-quiet-color, var(--mod-datepicker-invalid-quiet-color, var(--spectrum-datepicker-invalid-quiet-color)));
-    }
-  }
+	border-radius: var(--mod-datepicker-border-radius-quiet, var(--spectrum-datepicker-border-radius-quiet));
+
+	.spectrum-DatePicker-button {
+		inline-size: auto;
+		inset-inline-end: calc(-1 * var(--mod-datepicker-quiet-button-offset, var(--spectrum-datepicker-quiet-button-offset)));
+
+		&:disabled,
+		&:disabled:hover {
+			border-color: var(--mod-datepicker-border-color-disabled, var(--spectrum-datepicker-border-color-disabled));
+		}
+
+		&:disabled:not(.is-open) {
+			.spectrum-PickerButton-fill {
+				border-color: transparent;
+			}
+		}
+
+		&:not(:disabled, .is-open) {
+			.spectrum-PickerButton-fill {
+				background-color: transparent;
+			}
+		}
+	}
+
+	&:hover:not(.is-focused, .is-keyboardFocused, .is-disabled, .is-invalid) {
+		.spectrum-DatePicker-input,
+		.spectrum-DatePicker-button {
+			border-color: var(--mod-datepicker-quiet-border-color-hover, var(--spectrum-datepicker-quiet-border-color-hover));
+		}
+	}
+
+	/* invalid bottom border color */
+	&.is-invalid {
+		.spectrum-DatePicker-input,
+		.spectrum-DatePicker-button {
+			border-color: var(--highcontrast-datepicker-invalid-quiet-color, var(--mod-datepicker-invalid-quiet-color, var(--spectrum-datepicker-invalid-quiet-color)));
+		}
+	}
 }
 
 .spectrum-DatePicker--range {
-  border-radius: var(--mod-datepicker-border-radius, var(--spectrum-datepicker-border-radius));
-
-  /* focus-ring */
-  &::after {
-    pointer-events: none;
-    content: '';
-    position: absolute;
-    inset: 0;
-    margin: calc(var(--mod-datepicker-focus-ring-gap, var(--spectrum-datepicker-focus-ring-gap)) * -1);
-    border-radius: calc(var(--mod-datepicker-border-radius, var(--spectrum-datepicker-border-radius)) + var(--mod-datepicker-focus-ring-gap, var(--spectrum-datepicker-focus-ring-gap)));
-    border-color: transparent;
-    transition: box-shadow var(--mod-datepicker-focus-animation, var(--spectrum-datepicker-focus-animation)) ease-in-out, border-color var(--mod-datepicker-focus-animation, var(--spectrum-datepicker-focus-animation)) ease-in-out;
-  }
-
-  &.is-keyboardFocused:not(.spectrum-DatePicker--quiet) {
-    &::after {
-      box-shadow: 0 0 0 var(--mod-datepicker-focus-ring-width, var(--spectrum-datepicker-focus-ring-width)) var(--highcontrast-datepicker-focus-ring-color, var(--mod-datepicker-focus-ring-color, var(--spectrum-datepicker-focus-ring-color)));
-    }
-
-    .spectrum-DatePicker-textfield::after {
-      display: none;
-    }
-  }
-
-  &.is-keyboardFocused.spectrum-DatePicker--quiet {
-    /* quiet variant bottom border focus indicator */
-    &::after {
-      margin: 0;
-      box-shadow: none;
-      border-radius: 0;
-      border-block-end: var(--mod-datepicker-focus-thickness, var(--spectrum-datepicker-focus-thickness)) solid var(--highcontrast-datepicker-focus-ring-color, var(--mod-datepicker-focus-ring-color, var(--spectrum-datepicker-focus-ring-color)));
-      inset-block-end: calc(-1 * var(--mod-datepicker-focus-line-gap, var(--spectrum-datepicker-focus-line-gap)));
-    }
-  }
-
-  /* Input Group */
-  &.spectrum-DatePicker--quiet {
-    border-radius: var(--mod-datepicker-border-radius-quiet, var(--spectrum-datepicker-border-radius-quiet));
-
-    .spectrum-DatePicker-textfield {
-      min-inline-size: 0;
-      inline-size: var(--mod-datepicker-input-width-quiet, var(--spectrum-datepicker-input-width-quiet));
-
-      &:first-of-type {
-        inline-size: var(--mod-datepicker-range-input-width-quiet-first, var(--spectrum-datepicker-range-input-width-quiet-first));
-      }
-    }
-  }
-
-  /* Datetime Range */
-  &.spectrum-DatePicker--datetimeRange {
-    /* Inputs */
-    .spectrum-DatePicker-textfield {
-      inline-size: var(--mod-datepicker-datetime-input-width, var(--spectrum-datepicker-datetime-input-width));
-      min-inline-size: 0;
-
-      &:first-of-type {
-        inline-size: var(--mod-datepicker-datetime-input-width-first, var(--spectrum-datepicker-datetime-input-width-first));
-      }
-    }
-
-    &.spectrum-DatePicker--quiet {
-      .spectrum-DatePicker-textfield {
-        inline-size: var(--mod-datepicker-datetime-quiet-input-width, var(--spectrum-datepicker-datetime-quiet-input-width));
-
-        &:first-of-type {
-          inline-size:  var(--mod-datepicker-datetime-quiet-input-width-first, var(--spectrum-datepicker-datetime-quiet-input-width-first));
-        }
-      }
-    }
-  }
-
-  /* Inputs */
-  .spectrum-DatePicker-textfield {
-    flex: initial;
-    min-inline-size: 0;
-    inline-size: var(--mod-datepicker-input-width, var(--spectrum-datepicker-input-width));
-
-    &:first-of-type {
-      inline-size: var(--mod-datepicker-range-input-width-first, var(--spectrum-datepicker-range-input-width-first));
-    }
-  }
+	border-radius: var(--mod-datepicker-border-radius, var(--spectrum-datepicker-border-radius));
+
+	/* focus-ring */
+	&::after {
+		pointer-events: none;
+		content: "";
+		position: absolute;
+		inset: 0;
+		margin: calc(var(--mod-datepicker-focus-ring-gap, var(--spectrum-datepicker-focus-ring-gap)) * -1);
+		border-radius: calc(var(--mod-datepicker-border-radius, var(--spectrum-datepicker-border-radius)) + var(--mod-datepicker-focus-ring-gap, var(--spectrum-datepicker-focus-ring-gap)));
+		border-color: transparent;
+		transition:
+			box-shadow var(--mod-datepicker-focus-animation, var(--spectrum-datepicker-focus-animation)) ease-in-out,
+			border-color var(--mod-datepicker-focus-animation, var(--spectrum-datepicker-focus-animation)) ease-in-out;
+	}
+
+	&.is-keyboardFocused:not(.spectrum-DatePicker--quiet) {
+		&::after {
+			box-shadow: 0 0 0 var(--mod-datepicker-focus-ring-width, var(--spectrum-datepicker-focus-ring-width)) var(--highcontrast-datepicker-focus-ring-color, var(--mod-datepicker-focus-ring-color, var(--spectrum-datepicker-focus-ring-color)));
+		}
+
+		.spectrum-DatePicker-textfield::after {
+			display: none;
+		}
+	}
+
+	&.is-keyboardFocused.spectrum-DatePicker--quiet {
+		/* quiet variant bottom border focus indicator */
+		&::after {
+			margin: 0;
+			box-shadow: none;
+			border-radius: 0;
+			border-block-end: var(--mod-datepicker-focus-thickness, var(--spectrum-datepicker-focus-thickness)) solid var(--highcontrast-datepicker-focus-ring-color, var(--mod-datepicker-focus-ring-color, var(--spectrum-datepicker-focus-ring-color)));
+			inset-block-end: calc(-1 * var(--mod-datepicker-focus-line-gap, var(--spectrum-datepicker-focus-line-gap)));
+		}
+	}
+
+	/* Input Group */
+	&.spectrum-DatePicker--quiet {
+		border-radius: var(--mod-datepicker-border-radius-quiet, var(--spectrum-datepicker-border-radius-quiet));
+
+		.spectrum-DatePicker-textfield {
+			min-inline-size: 0;
+			inline-size: var(--mod-datepicker-input-width-quiet, var(--spectrum-datepicker-input-width-quiet));
+
+			&:first-of-type {
+				inline-size: var(--mod-datepicker-range-input-width-quiet-first, var(--spectrum-datepicker-range-input-width-quiet-first));
+			}
+		}
+	}
+
+	/* Datetime Range */
+	&.spectrum-DatePicker--datetimeRange {
+		/* Inputs */
+		.spectrum-DatePicker-textfield {
+			inline-size: var(--mod-datepicker-datetime-input-width, var(--spectrum-datepicker-datetime-input-width));
+			min-inline-size: 0;
+
+			&:first-of-type {
+				inline-size: var(--mod-datepicker-datetime-input-width-first, var(--spectrum-datepicker-datetime-input-width-first));
+			}
+		}
+
+		&.spectrum-DatePicker--quiet {
+			.spectrum-DatePicker-textfield {
+				inline-size: var(--mod-datepicker-datetime-quiet-input-width, var(--spectrum-datepicker-datetime-quiet-input-width));
+
+				&:first-of-type {
+					inline-size: var(--mod-datepicker-datetime-quiet-input-width-first, var(--spectrum-datepicker-datetime-quiet-input-width-first));
+				}
+			}
+		}
+	}
+
+	/* Inputs */
+	.spectrum-DatePicker-textfield {
+		flex: initial;
+		min-inline-size: 0;
+		inline-size: var(--mod-datepicker-input-width, var(--spectrum-datepicker-input-width));
+
+		&:first-of-type {
+			inline-size: var(--mod-datepicker-range-input-width-first, var(--spectrum-datepicker-range-input-width-first));
+		}
+	}
 }
 
-  .spectrum-DatePicker-input {
-    /* fill space */
-    flex: 1;
-    inline-size: 100%;
-
-    &.spectrum-DatePicker-startField {
-      border-inline-end: 0;
-      border-start-end-radius: 0;
-      border-end-end-radius: 0;
-      padding-inline-end: var(--mod-datepicker-generic-padding, var(--spectrum-datepicker-generic-padding));
-    }
-
-    &.spectrum-DatePicker-endField {
-      border-inline-start: 0;
-      border-start-start-radius: 0;
-      border-end-start-radius: 0;
-      padding-inline-start: var(--mod-datepicker-generic-padding, var(--spectrum-datepicker-generic-padding));
-    }
-  }
-
-  /* "-" between inputs */
-  .spectrum-DatePicker-rangeDash {
-    line-height: var(--mod-datepicker-dash-line-height, var(--spectrum-datepicker-dash-line-height));
-    padding-block-start: var(--mod-datepicker-range-dash-padding-top, var(--spectrum-datepicker-range-dash-padding-top));
-    flex: initial;
-    inline-size: 0;
-    z-index: 1;
-
-    &::before {
-      content: "–";
-      display: inline-block;
-      margin-block: 0;
-      margin-inline: var(--mod-datepicker-range-dash-margin-left, var(--spectrum-datepicker-range-dash-marin-inline-start));
-      overflow: hidden;
-      text-align: center;
-      vertical-align: middle;
-      inline-size: var(--mod-datepicker-dash-font-size, var(--spectrum-datepicker-dash-font-size));
-    }
-  }
+.spectrum-DatePicker-input {
+	/* fill space */
+	flex: 1;
+	inline-size: 100%;
+
+	&.spectrum-DatePicker-startField {
+		border-inline-end: 0;
+		border-start-end-radius: 0;
+		border-end-end-radius: 0;
+		padding-inline-end: var(--mod-datepicker-generic-padding, var(--spectrum-datepicker-generic-padding));
+	}
+
+	&.spectrum-DatePicker-endField {
+		border-inline-start: 0;
+		border-start-start-radius: 0;
+		border-end-start-radius: 0;
+		padding-inline-start: var(--mod-datepicker-generic-padding, var(--spectrum-datepicker-generic-padding));
+	}
+}
+
+/* "-" between inputs */
+.spectrum-DatePicker-rangeDash {
+	color: var(--highcontrast-datepicker-dash-color, var(--mod-datepicker-dash-color, var(--spectrum-datepicker-dash-color)));
+	line-height: var(--mod-datepicker-dash-line-height, var(--spectrum-datepicker-dash-line-height));
+	padding-block-start: var(--mod-datepicker-range-dash-padding-top, var(--spectrum-datepicker-range-dash-padding-top));
+	flex: initial;
+	inline-size: 0;
+	z-index: 1;
+
+	&::before {
+		content: "–";
+		display: inline-block;
+		margin-block: 0;
+		margin-inline: var(--mod-datepicker-range-dash-margin-left, var(--spectrum-datepicker-range-dash-marin-inline-start));
+		overflow: hidden;
+		text-align: center;
+		vertical-align: middle;
+		inline-size: var(--mod-datepicker-dash-font-size, var(--spectrum-datepicker-dash-font-size));
+	}
+}
 
 /********* WHCM *********/
 @media (forced-colors: active) {
 	.spectrum-DatePicker {
-    --highcontrast-datepicker-dash-color-disabled: GrayText;
-    --highcontrast-datepicker-focus-ring-color: Highlight;
-    --highcontrast-datepicker-pickerbutton-border-color: Highlight;
-    --highcontrast-datepicker-invalid-quiet-color: Highlight;
-  	}
+		--highcontrast-datepicker-dash-color: CanvasText;
+		--highcontrast-datepicker-dash-color-disabled: GrayText;
+		--highcontrast-datepicker-focus-ring-color: Highlight;
+		--highcontrast-datepicker-pickerbutton-border-color: Highlight;
+		--highcontrast-datepicker-invalid-quiet-color: Highlight;
+	}
 }
diff --git a/components/datepicker/metadata/mods.md b/components/datepicker/metadata/mods.md
index d6c467088c..e92f2d8bad 100644
--- a/components/datepicker/metadata/mods.md
+++ b/components/datepicker/metadata/mods.md
@@ -3,6 +3,7 @@
 | `--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`                  |
diff --git a/components/progressbar/stories/meter.template.js b/components/progressbar/stories/meter.template.js
index c88707fee9..cc9011016a 100644
--- a/components/progressbar/stories/meter.template.js
+++ b/components/progressbar/stories/meter.template.js
@@ -3,6 +3,7 @@ import { classMap } from "lit/directives/class-map.js";
 import { styleMap } from "lit/directives/style-map.js";
 
 import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js";
+import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
 
 import "../index.css";
 
@@ -10,9 +11,6 @@ export const Template = ({
 	rootClass = "spectrum-ProgressBar",
 	customClasses = [],
 	customStyles = {},
-	headingStyles = {
-		"text-decoration": "underline",
-	},
 	items = [],
 	label = "Storage space",
 	value,
@@ -25,9 +23,12 @@ export const Template = ({
 	const meterLabel = meter.label ?? label;
 	const fill = meter.meterFill ?? meterFill;
 
-	// @todo: Should the heading content render through typography?
 	return html`
-	<p style=${styleMap(headingStyles)}>${heading}</p>
+	${Typography({
+		semantics: "heading",
+		size: "xs",
+		content: [heading],
+	})}
 	<div
 		class=${classMap({
 			[rootClass]: true,
diff --git a/components/radio/index.css b/components/radio/index.css
index 3256d3091f..b7fd10bbed 100644
--- a/components/radio/index.css
+++ b/components/radio/index.css
@@ -12,479 +12,417 @@ governing permissions and limitations under the License.
 
 @import "./themes/express.css";
 
-/* radio/index.css
- *
- * ::before is to style the input circle
- * ::after is to style the Focus ring
- *
+/*
+ * Radio:
+ *  ::before is to style the input circle (selection indicator)
+ *  ::after is to style the focus ring
  */
 
 .spectrum-Radio {
-  /* state colors for all themes */
-  --spectrum-radio-neutral-content-color: var(--spectrum-neutral-content-color-default);
-  --spectrum-radio-neutral-content-color-hover: var(--spectrum-neutral-content-color-hover);
-  --spectrum-radio-neutral-content-color-down: var(--spectrum-neutral-content-color-down);
-  --spectrum-radio-neutral-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
-
-  /* focus ring all themes */
-  --spectrum-radio-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
-  --spectrum-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
-  --spectrum-radio-focus-indicator-color: var(--spectrum-focus-indicator-color);
-
-  /* disabled all themes */
-  --spectrum-radio-disabled-content-color: var(--spectrum-disabled-content-color);
-  --spectrum-radio-disabled-border-color: var(--spectrum-disabled-content-color);
-
-  /* emphasized state colors selection indicator all themes */
-  --spectrum-radio-emphasized-accent-color: var(--spectrum-accent-color-900);
-  --spectrum-radio-emphasized-accent-color-hover: var(--spectrum-accent-color-1000);
-  --spectrum-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100);
-  --spectrum-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000);
-
-  /* selection indicator all themes */
-  --spectrum-radio-border-width: var(--spectrum-border-width-200);
-  --spectrum-radio-button-background-color: var(--spectrum-gray-75);
-
-  /* checked selection indicator */
-  --spectrum-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default);
-  --spectrum-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover);
-  --spectrum-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down);
-  --spectrum-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-focus);
-
-  /* spacing all themes */
-  --spectrum-radio-text-to-control: var(--spectrum-text-to-control-100);
-  --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-100);
-  --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
-
-  /* text styles all themes */
-  --spectrum-radio-font-size: var(--spectrum-font-size-100);
-  --spectrum-radio-line-height: var(--spectrum-line-height-100);
-
-  /* animation all themes */
-  --spectrum-radio-animation-duration: var(--spectrum-animation-duration-100);
-
-  /* CJK language support all themes */
-  &:lang(ja),
-  &:lang(zh),
-  &:lang(ko) {
-    --spectrum-radio-line-height-cjk: var(--spectrum-cjk-line-height-100);
-  }
-
-  /* default radio size for no t-shirt size */
-  --spectrum-radio-height: var(--spectrum-component-height-100);
-  --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-medium);
-
-  /* default radio spacing for no t-shirt size */
-  --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium);
+	/* state colors for all themes */
+	--spectrum-radio-neutral-content-color: var(--spectrum-neutral-content-color-default);
+	--spectrum-radio-neutral-content-color-hover: var(--spectrum-neutral-content-color-hover);
+	--spectrum-radio-neutral-content-color-down: var(--spectrum-neutral-content-color-down);
+	--spectrum-radio-neutral-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
+
+	/* focus ring all themes */
+	--spectrum-radio-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
+	--spectrum-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
+	--spectrum-radio-focus-indicator-color: var(--spectrum-focus-indicator-color);
+
+	/* disabled all themes */
+	--spectrum-radio-disabled-content-color: var(--spectrum-disabled-content-color);
+	--spectrum-radio-disabled-border-color: var(--spectrum-disabled-content-color);
+
+	/* emphasized state colors selection indicator all themes */
+	--spectrum-radio-emphasized-accent-color: var(--spectrum-accent-color-900);
+	--spectrum-radio-emphasized-accent-color-hover: var(--spectrum-accent-color-1000);
+	--spectrum-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100);
+	--spectrum-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000);
+
+	/* selection indicator all themes */
+	--spectrum-radio-border-width: var(--spectrum-border-width-200);
+	--spectrum-radio-button-background-color: var(--spectrum-gray-75);
+
+	/* checked selection indicator */
+	--spectrum-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default);
+	--spectrum-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover);
+	--spectrum-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down);
+	--spectrum-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-focus);
+
+	/* spacing all themes */
+	--spectrum-radio-text-to-control: var(--spectrum-text-to-control-100);
+	--spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-100);
+	--spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
+
+	/* text styles all themes */
+	--spectrum-radio-font-size: var(--spectrum-font-size-100);
+	--spectrum-radio-line-height: var(--spectrum-line-height-100);
+
+	/* animation all themes */
+	--spectrum-radio-animation-duration: var(--spectrum-animation-duration-100);
+
+	/* CJK language support all themes */
+	&:lang(ja),
+	&:lang(zh),
+	&:lang(ko) {
+		--spectrum-radio-line-height-cjk: var(--spectrum-cjk-line-height-100);
+	}
+
+	/* default radio size for no t-shirt size */
+	--spectrum-radio-height: var(--spectrum-component-height-100);
+	--spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-medium);
+
+	/* default radio spacing for no t-shirt size */
+	--spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium);
 }
 
 .spectrum-Radio--sizeS {
-  --spectrum-radio-height: var(--spectrum-component-height-75);
-  --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-small);
+	--spectrum-radio-height: var(--spectrum-component-height-75);
+	--spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-small);
 
-  --spectrum-radio-text-to-control: var(--spectrum-text-to-control-75);
-  --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-75);
-  --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
-  --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-small);
+	--spectrum-radio-text-to-control: var(--spectrum-text-to-control-75);
+	--spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-75);
+	--spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
+	--spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-small);
 
-  --spectrum-radio-font-size: var(--spectrum-font-size-75);
+	--spectrum-radio-font-size: var(--spectrum-font-size-75);
 }
 
 .spectrum-Radio--sizeM {
-  --spectrum-radio-height: var(--spectrum-component-height-100);
-  --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-medium);
+	--spectrum-radio-height: var(--spectrum-component-height-100);
+	--spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-medium);
 
-  --spectrum-radio-text-to-control: var(--spectrum-text-to-control-100);
-  --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-100);
-  --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
-  --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium);
+	--spectrum-radio-text-to-control: var(--spectrum-text-to-control-100);
+	--spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-100);
+	--spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
+	--spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium);
 
-  --spectrum-radio-font-size: var(--spectrum-font-size-100);
+	--spectrum-radio-font-size: var(--spectrum-font-size-100);
 }
 
 .spectrum-Radio--sizeL {
-  --spectrum-radio-height: var(--spectrum-component-height-200);
-  --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-large);
+	--spectrum-radio-height: var(--spectrum-component-height-200);
+	--spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-large);
 
-  --spectrum-radio-text-to-control: var(--spectrum-text-to-control-200);
-  --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-200);
-  --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
-  --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-large);
+	--spectrum-radio-text-to-control: var(--spectrum-text-to-control-200);
+	--spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-200);
+	--spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
+	--spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-large);
 
-  --spectrum-radio-font-size: var(--spectrum-font-size-200);
+	--spectrum-radio-font-size: var(--spectrum-font-size-200);
 }
 
 .spectrum-Radio--sizeXL {
-  --spectrum-radio-height: var(--spectrum-component-height-300);
-  --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-extra-large);
+	--spectrum-radio-height: var(--spectrum-component-height-300);
+	--spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-extra-large);
 
-  --spectrum-radio-text-to-control: var(--spectrum-text-to-control-300);
-  --spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-300);
-  --spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-300);
-  --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-extra-large);
+	--spectrum-radio-text-to-control: var(--spectrum-text-to-control-300);
+	--spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-300);
+	--spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-300);
+	--spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-extra-large);
 
-  --spectrum-radio-font-size: var(--spectrum-font-size-300);
+	--spectrum-radio-font-size: var(--spectrum-font-size-300);
 }
 
-
-
 /* windows high contrast mode */
 @media (forced-colors: active) {
-  .spectrum-Radio {
-    /* high contrast text */
-    --highcontrast-radio-neutral-content-color: CanvasText;
-    --highcontrast-radio-neutral-content-color-hover: CanvasText;
-    --highcontrast-radio-neutral-content-color-down: CanvasText;
-    --highcontrast-radio-neutral-content-color-focus: CanvasText;
-
-     /* high contrast selector */
-    --highcontrast-radio-button-border-color-default: ButtonText;
-    --highcontrast-radio-button-border-color-hover: Highlight;
-    --highcontrast-radio-button-border-color-down: ButtonText;
-    --highcontrast-radio-button-border-color-focus: Highlight;
-
-    /* high contrast emphasized selector */
-    --highcontrast-radio-emphasized-accent-color: ButtonText;
-    --highcontrast-radio-emphasized-accent-color-hover: Highlight;
-    --highcontrast-radio-emphasized-accent-color-down: ButtonText;
-    --highcontrast-radio-emphasized-accent-color-focus: Highlight;
-
-    /* high contrast checked selector */
-    --highcontrast-radio-button-checked-border-color-default: Highlight;
-    --highcontrast-radio-button-checked-border-color-hover: Highlight;
-    --highcontrast-radio-button-checked-border-color-down: Highlight;
-    --highcontrast-radio-button-checked-border-color-focus: Highlight;
-
-    /* high contrast disabled text */
-    --highcontrast-radio-disabled-content-color: GrayText;
-
-    /* high contrast disabled selector */
-    --highcontrast-radio-disabled-border-color: GrayText;
-
-    /* high contrast focus ring */
-     --highcontrast-radio-focus-indicator-color: CanvasText;
-
-    /* ensure focus ring is visible if user agent has non-accessible system overrides */
-    .spectrum-Radio-button {
-      &::after {
-        forced-color-adjust: none;
-      }
-    }
-  }
+	.spectrum-Radio {
+		/* high contrast text */
+		--highcontrast-radio-neutral-content-color: CanvasText;
+		--highcontrast-radio-neutral-content-color-hover: CanvasText;
+		--highcontrast-radio-neutral-content-color-down: CanvasText;
+		--highcontrast-radio-neutral-content-color-focus: CanvasText;
+
+		/* high contrast selector */
+		--highcontrast-radio-button-border-color-default: ButtonText;
+		--highcontrast-radio-button-border-color-hover: Highlight;
+		--highcontrast-radio-button-border-color-down: ButtonText;
+		--highcontrast-radio-button-border-color-focus: Highlight;
+
+		/* high contrast emphasized selector */
+		--highcontrast-radio-emphasized-accent-color: ButtonText;
+		--highcontrast-radio-emphasized-accent-color-hover: Highlight;
+		--highcontrast-radio-emphasized-accent-color-down: ButtonText;
+		--highcontrast-radio-emphasized-accent-color-focus: Highlight;
+
+		/* high contrast checked selector */
+		--highcontrast-radio-button-checked-border-color-default: Highlight;
+		--highcontrast-radio-button-checked-border-color-hover: Highlight;
+		--highcontrast-radio-button-checked-border-color-down: Highlight;
+		--highcontrast-radio-button-checked-border-color-focus: Highlight;
+
+		/* high contrast disabled text */
+		--highcontrast-radio-disabled-content-color: GrayText;
+
+		/* high contrast disabled selector */
+		--highcontrast-radio-disabled-border-color: GrayText;
+
+		/* high contrast focus ring */
+		--highcontrast-radio-focus-indicator-color: CanvasText;
+
+		/* ensure focus ring is visible if user agent has non-accessible system overrides */
+		.spectrum-Radio-button {
+			&::after {
+				forced-color-adjust: none;
+			}
+		}
+	}
 }
 
 .spectrum-Radio {
-  display: inline-flex;
-  align-items: flex-start;
-  position: relative;
-  vertical-align: top;
-
-  min-block-size: var(--mod-radio-height, var(--spectrum-radio-height));
-  max-inline-size: 100%;
-
-  &:hover {
-    /* selection indicator hover */
-    .spectrum-Radio-button::before {
-      border-color: var(--highcontrast-radio-button-border-color-hover,
-                      var(--mod-radio-button-border-color-hover,
-                        var(--spectrum-radio-button-border-color-hover)));
-    }
-
-    /* checked selection indicator hover */
-    .spectrum-Radio-input:checked + .spectrum-Radio-button::before {
-      border-color: var(--highcontrast-radio-button-checked-border-color-hover,
-                        var(--mod-radio-button-checked-border-color-hover,
-                            var(--spectrum-radio-button-checked-border-color-hover)));
-    }
-
-    .spectrum-Radio-label {
-      color: var(--highcontrast-radio-neutral-content-color-hover,
-                var(--mod-radio-neutral-content-color-hover,
-                    var(--spectrum-radio-neutral-content-color-hover)));
-    }
-  }
-
-  &:active {
-    /* selection indicator active */
-    .spectrum-Radio-button::before {
-      border-color: var(--highcontrast-radio-button-border-color-down,
-                        var(--mod-radio-button-border-color-down,
-                            var(--spectrum-radio-button-border-color-down)));
-    }
-
-    /* checked selection indicator active */
-    .spectrum-Radio-input:checked + .spectrum-Radio-button::before {
-      border-color: var(--highcontrast-radio-button-checked-border-color-down,
-                      var(--mod-radio-button-checked-border-color-down,
-                          var(--spectrum-radio-button-checked-border-color-down)));
-    }
-
-    .spectrum-Radio-label {
-      color: var(--highcontrast-radio-neutral-content-color-down,
-                var(--mod-radio-neutral-content-color-down,
-                    var(--spectrum-radio-neutral-content-color-down)));
-    }
-  }
-
-  &:focus {
-    /* selection indicator is focused state */
-    .spectrum-Radio-button::before {
-      border-color: var(--highcontrast-radio-button-border-color-focus,
-                        var(--mod-radio-button-border-color-focus,
-                            var(--spectrum-radio-button-border-color-focus)));
-    }
-
-    /* focus ring is focused state */
-    .spectrum-Radio-button::after {
-      border-style: solid;
-      border-color: var(--highcontrast-radio-focus-indicator-color,
-                        var(--mod-radio-focus-indicator-color,
-                            var(--spectrum-radio-focus-indicator-color)));
-      border-width: var(--mod-radio-focus-indicator-thickness,
-                        var(--spectrum-radio-focus-indicator-thickness));
-
-      inline-size: calc(var(--spectrum-radio-button-control-size) + (var(--spectrum-radio-focus-indicator-gap) * 2));
-      block-size: calc(var(--spectrum-radio-button-control-size) + (var(--spectrum-radio-focus-indicator-gap) * 2));
-    }
-
-    /* selected selection indicator is focused state */
-    .spectrum-Radio-input:checked + .spectrum-Radio-button::before {
-      border-color: var(--highcontrast-radio-button-checked-border-color-focus,
-                        var(--mod-radio-button-checked-border-color-focus,
-                            var(--spectrum-radio-button-checked-border-color-focus)));
-    }
-
-    .spectrum-Radio-label {
-      color: var(--highcontrast-radio-neutral-content-color-focus,
-                var(--mod-radio-neutral-content-color-focus,
-                    var(--spectrum-radio-neutral-content-color-focus)));
-    }
-  }
-
-  &.is-readOnly {
-    .spectrum-Radio-input:read-only {
-      cursor: initial;
-    }
-
-    /* hide selection indicator */
-    & .spectrum-Radio-button {
-      position: fixed;
-      inset-inline-end: 100%;
-      inset-block-end: 100%;
-      clip: rect(1px, 1px, 1px, 1px);
-      clip-path: inset(50%);
-    }
-
-    .spectrum-Radio-label,
+	display: inline-flex;
+	align-items: flex-start;
+	position: relative;
+	vertical-align: top;
+
+	min-block-size: var(--mod-radio-height, var(--spectrum-radio-height));
+	max-inline-size: 100%;
+
+	&:hover {
+		/* selection indicator hover */
+		.spectrum-Radio-button::before {
+			border-color: var(--highcontrast-radio-button-border-color-hover, var(--mod-radio-button-border-color-hover, var(--spectrum-radio-button-border-color-hover)));
+		}
+
+		/* checked selection indicator hover */
+		.spectrum-Radio-input:checked + .spectrum-Radio-button::before {
+			border-color: var(--highcontrast-radio-button-checked-border-color-hover, var(--mod-radio-button-checked-border-color-hover, var(--spectrum-radio-button-checked-border-color-hover)));
+		}
+
+		.spectrum-Radio-label {
+			color: var(--highcontrast-radio-neutral-content-color-hover, var(--mod-radio-neutral-content-color-hover, var(--spectrum-radio-neutral-content-color-hover)));
+		}
+	}
+
+	&:active {
+		/* selection indicator active */
+		.spectrum-Radio-button::before {
+			border-color: var(--highcontrast-radio-button-border-color-down, var(--mod-radio-button-border-color-down, var(--spectrum-radio-button-border-color-down)));
+		}
+
+		/* checked selection indicator active */
+		.spectrum-Radio-input:checked + .spectrum-Radio-button::before {
+			border-color: var(--highcontrast-radio-button-checked-border-color-down, var(--mod-radio-button-checked-border-color-down, var(--spectrum-radio-button-checked-border-color-down)));
+		}
+
+		.spectrum-Radio-label {
+			color: var(--highcontrast-radio-neutral-content-color-down, var(--mod-radio-neutral-content-color-down, var(--spectrum-radio-neutral-content-color-down)));
+		}
+	}
+
+	&:focus {
+		/* selection indicator is focused state */
+		.spectrum-Radio-button::before {
+			border-color: var(--highcontrast-radio-button-border-color-focus, var(--mod-radio-button-border-color-focus, var(--spectrum-radio-button-border-color-focus)));
+		}
+
+		/* focus ring is focused state */
+		.spectrum-Radio-button::after {
+			border-style: solid;
+			border-color: var(--highcontrast-radio-focus-indicator-color, var(--mod-radio-focus-indicator-color, var(--spectrum-radio-focus-indicator-color)));
+			border-width: var(--mod-radio-focus-indicator-thickness, var(--spectrum-radio-focus-indicator-thickness));
+
+			inline-size: calc(var(--spectrum-radio-button-control-size) + (var(--spectrum-radio-focus-indicator-gap) * 2));
+			block-size: calc(var(--spectrum-radio-button-control-size) + (var(--spectrum-radio-focus-indicator-gap) * 2));
+		}
+
+		/* selected selection indicator is focused state */
+		.spectrum-Radio-input:checked + .spectrum-Radio-button::before {
+			border-color: var(--highcontrast-radio-button-checked-border-color-focus, var(--mod-radio-button-checked-border-color-focus, var(--spectrum-radio-button-checked-border-color-focus)));
+		}
+
+		.spectrum-Radio-label {
+			color: var(--highcontrast-radio-neutral-content-color-focus, var(--mod-radio-neutral-content-color-focus, var(--spectrum-radio-neutral-content-color-focus)));
+		}
+	}
+
+	&.is-readOnly {
+		.spectrum-Radio-input:read-only {
+			cursor: initial;
+		}
+
+		/* hide selection indicator */
+		& .spectrum-Radio-button {
+			position: fixed;
+			inset-inline-end: 100%;
+			inset-block-end: 100%;
+			clip: rect(1px, 1px, 1px, 1px);
+			clip-path: inset(50%);
+		}
+
+		.spectrum-Radio-label,
     /* ensure disabled readonly has normal text color */
     & .spectrum-Radio-input:disabled ~ .spectrum-Radio-label,
     & .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label {
-      margin-inline-start: auto;
-      color: inherit;
-    }
-  }
+			margin-inline-start: auto;
+			color: var(--highcontrast-radio-neutral-content-color, var(--mod-radio-neutral-content-color, var(--spectrum-radio-neutral-content-color)));
+		}
+	}
 }
 
 .spectrum-Radio--emphasized {
-  /* selection indicator emphasized */
-  .spectrum-Radio-input:checked + .spectrum-Radio-button::before {
-    border-color: var(--highcontrast-radio-emphasized-accent-color,
-                      var(--mod-radio-emphasized-accent-color,
-                          var(--spectrum-radio-emphasized-accent-color)));
-  }
-
-  /* selection indicator emphasized hover */
-  &:hover .spectrum-Radio-input:checked + .spectrum-Radio-button::before {
-    border-color: var(--highcontrast-radio-emphasized-accent-color-hover,
-                      var(--mod-radio-emphasized-accent-color-hover,
-                          var(--spectrum-radio-emphasized-accent-color-hover)));
-  }
-
-  /* selection indicator emphasized active */
-  &:active .spectrum-Radio-input:checked + .spectrum-Radio-button::before {
-    border-color: var(--highcontrast-radio-emphasized-accent-color-down,
-                      var(--mod-radio-emphasized-accent-color-down,
-                          var(--spectrum-radio-emphasized-accent-color-down)));
-  }
-
-  /* selection indicator emphasized focus */
-  &:focus .spectrum-Radio-input:checked + .spectrum-Radio-button::before {
-    border-color: var(--highcontrast-radio-emphasized-accent-color-focus,
-                      var(--mod-radio-emphasized-accent-color-focus,
-                          var(--spectrum-radio-emphasized-accent-color-focus)));
-  }
+	/* selection indicator emphasized */
+	.spectrum-Radio-input:checked + .spectrum-Radio-button::before {
+		border-color: var(--highcontrast-radio-emphasized-accent-color, var(--mod-radio-emphasized-accent-color, var(--spectrum-radio-emphasized-accent-color)));
+	}
+
+	/* selection indicator emphasized hover */
+	&:hover .spectrum-Radio-input:checked + .spectrum-Radio-button::before {
+		border-color: var(--highcontrast-radio-emphasized-accent-color-hover, var(--mod-radio-emphasized-accent-color-hover, var(--spectrum-radio-emphasized-accent-color-hover)));
+	}
+
+	/* selection indicator emphasized active */
+	&:active .spectrum-Radio-input:checked + .spectrum-Radio-button::before {
+		border-color: var(--highcontrast-radio-emphasized-accent-color-down, var(--mod-radio-emphasized-accent-color-down, var(--spectrum-radio-emphasized-accent-color-down)));
+	}
+
+	/* selection indicator emphasized focus */
+	&:focus .spectrum-Radio-input:checked + .spectrum-Radio-button::before {
+		border-color: var(--highcontrast-radio-emphasized-accent-color-focus, var(--mod-radio-emphasized-accent-color-focus, var(--spectrum-radio-emphasized-accent-color-focus)));
+	}
 }
 
-/* selection indicator disabled */
-.spectrum-Radio .spectrum-Radio-input,
-.spectrum-Radio .spectrum-Radio-input:checked {
-  &:disabled + .spectrum-Radio-button {
-    &::before {
-      border-color: var(--highcontrast-radio-disabled-border-color,
-                        var(--mod-radio-disabled-border-color,
-                            var(--spectrum-radio-disabled-border-color)));
-    }
-  }
-
- /* label disabled */
-  &:disabled ~ .spectrum-Radio-label {
-    color: var(--highcontrast-radio-disabled-content-color,
-              var(--mod-radio-disabled-content-color,
-                  var(--spectrum-radio-disabled-content-color)));
-  }
+/* Disabled state */
+.spectrum-Radio .spectrum-Radio-input:disabled,
+.spectrum-Radio .spectrum-Radio-input:checked:disabled {
+	/* selection indicator */
+	& + .spectrum-Radio-button::before {
+		border-color: var(--highcontrast-radio-disabled-border-color, var(--mod-radio-disabled-border-color, var(--spectrum-radio-disabled-border-color)));
+	}
+
+	& ~ .spectrum-Radio-label {
+		color: var(--highcontrast-radio-disabled-content-color, var(--mod-radio-disabled-content-color, var(--spectrum-radio-disabled-content-color)));
+	}
 }
 
 .spectrum-Radio-input {
-  /* Change the font styles in all browsers for input. */
-  font-family: inherit;
-  font-size: 100%;
-  line-height: var(--mod-radio-line-height,
-                  var(--spectrum-radio-line-height));
-
-  /* Remove the margin for input in Firefox and Safari. */
-  margin: 0;
-
-  /* Show the overflow for input in Edge. */
-  overflow: visible;
-
-  /* Add the correct box sizing for [type="radio"] in IE 10-. */
-  box-sizing: border-box;
-
-  /* Remove the padding for [type="radio"] in IE 10-. */
-  padding: 0;
-
-  position: absolute;
-  inline-size: 100%;
-  block-size: 100%;
-
-  opacity: 0;
-  z-index: 1;
-
-  cursor: pointer;
-
-  &:disabled {
-    cursor: default;
-  }
-
-  /* selection indicator checked */
-  &:checked + .spectrum-Radio-button {
-    &::before {
-      /* half of element width minus half of indicator width is checked border width */
-      border-width: calc((var(--spectrum-radio-button-control-size) / 2) - (var(--spectrum-radio-button-selection-indicator) / 2));
-      border-color: var(--highcontrast-radio-button-checked-border-color-default,
-                        var(--mod-radio-button-checked-border-color-default,
-                            var(--spectrum-radio-button-checked-border-color-default)));
-    }
-  }
-
-  /* focused state */
-  &:focus-visible {
-    + .spectrum-Radio-button::after {
-      border-width: var(--mod-radio-focus-indicator-thickness,
-                        var(--spectrum-radio-focus-indicator-thickness));
-      border-color: var(--highcontrast-radio-focus-indicator-color,
-                        var(--mod-radio-focus-indicator-color,
-                            var(--spectrum-radio-focus-indicator-color)));
-      border-style: solid;
-
-      inline-size: calc(var(--spectrum-radio-button-control-size) + (var(--spectrum-radio-focus-indicator-gap) * 2));
-      block-size: calc(var(--spectrum-radio-button-control-size) + (var(--spectrum-radio-focus-indicator-gap) * 2));
-    }
-  }
+	/* Change the font styles in all browsers for input. */
+	font-family: inherit;
+	font-size: 100%;
+	line-height: var(--mod-radio-line-height, var(--spectrum-radio-line-height));
+
+	/* Remove the margin for input in Firefox and Safari. */
+	margin: 0;
+
+	/* Show the overflow for input in Edge. */
+	overflow: visible;
+
+	/* Add the correct box sizing for [type="radio"] in IE 10-. */
+	box-sizing: border-box;
+
+	/* Remove the padding for [type="radio"] in IE 10-. */
+	padding: 0;
+
+	position: absolute;
+	inline-size: 100%;
+	block-size: 100%;
+
+	opacity: 0;
+	z-index: 1;
+
+	cursor: pointer;
+
+	&:disabled {
+		cursor: default;
+	}
+
+	/* selection indicator checked */
+	&:checked + .spectrum-Radio-button {
+		&::before {
+			/* half of element width minus half of indicator width is checked border width */
+			border-width: calc((var(--spectrum-radio-button-control-size) / 2) - (var(--spectrum-radio-button-selection-indicator) / 2));
+			border-color: var(--highcontrast-radio-button-checked-border-color-default, var(--mod-radio-button-checked-border-color-default, var(--spectrum-radio-button-checked-border-color-default)));
+		}
+	}
+
+	/* focused state */
+	&:focus-visible {
+		+ .spectrum-Radio-button::after {
+			border-width: var(--mod-radio-focus-indicator-thickness, var(--spectrum-radio-focus-indicator-thickness));
+			border-color: var(--highcontrast-radio-focus-indicator-color, var(--mod-radio-focus-indicator-color, var(--spectrum-radio-focus-indicator-color)));
+			border-style: solid;
+
+			inline-size: calc(var(--spectrum-radio-button-control-size) + (var(--spectrum-radio-focus-indicator-gap) * 2));
+			block-size: calc(var(--spectrum-radio-button-control-size) + (var(--spectrum-radio-focus-indicator-gap) * 2));
+		}
+	}
 }
 
 .spectrum-Radio-label {
-  text-align: start;
-  margin-inline-start: var(--mod-radio-text-to-control,
-                          var(--spectrum-radio-text-to-control));
-  margin-block-start: var(--spectrum-radio-label-top-to-text);
-  margin-block-end: var(--spectrum-radio-label-bottom-to-text);
-
-  font-size: var(--mod-radio-font-size,
-                var(--spectrum-radio-font-size));
-
-  /* TODO: font weight and style tokens */
-  /* font-weight: var(--spectrum-radio-text-font-weight); **** missing token resolves to 400 ****/
-  /* font-style: var(--spectrum-radio-text-font-style); **** missing token resolves to normal ****/
-  color: var(--highcontrast-radio-neutral-content-color,
-            var(--mod-radio-neutral-content-color,
-                var(--spectrum-radio-neutral-content-color)));
-  line-height: var(--mod-radio-line-height,
-                  var(--spectrum-radio-line-height));
-
-  transition: color var(--mod-radio-animation-duration,
-                        var(--spectrum-radio-animation-duration)) ease-in-out;
-
-  /* CJK language support */
-  &:lang(ja),
-  &:lang(zh),
-  &:lang(ko) {
-    line-height: var(--mod-radio-line-height-cjk, var(--spectrum-radio-line-height-cjk));
-  }
+	text-align: start;
+	margin-inline-start: var(--mod-radio-text-to-control, var(--spectrum-radio-text-to-control));
+	margin-block-start: var(--spectrum-radio-label-top-to-text);
+	margin-block-end: var(--spectrum-radio-label-bottom-to-text);
+
+	font-size: var(--mod-radio-font-size, var(--spectrum-radio-font-size));
+
+	/* TODO: font weight and style tokens */
+	/* font-weight: var(--spectrum-radio-text-font-weight); **** missing token resolves to 400 ****/
+	/* font-style: var(--spectrum-radio-text-font-style); **** missing token resolves to normal ****/
+	color: var(--highcontrast-radio-neutral-content-color, var(--mod-radio-neutral-content-color, var(--spectrum-radio-neutral-content-color)));
+	line-height: var(--mod-radio-line-height, var(--spectrum-radio-line-height));
+
+	transition: color var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-in-out;
+
+	/* CJK language support */
+	&:lang(ja),
+	&:lang(zh),
+	&:lang(ko) {
+		line-height: var(--mod-radio-line-height-cjk, var(--spectrum-radio-line-height-cjk));
+	}
 }
 
 .spectrum-Radio-button {
-  position: relative;
-  box-sizing: border-box;
-  inline-size: var(--mod-radio-button-control-size,
-                  var(--spectrum-radio-button-control-size));
-  block-size: var(--mod-radio-button-control-size,
-                  var(--spectrum-radio-button-control-size));
-  margin-block-start: var(--mod-radio-button-top-to-control,
-                          var(--spectrum-radio-button-top-to-control));
-
-  flex-grow: 0;
-  flex-shrink: 0;
-
-  /* selection indicator unchecked */
-  &::before {
-    display: block;
-    z-index: 0;
-    content: "";
-    box-sizing: border-box;
-    position: absolute;
-
-    inline-size: var(--mod-radio-button-control-size,
-              var(--spectrum-radio-button-control-size));
-    block-size: var(--mod-radio-button-control-size,
-                var(--spectrum-radio-button-control-size));
-
-    background-color: var(--highcontrast-radio-button-background-color,
-                          var(--mod-radio-button-background-color,
-                              var(--spectrum-radio-button-background-color)));
-
-    border-radius: 50%;
-    border-width: var(--mod-radio-border-width,
-                      var(--spectrum-radio-border-width));
-    border-color: var(--highcontrast-radio-button-border-color-default,
-                      var(--mod-radio-button-border-color-default,
-                          var(--spectrum-radio-button-border-color-default)));
-    border-style: solid;
-
-    transition: border var(--mod-radio-animation-duration,
-                          var(--spectrum-radio-animation-duration)) ease-in-out,
-                box-shadow var(--mod-radio-animation-duration,
-                              var(--spectrum-radio-animation-duration)) ease-in-out;
-  }
-
-  /* focus ring is not focused state */
-  &::after {
-    border-radius: 50%;
-
-    content: "";
-    display: block;
-    position: absolute;
-    inset-inline-start: 50%;
-    inset-block-start: 50%;
-    transform: translateX(-50%) translateY(-50%);
-
-    transition: opacity var(--mod-radio-animation-duration,
-                            var(--spectrum-radio-animation-duration)) ease-out,
-                margin var(--mod-radio-animation-duration,
-                          var(--spectrum-radio-animation-duration)) ease-out;
-
-    &:dir(rtl) {
-      transform: translateX(50%) translateY(-50%);
-    }
-  }
+	position: relative;
+	box-sizing: border-box;
+	inline-size: var(--mod-radio-button-control-size, var(--spectrum-radio-button-control-size));
+	block-size: var(--mod-radio-button-control-size, var(--spectrum-radio-button-control-size));
+	margin-block-start: var(--mod-radio-button-top-to-control, var(--spectrum-radio-button-top-to-control));
+
+	flex-grow: 0;
+	flex-shrink: 0;
+
+	/* selection indicator unchecked */
+	&::before {
+		display: block;
+		z-index: 0;
+		content: "";
+		box-sizing: border-box;
+		position: absolute;
+
+		inline-size: var(--mod-radio-button-control-size, var(--spectrum-radio-button-control-size));
+		block-size: var(--mod-radio-button-control-size, var(--spectrum-radio-button-control-size));
+
+		background-color: var(--highcontrast-radio-button-background-color, var(--mod-radio-button-background-color, var(--spectrum-radio-button-background-color)));
+
+		border-radius: 50%;
+		border-width: var(--mod-radio-border-width, var(--spectrum-radio-border-width));
+		border-color: var(--highcontrast-radio-button-border-color-default, var(--mod-radio-button-border-color-default, var(--spectrum-radio-button-border-color-default)));
+		border-style: solid;
+
+		transition:
+			border var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-in-out,
+			box-shadow var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-in-out;
+	}
+
+	/* focus ring is not focused state */
+	&::after {
+		border-radius: 50%;
+
+		content: "";
+		display: block;
+		position: absolute;
+		inset-inline-start: 50%;
+		inset-block-start: 50%;
+		transform: translateX(-50%) translateY(-50%);
+
+		transition:
+			opacity var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-out,
+			margin var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-out;
+
+		&:dir(rtl) {
+			transform: translateX(50%) translateY(-50%);
+		}
+	}
 }
diff --git a/components/slider/index.css b/components/slider/index.css
index 81fe996c63..93efc28d54 100644
--- a/components/slider/index.css
+++ b/components/slider/index.css
@@ -13,18 +13,18 @@ governing permissions and limitations under the License.
 @import "./themes/express.css";
 
 .spectrum-Slider {
-  /* default sizing, matches t-shirt size M */
-  --spectrum-slider-font-size: var(--spectrum-font-size-75);
-  --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-medium);
-  --spectrum-slider-control-height: var(--spectrum-component-height-100);
-  --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200);
-  --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-medium);
-  --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75);
-  --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-medium);
-  --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200);
-
-  /* TODO: placeholder value for sideLabel variant value width */
-  --spectrum-slider-value-inline-size: 18px;
+	/* default sizing, matches t-shirt size M */
+	--spectrum-slider-font-size: var(--spectrum-font-size-75);
+	--spectrum-slider-handle-size: var(--spectrum-slider-handle-size-medium);
+	--spectrum-slider-control-height: var(--spectrum-component-height-100);
+	--spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200);
+	--spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-medium);
+	--spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75);
+	--spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-medium);
+	--spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200);
+
+	/* TODO: placeholder value for sideLabel variant value width */
+	--spectrum-slider-value-inline-size: 18px;
 
 	&:dir(rtl),
 	&:dir(rtl) {
@@ -32,756 +32,732 @@ governing permissions and limitations under the License.
 	}
 }
 
-
 .spectrum-Slider--sizeS {
-  --spectrum-slider-font-size: var(--spectrum-font-size-75);
-  --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-small);
-  --spectrum-slider-control-height: var(--spectrum-component-height-75);
-  --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200);
-  --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-small);
-  --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75);
-  --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-small);
-  --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-100);
+	--spectrum-slider-font-size: var(--spectrum-font-size-75);
+	--spectrum-slider-handle-size: var(--spectrum-slider-handle-size-small);
+	--spectrum-slider-control-height: var(--spectrum-component-height-75);
+	--spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200);
+	--spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-small);
+	--spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75);
+	--spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-small);
+	--spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-100);
 }
 
 .spectrum-Slider--sizeL {
-  --spectrum-slider-font-size: var(--spectrum-font-size-100);
-  --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-large);
-  --spectrum-slider-control-height: var(--spectrum-component-height-200);
-  --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4);
-  --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-large);
-  --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-100);
-  --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-large);
-  --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200);
+	--spectrum-slider-font-size: var(--spectrum-font-size-100);
+	--spectrum-slider-handle-size: var(--spectrum-slider-handle-size-large);
+	--spectrum-slider-control-height: var(--spectrum-component-height-200);
+	--spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4);
+	--spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-large);
+	--spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-100);
+	--spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-large);
+	--spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200);
 
-  /* TODO: placeholder value for sideLabel variant value width */
-  --spectrum-slider-value-inline-size: 18px;
+	/* TODO: placeholder value for sideLabel variant value width */
+	--spectrum-slider-value-inline-size: 18px;
 }
 
 .spectrum-Slider--sizeXL {
-  --spectrum-slider-font-size: var(--spectrum-font-size-200);
-  --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-extra-large);
-  --spectrum-slider-control-height: var(--spectrum-component-height-300);
-  --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4);
-  --spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-extra-large);
-  --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-200);
-  --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-extra-large);
-  --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200);
+	--spectrum-slider-font-size: var(--spectrum-font-size-200);
+	--spectrum-slider-handle-size: var(--spectrum-slider-handle-size-extra-large);
+	--spectrum-slider-control-height: var(--spectrum-component-height-300);
+	--spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4);
+	--spectrum-slider-handle-border-width-down: var(--spectrum-slider-handle-border-width-down-extra-large);
+	--spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-200);
+	--spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-extra-large);
+	--spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200);
 
-  /* TODO: placeholder value for sideLabel variant value width */
-  --spectrum-slider-value-inline-size: 22px;
+	/* TODO: placeholder value for sideLabel variant value width */
+	--spectrum-slider-value-inline-size: 22px;
 }
 
 .spectrum-Slider {
-  --spectrum-slider-cjk-line-height: var(--spectrum-cjk-line-height-100);
-
-  --spectrum-slider-min-size: var(--spectrum-spacing-900);
-
-  --spectrum-slider-track-corner-radius: var(--spectrum-corner-radius-75);
-  --spectrum-slider-label-margin-start: var(--spectrum-spacing-300);
-  --spectrum-slider-handle-border-width: var(--spectrum-border-width-200);
-  --spectrum-slider-handle-margin-left: calc(var(--spectrum-slider-handle-size) / -2);
-  --spectrum-slider-controls-margin: calc(var(--spectrum-slider-handle-size) / 2);
-  --spectrum-slider-track-margin-offset: calc(var(--spectrum-slider-controls-margin) * -1);
-  --spectrum-slider-track-middle-handleoffset: calc(var(--spectrum-slider-handle-gap) + calc(var(--spectrum-slider-handle-size) / 2));
-  --spectrum-slider-input-top-size: calc(var(--spectrum-slider-handle-size) / -2 / 4);
-  --spectrum-slider-track-fill-thickness: var(--spectrum-slider-track-thickness);
-  --spectrum-slider-tick-mark-width: var(--spectrum-border-width-200);
-  --spectrum-slider-tick-mark-border-radius: 2px;
-  --spectrum-slider-tick-handle-background-color: var(--spectrum-gray-100);
-
-  /* colors */
-  --spectrum-slider-track-color-disabled: var(--spectrum-disabled-background-color);
-  --spectrum-slider-track-fill-color-disabled: var(--spectrum-disabled-background-color);
-  --spectrum-slider-handle-border-color-disabled: var(--spectrum-disabled-border-color);
-  --spectrum-slider-label-text-color: var(--spectrum-neutral-content-color-default);
-  --spectrum-slider-label-text-color-disabled: var(--spectrum-disabled-content-color);
-  --spectrum-slider-tick-mark-color-disabled: var(--spectrum-disabled-background-color);
-  --spectrum-slider-ramp-handle-border-color-active: var(--spectrum-gray-100);
-
-  /* values */
-  --spectrum-slider-input-left: calc(var(--spectrum-slider-handle-margin-left) / 4);
-  --spectrum-slider-track-handleoffset: var(--spectrum-slider-handle-gap);
-
-  --spectrum-slider-range-track-reset: 0;
+	--spectrum-slider-cjk-line-height: var(--spectrum-cjk-line-height-100);
+
+	--spectrum-slider-min-size: var(--spectrum-spacing-900);
+
+	--spectrum-slider-track-corner-radius: var(--spectrum-corner-radius-75);
+	--spectrum-slider-label-margin-start: var(--spectrum-spacing-300);
+	--spectrum-slider-handle-border-width: var(--spectrum-border-width-200);
+	--spectrum-slider-handle-margin-left: calc(var(--spectrum-slider-handle-size) / -2);
+	--spectrum-slider-controls-margin: calc(var(--spectrum-slider-handle-size) / 2);
+	--spectrum-slider-track-margin-offset: calc(var(--spectrum-slider-controls-margin) * -1);
+	--spectrum-slider-track-middle-handleoffset: calc(var(--spectrum-slider-handle-gap) + calc(var(--spectrum-slider-handle-size) / 2));
+	--spectrum-slider-input-top-size: calc(var(--spectrum-slider-handle-size) / -2 / 4);
+	--spectrum-slider-track-fill-thickness: var(--spectrum-slider-track-thickness);
+	--spectrum-slider-tick-mark-width: var(--spectrum-border-width-200);
+	--spectrum-slider-tick-mark-border-radius: 2px;
+	--spectrum-slider-tick-handle-background-color: var(--spectrum-gray-100);
+
+	/* colors */
+	--spectrum-slider-track-color-disabled: var(--spectrum-disabled-background-color);
+	--spectrum-slider-track-fill-color-disabled: var(--spectrum-disabled-background-color);
+	--spectrum-slider-handle-border-color-disabled: var(--spectrum-disabled-border-color);
+	--spectrum-slider-label-text-color: var(--spectrum-neutral-content-color-default);
+	--spectrum-slider-tick-label-color: var(--spectrum-neutral-content-color-default);
+	--spectrum-slider-label-text-color-disabled: var(--spectrum-disabled-content-color);
+	--spectrum-slider-tick-mark-color-disabled: var(--spectrum-disabled-background-color);
+	--spectrum-slider-ramp-handle-border-color-active: var(--spectrum-gray-100);
+
+	/* values */
+	--spectrum-slider-input-left: calc(var(--spectrum-slider-handle-margin-left) / 4);
+	--spectrum-slider-track-handleoffset: var(--spectrum-slider-handle-gap);
+
+	--spectrum-slider-range-track-reset: 0;
 }
 
 .spectrum-Slider {
-  position: relative;
+	position: relative;
 
-  /* Don't let z-index'd child elements float above other things on the page */
-  z-index: 1;
-  display: block;
-  min-inline-size: var(--mod-slider-min-size, var(--spectrum-slider-min-size));
+	/* Don't let z-index'd child elements float above other things on the page */
+	z-index: 1;
+	display: block;
+	min-inline-size: var(--mod-slider-min-size, var(--spectrum-slider-min-size));
 
-  user-select: none;
+	user-select: none;
 }
 
 .spectrum-Slider--sideLabel {
-  display: flex;
-  align-items: center;
+	display: flex;
+	align-items: center;
 
-  .spectrum-Slider-labelContainer {
-    margin-block-start: 0;
-  }
+	.spectrum-Slider-labelContainer {
+		margin-block-start: 0;
+	}
 
-  .spectrum-Slider-labelContainer + .spectrum-Slider-controls {
-    margin-block-start: 0;
-  }
+	.spectrum-Slider-labelContainer + .spectrum-Slider-controls {
+		margin-block-start: 0;
+	}
 
-  .spectrum-Slider-controls {
-    margin-inline-end: var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin));
-  }
+	.spectrum-Slider-controls {
+		margin-inline-end: var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin));
+	}
 
-  .spectrum-Slider-value {
-    margin-inline-start: var(--mod-slider-value-side-padding-inline, var(--spectrum-slider-value-side-padding-inline));
-    inline-size: var(--mod-slider-value-inline-size, var(--spectrum-slider-value-inline-size));
-    text-align: start;
-  }
+	.spectrum-Slider-value {
+		margin-inline-start: var(--mod-slider-value-side-padding-inline, var(--spectrum-slider-value-side-padding-inline));
+		inline-size: var(--mod-slider-value-inline-size, var(--spectrum-slider-value-inline-size));
+		text-align: start;
+	}
 }
 
 .spectrum-Slider-controls {
-  display: inline-block;
-  box-sizing: border-box;
-  cursor: pointer;
-  position: relative;
-  z-index: auto;
+	display: inline-block;
+	box-sizing: border-box;
+	cursor: pointer;
+	position: relative;
+	z-index: auto;
 
-  /* These calculations prevent the track from spilling outside of the control */
-  inline-size: calc(100% - calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin))) * 2);
-  margin-inline-start: var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin));
+	/* These calculations prevent the track from spilling outside of the control */
+	inline-size: calc(100% - calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin))) * 2);
+	margin-inline-start: var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin));
 
-  block-size: var(--mod-slider-control-height, var(--spectrum-slider-control-height));
-  vertical-align: top;
+	block-size: var(--mod-slider-control-height, var(--spectrum-slider-control-height));
+	vertical-align: top;
 }
 
 .spectrum-Slider-labelContainer + .spectrum-Slider-controls {
-  margin-block-start: calc(-1 * var(--spectrum-slider-control-to-field-label));
+	margin-block-start: calc(-1 * var(--spectrum-slider-control-to-field-label));
 }
 
 /* TODO: Sliders with ticks + tick mark labels require more margin-block-end.
  As of February 2023 we do not have tokens yet tokens for Ramp and Tick variants,
  using control-height here instead.  */
 .spectrum-Slider--tick {
-  margin-block-end: var(--mod-slider-control-height, var(--spectrum-slider-control-height));
+	margin-block-end: var(--mod-slider-control-height, var(--spectrum-slider-control-height));
 }
 
 .spectrum-Slider-track,
 .spectrum-Slider-fill {
-  block-size: var(--mod-slider-track-fill-thickness, var(--spectrum-slider-track-fill-thickness));
-  box-sizing: border-box;
-
-  position: absolute;
-  z-index: 1;
-  inset-block-start: calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2 - var(--mod-slider-track-fill-thickness, var(--spectrum-slider-track-fill-thickness)) / 2);
-  inset-inline-start: 0;
-  inset-inline-end: auto;
-  pointer-events: none;
-
-  padding-block: 0;
-  padding-inline-start: 0;
-  padding-inline-end: var(--mod-slider-handle-gap, var(--spectrum-slider-handle-gap));
-  margin-inline-start: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
-
-  &::before {
-    content: "";
-    display: block;
-    block-size: 100%;
-
-    /* reset all border radii */
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-  }
+	block-size: var(--mod-slider-track-fill-thickness, var(--spectrum-slider-track-fill-thickness));
+	box-sizing: border-box;
+
+	position: absolute;
+	z-index: 1;
+	inset-block-start: calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2 - var(--mod-slider-track-fill-thickness, var(--spectrum-slider-track-fill-thickness)) / 2);
+	inset-inline-start: 0;
+	inset-inline-end: auto;
+	pointer-events: none;
+
+	padding-block: 0;
+	padding-inline-start: 0;
+	padding-inline-end: var(--mod-slider-handle-gap, var(--spectrum-slider-handle-gap));
+	margin-inline-start: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
+
+	&::before {
+		content: "";
+		display: block;
+		block-size: 100%;
+
+		/* reset all border radii */
+		border-start-start-radius: 0;
+		border-end-start-radius: 0;
+		border-start-end-radius: 0;
+		border-end-end-radius: 0;
+	}
 }
 
 .spectrum-Slider-track {
-  &:first-of-type {
-    &::before {
-      border-start-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
-      border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
-    }
-  }
+	&:first-of-type {
+		&::before {
+			border-start-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
+			border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
+		}
+	}
 
-  &:last-of-type {
-    &::before {
-      border-start-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
-      border-end-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
-    }
-  }
+	&:last-of-type {
+		&::before {
+			border-start-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
+			border-end-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
+		}
+	}
 }
 
 .spectrum-Slider-track ~ .spectrum-Slider-track {
-  inset-inline-start: auto;
-  inset-inline-end: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
-  padding-block: 0;
-  padding-inline-start: var(--mod-slider-track-handleoffset, var(--spectrum-slider-track-handleoffset));
-  padding-inline-end: 0;
-  margin-inline-start: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
-  margin-inline-end: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
+	inset-inline-start: auto;
+	inset-inline-end: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
+	padding-block: 0;
+	padding-inline-start: var(--mod-slider-track-handleoffset, var(--spectrum-slider-track-handleoffset));
+	padding-inline-end: 0;
+	margin-inline-start: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
+	margin-inline-end: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
 }
 
-
 /* over-write for Range, without the LTR RTL post-css hack */
 .spectrum-Slider--range {
-  .spectrum-Slider-track ~ .spectrum-Slider-track {
-    padding-inline: var(--mod-slider-track-middle-handleoffset, var(--spectrum-slider-track-middle-handleoffset)) var(--mod-slider-track-middle-handleoffset, var(--spectrum-slider-track-middle-handleoffset));
-    inset-inline: auto;
-    margin-inline: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
-  }
+	.spectrum-Slider-track ~ .spectrum-Slider-track {
+		padding-inline: var(--mod-slider-track-middle-handleoffset, var(--spectrum-slider-track-middle-handleoffset)) var(--mod-slider-track-middle-handleoffset, var(--spectrum-slider-track-middle-handleoffset));
+		inset-inline: auto;
+		margin-inline: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
+	}
 }
 
 .spectrum-Slider-fill {
-  margin-inline-start: 0;
-  padding-block: 0;
-  padding-inline-start: calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)) + var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap)));
-  padding-inline-end: 0;
+	margin-inline-start: 0;
+	padding-block: 0;
+	padding-inline-start: calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)) + var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap)));
+	padding-inline-end: 0;
 }
 
 .spectrum-Slider-fill--right {
-  padding-block: 0;
-  padding-inline-start: 0;
-  padding-inline-end: calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)) + var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap)));
+	padding-block: 0;
+	padding-inline-start: 0;
+	padding-inline-end: calc(var(--mod-slider-controls-margin, var(--spectrum-slider-controls-margin)) + var(--spectrum-slider-handle-gap, var(--spectrum-slider-handle-gap)));
 }
 
 .spectrum-Slider--range {
-  .spectrum-Slider-value {
-    user-select: text;
-  }
-
-  .spectrum-Slider-track {
-    &:first-of-type {
-      padding-inline-start: 0;
-      padding-inline-end: var(--mod-slider-track-handleoffset, var(--spectrum-slider-track-handleoffset));
-      inset-inline-start: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
-      inset-inline-end: auto;
-      margin-inline-start: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
-    }
-
-    &:first-of-type::before {
-      border-start-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
-      border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
-    }
-
-    &:last-of-type {
-      padding-inline-start: var(--spectrum-slider-track-handleoffset);
-      padding-inline-end: 0;
-      inset-inline-start: auto;
-      inset-inline-end: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
-      margin-inline-end: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
-    }
-
-    &:last-of-type::before {
-      border-start-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
-      border-end-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
-    }
-  }
+	.spectrum-Slider-value {
+		user-select: text;
+	}
+
+	.spectrum-Slider-track {
+		&:first-of-type {
+			padding-inline-start: 0;
+			padding-inline-end: var(--mod-slider-track-handleoffset, var(--spectrum-slider-track-handleoffset));
+			inset-inline-start: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
+			inset-inline-end: auto;
+			margin-inline-start: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
+		}
+
+		&:first-of-type::before {
+			border-start-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
+			border-end-start-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
+		}
+
+		&:last-of-type {
+			padding-inline-start: var(--spectrum-slider-track-handleoffset);
+			padding-inline-end: 0;
+			inset-inline-start: auto;
+			inset-inline-end: var(--mod-slider-range-track-reset, var(--spectrum-slider-range-track-reset));
+			margin-inline-end: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
+		}
+
+		&:last-of-type::before {
+			border-start-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
+			border-end-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius));
+		}
+	}
 }
 
 .spectrum-Slider-ramp {
-  margin-block-start: calc(var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-height)) / 2);
-  block-size: var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-height));
+	margin-block-start: calc(var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-height)) / 2);
+	block-size: var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-height));
 
-  position: absolute;
-  inset-inline-start: var(--spectrum-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
-  inset-inline-end: var(--spectrum-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
+	position: absolute;
+	inset-inline-start: var(--spectrum-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
+	inset-inline-end: var(--spectrum-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
 
-  svg {
-    inline-size: 100%;
-    block-size: 100%;
+	svg {
+		inline-size: 100%;
+		block-size: 100%;
 
-    /* Flip the ramp automatically for RTL */
-    transform: var(--spectrum-logical-rotation);
-  }
+		/* Flip the ramp automatically for RTL */
+		transform: var(--spectrum-logical-rotation);
+	}
 }
 
 .spectrum-Slider-handle {
-  position: absolute;
-  inset-inline-start: 0;
-  z-index: 2;
-  display: inline-block;
-  box-sizing: border-box;
-
-  inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
-  block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
-
-  inset-block-start: calc(
-    var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2 - var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / 2
-  );
-  margin-block: 0;
-  margin-inline: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / -2) 0;
-  border-width: var(--mod-slider-handle-border-width, var(--spectrum-slider-handle-border-width));
-  border-style: solid;
-
-  border-radius: var(--mod-slider-handle-border-radius, var(--spectrum-slider-handle-border-radius));
-
-  transition: border-width var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out;
-
-  outline: none;
-
-  &:active,
-  &.is-dragged {
-    border-width: var(--mod-slider-handle-border-width-down, var(--spectrum-slider-handle-border-width-down));
-  }
-
-  &:active,
-  &.is-focused,
-  &.is-dragged,
-  &.is-tophandle {
-    z-index: 3;
-  }
-
-  /* Focus indicator. */
-  &::before {
-    content: "";
-    display: block;
-    position: absolute;
-    inset-inline-start: 50%;
-    inset-block-start: 50%;
-
-    transition: box-shadow var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out,
-      inline-size var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out,
-      block-size var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out;
-
-    inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
-    block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
-    border-radius: 100%;
-
-    transform: translate(-50%, -50%);
-
-    &:dir(rtl) {
-      transform: translate(50%, -50%);
-    }
-  }
-
-  /* Keyboard focused */
-  &.is-focused {
-    &::before {
-      inline-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * 2);
-      block-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * 2);
-    }
-  }
-}
+	position: absolute;
+	inset-inline-start: 0;
+	z-index: 2;
+	display: inline-block;
+	box-sizing: border-box;
 
-.spectrum-Slider-input {
-  /*  Remove the margin for input in Firefox and Safari. */
-  margin: 0;
+	inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
+	block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
+
+	inset-block-start: calc(var(--mod-slider-control-height, var(--spectrum-slider-control-height)) / 2 - var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / 2);
+	margin-block: 0;
+	margin-inline: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) / -2) 0;
+	border-width: var(--mod-slider-handle-border-width, var(--spectrum-slider-handle-border-width));
+	border-style: solid;
+
+	border-radius: var(--mod-slider-handle-border-radius, var(--spectrum-slider-handle-border-radius));
+
+	transition: border-width var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out;
+
+	outline: none;
+
+	&:active,
+	&.is-dragged {
+		border-width: var(--mod-slider-handle-border-width-down, var(--spectrum-slider-handle-border-width-down));
+	}
+
+	&:active,
+	&.is-focused,
+	&.is-dragged,
+	&.is-tophandle {
+		z-index: 3;
+	}
 
-  inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
-  block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
-  padding: 0;
-  position: absolute;
+	/* Focus indicator. */
+	&::before {
+		content: "";
+		display: block;
+		position: absolute;
+		inset-inline-start: 50%;
+		inset-block-start: 50%;
 
-  inset-block-start: var(--mod-slider-input-top-size, var(--spectrum-slider-input-top-size));
-  inset-inline-start: var(--mod-slider-input-left, var(--spectrum-slider-input-left));
-  overflow: hidden;
-  opacity: 0.000001; /* stylelint-disable-line number-max-precision */
-  cursor: default;
-  appearance: none;
-  border: 0;
-  pointer-events: none;
+		transition:
+			box-shadow var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out,
+			inline-size var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out,
+			block-size var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out;
 
-  &:focus {
-    outline: none;
-  }
+		inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
+		block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
+		border-radius: 100%;
+
+		transform: translate(-50%, -50%);
+
+		&:dir(rtl) {
+			transform: translate(50%, -50%);
+		}
+	}
+
+	/* Keyboard focused */
+	&.is-focused {
+		&::before {
+			inline-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * 2);
+			block-size: calc(var(--mod-slider-handle-size, var(--spectrum-slider-handle-size)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * 2);
+		}
+	}
+}
+
+.spectrum-Slider-input {
+	/*  Remove the margin for input in Firefox and Safari. */
+	margin: 0;
+
+	inline-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
+	block-size: var(--mod-slider-handle-size, var(--spectrum-slider-handle-size));
+	padding: 0;
+	position: absolute;
+
+	inset-block-start: var(--mod-slider-input-top-size, var(--spectrum-slider-input-top-size));
+	inset-inline-start: var(--mod-slider-input-left, var(--spectrum-slider-input-left));
+	overflow: hidden;
+	opacity: 0.000001; /* stylelint-disable-line number-max-precision */
+	cursor: default;
+	appearance: none;
+	border: 0;
+	pointer-events: none;
+
+	&:focus {
+		outline: none;
+	}
 }
 
 .spectrum-Slider-labelContainer {
-  display: flex;
-  align-items: center;
-  position: relative;
-  inline-size: auto;
+	display: flex;
+	align-items: center;
+	position: relative;
+	inline-size: auto;
 
-  font-size: var(--mod-slider-font-size, var(--spectrum-slider-font-size));
-  line-height: var(--mod-line-height-100, var(--spectrum-line-height-100));
+	font-size: var(--mod-slider-font-size, var(--spectrum-slider-font-size));
+	line-height: var(--mod-line-height-100, var(--spectrum-line-height-100));
 
-  margin-block-start: var(--mod-slider-label-top-to-text, var(--spectrum-slider-label-top-to-text));
+	margin-block-start: var(--mod-slider-label-top-to-text, var(--spectrum-slider-label-top-to-text));
 
-  /* international support */
-  &:lang(ja),
-  &:lang(zh),
-  &:lang(ko) {
-    line-height: var(--mod-slider-cjk-line-height, var(--spectrum-slider-cjk-line-height));
-  }
+	/* international support */
+	&:lang(ja),
+	&:lang(zh),
+	&:lang(ko) {
+		line-height: var(--mod-slider-cjk-line-height, var(--spectrum-slider-cjk-line-height));
+	}
 }
 
 .spectrum-Slider-label {
-  padding-inline-start: 0;
-  flex-grow: 1;
-  font-size: var(--mod-slider-font-size, var(--spectrum-slider-font-size));
+	padding-inline-start: 0;
+	flex-grow: 1;
+	font-size: var(--mod-slider-font-size, var(--spectrum-slider-font-size));
 }
 
 .spectrum-Slider-value {
-  flex-grow: 0;
-  padding-inline-end: 0;
-  cursor: default;
-  font-feature-settings: "tnum";
-  text-align: end;
+	flex-grow: 0;
+	padding-inline-end: 0;
+	cursor: default;
+	font-feature-settings: "tnum";
+	text-align: end;
 }
 
 .spectrum-Slider-value {
-  margin-inline-start: var(--mod-slider-label-margin-start, var(--spectrum-slider-label-margin-start));
+	margin-inline-start: var(--mod-slider-label-margin-start, var(--spectrum-slider-label-margin-start));
 }
 
-
 /* setting tick marks in relation to label */
 .spectrum-Slider--tick {
-  .spectrum-Slider-handle {
-    background-color: var(--highcontrast-slider-tick-handle-background-color, var(--mod-slider-tick-handle-background-color, var(--spectrum-slider-tick-handle-background-color)));
-  }
-
-  .spectrum-Slider-controls {
-    margin-block-start:
-      calc(
-        var(--spectrum-text-to-visual-75)
-        - var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2
-        - var(--mod-slider-track-thickness, var(--spectrum-slider-track-thickness)) / 2
-      );
-  }
-
-  .spectrum-Slider-tickLabel {
-    margin-block-start:
-      calc(
-        var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) + var(--spectrum-text-to-visual-75)
-      );
-  }
+	.spectrum-Slider-handle {
+		background-color: var(--highcontrast-slider-tick-handle-background-color, var(--mod-slider-tick-handle-background-color, var(--spectrum-slider-tick-handle-background-color)));
+	}
+
+	.spectrum-Slider-controls {
+		margin-block-start: calc(var(--spectrum-text-to-visual-75) - var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2 - var(--mod-slider-track-thickness, var(--spectrum-slider-track-thickness)) / 2);
+	}
+
+	.spectrum-Slider-tickLabel {
+		margin-block-start: calc(var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) + var(--spectrum-text-to-visual-75));
+	}
 }
 
 /* TODO: missing core-tokens for tick variant */
 .spectrum-Slider-ticks {
-  display: flex;
-  justify-content: space-between;
-
-  z-index: 0;
-
-  margin-inline: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
-
-  /* TODO: missing core-token for handle fill-color */
-  &~.spectrum-Slider-handleContainer {
-    .spectrum-Slider-handle {
-      background: var(--mod-slider-ticks-handle-background-color, var(--spectrum-slider-ticks-handle-background-color));
-    }
-  }
+	display: flex;
+	justify-content: space-between;
+	z-index: 0;
+	margin-inline: var(--mod-slider-track-margin-offset, var(--spectrum-slider-track-margin-offset));
+
+	/* TODO: missing core-token for handle fill-color */
+	& ~ .spectrum-Slider-handleContainer {
+		.spectrum-Slider-handle {
+			background: var(--mod-slider-ticks-handle-background-color, var(--spectrum-slider-ticks-handle-background-color));
+		}
+	}
 }
 
 .spectrum-Slider-tick {
-  position: relative;
-
-  inline-size: var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width));
-
-  /* tick marks are centered half based on slider control height and tick height  */
-  inset-block-start: calc(var(--mod-slider-track-thickness, var(--spectrum-slider-control-height)) / 2 -
-    var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2
-    );
-
-
-  &::after {
-    display: block;
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline-start: calc(50% - calc(var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / 2));
-    content: "";
-    inline-size: var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width));
-    block-size: var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height));
-
-    border-radius: var(--mod-slider-tick-mark-border-radius, var(--spectrum-slider-tick-mark-border-radius));
-  }
-
-  .spectrum-Slider-tickLabel {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
+	position: relative;
+	inline-size: var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width));
+
+	/* tick marks are centered half based on slider control height and tick height  */
+	inset-block-start: calc(var(--mod-slider-track-thickness, var(--spectrum-slider-control-height)) / 2 - var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height)) / 2);
+
+	&::after {
+		display: block;
+		position: absolute;
+		inset-block-start: 0;
+		inset-inline-start: calc(50% - calc(var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / 2));
+		content: "";
+		inline-size: var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width));
+		block-size: var(--mod-slider-tick-mark-height, var(--spectrum-slider-tick-mark-height));
+		border-radius: var(--mod-slider-tick-mark-border-radius, var(--spectrum-slider-tick-mark-border-radius));
+	}
 
-    font-size: var(--mod-font-size-75, var(--spectrum-font-size-75));
-    line-height: var(--mod-line-height-100, var(--spectrum-line-height-100));
-  }
+	.spectrum-Slider-tickLabel {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: var(--mod-font-size-75, var(--spectrum-font-size-75));
+		line-height: var(--mod-line-height-100, var(--spectrum-line-height-100));
+		color: var(--highcontrast-slider-label-text-color, var(--mod-slider-tick-label-color, var(--spectrum-slider-tick-label-color)));
+	}
 
-  &:first-of-type,
-  &:last-of-type {
-    .spectrum-Slider-tickLabel {
-      display: block;
-      position: absolute;
-      margin-inline: 0;
-    }
-  }
+	&:first-of-type,
+	&:last-of-type {
+		.spectrum-Slider-tickLabel {
+			display: block;
+			position: absolute;
+			margin-inline: 0;
+		}
+	}
 
-  &:first-of-type {
-    /* fix off-by-one alignment */
-    inset-inline-start: calc(var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / -2);
+	&:first-of-type {
+		/* fix off-by-one alignment */
+		inset-inline-start: calc(var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / -2);
 
-    .spectrum-Slider-tickLabel {
-      inset-inline-start: 0;
-    }
-  }
+		.spectrum-Slider-tickLabel {
+			inset-inline-start: 0;
+		}
+	}
 
-  &:last-of-type {
-    /* fix off-by-one alignment */
-    inset-inline-end: calc(var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / -2);
+	&:last-of-type {
+		/* fix off-by-one alignment */
+		inset-inline-end: calc(var(--mod-slider-tick-mark-width, var(--spectrum-slider-tick-mark-width)) / -2);
 
-    .spectrum-Slider-tickLabel {
-      inset-inline-end: 0;
-    }
-  }
+		.spectrum-Slider-tickLabel {
+			inset-inline-end: 0;
+		}
+	}
 }
 
 /* backwards compatibility: these are not required, but they make the handle go to the edegs and align right */
 .spectrum-Slider-handleContainer,
 .spectrum-Slider-trackContainer {
-  inline-size: calc(100% + var(--spectrum-slider-handle-size));
-
-  position: absolute;
-  inset-block-start: 0;
-
-  margin-inline-start: calc(var(--spectrum-slider-handle-size) / 2 * -1);
+	inline-size: calc(100% + var(--spectrum-slider-handle-size));
+	position: absolute;
+	inset-block-start: 0;
+	margin-inline-start: calc(var(--spectrum-slider-handle-size) / 2 * -1);
 }
 
 .spectrum-Slider-trackContainer {
-  block-size: var(--mod-slider-control-height, var(--spectrum-slider-control-height));
+	block-size: var(--mod-slider-control-height, var(--spectrum-slider-control-height));
 
-  /* stop edges from peeking out */
-  overflow: hidden;
+	/* stop edges from peeking out */
+	overflow: hidden;
 }
 
 /* Applies to the filled-offset variant to keep track the same color for highcontrast mode */
 .spectrum-Slider-track {
-  &::before {
-    background: var(--highcontrast-slider-track-color-static, var(--mod-slider-track-color, var(--spectrum-slider-track-color)));
-  }
+	&::before {
+		background: var(--highcontrast-slider-track-color-static, var(--mod-slider-track-color, var(--spectrum-slider-track-color)));
+	}
 }
 
 /* All variants other than filled-offset get a new track color for highcontrast mode */
 .spectrum-Slider-track:not(:has(~ .spectrum-Slider-fill)) {
-  &::before {
-    background: var(--highcontrast-slider-track-color, var(--mod-slider-track-color, var(--spectrum-slider-track-color)));
-  }
+	&::before {
+		background: var(--highcontrast-slider-track-color, var(--mod-slider-track-color, var(--spectrum-slider-track-color)));
+	}
 }
 
 .spectrum-Slider-labelContainer {
-  color: var(--highcontrast-slider-label-text-color, var(--mod-slider-label-text-color, var(--spectrum-slider-label-text-color)));
+	color: var(--highcontrast-slider-label-text-color, var(--mod-slider-label-text-color, var(--spectrum-slider-label-text-color)));
 }
 
-
 .spectrum-Slider--filled {
-  .spectrum-Slider-track:first-child {
-    &::before {
-      background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color)));
-    }
-  }
+	.spectrum-Slider-track:first-child {
+		&::before {
+			background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color)));
+		}
+	}
 }
 
 .spectrum-Slider-fill {
-  &::before {
-    background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color)));
-  }
+	&::before {
+		background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color)));
+	}
 }
 
 .spectrum-Slider-ramp {
-  path {
-    fill: var(--highcontrast-slider-ramp-track-color, var(--mod-slider-ramp-track-color, var(--spectrum-slider-ramp-track-color)));
-  }
+	path {
+		fill: var(--highcontrast-slider-ramp-track-color, var(--mod-slider-ramp-track-color, var(--spectrum-slider-ramp-track-color)));
+	}
 }
 
 .spectrum-Slider-handle {
-  border-color: var(--highcontrast-slider-handle-border-color, var(--mod-slider-handle-border-color, var(--spectrum-slider-handle-border-color)));
-  background: var(--highcontrast-slider-handle-background-color, var(--mod-slider-handle-background-color, var(--spectrum-slider-handle-background-color)));
+	border-color: var(--highcontrast-slider-handle-border-color, var(--mod-slider-handle-border-color, var(--spectrum-slider-handle-border-color)));
+	background: var(--highcontrast-slider-handle-background-color, var(--mod-slider-handle-background-color, var(--spectrum-slider-handle-background-color)));
 
-  &:hover {
-    border-color: var(--highcontrast-slider-handle-border-color-hover, var(--mod-slider-handle-border-color-hover, var(--spectrum-slider-handle-border-color-hover)));
-  }
+	&:hover {
+		border-color: var(--highcontrast-slider-handle-border-color-hover, var(--mod-slider-handle-border-color-hover, var(--spectrum-slider-handle-border-color-hover)));
+	}
 
-  /* Keyboard focused with focus indicator. */
-  &.is-focused {
-    border-color: var(--highcontrast-slider-handle-border-color-key-focus, var(--mod-slider-handle-border-color-key-focus, var(--spectrum-slider-handle-border-color-key-focus)));
+	/* Keyboard focused with focus indicator. */
+	&.is-focused {
+		border-color: var(--highcontrast-slider-handle-border-color-key-focus, var(--mod-slider-handle-border-color-key-focus, var(--spectrum-slider-handle-border-color-key-focus)));
 
-    &::before {
-      box-shadow: 0 0 0 var(--spectrum-focus-indicator-thickness) var(--highcontrast-slider-handle-focus-ring-color-key-focus, var(--mod-slider-handle-focus-ring-color-key-focus, var(--spectrum-slider-handle-focus-ring-color-key-focus)));
-    }
-  }
+		&::before {
+			box-shadow: 0 0 0 var(--spectrum-focus-indicator-thickness) var(--highcontrast-slider-handle-focus-ring-color-key-focus, var(--mod-slider-handle-focus-ring-color-key-focus, var(--spectrum-slider-handle-focus-ring-color-key-focus)));
+		}
+	}
 
-  &:active,
-  &.is-dragged {
-    border-color: var(--highcontrast-slider-handle-border-color-down, var(--mod-slider-handle-border-color-down, var(--spectrum-slider-handle-border-color-down)));
-  }
+	&:active,
+	&.is-dragged {
+		border-color: var(--highcontrast-slider-handle-border-color-down, var(--mod-slider-handle-border-color-down, var(--spectrum-slider-handle-border-color-down)));
+	}
 }
 
-
 .spectrum-Slider--ramp {
-  .spectrum-Slider-handle {
-    box-shadow: 0 0 0 var(--spectrum-slider-handle-gap) var(--highcontrast-slider-ramp-handle-border-color-active, var(--mod-sectrum-slider-ramp-handle-border-color-active, var(--spectrum-slider-ramp-handle-border-color-active)));
-    background: var(--mod-slider-ramp-handle-background-color, var(--highcontrast-slider-ramp-handle-background-color, var(--spectrum-slider-ramp-handle-background-color)));
-  }
+	.spectrum-Slider-handle {
+		box-shadow: 0 0 0 var(--spectrum-slider-handle-gap) var(--highcontrast-slider-ramp-handle-border-color-active, var(--mod-sectrum-slider-ramp-handle-border-color-active, var(--spectrum-slider-ramp-handle-border-color-active)));
+		background: var(--mod-slider-ramp-handle-background-color, var(--highcontrast-slider-ramp-handle-background-color, var(--spectrum-slider-ramp-handle-background-color)));
+	}
 }
 
 .spectrum-Slider-input {
-  background: transparent;
+	background: transparent;
 }
 
 .spectrum-Slider-tick {
-  &::after {
-    background-color: var(--highcontrast-slider-tick-mark-color, var(--mod-slider-tick-mark-color, var(--spectrum-slider-tick-mark-color)));
-  }
+	&::after {
+		background-color: var(--highcontrast-slider-tick-mark-color, var(--mod-slider-tick-mark-color, var(--spectrum-slider-tick-mark-color)));
+	}
 }
 
 .spectrum-Slider-handle {
-  &.is-dragged {
-    border-color: var(--highcontrast-slider-handle-border-color-down, var(--mod-slider-handle-border-color-down, var(--spectrum-slider-handle-border-color-down)));
-    background: var(--highcontrast-slider-handle-background-color, var(--mod-slider-handle-background-color, var(--spectrum-slider-handle-background-color)));
-  }
+	&.is-dragged {
+		border-color: var(--highcontrast-slider-handle-border-color-down, var(--mod-slider-handle-border-color-down, var(--spectrum-slider-handle-border-color-down)));
+		background: var(--highcontrast-slider-handle-background-color, var(--mod-slider-handle-background-color, var(--spectrum-slider-handle-background-color)));
+	}
 }
 
-
 .spectrum-Slider--range {
-  .spectrum-Slider-track {
-    &:not(:first-of-type, :last-of-type)::before {
-      background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color)));
-    }
-  }
+	.spectrum-Slider-track {
+		&:not(:first-of-type, :last-of-type)::before {
+			background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color)));
+		}
+	}
 }
 
 .spectrum-Slider.is-disabled {
-  cursor: default;
-
-  .spectrum-Slider-controls {
-    cursor: default;
-  }
-
-  .spectrum-Slider-tickLabel {
-    color: var(--highcontrast-slider-label-text-color-disabled, var(--mod-slider-label-text-color-disabled, var(--spectrum-slider-label-text-color-disabled)));
-  }
-
-  .spectrum-Slider-labelContainer {
-    color: var(--highcontrast-slider-label-text-color-disabled, var(--mod-slider-label-text-color-disabled, var(--spectrum-slider-label-text-color-disabled)));
-  }
-
-  .spectrum-Slider-handle {
-    border-color: var(--highcontrast-slider-handle-border-color-disabled, var(--mod-slider-handle-border-color-disabled, var(--spectrum-slider-handle-border-color-disabled)));
-    background: var(--highcontrast-slider-handle-disabled-background-color, var(--mod-slider-handle-disabled-background-color, var(--spectrum-slider-handle-disabled-background-color)));
-    cursor: default;
-    pointer-events: none;
-
-    &:hover,
-    &:active {
-      border-color: var(--highcontrast-disabled-border-color, var(--mod-disabled-border-color, var(--spectrum-disabled-border-color)));
-      background: var(--highcontrast-slider-handle-background-color-disabled, var(--mod-slider-handle-background-color-disabled, var(--spectrum-slider-handle-background-color-disabled)));
-    }
-  }
-
-  .spectrum-Slider-track {
-    &::before {
-      background: var(--highcontrast-slider-track-color-disabled, var(--mod-slider-track-color-disabled, var(--spectrum-slider-track-color-disabled)));
-    }
-  }
-
-  &.spectrum-Slider--filled {
-    .spectrum-Slider-track:first-child::before {
-      background: var(--highcontrast-slider-track-fill-color-disabled, var(--mod-slider-track-fill-color-disabled, var(--spectrum-slider-track-fill-color-disabled)));
-    }
-  }
-
-  .spectrum-Slider-fill {
-    &::before {
-      background: var(--highcontrast-slider-track-fill-color-disabled, var(--mod-slider-track-fill-color-disabled, var(--spectrum-slider-track-fill-color-disabled)));
-    }
-  }
-
-  .spectrum-Slider-ramp {
-    path {
-      fill: var(--highcontrast-slider-ramp-track-color-disabled, var(--mod-slider-ramp-track-color-disabled, var(--spectrum-slider-ramp-track-color-disabled)));
-    }
-  }
-
-  .spectrum-Slider-tick {
-    &::after {
-      background-color: var(--highcontrast-slider-tick-mark-color-disabled, var(--mod-slider-tick-mark-color-disabled, var(--spectrum-slider-tick-mark-color-disabled)));
-    }
-  }
-
-  &.spectrum-Slider--range {
-    .spectrum-Slider-track:not(:first-of-type, :last-of-type)::before {
-      background: var(--highcontrast-slider-track-color-disabled, var(--mod-slider-track-color-disabled, var(--spectrum-slider-track-color-disabled)));
-    }
-  }
+	cursor: default;
+
+	.spectrum-Slider-controls {
+		cursor: default;
+	}
+
+	.spectrum-Slider-tickLabel {
+		color: var(--highcontrast-slider-label-text-color-disabled, var(--mod-slider-label-text-color-disabled, var(--spectrum-slider-label-text-color-disabled)));
+	}
+
+	.spectrum-Slider-labelContainer {
+		color: var(--highcontrast-slider-label-text-color-disabled, var(--mod-slider-label-text-color-disabled, var(--spectrum-slider-label-text-color-disabled)));
+	}
+
+	.spectrum-Slider-handle {
+		border-color: var(--highcontrast-slider-handle-border-color-disabled, var(--mod-slider-handle-border-color-disabled, var(--spectrum-slider-handle-border-color-disabled)));
+		background: var(--highcontrast-slider-handle-disabled-background-color, var(--mod-slider-handle-disabled-background-color, var(--spectrum-slider-handle-disabled-background-color)));
+		cursor: default;
+		pointer-events: none;
+
+		&:hover,
+		&:active {
+			border-color: var(--highcontrast-disabled-border-color, var(--mod-disabled-border-color, var(--spectrum-disabled-border-color)));
+			background: var(--highcontrast-slider-handle-background-color-disabled, var(--mod-slider-handle-background-color-disabled, var(--spectrum-slider-handle-background-color-disabled)));
+		}
+	}
+
+	.spectrum-Slider-track {
+		&::before {
+			background: var(--highcontrast-slider-track-color-disabled, var(--mod-slider-track-color-disabled, var(--spectrum-slider-track-color-disabled)));
+		}
+	}
+
+	&.spectrum-Slider--filled {
+		.spectrum-Slider-track:first-child::before {
+			background: var(--highcontrast-slider-track-fill-color-disabled, var(--mod-slider-track-fill-color-disabled, var(--spectrum-slider-track-fill-color-disabled)));
+		}
+	}
+
+	.spectrum-Slider-fill {
+		&::before {
+			background: var(--highcontrast-slider-track-fill-color-disabled, var(--mod-slider-track-fill-color-disabled, var(--spectrum-slider-track-fill-color-disabled)));
+		}
+	}
+
+	.spectrum-Slider-ramp {
+		path {
+			fill: var(--highcontrast-slider-ramp-track-color-disabled, var(--mod-slider-ramp-track-color-disabled, var(--spectrum-slider-ramp-track-color-disabled)));
+		}
+	}
+
+	.spectrum-Slider-tick {
+		&::after {
+			background-color: var(--highcontrast-slider-tick-mark-color-disabled, var(--mod-slider-tick-mark-color-disabled, var(--spectrum-slider-tick-mark-color-disabled)));
+		}
+	}
+
+	&.spectrum-Slider--range {
+		.spectrum-Slider-track:not(:first-of-type, :last-of-type)::before {
+			background: var(--highcontrast-slider-track-color-disabled, var(--mod-slider-track-color-disabled, var(--spectrum-slider-track-color-disabled)));
+		}
+	}
 }
 
 @media (forced-colors: active) {
-  .spectrum-Slider {
-    /*  over-writes */
-    --highcontrast-slider-track-color: ButtonText;
-    --highcontrast-slider-track-color-static: ButtonText;
-    --highcontrast-slider-track-fill-color: ButtonText;
-    --highcontrast-slider-filled-track-fill-color: Highlight;
-    --highcontrast-slider-ramp-track-color: ButtonText;
-    --highcontrast-slider-ramp-track-color-disabled: GrayText;
-    --highcontrast-slider-tick-mark-color: ButtonText;
-    --highcontrast-slider-handle-border-color: ButtonText;
-    --highcontrast-slider-handle-border-color-hover: Highlight;
-    --highcontrast-slider-handle-border-color-down: Highlight;
-    --highcontrast-slider-handle-border-color-key-focus: Highlight;
-    --highcontrast-slider-handle-focus-ring-color-key-focus: CanvasText;
-    --highcontrast-slider-handle-background-color: ButtonFace;
-    --highcontrast-slider-ramp-handle-border-color-active: ButtonFace;
-    --highcontrast-slider-ramp-handle-background-color: ButtonFace;
-
-    --spectrum-slider-track-color: ButtonText;
-    --spectrum-slider-track-fill-color: ButtonText;
-    --spectrum-slider-ramp-track-color: ButtonText;
-    --spectrum-slider-ramp-track-color-disabled: GrayText;
-
-    --spectrum-slider-handle-background-color: ButtonFace;
-    --spectrum-slider-handle-background-color-disabled: GrayText;
-    --spectrum-slider-handle-border-color: ButtonText;
-    --spectrum-slider-handle-disabled-background-color: GrayText;
-
-    --spectrum-slider-tick-mark-color: ButtonText;
-    --spectrum-slider-tick-mark-color-disabled: GrayText;
-
-    --spectrum-slider-handle-border-color-hover: Highlight;
-    --spectrum-slider-handle-border-color-down: Highlight;
-    --spectrum-slider-handle-border-color-key-focus: Highlight;
-    --spectrum-slider-handle-focus-ring-color-key-focus: Highlight;
-
-    --spectrum-slider-track-color-disabled: GrayText;
-    --spectrum-slider-track-fill-color-disabled: GrayText;
-
-    --spectrum-slider-handle-border-color-disabled: GrayText;
-
-    --spectrum-slider-label-text-color: CanvasText;
-    --spectrum-slider-label-text-color-disabled: GrayText;
-
-    --spectrum-slider-ramp-handle-border-color-active: ButtonText;
-
-    .spectrum-Slider-handle.is-focused::before {
-      forced-color-adjust: none;
-    }
-
-    .spectrum-Slider--ramp .spectrum-Slider-handle {
-      /* forced-color-adjust required to ensure the "circle" around the handle is transparent */
-      forced-color-adjust: none;
-    }
-
-    /* Slider control hover and focus colors for high contrast mode */
-    /* Filled and range variants are excluded since the filled portion of the track uses Highlight */
-    &:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) {
-      .spectrum-Slider-controls:hover,
-      .spectrum-Slider-controls:active,
-      .spectrum-Slider-controls:focus-within,
-      .spectrum-Slider-controls.is-focused {
-        --highcontrast-slider-track-fill-color: Highlight;
-        --highcontrast-slider-track-color: Highlight;
-        --highcontrast-slider-handle-border-color: Highlight;
-        --highcontrast-slider-ramp-track-color: Highlight;
-        --highcontrast-slider-tick-mark-color: Highlight;
-      }
-    }
-
-    /* Slider handle turns transparent in high contrast mode for ramp */
-    &.is-disabled {
-      .spectrum-Slider-ramp + .spectrum-Slider-handle {
-        fill: ButtonFace;
-        background-color: ButtonFace;
-      }
-    }
-  }
+	.spectrum-Slider {
+		/*  over-writes */
+		--highcontrast-slider-track-color: ButtonText;
+		--highcontrast-slider-track-color-static: ButtonText;
+		--highcontrast-slider-track-fill-color: ButtonText;
+		--highcontrast-slider-filled-track-fill-color: Highlight;
+		--highcontrast-slider-ramp-track-color: ButtonText;
+		--highcontrast-slider-ramp-track-color-disabled: GrayText;
+		--highcontrast-slider-tick-mark-color: ButtonText;
+		--highcontrast-slider-handle-border-color: ButtonText;
+		--highcontrast-slider-handle-border-color-hover: Highlight;
+		--highcontrast-slider-handle-border-color-down: Highlight;
+		--highcontrast-slider-handle-border-color-key-focus: Highlight;
+		--highcontrast-slider-handle-focus-ring-color-key-focus: CanvasText;
+		--highcontrast-slider-handle-background-color: ButtonFace;
+		--highcontrast-slider-ramp-handle-border-color-active: ButtonFace;
+		--highcontrast-slider-ramp-handle-background-color: ButtonFace;
+
+		--spectrum-slider-track-color: ButtonText;
+		--spectrum-slider-track-fill-color: ButtonText;
+		--spectrum-slider-ramp-track-color: ButtonText;
+		--spectrum-slider-ramp-track-color-disabled: GrayText;
+
+		--spectrum-slider-handle-background-color: ButtonFace;
+		--spectrum-slider-handle-background-color-disabled: GrayText;
+		--spectrum-slider-handle-border-color: ButtonText;
+		--spectrum-slider-handle-disabled-background-color: GrayText;
+
+		--spectrum-slider-tick-mark-color: ButtonText;
+		--spectrum-slider-tick-mark-color-disabled: GrayText;
+
+		--spectrum-slider-handle-border-color-hover: Highlight;
+		--spectrum-slider-handle-border-color-down: Highlight;
+		--spectrum-slider-handle-border-color-key-focus: Highlight;
+		--spectrum-slider-handle-focus-ring-color-key-focus: Highlight;
+
+		--spectrum-slider-track-color-disabled: GrayText;
+		--spectrum-slider-track-fill-color-disabled: GrayText;
+
+		--spectrum-slider-handle-border-color-disabled: GrayText;
+
+		--spectrum-slider-label-text-color: CanvasText;
+		--spectrum-slider-label-text-color-disabled: GrayText;
+
+		--spectrum-slider-ramp-handle-border-color-active: ButtonText;
+
+		.spectrum-Slider-handle.is-focused::before {
+			forced-color-adjust: none;
+		}
+
+		.spectrum-Slider--ramp .spectrum-Slider-handle {
+			/* forced-color-adjust required to ensure the "circle" around the handle is transparent */
+			forced-color-adjust: none;
+		}
+
+		/* Slider control hover and focus colors for high contrast mode */
+		/* Filled and range variants are excluded since the filled portion of the track uses Highlight */
+		&:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) {
+			.spectrum-Slider-controls:hover,
+			.spectrum-Slider-controls:active,
+			.spectrum-Slider-controls:focus-within,
+			.spectrum-Slider-controls.is-focused {
+				--highcontrast-slider-track-fill-color: Highlight;
+				--highcontrast-slider-track-color: Highlight;
+				--highcontrast-slider-handle-border-color: Highlight;
+				--highcontrast-slider-ramp-track-color: Highlight;
+				--highcontrast-slider-tick-mark-color: Highlight;
+			}
+		}
+
+		/* Slider handle turns transparent in high contrast mode for ramp */
+		&.is-disabled {
+			.spectrum-Slider-ramp + .spectrum-Slider-handle {
+				fill: ButtonFace;
+				background-color: ButtonFace;
+			}
+		}
+	}
 }
diff --git a/components/slider/metadata/mods.md b/components/slider/metadata/mods.md
index 5a6c0b1d96..0c6f4dfe93 100644
--- a/components/slider/metadata/mods.md
+++ b/components/slider/metadata/mods.md
@@ -37,6 +37,7 @@
 | `--mod-slider-ramp-track-height`                       |
 | `--mod-slider-range-track-reset`                       |
 | `--mod-slider-tick-handle-background-color`            |
+| `--mod-slider-tick-label-color`                        |
 | `--mod-slider-tick-mark-border-radius`                 |
 | `--mod-slider-tick-mark-color`                         |
 | `--mod-slider-tick-mark-color-disabled`                |
diff --git a/components/splitview/index.css b/components/splitview/index.css
index f40bd050a9..9ef968840d 100644
--- a/components/splitview/index.css
+++ b/components/splitview/index.css
@@ -11,236 +11,213 @@ governing permissions and limitations under the License.
 */
 
 .spectrum-SplitView {
-  --spectrum-splitview-vertical-width: 100%;
-  --spectrum-splitview-vertical-gripper-width: 50%;
-  --spectrum-splitview-vertical-gripper-outer-width: 100%;
-  --spectrum-splitview-vertical-gripper-reset: 0;
-
-  --spectrum-splitview-background-color: var(--spectrum-gray-100);
-  --spectrum-splitview-handle-background-color: var(--spectrum-gray-300);
-  --spectrum-splitview-handle-background-color-hover: var(--spectrum-gray-400);
-  --spectrum-splitview-handle-background-color-down: var(--spectrum-gray-800);
-  --spectrum-splitview-handle-background-color-focus: var(--spectrum-focus-indicator-color);
-  --spectrum-splitview-handle-width: var(--spectrum-border-width-200);
-
-  --spectrum-splitview-gripper-border-radius: var(--spectrum-corner-radius-75);
-  --spectrum-splitview-gripper-width: var(--spectrum-border-width-400);
-  --spectrum-splitview-gripper-height: 16px; /* No good token to use for this */
-  --spectrum-splitview-gripper-border-width-horizontal: 3px; /* No good token to use for this */
-  --spectrum-splitview-gripper-border-width-vertical: var(--spectrum-border-width-400);
-
+	--spectrum-splitview-vertical-width: 100%;
+	--spectrum-splitview-vertical-gripper-width: 50%;
+	--spectrum-splitview-vertical-gripper-outer-width: 100%;
+	--spectrum-splitview-vertical-gripper-reset: 0;
+
+	--spectrum-splitview-background-color: var(--spectrum-gray-100);
+	--spectrum-splitview-content-color: var(--spectrum-body-color);
+
+	--spectrum-splitview-handle-background-color: var(--spectrum-gray-300);
+	--spectrum-splitview-handle-background-color-hover: var(--spectrum-gray-400);
+	--spectrum-splitview-handle-background-color-down: var(--spectrum-gray-800);
+	--spectrum-splitview-handle-background-color-focus: var(--spectrum-focus-indicator-color);
+	--spectrum-splitview-handle-width: var(--spectrum-border-width-200);
+
+	--spectrum-splitview-gripper-border-radius: var(--spectrum-corner-radius-75);
+	--spectrum-splitview-gripper-width: var(--spectrum-border-width-400);
+	--spectrum-splitview-gripper-height: 16px; /* No good token to use for this */
+	--spectrum-splitview-gripper-border-width-horizontal: 3px; /* No good token to use for this */
+	--spectrum-splitview-gripper-border-width-vertical: var(--spectrum-border-width-400);
 }
 
-
 .spectrum-SplitView {
-  display: flex;
-  overflow: hidden;
+	display: flex;
+	overflow: hidden;
 }
 
 .spectrum-SplitView-pane {
-  block-size: 100%;
-  background-color: var(--mod-splitview-background-color, var(--spectrum-splitview-background-color));
+	block-size: 100%;
+	background-color: var(--mod-splitview-background-color, var(--spectrum-splitview-background-color));
+	color: var(--mod-splitview-content-color, var(--spectrum-splitview-content-color));
 }
 
 .spectrum-SplitView-gripper {
-  content: "";
-  display: block;
-  position: absolute;
-  border-style: solid;
-  border-radius: var(--mod-splitview-gripper-border-radius, var(--spectrum-splitview-gripper-border-radius));
-  border-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color)));
-
-  inset-block-start: 50%;
-  transform: translate(0, -50%);
-
-  /* Prevent touch-action on handle */
-  touch-action: none;
-
-  /* half of (width + horizontal border - handle width) * -1 (for negative opposite) */
-  inset-inline-start: calc(
-    (
-        (
-            var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width)) +
-              (2 * var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical))) -
-              var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width))
-          ) / 2
-      ) * -1
-  );
-  inline-size: var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width));
-  block-size: var(--mod-splitview-gripper-height, var(--spectrum-splitview-gripper-height));
-  border-block-width: var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical));
-  border-inline-width: var(--mod-splitview-gripper-border-width-horizontal, var(--spectrum-splitview-gripper-border-width-horizontal));
-
-  &::before {
-    background-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color)));
-  }
+	content: "";
+	display: block;
+	position: absolute;
+	border-style: solid;
+	border-radius: var(--mod-splitview-gripper-border-radius, var(--spectrum-splitview-gripper-border-radius));
+	border-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color)));
+
+	inset-block-start: 50%;
+	transform: translate(0, -50%);
+
+	/* Prevent touch-action on handle */
+	touch-action: none;
+
+	/* half of (width + horizontal border - handle width) * -1 (for negative opposite) */
+	inset-inline-start: calc(((var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width)) + (2 * var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical))) - var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width))) / 2) * -1);
+	inline-size: var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width));
+	block-size: var(--mod-splitview-gripper-height, var(--spectrum-splitview-gripper-height));
+	border-block-width: var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical));
+	border-inline-width: var(--mod-splitview-gripper-border-width-horizontal, var(--spectrum-splitview-gripper-border-width-horizontal));
+
+	&::before {
+		background-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color)));
+	}
 }
 
 .spectrum-SplitView-splitter {
-  /* Contains the gripper */
-  position: relative;
-
-  background-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color)));
-
-  /* Prevent text selection while dragging */
-  user-select: none;
-
-  inline-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width));
-  block-size: 100%;
-  z-index: 1;
-
-  &.is-collapsed-start,
-  &.is-collapsed-end {
-    /* make the center line of the gripper */
-    .spectrum-SplitView-gripper::before {
-      content: "";
-      position: absolute;
-
-      inset-block-start: 0;
-      inset-inline-start: calc(
-        50% - calc(var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)) / 2)
-      );
-      inline-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width));
-      block-size: 100%;
-    }
-  }
-
-  &.is-collapsed-start {
-    .spectrum-SplitView-gripper {
-      inset-inline-start: 0;
-    }
-  }
-
-  &.is-collapsed-end {
-    .spectrum-SplitView-gripper {
-      inset-inline-end: 0;
-      inset-inline-start: auto;
-    }
-  }
+	/* Contains the gripper */
+	position: relative;
+
+	background-color: var(--highcontrast-splitview-handle-background-color, var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color)));
+
+	/* Prevent text selection while dragging */
+	user-select: none;
+
+	inline-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width));
+	block-size: 100%;
+	z-index: 1;
+
+	&.is-collapsed-start,
+	&.is-collapsed-end {
+		/* make the center line of the gripper */
+		.spectrum-SplitView-gripper::before {
+			content: "";
+			position: absolute;
+
+			inset-block-start: 0;
+			inset-inline-start: calc(50% - calc(var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)) / 2));
+			inline-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width));
+			block-size: 100%;
+		}
+	}
+
+	&.is-collapsed-start {
+		.spectrum-SplitView-gripper {
+			inset-inline-start: 0;
+		}
+	}
+
+	&.is-collapsed-end {
+		.spectrum-SplitView-gripper {
+			inset-inline-end: 0;
+			inset-inline-start: auto;
+		}
+	}
 }
 
 .spectrum-SplitView-splitter.is-draggable {
-  &:hover,
-  &.is-hovered {
-    background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
-
-    .spectrum-SplitView-gripper {
-      border-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
-    }
-
-    .spectrum-SplitView-gripper::before {
-      background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
-    }
-  }
-
-  &:active,
-  &.is-active {
-    background-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)));
-
-    .spectrum-SplitView-gripper {
-      border-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)));
-    }
-
-    /* Center line of gripper */
-    .spectrum-SplitView-gripper::before {
-      background-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)));
-    }
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  &:focus-visible {
-    outline: none;
-    background-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
-
-    .spectrum-SplitView-gripper {
-      border-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
-      box-shadow: 0 0 0 1px var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
-    }
-
-    .spectrum-SplitView-gripper::before {
-      background-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
-    }
-  }
+	&:hover,
+	&.is-hovered {
+		background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
+
+		.spectrum-SplitView-gripper {
+			border-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
+		}
+
+		.spectrum-SplitView-gripper::before {
+			background-color: var(--highcontrast-splitview-handle-background-color-hover, var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover)));
+		}
+	}
+
+	&:active,
+	&.is-active {
+		background-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)));
+
+		.spectrum-SplitView-gripper {
+			border-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)));
+		}
+
+		/* Center line of gripper */
+		.spectrum-SplitView-gripper::before {
+			background-color: var(--highcontrast-splitview-handle-background-color-down, var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down)));
+		}
+	}
+
+	&:focus {
+		outline: none;
+	}
+
+	&:focus-visible {
+		outline: none;
+		background-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
+
+		.spectrum-SplitView-gripper {
+			border-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
+			box-shadow: 0 0 0 1px var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
+		}
+
+		.spectrum-SplitView-gripper::before {
+			background-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus)));
+		}
+	}
 }
 
 .spectrum-SplitView--vertical {
-  flex-direction: column;
-
-  .spectrum-SplitView-pane {
-    block-size: auto;
-    inline-size: var(--mod-splitview-vertical-width, var(--spectrum-splitview-vertical-width));
-  }
-
-  .spectrum-SplitView-gripper {
-    /* half of (height + vertical border - handle width) * -1 (for negative opposite) */
-    inset-block-start: calc(
-      (
-          (
-              var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width)) +
-                (2 * var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical))) -
-                var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width))
-            ) / 2
-        ) * -1
-    );
-
-    transform: translate(
-      calc(-1 * var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width))),
-      0
-    );
-    inset-inline-start: var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width));
-    inline-size: var(--mod-splitview-gripper-height, var(--spectrum-splitview-gripper-height));
-    block-size: var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width));
-
-    /* opposite of default border-width */
-    border-block-width: var(--mod-splitview-gripper-border-width-horizontal, var(--spectrum-splitview-gripper-border-width-horizontal));
-    border-inline-width: var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical));
-  }
-
-  .spectrum-SplitView-splitter {
-    inline-size: var(--mod-splitview-vertical-width, var(--spectrum-splitview-vertical-width));
-    block-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width));
-  }
-
-  .spectrum-SplitView-splitter.is-collapsed-start,
-  .spectrum-SplitView-splitter.is-collapsed-end {
-    .spectrum-SplitView-gripper {
-      inset-inline-start: var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width));
-    }
-    
-    /* make the center line of the gripper */
-    .spectrum-SplitView-gripper::before {
-      inset-block-start: calc(
-        var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width)) -
-          calc(var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)) / 2)
-      );
-      inset-inline-start: var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset));
-      inline-size: var(--mod-splitview-vertical-gripper-outer-width, var(--spectrum-splitview-vertical-gripper-outer-width));
-      block-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width));
-    }
-  }
-
-  .spectrum-SplitView-splitter.is-collapsed-start {
-    .spectrum-SplitView-gripper {
-      inset-block-start: var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset));
-    }
-  }
-
-  .spectrum-SplitView-splitter.is-collapsed-end {
-    .spectrum-SplitView-gripper {
-      inset-block-start: auto;
-      inset-block-end: var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset));
-    }
-  }
+	flex-direction: column;
+
+	.spectrum-SplitView-pane {
+		block-size: auto;
+		inline-size: var(--mod-splitview-vertical-width, var(--spectrum-splitview-vertical-width));
+	}
+
+	.spectrum-SplitView-gripper {
+		/* half of (height + vertical border - handle width) * -1 (for negative opposite) */
+		inset-block-start: calc(((var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width)) + (2 * var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical))) - var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width))) / 2) * -1);
+
+		transform: translate(calc(-1 * var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width))), 0);
+		inset-inline-start: var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width));
+		inline-size: var(--mod-splitview-gripper-height, var(--spectrum-splitview-gripper-height));
+		block-size: var(--mod-splitview-gripper-width, var(--spectrum-splitview-gripper-width));
+
+		/* opposite of default border-width */
+		border-block-width: var(--mod-splitview-gripper-border-width-horizontal, var(--spectrum-splitview-gripper-border-width-horizontal));
+		border-inline-width: var(--mod-splitview-gripper-border-width-vertical, var(--spectrum-splitview-gripper-border-width-vertical));
+	}
+
+	.spectrum-SplitView-splitter {
+		inline-size: var(--mod-splitview-vertical-width, var(--spectrum-splitview-vertical-width));
+		block-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width));
+	}
+
+	.spectrum-SplitView-splitter.is-collapsed-start,
+	.spectrum-SplitView-splitter.is-collapsed-end {
+		.spectrum-SplitView-gripper {
+			inset-inline-start: var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width));
+		}
+
+		/* make the center line of the gripper */
+		.spectrum-SplitView-gripper::before {
+			inset-block-start: calc(var(--mod-splitview-vertical-gripper-width, var(--spectrum-splitview-vertical-gripper-width)) - calc(var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width)) / 2));
+			inset-inline-start: var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset));
+			inline-size: var(--mod-splitview-vertical-gripper-outer-width, var(--spectrum-splitview-vertical-gripper-outer-width));
+			block-size: var(--mod-splitview-handle-width, var(--spectrum-splitview-handle-width));
+		}
+	}
+
+	.spectrum-SplitView-splitter.is-collapsed-start {
+		.spectrum-SplitView-gripper {
+			inset-block-start: var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset));
+		}
+	}
+
+	.spectrum-SplitView-splitter.is-collapsed-end {
+		.spectrum-SplitView-gripper {
+			inset-block-start: auto;
+			inset-block-end: var(--mod-splitview-vertical-gripper-reset, var(--spectrum-splitview-vertical-gripper-reset));
+		}
+	}
 }
 
 @media (forced-colors: active) {
-  .spectrum-SplitView {
-    --highcontrast-splitview-handle-background-color: CanvasText;
-    --highcontrast-splitview-handle-background-color-hover: CanvasText;
-    --highcontrast-splitview-handle-background-color-down: CanvasText;
-    --highcontrast-splitview-handle-background-color-focus: Highlight;
-  }
+	.spectrum-SplitView {
+		--highcontrast-splitview-handle-background-color: CanvasText;
+		--highcontrast-splitview-handle-background-color-hover: CanvasText;
+		--highcontrast-splitview-handle-background-color-down: CanvasText;
+		--highcontrast-splitview-handle-background-color-focus: Highlight;
+	}
 }
diff --git a/components/splitview/metadata/mods.md b/components/splitview/metadata/mods.md
index 9bd25ae992..4bc870ef41 100644
--- a/components/splitview/metadata/mods.md
+++ b/components/splitview/metadata/mods.md
@@ -1,6 +1,7 @@
 | Modifiable custom properties                      |
 | ------------------------------------------------- |
 | `--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`   |
diff --git a/components/treeview/index.css b/components/treeview/index.css
index 26b23eef66..dc0ec39c98 100644
--- a/components/treeview/index.css
+++ b/components/treeview/index.css
@@ -11,51 +11,52 @@ governing permissions and limitations under the License.
 */
 
 .spectrum-TreeView {
-  --spectrum-treeview-line-height: var(--spectrum-line-height-200);
-  --spectrum-treeview-margin-block: 1.0em;
-  --spectrum-treeview-font-size: var(--spectrum-font-size-100);
+	--spectrum-treeview-line-height: var(--spectrum-line-height-200);
+	--spectrum-treeview-margin-block: 1em;
+	--spectrum-treeview-font-size: var(--spectrum-font-size-100);
 
-  --spectrum-treeview-item-min-block-size: var(--spectrum-component-height-100);
-  --spectrum-treeview-item-indentation: var(--spectrum-treeview-item-indentation-medium);
+	--spectrum-treeview-item-min-block-size: var(--spectrum-component-height-100);
+	--spectrum-treeview-item-indentation: var(--spectrum-treeview-item-indentation-medium);
 
-  --spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-100);
-  --spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-100);
+	--spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-100);
+	--spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-100);
 
-  --spectrum-treeview-section-spacing: var(--spectrum-treeview-item-indentation-medium);
-  --spectrum-treeview-heading-font-weight: var(--spectrum-bold-font-weight);
-  --spectrum-treeview-heading-bottom-to-text: var(--spectrum-component-edge-to-text-100);
+	--spectrum-treeview-section-spacing: var(--spectrum-treeview-item-indentation-medium);
+	--spectrum-treeview-heading-font-weight: var(--spectrum-bold-font-weight);
+	--spectrum-treeview-heading-bottom-to-text: var(--spectrum-component-edge-to-text-100);
+	--spectrum-treeview-heading-color: var(--spectrum-heading-color);
 
-  --spectrum-treeview-item-border-size: var(--spectrum-border-width-200);
-  --spectrum-treeview-item-border-size-selected: 1px;
-  --spectrum-treeview-item-border-radius: 0px;
+	--spectrum-treeview-item-border-size: var(--spectrum-border-width-200);
+	--spectrum-treeview-item-border-size-selected: 1px;
+	--spectrum-treeview-item-border-radius: 0px;
 
-  --spectrum-treeview-item-border-color-selected: var(--spectrum-blue-800);
-  --spectrum-treeview-item-border-color-focus: var(--spectrum-blue-700);
+	--spectrum-treeview-item-border-color-selected: var(--spectrum-blue-800);
+	--spectrum-treeview-item-border-color-focus: var(--spectrum-blue-700);
 
-  --spectrum-treeview-item-background-color-hover: var(--spectrum-gray-200);
-  --spectrum-treeview-item-background-color-focus: var(--spectrum-gray-200);
+	--spectrum-treeview-item-background-color-hover: var(--spectrum-gray-200);
+	--spectrum-treeview-item-background-color-focus: var(--spectrum-gray-200);
 
-  --spectrum-treeview-item-border-color-quiet-selected: transparent;
+	--spectrum-treeview-item-border-color-quiet-selected: transparent;
 
-  --spectrum-treeview-item-icon-gap: var(--spectrum-text-to-visual-75);
-  --spectrum-treeview-item-icon-color: var(--spectrum-gray-700);
-  --spectrum-treeview-item-icon-color-hover: var(--spectrum-gray-900);
-  --spectrum-treeview-item-icon-color-focus: var(--spectrum-gray-900);
-  --spectrum-treeview-item-icon-color-selected: var(--spectrum-gray-900);
-  --spectrum-treeview-item-icon-color-disabled: var(--spectrum-disabled-content-color);
+	--spectrum-treeview-item-icon-gap: var(--spectrum-text-to-visual-75);
+	--spectrum-treeview-item-icon-color: var(--spectrum-gray-700);
+	--spectrum-treeview-item-icon-color-hover: var(--spectrum-gray-900);
+	--spectrum-treeview-item-icon-color-focus: var(--spectrum-gray-900);
+	--spectrum-treeview-item-icon-color-selected: var(--spectrum-gray-900);
+	--spectrum-treeview-item-icon-color-disabled: var(--spectrum-disabled-content-color);
 
-  --spectrum-treeview-item-text-color: var(--spectrum-neutral-content-color-default);
-  --spectrum-treeview-item-text-color-selected: var(--spectrum-gray-900);
-  --spectrum-treeview-item-text-color-disabled: var(--spectrum-gray-500);
-  --spectrum-treeview-item-text-color-focus: var(--spectrum-gray-900);
-  --spectrum-treeview-item-text-color-hover: var(--spectrum-gray-900);
+	--spectrum-treeview-item-text-color: var(--spectrum-neutral-content-color-default);
+	--spectrum-treeview-item-text-color-selected: var(--spectrum-gray-900);
+	--spectrum-treeview-item-text-color-disabled: var(--spectrum-gray-500);
+	--spectrum-treeview-item-text-color-focus: var(--spectrum-gray-900);
+	--spectrum-treeview-item-text-color-hover: var(--spectrum-gray-900);
 
-  --spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-100));
-  --spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-medium);
+	--spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-100));
+	--spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-medium);
 
-  --spectrum-treeview-item-min-block-size-thumbnail-offset: var(--spectrum-treeview-item-min-block-size-thumbnail-offset-medium, 0px);
+	--spectrum-treeview-item-min-block-size-thumbnail-offset: var(--spectrum-treeview-item-min-block-size-thumbnail-offset-medium, 0px);
 
-  --spectrum-treeview-indicator-animation-duration: var(--spectrum-animation-duration-100);
+	--spectrum-treeview-indicator-animation-duration: var(--spectrum-animation-duration-100);
 
 	&:dir(rtl) {
 		--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
@@ -63,351 +64,349 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-TreeView--sizeS {
-  --spectrum-treeview-font-size: var(--spectrum-font-size-75);
+	--spectrum-treeview-font-size: var(--spectrum-font-size-75);
 
-  --spectrum-treeview-item-min-block-size: var(--spectrum-component-height-75);
-  --spectrum-treeview-item-indentation: var(--spectrum-treeview-item-indentation-small);
-  --spectrum-treeview-heading-bottom-to-text: var(--spectrum-component-edge-to-text-75);
+	--spectrum-treeview-item-min-block-size: var(--spectrum-component-height-75);
+	--spectrum-treeview-item-indentation: var(--spectrum-treeview-item-indentation-small);
+	--spectrum-treeview-heading-bottom-to-text: var(--spectrum-component-edge-to-text-75);
 
-  --spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-75);
-  --spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-75));
-  --spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-75);
-  --spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-small);
+	--spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-75);
+	--spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-75));
+	--spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-75);
+	--spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-small);
 
-  --spectrum-treeview-item-min-block-size-thumbnail-offset: 6px;
+	--spectrum-treeview-item-min-block-size-thumbnail-offset: 6px;
 }
 
 .spectrum-TreeView--sizeL {
-  --spectrum-treeview-font-size: var(--spectrum-font-size-200);
+	--spectrum-treeview-font-size: var(--spectrum-font-size-200);
 
-  --spectrum-treeview-item-indentation: var(--spectrum-treeview-item-indentation-large);
-  --spectrum-treeview-item-min-block-size: var(--spectrum-component-height-200);
-  --spectrum-treeview-heading-bottom-to-text: var(--spectrum-component-edge-to-text-200);
+	--spectrum-treeview-item-indentation: var(--spectrum-treeview-item-indentation-large);
+	--spectrum-treeview-item-min-block-size: var(--spectrum-component-height-200);
+	--spectrum-treeview-heading-bottom-to-text: var(--spectrum-component-edge-to-text-200);
 
-  --spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-200);
-  --spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-200));
-  --spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-200);
-  --spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-large);
+	--spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-200);
+	--spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-200));
+	--spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-200);
+	--spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-large);
 
-  --spectrum-treeview-item-min-block-size-thumbnail-offset: 0px;
+	--spectrum-treeview-item-min-block-size-thumbnail-offset: 0px;
 }
 
 .spectrum-TreeView--sizeXL {
-  --spectrum-treeview-font-size: var(--spectrum-font-size-300);
+	--spectrum-treeview-font-size: var(--spectrum-font-size-300);
 
-  --spectrum-treeview-item-indentation: var(--spectrum-treeview-item-indentation-extra-large);
-  --spectrum-treeview-item-min-block-size: var(--spectrum-component-height-300);
-  --spectrum-treeview-heading-bottom-to-text: var(--spectrum-component-edge-to-text-300);
+	--spectrum-treeview-item-indentation: var(--spectrum-treeview-item-indentation-extra-large);
+	--spectrum-treeview-item-min-block-size: var(--spectrum-component-height-300);
+	--spectrum-treeview-heading-bottom-to-text: var(--spectrum-component-edge-to-text-300);
 
-  --spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-300);
-  --spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-300));
-  --spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-300);
-  --spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large);
+	--spectrum-treeview-item-padding-inline-start: var(--spectrum-component-height-300);
+	--spectrum-treeview-indicator-margin-inline-start: calc(-1 * var(--spectrum-component-height-300));
+	--spectrum-treeview-item-padding-inline-end: var(--spectrum-component-edge-to-text-300);
+	--spectrum-treeview-indicator-padding: var(--spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large);
 
-  --spectrum-treeview-item-min-block-size-thumbnail-offset: 0px;
+	--spectrum-treeview-item-min-block-size-thumbnail-offset: 0px;
 }
 
 .spectrum-TreeView--quiet {
-  --mod-treeview-item-background-color-selected: var(--highcontrast-treeview-item-background-color-selected, var(--mod-treeview-item-background-color-quiet-selected, var(--spectrum-treeview-item-background-color-quiet-selected)));
-  --mod-treeview-item-border-color-selected: var(--highcontrast-treeview-item-border-color-selected, var(--mod-treeview-item-border-color-selected-quiet, transparent));
+	--mod-treeview-item-background-color-selected: var(--highcontrast-treeview-item-background-color-selected, var(--mod-treeview-item-background-color-quiet-selected, var(--spectrum-treeview-item-background-color-quiet-selected)));
+	--mod-treeview-item-border-color-selected: var(--highcontrast-treeview-item-border-color-selected, var(--mod-treeview-item-border-color-selected-quiet, transparent));
 }
 
 .spectrum-TreeView--thumbnail {
-  --mod-treeview-item-min-block-size: var(--mod-treeview-item-min-block-size-thumbnail, calc(
-    var(--spectrum-treeview-item-min-block-size) + var(--spectrum-treeview-item-min-block-size-thumbnail-offset)
-  ));
+	--mod-treeview-item-min-block-size: var(--mod-treeview-item-min-block-size-thumbnail, calc(var(--spectrum-treeview-item-min-block-size) + var(--spectrum-treeview-item-min-block-size-thumbnail-offset)));
 }
 
 .spectrum-TreeView--detached {
-  --mod-treeview-item-border-radius: var(--mod-treeview-item-border-radius-detached, var(--spectrum-corner-radius-100));
+	--mod-treeview-item-border-radius: var(--mod-treeview-item-border-radius-detached, var(--spectrum-corner-radius-100));
 }
 
-@media (forced-colors: active){
-  .spectrum-TreeView {
-    --highcontrast-treeview-item-background-color-selected: Highlight;
-    --highcontrast-treeview-item-border-color-selected: Highlight;
-    --highcontrast-treeview-item-text-color-selected: HighlightText;
-    --highcontrast-treeview-item-icon-color-selected: HighlightText;
-
-    --highcontrast-treeview-item-icon-color: LinkText;
-    --highcontrast-treeview-item-text-color: LinkText;
-
-    --highcontrast-treeview-item-background-color-focus: Highlight;
-    --highcontrast-treeview-item-text-color-focus: HighlightText;
-    --highcontrast-treeview-item-border-color-focus: CanvasText;
-    --highcontrast-treeview-item-icon-color-focus: HighlightText;
-
-    --highcontrast-treeview-item-background-color-disabled: Canvas;
-    --highcontrast-treeview-item-text-color-disabled: GrayText;
-    --highcontrast-treeview-item-icon-color-disabled: GrayText;
-
-    --highcontrast-treeview-heading-color: CanvasText;
-  }
-
-  @supports (color: SelectedItem) {
-    .spectrum-TreeView {
-      --highcontrast-treeview-item-background-color-selected: SelectedItem;
-      --highcontrast-treeview-item-border-color-selected: SelectedItem;
-      --highcontrast-treeview-item-text-color-selected: SelectedItemText;
-      --highcontrast-treeview-item-icon-color-selected: SelectedItemText;
-    }
-  }
-
-  .spectrum-TreeView-itemLabel {
-    forced-color-adjust: none;
-    background: transparent;
-  }
-
-  .spectrum-TreeView-itemLink::before {
-    forced-color-adjust: none;
-  }
+@media (forced-colors: active) {
+	.spectrum-TreeView {
+		--highcontrast-treeview-item-background-color-selected: Highlight;
+		--highcontrast-treeview-item-border-color-selected: Highlight;
+		--highcontrast-treeview-item-text-color-selected: HighlightText;
+		--highcontrast-treeview-item-icon-color-selected: HighlightText;
+
+		--highcontrast-treeview-item-icon-color: LinkText;
+		--highcontrast-treeview-item-text-color: LinkText;
+
+		--highcontrast-treeview-item-background-color-focus: Highlight;
+		--highcontrast-treeview-item-text-color-focus: HighlightText;
+		--highcontrast-treeview-item-border-color-focus: CanvasText;
+		--highcontrast-treeview-item-icon-color-focus: HighlightText;
+
+		--highcontrast-treeview-item-background-color-disabled: Canvas;
+		--highcontrast-treeview-item-text-color-disabled: GrayText;
+		--highcontrast-treeview-item-icon-color-disabled: GrayText;
+
+		--highcontrast-treeview-heading-color: CanvasText;
+	}
+
+	@supports (color: SelectedItem) {
+		.spectrum-TreeView {
+			--highcontrast-treeview-item-background-color-selected: SelectedItem;
+			--highcontrast-treeview-item-border-color-selected: SelectedItem;
+			--highcontrast-treeview-item-text-color-selected: SelectedItemText;
+			--highcontrast-treeview-item-icon-color-selected: SelectedItemText;
+		}
+	}
+
+	.spectrum-TreeView-itemLabel {
+		forced-color-adjust: none;
+		background: transparent;
+	}
+
+	.spectrum-TreeView-itemLink::before {
+		forced-color-adjust: none;
+	}
 }
 
 .spectrum-TreeView {
-  display: block;
-  position: relative;
-  padding: 0;
-  list-style: none;
-  outline: none;
-  user-select: none;
-  line-height: var(--mod-treeview-line-height, var(--spectrum-treeview-line-height));
-  margin-block: var(--mod-treeview-margin-block, var(--spectrum-treeview-margin-block));
-  font-size: var(--mod-treeview-font-size, var(--spectrum-treeview-font-size));
-
-  /* Close (hide) nested treeviews by default. */
-  .spectrum-TreeView {
-    position: static;
-    block-size: 0;
-    display: none;
-    padding-inline-start: var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation));
-    margin-block: 0;
-  }
+	display: block;
+	position: relative;
+	padding: 0;
+	list-style: none;
+	outline: none;
+	user-select: none;
+	line-height: var(--mod-treeview-line-height, var(--spectrum-treeview-line-height));
+	margin-block: var(--mod-treeview-margin-block, var(--spectrum-treeview-margin-block));
+	font-size: var(--mod-treeview-font-size, var(--spectrum-treeview-font-size));
+
+	/* Close (hide) nested treeviews by default. */
+	.spectrum-TreeView {
+		position: static;
+		block-size: 0;
+		display: none;
+		padding-inline-start: var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation));
+		margin-block: 0;
+	}
 }
 
 .spectrum-TreeView-item {
-  /* Don't let child treeviews that are open spill out */
-  overflow: hidden;
-
-  &.is-open {
-    > .spectrum-TreeView-itemLink > .spectrum-TreeView-itemIndicator {
-      /* Rotate the chevron */
-      transform: var(--spectrum-logical-rotation,) rotate(90deg);
-    }
-
-    > .spectrum-TreeView {
-      /* Open the treeview */
-      block-size: auto;
-      display: block;
-    }
-  }
-
-  &.is-selected,
-  &.is-drop-target {
-    > .spectrum-TreeView-itemLink {
-      color: var(--highcontrast-treeview-item-text-color-selected, var(--mod-treeview-item-text-color-selected, var(--spectrum-treeview-item-text-color-selected)));
-
-      &::before {
-        background-color: var(--highcontrast-treeview-item-background-color-selected, var(--mod-treeview-item-background-color-selected, var(--spectrum-treeview-item-background-color-selected)));
-      }
-
-      .spectrum-TreeView-itemIcon {
-        color: var(--highcontrast-treeview-item-icon-color-selected, var(--mod-treeview-item-icon-color-selected, var(--spectrum-treeview-item-icon-color-selected)));
-      }
-    }
-
-    > .spectrum-TreeView-itemLink:not(:focus-visible) {
-      &::before {
-        border-color: var(--highcontrast-treeview-item-border-color-selected, var(--mod-treeview-item-border-color-selected, var(--spectrum-treeview-item-border-color-selected)));
-      }
-    }
-  }
-
-  &.is-selected {
-    > .spectrum-TreeView-itemLink:not(:focus-visible) {
-      &::before {
-        border-width: var(--mod-treeview-item-border-size-selected, var(--spectrum-treeview-item-border-size-selected));
-      }
-    }
-  }
-
-  &.is-drop-target {
-    > .spectrum-TreeView-itemLink {
-      &::before {
-        border-width: var(--mod-treeview-item-border-size, var(--spectrum-treeview-item-border-size));
-      }
-    }
-  }
-
-  &.is-disabled {
-    > .spectrum-TreeView-itemLink {
-      color: var(--highcontrast-treeview-item-text-color-disabled, var(--mod-treeview-item-text-color-disabled, var(--spectrum-treeview-item-text-color-disabled)));
-
-      &::before {
-        background-color: var(--highcontrast-treeview-item-background-color-disabled, transparent);
-      }
-
-      .spectrum-Icon {
-        color: var(--highcontrast-treeview-item-icon-color-disabled, var(--mod-treeview-item-icon-color-disabled, var(--spectrum-treeview-item-icon-color-disabled)));
-      }
-    }
-  }
+	/* Don't let child treeviews that are open spill out */
+	overflow: hidden;
+
+	&.is-open {
+		> .spectrum-TreeView-itemLink > .spectrum-TreeView-itemIndicator {
+			/* Rotate the chevron */
+			transform: var(--spectrum-logical-rotation,) rotate(90deg);
+		}
+
+		> .spectrum-TreeView {
+			/* Open the treeview */
+			block-size: auto;
+			display: block;
+		}
+	}
+
+	&.is-selected,
+	&.is-drop-target {
+		> .spectrum-TreeView-itemLink {
+			color: var(--highcontrast-treeview-item-text-color-selected, var(--mod-treeview-item-text-color-selected, var(--spectrum-treeview-item-text-color-selected)));
+
+			&::before {
+				background-color: var(--highcontrast-treeview-item-background-color-selected, var(--mod-treeview-item-background-color-selected, var(--spectrum-treeview-item-background-color-selected)));
+			}
+
+			.spectrum-TreeView-itemIcon {
+				color: var(--highcontrast-treeview-item-icon-color-selected, var(--mod-treeview-item-icon-color-selected, var(--spectrum-treeview-item-icon-color-selected)));
+			}
+		}
+
+		> .spectrum-TreeView-itemLink:not(:focus-visible) {
+			&::before {
+				border-color: var(--highcontrast-treeview-item-border-color-selected, var(--mod-treeview-item-border-color-selected, var(--spectrum-treeview-item-border-color-selected)));
+			}
+		}
+	}
+
+	&.is-selected {
+		> .spectrum-TreeView-itemLink:not(:focus-visible) {
+			&::before {
+				border-width: var(--mod-treeview-item-border-size-selected, var(--spectrum-treeview-item-border-size-selected));
+			}
+		}
+	}
+
+	&.is-drop-target {
+		> .spectrum-TreeView-itemLink {
+			&::before {
+				border-width: var(--mod-treeview-item-border-size, var(--spectrum-treeview-item-border-size));
+			}
+		}
+	}
+
+	&.is-disabled {
+		> .spectrum-TreeView-itemLink {
+			color: var(--highcontrast-treeview-item-text-color-disabled, var(--mod-treeview-item-text-color-disabled, var(--spectrum-treeview-item-text-color-disabled)));
+
+			&::before {
+				background-color: var(--highcontrast-treeview-item-background-color-disabled, transparent);
+			}
+
+			.spectrum-Icon {
+				color: var(--highcontrast-treeview-item-icon-color-disabled, var(--mod-treeview-item-icon-color-disabled, var(--spectrum-treeview-item-icon-color-disabled)));
+			}
+		}
+	}
 }
 
 .spectrum-TreeView-itemLabel {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  position: relative;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	position: relative;
 }
 
 .spectrum-TreeView-itemLink {
-  box-sizing: border-box;
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-
-  min-block-size: var(--mod-treeview-item-min-block-size, var(--spectrum-treeview-item-min-block-size));
-  padding-inline: var(--mod-treeview-item-padding-inline-start, var(--spectrum-treeview-item-padding-inline-start)) var(--mod-treeview-item-padding-inline-end, var(--spectrum-treeview-item-padding-inline-end));
-
-  color: var(--highcontrast-treeview-item-text-color, var(--mod-treeview-item-text-color, var(--spectrum-treeview-item-text-color)));
-
-  text-decoration: none;
-  outline: none;
-  cursor: pointer;
-
-  /* Prevent weirdness that can cause the vertical bar to fall down. */
-  white-space: nowrap;
-  overflow: hidden;
-
-  /* Background for hover, focus, and selection, that extends the full width of the list. */
-  &::before {
-    content: '\00a0';
-    box-sizing: border-box;
-    position: absolute;
-    inset-inline: 0;
-    min-block-size: var(--mod-treeview-item-min-block-size, var(--spectrum-treeview-item-min-block-size));
-
-    border-style: solid;
-    border-color: transparent;
-    border-width: var(--mod-treeview-item-border-size, var(--spectrum-treeview-item-border-size)) 0;
-    background-color: transparent;
-    color: transparent;
-  }
-
-  &:focus-visible {
-    color: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-text-color-focus, var(--spectrum-treeview-item-text-color-focus)));
-
-    &::before {
-      background-color: var(--highcontrast-treeview-item-background-color-focus, var(--mod-treeview-item-background-color-focus, var(--spectrum-treeview-item-background-color-focus)));
-      border-width: var(--mod-treeview-item-border-size, var(--spectrum-treeview-item-border-size));
-      border-color: var(--highcontrast-treeview-item-border-color-focus, var(--mod-treeview-item-border-color-focus, var(--spectrum-treeview-item-border-color-focus)));
-    }
-
-    .spectrum-TreeView-itemIcon {
-      color: var(--highcontrast-treeview-item-icon-color-focus, var(--mod-treeview-item-icon-color-focus, var(--spectrum-treeview-item-icon-color-focus)));
-    }
-  }
-
-  &:hover {
-    color: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-text-color-hover, var(--spectrum-treeview-item-text-color-hover)));
-
-    &::before {
-      background-color: var(--highcontrast-treeview-item-background-color-focus, var(--mod-treeview-item-background-color-hover, var(--spectrum-treeview-item-background-color-hover)));
-    }
-
-    .spectrum-TreeView-itemIcon {
-      color: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-icon-color-hover, var(--spectrum-treeview-item-icon-color-hover)));
-    }
-  }
+	box-sizing: border-box;
+	display: flex;
+	flex-flow: row nowrap;
+	align-items: center;
+
+	min-block-size: var(--mod-treeview-item-min-block-size, var(--spectrum-treeview-item-min-block-size));
+	padding-inline: var(--mod-treeview-item-padding-inline-start, var(--spectrum-treeview-item-padding-inline-start)) var(--mod-treeview-item-padding-inline-end, var(--spectrum-treeview-item-padding-inline-end));
+
+	color: var(--highcontrast-treeview-item-text-color, var(--mod-treeview-item-text-color, var(--spectrum-treeview-item-text-color)));
+
+	text-decoration: none;
+	outline: none;
+	cursor: pointer;
+
+	/* Prevent weirdness that can cause the vertical bar to fall down. */
+	white-space: nowrap;
+	overflow: hidden;
+
+	/* Background for hover, focus, and selection, that extends the full width of the list. */
+	&::before {
+		content: "\00a0";
+		box-sizing: border-box;
+		position: absolute;
+		inset-inline: 0;
+		min-block-size: var(--mod-treeview-item-min-block-size, var(--spectrum-treeview-item-min-block-size));
+
+		border-style: solid;
+		border-color: transparent;
+		border-width: var(--mod-treeview-item-border-size, var(--spectrum-treeview-item-border-size)) 0;
+		background-color: transparent;
+		color: transparent;
+	}
+
+	&:focus-visible {
+		color: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-text-color-focus, var(--spectrum-treeview-item-text-color-focus)));
+
+		&::before {
+			background-color: var(--highcontrast-treeview-item-background-color-focus, var(--mod-treeview-item-background-color-focus, var(--spectrum-treeview-item-background-color-focus)));
+			border-width: var(--mod-treeview-item-border-size, var(--spectrum-treeview-item-border-size));
+			border-color: var(--highcontrast-treeview-item-border-color-focus, var(--mod-treeview-item-border-color-focus, var(--spectrum-treeview-item-border-color-focus)));
+		}
+
+		.spectrum-TreeView-itemIcon {
+			color: var(--highcontrast-treeview-item-icon-color-focus, var(--mod-treeview-item-icon-color-focus, var(--spectrum-treeview-item-icon-color-focus)));
+		}
+	}
+
+	&:hover {
+		color: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-text-color-hover, var(--spectrum-treeview-item-text-color-hover)));
+
+		&::before {
+			background-color: var(--highcontrast-treeview-item-background-color-focus, var(--mod-treeview-item-background-color-hover, var(--spectrum-treeview-item-background-color-hover)));
+		}
+
+		.spectrum-TreeView-itemIcon {
+			color: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-icon-color-hover, var(--spectrum-treeview-item-icon-color-hover)));
+		}
+	}
 }
 
 .spectrum-TreeView-itemIcon {
-  position: relative;
-  vertical-align: top;
-  flex-shrink: 0;
-  margin-inline-end: var(--mod-treeview-item-icon-gap, var(--spectrum-treeview-item-icon-gap));
-  color: var(--highcontrast-treeview-item-icon-color, var(--mod-treeview-item-icon-color, var(--spectrum-treeview-item-icon-color)));
+	position: relative;
+	vertical-align: top;
+	flex-shrink: 0;
+	margin-inline-end: var(--mod-treeview-item-icon-gap, var(--spectrum-treeview-item-icon-gap));
+	color: var(--highcontrast-treeview-item-icon-color, var(--mod-treeview-item-icon-color, var(--spectrum-treeview-item-icon-color)));
 }
 
 .spectrum-TreeView-itemIndicator {
-  display: block;
-  box-sizing: content-box;
-  position: relative;
-  flex-shrink: 0;
+	display: block;
+	box-sizing: content-box;
+	position: relative;
+	flex-shrink: 0;
 
-  /* Make sure the hover background pseudo element doesn't block clicks on the chevron. */
-  z-index: 1;
+	/* Make sure the hover background pseudo element doesn't block clicks on the chevron. */
+	z-index: 1;
 
-  padding-inline: var(--mod-treeview-indicator-padding-inline, var(--spectrum-treeview-indicator-padding));
-  padding-block: var(--mod-treeview-indicator-padding-block, var(--spectrum-treeview-indicator-padding));
-  margin-inline-start: var(--mod-treeview-indicator-margin-inline-start, var(--spectrum-treeview-indicator-margin-inline-start));
+	padding-inline: var(--mod-treeview-indicator-padding-inline, var(--spectrum-treeview-indicator-padding));
+	padding-block: var(--mod-treeview-indicator-padding-block, var(--spectrum-treeview-indicator-padding));
+	margin-inline-start: var(--mod-treeview-indicator-margin-inline-start, var(--spectrum-treeview-indicator-margin-inline-start));
 
-  transition: transform ease var(--mod-treeview-indicator-animation-duration, var(--spectrum-treeview-indicator-animation-duration));
-  pointer-events: all;
-  transform: var(--spectrum-logical-rotation);
+	transition: transform ease var(--mod-treeview-indicator-animation-duration, var(--spectrum-treeview-indicator-animation-duration));
+	pointer-events: all;
+	transform: var(--spectrum-logical-rotation);
 }
 
 /* Section headings */
 .spectrum-TreeView-section > .spectrum-TreeView {
-  display: block;
-  block-size: auto;
-  padding-inline-start: 0;
+	display: block;
+	block-size: auto;
+	padding-inline-start: 0;
 }
 
 .spectrum-TreeView-section:not(:first-child) {
-  margin-block-start: var(--mod-treeview-section-spacing, var(--spectrum-treeview-section-spacing));
+	margin-block-start: var(--mod-treeview-section-spacing, var(--spectrum-treeview-section-spacing));
 }
 
 .spectrum-TreeView-heading {
-  padding-block-end: var(--mod-treeview-heading-bottom-to-text, var(--spectrum-treeview-heading-bottom-to-text));
-  font-weight: var(--mod-treeview-heading-font-weight, var(--spectrum-treeview-heading-font-weight));
-  color: var(--highcontrast-treeview-heading-color, var(--mod-treeview-heading-color, inherit));
+	padding-block-end: var(--mod-treeview-heading-bottom-to-text, var(--spectrum-treeview-heading-bottom-to-text));
+	font-weight: var(--mod-treeview-heading-font-weight, var(--spectrum-treeview-heading-font-weight));
+	color: var(--highcontrast-treeview-heading-color, var(--mod-treeview-heading-color, var(--spectrum-treeview-heading-color)));
 }
 
 /* Indentation levels used with Flat structure variant. */
 .spectrum-TreeView-item--indent1 {
-  padding-inline-start: var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation));
+	padding-inline-start: var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation));
 }
 
 .spectrum-TreeView-item--indent2 {
-  padding-inline-start: calc(2 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
+	padding-inline-start: calc(2 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
 }
 
 .spectrum-TreeView-item--indent3 {
-  padding-inline-start: calc(3 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
+	padding-inline-start: calc(3 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
 }
 
 .spectrum-TreeView-item--indent4 {
-  padding-inline-start: calc(4 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
+	padding-inline-start: calc(4 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
 }
 
 .spectrum-TreeView-item--indent5 {
-  padding-inline-start: calc(5 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
+	padding-inline-start: calc(5 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
 }
 
 .spectrum-TreeView-item--indent6 {
-  padding-inline-start: calc(6 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
+	padding-inline-start: calc(6 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
 }
 
 .spectrum-TreeView-item--indent7 {
-  padding-inline-start: calc(7 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
+	padding-inline-start: calc(7 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
 }
 
 .spectrum-TreeView-item--indent8 {
-  padding-inline-start: calc(8 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
+	padding-inline-start: calc(8 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
 }
 
 .spectrum-TreeView-item--indent9 {
-  padding-inline-start: calc(9 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
+	padding-inline-start: calc(9 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
 }
 
 .spectrum-TreeView-item--indent10 {
-  padding-inline-start: calc(10 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
+	padding-inline-start: calc(10 * var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-indentation)));
 }
 
 /* ***** VARIANTS ***** */
 .spectrum-TreeView--thumbnail {
-  .spectrum-TreeView-itemThumbnail {
-    flex-shrink: 0;
-    margin-inline-end: var(--mod-treeview-item-icon-gap, var(--spectrum-treeview-item-icon-gap));
-  }
+	.spectrum-TreeView-itemThumbnail {
+		flex-shrink: 0;
+		margin-inline-end: var(--mod-treeview-item-icon-gap, var(--spectrum-treeview-item-icon-gap));
+	}
 }
diff --git a/components/well/index.css b/components/well/index.css
index 5637577003..8ee05edc52 100644
--- a/components/well/index.css
+++ b/components/well/index.css
@@ -11,18 +11,20 @@ governing permissions and limitations under the License.
 */
 
 .spectrum-Well {
-  --spectrum-well-border-width: var(--spectrum-border-width-100);
+	--spectrum-well-border-width: var(--spectrum-border-width-100);
+	--spectrum-well-content-color: var(--spectrum-body-color);
 }
 
 .spectrum-Well {
-  text-align: start;
-  display: block;
-  min-inline-size: var(--mod-well-min-width, var(--spectrum-well-min-width));
-  padding: var(--mod-well-padding, var(--spectrum-well-padding));
-  margin-block-start: var(--mod-well-margin-top, var(--spectrum-well-margin-top));
-  border-width: var(--mod-well-border-width, var(--spectrum-well-border-width));
-  border-style: solid;
-  border-radius: var(--mod-well-border-radius, var(--spectrum-well-border-radius));
-  background-color: var(--mod-well-background-color, rgba(var(--spectrum-gray-800-rgb), 0.02));
-  border-color: var(--mod-well-border-color, var(--spectrum-well-border-color));
+	text-align: start;
+	display: block;
+	min-inline-size: var(--mod-well-min-width, var(--spectrum-well-min-width));
+	padding: var(--mod-well-padding, var(--spectrum-well-padding));
+	margin-block-start: var(--mod-well-margin-top, var(--spectrum-well-margin-top));
+	border-width: var(--mod-well-border-width, var(--spectrum-well-border-width));
+	border-style: solid;
+	border-radius: var(--mod-well-border-radius, var(--spectrum-well-border-radius));
+	background-color: var(--mod-well-background-color, rgba(var(--spectrum-gray-800-rgb), 0.02));
+	border-color: var(--mod-well-border-color, var(--spectrum-well-border-color));
+	color: var(--mod-well-content-color, var(--spectrum-well-content-color));
 }
diff --git a/components/well/metadata/mods.md b/components/well/metadata/mods.md
index 91e6f136d7..99f96fddca 100644
--- a/components/well/metadata/mods.md
+++ b/components/well/metadata/mods.md
@@ -4,6 +4,7 @@
 | `--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`          |