@material/web 1.0.0-pre.3 → 1.0.0-pre.4

package/textfield/lib/_filled-text-field.scss

@@ -16,19 +16,8 @@
 // go/keep-sorted end
 
 @mixin theme($tokens) {
-  // Add missing tokens
-  $reference: map.merge(
-    _resolve-tokens(tokens.md-comp-filled-text-field-values()),
-    (
-      container-padding-horizontal: null,
-      container-padding-vertical: null,
-      input-text-prefix-padding: null,
-      input-text-suffix-padding: null,
-    )
-  );
-
-  $tokens: _resolve-tokens($tokens);
-
+  $reference: _resolve-tokens(tokens.md-comp-filled-text-field-values());
+  $tokens: _resolve-tokens($tokens, $exclude-hardcoded-values: true);
   $tokens: theme.validate-theme($reference, $tokens);
   $tokens: theme.create-theme-vars($tokens, 'filled-text-field');
   $tokens: shape.resolve-tokens($tokens, 'container-shape');
@@ -38,18 +27,6 @@
 
 @mixin styles() {
   $tokens: _resolve-tokens(tokens.md-comp-filled-text-field-values());
-  // Add missing tokens
-  $tokens: map.merge(
-    (
-      container-padding-horizontal: 16px,
-      container-padding-vertical: 16px,
-      input-text-prefix-padding: 2px,
-      input-text-suffix-padding: 2px,
-      with-label-container-padding-vertical: 8px,
-    ),
-    $tokens
-  );
-
   $tokens: theme.create-theme-vars($tokens, 'filled-text-field');
   $tokens: shape.resolve-tokens($tokens, 'container-shape');
 
@@ -60,90 +37,115 @@
 
     @include filled-field.theme(
       (
-        active-indicator-color: var(--_active-indicator-color),
-        active-indicator-height: var(--_active-indicator-height),
-        container-color: var(--_container-color),
-        container-padding-horizontal: var(--_container-padding-horizontal),
-        container-padding-vertical: var(--_container-padding-vertical),
-        container-shape: shape.corners-to-shape-token('--_container-shape'),
-        content-color: var(--_input-text-color),
-        disabled-active-indicator-color: var(--_disabled-active-indicator-color),
-        disabled-active-indicator-height:
+        // go/keep-sorted start
+        'active-indicator-color': var(--_active-indicator-color),
+        'active-indicator-height': var(--_active-indicator-height),
+        'container-color': var(--_container-color),
+        'container-padding-horizontal': var(--_container-padding-horizontal),
+        'container-padding-vertical': var(--_container-padding-vertical),
+        'container-shape': shape.corners-to-shape-token('--_container-shape'),
+        'content-color': var(--_input-text-color),
+        'content-type': var(--_input-text-type),
+        'disabled-active-indicator-color':
+          var(--_disabled-active-indicator-color),
+        'disabled-active-indicator-height':
           var(--_disabled-active-indicator-height),
-        disabled-active-indicator-opacity:
+        'disabled-active-indicator-opacity':
           var(--_disabled-active-indicator-opacity),
-        disabled-container-color: var(--_disabled-container-color),
-        disabled-container-opacity: var(--_disabled-container-opacity),
-        disabled-content-color: var(--_disabled-input-text-color),
-        disabled-content-opacity: var(--_disabled-input-text-opacity),
-        disabled-label-text-color: var(--_disabled-label-text-color),
-        disabled-label-text-opacity: var(--_disabled-label-text-opacity),
-        disabled-leading-icon-color: var(--_disabled-leading-icon-color),
-        disabled-leading-icon-opacity: var(--_disabled-leading-icon-opacity),
-        disabled-supporting-text-color: var(--_disabled-supporting-text-color),
-        disabled-supporting-text-opacity:
+        'disabled-container-color': var(--_disabled-container-color),
+        'disabled-container-opacity': var(--_disabled-container-opacity),
+        'disabled-content-color': var(--_disabled-input-text-color),
+        'disabled-content-opacity': var(--_disabled-input-text-opacity),
+        'disabled-label-text-color': var(--_disabled-label-text-color),
+        'disabled-label-text-opacity': var(--_disabled-label-text-opacity),
+        'disabled-leading-content-color': var(--_disabled-leading-icon-color),
+        'disabled-leading-content-opacity':
+          var(--_disabled-leading-icon-opacity),
+        'disabled-supporting-text-color': var(--_disabled-supporting-text-color),
+        'disabled-supporting-text-opacity':
           var(--_disabled-supporting-text-opacity),
-        disabled-trailing-icon-color: var(--_disabled-trailing-icon-color),
-        disabled-trailing-icon-opacity: var(--_disabled-trailing-icon-opacity),
-        error-active-indicator-color: var(--_error-active-indicator-color),
-        error-focus-active-indicator-color:
+        'disabled-trailing-content-color': var(--_disabled-trailing-icon-color),
+        'disabled-trailing-content-opacity':
+          var(--_disabled-trailing-icon-opacity),
+        'error-active-indicator-color': var(--_error-active-indicator-color),
+        'error-content-color': var(--_error-input-text-color),
+        'error-focus-active-indicator-color':
           var(--_error-focus-active-indicator-color),
-        error-focus-content-color: var(--_error-focus-input-text-color),
-        error-focus-label-text-color: var(--_error-focus-label-text-color),
-        error-focus-leading-icon-color: var(--_error-focus-leading-icon-color),
-        error-focus-supporting-text-color:
+        'error-focus-content-color': var(--_error-focus-input-text-color),
+        'error-focus-label-text-color': var(--_error-focus-label-text-color),
+        'error-focus-leading-content-color':
+          var(--_error-focus-leading-icon-color),
+        'error-focus-supporting-text-color':
           var(--_error-focus-supporting-text-color),
-        error-focus-trailing-icon-color: var(--_error-focus-trailing-icon-color),
-        error-hover-active-indicator-color:
+        'error-focus-trailing-content-color':
+          var(--_error-focus-trailing-icon-color),
+        'error-hover-active-indicator-color':
           var(--_error-hover-active-indicator-color),
-        error-hover-content-color: var(--_error-hover-input-text-color),
-        error-hover-label-text-color: var(--_error-hover-label-text-color),
-        error-hover-leading-icon-color: var(--_error-hover-leading-icon-color),
-        error-hover-state-layer-color: var(--_error-hover-state-layer-color),
-        error-hover-state-layer-opacity: var(--_error-hover-state-layer-opacity),
-        error-hover-supporting-text-color:
+        'error-hover-content-color': var(--_error-hover-input-text-color),
+        'error-hover-label-text-color': var(--_error-hover-label-text-color),
+        'error-hover-leading-content-color':
+          var(--_error-hover-leading-icon-color),
+        'error-hover-state-layer-color': var(--_error-hover-state-layer-color),
+        'error-hover-state-layer-opacity':
+          var(--_error-hover-state-layer-opacity),
+        'error-hover-supporting-text-color':
           var(--_error-hover-supporting-text-color),
-        error-hover-trailing-icon-color: var(--_error-hover-trailing-icon-color),
-        error-content-color: var(--_error-input-text-color),
-        error-label-text-color: var(--_error-label-text-color),
-        error-leading-icon-color: var(--_error-leading-icon-color),
-        error-supporting-text-color: var(--_error-supporting-text-color),
-        error-trailing-icon-color: var(--_error-trailing-icon-color),
-        focus-active-indicator-color: var(--_focus-active-indicator-color),
-        focus-active-indicator-height: var(--_focus-active-indicator-height),
-        focus-content-color: var(--_focus-input-text-color),
-        focus-label-text-color: var(--_focus-label-text-color),
-        focus-leading-icon-color: var(--_focus-leading-icon-color),
-        focus-supporting-text-color: var(--_focus-supporting-text-color),
-        focus-trailing-icon-color: var(--_focus-trailing-icon-color),
-        hover-active-indicator-color: var(--_hover-active-indicator-color),
-        hover-active-indicator-height: var(--_hover-active-indicator-height),
-        hover-content-color: var(--_hover-input-text-color),
-        hover-label-text-color: var(--_hover-label-text-color),
-        hover-leading-icon-color: var(--_hover-leading-icon-color),
-        hover-state-layer-color: var(--_hover-state-layer-color),
-        hover-state-layer-opacity: var(--_hover-state-layer-opacity),
-        hover-supporting-text-color: var(--_hover-supporting-text-color),
-        hover-trailing-icon-color: var(--_hover-trailing-icon-color),
-        label-text-color: var(--_label-text-color),
-        label-text-type: var(--_label-text-type),
-        label-text-populated-line-height:
+        'error-hover-trailing-content-color':
+          var(--_error-hover-trailing-icon-color),
+        'error-label-text-color': var(--_error-label-text-color),
+        'error-leading-content-color': var(--_error-leading-icon-color),
+        'error-supporting-text-color': var(--_error-supporting-text-color),
+        'error-trailing-content-color': var(--_error-trailing-icon-color),
+        'focus-active-indicator-color': var(--_focus-active-indicator-color),
+        'focus-active-indicator-height': var(--_focus-active-indicator-height),
+        'focus-content-color': var(--_focus-input-text-color),
+        'focus-label-text-color': var(--_focus-label-text-color),
+        'focus-leading-content-color': var(--_focus-leading-icon-color),
+        'focus-supporting-text-color': var(--_focus-supporting-text-color),
+        'focus-trailing-content-color': var(--_focus-trailing-icon-color),
+        'hover-active-indicator-color': var(--_hover-active-indicator-color),
+        'hover-active-indicator-height': var(--_hover-active-indicator-height),
+        'hover-content-color': var(--_hover-input-text-color),
+        'hover-label-text-color': var(--_hover-label-text-color),
+        'hover-leading-content-color': var(--_hover-leading-icon-color),
+        'hover-state-layer-color': var(--_hover-state-layer-color),
+        'hover-state-layer-opacity': var(--_hover-state-layer-opacity),
+        'hover-supporting-text-color': var(--_hover-supporting-text-color),
+        'hover-trailing-content-color': var(--_hover-trailing-icon-color),
+        'label-text-color': var(--_label-text-color),
+        'label-text-populated-line-height':
           var(--_label-text-populated-line-height),
-        label-text-populated-size: var(--_label-text-populated-size),
-        leading-icon-color: var(--_leading-icon-color),
-        leading-icon-size: var(--_leading-icon-size),
-        supporting-text-color: var(--_supporting-text-color),
-        supporting-text-type: var(--_supporting-text-type),
-        trailing-icon-color: var(--_trailing-icon-color),
-        trailing-icon-size: var(--_trailing-icon-size),
-        with-label-container-padding-vertical:
-          var(--_with-label-container-padding-vertical),
+        'label-text-populated-size': var(--_label-text-populated-size),
+        'label-text-type': var(--_label-text-type),
+        'leading-content-color': var(--_leading-icon-color),
+        'supporting-text-color': var(--_supporting-text-color),
+        'supporting-text-type': var(--_supporting-text-type),
+        'trailing-content-color': var(--_trailing-icon-color),
+        'with-label-container-padding-vertical':
+          var(--_with-label-container-padding-vertical) // go/keep-sorted end
       )
     );
   }
 }
 
-@function _resolve-tokens($tokens) {
+@function _resolve-tokens($tokens, $exclude-hardcoded-values: false) {
+  @if not $exclude-hardcoded-values {
+    // Add missing tokens
+    $tokens: map.merge(
+      (
+        'container-padding-horizontal': 16px,
+        'container-padding-vertical': 16px,
+        'input-text-prefix-padding': 2px,
+        'input-text-suffix-padding': 2px,
+        'with-label-container-padding-vertical': 8px,
+        // TODO(b/270705687): remove when focus-caret-color token added
+        'focus-caret-color':
+          map.get(tokens.md-sys-color-values-light(), 'primary'),
+      ),
+      $tokens
+    );
+  }
+
   @return typography.resolve-tokens(
     $tokens,
     'input-text',

package/textfield/lib/_icon.scss

@@ -5,69 +5,25 @@
 
 @mixin styles() {
   .icon {
+    color: currentColor;
     display: flex;
+    fill: currentColor;
   }
 
   .icon ::slotted(*) {
-    // Remove excess whitespace below inline elementsxs
+    // Remove excess whitespace below inline elements
     display: flex;
   }
 
-  .icon.leading {
-    color: var(--_leading-icon-color);
+  [hasstart] .icon.leading {
+    font-size: var(--_leading-icon-size);
+    height: var(--_leading-icon-size);
+    width: var(--_leading-icon-size);
   }
 
-  .icon.trailing {
-    color: var(--_trailing-icon-color);
-  }
-
-  :hover .icon.leading {
-    color: var(--_hover-leading-icon-color);
-  }
-
-  :hover .icon.trailing {
-    color: var(--_hover-trailing-icon-color);
-  }
-
-  :focus-within .icon.leading {
-    color: var(--_focus-leading-icon-color);
-  }
-
-  :focus-within .icon.trailing {
-    color: var(--_focus-trailing-icon-color);
-  }
-
-  .disabled .icon.leading {
-    color: var(--_disabled-leading-icon-color);
-    opacity: var(--_disabled-leading-icon-opacity);
-  }
-
-  .disabled .icon.trailing {
-    color: var(--_disabled-trailing-icon-color);
-    opacity: var(--_disabled-trailing-icon-opacity);
-  }
-
-  .error .icon.leading {
-    color: var(--_error-leading-icon-color);
-  }
-
-  .error .icon.trailing {
-    color: var(--_error-trailing-icon-color);
-  }
-
-  .error:hover .icon.leading {
-    color: var(--_error-hover-leading-icon-color);
-  }
-
-  .error:hover .icon.trailing {
-    color: var(--_error-hover-trailing-icon-color);
-  }
-
-  .error:focus-within .icon.leading {
-    color: var(--_error-focus-leading-icon-color);
-  }
-
-  .error:focus-within .icon.trailing {
-    color: var(--_error-focus-trailing-icon-color);
+  [hasend] .icon.trailing {
+    font-size: var(--_trailing-icon-size);
+    height: var(--_trailing-icon-size);
+    width: var(--_trailing-icon-size);
   }
 }

package/textfield/lib/_input.scss

@@ -10,6 +10,7 @@
     border: none;
     caret-color: var(--_caret-color);
     color: currentColor;
+    font: inherit;
     outline: none;
     padding: 0;
     text-align: inherit;
@@ -38,15 +39,12 @@
     caret-color: var(--_error-focus-caret-color);
   }
 
-  input,
-  .prefix,
-  .suffix {
-    font: var(--_input-text-type);
+  .text-field:not(.disabled) .prefix {
+    color: var(--_input-text-prefix-color);
   }
 
-  .text-field:not(.disabled) .prefix,
   .text-field:not(.disabled) .suffix {
-    color: var(--_input-text-prefix-color);
+    color: var(--_input-text-suffix-color);
   }
 
   .text-field:not(.disabled) input::placeholder {

package/textfield/lib/_outlined-text-field.scss

@@ -16,19 +16,8 @@
 // go/keep-sorted end
 
 @mixin theme($tokens) {
-  // Add missing tokens
-  $reference: map.merge(
-    _resolve-tokens(tokens.md-comp-outlined-text-field-values()),
-    (
-      container-padding-horizontal: null,
-      container-padding-vertical: null,
-      input-text-prefix-padding: null,
-      input-text-suffix-padding: null,
-      outline-label-padding: null,
-    )
-  );
-
-  $tokens: _resolve-tokens($tokens);
+  $reference: _resolve-tokens(tokens.md-comp-outlined-text-field-values());
+  $tokens: _resolve-tokens($tokens, $exclude-hardcoded-values: true);
   $tokens: theme.validate-theme($reference, $tokens);
   $tokens: theme.create-theme-vars($tokens, 'outlined-text-field');
   $tokens: shape.resolve-tokens($tokens, 'container-shape');
@@ -38,18 +27,6 @@
 
 @mixin styles() {
   $tokens: _resolve-tokens(tokens.md-comp-outlined-text-field-values());
-  // Add missing tokens
-  $tokens: map.merge(
-    (
-      container-padding-horizontal: 16px,
-      container-padding-vertical: 16px,
-      input-text-prefix-padding: 2px,
-      input-text-suffix-padding: 2px,
-      outline-label-padding: 4px,
-    ),
-    $tokens
-  );
-
   $tokens: theme.create-theme-vars($tokens, 'outlined-text-field');
   $tokens: shape.resolve-tokens($tokens, 'container-shape');
 
@@ -62,78 +39,100 @@
 
     @include outlined-field.theme(
       (
-        container-padding-horizontal: var(--_container-padding-horizontal),
-        container-padding-vertical: var(--_container-padding-vertical),
-        container-shape: $container-shape,
-        disabled-content-color: var(--_disabled-input-text-color),
-        disabled-content-opacity: var(--_disabled-input-text-opacity),
-        disabled-label-text-color: var(--_disabled-label-text-color),
-        disabled-label-text-opacity: var(--_disabled-label-text-opacity),
-        disabled-leading-icon-color: var(--_disabled-leading-icon-color),
-        disabled-leading-icon-opacity: var(--_disabled-leading-icon-opacity),
-        disabled-outline-color: var(--_disabled-outline-color),
-        disabled-outline-opacity: var(--_disabled-outline-opacity),
-        disabled-outline-width: var(--_disabled-outline-width),
-        disabled-supporting-text-color: var(--_disabled-supporting-text-color),
-        disabled-supporting-text-opacity:
+        // go/keep-sorted start
+        'container-padding-horizontal': var(--_container-padding-horizontal),
+        'container-padding-vertical': var(--_container-padding-vertical),
+        'container-shape': $container-shape,
+        'content-color': var(--_input-text-color),
+        'content-type': var(--_input-text-type),
+        'disabled-content-color': var(--_disabled-input-text-color),
+        'disabled-content-opacity': var(--_disabled-input-text-opacity),
+        'disabled-label-text-color': var(--_disabled-label-text-color),
+        'disabled-label-text-opacity': var(--_disabled-label-text-opacity),
+        'disabled-leading-content-color': var(--_disabled-leading-icon-color),
+        'disabled-leading-content-opacity':
+          var(--_disabled-leading-icon-opacity),
+        'disabled-outline-color': var(--_disabled-outline-color),
+        'disabled-outline-opacity': var(--_disabled-outline-opacity),
+        'disabled-outline-width': var(--_disabled-outline-width),
+        'disabled-supporting-text-color': var(--_disabled-supporting-text-color),
+        'disabled-supporting-text-opacity':
           var(--_disabled-supporting-text-opacity),
-        disabled-trailing-icon-color: var(--_disabled-trailing-icon-color),
-        disabled-trailing-icon-opacity: var(--_disabled-trailing-icon-opacity),
-        error-focus-content-color: var(--_error-focus-input-text-color),
-        error-focus-label-text-color: var(--_error-focus-label-text-color),
-        error-focus-leading-icon-color: var(--_error-focus-leading-icon-color),
-        error-focus-outline-color: var(--_error-focus-outline-color),
-        error-focus-supporting-text-color:
+        'disabled-trailing-content-color': var(--_disabled-trailing-icon-color),
+        'disabled-trailing-content-opacity':
+          var(--_disabled-trailing-icon-opacity),
+        'error-content-color': var(--_error-input-text-color),
+        'error-focus-content-color': var(--_error-focus-input-text-color),
+        'error-focus-label-text-color': var(--_error-focus-label-text-color),
+        'error-focus-leading-content-color':
+          var(--_error-focus-leading-icon-color),
+        'error-focus-outline-color': var(--_error-focus-outline-color),
+        'error-focus-supporting-text-color':
           var(--_error-focus-supporting-text-color),
-        error-focus-trailing-icon-color: var(--_error-focus-trailing-icon-color),
-        error-hover-content-color: var(--_error-hover-input-text-color),
-        error-hover-label-text-color: var(--_error-hover-label-text-color),
-        error-hover-leading-icon-color: var(--_error-hover-leading-icon-color),
-        error-hover-outline-color: var(--_error-hover-outline-color),
-        error-hover-supporting-text-color:
+        'error-focus-trailing-content-color':
+          var(--_error-focus-trailing-icon-color),
+        'error-hover-content-color': var(--_error-hover-input-text-color),
+        'error-hover-label-text-color': var(--_error-hover-label-text-color),
+        'error-hover-leading-content-color':
+          var(--_error-hover-leading-icon-color),
+        'error-hover-outline-color': var(--_error-hover-outline-color),
+        'error-hover-supporting-text-color':
           var(--_error-hover-supporting-text-color),
-        error-hover-trailing-icon-color: var(--_error-hover-trailing-icon-color),
-        error-content-color: var(--_error-input-text-color),
-        error-label-text-color: var(--_error-label-text-color),
-        error-leading-icon-color: var(--_error-leading-icon-color),
-        error-outline-color: var(--_error-outline-color),
-        error-supporting-text-color: var(--_error-supporting-text-color),
-        error-trailing-icon-color: var(--_error-trailing-icon-color),
-        focus-content-color: var(--_focus-input-text-color),
-        focus-label-text-color: var(--_focus-label-text-color),
-        focus-leading-icon-color: var(--_focus-leading-icon-color),
-        focus-outline-color: var(--_focus-outline-color),
-        focus-outline-width: var(--_focus-outline-width),
-        focus-supporting-text-color: var(--_focus-supporting-text-color),
-        focus-trailing-icon-color: var(--_focus-trailing-icon-color),
-        hover-content-color: var(--_hover-input-text-color),
-        hover-label-text-color: var(--_hover-label-text-color),
-        hover-leading-icon-color: var(--_hover-leading-icon-color),
-        hover-outline-color: var(--_hover-outline-color),
-        hover-outline-width: var(--_hover-outline-width),
-        hover-supporting-text-color: var(--_hover-supporting-text-color),
-        hover-trailing-icon-color: var(--_hover-trailing-icon-color),
-        content-color: var(--_input-text-color),
-        label-text-color: var(--_label-text-color),
-        label-text-type: var(--_label-text-type),
-        label-text-padding-bottom: var(--_label-text-padding-bottom),
-        label-text-populated-line-height:
+        'error-hover-trailing-content-color':
+          var(--_error-hover-trailing-icon-color),
+        'error-label-text-color': var(--_error-label-text-color),
+        'error-leading-content-color': var(--_error-leading-icon-color),
+        'error-outline-color': var(--_error-outline-color),
+        'error-supporting-text-color': var(--_error-supporting-text-color),
+        'error-trailing-content-color': var(--_error-trailing-icon-color),
+        'focus-content-color': var(--_focus-input-text-color),
+        'focus-label-text-color': var(--_focus-label-text-color),
+        'focus-leading-content-color': var(--_focus-leading-icon-color),
+        'focus-outline-color': var(--_focus-outline-color),
+        'focus-outline-width': var(--_focus-outline-width),
+        'focus-supporting-text-color': var(--_focus-supporting-text-color),
+        'focus-trailing-content-color': var(--_focus-trailing-icon-color),
+        'hover-content-color': var(--_hover-input-text-color),
+        'hover-label-text-color': var(--_hover-label-text-color),
+        'hover-leading-content-color': var(--_hover-leading-icon-color),
+        'hover-outline-color': var(--_hover-outline-color),
+        'hover-outline-width': var(--_hover-outline-width),
+        'hover-supporting-text-color': var(--_hover-supporting-text-color),
+        'hover-trailing-content-color': var(--_hover-trailing-icon-color),
+        'label-text-color': var(--_label-text-color),
+        'label-text-populated-line-height':
           var(--_label-text-populated-line-height),
-        label-text-populated-size: var(--_label-text-populated-size),
-        leading-icon-color: var(--_leading-icon-color),
-        leading-icon-size: var(--_leading-icon-size),
-        outline-color: var(--_outline-color),
-        outline-width: var(--_outline-width),
-        supporting-text-type: var(--_supporting-text-type),
-        supporting-text-color: var(--_supporting-text-color),
-        trailing-icon-color: var(--_trailing-icon-color),
-        trailing-icon-size: var(--_trailing-icon-size),
+        'label-text-populated-size': var(--_label-text-populated-size),
+        'label-text-type': var(--_label-text-type),
+        'leading-content-color': var(--_leading-icon-color),
+        'outline-color': var(--_outline-color),
+        'outline-width': var(--_outline-width),
+        'supporting-text-color': var(--_supporting-text-color),
+        'supporting-text-type': var(--_supporting-text-type),
+        'trailing-content-color': var(--_trailing-icon-color),
+        // go/keep-sorted end
       )
     );
   }
 }
 
-@function _resolve-tokens($tokens) {
+@function _resolve-tokens($tokens, $exclude-hardcoded-values: false) {
+  @if not $exclude-hardcoded-values {
+    // Add missing tokens
+    $tokens: map.merge(
+      (
+        'container-padding-horizontal': 16px,
+        'container-padding-vertical': 16px,
+        'input-text-prefix-padding': 2px,
+        'input-text-suffix-padding': 2px,
+        // TODO(b/270705687): remove when focus-caret-color token added
+        'focus-caret-color':
+          map.get(tokens.md-sys-color-values-light(), 'primary'),
+      ),
+      $tokens
+    );
+  }
+
   @return typography.resolve-tokens(
     $tokens,
     'input-text',

package/textfield/lib/filled-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--_container-shape-start-start: var(--md-filled-text-field-container-shape-start-start, var(--md-filled-text-field-container-shape, 4px));--_container-shape-start-end: var(--md-filled-text-field-container-shape-start-end, var(--md-filled-text-field-container-shape, 4px));--_container-shape-end-end: var(--md-filled-text-field-container-shape-end-end, var(--md-filled-text-field-container-shape, 0px));--_container-shape-end-start: var(--md-filled-text-field-container-shape-end-start, var(--md-filled-text-field-container-shape, 0px));--_container-padding-horizontal: var(--md-filled-text-field-container-padding-horizontal, 16px);--_container-padding-vertical: var(--md-filled-text-field-container-padding-vertical, 16px);--_input-text-prefix-padding: var(--md-filled-text-field-input-text-prefix-padding, 2px);--_input-text-suffix-padding: var(--md-filled-text-field-input-text-suffix-padding, 2px);--_with-label-container-padding-vertical: var(--md-filled-text-field-with-label-container-padding-vertical, 8px);--_active-indicator-color: var(--md-filled-text-field-active-indicator-color, var(--md-sys-color-on-surface-variant, #49454f));--_active-indicator-height: var(--md-filled-text-field-active-indicator-height, 1px);--_caret-color: var(--md-filled-text-field-caret-color, var(--md-sys-color-primary, #6750a4));--_container-color: var(--md-filled-text-field-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--_disabled-active-indicator-color: var(--md-filled-text-field-disabled-active-indicator-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-active-indicator-height: var(--md-filled-text-field-disabled-active-indicator-height, 1px);--_disabled-active-indicator-opacity: var(--md-filled-text-field-disabled-active-indicator-opacity, 0.38);--_disabled-container-color: var(--md-filled-text-field-disabled-container-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-container-opacity: var(--md-filled-text-field-disabled-container-opacity, 0.04);--_disabled-input-text-color: var(--md-filled-text-field-disabled-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-input-text-opacity: var(--md-filled-text-field-disabled-input-text-opacity, 0.38);--_disabled-label-text-color: var(--md-filled-text-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-label-text-opacity: var(--md-filled-text-field-disabled-label-text-opacity, 0.38);--_disabled-leading-icon-color: var(--md-filled-text-field-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-leading-icon-opacity: var(--md-filled-text-field-disabled-leading-icon-opacity, 0.38);--_disabled-supporting-text-color: var(--md-filled-text-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-supporting-text-opacity: var(--md-filled-text-field-disabled-supporting-text-opacity, 0.38);--_disabled-trailing-icon-color: var(--md-filled-text-field-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-trailing-icon-opacity: var(--md-filled-text-field-disabled-trailing-icon-opacity, 0.38);--_error-active-indicator-color: var(--md-filled-text-field-error-active-indicator-color, var(--md-sys-color-error, #b3261e));--_error-focus-active-indicator-color: var(--md-filled-text-field-error-focus-active-indicator-color, var(--md-sys-color-error, #b3261e));--_error-focus-caret-color: var(--md-filled-text-field-error-focus-caret-color, var(--md-sys-color-error, #b3261e));--_error-focus-input-text-color: var(--md-filled-text-field-error-focus-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-focus-label-text-color: var(--md-filled-text-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-leading-icon-color: var(--md-filled-text-field-error-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-focus-supporting-text-color: var(--md-filled-text-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-trailing-icon-color: var(--md-filled-text-field-error-focus-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_error-hover-active-indicator-color: var(--md-filled-text-field-error-hover-active-indicator-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-input-text-color: var(--md-filled-text-field-error-hover-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-hover-label-text-color: var(--md-filled-text-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-leading-icon-color: var(--md-filled-text-field-error-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-hover-state-layer-color: var(--md-filled-text-field-error-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-hover-state-layer-opacity: var(--md-filled-text-field-error-hover-state-layer-opacity, 0.08);--_error-hover-supporting-text-color: var(--md-filled-text-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-hover-trailing-icon-color: var(--md-filled-text-field-error-hover-trailing-icon-color, var(--md-sys-color-on-error-container, #410e0b));--_error-input-text-color: var(--md-filled-text-field-error-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-label-text-color: var(--md-filled-text-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_error-leading-icon-color: var(--md-filled-text-field-error-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-supporting-text-color: var(--md-filled-text-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-trailing-icon-color: var(--md-filled-text-field-error-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_focus-active-indicator-color: var(--md-filled-text-field-focus-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_focus-active-indicator-height: var(--md-filled-text-field-focus-active-indicator-height, 2px);--_focus-input-text-color: var(--md-filled-text-field-focus-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_focus-label-text-color: var(--md-filled-text-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-icon-color: var(--md-filled-text-field-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-supporting-text-color: var(--md-filled-text-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-trailing-icon-color: var(--md-filled-text-field-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-active-indicator-color: var(--md-filled-text-field-hover-active-indicator-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-active-indicator-height: var(--md-filled-text-field-hover-active-indicator-height, 1px);--_hover-input-text-color: var(--md-filled-text-field-hover-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-label-text-color: var(--md-filled-text-field-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-leading-icon-color: var(--md-filled-text-field-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-filled-text-field-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-state-layer-opacity: var(--md-filled-text-field-hover-state-layer-opacity, 0.08);--_hover-supporting-text-color: var(--md-filled-text-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-filled-text-field-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-color: var(--md-filled-text-field-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_input-text-placeholder-color: var(--md-filled-text-field-input-text-placeholder-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-prefix-color: var(--md-filled-text-field-input-text-prefix-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-suffix-color: var(--md-filled-text-field-input-text-suffix-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-type: var(--md-filled-text-field-input-text-type, 400 1rem / 1.5rem Roboto);--_label-text-color: var(--md-filled-text-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-populated-line-height: var(--md-filled-text-field-label-text-populated-line-height, 1rem);--_label-text-populated-size: var(--md-filled-text-field-label-text-populated-size, 0.75rem);--_label-text-type: var(--md-filled-text-field-label-text-type, 400 1rem / 1.5rem Roboto);--_leading-icon-color: var(--md-filled-text-field-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_leading-icon-size: var(--md-filled-text-field-leading-icon-size, 24px);--_supporting-text-color: var(--md-filled-text-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-type: var(--md-filled-text-field-supporting-text-type, 400 0.75rem / 1rem Roboto);--_trailing-icon-color: var(--md-filled-text-field-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-size: var(--md-filled-text-field-trailing-icon-size, 24px);--md-filled-field-container-shape-start-start:var(--md-filled-field-container-shape, var(--_container-shape-start-start));--md-filled-field-container-shape-start-end:var(--md-filled-field-container-shape, var(--_container-shape-start-end));--md-filled-field-container-shape-end-end:var(--md-filled-field-container-shape, var(--_container-shape-end-end));--md-filled-field-container-shape-end-start:var(--md-filled-field-container-shape, var(--_container-shape-end-start));--md-filled-field-active-indicator-color:var(--_active-indicator-color);--md-filled-field-active-indicator-height:var(--_active-indicator-height);--md-filled-field-container-color:var(--_container-color);--md-filled-field-container-padding-horizontal:var(--_container-padding-horizontal);--md-filled-field-container-padding-vertical:var(--_container-padding-vertical);--md-filled-field-content-color:var(--_input-text-color);--md-filled-field-disabled-active-indicator-color:var(--_disabled-active-indicator-color);--md-filled-field-disabled-active-indicator-height:var(--_disabled-active-indicator-height);--md-filled-field-disabled-active-indicator-opacity:var(--_disabled-active-indicator-opacity);--md-filled-field-disabled-container-color:var(--_disabled-container-color);--md-filled-field-disabled-container-opacity:var(--_disabled-container-opacity);--md-filled-field-disabled-content-color:var(--_disabled-input-text-color);--md-filled-field-disabled-content-opacity:var(--_disabled-input-text-opacity);--md-filled-field-disabled-label-text-color:var(--_disabled-label-text-color);--md-filled-field-disabled-label-text-opacity:var(--_disabled-label-text-opacity);--md-filled-field-disabled-leading-icon-color:var(--_disabled-leading-icon-color);--md-filled-field-disabled-leading-icon-opacity:var(--_disabled-leading-icon-opacity);--md-filled-field-disabled-supporting-text-color:var(--_disabled-supporting-text-color);--md-filled-field-disabled-supporting-text-opacity:var(--_disabled-supporting-text-opacity);--md-filled-field-disabled-trailing-icon-color:var(--_disabled-trailing-icon-color);--md-filled-field-disabled-trailing-icon-opacity:var(--_disabled-trailing-icon-opacity);--md-filled-field-error-active-indicator-color:var(--_error-active-indicator-color);--md-filled-field-error-focus-active-indicator-color:var(--_error-focus-active-indicator-color);--md-filled-field-error-focus-content-color:var(--_error-focus-input-text-color);--md-filled-field-error-focus-label-text-color:var(--_error-focus-label-text-color);--md-filled-field-error-focus-leading-icon-color:var(--_error-focus-leading-icon-color);--md-filled-field-error-focus-supporting-text-color:var(--_error-focus-supporting-text-color);--md-filled-field-error-focus-trailing-icon-color:var(--_error-focus-trailing-icon-color);--md-filled-field-error-hover-active-indicator-color:var(--_error-hover-active-indicator-color);--md-filled-field-error-hover-content-color:var(--_error-hover-input-text-color);--md-filled-field-error-hover-label-text-color:var(--_error-hover-label-text-color);--md-filled-field-error-hover-leading-icon-color:var(--_error-hover-leading-icon-color);--md-filled-field-error-hover-state-layer-color:var(--_error-hover-state-layer-color);--md-filled-field-error-hover-state-layer-opacity:var(--_error-hover-state-layer-opacity);--md-filled-field-error-hover-supporting-text-color:var(--_error-hover-supporting-text-color);--md-filled-field-error-hover-trailing-icon-color:var(--_error-hover-trailing-icon-color);--md-filled-field-error-content-color:var(--_error-input-text-color);--md-filled-field-error-label-text-color:var(--_error-label-text-color);--md-filled-field-error-leading-icon-color:var(--_error-leading-icon-color);--md-filled-field-error-supporting-text-color:var(--_error-supporting-text-color);--md-filled-field-error-trailing-icon-color:var(--_error-trailing-icon-color);--md-filled-field-focus-active-indicator-color:var(--_focus-active-indicator-color);--md-filled-field-focus-active-indicator-height:var(--_focus-active-indicator-height);--md-filled-field-focus-content-color:var(--_focus-input-text-color);--md-filled-field-focus-label-text-color:var(--_focus-label-text-color);--md-filled-field-focus-leading-icon-color:var(--_focus-leading-icon-color);--md-filled-field-focus-supporting-text-color:var(--_focus-supporting-text-color);--md-filled-field-focus-trailing-icon-color:var(--_focus-trailing-icon-color);--md-filled-field-hover-active-indicator-color:var(--_hover-active-indicator-color);--md-filled-field-hover-active-indicator-height:var(--_hover-active-indicator-height);--md-filled-field-hover-content-color:var(--_hover-input-text-color);--md-filled-field-hover-label-text-color:var(--_hover-label-text-color);--md-filled-field-hover-leading-icon-color:var(--_hover-leading-icon-color);--md-filled-field-hover-state-layer-color:var(--_hover-state-layer-color);--md-filled-field-hover-state-layer-opacity:var(--_hover-state-layer-opacity);--md-filled-field-hover-supporting-text-color:var(--_hover-supporting-text-color);--md-filled-field-hover-trailing-icon-color:var(--_hover-trailing-icon-color);--md-filled-field-label-text-color:var(--_label-text-color);--md-filled-field-label-text-type:var(--_label-text-type);--md-filled-field-label-text-populated-line-height:var(--_label-text-populated-line-height);--md-filled-field-label-text-populated-size:var(--_label-text-populated-size);--md-filled-field-leading-icon-color:var(--_leading-icon-color);--md-filled-field-leading-icon-size:var(--_leading-icon-size);--md-filled-field-supporting-text-color:var(--_supporting-text-color);--md-filled-field-supporting-text-type:var(--_supporting-text-type);--md-filled-field-trailing-icon-color:var(--_trailing-icon-color);--md-filled-field-trailing-icon-size:var(--_trailing-icon-size);--md-filled-field-with-label-container-padding-vertical:var(--_with-label-container-padding-vertical)}/*# sourceMappingURL=filled-styles.css.map */
+export const styles = css `:host{--_container-shape-start-start: var(--md-filled-text-field-container-shape-start-start, var(--md-filled-text-field-container-shape, 4px));--_container-shape-start-end: var(--md-filled-text-field-container-shape-start-end, var(--md-filled-text-field-container-shape, 4px));--_container-shape-end-end: var(--md-filled-text-field-container-shape-end-end, var(--md-filled-text-field-container-shape, 0px));--_container-shape-end-start: var(--md-filled-text-field-container-shape-end-start, var(--md-filled-text-field-container-shape, 0px));--_container-padding-horizontal: var(--md-filled-text-field-container-padding-horizontal, 16px);--_container-padding-vertical: var(--md-filled-text-field-container-padding-vertical, 16px);--_input-text-prefix-padding: var(--md-filled-text-field-input-text-prefix-padding, 2px);--_input-text-suffix-padding: var(--md-filled-text-field-input-text-suffix-padding, 2px);--_with-label-container-padding-vertical: var(--md-filled-text-field-with-label-container-padding-vertical, 8px);--_focus-caret-color: var(--md-filled-text-field-focus-caret-color, var(--md-sys-color-primary, #6750a4));--_active-indicator-color: var(--md-filled-text-field-active-indicator-color, var(--md-sys-color-on-surface-variant, #49454f));--_active-indicator-height: var(--md-filled-text-field-active-indicator-height, 1px);--_caret-color: var(--md-filled-text-field-caret-color, var(--md-sys-color-primary, #6750a4));--_container-color: var(--md-filled-text-field-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--_disabled-active-indicator-color: var(--md-filled-text-field-disabled-active-indicator-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-active-indicator-height: var(--md-filled-text-field-disabled-active-indicator-height, 1px);--_disabled-active-indicator-opacity: var(--md-filled-text-field-disabled-active-indicator-opacity, 0.38);--_disabled-container-color: var(--md-filled-text-field-disabled-container-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-container-opacity: var(--md-filled-text-field-disabled-container-opacity, 0.04);--_disabled-input-text-color: var(--md-filled-text-field-disabled-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-input-text-opacity: var(--md-filled-text-field-disabled-input-text-opacity, 0.38);--_disabled-label-text-color: var(--md-filled-text-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-label-text-opacity: var(--md-filled-text-field-disabled-label-text-opacity, 0.38);--_disabled-leading-icon-color: var(--md-filled-text-field-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-leading-icon-opacity: var(--md-filled-text-field-disabled-leading-icon-opacity, 0.38);--_disabled-supporting-text-color: var(--md-filled-text-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-supporting-text-opacity: var(--md-filled-text-field-disabled-supporting-text-opacity, 0.38);--_disabled-trailing-icon-color: var(--md-filled-text-field-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-trailing-icon-opacity: var(--md-filled-text-field-disabled-trailing-icon-opacity, 0.38);--_error-active-indicator-color: var(--md-filled-text-field-error-active-indicator-color, var(--md-sys-color-error, #b3261e));--_error-focus-active-indicator-color: var(--md-filled-text-field-error-focus-active-indicator-color, var(--md-sys-color-error, #b3261e));--_error-focus-caret-color: var(--md-filled-text-field-error-focus-caret-color, var(--md-sys-color-error, #b3261e));--_error-focus-input-text-color: var(--md-filled-text-field-error-focus-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-focus-label-text-color: var(--md-filled-text-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-leading-icon-color: var(--md-filled-text-field-error-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-focus-supporting-text-color: var(--md-filled-text-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-trailing-icon-color: var(--md-filled-text-field-error-focus-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_error-hover-active-indicator-color: var(--md-filled-text-field-error-hover-active-indicator-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-input-text-color: var(--md-filled-text-field-error-hover-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-hover-label-text-color: var(--md-filled-text-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-leading-icon-color: var(--md-filled-text-field-error-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-hover-state-layer-color: var(--md-filled-text-field-error-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-hover-state-layer-opacity: var(--md-filled-text-field-error-hover-state-layer-opacity, 0.08);--_error-hover-supporting-text-color: var(--md-filled-text-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-hover-trailing-icon-color: var(--md-filled-text-field-error-hover-trailing-icon-color, var(--md-sys-color-on-error-container, #410e0b));--_error-input-text-color: var(--md-filled-text-field-error-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-label-text-color: var(--md-filled-text-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_error-leading-icon-color: var(--md-filled-text-field-error-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-supporting-text-color: var(--md-filled-text-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-trailing-icon-color: var(--md-filled-text-field-error-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_focus-active-indicator-color: var(--md-filled-text-field-focus-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_focus-active-indicator-height: var(--md-filled-text-field-focus-active-indicator-height, 2px);--_focus-input-text-color: var(--md-filled-text-field-focus-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_focus-label-text-color: var(--md-filled-text-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-icon-color: var(--md-filled-text-field-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-supporting-text-color: var(--md-filled-text-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-trailing-icon-color: var(--md-filled-text-field-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-active-indicator-color: var(--md-filled-text-field-hover-active-indicator-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-active-indicator-height: var(--md-filled-text-field-hover-active-indicator-height, 1px);--_hover-input-text-color: var(--md-filled-text-field-hover-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-label-text-color: var(--md-filled-text-field-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-leading-icon-color: var(--md-filled-text-field-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-filled-text-field-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-state-layer-opacity: var(--md-filled-text-field-hover-state-layer-opacity, 0.08);--_hover-supporting-text-color: var(--md-filled-text-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-filled-text-field-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-color: var(--md-filled-text-field-input-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_input-text-placeholder-color: var(--md-filled-text-field-input-text-placeholder-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-prefix-color: var(--md-filled-text-field-input-text-prefix-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-suffix-color: var(--md-filled-text-field-input-text-suffix-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-type: var(--md-filled-text-field-input-text-type, 400 1rem / 1.5rem Roboto);--_label-text-color: var(--md-filled-text-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-populated-line-height: var(--md-filled-text-field-label-text-populated-line-height, 1rem);--_label-text-populated-size: var(--md-filled-text-field-label-text-populated-size, 0.75rem);--_label-text-type: var(--md-filled-text-field-label-text-type, 400 1rem / 1.5rem Roboto);--_leading-icon-color: var(--md-filled-text-field-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_leading-icon-size: var(--md-filled-text-field-leading-icon-size, 24px);--_supporting-text-color: var(--md-filled-text-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-type: var(--md-filled-text-field-supporting-text-type, 400 0.75rem / 1rem Roboto);--_trailing-icon-color: var(--md-filled-text-field-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-size: var(--md-filled-text-field-trailing-icon-size, 24px);--md-filled-field-container-shape-start-start:var(--md-filled-field-container-shape, var(--_container-shape-start-start));--md-filled-field-container-shape-start-end:var(--md-filled-field-container-shape, var(--_container-shape-start-end));--md-filled-field-container-shape-end-end:var(--md-filled-field-container-shape, var(--_container-shape-end-end));--md-filled-field-container-shape-end-start:var(--md-filled-field-container-shape, var(--_container-shape-end-start));--md-filled-field-active-indicator-color:var(--_active-indicator-color);--md-filled-field-active-indicator-height:var(--_active-indicator-height);--md-filled-field-container-color:var(--_container-color);--md-filled-field-container-padding-horizontal:var(--_container-padding-horizontal);--md-filled-field-container-padding-vertical:var(--_container-padding-vertical);--md-filled-field-content-color:var(--_input-text-color);--md-filled-field-content-type:var(--_input-text-type);--md-filled-field-disabled-active-indicator-color:var(--_disabled-active-indicator-color);--md-filled-field-disabled-active-indicator-height:var(--_disabled-active-indicator-height);--md-filled-field-disabled-active-indicator-opacity:var(--_disabled-active-indicator-opacity);--md-filled-field-disabled-container-color:var(--_disabled-container-color);--md-filled-field-disabled-container-opacity:var(--_disabled-container-opacity);--md-filled-field-disabled-content-color:var(--_disabled-input-text-color);--md-filled-field-disabled-content-opacity:var(--_disabled-input-text-opacity);--md-filled-field-disabled-label-text-color:var(--_disabled-label-text-color);--md-filled-field-disabled-label-text-opacity:var(--_disabled-label-text-opacity);--md-filled-field-disabled-leading-content-color:var(--_disabled-leading-icon-color);--md-filled-field-disabled-leading-content-opacity:var(--_disabled-leading-icon-opacity);--md-filled-field-disabled-supporting-text-color:var(--_disabled-supporting-text-color);--md-filled-field-disabled-supporting-text-opacity:var(--_disabled-supporting-text-opacity);--md-filled-field-disabled-trailing-content-color:var(--_disabled-trailing-icon-color);--md-filled-field-disabled-trailing-content-opacity:var(--_disabled-trailing-icon-opacity);--md-filled-field-error-active-indicator-color:var(--_error-active-indicator-color);--md-filled-field-error-content-color:var(--_error-input-text-color);--md-filled-field-error-focus-active-indicator-color:var(--_error-focus-active-indicator-color);--md-filled-field-error-focus-content-color:var(--_error-focus-input-text-color);--md-filled-field-error-focus-label-text-color:var(--_error-focus-label-text-color);--md-filled-field-error-focus-leading-content-color:var(--_error-focus-leading-icon-color);--md-filled-field-error-focus-supporting-text-color:var(--_error-focus-supporting-text-color);--md-filled-field-error-focus-trailing-content-color:var(--_error-focus-trailing-icon-color);--md-filled-field-error-hover-active-indicator-color:var(--_error-hover-active-indicator-color);--md-filled-field-error-hover-content-color:var(--_error-hover-input-text-color);--md-filled-field-error-hover-label-text-color:var(--_error-hover-label-text-color);--md-filled-field-error-hover-leading-content-color:var(--_error-hover-leading-icon-color);--md-filled-field-error-hover-state-layer-color:var(--_error-hover-state-layer-color);--md-filled-field-error-hover-state-layer-opacity:var(--_error-hover-state-layer-opacity);--md-filled-field-error-hover-supporting-text-color:var(--_error-hover-supporting-text-color);--md-filled-field-error-hover-trailing-content-color:var(--_error-hover-trailing-icon-color);--md-filled-field-error-label-text-color:var(--_error-label-text-color);--md-filled-field-error-leading-content-color:var(--_error-leading-icon-color);--md-filled-field-error-supporting-text-color:var(--_error-supporting-text-color);--md-filled-field-error-trailing-content-color:var(--_error-trailing-icon-color);--md-filled-field-focus-active-indicator-color:var(--_focus-active-indicator-color);--md-filled-field-focus-active-indicator-height:var(--_focus-active-indicator-height);--md-filled-field-focus-content-color:var(--_focus-input-text-color);--md-filled-field-focus-label-text-color:var(--_focus-label-text-color);--md-filled-field-focus-leading-content-color:var(--_focus-leading-icon-color);--md-filled-field-focus-supporting-text-color:var(--_focus-supporting-text-color);--md-filled-field-focus-trailing-content-color:var(--_focus-trailing-icon-color);--md-filled-field-hover-active-indicator-color:var(--_hover-active-indicator-color);--md-filled-field-hover-active-indicator-height:var(--_hover-active-indicator-height);--md-filled-field-hover-content-color:var(--_hover-input-text-color);--md-filled-field-hover-label-text-color:var(--_hover-label-text-color);--md-filled-field-hover-leading-content-color:var(--_hover-leading-icon-color);--md-filled-field-hover-state-layer-color:var(--_hover-state-layer-color);--md-filled-field-hover-state-layer-opacity:var(--_hover-state-layer-opacity);--md-filled-field-hover-supporting-text-color:var(--_hover-supporting-text-color);--md-filled-field-hover-trailing-content-color:var(--_hover-trailing-icon-color);--md-filled-field-label-text-color:var(--_label-text-color);--md-filled-field-label-text-populated-line-height:var(--_label-text-populated-line-height);--md-filled-field-label-text-populated-size:var(--_label-text-populated-size);--md-filled-field-label-text-type:var(--_label-text-type);--md-filled-field-leading-content-color:var(--_leading-icon-color);--md-filled-field-supporting-text-color:var(--_supporting-text-color);--md-filled-field-supporting-text-type:var(--_supporting-text-type);--md-filled-field-trailing-content-color:var(--_trailing-icon-color);--md-filled-field-with-label-container-padding-vertical:var(--_with-label-container-padding-vertical)}/*# sourceMappingURL=filled-styles.css.map */
 `;
 //# sourceMappingURL=filled-styles.css.js.map