feat(field): add resizability

PiperOrigin-RevId: 512747965

Author: asyncliz

field/lib/_content.scss

@@ -25,7 +25,6 @@ $_enter-delay: $_label-duration - $_visible-duration;
   .middle,
   .end {
     display: flex;
-    align-items: center;
     box-sizing: border-box;
     height: 100%;
     // Relative position for absolutely positioned labels (to avoid interfering
@@ -43,6 +42,7 @@ $_enter-delay: $_label-duration - $_visible-duration;
 
   .start,
   .end {
+    align-items: center;
     justify-content: center;
   }
 
@@ -61,6 +61,7 @@ $_enter-delay: $_label-duration - $_visible-duration;
   }
 
   .middle {
+    align-items: stretch;
     // The container of the field aligns sections by "center". Only the middle
     // section opts in to baseline alignment.
     //

field/lib/_filled-field.scss

@@ -35,52 +35,31 @@ $_md-sys-motion: tokens.md-sys-motion-values();
     }
   }
 
-  .container {
-    // Needed for negative z-index below to place background and state layer
-    // behind content.
-    z-index: 0;
-
-    // ::before is used for background color so that opacity may be changed
-    // without affecting content
-    &::before {
-      background: var(--_container-color);
-    }
-
-    // ::after is used for the state layer color and opacity
-    &::after {
-      visibility: hidden;
-    }
-
-    &::before,
-    &::after {
-      border-radius: inherit;
-      content: '';
-      display: flex;
-      height: 100%;
-      position: absolute;
-      width: 100%;
-      z-index: -1;
-    }
+  .background,
+  .state-layer {
+    border-radius: inherit;
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
   }
 
-  .label.floating {
-    position: absolute;
-    top: 0;
+  .background {
+    background: var(--_container-color);
   }
 
   .state-layer {
-    border-radius: inherit;
-    height: 100%;
-    position: absolute;
-    width: 100%;
     visibility: hidden;
-    z-index: -1;
   }
 
   .field:not(.disabled):hover .state-layer {
     visibility: visible;
   }
 
+  .label.floating {
+    position: absolute;
+    top: 0;
+  }
+
   .active-indicator {
     inset: auto 0 0 0;
     // Prevent click events on the indicator element since it has no width and
@@ -150,7 +129,7 @@ $_md-sys-motion: tokens.md-sys-motion-values();
     opacity: var(--_disabled-active-indicator-opacity);
   }
 
-  .disabled .container::before {
+  .disabled .background {
     background: var(--_disabled-container-color);
     opacity: var(--_disabled-container-opacity);
   }

field/lib/_shared.scss

@@ -18,12 +18,13 @@
   }
 
   .field {
-    display: inline-flex;
+    display: flex;
     flex: 1;
     flex-direction: column;
     // Allow the use of block/inline reflexive RTL properties without impacting
     // structure when languages change.
     writing-mode: horizontal-tb;
+    max-width: 100%; // Do not allow field to grow beyond explicitly set width
   }
 
   // A separate wrapper is needed around the container for the outline, whose
@@ -41,15 +42,19 @@
   .container {
     align-items: center;
     border-radius: inherit;
-    box-sizing: border-box;
     display: flex;
     flex: 1;
+    min-width: min-content;
     overflow: hidden;
     padding-top: var(--_container-padding-vertical);
     padding-bottom: var(--_container-padding-vertical);
     position: relative;
   }
 
+  .resizable .container {
+    resize: both;
+  }
+
   .disabled {
     pointer-events: none;
   }

field/lib/field.ts

@@ -19,6 +19,7 @@ export class Field extends LitElement {
   @property({type: Boolean}) focused = false;
   @property({type: String}) label?: string;
   @property({type: Boolean}) populated = false;
+  @property({type: Boolean}) resizable = false;
   @property({type: Boolean}) required = false;
 
   /**
@@ -65,6 +66,7 @@ export class Field extends LitElement {
       'with-start': this.hasStart,
       'with-end': this.hasEnd,
       'populated': this.populated,
+      'resizable': this.resizable,
       'required': this.required,
       'no-label': !this.label,
     };
@@ -73,9 +75,9 @@ export class Field extends LitElement {
       <div class="field ${classMap(classes)}">
         <div class="container-overflow">
           ${outline}
+          ${this.renderBackground?.()}
+          ${this.renderIndicator?.()}
           <div class="container">
-            ${this.renderBackground?.()}
-            ${this.renderIndicator?.()}
             <div class="start">
               <slot name="start"></slot>
             </div>

field/lib/filled-field.ts

@@ -14,6 +14,7 @@ import {Field} from './field.js';
 export class FilledField extends Field {
   protected override renderBackground() {
     return html`
+      <div class="background"></div>
       <div class="state-layer"></div>
     `;
   }