chore(field): replace spans with divs

PiperOrigin-RevId: 511560974

Author: asyncliz

field/lib/field.ts

@@ -72,35 +72,35 @@ export class Field extends LitElement {
     };
 
     return html`
-      <span class="field ${classMap(classes)}">
-        <span class="container">
+      <div class="field ${classMap(classes)}">
+        <div class="container">
           ${this.renderBackground?.()}
           ${this.renderIndicator?.()}
           ${outline}
-          <span class="start">
+          <div class="start">
             <slot name="start"></slot>
-          </span>
-          <span class="middle">
+          </div>
+          <div class="middle">
             ${restingLabel}
             ${outline ? nothing : floatingLabel}
-            <span class="content">
+            <div class="content">
               <slot></slot>
-            </span>
-          </span>
-          <span class="end">
+            </div>
+          </div>
+          <div class="end">
             <slot name="end"></slot>
-          </span>
-        </span>
+          </div>
+        </div>
 
-        <span class="supporting-text">
-          <span class="supporting-text-start">
+        <div class="supporting-text">
+          <div class="supporting-text-start">
             <slot name="supporting-text"></slot>
-          </span>
-          <span class="supporting-text-end">
+          </div>
+          <div class="supporting-text-end">
             <slot name="supporting-text-end"></slot>
-          </span>
-        </span>
-      </span>
+          </div>
+        </div>
+      </div>
     `;
   }
 

field/lib/filled-field.ts

@@ -27,14 +27,14 @@ export class FilledField extends Field {
 
   protected override renderBackground() {
     return html`
-      <span class="state-layer"></span>
+      <div class="state-layer"></div>
     `;
   }
 
   protected override renderIndicator() {
     const strokeStyle = {transformOrigin: this.strokeTransformOrigin};
     return html`
-      <span class="active-indicator" style="${styleMap(strokeStyle)}"></span>
+      <div class="active-indicator" style="${styleMap(strokeStyle)}"></div>
     `;
   }
 

field/lib/filled-field_test.ts

@@ -23,12 +23,13 @@ declare global {
 @customElement('md-test-filled-field')
 class TestFilledField extends FilledField {
   get strokeTransformOriginProp() {
-    const element = this.renderRoot.querySelector('.active-indicator');
+    const element =
+        this.renderRoot.querySelector<HTMLElement>('.active-indicator');
     if (!element) {
       return '';
     }
 
-    return getComputedStyle(element).transformOrigin.split(' ')[0];
+    return element.style.transformOrigin.split(' ')[0];
   }
 }
 
@@ -88,7 +89,7 @@ describe('Field', () => {
         // Assertion.
         expect(instance.strokeTransformOriginProp)
             .withContext('should not update stroke transform when disabled')
-            .toBe('0px');
+            .toBe('');
       });
 
       it('should be reset when unfocused', async () => {
@@ -107,7 +108,7 @@ describe('Field', () => {
         // Assertion.
         expect(instance.strokeTransformOriginProp)
             .withContext('should rest stroke transform when unfocused')
-            .toBe('0px');
+            .toBe('');
       });
     });
   });

field/lib/outlined-field.ts

@@ -14,15 +14,15 @@ import {Field} from './field.js';
 export class OutlinedField extends Field {
   protected override renderOutline(floatingLabel: TemplateResult) {
     return html`
-      <span class="outline">
-        <span class="outline-start"></span>
-        <span class="outline-notch">
-          <span class="outline-panel-inactive"></span>
-          <span class="outline-panel-active"></span>
+      <div class="outline">
+        <div class="outline-start"></div>
+        <div class="outline-notch">
+          <div class="outline-panel-inactive"></div>
+          <div class="outline-panel-active"></div>
           ${floatingLabel}
-        </span>
-        <span class="outline-end"></span>
-      </span>
+        </div>
+        <div class="outline-end"></div>
+      </div>
     `;
   }
 }