@m3e/form-field 1.1.2 → 1.1.3

package/dist/custom-elements.json

@@ -228,6 +228,14 @@
               },
               "default": "null"
             },
+            {
+              "kind": "field",
+              "name": "#removeValueInterceptor",
+              "privacy": "private",
+              "type": {
+                "text": "() => void | undefined"
+              }
+            },
             {
               "kind": "field",
               "name": "#formResetHandler",
@@ -2431,12 +2439,51 @@
           "description": "Mixin to augment an element with behavior emits a click event on keyboard events.",
           "name": "KeyboardClick",
           "members": [
+            {
+              "kind": "field",
+              "name": "#keyPressed",
+              "privacy": "private",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "#keyDownHandler",
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "#keyUpHandler",
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "#focusOutHandler",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "#handleKeyDown",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "#handleKeyUp",

package/dist/index.js

@@ -4,7 +4,7 @@
  * See LICENSE file in the project root for full license text.
  */
 import { LitElement, nothing, html, css, unsafeCSS } from 'lit';
-import { AttachInternals, MutationController, ResizeController, FocusController, HoverController, PressedController, isReadOnlyMixin, DesignToken, hasAssignedNodes, getTextContent } from '@m3e/core';
+import { AttachInternals, MutationController, ResizeController, FocusController, HoverController, PressedController, isReadOnlyMixin, DesignToken, hasAssignedNodes, interceptProperty, getTextContent } from '@m3e/core';
 import { M3eAriaDescriber } from '@m3e/core/a11y';
 
 /**
@@ -501,7 +501,7 @@ function e(e, r) {
  * Copyright (c) 2025 Google LLC
  * See LICENSE file in the project root for full license text.
  */
-var _M3eFormFieldElement_instances, _M3eFormFieldElement_control, _M3eFormFieldElement_formResetHandler, _M3eFormFieldElement_controlInvalidHandler, _M3eFormFieldElement_controlMutationController, _M3eFormFieldElement_resizeController, _M3eFormFieldElement_focusController, _M3eFormFieldElement_hintMutationController, _M3eFormFieldElement_errorMutationController, _M3eFormFieldElement_focused, _M3eFormFieldElement_hintText, _M3eFormFieldElement_errorText, _M3eFormFieldElement_shouldFloatLabel_get, _M3eFormFieldElement_stopPropagation, _M3eFormFieldElement_handleLabelSlotChange, _M3eFormFieldElement_handlePrefixSlotChange, _M3eFormFieldElement_handleSuffixSlotChange, _M3eFormFieldElement_handlePrefixResize, _M3eFormFieldElement_handleSlotChange, _M3eFormFieldElement_handleContainerClick, _M3eFormFieldElement_handleControlInvalid, _M3eFormFieldElement_handleControlChange, _M3eFormFieldElement_handleFormReset, _M3eFormFieldElement_changeControl, _M3eFormFieldElement_handleHintChange, _M3eFormFieldElement_handleErrorChange;
+var _M3eFormFieldElement_instances, _M3eFormFieldElement_control, _M3eFormFieldElement_removeValueInterceptor, _M3eFormFieldElement_formResetHandler, _M3eFormFieldElement_controlInvalidHandler, _M3eFormFieldElement_controlMutationController, _M3eFormFieldElement_resizeController, _M3eFormFieldElement_focusController, _M3eFormFieldElement_hintMutationController, _M3eFormFieldElement_errorMutationController, _M3eFormFieldElement_focused, _M3eFormFieldElement_hintText, _M3eFormFieldElement_errorText, _M3eFormFieldElement_shouldFloatLabel_get, _M3eFormFieldElement_stopPropagation, _M3eFormFieldElement_handleLabelSlotChange, _M3eFormFieldElement_handlePrefixSlotChange, _M3eFormFieldElement_handleSuffixSlotChange, _M3eFormFieldElement_handlePrefixResize, _M3eFormFieldElement_handleSlotChange, _M3eFormFieldElement_handleContainerClick, _M3eFormFieldElement_handleControlInvalid, _M3eFormFieldElement_handleControlChange, _M3eFormFieldElement_handleFormReset, _M3eFormFieldElement_changeControl, _M3eFormFieldElement_handleHintChange, _M3eFormFieldElement_handleErrorChange;
 /**
  * A container for form controls that applies Material Design styling and behavior.
  *
@@ -580,6 +580,8 @@ let M3eFormFieldElement = class M3eFormFieldElement extends AttachInternals(LitE
     /** @private */
     _M3eFormFieldElement_control.set(this, null);
     /** @private */
+    _M3eFormFieldElement_removeValueInterceptor.set(this, void 0);
+    /** @private */
     _M3eFormFieldElement_formResetHandler.set(this, () => __classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleFormReset).call(this));
     /** @private */
     _M3eFormFieldElement_controlInvalidHandler.set(this, () => __classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleControlInvalid).call(this));
@@ -735,10 +737,11 @@ let M3eFormFieldElement = class M3eFormFieldElement extends AttachInternals(LitE
   }
   /** @inheritdoc */
   render() {
-    return html`<div class="base" @click="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleContainerClick)}">${this.variant === "outlined" ? html`<div class="outline" aria-hidden="true"><div class="outline-start"></div><div class="outline-notch"><div class="pseudo-label">${this._pseudoLabel} ${!this.hideRequiredMarker && this._required ? html`&nbsp;*` : nothing}</div></div><div class="outline-end"></div></div>` : nothing}<div class="prefix"><slot name="prefix" @slotchange="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handlePrefixSlotChange)}"></slot></div><div class="content"><span class="prefix-text"><slot name="prefix-text"></slot></span><span class="input"><slot @slotchange="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleSlotChange)}" @change="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleControlChange)}"></slot></span><span class="suffix-text"><slot name="suffix-text"></slot></span><span class="label"><slot name="label" @slotchange="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleLabelSlotChange)}"></slot>${!this.hideRequiredMarker && this._required ? html`<span class="required-marker" aria-hidden="true">&nbsp;*</span>` : nothing}</span></div><div class="suffix" @click="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_stopPropagation)}"><slot name="suffix" @slotchange="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleSuffixSlotChange)}"></slot></div></div><span class="subscript" aria-hidden="true"><span class="error"><slot name="error">${this._validationMessage}</slot></span><span class="hint"><slot name="hint"></slot></span></span>`;
+    return html`<div class="base" @click="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleContainerClick)}">${this.variant === "outlined" ? html`<div class="outline" aria-hidden="true"><div class="outline-start"></div><div class="outline-notch"><div class="pseudo-label">${this._pseudoLabel} ${!this.hideRequiredMarker && this._required ? html`&nbsp;*` : nothing}</div></div><div class="outline-end"></div></div>` : nothing}<div class="prefix"><slot name="prefix" @slotchange="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handlePrefixSlotChange)}"></slot></div><div class="content"><span class="prefix-text"><slot name="prefix-text"></slot></span><span class="input"><slot @slotchange="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleSlotChange)}" @change="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleControlChange)}"></slot></span><span class="suffix-text"><slot name="suffix-text"></slot></span><span class="label"><slot name="label" @slotchange="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleLabelSlotChange)}"></slot>${!this.hideRequiredMarker && this._required ? html`<span class="required-marker" aria-hidden="true">&nbsp;*</span>` : nothing}</span></div><div class="suffix" @click="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_stopPropagation)}" @focusin="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_stopPropagation)}" @focusout="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_stopPropagation)}" @pointerdown="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_stopPropagation)}" @keydown="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_stopPropagation)}" @keyup="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_stopPropagation)}"><slot name="suffix" @slotchange="${__classPrivateFieldGet(this, _M3eFormFieldElement_instances, "m", _M3eFormFieldElement_handleSuffixSlotChange)}"></slot></div></div><span class="subscript" aria-hidden="true"><span class="error"><slot name="error">${this._validationMessage}</slot></span><span class="hint"><slot name="hint"></slot></span></span>`;
   }
 };
 _M3eFormFieldElement_control = new WeakMap();
+_M3eFormFieldElement_removeValueInterceptor = new WeakMap();
 _M3eFormFieldElement_formResetHandler = new WeakMap();
 _M3eFormFieldElement_controlInvalidHandler = new WeakMap();
 _M3eFormFieldElement_controlMutationController = new WeakMap();
@@ -812,6 +815,8 @@ _M3eFormFieldElement_changeControl = function _M3eFormFieldElement_changeControl
     __classPrivateFieldGet(this, _M3eFormFieldElement_controlMutationController, "f").unobserve(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f"));
     __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f").removeEventListener("invalid", __classPrivateFieldGet(this, _M3eFormFieldElement_controlInvalidHandler, "f"));
     __classPrivateFieldGet(this, _M3eFormFieldElement_control, "f").form?.removeEventListener("reset", __classPrivateFieldGet(this, _M3eFormFieldElement_formResetHandler, "f"));
+    __classPrivateFieldGet(this, _M3eFormFieldElement_removeValueInterceptor, "f")?.call(this);
+    __classPrivateFieldSet(this, _M3eFormFieldElement_removeValueInterceptor, undefined, "f");
   }
   __classPrivateFieldSet(this, _M3eFormFieldElement_control, control, "f");
   if (["INPUT", "TEXTAREA"].includes(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f")?.tagName ?? "")) {
@@ -832,6 +837,12 @@ _M3eFormFieldElement_changeControl = function _M3eFormFieldElement_changeControl
       M3eAriaDescriber.describe(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f"), __classPrivateFieldGet(this, _M3eFormFieldElement_hintText, "f"));
     }
     this.notifyControlStateChange();
+    __classPrivateFieldSet(this, _M3eFormFieldElement_removeValueInterceptor, interceptProperty(__classPrivateFieldGet(this, _M3eFormFieldElement_control, "f"), "value", {
+      set: (value, setter) => {
+        setter(value);
+        this.notifyControlStateChange(true);
+      }
+    }), "f");
   }
 };
 _M3eFormFieldElement_handleHintChange = function _M3eFormFieldElement_handleHintChange() {
@@ -866,7 +877,7 @@ M3eFormFieldElement.styles = css`:host { display: inline-flex; flex-direction: c
         font-size ${DesignToken.motion.duration.short4}, 
         line-height ${DesignToken.motion.duration.short4}`)}; } :host(.-with-select) .label { margin-inline-end: 1.5rem; } ::slotted([slot="label"]) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .subscript { display: inline-flex; width: 100%; margin-top: 0.25rem; font-size: var(--m3e-form-field-subscript-font-size, ${DesignToken.typescale.standard.body.small.fontSize}); font-weight: var(--m3e-form-field-subscript-font-weight, ${DesignToken.typescale.standard.body.small.fontWeight}); line-height: var(--m3e-form-field-subscript-line-height, ${DesignToken.typescale.standard.body.small.lineHeight}); letter-spacing: var(--m3e-form-field-subscript-tracking, ${DesignToken.typescale.standard.body.small.tracking}); min-height: var(--m3e-form-field-subscript-line-height, ${DesignToken.typescale.standard.body.small.lineHeight}); color: var(--m3e-form-field-subscript-color, ${DesignToken.color.onSurfaceVariant}); } .error, .hint { flex: 1 1 auto; } :host([hide-subscript="always"]) .subscript { display: none; } :host([hide-subscript="auto"]:not(.-invalid)) .subscript { opacity: 0; margin-top: 0px; margin-bottom: 0.25rem; transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short4}, 
         margin-top ${DesignToken.motion.duration.short4}, 
-        margin-bottom ${DesignToken.motion.duration.short4}`)}; } :host([hide-subscript="auto"]:not(.-invalid):focus-within) .subscript, :host([hide-subscript="auto"]:not(.-invalid).-pressed) .subscript { opacity: 1; margin-top: 0.25rem; margin-bottom: 0; } :host(.-invalid) .hint { display: none; } :host(:not(.-invalid)) .error { display: none; } ::slotted(input), ::slotted(textarea), ::slotted(select) { outline: unset; border: unset; background-color: transparent; box-shadow: none; font-family: inherit; font-size: inherit; line-height: initial; letter-spacing: inherit; color: var(--_form-field-input-color, inherit); flex: 1 1 auto; min-width: 0; padding: unset; } ::slotted(textarea) { scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; } ::slotted(m3e-select), ::slotted(m3e-input-chip-set) { flex: 1 1 auto; min-width: 0; } :host([variant="outlined"]) ::slotted(m3e-input-chip-set) { margin-block: calc(calc(3.5rem + ${DesignToken.density.calc(-2)}) / 4); } :host([float-label="auto"]:not(.-float-label):not(.-pressed)) .label { font-size: inherit; } :host([float-label="auto"]:not(.-float-label).-with-label) .prefix-text, :host([float-label="auto"]:not(.-float-label).-with-label) .suffix-text { opacity: 0; transition: opacity 0s; } .prefix { margin-inline-start: 1rem; } :host(.-with-prefix) .prefix { margin-inline-end: 1rem; margin-inline-start: 0.75rem; } .suffix { margin-inline-end: 1rem; } :host(.-with-suffix) .suffix { margin-inline-start: 0.25rem; margin-inline-end: unset; } :host(.-with-suffix.-with-select) .suffix { margin-inline-start: unset; } :host(.-with-select) .suffix-text { display: none; } :host([variant="outlined"]) .label { margin-top: calc(0px - var(--_form-field-label-line-height) / 2); } :host([variant="outlined"]) .outline { position: absolute; display: flex; pointer-events: none; left: 0; top: 0; bottom: 0; right: 0; } :host([variant="outlined"]) .pseudo-label { visibility: hidden; margin-inline-end: 0.25rem; font-size: var(--_form-field-label-font-size); line-height: var(--_form-field-label-line-height); letter-spacing: var(--_form-field-label-tracking); max-width: 100%; transition-property: max-width, margin-inline-end; transition-duration: 1ms; } :host([variant="outlined"][float-label="auto"]:not(.-float-label):not(.-pressed)) .pseudo-label { max-width: 0; margin-inline-end: 0px; transition-delay: ${DesignToken.motion.duration.short2}; } :host([variant="outlined"]) .outline-start, :host([variant="outlined"]) .outline-notch, :host([variant="outlined"]) .outline-end { box-sizing: border-box; border-width: var(--_form-field-outline-size, 0.0625rem); border-color: var(--_form-field-outline-color); transition: border-color ${DesignToken.motion.duration.short4}; } :host([variant="outlined"]:not(.-with-label)) .outline-notch { display: none; } :host([variant="outlined"]) .outline-start { min-width: 0.75rem; border-top-style: solid; border-inline-start-style: solid; border-bottom-style: solid; border-start-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall}); border-end-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall}); } :host([variant="outlined"]) .outline-notch { border-bottom-style: solid; } :host([variant="outlined"]) .outline-end { flex-grow: 1; min-width: 1rem; border-top-style: solid; border-inline-end-style: solid; border-bottom-style: solid; border-start-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall}); border-end-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall}); } :host([variant="outlined"].-with-prefix) .outline-start { min-width: calc(1.25rem + var(--_prefix-width, 0px) + 0.25rem); } :host([variant="outlined"]:not(.-disabled)) .base:hover .outline, :host([variant="outlined"]:not(.-disabled):focus-within) .outline, :host([variant="outlined"]:not(.-disabled).-pressed) .outline { --_form-field-outline-size: 0.125rem; } :host([variant="outlined"]) .subscript { margin-inline: 1rem; width: calc(100% - 2rem); } :host([variant="outlined"]) .content { min-height: calc(3.5rem + ${DesignToken.density.calc(-2)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken.typescale.standard.body.small.fontSize} ); } :host([variant="outlined"][float-label="auto"]:not(.-float-label):not(.-pressed)) .label { margin-top: unset; line-height: calc(3.5rem + ${DesignToken.density.calc(-2)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken.typescale.standard.body.small.fontSize} ); } :host([variant="filled"]) .base { --_select-arrow-margin-top: calc( 0px - calc(1rem / max(calc(0 - calc(var(--md-sys-density-scale, 0) + var(--md-sys-density-scale, 0))), 1)) ); } :host([variant="filled"]) .base::before { content: ""; box-sizing: border-box; position: absolute; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; border-bottom-style: solid; border-width: 0.0625rem; border-radius: var(--m3e-form-field-container-shape, ${DesignToken.shape.corner.extraSmallTop}); border-color: var(--_form-field-outline-color); background-color: var(--_form-field-container-color); } :host([variant="filled"]:not(.-disabled)) .base:hover::before, :host([variant="filled"]:not(.-disabled):focus-within) .base::before, :host([variant="filled"]:not(.-disabled).-pressed) .base::before { border-width: 0.1875rem; } :host([variant="filled"]) .base::after { content: ""; box-sizing: border-box; position: absolute; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--_form-field-hover-container-color); transition: background-color ${DesignToken.motion.duration.short4}; } :host([variant="filled"]) .subscript { margin-inline: 1rem; width: calc(100% - 2rem); } :host([variant="filled"]) .content { padding-top: calc(1.5rem + ${DesignToken.density.calc(-2)}); margin-bottom: 0.5rem; } :host([variant="filled"]) .label { top: calc(0.5rem + ${DesignToken.density.calc(-2)}); } :host([variant="filled"][float-label="auto"]:not(.-float-label):not(.-pressed)) .label { top: 0px; line-height: calc(3.5rem + ${DesignToken.density.calc(-2)} - 0.0625rem); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken.typescale.standard.body.small.fontSize} ); } :host(:not(.-disabled):not(:focus-within):not(.-pressed)) .base:hover { --_form-field-hover-container-color: color-mix( in srgb, var(--m3e-form-field-hover-container-color, ${DesignToken.color.onSurface}) var(--m3e-form-field-hover-container-opacity, 8%), transparent ); } :host(:not(.-disabled):not(.-invalid)) { color: var(--m3e-form-field-color, ${DesignToken.color.onSurface}); } :host([variant="outlined"]:not(.-disabled):not(.-invalid)) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken.color.outline}); } :host([variant="filled"]:not(.-disabled):not(.-invalid)) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken.color.onSurfaceVariant}); } :host([variant="outlined"]:not(.-disabled):not(.-invalid):focus-within) .base, :host([variant="outlined"]:not(.-disabled):not(.-invalid).-pressed) .base, :host([variant="filled"]:not(.-disabled):not(.-invalid):focus-within) .base, :host([variant="filled"]:not(.-disabled):not(.-invalid).-pressed) .base { --_form-field-outline-color: var(--m3e-form-field-focused-outline-color, ${DesignToken.color.primary}); --_form-field-label-color: var(--m3e-form-field-focused-color, ${DesignToken.color.primary}); } :host(:not(.-disabled)) .base { --_form-field-container-color: var( --m3e-form-field-container-color, ${DesignToken.color.surfaceContainerHighest} ); } :host(:not(.-disabled).-invalid) .base { --_form-field-label-color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error}); --_form-field-outline-color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error}); } :host(:not(.-disabled).-invalid) .subscript { color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error}); } :host(.-disabled) { color: color-mix( in srgb, var(--m3e-form-field-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-form-field-disabled-opacity, 38%), transparent ); } :host(.-disabled) .base { --_form-field-container-color: color-mix( in srgb, var(--m3e-form-field-disabled-container-color, ${DesignToken.color.onSurface}) var(--m3e-form-field-disabled-container-opacity, 4%), transparent ); } :host(.-no-animate) *, :host(.-no-animate) *::before, :host(.-no-animate) *::after { transition: none !important; } @media (forced-colors: active) { :host([variant="filled"]) .base::after { transition: none; } :host { --_form-field-outline-color: CanvasText; } :host(.-disabled) { --_form-field-input-color: GrayText; --_form-field-color: GrayText; --_form-field-label-color: GrayText; --_form-field-outline-color: GrayText; } } @media (prefers-reduced-motion) { .base::before, .prefix-text, .suffix-text, .label, .subscript, .outline-start, .outline-notch, .outline-end, .pseudo-label { transition: none !important; } }`;
+        margin-bottom ${DesignToken.motion.duration.short4}`)}; } :host([hide-subscript="auto"]:not(.-invalid):focus-within) .subscript, :host([hide-subscript="auto"]:not(.-invalid).-pressed) .subscript { opacity: 1; margin-top: 0.25rem; margin-bottom: 0; } :host(.-invalid) .hint { display: none; } :host(:not(.-invalid)) .error { display: none; } ::slotted(input), ::slotted(textarea), ::slotted(select) { outline: unset; border: unset; background-color: transparent; box-shadow: none; font-family: inherit; font-size: inherit; line-height: initial; letter-spacing: inherit; color: var(--_form-field-input-color, inherit); flex: 1 1 auto; min-width: 0; padding: unset; } ::slotted(textarea) { scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; } ::slotted(m3e-select), ::slotted(m3e-input-chip-set) { flex: 1 1 auto; min-width: 0; } :host([variant="outlined"]) ::slotted(m3e-input-chip-set) { margin-block: calc(calc(3.5rem + ${DesignToken.density.calc(-2)}) / 4); } :host([float-label="auto"]:not(.-float-label):not(.-pressed)) .label { font-size: inherit; } :host([float-label="auto"]:not(.-float-label).-with-label) .prefix-text, :host([float-label="auto"]:not(.-float-label).-with-label) .suffix-text { opacity: 0; transition: opacity 0s; } .prefix { margin-inline-start: 1rem; } :host(.-with-prefix) .prefix { margin-inline-end: 1rem; margin-inline-start: 0.75rem; } .suffix { margin-inline-end: 1rem; } :host(.-with-suffix) .suffix { margin-inline-start: 0.25rem; margin-inline-end: 0.5rem; } :host(.-with-suffix.-with-select) .suffix { margin-inline-start: unset; } :host(.-with-select) .suffix-text { display: none; } :host([variant="outlined"]) .label { margin-top: calc(0px - var(--_form-field-label-line-height) / 2); } :host([variant="outlined"]) .outline { position: absolute; display: flex; pointer-events: none; left: 0; top: 0; bottom: 0; right: 0; } :host([variant="outlined"]) .pseudo-label { visibility: hidden; margin-inline-end: 0.25rem; font-size: var(--_form-field-label-font-size); line-height: var(--_form-field-label-line-height); letter-spacing: var(--_form-field-label-tracking); max-width: 100%; transition-property: max-width, margin-inline-end; transition-duration: 1ms; } :host([variant="outlined"][float-label="auto"]:not(.-float-label):not(.-pressed)) .pseudo-label { max-width: 0; margin-inline-end: 0px; transition-delay: ${DesignToken.motion.duration.short2}; } :host([variant="outlined"]) .outline-start, :host([variant="outlined"]) .outline-notch, :host([variant="outlined"]) .outline-end { box-sizing: border-box; border-width: var(--_form-field-outline-size, 0.0625rem); border-color: var(--_form-field-outline-color); transition: border-color ${DesignToken.motion.duration.short4}; } :host([variant="outlined"]:not(.-with-label)) .outline-notch { display: none; } :host([variant="outlined"]) .outline-start { min-width: 0.75rem; border-top-style: solid; border-inline-start-style: solid; border-bottom-style: solid; border-start-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall}); border-end-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall}); } :host([variant="outlined"]) .outline-notch { border-bottom-style: solid; } :host([variant="outlined"]) .outline-end { flex-grow: 1; min-width: 1rem; border-top-style: solid; border-inline-end-style: solid; border-bottom-style: solid; border-start-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall}); border-end-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall}); } :host([variant="outlined"].-with-prefix) .outline-start { min-width: calc(1.25rem + var(--_prefix-width, 0px) + 0.25rem); } :host([variant="outlined"]:not(.-disabled)) .base:hover .outline, :host([variant="outlined"]:not(.-disabled):focus-within) .outline, :host([variant="outlined"]:not(.-disabled).-pressed) .outline { --_form-field-outline-size: 0.125rem; } :host([variant="outlined"]) .subscript { margin-inline: 1rem; width: calc(100% - 2rem); } :host([variant="outlined"]) .content { min-height: calc(3.5rem + ${DesignToken.density.calc(-2)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken.typescale.standard.body.small.fontSize} ); } :host([variant="outlined"][float-label="auto"]:not(.-float-label):not(.-pressed)) .label { margin-top: unset; line-height: calc(3.5rem + ${DesignToken.density.calc(-2)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken.typescale.standard.body.small.fontSize} ); } :host([variant="filled"]) .base { --_select-arrow-margin-top: calc( 0px - calc(1rem / max(calc(0 - calc(var(--md-sys-density-scale, 0) + var(--md-sys-density-scale, 0))), 1)) ); } :host([variant="filled"]) .base::before { content: ""; box-sizing: border-box; position: absolute; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; border-bottom-style: solid; border-width: 0.0625rem; border-radius: var(--m3e-form-field-container-shape, ${DesignToken.shape.corner.extraSmallTop}); border-color: var(--_form-field-outline-color); background-color: var(--_form-field-container-color); } :host([variant="filled"]:not(.-disabled)) .base:hover::before, :host([variant="filled"]:not(.-disabled):focus-within) .base::before, :host([variant="filled"]:not(.-disabled).-pressed) .base::before { border-width: 0.1875rem; } :host([variant="filled"]) .base::after { content: ""; box-sizing: border-box; position: absolute; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--_form-field-hover-container-color); transition: background-color ${DesignToken.motion.duration.short4}; } :host([variant="filled"]) .subscript { margin-inline: 1rem; width: calc(100% - 2rem); } :host([variant="filled"]) .content { padding-top: calc(1.5rem + ${DesignToken.density.calc(-2)}); margin-bottom: 0.5rem; } :host([variant="filled"]) .label { top: calc(0.5rem + ${DesignToken.density.calc(-2)}); } :host([variant="filled"][float-label="auto"]:not(.-float-label):not(.-pressed)) .label { top: 0px; line-height: calc(3.5rem + ${DesignToken.density.calc(-2)} - 0.0625rem); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${DesignToken.typescale.standard.body.small.fontSize} ); } :host(:not(.-disabled):not(:focus-within):not(.-pressed)) .base:hover { --_form-field-hover-container-color: color-mix( in srgb, var(--m3e-form-field-hover-container-color, ${DesignToken.color.onSurface}) var(--m3e-form-field-hover-container-opacity, 8%), transparent ); } :host(:not(.-disabled):not(.-invalid)) { color: var(--m3e-form-field-color, ${DesignToken.color.onSurface}); } :host([variant="outlined"]:not(.-disabled):not(.-invalid)) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken.color.outline}); } :host([variant="filled"]:not(.-disabled):not(.-invalid)) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken.color.onSurfaceVariant}); } :host([variant="outlined"]:not(.-disabled):not(.-invalid):focus-within) .base, :host([variant="outlined"]:not(.-disabled):not(.-invalid).-pressed) .base, :host([variant="filled"]:not(.-disabled):not(.-invalid):focus-within) .base, :host([variant="filled"]:not(.-disabled):not(.-invalid).-pressed) .base { --_form-field-outline-color: var(--m3e-form-field-focused-outline-color, ${DesignToken.color.primary}); --_form-field-label-color: var(--m3e-form-field-focused-color, ${DesignToken.color.primary}); } :host(:not(.-disabled)) .base { --_form-field-container-color: var( --m3e-form-field-container-color, ${DesignToken.color.surfaceContainerHighest} ); } :host(:not(.-disabled).-invalid) .base { --_form-field-label-color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error}); --_form-field-outline-color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error}); } :host(:not(.-disabled).-invalid) .subscript { color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error}); } :host(.-disabled) { color: color-mix( in srgb, var(--m3e-form-field-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-form-field-disabled-opacity, 38%), transparent ); } :host(.-disabled) .base { --_form-field-container-color: color-mix( in srgb, var(--m3e-form-field-disabled-container-color, ${DesignToken.color.onSurface}) var(--m3e-form-field-disabled-container-opacity, 4%), transparent ); } :host(.-no-animate) *, :host(.-no-animate) *::before, :host(.-no-animate) *::after { transition: none !important; } @media (forced-colors: active) { :host([variant="filled"]) .base::after { transition: none; } :host { --_form-field-outline-color: CanvasText; } :host(.-disabled) { --_form-field-input-color: GrayText; --_form-field-color: GrayText; --_form-field-label-color: GrayText; --_form-field-outline-color: GrayText; } } @media (prefers-reduced-motion) { .base::before, .prefix-text, .suffix-text, .label, .subscript, .outline-start, .outline-notch, .outline-end, .pseudo-label { transition: none !important; } }`;
 __decorate([e(".base")], M3eFormFieldElement.prototype, "_base", void 0);
 __decorate([e(".prefix")], M3eFormFieldElement.prototype, "_prefix", void 0);
 __decorate([e(".error")], M3eFormFieldElement.prototype, "_error", void 0);