From 97220e3c2e77473b095e8c2d955c314b0e63fead Mon Sep 17 00:00:00 2001
From: Rise Erpelding <rise@heysparkbox.com>
Date: Tue, 18 Nov 2025 06:17:50 -0600
Subject: [PATCH 01/15] fix(fieldlabel): remove curly bracket

---
 1st-gen/packages/field-label/src/FieldLabelMixin.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/1st-gen/packages/field-label/src/FieldLabelMixin.ts b/1st-gen/packages/field-label/src/FieldLabelMixin.ts
index df23ecbb2b1..da2dd29d70f 100644
--- a/1st-gen/packages/field-label/src/FieldLabelMixin.ts
+++ b/1st-gen/packages/field-label/src/FieldLabelMixin.ts
@@ -80,7 +80,7 @@ export const FieldLabelMixin = <T extends Constructor<SpectrumElement>>(
         public renderFieldLabel(fieldId: string): TemplateResult {
             return html`
                 <label
-                    id="${fieldId}-label}"
+                    id="${fieldId}-label"
                     for="${fieldId}"
                     ?hidden="${!this.slotHasContent}"
                 >

From 918f8c6f3fb0815a7e0baa1490e2fb68ee2b5583 Mon Sep 17 00:00:00 2001
From: Rise Erpelding <rise@heysparkbox.com>
Date: Tue, 18 Nov 2025 06:29:28 -0600
Subject: [PATCH 02/15] fix: allow inheritance of parent styles

---
 1st-gen/packages/field-label/src/FieldLabelMixin.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/1st-gen/packages/field-label/src/FieldLabelMixin.ts b/1st-gen/packages/field-label/src/FieldLabelMixin.ts
index da2dd29d70f..8aa11246982 100644
--- a/1st-gen/packages/field-label/src/FieldLabelMixin.ts
+++ b/1st-gen/packages/field-label/src/FieldLabelMixin.ts
@@ -65,7 +65,10 @@ export const FieldLabelMixin = <T extends Constructor<SpectrumElement>>(
         excludedSelectors
     ) {
         public static get styles(): CSSResultArray {
-            return [styles, asteriskIconStyles];
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const parent = Object.getPrototypeOf(this) as any;
+            const parentStyles = (parent.styles || []) as CSSResultArray;
+            return [...parentStyles, styles, asteriskIconStyles];
         }
 
         @property({ type: Boolean, reflect: true })

From 0843a9ee656feab80e8612a7f75a8b45bc247d6e Mon Sep 17 00:00:00 2001
From: Rise Erpelding <rise@heysparkbox.com>
Date: Tue, 18 Nov 2025 13:52:19 -0600
Subject: [PATCH 03/15] feat: add separate field label mixin styles

---
 1st-gen/packages/field-label/package.json     |  1 +
 .../field-label/src/FieldLabelMixin.ts        |  2 +-
 .../field-label/src/field-label-mixin.css     | 93 +++++++++++++++++++
 3 files changed, 95 insertions(+), 1 deletion(-)
 create mode 100644 1st-gen/packages/field-label/src/field-label-mixin.css

diff --git a/1st-gen/packages/field-label/package.json b/1st-gen/packages/field-label/package.json
index e872bf7940e..023da4a93cc 100644
--- a/1st-gen/packages/field-label/package.json
+++ b/1st-gen/packages/field-label/package.json
@@ -33,6 +33,7 @@
             "development": "./src/FieldLabelMixin.dev.js",
             "default": "./src/FieldLabelMixin.js"
         },
+        "./src/field-label-mixin.css.js": "./src/field-label-mixin.css.js",
         "./src/field-label-overrides.css.js": "./src/field-label-overrides.css.js",
         "./src/field-label.css.js": "./src/field-label.css.js",
         "./sp-field-label-mixin.js": {
diff --git a/1st-gen/packages/field-label/src/FieldLabelMixin.ts b/1st-gen/packages/field-label/src/FieldLabelMixin.ts
index 8aa11246982..803032422f6 100644
--- a/1st-gen/packages/field-label/src/FieldLabelMixin.ts
+++ b/1st-gen/packages/field-label/src/FieldLabelMixin.ts
@@ -20,7 +20,7 @@ import {
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-asterisk100.js';
 
-import styles from './field-label.css.js';
+import styles from './field-label-mixin.css.js';
 import asteriskIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-asterisk.css.js';
 import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
 import { ObserveSlotText } from '@spectrum-web-components/shared';
diff --git a/1st-gen/packages/field-label/src/field-label-mixin.css b/1st-gen/packages/field-label/src/field-label-mixin.css
new file mode 100644
index 00000000000..389b9c0fa34
--- /dev/null
+++ b/1st-gen/packages/field-label/src/field-label-mixin.css
@@ -0,0 +1,93 @@
+/**
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@import url("./field-label-overrides.css");
+
+:host,
+:host([size="m"]) {
+    --spectrum-field-label-min-height: var(--spectrum-component-height-75);
+    --spectrum-field-label-font-size: var(--spectrum-font-size-75);
+    --spectrum-field-label-side-margin-block-start: var(--spectrum-field-label-top-margin-medium);
+    --spectrum-field-label-side-padding-right: var(--spectrum-spacing-200);
+    --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium);
+}
+
+:host([size="s"]) {
+    --spectrum-field-label-min-height: var(--spectrum-component-height-75);
+    --spectrum-field-label-font-size: var(--spectrum-font-size-75);
+    --spectrum-field-label-side-margin-block-start: var(--spectrum-field-label-top-margin-small);
+    --spectrum-field-label-side-padding-right: var(--spectrum-spacing-100);
+    --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-small);
+}
+
+:host([size="l"]) {
+    --spectrum-field-label-min-height: var(--spectrum-component-height-100);
+    --spectrum-field-label-font-size: var(--spectrum-font-size-100);
+    --spectrum-field-label-side-margin-block-start: var(--spectrum-field-label-top-margin-large);
+    --spectrum-field-label-side-padding-right: var(--spectrum-spacing-200);
+    --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-large);
+}
+
+:host([size="xl"]) {
+    --spectrum-field-label-min-height: var(--spectrum-component-height-200);
+    --spectrum-field-label-font-size: var(--spectrum-font-size-200);
+    --spectrum-field-label-side-margin-block-start: var(--spectrum-field-label-top-margin-extra-large);
+    --spectrum-field-label-side-padding-right: var(--spectrum-spacing-200);
+    --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-extra-large);
+}
+
+label {
+    box-sizing: border-box;
+    min-block-size: var(--mod-fieldlabel-min-height, var(--spectrum-field-label-min-height));
+    padding-block: var(--mod-fieldlabel-padding-block, var(--mod-field-label-top-to-text, var(--spectrum-field-label-top-to-text)) var(--mod-field-label-bottom-to-text, var(--spectrum-field-label-bottom-to-text)));
+    padding-inline: 0;
+    padding-inline: var(--mod-fieldlabel-padding-inline, 0);
+    margin-block: 0;
+    margin-block: var(--mod-fieldlabel-margin-block, var(--mod-fieldlabel-margin-block-start, 0) var(--mod-fieldlabel-margin-block-end, 0));
+    margin-inline: 0;
+    margin-inline: var(--mod-fieldlabel-margin-inline, var(--mod-fieldlabel-margin-inline-start, 0) var(--mod-fieldlabel-margin-inline-end, 0));
+    font-size: var(--mod-fieldlabel-font-size, var(--spectrum-field-label-font-size));
+    font-weight: var(--mod-fieldlabel-font-weight, var(--spectrum-regular-font-weight));
+    line-height: var(--mod-fieldlabel-line-height, var(--spectrum-line-height-100));
+    -webkit-font-smoothing: subpixel-antialiased;
+    -moz-osx-font-smoothing: auto;
+    color: var(--highcontrast-field-label-content-color, var(--mod-fieldlabel-color, var(--spectrum-neutral-subdued-content-color-default)));
+    display: inline-block;
+}
+
+label[hidden] {
+    display: none;
+}
+
+label:lang(ja),
+label:lang(ko),
+label:lang(zh) {
+    --mod-fieldlabel-line-height: var(--mod-fieldlabel-line-height-cjk, var(--spectrum-cjk-line-height-100));
+}
+
+:host([disabled]) label {
+    --mod-fieldlabel-color: var(--mod-disabled-content-color, var(--spectrum-disabled-content-color));
+}
+
+.required-icon {
+    color: inherit;
+    margin-block: 0;
+    margin-inline: var(--mod-field-label-text-to-asterisk, var(--spectrum-field-label-text-to-asterisk)) 0;
+    vertical-align: initial;
+    vertical-align: var(--mod-field-label-asterisk-vertical-align, baseline);
+}
+
+@media (forced-colors: active) {
+    :host([disabled]) label {
+        --highcontrast-field-label-content-color: GrayText;
+    }
+}

From c1be5d2f4f2038d9b8a09bf58496badccc725313 Mon Sep 17 00:00:00 2001
From: Rise Erpelding <rise@heysparkbox.com>
Date: Tue, 18 Nov 2025 15:31:18 -0600
Subject: [PATCH 04/15] docs: adjust textarea labels to match vrts

---
 1st-gen/packages/textfield/stories/textarea.stories.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/1st-gen/packages/textfield/stories/textarea.stories.ts b/1st-gen/packages/textfield/stories/textarea.stories.ts
index c1fd40cc573..1709e4ccc1e 100644
--- a/1st-gen/packages/textfield/stories/textarea.stories.ts
+++ b/1st-gen/packages/textfield/stories/textarea.stories.ts
@@ -228,7 +228,7 @@ Line 5"
         placeholder="Enter your life story"
         rows="3"
     >
-        Enter your life story...
+        Enter your life story with very long words...
     </sp-textfield>
 `;
 
@@ -240,6 +240,6 @@ export const with1Row = (): TemplateResult => html`
         placeholder="Enter your life story"
         rows="1"
     >
-        Enter your life story... Enter your life story with very long words...
+        Enter your life story with very long words...
     </sp-textfield>
 `;

From 7ad1d8c2fa014fc1f1bf9d28591ee26db083dfe6 Mon Sep 17 00:00:00 2001
From: Rise Erpelding <rise@heysparkbox.com>
Date: Wed, 19 Nov 2025 12:27:08 -0600
Subject: [PATCH 05/15] fix(textfield,numberfield): inline sizing

Notes: the main thing this commit does is allow the field label's
inline-size to be set to auto, so that its width is independent of the
input.

Unfortunately this also affects help text, whose previous behavior was
to align its width to the input.

If the goal is to pass VRTs, we'll need to adjust the help text to align
its width to the input.

This behavior (label width independent of input, helptext width aligned
with input) feels odd.
---
 1st-gen/packages/number-field/src/number-field.css          | 6 +-----
 1st-gen/packages/number-field/src/spectrum-number-field.css | 3 +--
 1st-gen/packages/textfield/src/textfield.css                | 4 ++--
 3 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/1st-gen/packages/number-field/src/number-field.css b/1st-gen/packages/number-field/src/number-field.css
index 9d0dd9e3aa7..0322a438e9d 100644
--- a/1st-gen/packages/number-field/src/number-field.css
+++ b/1st-gen/packages/number-field/src/number-field.css
@@ -39,18 +39,14 @@
     /* TODO: added stepper-button-width multiplied by 2 just to give extra space to the input field.
     That "2" is a magic number and should be removed when we are able (possibly after S2 migration). */
     --spectrum-stepper-width: calc(var(--mod-stepper-height, var(--spectrum-stepper-height)) * var(--mod-stepper-min-width-multiplier, var(--spectrum-text-field-minimum-width-multiplier)) + var(--mod-stepper-button-width, var(--spectrum-stepper-button-width)) * 2 + var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)) * 2);
-
-    /* resets the inline-size of sp-number-field to the newly defined stepper-width */
-    inline-size: var(--mod-stepper-width, var(--spectrum-stepper-width));
 }
 
 :host([hide-stepper]) {
     --spectrum-stepper-width: calc(var(--mod-stepper-height, var(--spectrum-stepper-height)) * var(--mod-stepper-min-width-multiplier, var(--spectrum-text-field-minimum-width-multiplier)) + var(--mod-stepper-button-width, var(--spectrum-stepper-button-width)) + var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)) * 2);
 }
 
-/* keeps the textfield 100% of the width of the sp-number-field so there isn't a gap between the containers */
 #textfield {
-    inline-size: 100%;
+    inline-size: var(--mod-stepper-width, var(--spectrum-stepper-width));
 }
 
 .input {
diff --git a/1st-gen/packages/number-field/src/spectrum-number-field.css b/1st-gen/packages/number-field/src/spectrum-number-field.css
index dd420075632..3c6bec406d3 100644
--- a/1st-gen/packages/number-field/src/spectrum-number-field.css
+++ b/1st-gen/packages/number-field/src/spectrum-number-field.css
@@ -152,6 +152,7 @@
     --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-keyboard-focus, var(--mod-stepper-buttons-border-color-keyboard-focus, var(--spectrum-stepper-buttons-border-color-keyboard-focus)));
     --mod-textfield-focus-indicator-width: 0;
     --mod-textfield-border-color: var(--highcontrast-stepper-border-color-keyboard-focus, var(--mod-stepper-border-color-keyboard-focus, var(--spectrum-stepper-border-color-keyboard-focus)));
+
     outline: var(--spectrum-stepper-focus-indicator-width) solid;
     outline-color: var(--spectrum-stepper-focus-indicator-color);
     outline-offset: var(--spectrum-stepper-focus-indicator-gap);
@@ -248,8 +249,6 @@
 }
 
 #textfield {
-    --spectrum-stepper-width: var(--mod-stepper-width, calc(var(--spectrum-stepper-height) * var(--mod-stepper-min-width-multiplier, var(--spectrum-text-field-minimum-width-multiplier)) + var(--spectrum-stepper-button-width) + var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)) * 2));
-    inline-size: var(--spectrum-stepper-width);
     block-size: var(--spectrum-stepper-height);
     border-radius: var(--spectrum-stepper-border-radius);
     flex-flow: row;
diff --git a/1st-gen/packages/textfield/src/textfield.css b/1st-gen/packages/textfield/src/textfield.css
index 412aaea3f6a..73f984f60cf 100644
--- a/1st-gen/packages/textfield/src/textfield.css
+++ b/1st-gen/packages/textfield/src/textfield.css
@@ -16,7 +16,7 @@
 :host {
     display: inline-flex;
     flex-direction: column;
-    inline-size: var(--mod-textfield-width, var(--spectrum-textfield-width));
+    inline-size: auto;
 }
 
 :host([multiline]) {
@@ -32,7 +32,7 @@
 }
 
 #textfield {
-    inline-size: 100%;
+    inline-size: var(--mod-textfield-width, var(--spectrum-textfield-width));
 }
 
 #textfield,

From 86ebe3ebdf393b69f68ed0eced6517cc024aed62 Mon Sep 17 00:00:00 2001
From: Rise Erpelding <rise@heysparkbox.com>
Date: Mon, 24 Nov 2025 10:53:08 -0600
Subject: [PATCH 06/15] fix: help text respects input size

---
 1st-gen/packages/textfield/src/spectrum-textfield.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/1st-gen/packages/textfield/src/spectrum-textfield.css b/1st-gen/packages/textfield/src/spectrum-textfield.css
index 3f5bc01bcea..1b85eb9a703 100644
--- a/1st-gen/packages/textfield/src/spectrum-textfield.css
+++ b/1st-gen/packages/textfield/src/spectrum-textfield.css
@@ -213,6 +213,10 @@
     margin-block-start: var(--mod-textfield-helptext-spacing-block, var(--spectrum-textfield-helptext-spacing-block));
 }
 
+::slotted([slot="help-text"]) {
+    inline-size: var(--mod-textfield-width, var(--spectrum-textfield-width));
+}
+
 .spectrum-Textfield-characterCount {
     inline-size: auto;
     font-size: var(--mod-textfield-character-count-font-size, var(--spectrum-textfield-character-count-font-size));

From a6d11363a071dde79cd1dbb70d680bbc2dbaf908 Mon Sep 17 00:00:00 2001
From: Rise Erpelding <rise@heysparkbox.com>
Date: Mon, 24 Nov 2025 12:59:19 -0600
Subject: [PATCH 07/15] Revert "fix: help text respects input size"

This reverts commit 86ebe3ebdf393b69f68ed0eced6517cc024aed62.
---
 1st-gen/packages/textfield/src/spectrum-textfield.css | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/1st-gen/packages/textfield/src/spectrum-textfield.css b/1st-gen/packages/textfield/src/spectrum-textfield.css
index 1b85eb9a703..3f5bc01bcea 100644
--- a/1st-gen/packages/textfield/src/spectrum-textfield.css
+++ b/1st-gen/packages/textfield/src/spectrum-textfield.css
@@ -213,10 +213,6 @@
     margin-block-start: var(--mod-textfield-helptext-spacing-block, var(--spectrum-textfield-helptext-spacing-block));
 }
 
-::slotted([slot="help-text"]) {
-    inline-size: var(--mod-textfield-width, var(--spectrum-textfield-width));
-}
-
 .spectrum-Textfield-characterCount {
     inline-size: auto;
     font-size: var(--mod-textfield-character-count-font-size, var(--spectrum-textfield-character-count-font-size));

From 9cc446adb7ef89c16513d05af6c5f59b1eb2ae1b Mon Sep 17 00:00:00 2001
From: Rise Erpelding <rise@heysparkbox.com>
Date: Mon, 24 Nov 2025 12:59:35 -0600
Subject: [PATCH 08/15] Revert "fix(textfield,numberfield): inline sizing"

This reverts commit 7ad1d8c2fa014fc1f1bf9d28591ee26db083dfe6.
---
 1st-gen/packages/number-field/src/number-field.css          | 6 +++++-
 1st-gen/packages/number-field/src/spectrum-number-field.css | 3 ++-
 1st-gen/packages/textfield/src/textfield.css                | 4 ++--
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/1st-gen/packages/number-field/src/number-field.css b/1st-gen/packages/number-field/src/number-field.css
index 0322a438e9d..9d0dd9e3aa7 100644
--- a/1st-gen/packages/number-field/src/number-field.css
+++ b/1st-gen/packages/number-field/src/number-field.css
@@ -39,14 +39,18 @@
     /* TODO: added stepper-button-width multiplied by 2 just to give extra space to the input field.
     That "2" is a magic number and should be removed when we are able (possibly after S2 migration). */
     --spectrum-stepper-width: calc(var(--mod-stepper-height, var(--spectrum-stepper-height)) * var(--mod-stepper-min-width-multiplier, var(--spectrum-text-field-minimum-width-multiplier)) + var(--mod-stepper-button-width, var(--spectrum-stepper-button-width)) * 2 + var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)) * 2);
+
+    /* resets the inline-size of sp-number-field to the newly defined stepper-width */
+    inline-size: var(--mod-stepper-width, var(--spectrum-stepper-width));
 }
 
 :host([hide-stepper]) {
     --spectrum-stepper-width: calc(var(--mod-stepper-height, var(--spectrum-stepper-height)) * var(--mod-stepper-min-width-multiplier, var(--spectrum-text-field-minimum-width-multiplier)) + var(--mod-stepper-button-width, var(--spectrum-stepper-button-width)) + var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)) * 2);
 }
 
+/* keeps the textfield 100% of the width of the sp-number-field so there isn't a gap between the containers */
 #textfield {
-    inline-size: var(--mod-stepper-width, var(--spectrum-stepper-width));
+    inline-size: 100%;
 }
 
 .input {
diff --git a/1st-gen/packages/number-field/src/spectrum-number-field.css b/1st-gen/packages/number-field/src/spectrum-number-field.css
index 3c6bec406d3..dd420075632 100644
--- a/1st-gen/packages/number-field/src/spectrum-number-field.css
+++ b/1st-gen/packages/number-field/src/spectrum-number-field.css
@@ -152,7 +152,6 @@
     --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-keyboard-focus, var(--mod-stepper-buttons-border-color-keyboard-focus, var(--spectrum-stepper-buttons-border-color-keyboard-focus)));
     --mod-textfield-focus-indicator-width: 0;
     --mod-textfield-border-color: var(--highcontrast-stepper-border-color-keyboard-focus, var(--mod-stepper-border-color-keyboard-focus, var(--spectrum-stepper-border-color-keyboard-focus)));
-
     outline: var(--spectrum-stepper-focus-indicator-width) solid;
     outline-color: var(--spectrum-stepper-focus-indicator-color);
     outline-offset: var(--spectrum-stepper-focus-indicator-gap);
@@ -249,6 +248,8 @@
 }
 
 #textfield {
+    --spectrum-stepper-width: var(--mod-stepper-width, calc(var(--spectrum-stepper-height) * var(--mod-stepper-min-width-multiplier, var(--spectrum-text-field-minimum-width-multiplier)) + var(--spectrum-stepper-button-width) + var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)) * 2));
+    inline-size: var(--spectrum-stepper-width);
     block-size: var(--spectrum-stepper-height);
     border-radius: var(--spectrum-stepper-border-radius);
     flex-flow: row;
diff --git a/1st-gen/packages/textfield/src/textfield.css b/1st-gen/packages/textfield/src/textfield.css
index 73f984f60cf..412aaea3f6a 100644
--- a/1st-gen/packages/textfield/src/textfield.css
+++ b/1st-gen/packages/textfield/src/textfield.css
@@ -16,7 +16,7 @@
 :host {
     display: inline-flex;
     flex-direction: column;
-    inline-size: auto;
+    inline-size: var(--mod-textfield-width, var(--spectrum-textfield-width));
 }
 
 :host([multiline]) {
@@ -32,7 +32,7 @@
 }
 
 #textfield {
-    inline-size: var(--mod-textfield-width, var(--spectrum-textfield-width));
+    inline-size: 100%;
 }
 
 #textfield,

From d4e1c36a80b05211e74619bd71ec009a51b597bd Mon Sep 17 00:00:00 2001
From: Rise Erpelding <rise@heysparkbox.com>
Date: Mon, 24 Nov 2025 12:45:13 -0600
Subject: [PATCH 09/15] fix: provide field label modifier

Because now the field label is inside of sp-textfield, its width is
dependent on the width of sp-textfield. Figma/CSS/React/Design
Guidelines all indicate that this is the correct pattern. In case this
has a negative effect on any consumer who relied on the textfield and
label having indpendent widths, a mod custom property has been provided
to override this behavior.
---
 1st-gen/packages/field-label/src/field-label-mixin.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/1st-gen/packages/field-label/src/field-label-mixin.css b/1st-gen/packages/field-label/src/field-label-mixin.css
index 389b9c0fa34..8f1dce2b356 100644
--- a/1st-gen/packages/field-label/src/field-label-mixin.css
+++ b/1st-gen/packages/field-label/src/field-label-mixin.css
@@ -46,6 +46,11 @@
 }
 
 label {
+    --spectrum-field-label-width: 100%;
+}
+
+label {
+    inline-size: var(--mod-field-label-width, var(--spectrum-field-label-width));
     box-sizing: border-box;
     min-block-size: var(--mod-fieldlabel-min-height, var(--spectrum-field-label-min-height));
     padding-block: var(--mod-fieldlabel-padding-block, var(--mod-field-label-top-to-text, var(--spectrum-field-label-top-to-text)) var(--mod-field-label-bottom-to-text, var(--spectrum-field-label-bottom-to-text)));

From dfa846e9ca9357d044cbbaadceb8427cd76eea14 Mon Sep 17 00:00:00 2001
From: Rise Erpelding <rise@heysparkbox.com>
Date: Mon, 24 Nov 2025 12:58:35 -0600
Subject: [PATCH 10/15] docs: adjust field label width to pass vrts

---
 1st-gen/packages/textfield/stories/textfield.stories.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/1st-gen/packages/textfield/stories/textfield.stories.ts b/1st-gen/packages/textfield/stories/textfield.stories.ts
index c3ff59e0388..43b1316c8d9 100644
--- a/1st-gen/packages/textfield/stories/textfield.stories.ts
+++ b/1st-gen/packages/textfield/stories/textfield.stories.ts
@@ -66,6 +66,7 @@ export const growsOnly = (): TemplateResult => {
             grows
             id="grows-only"
             placeholder="Does not grow or display incorrectly"
+            style="--mod-field-label-width: 400px;"
         >
             This Textfield has the "grows" attribute without the "multiline"
             attribute

From 48167763c9956315155feb84ff6f743cd706963d Mon Sep 17 00:00:00 2001
From: Rise Erpelding <rise@heysparkbox.com>
Date: Tue, 25 Nov 2025 13:06:47 -0600
Subject: [PATCH 11/15] docs: use field label mixin on dialog wrapper

---
 .../dialog/stories/dialog-wrapper.stories.ts  | 28 +++++++++----------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/1st-gen/packages/dialog/stories/dialog-wrapper.stories.ts b/1st-gen/packages/dialog/stories/dialog-wrapper.stories.ts
index 10c1a2f0cfc..997b03fb873 100644
--- a/1st-gen/packages/dialog/stories/dialog-wrapper.stories.ts
+++ b/1st-gen/packages/dialog/stories/dialog-wrapper.stories.ts
@@ -219,26 +219,24 @@ export const form = (
                     }
                 </style>
                 <div>
-                    <sp-field-label side-aligned="end" for="street">
+                    <sp-textfield id="street" side-aligned="end" autofocus>
                         Street:
-                    </sp-field-label>
-                    <sp-textfield id="street" autofocus></sp-textfield>
-                    <sp-field-label side-aligned="end" for="city">
+                    </sp-textfield>
+                    <sp-textfield id="city" side-aligned="end">
                         City:
-                    </sp-field-label>
-                    <sp-textfield id="city"></sp-textfield>
-                    <sp-field-label side-aligned="end" for="state">
+                    </sp-textfield>
+                    <sp-textfield id="state" side-aligned="end">
                         State:
-                    </sp-field-label>
-                    <sp-textfield id="state"></sp-textfield>
-                    <sp-field-label side-aligned="end" for="zip">
+                    </sp-textfield>
+                    <sp-textfield id="zip" side-aligned="end">
                         Zip:
-                    </sp-field-label>
-                    <sp-textfield id="zip"></sp-textfield>
-                    <sp-field-label side-aligned="end" for="instructions">
+                    </sp-textfield>
+                    <sp-textfield
+                        id="instructions"
+                        side-aligned="end"
+                        multiline
+                    >
                         Special instructions:
-                    </sp-field-label>
-                    <sp-textfield id="instructions" multiline>
                         <sp-help-text slot="help-text">
                             For example, gate code or other information to help
                             the driver find you

From 1ebab8c1e036cc91e23eef3f4edaa7ff5215aea2 Mon Sep 17 00:00:00 2001
From: Rise Erpelding <rise@heysparkbox.com>
Date: Tue, 25 Nov 2025 13:07:18 -0600
Subject: [PATCH 12/15] fix: align textfield css with spectrum-css

---
 .../field-label/src/field-label-mixin.css     | 21 ++++++++++++++++
 .../textfield/src/spectrum-textfield.css      | 25 ++++++++-----------
 1st-gen/packages/textfield/src/textfield.css  | 11 ++++++--
 3 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/1st-gen/packages/field-label/src/field-label-mixin.css b/1st-gen/packages/field-label/src/field-label-mixin.css
index 8f1dce2b356..0abc67f40ab 100644
--- a/1st-gen/packages/field-label/src/field-label-mixin.css
+++ b/1st-gen/packages/field-label/src/field-label-mixin.css
@@ -67,6 +67,10 @@ label {
     -moz-osx-font-smoothing: auto;
     color: var(--highcontrast-field-label-content-color, var(--mod-fieldlabel-color, var(--spectrum-neutral-subdued-content-color-default)));
     display: inline-block;
+
+    /* styles from .spectrum-FieldLabel */
+    grid-row: 1;
+    grid-column: 1 / span 1;
 }
 
 label[hidden] {
@@ -91,6 +95,23 @@ label:lang(zh) {
     vertical-align: var(--mod-field-label-asterisk-vertical-align, baseline);
 }
 
+:host([side-aligned="start"]) label,
+:host([side-aligned="end"]) label {
+    vertical-align: top;
+    margin-block-start: var(--mod-fieldlabel-side-margin-block-start, var(--spectrum-field-label-side-margin-block-start));
+    margin-block-end: 0;
+    margin-inline-end: var(--mod-fieldlabel-side-padding-right, var(--spectrum-field-label-side-padding-right));
+    display: inline-block;
+
+    /* styles from .spectrum-Textfield--sideLabel */
+    grid-row: 1 / span 2;
+    grid-column: 1 / span 1;
+}
+
+:host([side-aligned="end"]) label {
+    text-align: end;
+}
+
 @media (forced-colors: active) {
     :host([disabled]) label {
         --highcontrast-field-label-content-color: GrayText;
diff --git a/1st-gen/packages/textfield/src/spectrum-textfield.css b/1st-gen/packages/textfield/src/spectrum-textfield.css
index 3f5bc01bcea..0c9bd659309 100644
--- a/1st-gen/packages/textfield/src/spectrum-textfield.css
+++ b/1st-gen/packages/textfield/src/spectrum-textfield.css
@@ -138,27 +138,18 @@
     --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-300);
 }
 
-#textfield {
-    text-overflow: ellipsis;
-    inline-size: var(--mod-textfield-width, var(--spectrum-textfield-width));
-    grid-template-rows: auto auto auto;
-    grid-template-columns: auto auto;
-    margin: 0;
-    display: inline-grid;
-    position: relative;
-    overflow: visible;
-}
-
+/* styles from .spectrum-Textfield-validationIcon */
 :host([invalid]) #textfield .icon,
 :host([valid]) #textfield .icon {
     pointer-events: all;
-    grid-area: 2 / 2;
+    grid-area: 1 / 2 / auto / auto;
     margin-inline-start: auto;
     position: absolute;
     inset-block-start: 0;
 }
 
-#textfield.spectrum-Textfield--sideLabel .icon {
+:host([side-aligned="start"]) #textfield .icon,
+:host([side-aligned="end"]) #textfield .icon {
     grid-area: 1 / 2 / span 1 / span 1;
 }
 
@@ -195,6 +186,7 @@
     inset-inline-end: var(--mod-textfield-icon-spacing-inline-end-quiet-invalid, var(--spectrum-textfield-icon-spacing-inline-end-quiet-invalid));
 }
 
+/* TODO: does this do anything? */
 #textfield .spectrum-FieldLabel {
     grid-area: 1 / 1 / auto / span 1;
     margin-block-end: var(--mod-textfield-label-spacing-block, var(--spectrum-textfield-label-spacing-block));
@@ -208,11 +200,16 @@
     color: var(--spectrum-textfield-text-color-disabled);
 }
 
-#textfield .spectrum-HelpText {
+div[aria-live="assertive"] {
+    display: contents; /* Makes the div transparent to the grid */
+}
+
+::slotted(sp-help-text) {
     grid-area: 3 / 1 / auto / span 2;
     margin-block-start: var(--mod-textfield-helptext-spacing-block, var(--spectrum-textfield-helptext-spacing-block));
 }
 
+/* TODO: these styles need updating when char count is implemented */
 .spectrum-Textfield-characterCount {
     inline-size: auto;
     font-size: var(--mod-textfield-character-count-font-size, var(--spectrum-textfield-character-count-font-size));
diff --git a/1st-gen/packages/textfield/src/textfield.css b/1st-gen/packages/textfield/src/textfield.css
index 412aaea3f6a..bc3bacfe102 100644
--- a/1st-gen/packages/textfield/src/textfield.css
+++ b/1st-gen/packages/textfield/src/textfield.css
@@ -13,10 +13,16 @@
 @import url("./spectrum-textfield.css");
 @import url("./textfield-overrides.css");
 
+/* styles from .spectrum-Textfield */
 :host {
-    display: inline-flex;
-    flex-direction: column;
+    display: inline-grid;
+    grid-template-columns: auto auto;
+    grid-template-rows: auto auto auto;
     inline-size: var(--mod-textfield-width, var(--spectrum-textfield-width));
+    position: relative;
+    text-overflow: ellipsis;
+    overflow: visible;
+    margin: 0;
 }
 
 :host([multiline]) {
@@ -33,6 +39,7 @@
 
 #textfield {
     inline-size: 100%;
+    display: inline-grid;
 }
 
 #textfield,

From d163ab573c2e1054acaf38a772c8a0de08441557 Mon Sep 17 00:00:00 2001
From: Rise Erpelding <rise@heysparkbox.com>
Date: Mon, 5 Jan 2026 11:40:48 -0600
Subject: [PATCH 13/15] docs: remove inline styles from dialog wrapper story

---
 1st-gen/packages/dialog/stories/dialog-wrapper.stories.ts | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/1st-gen/packages/dialog/stories/dialog-wrapper.stories.ts b/1st-gen/packages/dialog/stories/dialog-wrapper.stories.ts
index 997b03fb873..e46c646df98 100644
--- a/1st-gen/packages/dialog/stories/dialog-wrapper.stories.ts
+++ b/1st-gen/packages/dialog/stories/dialog-wrapper.stories.ts
@@ -211,13 +211,6 @@ export const form = (
                     handleCancel(args);
                 }}
             >
-                <style>
-                    #form-fields div {
-                        display: grid;
-                        row-gap: calc(var(--swc-scale-factor) * 12px);
-                        grid-template-columns: auto auto;
-                    }
-                </style>
                 <div>
                     <sp-textfield id="street" side-aligned="end" autofocus>
                         Street:

From 362b49cbe1ac0e8a0a33ff2f9209038652529d32 Mon Sep 17 00:00:00 2001
From: Rise Erpelding <rise@heysparkbox.com>
Date: Mon, 5 Jan 2026 11:42:23 -0600
Subject: [PATCH 14/15] fix: dialog wrapper side label css with lots of
 comments

---
 .../packages/field-label/src/field-label-mixin.css    | 11 ++++++++++-
 1st-gen/packages/textfield/src/spectrum-textfield.css |  9 +++++----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/1st-gen/packages/field-label/src/field-label-mixin.css b/1st-gen/packages/field-label/src/field-label-mixin.css
index 0abc67f40ab..e62bc717e55 100644
--- a/1st-gen/packages/field-label/src/field-label-mixin.css
+++ b/1st-gen/packages/field-label/src/field-label-mixin.css
@@ -95,12 +95,21 @@ label:lang(zh) {
     vertical-align: var(--mod-field-label-asterisk-vertical-align, baseline);
 }
 
+:host([side-aligned="start"]),
+:host([side-aligned="end"]) {
+    column-gap: var(--mod-fieldlabel-side-padding-right, var(--spectrum-field-label-side-padding-right));
+    row-gap: calc(var(--swc-scale-factor) * 12px); /* why? idk, this is how westbrook had it in the stories file */
+    grid-template-rows: auto auto; /* 2 rows instead of 3 */
+    grid-template-columns: 1fr 2fr; /* questioning if we want 3 columns, that's how css is */
+    inline-size: 100%; /* we need to override the other inline-size */
+}
+
 :host([side-aligned="start"]) label,
 :host([side-aligned="end"]) label {
     vertical-align: top;
     margin-block-start: var(--mod-fieldlabel-side-margin-block-start, var(--spectrum-field-label-side-margin-block-start));
     margin-block-end: 0;
-    margin-inline-end: var(--mod-fieldlabel-side-padding-right, var(--spectrum-field-label-side-padding-right));
+    /* margin-inline-end is set in the host's column-gap property */
     display: inline-block;
 
     /* styles from .spectrum-Textfield--sideLabel */
diff --git a/1st-gen/packages/textfield/src/spectrum-textfield.css b/1st-gen/packages/textfield/src/spectrum-textfield.css
index 0c9bd659309..20bf883d06a 100644
--- a/1st-gen/packages/textfield/src/spectrum-textfield.css
+++ b/1st-gen/packages/textfield/src/spectrum-textfield.css
@@ -186,17 +186,17 @@
     inset-inline-end: var(--mod-textfield-icon-spacing-inline-end-quiet-invalid, var(--spectrum-textfield-icon-spacing-inline-end-quiet-invalid));
 }
 
-/* TODO: does this do anything? */
-#textfield .spectrum-FieldLabel {
+/* changed selector from #textfield .spectrum-FieldLabel */
+label {
     grid-area: 1 / 1 / auto / span 1;
     margin-block-end: var(--mod-textfield-label-spacing-block, var(--spectrum-textfield-label-spacing-block));
 }
 
-:host([quiet]) .spectrum-FieldLabel {
+:host([quiet]) label {
     margin-block-end: var(--mod-textfield-label-spacing-block-quiet, var(--spectrum-textfield-label-spacing-block-quiet));
 }
 
-:host([disabled]) #textfield .spectrum-FieldLabel {
+:host([disabled]) label {
     color: var(--spectrum-textfield-text-color-disabled);
 }
 
@@ -456,6 +456,7 @@ div[aria-live="assertive"] {
     }
 }
 
+/* we don't have these selectors, but it is like this in css */
 .spectrum-Textfield--sideLabel {
     grid-template-rows: auto auto;
     grid-template-columns: auto auto auto;

From 23ef380e0ee83ebc42e73db10ee82b55f888f0bc Mon Sep 17 00:00:00 2001
From: Rise Erpelding <rise@heysparkbox.com>
Date: Mon, 5 Jan 2026 13:06:30 -0600
Subject: [PATCH 15/15] fix: more things

---
 .../field-label/src/field-label-mixin.css       | 17 ++++++++++++++---
 .../textfield/src/spectrum-textfield.css        |  1 +
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/1st-gen/packages/field-label/src/field-label-mixin.css b/1st-gen/packages/field-label/src/field-label-mixin.css
index e62bc717e55..dac97e71aa3 100644
--- a/1st-gen/packages/field-label/src/field-label-mixin.css
+++ b/1st-gen/packages/field-label/src/field-label-mixin.css
@@ -98,10 +98,15 @@ label:lang(zh) {
 :host([side-aligned="start"]),
 :host([side-aligned="end"]) {
     column-gap: var(--mod-fieldlabel-side-padding-right, var(--spectrum-field-label-side-padding-right));
-    row-gap: calc(var(--swc-scale-factor) * 12px); /* why? idk, this is how westbrook had it in the stories file */
+    margin-block-end: calc(var(--swc-scale-factor) * 12px); /* mimics row-gap westbrook had in the stories file */
     grid-template-rows: auto auto; /* 2 rows instead of 3 */
-    grid-template-columns: 1fr 2fr; /* questioning if we want 3 columns, that's how css is */
-    inline-size: 100%; /* we need to override the other inline-size */
+    grid-template-columns: 1fr 2fr auto; /* still haven't figured out what the 3rd column is for */
+    inline-size: 100%;
+}
+
+:host([side-aligned="start"]) input,
+:host([side-aligned="end"]) input {
+    inline-size: 240px;
 }
 
 :host([side-aligned="start"]) label,
@@ -109,6 +114,7 @@ label:lang(zh) {
     vertical-align: top;
     margin-block-start: var(--mod-fieldlabel-side-margin-block-start, var(--spectrum-field-label-side-margin-block-start));
     margin-block-end: 0;
+
     /* margin-inline-end is set in the host's column-gap property */
     display: inline-block;
 
@@ -121,6 +127,11 @@ label:lang(zh) {
     text-align: end;
 }
 
+:host([side-aligned="start"]) ::slotted(sp-help-text),
+:host([side-aligned="end"]) ::slotted(sp-help-text) {
+    grid-area: 2 / 2 / auto / span 1;
+}
+
 @media (forced-colors: active) {
     :host([disabled]) label {
         --highcontrast-field-label-content-color: GrayText;
diff --git a/1st-gen/packages/textfield/src/spectrum-textfield.css b/1st-gen/packages/textfield/src/spectrum-textfield.css
index 20bf883d06a..6fadffdc703 100644
--- a/1st-gen/packages/textfield/src/spectrum-textfield.css
+++ b/1st-gen/packages/textfield/src/spectrum-textfield.css
@@ -478,6 +478,7 @@ div[aria-live="assertive"] {
     margin-inline-start: var(--mod-textfield-character-count-spacing-inline-side, var(--spectrum-textfield-character-count-spacing-inline-side));
 }
 
+/* using rule in field-label-mixin.css */
 .spectrum-Textfield--sideLabel .spectrum-HelpText {
     grid-area: 2 / 2 / auto / span 1;
 }