feat: style field label mixin

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": {

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';
@@ -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 })
@@ -80,7 +83,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}"
                 >

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;
+    }
+}

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 {

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;

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,

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>
 `;