@m3e/web 2.5.3 → 2.5.5

package/dist/form-field.min.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
-import{__classPrivateFieldGet as t,__classPrivateFieldSet as e,__decorate as i}from"tslib";import{LitElement as o,nothing as a,html as s,css as r,unsafeCSS as l}from"lit";import{query as n,state as d,property as f}from"lit/decorators.js";import{ReconnectedCallback as h,AttachInternals as c,MutationController as m,ResizeController as p,FocusController as u,setCustomState as b,PressedController as v,HoverController as g,isReadOnlyMixin as y,hasAssignedNodes as x,hasCustomState as w,interceptProperty as _,getTextContent as $,registerStyleSheet as k,DesignToken as z,customElement as C}from"@m3e/web/core";import{M3eAriaDescriber as S}from"@m3e/web/core/a11y";
+import{__classPrivateFieldGet as t,__classPrivateFieldSet as e,__decorate as i}from"tslib";import{LitElement as s,nothing as a,html as o,css as l,unsafeCSS as r}from"lit";import{query as n,state as d,property as f}from"lit/decorators.js";import{ReconnectedCallback as h,AttachInternals as c,MutationController as m,ResizeController as b,FocusController as p,setCustomState as u,PressedController as v,HoverController as g,isReadOnlyMixin as y,hasAssignedNodes as x,hasCustomState as w,interceptProperty as _,getTextContent as $,registerStyleSheet as k,DesignToken as z,customElement as C}from"@m3e/web/core";import{M3eAriaDescriber as S}from"@m3e/web/core/a11y";
 /**
  * Adapted from Angular Material Form Field Control
  * Source: https://github.com/angular/components/blob/main/src/material/form-field/form-field-control.ts
@@ -19,5 +19,5 @@ import{__classPrivateFieldGet as t,__classPrivateFieldSet as e,__decorate as i}f
  * @license MIT
  * Copyright (c) 2025 Google LLC
  * See LICENSE file in the project root for full license text.
- */var E,T,q,H,N,P,D,A,R,U,V,F,G,I,O,j,B,X,J,K,Q,Y,Z,tt,et,it,ot,at,st,rt;let lt=class extends(h(c(o))){constructor(){super(),E.add(this),T.set(this,null),q.set(this,void 0),H.set(this,()=>t(this,E,"m",it).call(this)),N.set(this,()=>t(this,E,"m",tt).call(this)),P.set(this,new m(this,{target:null,config:{attributeFilter:["disabled","readonly","required"]},callback:()=>this.notifyControlStateChange()})),D.set(this,new p(this,{target:null,callback:()=>t(this,E,"m",Q).call(this)})),A.set(this,new u(this,{target:null,callback:i=>{i=i&&!(t(this,T,"f")?.disabled??1),b(this,"-no-animate",!1),e(this,F,i,"f"),i?b(this,"-float-label",!0):(this._invalid=!(t(this,T,"f")?.checkValidity?.()??1),this.notifyControlStateChange())}})),R.set(this,new m(this,{target:null,config:{childList:!0,subtree:!0},callback:()=>t(this,E,"m",st).call(this)})),U.set(this,new m(this,{target:null,config:{childList:!0,subtree:!0},callback:()=>t(this,E,"m",rt).call(this)})),V.set(this,new v(this,{target:null,callback:e=>b(this,"-pressed",e&&!(t(this,T,"f")?.disabled??1))})),F.set(this,!1),this._pseudoLabel="",this._required=!1,this._invalid=!1,this._validationMessage="",G.set(this,""),I.set(this,""),this.variant="outlined",this.hideRequiredMarker=!1,this.hideSubscript="auto",this.floatLabel="auto",new g(this,{callback:()=>b(this,"-no-animate",!1)})}get menuAnchor(){return this._base}get control(){return t(this,T,"f")}notifyControlStateChange(e=!1){this._required=!0===t(this,T,"f")?.required,b(this,"-required",this._required),b(this,"-disabled",!0===t(this,T,"f")?.disabled),b(this,"-readonly",y(t(this,T,"f"))&&!0===t(this,T,"f").readOnly),"auto"===this.floatLabel&&b(this,"-float-label",t(this,E,"a",O)||t(this,F,"f")),e&&(this._invalid=!(t(this,T,"f")?.checkValidity?.()??1)),b(this,"-invalid",this._invalid),this._validationMessage=t(this,T,"f")?.validationMessage??"",this.isUpdatePending||this.performUpdate()}connectedCallback(){super.connectedCallback(),b(this,"-no-animate",!0)}disconnectedCallback(){super.disconnectedCallback(),t(this,E,"m",ot).call(this,null)}reconnectedCallback(){super.reconnectedCallback(),t(this,E,"m",j).call(this)}firstUpdated(e){super.firstUpdated(e),t(this,E,"m",j).call(this)}update(e){super.update(e),e.has("_invalid")&&t(this,T,"f")&&(t(this,T,"f").ariaInvalid=this._invalid?"true":null,t(this,I,"f")&&(this._invalid?S.describe(t(this,T,"f"),t(this,I,"f")):S.removeDescription(t(this,T,"f"),t(this,I,"f"))))}render(){return s`<div class="base" @click="${t(this,E,"m",Z)}">${"outlined"===this.variant?s`<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?s`&nbsp;*`:a}</div></div><div class="outline-end"></div></div>`:a}<div class="prefix"><slot name="prefix" @slotchange="${t(this,E,"m",J)}"></slot></div><div class="content"><span class="prefix-text"><slot name="prefix-text"></slot></span><span class="input"><slot @slotchange="${t(this,E,"m",Y)}" @change="${t(this,E,"m",et)}"></slot></span><span class="suffix-text"><slot name="suffix-text"></slot></span><span class="label"><slot name="label" @slotchange="${t(this,E,"m",X)}"></slot>${!this.hideRequiredMarker&&this._required?s`<span class="required-marker" aria-hidden="true">&nbsp;*</span>`:a}</span></div><div class="suffix" @click="${t(this,E,"m",B)}" @focusin="${t(this,E,"m",B)}" @focusout="${t(this,E,"m",B)}" @pointerdown="${t(this,E,"m",B)}" @keydown="${t(this,E,"m",B)}" @keyup="${t(this,E,"m",B)}"><slot name="suffix" @slotchange="${t(this,E,"m",K)}"></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>`}};T=new WeakMap,q=new WeakMap,H=new WeakMap,N=new WeakMap,P=new WeakMap,D=new WeakMap,A=new WeakMap,R=new WeakMap,U=new WeakMap,V=new WeakMap,F=new WeakMap,G=new WeakMap,I=new WeakMap,E=new WeakSet,O=function(){return void 0!==t(this,T,"f")?.shouldLabelFloat?!0===t(this,T,"f").shouldLabelFloat:"string"==typeof t(this,T,"f")?.value&&t(this,T,"f").value.length>0},j=function(){t(this,A,"f").observe(this._base),t(this,V,"f").observe(this._base),t(this,R,"f").observe(this._hint),t(this,E,"m",st).call(this),t(this,U,"f").observe(this._error),t(this,E,"m",rt).call(this)},B=function(t){t.stopImmediatePropagation(),t.stopPropagation()},X=function(t){const e=t.target.assignedElements({flatten:!0});b(this,"-with-label",e.length>0),this._pseudoLabel=e[0]?.textContent??""},J=function(e){b(this,"-with-prefix",x(e.target)),t(this,D,"f").observe(this._prefix)},K=function(t){b(this,"-with-suffix",x(t.target))},Q=function(){"outlined"===this.variant&&this._base.style.setProperty("--_prefix-width",`${this._prefix.clientWidth}px`)},Y=function(e){t(this,E,"m",ot).call(this,W(e.target))},Z=function(e){!t(this,T,"f")||t(this,F,"f")||t(this,T,"f").disabled||(t(this,T,"f").onContainerClick?t(this,T,"f").onContainerClick(e):t(this,T,"f").focus())},tt=function(){this._invalid=!0,this.notifyControlStateChange()},et=function(){this._invalid=!(t(this,T,"f")?.checkValidity?.()??1),this.notifyControlStateChange()},it=function(){this._invalid=!1,setTimeout(()=>this.notifyControlStateChange())},ot=function(i){if(t(this,T,"f")!==i&&(t(this,T,"f")&&(t(this,G,"f")&&S.removeDescription(t(this,T,"f"),t(this,G,"f")),t(this,I,"f")&&S.removeDescription(t(this,T,"f"),t(this,I,"f")),t(this,P,"f").unobserve(t(this,T,"f")),t(this,T,"f").removeEventListener("invalid",t(this,N,"f")),t(this,T,"f").form?.removeEventListener("reset",t(this,H,"f")),t(this,q,"f")?.call(this),e(this,q,void 0,"f")),e(this,T,i,"f"),["INPUT","TEXTAREA"].includes(t(this,T,"f")?.tagName??"")?this._base.style.setProperty("--_form-field-cursor","text"):this._base.style.removeProperty("--_form-field-cursor"),b(this,"-with-select","M3E-SELECT"===t(this,T,"f")?.tagName),w(this,"-with-select")&&this._base.style.setProperty("--_form-field-cursor","pointer"),t(this,T,"f"))){t(this,P,"f").observe(t(this,T,"f")),t(this,T,"f").addEventListener("invalid",t(this,N,"f")),t(this,T,"f").form?.addEventListener("reset",t(this,H,"f")),t(this,T,"f").removeAttribute("aria-invalid"),t(this,G,"f")&&S.describe(t(this,T,"f"),t(this,G,"f")),this.notifyControlStateChange();const e=t(this,T,"f").tagName.toLowerCase();e.startsWith("m3e-")&&!customElements.get(e)?customElements.whenDefined(e).then(()=>t(this,E,"m",at).call(this)):t(this,E,"m",at).call(this)}},at=function(){t(this,T,"f")&&e(this,q,_(t(this,T,"f"),"value",{set:(t,e)=>{e(t),this.notifyControlStateChange(!0)}}),"f")},st=function(){const i=$(this._hint,!0);i!==t(this,G,"f")&&(t(this,T,"f")&&t(this,G,"f")&&S.removeDescription(t(this,T,"f"),t(this,G,"f")),e(this,G,i,"f"),t(this,T,"f")&&t(this,G,"f")&&S.describe(t(this,T,"f"),t(this,G,"f")))},rt=function(){const i=$(this._error,!0);i!==t(this,I,"f")&&(t(this,T,"f")&&t(this,I,"f")&&S.removeDescription(t(this,T,"f"),t(this,I,"f")),e(this,I,i,"f"),t(this,T,"f")&&t(this,I,"f")&&this._invalid&&S.describe(t(this,T,"f"),t(this,I,"f")))},k(r`m3e-form-field input::placeholder, m3e-form-field textarea::placeholder { user-select: none; color: currentColor; transition: opacity ${z.motion.duration.extraLong1}; } m3e-form-field[float-label="auto"]:not(:state(-float-label)):state(-with-label) input::placeholder, m3e-form-field[float-label="auto"]:not(:state(-float-label)):state(-with-label) textarea::placeholder { opacity: 0; transition: opacity 0s; } m3e-form-field[variant="outlined"] m3e-input-chip-set { margin-block: calc(calc(3.5rem + ${z.density.calc(-2)}) / 4); } @media (prefers-reduced-motion) { m3e-form-field input::placeholder, m3e-form-field textarea::placeholder { transition: none !important; } }`),lt.styles=r`:host { display: inline-flex; flex-direction: column; vertical-align: middle; font-size: var(--m3e-form-field-font-size, ${z.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-form-field-font-weight, ${z.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-form-field-line-height, ${z.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-form-field-tracking, ${z.typescale.standard.body.large.tracking}); width: var(--m3e-form-field-width, 14.5rem); color: var(--_form-field-color); } :host(:not(:state(-disabled))) .base { cursor: var(--_form-field-cursor); } .base { display: flex; align-items: center; position: relative; min-height: calc(3.5rem + ${z.density.calc(-2)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${z.typescale.standard.body.small.fontSize} ); --_form-field-label-line-height: var( --m3e-form-field-label-line-height, ${z.typescale.standard.body.small.lineHeight} ); } .content { display: flex; align-items: center; position: relative; flex: 1 1 auto; min-width: 0; min-height: var(--m3e-form-field-icon-size, 1.5rem); } .prefix, .suffix { display: flex; align-items: center; position: relative; user-select: none; flex: none; font-size: var(--m3e-form-field-icon-size, 1.5rem); } .prefix-text, .suffix-text { opacity: 1; transition: opacity ${z.motion.duration.extraLong1}; user-select: none; flex: none; } .input { display: inline-flex; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; } .label { display: flex; position: absolute; pointer-events: none; user-select: none; top: 0; left: 0; right: 0; font-size: var(--m3e-form-field-label-font-size, ${z.typescale.standard.body.small.fontSize}); font-weight: var(--m3e-form-field-label-font-weight, ${z.typescale.standard.body.small.fontWeight}); line-height: var(--m3e-form-field-label-line-height, ${z.typescale.standard.body.small.lineHeight}); letter-spacing: var(--m3e-form-field-label-tracking, ${z.typescale.standard.body.small.tracking}); color: var(--_form-field-label-color, inherit); transition: ${l(`top ${z.motion.duration.short4}, \n        font-size ${z.motion.duration.short4}, \n        line-height ${z.motion.duration.short4}`)}; } :host(:state(-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, ${z.typescale.standard.body.small.fontSize}); font-weight: var(--m3e-form-field-subscript-font-weight, ${z.typescale.standard.body.small.fontWeight}); line-height: var(--m3e-form-field-subscript-line-height, ${z.typescale.standard.body.small.lineHeight}); letter-spacing: var(--m3e-form-field-subscript-tracking, ${z.typescale.standard.body.small.tracking}); min-height: var(--m3e-form-field-subscript-line-height, ${z.typescale.standard.body.small.lineHeight}); color: var(--m3e-form-field-subscript-color, ${z.color.onSurfaceVariant}); } .error, .hint { flex: 1 1 auto; } :host([hide-subscript="always"]) .subscript { display: none; } :host([hide-subscript="auto"]:not(:state(-invalid))) .subscript { opacity: 0; margin-top: 0px; margin-bottom: 0.25rem; transition: ${l(`opacity ${z.motion.duration.short4}, \n        margin-top ${z.motion.duration.short4}, \n        margin-bottom ${z.motion.duration.short4}`)}; } :host([hide-subscript="auto"]:not(:state(-invalid)):focus-within) .subscript, :host([hide-subscript="auto"]:not(:state(-invalid)):state(-pressed)) .subscript { opacity: 1; margin-top: 0.25rem; margin-bottom: 0; } :host(:state(-invalid)) .hint { display: none; } :host(:not(:state(-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: inherit; letter-spacing: inherit; color: var(--_form-field-input-color, inherit); flex: 1 1 auto; min-width: 0; padding: unset; } ::slotted(textarea) { scrollbar-width: ${z.scrollbar.thinWidth}; scrollbar-color: ${z.scrollbar.color}; } ::slotted(m3e-select), ::slotted(m3e-input-chip-set) { flex: 1 1 auto; min-width: 0; } :host([float-label="auto"]:not(:state(-float-label)):not(:state(-pressed))) .label { font-size: inherit; } :host([float-label="auto"]:not(:state(-float-label)):state(-with-label)) .prefix-text, :host([float-label="auto"]:not(:state(-float-label)):state(-with-label)) .suffix-text { opacity: 0; transition: opacity 0s; } .prefix { margin-inline-start: 1rem; } :host(:state(-with-prefix)) .prefix { margin-inline-end: 1rem; margin-inline-start: 0.75rem; } .suffix { margin-inline-end: 1rem; } :host(:state(-with-suffix)) .suffix { margin-inline-start: 0.25rem; margin-inline-end: 0.5rem; } :host(:state(-with-suffix):state(-with-select)) .suffix { margin-inline-start: unset; } :host(:state(-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.5rem; 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"]:state(-required):not([hide-required-marker])) .pseudo-label { margin-inline-end: 0.25rem; } :host([variant="outlined"][float-label="auto"]:not(:state(-float-label)):not(:state(-pressed))) .pseudo-label { max-width: 0; margin-inline-end: 0px; transition-delay: ${z.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, 1px); border-color: var(--_form-field-outline-color); transition: border-color ${z.motion.duration.short4}; } :host([variant="outlined"]:not(:state(-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, ${z.shape.corner.extraSmall}); border-end-start-radius: var(--m3e-outlined-form-field-container-shape, ${z.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, ${z.shape.corner.extraSmall}); border-end-end-radius: var(--m3e-outlined-form-field-container-shape, ${z.shape.corner.extraSmall}); } :host([variant="outlined"]:state(-with-prefix)) .outline-start { min-width: calc(1.25rem + var(--_prefix-width, 0px) + 0.25rem); } :host([variant="outlined"]:not(:state(-disabled))) .base:hover .outline, :host([variant="outlined"]:not(:state(-disabled)):focus-within) .outline, :host([variant="outlined"]:not(:state(-disabled)):state(-pressed)) .outline { --_form-field-outline-size: 2px; } :host([variant="outlined"]) .subscript { margin-inline: 1rem; width: calc(100% - 2rem); } :host([variant="outlined"]) .content { min-height: calc(3.5rem + ${z.density.calc(-2)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${z.typescale.standard.body.small.fontSize} ); } :host([variant="outlined"][float-label="auto"]:not(:state(-float-label)):not(:state(-pressed))) .label { margin-top: unset; line-height: calc(3.5rem + ${z.density.calc(-2)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${z.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: 1px; border-radius: var(--m3e-form-field-container-shape, ${z.shape.corner.extraSmallTop}); border-color: var(--_form-field-outline-color); background-color: var(--_form-field-container-color); } :host([variant="filled"]:not(:state(-disabled))) .base:hover::before, :host([variant="filled"]:not(:state(-disabled)):focus-within) .base::before, :host([variant="filled"]:not(:state(-disabled)):state(-pressed)) .base::before { border-width: 3px; } :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 ${z.motion.duration.short4}; } :host([variant="filled"]) .subscript { margin-inline: 1rem; width: calc(100% - 2rem); } :host([variant="filled"]) .content { padding-top: calc(1.5rem + ${z.density.calc(-2)}); margin-bottom: 0.5rem; } :host([variant="filled"]) .label { top: calc(0.5rem + ${z.density.calc(-2)}); } :host([variant="filled"][float-label="auto"]:not(:state(-float-label)):not(:state(-pressed))) .label { top: 0px; line-height: calc(3.5rem + ${z.density.calc(-2)} - 0.0625rem); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${z.typescale.standard.body.small.fontSize} ); } :host(:not(:state(-disabled)):not(:focus-within):not(:state(-pressed))) .base:hover { --_form-field-hover-container-color: color-mix( in srgb, var(--m3e-form-field-hover-container-color, ${z.color.onSurface}) var(--m3e-form-field-hover-container-opacity, 8%), transparent ); } :host(:not(:state(-disabled)):not(:state(-invalid))) { color: var(--m3e-form-field-color, ${z.color.onSurface}); } :host([variant="outlined"]:not(:state(-disabled)):not(:state(-invalid))) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${z.color.outline}); } :host([variant="filled"]:not(:state(-disabled)):not(:state(-invalid))) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${z.color.onSurfaceVariant}); } :host([variant="outlined"]:not(:state(-disabled)):not(:state(-invalid)):focus-within) .base, :host([variant="outlined"]:not(:state(-disabled)):not(:state(-invalid)):state(-pressed)) .base, :host([variant="filled"]:not(:state(-disabled)):not(:state(-invalid)):focus-within) .base, :host([variant="filled"]:not(:state(-disabled)):not(:state(-invalid)):state(-pressed)) .base { --_form-field-outline-color: var(--m3e-form-field-focused-outline-color, ${z.color.primary}); --_form-field-label-color: var(--m3e-form-field-focused-color, ${z.color.primary}); } :host(:not(:state(-disabled))) .base { --_form-field-container-color: var( --m3e-form-field-container-color, ${z.color.surfaceContainerHighest} ); } :host(:not(:state(-disabled)):state(-invalid)) .base { --_form-field-label-color: var(--m3e-form-field-invalid-color, ${z.color.error}); --_form-field-outline-color: var(--m3e-form-field-invalid-color, ${z.color.error}); } :host(:not(:state(-disabled)):state(-invalid)) .subscript { color: var(--m3e-form-field-invalid-color, ${z.color.error}); } :host(:state(-disabled)) { color: color-mix( in srgb, var(--m3e-form-field-disabled-color, ${z.color.onSurface}) var(--m3e-form-field-disabled-opacity, 38%), transparent ); } :host(:state(-disabled)) .base { --_form-field-container-color: color-mix( in srgb, var(--m3e-form-field-disabled-container-color, ${z.color.onSurface}) var(--m3e-form-field-disabled-container-opacity, 4%), transparent ); } :host(:state(-no-animate)) *, :host(:state(-no-animate)) *::before, :host(:state(-no-animate)) *::after { transition: none !important; } @media (forced-colors: active) { :host([variant="filled"]) .base::after { transition: none; } :host { --_form-field-outline-color: CanvasText; } :host(:state(-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; } }`,i([n(".base")],lt.prototype,"_base",void 0),i([n(".prefix")],lt.prototype,"_prefix",void 0),i([n(".error")],lt.prototype,"_error",void 0),i([n(".hint")],lt.prototype,"_hint",void 0),i([d()],lt.prototype,"_pseudoLabel",void 0),i([d()],lt.prototype,"_required",void 0),i([d()],lt.prototype,"_invalid",void 0),i([d()],lt.prototype,"_validationMessage",void 0),i([f({reflect:!0})],lt.prototype,"variant",void 0),i([f({attribute:"hide-required-marker",type:Boolean,reflect:!0})],lt.prototype,"hideRequiredMarker",void 0),i([f({attribute:"hide-subscript",reflect:!0})],lt.prototype,"hideSubscript",void 0),i([f({attribute:"float-label",reflect:!0})],lt.prototype,"floatLabel",void 0),lt=i([C("m3e-form-field")],lt);export{lt as M3eFormFieldElement,W as findFormFieldControl,L as isFormFieldControl};
+ */var E,q,T,H,N,P,D,A,R,U,V,F,G,I,O,j,B,X,J,K,Q,Y,Z,tt,et,it,st,at,ot,lt;let rt=class extends(h(c(s))){constructor(){super(),E.add(this),q.set(this,null),T.set(this,void 0),H.set(this,()=>t(this,E,"m",it).call(this)),N.set(this,()=>t(this,E,"m",tt).call(this)),P.set(this,new m(this,{target:null,config:{attributeFilter:["disabled","readonly","required"]},callback:()=>this.notifyControlStateChange()})),D.set(this,new b(this,{target:null,callback:()=>t(this,E,"m",Q).call(this)})),A.set(this,new p(this,{target:null,callback:i=>{i=i&&!(t(this,q,"f")?.disabled??1),u(this,"--no-animate",!1),e(this,F,i,"f"),i?u(this,"--float-label",!0):(this._invalid=!(t(this,q,"f")?.checkValidity?.()??1),this.notifyControlStateChange())}})),R.set(this,new m(this,{target:null,config:{childList:!0,subtree:!0},callback:()=>t(this,E,"m",ot).call(this)})),U.set(this,new m(this,{target:null,config:{childList:!0,subtree:!0},callback:()=>t(this,E,"m",lt).call(this)})),V.set(this,new v(this,{target:null,callback:e=>u(this,"--pressed",e&&!(t(this,q,"f")?.disabled??1))})),F.set(this,!1),this._pseudoLabel="",this._required=!1,this._invalid=!1,this._validationMessage="",G.set(this,""),I.set(this,""),this.variant="outlined",this.hideRequiredMarker=!1,this.hideSubscript="auto",this.floatLabel="auto",new g(this,{callback:()=>u(this,"--no-animate",!1)})}get menuAnchor(){return this._base}get control(){return t(this,q,"f")}notifyControlStateChange(e=!1){this._required=!0===t(this,q,"f")?.required,u(this,"--required",this._required),u(this,"--disabled",!0===t(this,q,"f")?.disabled),u(this,"--readonly",y(t(this,q,"f"))&&!0===t(this,q,"f").readOnly),"auto"===this.floatLabel&&u(this,"--float-label",t(this,E,"a",O)||t(this,F,"f")),e&&(this._invalid=!(t(this,q,"f")?.checkValidity?.()??1)),u(this,"--invalid",this._invalid),this._validationMessage=t(this,q,"f")?.validationMessage??"",this.isUpdatePending||this.performUpdate()}connectedCallback(){super.connectedCallback(),u(this,"--no-animate",!0)}disconnectedCallback(){super.disconnectedCallback(),t(this,E,"m",st).call(this,null)}reconnectedCallback(){super.reconnectedCallback(),t(this,E,"m",j).call(this)}firstUpdated(e){super.firstUpdated(e),t(this,E,"m",j).call(this)}update(e){super.update(e),e.has("_invalid")&&t(this,q,"f")&&(t(this,q,"f").ariaInvalid=this._invalid?"true":null,t(this,I,"f")&&(this._invalid?S.describe(t(this,q,"f"),t(this,I,"f")):S.removeDescription(t(this,q,"f"),t(this,I,"f"))))}render(){return o`<div class="base" @click="${t(this,E,"m",Z)}">${"outlined"===this.variant?o`<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?o`&nbsp;*`:a}</div></div><div class="outline-end"></div></div>`:a}<div class="prefix"><slot name="prefix" @slotchange="${t(this,E,"m",J)}"></slot></div><div class="content"><span class="prefix-text"><slot name="prefix-text"></slot></span><span class="input"><slot @slotchange="${t(this,E,"m",Y)}" @change="${t(this,E,"m",et)}"></slot></span><span class="suffix-text"><slot name="suffix-text"></slot></span><span class="label"><slot name="label" @slotchange="${t(this,E,"m",X)}"></slot>${!this.hideRequiredMarker&&this._required?o`<span class="required-marker" aria-hidden="true">&nbsp;*</span>`:a}</span></div><div class="suffix" @click="${t(this,E,"m",B)}" @focusin="${t(this,E,"m",B)}" @focusout="${t(this,E,"m",B)}" @pointerdown="${t(this,E,"m",B)}" @keydown="${t(this,E,"m",B)}" @keyup="${t(this,E,"m",B)}"><slot name="suffix" @slotchange="${t(this,E,"m",K)}"></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>`}};q=new WeakMap,T=new WeakMap,H=new WeakMap,N=new WeakMap,P=new WeakMap,D=new WeakMap,A=new WeakMap,R=new WeakMap,U=new WeakMap,V=new WeakMap,F=new WeakMap,G=new WeakMap,I=new WeakMap,E=new WeakSet,O=function(){return void 0!==t(this,q,"f")?.shouldLabelFloat?!0===t(this,q,"f").shouldLabelFloat:"string"==typeof t(this,q,"f")?.value&&t(this,q,"f").value.length>0},j=function(){t(this,A,"f").observe(this._base),t(this,V,"f").observe(this._base),t(this,R,"f").observe(this._hint),t(this,E,"m",ot).call(this),t(this,U,"f").observe(this._error),t(this,E,"m",lt).call(this)},B=function(t){t.stopImmediatePropagation(),t.stopPropagation()},X=function(t){const e=t.target.assignedElements({flatten:!0});u(this,"--with-label",e.length>0),this._pseudoLabel=e[0]?.textContent??""},J=function(e){u(this,"--with-prefix",x(e.target)),t(this,D,"f").observe(this._prefix)},K=function(t){u(this,"--with-suffix",x(t.target))},Q=function(){"outlined"===this.variant&&this._base.style.setProperty("--_prefix-width",`${this._prefix.clientWidth}px`)},Y=function(e){t(this,E,"m",st).call(this,W(e.target))},Z=function(e){!t(this,q,"f")||t(this,F,"f")||t(this,q,"f").disabled||(t(this,q,"f").onContainerClick?t(this,q,"f").onContainerClick(e):t(this,q,"f").focus())},tt=function(){this._invalid=!0,this.notifyControlStateChange()},et=function(){this._invalid=!(t(this,q,"f")?.checkValidity?.()??1),this.notifyControlStateChange()},it=function(){this._invalid=!1,setTimeout(()=>this.notifyControlStateChange())},st=function(i){if(t(this,q,"f")!==i&&(t(this,q,"f")&&(t(this,G,"f")&&S.removeDescription(t(this,q,"f"),t(this,G,"f")),t(this,I,"f")&&S.removeDescription(t(this,q,"f"),t(this,I,"f")),t(this,P,"f").unobserve(t(this,q,"f")),t(this,q,"f").removeEventListener("invalid",t(this,N,"f")),t(this,q,"f").form?.removeEventListener("reset",t(this,H,"f")),t(this,T,"f")?.call(this),e(this,T,void 0,"f")),e(this,q,i,"f"),["INPUT","TEXTAREA"].includes(t(this,q,"f")?.tagName??"")?this._base.style.setProperty("--_form-field-cursor","text"):this._base.style.removeProperty("--_form-field-cursor"),u(this,"--with-select","M3E-SELECT"===t(this,q,"f")?.tagName),w(this,"--with-select")&&this._base.style.setProperty("--_form-field-cursor","pointer"),t(this,q,"f"))){t(this,P,"f").observe(t(this,q,"f")),t(this,q,"f").addEventListener("invalid",t(this,N,"f")),t(this,q,"f").form?.addEventListener("reset",t(this,H,"f")),t(this,q,"f").removeAttribute("aria-invalid"),t(this,G,"f")&&S.describe(t(this,q,"f"),t(this,G,"f")),this.notifyControlStateChange();const e=t(this,q,"f").tagName.toLowerCase();e.startsWith("m3e-")&&!customElements.get(e)?customElements.whenDefined(e).then(()=>t(this,E,"m",at).call(this)):t(this,E,"m",at).call(this)}},at=function(){t(this,q,"f")&&e(this,T,_(t(this,q,"f"),"value",{set:(t,e)=>{e(t),this.notifyControlStateChange(!0)}}),"f")},ot=function(){const i=$(this._hint,!0);i!==t(this,G,"f")&&(t(this,q,"f")&&t(this,G,"f")&&S.removeDescription(t(this,q,"f"),t(this,G,"f")),e(this,G,i,"f"),t(this,q,"f")&&t(this,G,"f")&&S.describe(t(this,q,"f"),t(this,G,"f")))},lt=function(){const i=$(this._error,!0);i!==t(this,I,"f")&&(t(this,q,"f")&&t(this,I,"f")&&S.removeDescription(t(this,q,"f"),t(this,I,"f")),e(this,I,i,"f"),t(this,q,"f")&&t(this,I,"f")&&this._invalid&&S.describe(t(this,q,"f"),t(this,I,"f")))},k(l`m3e-form-field input::placeholder, m3e-form-field textarea::placeholder { user-select: none; color: currentColor; transition: opacity ${z.motion.duration.extraLong1}; } m3e-form-field[float-label="auto"]:not(:is(:state(--float-label), :--float-label)):is( :state(--with-label), :--with-label ) input::placeholder, m3e-form-field[float-label="auto"]:not(:is(:state(--float-label), :--float-label)):is( :state(--with-label), :--with-label ) textarea::placeholder { opacity: 0; transition: opacity 0s; } m3e-form-field[variant="outlined"] m3e-input-chip-set { margin-block: calc(calc(3.5rem + ${z.density.calc(-2)}) / 4); } @media (prefers-reduced-motion) { m3e-form-field input::placeholder, m3e-form-field textarea::placeholder { transition: none !important; } }`),rt.styles=l`:host { display: inline-flex; flex-direction: column; vertical-align: middle; font-size: var(--m3e-form-field-font-size, ${z.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-form-field-font-weight, ${z.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-form-field-line-height, ${z.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-form-field-tracking, ${z.typescale.standard.body.large.tracking}); width: var(--m3e-form-field-width, 14.5rem); color: var(--_form-field-color); } :host(:not(:is(:state(--disabled), :--disabled))) .base { cursor: var(--_form-field-cursor); } .base { display: flex; align-items: center; position: relative; min-height: calc(3.5rem + ${z.density.calc(-2)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${z.typescale.standard.body.small.fontSize} ); --_form-field-label-line-height: var( --m3e-form-field-label-line-height, ${z.typescale.standard.body.small.lineHeight} ); } .content { display: flex; align-items: center; position: relative; flex: 1 1 auto; min-width: 0; min-height: var(--m3e-form-field-icon-size, 1.5rem); } .prefix, .suffix { display: flex; align-items: center; position: relative; user-select: none; flex: none; font-size: var(--m3e-form-field-icon-size, 1.5rem); } .prefix-text, .suffix-text { opacity: 1; transition: opacity ${z.motion.duration.extraLong1}; user-select: none; flex: none; } .input { display: inline-flex; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; } .label { display: flex; position: absolute; pointer-events: none; user-select: none; top: 0; left: 0; right: 0; font-size: var(--m3e-form-field-label-font-size, ${z.typescale.standard.body.small.fontSize}); font-weight: var(--m3e-form-field-label-font-weight, ${z.typescale.standard.body.small.fontWeight}); line-height: var(--m3e-form-field-label-line-height, ${z.typescale.standard.body.small.lineHeight}); letter-spacing: var(--m3e-form-field-label-tracking, ${z.typescale.standard.body.small.tracking}); color: var(--_form-field-label-color, inherit); transition: ${r(`top ${z.motion.duration.short4}, \n        font-size ${z.motion.duration.short4}, \n        line-height ${z.motion.duration.short4}`)}; } :host(:is(:state(--with-select), :--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, ${z.typescale.standard.body.small.fontSize}); font-weight: var(--m3e-form-field-subscript-font-weight, ${z.typescale.standard.body.small.fontWeight}); line-height: var(--m3e-form-field-subscript-line-height, ${z.typescale.standard.body.small.lineHeight}); letter-spacing: var(--m3e-form-field-subscript-tracking, ${z.typescale.standard.body.small.tracking}); min-height: var(--m3e-form-field-subscript-line-height, ${z.typescale.standard.body.small.lineHeight}); color: var(--m3e-form-field-subscript-color, ${z.color.onSurfaceVariant}); } .error, .hint { flex: 1 1 auto; } :host([hide-subscript="always"]) .subscript { display: none; } :host([hide-subscript="auto"]:not(:is(:state(--invalid), :--invalid))) .subscript { opacity: 0; margin-top: 0px; margin-bottom: 0.25rem; transition: ${r(`opacity ${z.motion.duration.short4}, \n        margin-top ${z.motion.duration.short4}, \n        margin-bottom ${z.motion.duration.short4}`)}; } :host([hide-subscript="auto"]:not(:is(:state(--invalid), :--invalid)):focus-within) .subscript, :host([hide-subscript="auto"]:not(:is(:state(--invalid), :--invalid)):is(:state(--pressed), :--pressed)) .subscript { opacity: 1; margin-top: 0.25rem; margin-bottom: 0; } :host(:is(:state(--invalid), :--invalid)) .hint { display: none; } :host(:not(:is(:state(--invalid), :--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: inherit; letter-spacing: inherit; color: var(--_form-field-input-color, inherit); flex: 1 1 auto; min-width: 0; padding: unset; } ::slotted(textarea) { scrollbar-width: ${z.scrollbar.thinWidth}; scrollbar-color: ${z.scrollbar.color}; } ::slotted(m3e-select), ::slotted(m3e-input-chip-set) { flex: 1 1 auto; min-width: 0; } :host([float-label="auto"]:not(:is(:state(--float-label), :--float-label)):not(:is(:state(--pressed), :--pressed))) .label { font-size: inherit; } :host([float-label="auto"]:not(:is(:state(--float-label), :--float-label)):is(:state(--with-label), :--with-label)) .prefix-text, :host([float-label="auto"]:not(:is(:state(--float-label), :--float-label)):is(:state(--with-label), :--with-label)) .suffix-text { opacity: 0; transition: opacity 0s; } .prefix { margin-inline-start: 1rem; } :host(:is(:state(--with-prefix), :--with-prefix)) .prefix { margin-inline-end: 1rem; margin-inline-start: 0.75rem; } .suffix { margin-inline-end: 1rem; } :host(:is(:state(--with-suffix), :--with-suffix)) .suffix { margin-inline-start: 0.25rem; margin-inline-end: 0.5rem; } :host(:is(:state(--with-suffix), :--with-suffix):is(:state(--with-select), :--with-select)) .suffix { margin-inline-start: unset; } :host(:is(:state(--with-select), :--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.5rem; 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"]:is(:state(--required), :--required):not([hide-required-marker])) .pseudo-label { margin-inline-end: 0.25rem; } :host( [variant="outlined"][float-label="auto"]:not(:is(:state(--float-label), :--float-label)):not( :is(:state(--pressed), :--pressed) ) ) .pseudo-label { max-width: 0; margin-inline-end: 0px; transition-delay: ${z.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, 1px); border-color: var(--_form-field-outline-color); transition: border-color ${z.motion.duration.short4}; } :host([variant="outlined"]:not(:is(:state(--with-label), :--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, ${z.shape.corner.extraSmall}); border-end-start-radius: var(--m3e-outlined-form-field-container-shape, ${z.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, ${z.shape.corner.extraSmall}); border-end-end-radius: var(--m3e-outlined-form-field-container-shape, ${z.shape.corner.extraSmall}); } :host([variant="outlined"]:is(:state(--with-prefix), :--with-prefix)) .outline-start { min-width: calc(1.25rem + var(--_prefix-width, 0px) + 0.25rem); } :host([variant="outlined"]:not(:is(:state(--disabled), :--disabled))) .base:hover .outline, :host([variant="outlined"]:not(:is(:state(--disabled), :--disabled)):focus-within) .outline, :host([variant="outlined"]:not(:is(:state(--disabled), :--disabled)):is(:state(--pressed), :--pressed)) .outline { --_form-field-outline-size: 2px; } :host([variant="outlined"]) .subscript { margin-inline: 1rem; width: calc(100% - 2rem); } :host([variant="outlined"]) .content { min-height: calc(3.5rem + ${z.density.calc(-2)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${z.typescale.standard.body.small.fontSize} ); } :host( [variant="outlined"][float-label="auto"]:not(:is(:state(--float-label), :--float-label)):not( :is(:state(--pressed), :--pressed) ) ) .label { margin-top: unset; line-height: calc(3.5rem + ${z.density.calc(-2)}); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${z.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: 1px; border-radius: var(--m3e-form-field-container-shape, ${z.shape.corner.extraSmallTop}); border-color: var(--_form-field-outline-color); background-color: var(--_form-field-container-color); } :host([variant="filled"]:not(:is(:state(--disabled), :--disabled))) .base:hover::before, :host([variant="filled"]:not(:is(:state(--disabled), :--disabled)):focus-within) .base::before, :host([variant="filled"]:not(:is(:state(--disabled), :--disabled)):is(:state(--pressed), :--pressed)) .base::before { border-width: 3px; } :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 ${z.motion.duration.short4}; } :host([variant="filled"]) .subscript { margin-inline: 1rem; width: calc(100% - 2rem); } :host([variant="filled"]) .content { padding-top: calc(1.5rem + ${z.density.calc(-2)}); margin-bottom: 0.5rem; } :host([variant="filled"]) .label { top: calc(0.5rem + ${z.density.calc(-2)}); } :host( [variant="filled"][float-label="auto"]:not(:is(:state(--float-label), :--float-label)):not( :is(:state(--pressed), :--pressed) ) ) .label { top: 0px; line-height: calc(3.5rem + ${z.density.calc(-2)} - 0.0625rem); --_form-field-label-font-size: var( --m3e-form-field-label-font-size, ${z.typescale.standard.body.small.fontSize} ); } :host(:not(:is(:state(--disabled), :--disabled)):not(:focus-within):not(:is(:state(--pressed), :--pressed))) .base:hover { --_form-field-hover-container-color: color-mix( in srgb, var(--m3e-form-field-hover-container-color, ${z.color.onSurface}) var(--m3e-form-field-hover-container-opacity, 8%), transparent ); } :host(:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid))) { color: var(--m3e-form-field-color, ${z.color.onSurface}); } :host([variant="outlined"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid))) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${z.color.outline}); } :host([variant="filled"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid))) .base { --_form-field-outline-color: var(--m3e-form-field-outline-color, ${z.color.onSurfaceVariant}); } :host( [variant="outlined"]:not(:is(:state(--disabled), :--disabled)):not( :is(:state(--invalid), :--invalid) ):focus-within ) .base, :host( [variant="outlined"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid)):is( :state(--pressed), :--pressed ) ) .base, :host( [variant="filled"]:not(:is(:state(--disabled), :--disabled)):not( :is(:state(--invalid), :--invalid) ):focus-within ) .base, :host( [variant="filled"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid)):is( :state(--pressed), :--pressed ) ) .base { --_form-field-outline-color: var(--m3e-form-field-focused-outline-color, ${z.color.primary}); --_form-field-label-color: var(--m3e-form-field-focused-color, ${z.color.primary}); } :host(:not(:is(:state(--disabled), :--disabled))) .base { --_form-field-container-color: var( --m3e-form-field-container-color, ${z.color.surfaceContainerHighest} ); } :host(:not(:is(:state(--disabled), :--disabled)):is(:state(--invalid), :--invalid)) .base { --_form-field-label-color: var(--m3e-form-field-invalid-color, ${z.color.error}); --_form-field-outline-color: var(--m3e-form-field-invalid-color, ${z.color.error}); } :host(:not(:is(:state(--disabled), :--disabled)):is(:state(--invalid), :--invalid)) .subscript { color: var(--m3e-form-field-invalid-color, ${z.color.error}); } :host(:is(:state(--disabled), :--disabled)) { color: color-mix( in srgb, var(--m3e-form-field-disabled-color, ${z.color.onSurface}) var(--m3e-form-field-disabled-opacity, 38%), transparent ); } :host(:is(:state(--disabled), :--disabled)) .base { --_form-field-container-color: color-mix( in srgb, var(--m3e-form-field-disabled-container-color, ${z.color.onSurface}) var(--m3e-form-field-disabled-container-opacity, 4%), transparent ); } :host(:is(:state(--no-animate), :--no-animate)) *, :host(:is(:state(--no-animate), :--no-animate)) *::before, :host(:is(:state(--no-animate), :--no-animate)) *::after { transition: none !important; } @media (forced-colors: active) { :host([variant="filled"]) .base::after { transition: none; } :host { --_form-field-outline-color: CanvasText; } :host(:is(:state(--disabled), :--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; } }`,i([n(".base")],rt.prototype,"_base",void 0),i([n(".prefix")],rt.prototype,"_prefix",void 0),i([n(".error")],rt.prototype,"_error",void 0),i([n(".hint")],rt.prototype,"_hint",void 0),i([d()],rt.prototype,"_pseudoLabel",void 0),i([d()],rt.prototype,"_required",void 0),i([d()],rt.prototype,"_invalid",void 0),i([d()],rt.prototype,"_validationMessage",void 0),i([f({reflect:!0})],rt.prototype,"variant",void 0),i([f({attribute:"hide-required-marker",type:Boolean,reflect:!0})],rt.prototype,"hideRequiredMarker",void 0),i([f({attribute:"hide-subscript",reflect:!0})],rt.prototype,"hideSubscript",void 0),i([f({attribute:"float-label",reflect:!0})],rt.prototype,"floatLabel",void 0),rt=i([C("m3e-form-field")],rt);export{rt as M3eFormFieldElement,W as findFormFieldControl,L as isFormFieldControl};
 //# sourceMappingURL=form-field.min.js.map

package/dist/form-field.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-field.min.js","sources":["../../src/form-field/FormFieldControl.ts","../../src/form-field/FormFieldElement.ts"],"sourcesContent":["/**\r\n * Adapted from Angular Material Form Field Control\r\n * Source: https://github.com/angular/components/blob/main/src/material/form-field/form-field-control.ts\r\n *\r\n * @license MIT\r\n * Copyright (c) 2025 Google LLC\r\n * See LICENSE file in the project root for full license text.\r\n */\r\n\r\n/** An interface which allows a control to work inside of a `M3eFormField`. */\r\nexport interface FormFieldControl extends HTMLElement {\r\n  /** A value indicating whether the control is disabled. */\r\n  disabled: boolean;\r\n\r\n  /** The value of the control. */\r\n  value?: unknown;\r\n\r\n  /** A value indicating whether the control is required. */\r\n  required?: boolean;\r\n\r\n  /** A value indicated whether the content of the control is read-only. */\r\n  readonly?: boolean;\r\n\r\n  /** A value indicating whether the form field's label should try to float. */\r\n  readonly shouldLabelFloat?: boolean;\r\n\r\n  /** The error message that would be displayed if the user submits the form, or an empty string if no error message. */\r\n  readonly validationMessage?: string;\r\n\r\n  /** The `HTMLFormElement` associated with this element. */\r\n  readonly form?: HTMLFormElement | null;\r\n\r\n  /**\r\n   * Handles the click event on the control's container.\r\n   * @param {MouseEvent} event The `MouseEvent`.\r\n   */\r\n  onContainerClick?: (event: MouseEvent) => void;\r\n\r\n  /**\r\n   * Returns `true` if the element has no validity problems; otherwise,\r\n   * returns `false`, fires an invalid event.\r\n   */\r\n  checkValidity?: () => boolean;\r\n}\r\n\r\nconst KNOWN_FORM_FIELD_TAGS = [\"m3e-input-chip-set\", \"m3e-select\"];\r\n\r\n/**\r\n * Determines whether a value is a `FormFieldControl`.\r\n * @param {unknown} value The value to test.\r\n * @returns {value is FormFieldControl} A value indicating whether `value` is a `FormFieldControl`.\r\n */\r\nexport function isFormFieldControl(value: unknown): value is FormFieldControl {\r\n  return (\r\n    value instanceof HTMLElement &&\r\n    (value instanceof HTMLInputElement ||\r\n      value instanceof HTMLTextAreaElement ||\r\n      value instanceof HTMLSelectElement ||\r\n      KNOWN_FORM_FIELD_TAGS.includes(value.tagName.toLowerCase()))\r\n  );\r\n}\r\n\r\n/**\r\n * Locates the first `FormFieldControl` in a given slot.\r\n * @param {HTMLSlotElement} slot The slot in which to locate a `FormFieldControl`.\r\n * @returns {FormFieldControl | null} The `FormFieldControl` located in `slot`.\r\n */\r\nexport function findFormFieldControl(slot: HTMLSlotElement): FormFieldControl | null {\r\n  for (const element of slot.assignedElements({ flatten: true })) {\r\n    if (isFormFieldControl(element)) {\r\n      return element;\r\n    }\r\n\r\n    const walker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT);\r\n    while (walker.nextNode()) {\r\n      if (isFormFieldControl(walker.currentNode)) {\r\n        return walker.currentNode;\r\n      }\r\n    }\r\n  }\r\n\r\n  return null;\r\n}\r\n","/**\r\n * Adapted from Angular Material Form Field\r\n * Source: https://github.com/angular/components/blob/main/src/material/form-field/form-field.ts\r\n *\r\n * @license MIT\r\n * Copyright (c) 2025 Google LLC\r\n * See LICENSE file in the project root for full license text.\r\n */\r\n\r\nimport { css, CSSResultGroup, html, LitElement, nothing, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  FocusController,\r\n  getTextContent,\r\n  hasAssignedNodes,\r\n  hasCustomState,\r\n  HoverController,\r\n  interceptProperty,\r\n  isReadOnlyMixin,\r\n  MutationController,\r\n  PressedController,\r\n  ReconnectedCallback,\r\n  registerStyleSheet,\r\n  ResizeController,\r\n  setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3eAriaDescriber } from \"@m3e/web/core/a11y\";\r\n\r\nimport { findFormFieldControl, FormFieldControl } from \"./FormFieldControl\";\r\nimport { FormFieldVariant } from \"./FormFieldVariant\";\r\nimport { HideSubscriptType } from \"./HideSubscriptType\";\r\nimport { FloatLabelType } from \"./FloatLabelType\";\r\n\r\n/**\r\n * A container for form controls that applies Material Design styling and behavior.\r\n *\r\n * @description\r\n * The `m3e-form-field` component is a semantic, expressive container for form controls that anchors\r\n * label behavior, subscript messaging, and variant-specific layout. Designed according to Material Design 3\r\n * guidelines, it supports two visual variants—`outlined` and `filled`—each with dynamic elevation,\r\n * shape transitions, and adaptive color theming. The component responds to control state changes\r\n * (focus, hover, press, disabled, invalid) with smooth motion and semantic clarity, ensuring\r\n * visual hierarchy and emotional resonance.\r\n\r\n * The component is accessible by default, with ARIA annotations, contrast-safe color tokens,\r\n * and dynamic descriptions for hint and error messaging. It supports prefix and suffix content,\r\n * floating labels, and adaptive subscript visibility. When hosting a control with validation,\r\n * error messages are surfaced with `aria-invalid` and described for assistive technology.\r\n\r\n * Native form controls may not expose full state or messaging on their own. `m3e-form-field` bridges\r\n * these gaps by coordinating label floating, container styling, and subscript feedback.\r\n *\r\n * @example\r\n * The following example illustrates a basic usage of the `m3e-form-field`.\r\n * ```html\r\n * <m3e-form-field>\r\n *  <label slot=\"label\" for=\"field\">Text field</label>\r\n *  <input id=\"field\" />\r\n * </m3e-form-field>\r\n * ```\r\n * \r\n * @tag m3e-form-field\r\n *\r\n * @slot - Renders the control of the field.\r\n * @slot prefix - Renders content before the fields's control.\r\n * @slot prefix-text - Renders text before the fields's control.\r\n * @slot suffix - Renders content after the fields's control.\r\n * @slot suffix-text - Renders text after the fields's control.\r\n * @slot hint - Renders hint text in the fields's subscript, when the control is valid.\r\n * @slot error - Renders error text in the fields's subscript, when the control is invalid.\r\n *\r\n * @attr float-label - Specifies whether the label should float always or only when necessary.\r\n * @attr hide-required-marker - Whether the required marker should be hidden.\r\n * @attr hide-subscript - Whether subscript content is hidden.\r\n * @attr variant - The appearance variant of the field.\r\n *\r\n * @cssprop --m3e-form-field-font-size - Font size for the form field container text.\r\n * @cssprop --m3e-form-field-font-weight - Font weight for the form field container text.\r\n * @cssprop --m3e-form-field-line-height - Line height for the form field container text.\r\n * @cssprop --m3e-form-field-tracking - Letter spacing for the form field container text.\r\n * @cssprop --m3e-form-field-label-font-size - Font size for the floating label.\r\n * @cssprop --m3e-form-field-label-font-weight - Font weight for the floating label.\r\n * @cssprop --m3e-form-field-label-line-height - Line height for the floating label.\r\n * @cssprop --m3e-form-field-label-tracking - Letter spacing for the floating label.\r\n * @cssprop --m3e-form-field-subscript-font-size - Font size for hint and error text.\r\n * @cssprop --m3e-form-field-subscript-font-weight - Font weight for hint and error text.\r\n * @cssprop --m3e-form-field-subscript-line-height - Line height for hint and error text.\r\n * @cssprop --m3e-form-field-subscript-tracking - Letter spacing for hint and error text.\r\n * @cssprop --m3e-form-field-color - Text color for the form field container.\r\n * @cssprop --m3e-form-field-subscript-color - Color for hint and error text.\r\n * @cssprop --m3e-form-field-invalid-color - Color used when the control is invalid.\r\n * @cssprop --m3e-form-field-focused-outline-color - Outline color when focused.\r\n * @cssprop --m3e-form-field-focused-color - Label color when focused.\r\n * @cssprop --m3e-form-field-outline-color - Outline color in outlined variant.\r\n * @cssprop --m3e-form-field-container-color - Background color in filled variant.\r\n * @cssprop --m3e-form-field-hover-container-color - Hover background color in filled variant.\r\n * @cssprop --m3e-form-field-width - Width of the form field container.\r\n * @cssprop --m3e-form-field-icon-size - Size of prefix and suffix icons.\r\n * @cssprop --m3e-outlined-form-field-container-shape - Corner radius for outlined container.\r\n * @cssprop --m3e-form-field-container-shape - Corner radius for filled container.\r\n * @cssprop --m3e-form-field-hover-container-opacity - Opacity for hover background in filled variant.\r\n * @cssprop --m3e-form-field-disabled-opacity - Opacity for disabled text.\r\n * @cssprop --m3e-form-field-disabled-container-opacity - Opacity for disabled container background.\r\n */\r\n@customElement(\"m3e-form-field\")\r\nexport class M3eFormFieldElement extends ReconnectedCallback(AttachInternals(LitElement)) {\r\n  static {\r\n    registerStyleSheet(css`\r\n      m3e-form-field input::placeholder,\r\n      m3e-form-field textarea::placeholder {\r\n        user-select: none;\r\n        color: currentColor;\r\n        transition: opacity ${DesignToken.motion.duration.extraLong1};\r\n      }\r\n      m3e-form-field[float-label=\"auto\"]:not(:state(-float-label)):state(-with-label) input::placeholder,\r\n      m3e-form-field[float-label=\"auto\"]:not(:state(-float-label)):state(-with-label) textarea::placeholder {\r\n        opacity: 0;\r\n        transition: opacity 0s;\r\n      }\r\n      m3e-form-field[variant=\"outlined\"] m3e-input-chip-set {\r\n        margin-block: calc(calc(3.5rem + ${DesignToken.density.calc(-2)}) / 4);\r\n      }\r\n      @media (prefers-reduced-motion) {\r\n        m3e-form-field input::placeholder,\r\n        m3e-form-field textarea::placeholder {\r\n          transition: none !important;\r\n        }\r\n      }\r\n    `);\r\n  }\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-flex;\r\n      flex-direction: column;\r\n      vertical-align: middle;\r\n      font-size: var(--m3e-form-field-font-size, ${DesignToken.typescale.standard.body.large.fontSize});\r\n      font-weight: var(--m3e-form-field-font-weight, ${DesignToken.typescale.standard.body.large.fontWeight});\r\n      line-height: var(--m3e-form-field-line-height, ${DesignToken.typescale.standard.body.large.lineHeight});\r\n      letter-spacing: var(--m3e-form-field-tracking, ${DesignToken.typescale.standard.body.large.tracking});\r\n      width: var(--m3e-form-field-width, 14.5rem);\r\n      color: var(--_form-field-color);\r\n    }\r\n    :host(:not(:state(-disabled))) .base {\r\n      cursor: var(--_form-field-cursor);\r\n    }\r\n    .base {\r\n      display: flex;\r\n      align-items: center;\r\n      position: relative;\r\n      min-height: calc(3.5rem + ${DesignToken.density.calc(-2)});\r\n      --_form-field-label-font-size: var(\r\n        --m3e-form-field-label-font-size,\r\n        ${DesignToken.typescale.standard.body.small.fontSize}\r\n      );\r\n      --_form-field-label-line-height: var(\r\n        --m3e-form-field-label-line-height,\r\n        ${DesignToken.typescale.standard.body.small.lineHeight}\r\n      );\r\n    }\r\n    .content {\r\n      display: flex;\r\n      align-items: center;\r\n      position: relative;\r\n      flex: 1 1 auto;\r\n      min-width: 0;\r\n      min-height: var(--m3e-form-field-icon-size, 1.5rem);\r\n    }\r\n    .prefix,\r\n    .suffix {\r\n      display: flex;\r\n      align-items: center;\r\n      position: relative;\r\n      user-select: none;\r\n      flex: none;\r\n      font-size: var(--m3e-form-field-icon-size, 1.5rem);\r\n    }\r\n    .prefix-text,\r\n    .suffix-text {\r\n      opacity: 1;\r\n      transition: opacity ${DesignToken.motion.duration.extraLong1};\r\n      user-select: none;\r\n      flex: none;\r\n    }\r\n    .input {\r\n      display: inline-flex;\r\n      flex-wrap: wrap;\r\n      flex: 1 1 auto;\r\n      min-width: 0;\r\n    }\r\n    .label {\r\n      display: flex;\r\n      position: absolute;\r\n      pointer-events: none;\r\n      user-select: none;\r\n      top: 0;\r\n      left: 0;\r\n      right: 0;\r\n      font-size: var(--m3e-form-field-label-font-size, ${DesignToken.typescale.standard.body.small.fontSize});\r\n      font-weight: var(--m3e-form-field-label-font-weight, ${DesignToken.typescale.standard.body.small.fontWeight});\r\n      line-height: var(--m3e-form-field-label-line-height, ${DesignToken.typescale.standard.body.small.lineHeight});\r\n      letter-spacing: var(--m3e-form-field-label-tracking, ${DesignToken.typescale.standard.body.small.tracking});\r\n      color: var(--_form-field-label-color, inherit);\r\n      transition: ${unsafeCSS(\r\n        `top ${DesignToken.motion.duration.short4}, \r\n        font-size ${DesignToken.motion.duration.short4}, \r\n        line-height ${DesignToken.motion.duration.short4}`,\r\n      )};\r\n    }\r\n    :host(:state(-with-select)) .label {\r\n      margin-inline-end: 1.5rem;\r\n    }\r\n    ::slotted([slot=\"label\"]) {\r\n      white-space: nowrap;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n    }\r\n    .subscript {\r\n      display: inline-flex;\r\n      width: 100%;\r\n      margin-top: 0.25rem;\r\n      font-size: var(--m3e-form-field-subscript-font-size, ${DesignToken.typescale.standard.body.small.fontSize});\r\n      font-weight: var(--m3e-form-field-subscript-font-weight, ${DesignToken.typescale.standard.body.small.fontWeight});\r\n      line-height: var(--m3e-form-field-subscript-line-height, ${DesignToken.typescale.standard.body.small.lineHeight});\r\n      letter-spacing: var(--m3e-form-field-subscript-tracking, ${DesignToken.typescale.standard.body.small.tracking});\r\n      min-height: var(--m3e-form-field-subscript-line-height, ${DesignToken.typescale.standard.body.small.lineHeight});\r\n      color: var(--m3e-form-field-subscript-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    .error,\r\n    .hint {\r\n      flex: 1 1 auto;\r\n    }\r\n    :host([hide-subscript=\"always\"]) .subscript {\r\n      display: none;\r\n    }\r\n    :host([hide-subscript=\"auto\"]:not(:state(-invalid))) .subscript {\r\n      opacity: 0;\r\n      margin-top: 0px;\r\n      margin-bottom: 0.25rem;\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.duration.short4}, \r\n        margin-top ${DesignToken.motion.duration.short4}, \r\n        margin-bottom ${DesignToken.motion.duration.short4}`,\r\n      )};\r\n    }\r\n    :host([hide-subscript=\"auto\"]:not(:state(-invalid)):focus-within) .subscript,\r\n    :host([hide-subscript=\"auto\"]:not(:state(-invalid)):state(-pressed)) .subscript {\r\n      opacity: 1;\r\n      margin-top: 0.25rem;\r\n      margin-bottom: 0;\r\n    }\r\n    :host(:state(-invalid)) .hint {\r\n      display: none;\r\n    }\r\n    :host(:not(:state(-invalid))) .error {\r\n      display: none;\r\n    }\r\n    ::slotted(input),\r\n    ::slotted(textarea),\r\n    ::slotted(select) {\r\n      outline: unset;\r\n      border: unset;\r\n      background-color: transparent;\r\n      box-shadow: none;\r\n      font-family: inherit;\r\n      font-size: inherit;\r\n      line-height: inherit;\r\n      letter-spacing: inherit;\r\n      color: var(--_form-field-input-color, inherit);\r\n      flex: 1 1 auto;\r\n      min-width: 0;\r\n      padding: unset;\r\n    }\r\n    ::slotted(textarea) {\r\n      scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n      scrollbar-color: ${DesignToken.scrollbar.color};\r\n    }\r\n    ::slotted(m3e-select),\r\n    ::slotted(m3e-input-chip-set) {\r\n      flex: 1 1 auto;\r\n      min-width: 0;\r\n    }\r\n    :host([float-label=\"auto\"]:not(:state(-float-label)):not(:state(-pressed))) .label {\r\n      font-size: inherit;\r\n    }\r\n\r\n    :host([float-label=\"auto\"]:not(:state(-float-label)):state(-with-label)) .prefix-text,\r\n    :host([float-label=\"auto\"]:not(:state(-float-label)):state(-with-label)) .suffix-text {\r\n      opacity: 0;\r\n      transition: opacity 0s;\r\n    }\r\n    .prefix {\r\n      margin-inline-start: 1rem;\r\n    }\r\n    :host(:state(-with-prefix)) .prefix {\r\n      margin-inline-end: 1rem;\r\n      margin-inline-start: 0.75rem;\r\n    }\r\n    .suffix {\r\n      margin-inline-end: 1rem;\r\n    }\r\n    :host(:state(-with-suffix)) .suffix {\r\n      margin-inline-start: 0.25rem;\r\n      margin-inline-end: 0.5rem;\r\n    }\r\n    :host(:state(-with-suffix):state(-with-select)) .suffix {\r\n      margin-inline-start: unset;\r\n    }\r\n    :host(:state(-with-select)) .suffix-text {\r\n      display: none;\r\n    }\r\n    :host([variant=\"outlined\"]) .label {\r\n      margin-top: calc(0px - var(--_form-field-label-line-height) / 2);\r\n    }\r\n    :host([variant=\"outlined\"]) .outline {\r\n      position: absolute;\r\n      display: flex;\r\n      pointer-events: none;\r\n      left: 0;\r\n      top: 0;\r\n      bottom: 0;\r\n      right: 0;\r\n    }\r\n    :host([variant=\"outlined\"]) .pseudo-label {\r\n      visibility: hidden;\r\n      margin-inline-end: 0.5rem;\r\n      font-size: var(--_form-field-label-font-size);\r\n      line-height: var(--_form-field-label-line-height);\r\n      letter-spacing: var(--_form-field-label-tracking);\r\n      max-width: 100%;\r\n      transition-property: max-width, margin-inline-end;\r\n      transition-duration: 1ms;\r\n    }\r\n    :host([variant=\"outlined\"]:state(-required):not([hide-required-marker])) .pseudo-label {\r\n      margin-inline-end: 0.25rem;\r\n    }\r\n    :host([variant=\"outlined\"][float-label=\"auto\"]:not(:state(-float-label)):not(:state(-pressed))) .pseudo-label {\r\n      max-width: 0;\r\n      margin-inline-end: 0px;\r\n      transition-delay: ${DesignToken.motion.duration.short2};\r\n    }\r\n    :host([variant=\"outlined\"]) .outline-start,\r\n    :host([variant=\"outlined\"]) .outline-notch,\r\n    :host([variant=\"outlined\"]) .outline-end {\r\n      box-sizing: border-box;\r\n      border-width: var(--_form-field-outline-size, 1px);\r\n      border-color: var(--_form-field-outline-color);\r\n      transition: border-color ${DesignToken.motion.duration.short4};\r\n    }\r\n    :host([variant=\"outlined\"]:not(:state(-with-label))) .outline-notch {\r\n      display: none;\r\n    }\r\n    :host([variant=\"outlined\"]) .outline-start {\r\n      min-width: 0.75rem;\r\n      border-top-style: solid;\r\n      border-inline-start-style: solid;\r\n      border-bottom-style: solid;\r\n      border-start-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall});\r\n      border-end-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall});\r\n    }\r\n    :host([variant=\"outlined\"]) .outline-notch {\r\n      border-bottom-style: solid;\r\n    }\r\n    :host([variant=\"outlined\"]) .outline-end {\r\n      flex-grow: 1;\r\n      min-width: 1rem;\r\n      border-top-style: solid;\r\n      border-inline-end-style: solid;\r\n      border-bottom-style: solid;\r\n      border-start-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall});\r\n      border-end-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall});\r\n    }\r\n    :host([variant=\"outlined\"]:state(-with-prefix)) .outline-start {\r\n      min-width: calc(1.25rem + var(--_prefix-width, 0px) + 0.25rem);\r\n    }\r\n    :host([variant=\"outlined\"]:not(:state(-disabled))) .base:hover .outline,\r\n    :host([variant=\"outlined\"]:not(:state(-disabled)):focus-within) .outline,\r\n    :host([variant=\"outlined\"]:not(:state(-disabled)):state(-pressed)) .outline {\r\n      --_form-field-outline-size: 2px;\r\n    }\r\n    :host([variant=\"outlined\"]) .subscript {\r\n      margin-inline: 1rem;\r\n      width: calc(100% - 2rem);\r\n    }\r\n    :host([variant=\"outlined\"]) .content {\r\n      min-height: calc(3.5rem + ${DesignToken.density.calc(-2)});\r\n      --_form-field-label-font-size: var(\r\n        --m3e-form-field-label-font-size,\r\n        ${DesignToken.typescale.standard.body.small.fontSize}\r\n      );\r\n    }\r\n    :host([variant=\"outlined\"][float-label=\"auto\"]:not(:state(-float-label)):not(:state(-pressed))) .label {\r\n      margin-top: unset;\r\n      line-height: calc(3.5rem + ${DesignToken.density.calc(-2)});\r\n      --_form-field-label-font-size: var(\r\n        --m3e-form-field-label-font-size,\r\n        ${DesignToken.typescale.standard.body.small.fontSize}\r\n      );\r\n    }\r\n    :host([variant=\"filled\"]) .base {\r\n      --_select-arrow-margin-top: calc(\r\n        0px - calc(1rem / max(calc(0 - calc(var(--md-sys-density-scale, 0) + var(--md-sys-density-scale, 0))), 1))\r\n      );\r\n    }\r\n    :host([variant=\"filled\"]) .base::before {\r\n      content: \"\";\r\n      box-sizing: border-box;\r\n      position: absolute;\r\n      pointer-events: none;\r\n      top: 0;\r\n      left: 0;\r\n      right: 0;\r\n      bottom: 0;\r\n      border-bottom-style: solid;\r\n      border-width: 1px;\r\n      border-radius: var(--m3e-form-field-container-shape, ${DesignToken.shape.corner.extraSmallTop});\r\n      border-color: var(--_form-field-outline-color);\r\n      background-color: var(--_form-field-container-color);\r\n    }\r\n    :host([variant=\"filled\"]:not(:state(-disabled))) .base:hover::before,\r\n    :host([variant=\"filled\"]:not(:state(-disabled)):focus-within) .base::before,\r\n    :host([variant=\"filled\"]:not(:state(-disabled)):state(-pressed)) .base::before {\r\n      border-width: 3px;\r\n    }\r\n    :host([variant=\"filled\"]) .base::after {\r\n      content: \"\";\r\n      box-sizing: border-box;\r\n      position: absolute;\r\n      pointer-events: none;\r\n      top: 0;\r\n      left: 0;\r\n      right: 0;\r\n      bottom: 0;\r\n      background-color: var(--_form-field-hover-container-color);\r\n      transition: background-color ${DesignToken.motion.duration.short4};\r\n    }\r\n    :host([variant=\"filled\"]) .subscript {\r\n      margin-inline: 1rem;\r\n      width: calc(100% - 2rem);\r\n    }\r\n    :host([variant=\"filled\"]) .content {\r\n      padding-top: calc(1.5rem + ${DesignToken.density.calc(-2)});\r\n      margin-bottom: 0.5rem;\r\n    }\r\n    :host([variant=\"filled\"]) .label {\r\n      top: calc(0.5rem + ${DesignToken.density.calc(-2)});\r\n    }\r\n    :host([variant=\"filled\"][float-label=\"auto\"]:not(:state(-float-label)):not(:state(-pressed))) .label {\r\n      top: 0px;\r\n      line-height: calc(3.5rem + ${DesignToken.density.calc(-2)} - 0.0625rem);\r\n      --_form-field-label-font-size: var(\r\n        --m3e-form-field-label-font-size,\r\n        ${DesignToken.typescale.standard.body.small.fontSize}\r\n      );\r\n    }\r\n    :host(:not(:state(-disabled)):not(:focus-within):not(:state(-pressed))) .base:hover {\r\n      --_form-field-hover-container-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-form-field-hover-container-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-form-field-hover-container-opacity, 8%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:not(:state(-disabled)):not(:state(-invalid))) {\r\n      color: var(--m3e-form-field-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host([variant=\"outlined\"]:not(:state(-disabled)):not(:state(-invalid))) .base {\r\n      --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken.color.outline});\r\n    }\r\n    :host([variant=\"filled\"]:not(:state(-disabled)):not(:state(-invalid))) .base {\r\n      --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    :host([variant=\"outlined\"]:not(:state(-disabled)):not(:state(-invalid)):focus-within) .base,\r\n    :host([variant=\"outlined\"]:not(:state(-disabled)):not(:state(-invalid)):state(-pressed)) .base,\r\n    :host([variant=\"filled\"]:not(:state(-disabled)):not(:state(-invalid)):focus-within) .base,\r\n    :host([variant=\"filled\"]:not(:state(-disabled)):not(:state(-invalid)):state(-pressed)) .base {\r\n      --_form-field-outline-color: var(--m3e-form-field-focused-outline-color, ${DesignToken.color.primary});\r\n      --_form-field-label-color: var(--m3e-form-field-focused-color, ${DesignToken.color.primary});\r\n    }\r\n    :host(:not(:state(-disabled))) .base {\r\n      --_form-field-container-color: var(\r\n        --m3e-form-field-container-color,\r\n        ${DesignToken.color.surfaceContainerHighest}\r\n      );\r\n    }\r\n    :host(:not(:state(-disabled)):state(-invalid)) .base {\r\n      --_form-field-label-color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error});\r\n      --_form-field-outline-color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error});\r\n    }\r\n    :host(:not(:state(-disabled)):state(-invalid)) .subscript {\r\n      color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error});\r\n    }\r\n    :host(:state(-disabled)) {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-form-field-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-form-field-disabled-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:state(-disabled)) .base {\r\n      --_form-field-container-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-form-field-disabled-container-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-form-field-disabled-container-opacity, 4%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:state(-no-animate)) *,\r\n    :host(:state(-no-animate)) *::before,\r\n    :host(:state(-no-animate)) *::after {\r\n      transition: none !important;\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host([variant=\"filled\"]) .base::after {\r\n        transition: none;\r\n      }\r\n      :host {\r\n        --_form-field-outline-color: CanvasText;\r\n      }\r\n      :host(:state(-disabled)) {\r\n        --_form-field-input-color: GrayText;\r\n        --_form-field-color: GrayText;\r\n        --_form-field-label-color: GrayText;\r\n        --_form-field-outline-color: GrayText;\r\n      }\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base::before,\r\n      .prefix-text,\r\n      .suffix-text,\r\n      .label,\r\n      .subscript,\r\n      .outline-start,\r\n      .outline-notch,\r\n      .outline-end,\r\n      .pseudo-label {\r\n        transition: none !important;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ #control: FormFieldControl | null = null;\r\n  /** @private */ #removeValueInterceptor?: () => void;\r\n  /** @private */ readonly #formResetHandler = () => this.#handleFormReset();\r\n  /** @private */ readonly #controlInvalidHandler = () => this.#handleControlInvalid();\r\n\r\n  /** @private */\r\n  readonly #controlMutationController = new MutationController(this, {\r\n    target: null,\r\n    config: { attributeFilter: [\"disabled\", \"readonly\", \"required\"] },\r\n    callback: () => this.notifyControlStateChange(),\r\n  });\r\n\r\n  /** @private */\r\n  readonly #resizeController = new ResizeController(this, {\r\n    target: null,\r\n    callback: () => this.#handlePrefixResize(),\r\n  });\r\n\r\n  /** @private */\r\n  readonly #focusController = new FocusController(this, {\r\n    target: null,\r\n    callback: (focused) => {\r\n      focused = focused && !(this.#control?.disabled ?? true);\r\n      setCustomState(this, \"-no-animate\", false);\r\n      this.#focused = focused;\r\n      if (focused) {\r\n        setCustomState(this, \"-float-label\", true);\r\n      } else {\r\n        this._invalid = !(this.#control?.checkValidity?.() ?? true);\r\n        this.notifyControlStateChange();\r\n      }\r\n    },\r\n  });\r\n\r\n  /** @private */ @query(\".base\") private readonly _base!: HTMLElement;\r\n  /** @private */ @query(\".prefix\") private readonly _prefix!: HTMLElement;\r\n  /** @private */ @query(\".error\") private readonly _error!: HTMLElement;\r\n  /** @private */ @query(\".hint\") private readonly _hint!: HTMLElement;\r\n\r\n  /** @private */\r\n  readonly #hintMutationController = new MutationController(this, {\r\n    target: null,\r\n    config: { childList: true, subtree: true },\r\n    callback: () => this.#handleHintChange(),\r\n  });\r\n\r\n  /** @private */\r\n  readonly #errorMutationController = new MutationController(this, {\r\n    target: null,\r\n    config: { childList: true, subtree: true },\r\n    callback: () => this.#handleErrorChange(),\r\n  });\r\n\r\n  /** @private */\r\n  readonly #pressedController = new PressedController(this, {\r\n    target: null,\r\n    callback: (pressed) => setCustomState(this, \"-pressed\", pressed && !(this.#control?.disabled ?? true)),\r\n  });\r\n\r\n  /** @private */ #focused = false;\r\n  /** @private */ @state() private _pseudoLabel = \"\";\r\n  /** @private */ @state() private _required = false;\r\n  /** @private */ @state() private _invalid = false;\r\n  /** @private */ @state() private _validationMessage = \"\";\r\n  /** @private */ #hintText = \"\";\r\n  /** @private */ #errorText = \"\";\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    new HoverController(this, { callback: () => setCustomState(this, \"-no-animate\", false) });\r\n  }\r\n\r\n  /** @private */\r\n  get #shouldFloatLabel(): boolean {\r\n    return this.#control?.shouldLabelFloat !== undefined\r\n      ? this.#control.shouldLabelFloat === true\r\n      : typeof this.#control?.value == \"string\" && this.#control.value.length > 0;\r\n  }\r\n\r\n  /** A reference to the element used to anchor dropdown menus. */\r\n  get menuAnchor() {\r\n    return this._base;\r\n  }\r\n\r\n  /** A reference to the hosted form field control. */\r\n  get control() {\r\n    return this.#control;\r\n  }\r\n\r\n  /**\r\n   * The appearance variant of the field.\r\n   * @default \"outlined\"\r\n   */\r\n  @property({ reflect: true }) variant: FormFieldVariant = \"outlined\";\r\n\r\n  /**\r\n   * Whether the required marker should be hidden.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"hide-required-marker\", type: Boolean, reflect: true }) hideRequiredMarker = false;\r\n\r\n  /**\r\n   * Whether subscript content is hidden.\r\n   * @default \"auto\"\r\n   */\r\n  @property({ attribute: \"hide-subscript\", reflect: true }) hideSubscript: HideSubscriptType = \"auto\";\r\n\r\n  /**\r\n   * Specifies whether the label should float always or only when necessary.\r\n   * @default \"auto\"\r\n   */\r\n  @property({ attribute: \"float-label\", reflect: true }) floatLabel: FloatLabelType = \"auto\";\r\n\r\n  /**\r\n   * Notifies the form field that the state of the hosted `control` has changed.\r\n   * @param {boolean} [checkValidity=false] Whether to check validity.\r\n   */\r\n  notifyControlStateChange(checkValidity: boolean = false): void {\r\n    this._required = this.#control?.required === true;\r\n    setCustomState(this, \"-required\", this._required);\r\n    setCustomState(this, \"-disabled\", this.#control?.disabled === true);\r\n    setCustomState(this, \"-readonly\", isReadOnlyMixin(this.#control) && this.#control.readOnly === true);\r\n    if (this.floatLabel === \"auto\") {\r\n      setCustomState(this, \"-float-label\", this.#shouldFloatLabel || this.#focused);\r\n    }\r\n\r\n    if (checkValidity) {\r\n      this._invalid = !(this.#control?.checkValidity?.() ?? true);\r\n    }\r\n\r\n    setCustomState(this, \"-invalid\", this._invalid);\r\n\r\n    this._validationMessage = this.#control?.validationMessage ?? \"\";\r\n    if (!this.isUpdatePending) {\r\n      this.performUpdate();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    // Label animations are disabled on initial paint.\r\n    setCustomState(this, \"-no-animate\", true);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.#changeControl(null);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n    this.#initialize();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n    super.firstUpdated(_changedProperties);\r\n    this.#initialize();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"_invalid\") && this.#control) {\r\n      this.#control.ariaInvalid = this._invalid ? \"true\" : null;\r\n\r\n      if (this.#errorText) {\r\n        if (this._invalid) {\r\n          M3eAriaDescriber.describe(this.#control, this.#errorText);\r\n        } else {\r\n          M3eAriaDescriber.removeDescription(this.#control, this.#errorText);\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\" @click=\"${this.#handleContainerClick}\">\r\n        ${this.variant === \"outlined\"\r\n          ? html`<div class=\"outline\" aria-hidden=\"true\">\r\n              <div class=\"outline-start\"></div>\r\n              <div class=\"outline-notch\">\r\n                <div class=\"pseudo-label\">\r\n                  ${this._pseudoLabel} ${!this.hideRequiredMarker && this._required ? html`&nbsp;*` : nothing}\r\n                </div>\r\n              </div>\r\n              <div class=\"outline-end\"></div>\r\n            </div>`\r\n          : nothing}\r\n        <div class=\"prefix\">\r\n          <slot name=\"prefix\" @slotchange=\"${this.#handlePrefixSlotChange}\"></slot>\r\n        </div>\r\n        <div class=\"content\">\r\n          <span class=\"prefix-text\"><slot name=\"prefix-text\"></slot></span>\r\n          <span class=\"input\">\r\n            <slot @slotchange=\"${this.#handleSlotChange}\" @change=\"${this.#handleControlChange}\"></slot>\r\n          </span>\r\n          <span class=\"suffix-text\"><slot name=\"suffix-text\"></slot></span>\r\n          <span class=\"label\">\r\n            <slot name=\"label\" @slotchange=\"${this.#handleLabelSlotChange}\"></slot>\r\n            ${!this.hideRequiredMarker && this._required\r\n              ? html`<span class=\"required-marker\" aria-hidden=\"true\">&nbsp;*</span>`\r\n              : nothing}\r\n          </span>\r\n        </div>\r\n        <div\r\n          class=\"suffix\"\r\n          @click=\"${this.#stopPropagation}\"\r\n          @focusin=\"${this.#stopPropagation}\"\r\n          @focusout=\"${this.#stopPropagation}\"\r\n          @pointerdown=\"${this.#stopPropagation}\"\r\n          @keydown=\"${this.#stopPropagation}\"\r\n          @keyup=\"${this.#stopPropagation}\"\r\n        >\r\n          <slot name=\"suffix\" @slotchange=\"${this.#handleSuffixSlotChange}\"></slot>\r\n        </div>\r\n      </div>\r\n      <span class=\"subscript\" aria-hidden=\"true\">\r\n        <span class=\"error\"><slot name=\"error\">${this._validationMessage}</slot></span>\r\n        <span class=\"hint\"><slot name=\"hint\"></slot></span>\r\n      </span>`;\r\n  }\r\n\r\n  /** @private */\r\n  #initialize(): void {\r\n    this.#focusController.observe(this._base);\r\n    this.#pressedController.observe(this._base);\r\n\r\n    this.#hintMutationController.observe(this._hint);\r\n    this.#handleHintChange();\r\n\r\n    this.#errorMutationController.observe(this._error);\r\n    this.#handleErrorChange();\r\n  }\r\n\r\n  /** @private */\r\n  #stopPropagation(e: Event): void {\r\n    e.stopImmediatePropagation();\r\n    e.stopPropagation();\r\n  }\r\n\r\n  /** @private */\r\n  #handleLabelSlotChange(e: Event): void {\r\n    const assignedElements = (<HTMLSlotElement>e.target).assignedElements({ flatten: true });\r\n    setCustomState(this, \"-with-label\", assignedElements.length > 0);\r\n    this._pseudoLabel = assignedElements[0]?.textContent ?? \"\";\r\n  }\r\n\r\n  /** @private */\r\n  #handlePrefixSlotChange(e: Event): void {\r\n    setCustomState(this, \"-with-prefix\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n    this.#resizeController.observe(this._prefix);\r\n  }\r\n\r\n  /** @private */\r\n  #handleSuffixSlotChange(e: Event): void {\r\n    setCustomState(this, \"-with-suffix\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handlePrefixResize(): void {\r\n    if (this.variant === \"outlined\") {\r\n      this._base.style.setProperty(\"--_prefix-width\", `${this._prefix.clientWidth}px`);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(e: Event): void {\r\n    this.#changeControl(findFormFieldControl(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleContainerClick(e: MouseEvent): void {\r\n    if (this.#control && !this.#focused && !this.#control.disabled) {\r\n      if (this.#control.onContainerClick) {\r\n        this.#control.onContainerClick(e);\r\n      } else {\r\n        this.#control.focus();\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleControlInvalid(): void {\r\n    this._invalid = true;\r\n    this.notifyControlStateChange();\r\n  }\r\n\r\n  /** @private */\r\n  #handleControlChange(): void {\r\n    this._invalid = !(this.#control?.checkValidity?.() ?? true);\r\n    this.notifyControlStateChange();\r\n  }\r\n\r\n  /** @private */\r\n  #handleFormReset(): void {\r\n    this._invalid = false;\r\n    setTimeout(() => this.notifyControlStateChange());\r\n  }\r\n\r\n  /** @private */\r\n  #changeControl(control: FormFieldControl | null): void {\r\n    if (this.#control === control) return;\r\n    if (this.#control) {\r\n      if (this.#hintText) {\r\n        M3eAriaDescriber.removeDescription(this.#control, this.#hintText);\r\n      }\r\n      if (this.#errorText) {\r\n        M3eAriaDescriber.removeDescription(this.#control, this.#errorText);\r\n      }\r\n\r\n      this.#controlMutationController.unobserve(this.#control);\r\n      this.#control.removeEventListener(\"invalid\", this.#controlInvalidHandler);\r\n      this.#control.form?.removeEventListener(\"reset\", this.#formResetHandler);\r\n      this.#removeValueInterceptor?.();\r\n      this.#removeValueInterceptor = undefined;\r\n    }\r\n    this.#control = control;\r\n\r\n    if ([\"INPUT\", \"TEXTAREA\"].includes(this.#control?.tagName ?? \"\")) {\r\n      this._base.style.setProperty(\"--_form-field-cursor\", \"text\");\r\n    } else {\r\n      this._base.style.removeProperty(\"--_form-field-cursor\");\r\n    }\r\n\r\n    setCustomState(this, \"-with-select\", this.#control?.tagName === \"M3E-SELECT\");\r\n    if (hasCustomState(this, \"-with-select\")) {\r\n      this._base.style.setProperty(\"--_form-field-cursor\", \"pointer\");\r\n    }\r\n\r\n    if (this.#control) {\r\n      this.#controlMutationController.observe(this.#control);\r\n      this.#control.addEventListener(\"invalid\", this.#controlInvalidHandler);\r\n      this.#control.form?.addEventListener(\"reset\", this.#formResetHandler);\r\n      this.#control.removeAttribute(\"aria-invalid\");\r\n\r\n      if (this.#hintText) {\r\n        M3eAriaDescriber.describe(this.#control, this.#hintText);\r\n      }\r\n\r\n      this.notifyControlStateChange();\r\n\r\n      const tagname = this.#control.tagName.toLowerCase();\r\n      if (tagname.startsWith(\"m3e-\") && !customElements.get(tagname)) {\r\n        customElements.whenDefined(tagname).then(() => this.#bindValueInterceptor());\r\n      } else {\r\n        this.#bindValueInterceptor();\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #bindValueInterceptor(): void {\r\n    if (!this.#control) return;\r\n    this.#removeValueInterceptor = interceptProperty(this.#control, \"value\", {\r\n      set: (value, setter) => {\r\n        setter(value);\r\n        this.notifyControlStateChange(true);\r\n      },\r\n    });\r\n  }\r\n\r\n  /** @private */\r\n  #handleHintChange(): void {\r\n    const hintText = getTextContent(this._hint, true);\r\n    if (hintText === this.#hintText) return;\r\n\r\n    if (this.#control && this.#hintText) {\r\n      M3eAriaDescriber.removeDescription(this.#control, this.#hintText);\r\n    }\r\n\r\n    this.#hintText = hintText;\r\n\r\n    if (this.#control && this.#hintText) {\r\n      M3eAriaDescriber.describe(this.#control, this.#hintText);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleErrorChange(): void {\r\n    const errorText = getTextContent(this._error, true);\r\n    if (errorText === this.#errorText) return;\r\n\r\n    if (this.#control && this.#errorText) {\r\n      M3eAriaDescriber.removeDescription(this.#control, this.#errorText);\r\n    }\r\n\r\n    this.#errorText = errorText;\r\n\r\n    if (this.#control && this.#errorText && this._invalid) {\r\n      M3eAriaDescriber.describe(this.#control, this.#errorText);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-form-field\": M3eFormFieldElement;\r\n  }\r\n}\r\n"],"names":["KNOWN_FORM_FIELD_TAGS","isFormFieldControl","value","HTMLElement","HTMLInputElement","HTMLTextAreaElement","HTMLSelectElement","includes","tagName","toLowerCase","findFormFieldControl","slot","element","assignedElements","flatten","walker","document","createTreeWalker","NodeFilter","SHOW_ELEMENT","nextNode","currentNode","M3eFormFieldElement","ReconnectedCallback","AttachInternals","LitElement","constructor","super","_M3eFormFieldElement_control","set","this","_M3eFormFieldElement_removeValueInterceptor","_M3eFormFieldElement_formResetHandler","__classPrivateFieldGet","_M3eFormFieldElement_instances","_M3eFormFieldElement_handleFormReset","call","_M3eFormFieldElement_controlInvalidHandler","_M3eFormFieldElement_handleControlInvalid","_M3eFormFieldElement_controlMutationController","MutationController","target","config","attributeFilter","callback","notifyControlStateChange","_M3eFormFieldElement_resizeController","ResizeController","_M3eFormFieldElement_handlePrefixResize","_M3eFormFieldElement_focusController","FocusController","focused","disabled","setCustomState","__classPrivateFieldSet","_M3eFormFieldElement_focused","_invalid","checkValidity","_M3eFormFieldElement_hintMutationController","childList","subtree","_M3eFormFieldElement_handleHintChange","_M3eFormFieldElement_errorMutationController","_M3eFormFieldElement_handleErrorChange","_M3eFormFieldElement_pressedController","PressedController","pressed","_pseudoLabel","_required","_validationMessage","_M3eFormFieldElement_hintText","_M3eFormFieldElement_errorText","variant","hideRequiredMarker","hideSubscript","floatLabel","HoverController","menuAnchor","_base","control","required","isReadOnlyMixin","readOnly","_M3eFormFieldElement_shouldFloatLabel_get","validationMessage","isUpdatePending","performUpdate","connectedCallback","disconnectedCallback","_M3eFormFieldElement_changeControl","reconnectedCallback","_M3eFormFieldElement_initialize","firstUpdated","_changedProperties","update","changedProperties","has","ariaInvalid","M3eAriaDescriber","describe","removeDescription","render","html","_M3eFormFieldElement_handleContainerClick","nothing","_M3eFormFieldElement_handlePrefixSlotChange","_M3eFormFieldElement_handleSlotChange","_M3eFormFieldElement_handleControlChange","_M3eFormFieldElement_handleLabelSlotChange","_M3eFormFieldElement_stopPropagation","_M3eFormFieldElement_handleSuffixSlotChange","undefined","shouldLabelFloat","length","observe","_hint","_error","e","stopImmediatePropagation","stopPropagation","textContent","hasAssignedNodes","_prefix","style","setProperty","clientWidth","onContainerClick","focus","setTimeout","unobserve","removeEventListener","form","removeProperty","hasCustomState","addEventListener","removeAttribute","tagname","startsWith","customElements","get","whenDefined","then","_M3eFormFieldElement_bindValueInterceptor","interceptProperty","setter","hintText","getTextContent","errorText","registerStyleSheet","css","DesignToken","motion","duration","extraLong1","density","calc","styles","typescale","standard","body","large","fontSize","fontWeight","lineHeight","tracking","small","unsafeCSS","short4","color","onSurfaceVariant","scrollbar","thinWidth","short2","shape","corner","extraSmall","extraSmallTop","onSurface","outline","primary","surfaceContainerHighest","error","__decorate","query","prototype","state","property","reflect","attribute","type","Boolean","customElement"],"mappings":"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"}
+{"version":3,"file":"form-field.min.js","sources":["../../src/form-field/FormFieldControl.ts","../../src/form-field/FormFieldElement.ts"],"sourcesContent":["/**\r\n * Adapted from Angular Material Form Field Control\r\n * Source: https://github.com/angular/components/blob/main/src/material/form-field/form-field-control.ts\r\n *\r\n * @license MIT\r\n * Copyright (c) 2025 Google LLC\r\n * See LICENSE file in the project root for full license text.\r\n */\r\n\r\n/** An interface which allows a control to work inside of a `M3eFormField`. */\r\nexport interface FormFieldControl extends HTMLElement {\r\n  /** A value indicating whether the control is disabled. */\r\n  disabled: boolean;\r\n\r\n  /** The value of the control. */\r\n  value?: unknown;\r\n\r\n  /** A value indicating whether the control is required. */\r\n  required?: boolean;\r\n\r\n  /** A value indicated whether the content of the control is read-only. */\r\n  readonly?: boolean;\r\n\r\n  /** A value indicating whether the form field's label should try to float. */\r\n  readonly shouldLabelFloat?: boolean;\r\n\r\n  /** The error message that would be displayed if the user submits the form, or an empty string if no error message. */\r\n  readonly validationMessage?: string;\r\n\r\n  /** The `HTMLFormElement` associated with this element. */\r\n  readonly form?: HTMLFormElement | null;\r\n\r\n  /**\r\n   * Handles the click event on the control's container.\r\n   * @param {MouseEvent} event The `MouseEvent`.\r\n   */\r\n  onContainerClick?: (event: MouseEvent) => void;\r\n\r\n  /**\r\n   * Returns `true` if the element has no validity problems; otherwise,\r\n   * returns `false`, fires an invalid event.\r\n   */\r\n  checkValidity?: () => boolean;\r\n}\r\n\r\nconst KNOWN_FORM_FIELD_TAGS = [\"m3e-input-chip-set\", \"m3e-select\"];\r\n\r\n/**\r\n * Determines whether a value is a `FormFieldControl`.\r\n * @param {unknown} value The value to test.\r\n * @returns {value is FormFieldControl} A value indicating whether `value` is a `FormFieldControl`.\r\n */\r\nexport function isFormFieldControl(value: unknown): value is FormFieldControl {\r\n  return (\r\n    value instanceof HTMLElement &&\r\n    (value instanceof HTMLInputElement ||\r\n      value instanceof HTMLTextAreaElement ||\r\n      value instanceof HTMLSelectElement ||\r\n      KNOWN_FORM_FIELD_TAGS.includes(value.tagName.toLowerCase()))\r\n  );\r\n}\r\n\r\n/**\r\n * Locates the first `FormFieldControl` in a given slot.\r\n * @param {HTMLSlotElement} slot The slot in which to locate a `FormFieldControl`.\r\n * @returns {FormFieldControl | null} The `FormFieldControl` located in `slot`.\r\n */\r\nexport function findFormFieldControl(slot: HTMLSlotElement): FormFieldControl | null {\r\n  for (const element of slot.assignedElements({ flatten: true })) {\r\n    if (isFormFieldControl(element)) {\r\n      return element;\r\n    }\r\n\r\n    const walker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT);\r\n    while (walker.nextNode()) {\r\n      if (isFormFieldControl(walker.currentNode)) {\r\n        return walker.currentNode;\r\n      }\r\n    }\r\n  }\r\n\r\n  return null;\r\n}\r\n","/**\r\n * Adapted from Angular Material Form Field\r\n * Source: https://github.com/angular/components/blob/main/src/material/form-field/form-field.ts\r\n *\r\n * @license MIT\r\n * Copyright (c) 2025 Google LLC\r\n * See LICENSE file in the project root for full license text.\r\n */\r\n\r\nimport { css, CSSResultGroup, html, LitElement, nothing, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  FocusController,\r\n  getTextContent,\r\n  hasAssignedNodes,\r\n  hasCustomState,\r\n  HoverController,\r\n  interceptProperty,\r\n  isReadOnlyMixin,\r\n  MutationController,\r\n  PressedController,\r\n  ReconnectedCallback,\r\n  registerStyleSheet,\r\n  ResizeController,\r\n  setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { M3eAriaDescriber } from \"@m3e/web/core/a11y\";\r\n\r\nimport { findFormFieldControl, FormFieldControl } from \"./FormFieldControl\";\r\nimport { FormFieldVariant } from \"./FormFieldVariant\";\r\nimport { HideSubscriptType } from \"./HideSubscriptType\";\r\nimport { FloatLabelType } from \"./FloatLabelType\";\r\n\r\n/**\r\n * A container for form controls that applies Material Design styling and behavior.\r\n *\r\n * @description\r\n * The `m3e-form-field` component is a semantic, expressive container for form controls that anchors\r\n * label behavior, subscript messaging, and variant-specific layout. Designed according to Material Design 3\r\n * guidelines, it supports two visual variants—`outlined` and `filled`—each with dynamic elevation,\r\n * shape transitions, and adaptive color theming. The component responds to control state changes\r\n * (focus, hover, press, disabled, invalid) with smooth motion and semantic clarity, ensuring\r\n * visual hierarchy and emotional resonance.\r\n\r\n * The component is accessible by default, with ARIA annotations, contrast-safe color tokens,\r\n * and dynamic descriptions for hint and error messaging. It supports prefix and suffix content,\r\n * floating labels, and adaptive subscript visibility. When hosting a control with validation,\r\n * error messages are surfaced with `aria-invalid` and described for assistive technology.\r\n\r\n * Native form controls may not expose full state or messaging on their own. `m3e-form-field` bridges\r\n * these gaps by coordinating label floating, container styling, and subscript feedback.\r\n *\r\n * @example\r\n * The following example illustrates a basic usage of the `m3e-form-field`.\r\n * ```html\r\n * <m3e-form-field>\r\n *  <label slot=\"label\" for=\"field\">Text field</label>\r\n *  <input id=\"field\" />\r\n * </m3e-form-field>\r\n * ```\r\n * \r\n * @tag m3e-form-field\r\n *\r\n * @slot - Renders the control of the field.\r\n * @slot prefix - Renders content before the fields's control.\r\n * @slot prefix-text - Renders text before the fields's control.\r\n * @slot suffix - Renders content after the fields's control.\r\n * @slot suffix-text - Renders text after the fields's control.\r\n * @slot hint - Renders hint text in the fields's subscript, when the control is valid.\r\n * @slot error - Renders error text in the fields's subscript, when the control is invalid.\r\n *\r\n * @attr float-label - Specifies whether the label should float always or only when necessary.\r\n * @attr hide-required-marker - Whether the required marker should be hidden.\r\n * @attr hide-subscript - Whether subscript content is hidden.\r\n * @attr variant - The appearance variant of the field.\r\n *\r\n * @cssprop --m3e-form-field-font-size - Font size for the form field container text.\r\n * @cssprop --m3e-form-field-font-weight - Font weight for the form field container text.\r\n * @cssprop --m3e-form-field-line-height - Line height for the form field container text.\r\n * @cssprop --m3e-form-field-tracking - Letter spacing for the form field container text.\r\n * @cssprop --m3e-form-field-label-font-size - Font size for the floating label.\r\n * @cssprop --m3e-form-field-label-font-weight - Font weight for the floating label.\r\n * @cssprop --m3e-form-field-label-line-height - Line height for the floating label.\r\n * @cssprop --m3e-form-field-label-tracking - Letter spacing for the floating label.\r\n * @cssprop --m3e-form-field-subscript-font-size - Font size for hint and error text.\r\n * @cssprop --m3e-form-field-subscript-font-weight - Font weight for hint and error text.\r\n * @cssprop --m3e-form-field-subscript-line-height - Line height for hint and error text.\r\n * @cssprop --m3e-form-field-subscript-tracking - Letter spacing for hint and error text.\r\n * @cssprop --m3e-form-field-color - Text color for the form field container.\r\n * @cssprop --m3e-form-field-subscript-color - Color for hint and error text.\r\n * @cssprop --m3e-form-field-invalid-color - Color used when the control is invalid.\r\n * @cssprop --m3e-form-field-focused-outline-color - Outline color when focused.\r\n * @cssprop --m3e-form-field-focused-color - Label color when focused.\r\n * @cssprop --m3e-form-field-outline-color - Outline color in outlined variant.\r\n * @cssprop --m3e-form-field-container-color - Background color in filled variant.\r\n * @cssprop --m3e-form-field-hover-container-color - Hover background color in filled variant.\r\n * @cssprop --m3e-form-field-width - Width of the form field container.\r\n * @cssprop --m3e-form-field-icon-size - Size of prefix and suffix icons.\r\n * @cssprop --m3e-outlined-form-field-container-shape - Corner radius for outlined container.\r\n * @cssprop --m3e-form-field-container-shape - Corner radius for filled container.\r\n * @cssprop --m3e-form-field-hover-container-opacity - Opacity for hover background in filled variant.\r\n * @cssprop --m3e-form-field-disabled-opacity - Opacity for disabled text.\r\n * @cssprop --m3e-form-field-disabled-container-opacity - Opacity for disabled container background.\r\n */\r\n@customElement(\"m3e-form-field\")\r\nexport class M3eFormFieldElement extends ReconnectedCallback(AttachInternals(LitElement)) {\r\n  static {\r\n    registerStyleSheet(css`\r\n      m3e-form-field input::placeholder,\r\n      m3e-form-field textarea::placeholder {\r\n        user-select: none;\r\n        color: currentColor;\r\n        transition: opacity ${DesignToken.motion.duration.extraLong1};\r\n      }\r\n      m3e-form-field[float-label=\"auto\"]:not(:is(:state(--float-label), :--float-label)):is(\r\n          :state(--with-label),\r\n          :--with-label\r\n        )\r\n        input::placeholder,\r\n      m3e-form-field[float-label=\"auto\"]:not(:is(:state(--float-label), :--float-label)):is(\r\n          :state(--with-label),\r\n          :--with-label\r\n        )\r\n        textarea::placeholder {\r\n        opacity: 0;\r\n        transition: opacity 0s;\r\n      }\r\n      m3e-form-field[variant=\"outlined\"] m3e-input-chip-set {\r\n        margin-block: calc(calc(3.5rem + ${DesignToken.density.calc(-2)}) / 4);\r\n      }\r\n      @media (prefers-reduced-motion) {\r\n        m3e-form-field input::placeholder,\r\n        m3e-form-field textarea::placeholder {\r\n          transition: none !important;\r\n        }\r\n      }\r\n    `);\r\n  }\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-flex;\r\n      flex-direction: column;\r\n      vertical-align: middle;\r\n      font-size: var(--m3e-form-field-font-size, ${DesignToken.typescale.standard.body.large.fontSize});\r\n      font-weight: var(--m3e-form-field-font-weight, ${DesignToken.typescale.standard.body.large.fontWeight});\r\n      line-height: var(--m3e-form-field-line-height, ${DesignToken.typescale.standard.body.large.lineHeight});\r\n      letter-spacing: var(--m3e-form-field-tracking, ${DesignToken.typescale.standard.body.large.tracking});\r\n      width: var(--m3e-form-field-width, 14.5rem);\r\n      color: var(--_form-field-color);\r\n    }\r\n    :host(:not(:is(:state(--disabled), :--disabled))) .base {\r\n      cursor: var(--_form-field-cursor);\r\n    }\r\n    .base {\r\n      display: flex;\r\n      align-items: center;\r\n      position: relative;\r\n      min-height: calc(3.5rem + ${DesignToken.density.calc(-2)});\r\n      --_form-field-label-font-size: var(\r\n        --m3e-form-field-label-font-size,\r\n        ${DesignToken.typescale.standard.body.small.fontSize}\r\n      );\r\n      --_form-field-label-line-height: var(\r\n        --m3e-form-field-label-line-height,\r\n        ${DesignToken.typescale.standard.body.small.lineHeight}\r\n      );\r\n    }\r\n    .content {\r\n      display: flex;\r\n      align-items: center;\r\n      position: relative;\r\n      flex: 1 1 auto;\r\n      min-width: 0;\r\n      min-height: var(--m3e-form-field-icon-size, 1.5rem);\r\n    }\r\n    .prefix,\r\n    .suffix {\r\n      display: flex;\r\n      align-items: center;\r\n      position: relative;\r\n      user-select: none;\r\n      flex: none;\r\n      font-size: var(--m3e-form-field-icon-size, 1.5rem);\r\n    }\r\n    .prefix-text,\r\n    .suffix-text {\r\n      opacity: 1;\r\n      transition: opacity ${DesignToken.motion.duration.extraLong1};\r\n      user-select: none;\r\n      flex: none;\r\n    }\r\n    .input {\r\n      display: inline-flex;\r\n      flex-wrap: wrap;\r\n      flex: 1 1 auto;\r\n      min-width: 0;\r\n    }\r\n    .label {\r\n      display: flex;\r\n      position: absolute;\r\n      pointer-events: none;\r\n      user-select: none;\r\n      top: 0;\r\n      left: 0;\r\n      right: 0;\r\n      font-size: var(--m3e-form-field-label-font-size, ${DesignToken.typescale.standard.body.small.fontSize});\r\n      font-weight: var(--m3e-form-field-label-font-weight, ${DesignToken.typescale.standard.body.small.fontWeight});\r\n      line-height: var(--m3e-form-field-label-line-height, ${DesignToken.typescale.standard.body.small.lineHeight});\r\n      letter-spacing: var(--m3e-form-field-label-tracking, ${DesignToken.typescale.standard.body.small.tracking});\r\n      color: var(--_form-field-label-color, inherit);\r\n      transition: ${unsafeCSS(\r\n        `top ${DesignToken.motion.duration.short4}, \r\n        font-size ${DesignToken.motion.duration.short4}, \r\n        line-height ${DesignToken.motion.duration.short4}`,\r\n      )};\r\n    }\r\n    :host(:is(:state(--with-select), :--with-select)) .label {\r\n      margin-inline-end: 1.5rem;\r\n    }\r\n    ::slotted([slot=\"label\"]) {\r\n      white-space: nowrap;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n    }\r\n    .subscript {\r\n      display: inline-flex;\r\n      width: 100%;\r\n      margin-top: 0.25rem;\r\n      font-size: var(--m3e-form-field-subscript-font-size, ${DesignToken.typescale.standard.body.small.fontSize});\r\n      font-weight: var(--m3e-form-field-subscript-font-weight, ${DesignToken.typescale.standard.body.small.fontWeight});\r\n      line-height: var(--m3e-form-field-subscript-line-height, ${DesignToken.typescale.standard.body.small.lineHeight});\r\n      letter-spacing: var(--m3e-form-field-subscript-tracking, ${DesignToken.typescale.standard.body.small.tracking});\r\n      min-height: var(--m3e-form-field-subscript-line-height, ${DesignToken.typescale.standard.body.small.lineHeight});\r\n      color: var(--m3e-form-field-subscript-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    .error,\r\n    .hint {\r\n      flex: 1 1 auto;\r\n    }\r\n    :host([hide-subscript=\"always\"]) .subscript {\r\n      display: none;\r\n    }\r\n    :host([hide-subscript=\"auto\"]:not(:is(:state(--invalid), :--invalid))) .subscript {\r\n      opacity: 0;\r\n      margin-top: 0px;\r\n      margin-bottom: 0.25rem;\r\n      transition: ${unsafeCSS(\r\n        `opacity ${DesignToken.motion.duration.short4}, \r\n        margin-top ${DesignToken.motion.duration.short4}, \r\n        margin-bottom ${DesignToken.motion.duration.short4}`,\r\n      )};\r\n    }\r\n    :host([hide-subscript=\"auto\"]:not(:is(:state(--invalid), :--invalid)):focus-within) .subscript,\r\n    :host([hide-subscript=\"auto\"]:not(:is(:state(--invalid), :--invalid)):is(:state(--pressed), :--pressed))\r\n      .subscript {\r\n      opacity: 1;\r\n      margin-top: 0.25rem;\r\n      margin-bottom: 0;\r\n    }\r\n    :host(:is(:state(--invalid), :--invalid)) .hint {\r\n      display: none;\r\n    }\r\n    :host(:not(:is(:state(--invalid), :--invalid))) .error {\r\n      display: none;\r\n    }\r\n    ::slotted(input),\r\n    ::slotted(textarea),\r\n    ::slotted(select) {\r\n      outline: unset;\r\n      border: unset;\r\n      background-color: transparent;\r\n      box-shadow: none;\r\n      font-family: inherit;\r\n      font-size: inherit;\r\n      line-height: inherit;\r\n      letter-spacing: inherit;\r\n      color: var(--_form-field-input-color, inherit);\r\n      flex: 1 1 auto;\r\n      min-width: 0;\r\n      padding: unset;\r\n    }\r\n    ::slotted(textarea) {\r\n      scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n      scrollbar-color: ${DesignToken.scrollbar.color};\r\n    }\r\n    ::slotted(m3e-select),\r\n    ::slotted(m3e-input-chip-set) {\r\n      flex: 1 1 auto;\r\n      min-width: 0;\r\n    }\r\n    :host([float-label=\"auto\"]:not(:is(:state(--float-label), :--float-label)):not(:is(:state(--pressed), :--pressed)))\r\n      .label {\r\n      font-size: inherit;\r\n    }\r\n\r\n    :host([float-label=\"auto\"]:not(:is(:state(--float-label), :--float-label)):is(:state(--with-label), :--with-label))\r\n      .prefix-text,\r\n    :host([float-label=\"auto\"]:not(:is(:state(--float-label), :--float-label)):is(:state(--with-label), :--with-label))\r\n      .suffix-text {\r\n      opacity: 0;\r\n      transition: opacity 0s;\r\n    }\r\n    .prefix {\r\n      margin-inline-start: 1rem;\r\n    }\r\n    :host(:is(:state(--with-prefix), :--with-prefix)) .prefix {\r\n      margin-inline-end: 1rem;\r\n      margin-inline-start: 0.75rem;\r\n    }\r\n    .suffix {\r\n      margin-inline-end: 1rem;\r\n    }\r\n    :host(:is(:state(--with-suffix), :--with-suffix)) .suffix {\r\n      margin-inline-start: 0.25rem;\r\n      margin-inline-end: 0.5rem;\r\n    }\r\n    :host(:is(:state(--with-suffix), :--with-suffix):is(:state(--with-select), :--with-select)) .suffix {\r\n      margin-inline-start: unset;\r\n    }\r\n    :host(:is(:state(--with-select), :--with-select)) .suffix-text {\r\n      display: none;\r\n    }\r\n    :host([variant=\"outlined\"]) .label {\r\n      margin-top: calc(0px - var(--_form-field-label-line-height) / 2);\r\n    }\r\n    :host([variant=\"outlined\"]) .outline {\r\n      position: absolute;\r\n      display: flex;\r\n      pointer-events: none;\r\n      left: 0;\r\n      top: 0;\r\n      bottom: 0;\r\n      right: 0;\r\n    }\r\n    :host([variant=\"outlined\"]) .pseudo-label {\r\n      visibility: hidden;\r\n      margin-inline-end: 0.5rem;\r\n      font-size: var(--_form-field-label-font-size);\r\n      line-height: var(--_form-field-label-line-height);\r\n      letter-spacing: var(--_form-field-label-tracking);\r\n      max-width: 100%;\r\n      transition-property: max-width, margin-inline-end;\r\n      transition-duration: 1ms;\r\n    }\r\n    :host([variant=\"outlined\"]:is(:state(--required), :--required):not([hide-required-marker])) .pseudo-label {\r\n      margin-inline-end: 0.25rem;\r\n    }\r\n    :host(\r\n        [variant=\"outlined\"][float-label=\"auto\"]:not(:is(:state(--float-label), :--float-label)):not(\r\n            :is(:state(--pressed), :--pressed)\r\n          )\r\n      )\r\n      .pseudo-label {\r\n      max-width: 0;\r\n      margin-inline-end: 0px;\r\n      transition-delay: ${DesignToken.motion.duration.short2};\r\n    }\r\n    :host([variant=\"outlined\"]) .outline-start,\r\n    :host([variant=\"outlined\"]) .outline-notch,\r\n    :host([variant=\"outlined\"]) .outline-end {\r\n      box-sizing: border-box;\r\n      border-width: var(--_form-field-outline-size, 1px);\r\n      border-color: var(--_form-field-outline-color);\r\n      transition: border-color ${DesignToken.motion.duration.short4};\r\n    }\r\n    :host([variant=\"outlined\"]:not(:is(:state(--with-label), :--with-label))) .outline-notch {\r\n      display: none;\r\n    }\r\n    :host([variant=\"outlined\"]) .outline-start {\r\n      min-width: 0.75rem;\r\n      border-top-style: solid;\r\n      border-inline-start-style: solid;\r\n      border-bottom-style: solid;\r\n      border-start-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall});\r\n      border-end-start-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall});\r\n    }\r\n    :host([variant=\"outlined\"]) .outline-notch {\r\n      border-bottom-style: solid;\r\n    }\r\n    :host([variant=\"outlined\"]) .outline-end {\r\n      flex-grow: 1;\r\n      min-width: 1rem;\r\n      border-top-style: solid;\r\n      border-inline-end-style: solid;\r\n      border-bottom-style: solid;\r\n      border-start-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall});\r\n      border-end-end-radius: var(--m3e-outlined-form-field-container-shape, ${DesignToken.shape.corner.extraSmall});\r\n    }\r\n    :host([variant=\"outlined\"]:is(:state(--with-prefix), :--with-prefix)) .outline-start {\r\n      min-width: calc(1.25rem + var(--_prefix-width, 0px) + 0.25rem);\r\n    }\r\n    :host([variant=\"outlined\"]:not(:is(:state(--disabled), :--disabled))) .base:hover .outline,\r\n    :host([variant=\"outlined\"]:not(:is(:state(--disabled), :--disabled)):focus-within) .outline,\r\n    :host([variant=\"outlined\"]:not(:is(:state(--disabled), :--disabled)):is(:state(--pressed), :--pressed)) .outline {\r\n      --_form-field-outline-size: 2px;\r\n    }\r\n    :host([variant=\"outlined\"]) .subscript {\r\n      margin-inline: 1rem;\r\n      width: calc(100% - 2rem);\r\n    }\r\n    :host([variant=\"outlined\"]) .content {\r\n      min-height: calc(3.5rem + ${DesignToken.density.calc(-2)});\r\n      --_form-field-label-font-size: var(\r\n        --m3e-form-field-label-font-size,\r\n        ${DesignToken.typescale.standard.body.small.fontSize}\r\n      );\r\n    }\r\n    :host(\r\n        [variant=\"outlined\"][float-label=\"auto\"]:not(:is(:state(--float-label), :--float-label)):not(\r\n            :is(:state(--pressed), :--pressed)\r\n          )\r\n      )\r\n      .label {\r\n      margin-top: unset;\r\n      line-height: calc(3.5rem + ${DesignToken.density.calc(-2)});\r\n      --_form-field-label-font-size: var(\r\n        --m3e-form-field-label-font-size,\r\n        ${DesignToken.typescale.standard.body.small.fontSize}\r\n      );\r\n    }\r\n    :host([variant=\"filled\"]) .base {\r\n      --_select-arrow-margin-top: calc(\r\n        0px - calc(1rem / max(calc(0 - calc(var(--md-sys-density-scale, 0) + var(--md-sys-density-scale, 0))), 1))\r\n      );\r\n    }\r\n    :host([variant=\"filled\"]) .base::before {\r\n      content: \"\";\r\n      box-sizing: border-box;\r\n      position: absolute;\r\n      pointer-events: none;\r\n      top: 0;\r\n      left: 0;\r\n      right: 0;\r\n      bottom: 0;\r\n      border-bottom-style: solid;\r\n      border-width: 1px;\r\n      border-radius: var(--m3e-form-field-container-shape, ${DesignToken.shape.corner.extraSmallTop});\r\n      border-color: var(--_form-field-outline-color);\r\n      background-color: var(--_form-field-container-color);\r\n    }\r\n    :host([variant=\"filled\"]:not(:is(:state(--disabled), :--disabled))) .base:hover::before,\r\n    :host([variant=\"filled\"]:not(:is(:state(--disabled), :--disabled)):focus-within) .base::before,\r\n    :host([variant=\"filled\"]:not(:is(:state(--disabled), :--disabled)):is(:state(--pressed), :--pressed))\r\n      .base::before {\r\n      border-width: 3px;\r\n    }\r\n    :host([variant=\"filled\"]) .base::after {\r\n      content: \"\";\r\n      box-sizing: border-box;\r\n      position: absolute;\r\n      pointer-events: none;\r\n      top: 0;\r\n      left: 0;\r\n      right: 0;\r\n      bottom: 0;\r\n      background-color: var(--_form-field-hover-container-color);\r\n      transition: background-color ${DesignToken.motion.duration.short4};\r\n    }\r\n    :host([variant=\"filled\"]) .subscript {\r\n      margin-inline: 1rem;\r\n      width: calc(100% - 2rem);\r\n    }\r\n    :host([variant=\"filled\"]) .content {\r\n      padding-top: calc(1.5rem + ${DesignToken.density.calc(-2)});\r\n      margin-bottom: 0.5rem;\r\n    }\r\n    :host([variant=\"filled\"]) .label {\r\n      top: calc(0.5rem + ${DesignToken.density.calc(-2)});\r\n    }\r\n    :host(\r\n        [variant=\"filled\"][float-label=\"auto\"]:not(:is(:state(--float-label), :--float-label)):not(\r\n            :is(:state(--pressed), :--pressed)\r\n          )\r\n      )\r\n      .label {\r\n      top: 0px;\r\n      line-height: calc(3.5rem + ${DesignToken.density.calc(-2)} - 0.0625rem);\r\n      --_form-field-label-font-size: var(\r\n        --m3e-form-field-label-font-size,\r\n        ${DesignToken.typescale.standard.body.small.fontSize}\r\n      );\r\n    }\r\n    :host(:not(:is(:state(--disabled), :--disabled)):not(:focus-within):not(:is(:state(--pressed), :--pressed)))\r\n      .base:hover {\r\n      --_form-field-hover-container-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-form-field-hover-container-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-form-field-hover-container-opacity, 8%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid))) {\r\n      color: var(--m3e-form-field-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host([variant=\"outlined\"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid)))\r\n      .base {\r\n      --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken.color.outline});\r\n    }\r\n    :host([variant=\"filled\"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid))) .base {\r\n      --_form-field-outline-color: var(--m3e-form-field-outline-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    :host(\r\n        [variant=\"outlined\"]:not(:is(:state(--disabled), :--disabled)):not(\r\n            :is(:state(--invalid), :--invalid)\r\n          ):focus-within\r\n      )\r\n      .base,\r\n    :host(\r\n        [variant=\"outlined\"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid)):is(\r\n            :state(--pressed),\r\n            :--pressed\r\n          )\r\n      )\r\n      .base,\r\n    :host(\r\n        [variant=\"filled\"]:not(:is(:state(--disabled), :--disabled)):not(\r\n            :is(:state(--invalid), :--invalid)\r\n          ):focus-within\r\n      )\r\n      .base,\r\n    :host(\r\n        [variant=\"filled\"]:not(:is(:state(--disabled), :--disabled)):not(:is(:state(--invalid), :--invalid)):is(\r\n            :state(--pressed),\r\n            :--pressed\r\n          )\r\n      )\r\n      .base {\r\n      --_form-field-outline-color: var(--m3e-form-field-focused-outline-color, ${DesignToken.color.primary});\r\n      --_form-field-label-color: var(--m3e-form-field-focused-color, ${DesignToken.color.primary});\r\n    }\r\n    :host(:not(:is(:state(--disabled), :--disabled))) .base {\r\n      --_form-field-container-color: var(\r\n        --m3e-form-field-container-color,\r\n        ${DesignToken.color.surfaceContainerHighest}\r\n      );\r\n    }\r\n    :host(:not(:is(:state(--disabled), :--disabled)):is(:state(--invalid), :--invalid)) .base {\r\n      --_form-field-label-color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error});\r\n      --_form-field-outline-color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error});\r\n    }\r\n    :host(:not(:is(:state(--disabled), :--disabled)):is(:state(--invalid), :--invalid)) .subscript {\r\n      color: var(--m3e-form-field-invalid-color, ${DesignToken.color.error});\r\n    }\r\n    :host(:is(:state(--disabled), :--disabled)) {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-form-field-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-form-field-disabled-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:is(:state(--disabled), :--disabled)) .base {\r\n      --_form-field-container-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-form-field-disabled-container-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-form-field-disabled-container-opacity, 4%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:is(:state(--no-animate), :--no-animate)) *,\r\n    :host(:is(:state(--no-animate), :--no-animate)) *::before,\r\n    :host(:is(:state(--no-animate), :--no-animate)) *::after {\r\n      transition: none !important;\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host([variant=\"filled\"]) .base::after {\r\n        transition: none;\r\n      }\r\n      :host {\r\n        --_form-field-outline-color: CanvasText;\r\n      }\r\n      :host(:is(:state(--disabled), :--disabled)) {\r\n        --_form-field-input-color: GrayText;\r\n        --_form-field-color: GrayText;\r\n        --_form-field-label-color: GrayText;\r\n        --_form-field-outline-color: GrayText;\r\n      }\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base::before,\r\n      .prefix-text,\r\n      .suffix-text,\r\n      .label,\r\n      .subscript,\r\n      .outline-start,\r\n      .outline-notch,\r\n      .outline-end,\r\n      .pseudo-label {\r\n        transition: none !important;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ #control: FormFieldControl | null = null;\r\n  /** @private */ #removeValueInterceptor?: () => void;\r\n  /** @private */ readonly #formResetHandler = () => this.#handleFormReset();\r\n  /** @private */ readonly #controlInvalidHandler = () => this.#handleControlInvalid();\r\n\r\n  /** @private */\r\n  readonly #controlMutationController = new MutationController(this, {\r\n    target: null,\r\n    config: { attributeFilter: [\"disabled\", \"readonly\", \"required\"] },\r\n    callback: () => this.notifyControlStateChange(),\r\n  });\r\n\r\n  /** @private */\r\n  readonly #resizeController = new ResizeController(this, {\r\n    target: null,\r\n    callback: () => this.#handlePrefixResize(),\r\n  });\r\n\r\n  /** @private */\r\n  readonly #focusController = new FocusController(this, {\r\n    target: null,\r\n    callback: (focused) => {\r\n      focused = focused && !(this.#control?.disabled ?? true);\r\n      setCustomState(this, \"--no-animate\", false);\r\n      this.#focused = focused;\r\n      if (focused) {\r\n        setCustomState(this, \"--float-label\", true);\r\n      } else {\r\n        this._invalid = !(this.#control?.checkValidity?.() ?? true);\r\n        this.notifyControlStateChange();\r\n      }\r\n    },\r\n  });\r\n\r\n  /** @private */ @query(\".base\") private readonly _base!: HTMLElement;\r\n  /** @private */ @query(\".prefix\") private readonly _prefix!: HTMLElement;\r\n  /** @private */ @query(\".error\") private readonly _error!: HTMLElement;\r\n  /** @private */ @query(\".hint\") private readonly _hint!: HTMLElement;\r\n\r\n  /** @private */\r\n  readonly #hintMutationController = new MutationController(this, {\r\n    target: null,\r\n    config: { childList: true, subtree: true },\r\n    callback: () => this.#handleHintChange(),\r\n  });\r\n\r\n  /** @private */\r\n  readonly #errorMutationController = new MutationController(this, {\r\n    target: null,\r\n    config: { childList: true, subtree: true },\r\n    callback: () => this.#handleErrorChange(),\r\n  });\r\n\r\n  /** @private */\r\n  readonly #pressedController = new PressedController(this, {\r\n    target: null,\r\n    callback: (pressed) => setCustomState(this, \"--pressed\", pressed && !(this.#control?.disabled ?? true)),\r\n  });\r\n\r\n  /** @private */ #focused = false;\r\n  /** @private */ @state() private _pseudoLabel = \"\";\r\n  /** @private */ @state() private _required = false;\r\n  /** @private */ @state() private _invalid = false;\r\n  /** @private */ @state() private _validationMessage = \"\";\r\n  /** @private */ #hintText = \"\";\r\n  /** @private */ #errorText = \"\";\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    new HoverController(this, { callback: () => setCustomState(this, \"--no-animate\", false) });\r\n  }\r\n\r\n  /** @private */\r\n  get #shouldFloatLabel(): boolean {\r\n    return this.#control?.shouldLabelFloat !== undefined\r\n      ? this.#control.shouldLabelFloat === true\r\n      : typeof this.#control?.value == \"string\" && this.#control.value.length > 0;\r\n  }\r\n\r\n  /** A reference to the element used to anchor dropdown menus. */\r\n  get menuAnchor() {\r\n    return this._base;\r\n  }\r\n\r\n  /** A reference to the hosted form field control. */\r\n  get control() {\r\n    return this.#control;\r\n  }\r\n\r\n  /**\r\n   * The appearance variant of the field.\r\n   * @default \"outlined\"\r\n   */\r\n  @property({ reflect: true }) variant: FormFieldVariant = \"outlined\";\r\n\r\n  /**\r\n   * Whether the required marker should be hidden.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"hide-required-marker\", type: Boolean, reflect: true }) hideRequiredMarker = false;\r\n\r\n  /**\r\n   * Whether subscript content is hidden.\r\n   * @default \"auto\"\r\n   */\r\n  @property({ attribute: \"hide-subscript\", reflect: true }) hideSubscript: HideSubscriptType = \"auto\";\r\n\r\n  /**\r\n   * Specifies whether the label should float always or only when necessary.\r\n   * @default \"auto\"\r\n   */\r\n  @property({ attribute: \"float-label\", reflect: true }) floatLabel: FloatLabelType = \"auto\";\r\n\r\n  /**\r\n   * Notifies the form field that the state of the hosted `control` has changed.\r\n   * @param {boolean} [checkValidity=false] Whether to check validity.\r\n   */\r\n  notifyControlStateChange(checkValidity: boolean = false): void {\r\n    this._required = this.#control?.required === true;\r\n    setCustomState(this, \"--required\", this._required);\r\n    setCustomState(this, \"--disabled\", this.#control?.disabled === true);\r\n    setCustomState(this, \"--readonly\", isReadOnlyMixin(this.#control) && this.#control.readOnly === true);\r\n    if (this.floatLabel === \"auto\") {\r\n      setCustomState(this, \"--float-label\", this.#shouldFloatLabel || this.#focused);\r\n    }\r\n\r\n    if (checkValidity) {\r\n      this._invalid = !(this.#control?.checkValidity?.() ?? true);\r\n    }\r\n\r\n    setCustomState(this, \"--invalid\", this._invalid);\r\n\r\n    this._validationMessage = this.#control?.validationMessage ?? \"\";\r\n    if (!this.isUpdatePending) {\r\n      this.performUpdate();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    // Label animations are disabled on initial paint.\r\n    setCustomState(this, \"--no-animate\", true);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.#changeControl(null);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n    this.#initialize();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n    super.firstUpdated(_changedProperties);\r\n    this.#initialize();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"_invalid\") && this.#control) {\r\n      this.#control.ariaInvalid = this._invalid ? \"true\" : null;\r\n\r\n      if (this.#errorText) {\r\n        if (this._invalid) {\r\n          M3eAriaDescriber.describe(this.#control, this.#errorText);\r\n        } else {\r\n          M3eAriaDescriber.removeDescription(this.#control, this.#errorText);\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\" @click=\"${this.#handleContainerClick}\">\r\n        ${this.variant === \"outlined\"\r\n          ? html`<div class=\"outline\" aria-hidden=\"true\">\r\n              <div class=\"outline-start\"></div>\r\n              <div class=\"outline-notch\">\r\n                <div class=\"pseudo-label\">\r\n                  ${this._pseudoLabel} ${!this.hideRequiredMarker && this._required ? html`&nbsp;*` : nothing}\r\n                </div>\r\n              </div>\r\n              <div class=\"outline-end\"></div>\r\n            </div>`\r\n          : nothing}\r\n        <div class=\"prefix\">\r\n          <slot name=\"prefix\" @slotchange=\"${this.#handlePrefixSlotChange}\"></slot>\r\n        </div>\r\n        <div class=\"content\">\r\n          <span class=\"prefix-text\"><slot name=\"prefix-text\"></slot></span>\r\n          <span class=\"input\">\r\n            <slot @slotchange=\"${this.#handleSlotChange}\" @change=\"${this.#handleControlChange}\"></slot>\r\n          </span>\r\n          <span class=\"suffix-text\"><slot name=\"suffix-text\"></slot></span>\r\n          <span class=\"label\">\r\n            <slot name=\"label\" @slotchange=\"${this.#handleLabelSlotChange}\"></slot>\r\n            ${!this.hideRequiredMarker && this._required\r\n              ? html`<span class=\"required-marker\" aria-hidden=\"true\">&nbsp;*</span>`\r\n              : nothing}\r\n          </span>\r\n        </div>\r\n        <div\r\n          class=\"suffix\"\r\n          @click=\"${this.#stopPropagation}\"\r\n          @focusin=\"${this.#stopPropagation}\"\r\n          @focusout=\"${this.#stopPropagation}\"\r\n          @pointerdown=\"${this.#stopPropagation}\"\r\n          @keydown=\"${this.#stopPropagation}\"\r\n          @keyup=\"${this.#stopPropagation}\"\r\n        >\r\n          <slot name=\"suffix\" @slotchange=\"${this.#handleSuffixSlotChange}\"></slot>\r\n        </div>\r\n      </div>\r\n      <span class=\"subscript\" aria-hidden=\"true\">\r\n        <span class=\"error\"><slot name=\"error\">${this._validationMessage}</slot></span>\r\n        <span class=\"hint\"><slot name=\"hint\"></slot></span>\r\n      </span>`;\r\n  }\r\n\r\n  /** @private */\r\n  #initialize(): void {\r\n    this.#focusController.observe(this._base);\r\n    this.#pressedController.observe(this._base);\r\n\r\n    this.#hintMutationController.observe(this._hint);\r\n    this.#handleHintChange();\r\n\r\n    this.#errorMutationController.observe(this._error);\r\n    this.#handleErrorChange();\r\n  }\r\n\r\n  /** @private */\r\n  #stopPropagation(e: Event): void {\r\n    e.stopImmediatePropagation();\r\n    e.stopPropagation();\r\n  }\r\n\r\n  /** @private */\r\n  #handleLabelSlotChange(e: Event): void {\r\n    const assignedElements = (<HTMLSlotElement>e.target).assignedElements({ flatten: true });\r\n    setCustomState(this, \"--with-label\", assignedElements.length > 0);\r\n    this._pseudoLabel = assignedElements[0]?.textContent ?? \"\";\r\n  }\r\n\r\n  /** @private */\r\n  #handlePrefixSlotChange(e: Event): void {\r\n    setCustomState(this, \"--with-prefix\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n    this.#resizeController.observe(this._prefix);\r\n  }\r\n\r\n  /** @private */\r\n  #handleSuffixSlotChange(e: Event): void {\r\n    setCustomState(this, \"--with-suffix\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handlePrefixResize(): void {\r\n    if (this.variant === \"outlined\") {\r\n      this._base.style.setProperty(\"--_prefix-width\", `${this._prefix.clientWidth}px`);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(e: Event): void {\r\n    this.#changeControl(findFormFieldControl(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleContainerClick(e: MouseEvent): void {\r\n    if (this.#control && !this.#focused && !this.#control.disabled) {\r\n      if (this.#control.onContainerClick) {\r\n        this.#control.onContainerClick(e);\r\n      } else {\r\n        this.#control.focus();\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleControlInvalid(): void {\r\n    this._invalid = true;\r\n    this.notifyControlStateChange();\r\n  }\r\n\r\n  /** @private */\r\n  #handleControlChange(): void {\r\n    this._invalid = !(this.#control?.checkValidity?.() ?? true);\r\n    this.notifyControlStateChange();\r\n  }\r\n\r\n  /** @private */\r\n  #handleFormReset(): void {\r\n    this._invalid = false;\r\n    setTimeout(() => this.notifyControlStateChange());\r\n  }\r\n\r\n  /** @private */\r\n  #changeControl(control: FormFieldControl | null): void {\r\n    if (this.#control === control) return;\r\n    if (this.#control) {\r\n      if (this.#hintText) {\r\n        M3eAriaDescriber.removeDescription(this.#control, this.#hintText);\r\n      }\r\n      if (this.#errorText) {\r\n        M3eAriaDescriber.removeDescription(this.#control, this.#errorText);\r\n      }\r\n\r\n      this.#controlMutationController.unobserve(this.#control);\r\n      this.#control.removeEventListener(\"invalid\", this.#controlInvalidHandler);\r\n      this.#control.form?.removeEventListener(\"reset\", this.#formResetHandler);\r\n      this.#removeValueInterceptor?.();\r\n      this.#removeValueInterceptor = undefined;\r\n    }\r\n    this.#control = control;\r\n\r\n    if ([\"INPUT\", \"TEXTAREA\"].includes(this.#control?.tagName ?? \"\")) {\r\n      this._base.style.setProperty(\"--_form-field-cursor\", \"text\");\r\n    } else {\r\n      this._base.style.removeProperty(\"--_form-field-cursor\");\r\n    }\r\n\r\n    setCustomState(this, \"--with-select\", this.#control?.tagName === \"M3E-SELECT\");\r\n    if (hasCustomState(this, \"--with-select\")) {\r\n      this._base.style.setProperty(\"--_form-field-cursor\", \"pointer\");\r\n    }\r\n\r\n    if (this.#control) {\r\n      this.#controlMutationController.observe(this.#control);\r\n      this.#control.addEventListener(\"invalid\", this.#controlInvalidHandler);\r\n      this.#control.form?.addEventListener(\"reset\", this.#formResetHandler);\r\n      this.#control.removeAttribute(\"aria-invalid\");\r\n\r\n      if (this.#hintText) {\r\n        M3eAriaDescriber.describe(this.#control, this.#hintText);\r\n      }\r\n\r\n      this.notifyControlStateChange();\r\n\r\n      const tagname = this.#control.tagName.toLowerCase();\r\n      if (tagname.startsWith(\"m3e-\") && !customElements.get(tagname)) {\r\n        customElements.whenDefined(tagname).then(() => this.#bindValueInterceptor());\r\n      } else {\r\n        this.#bindValueInterceptor();\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #bindValueInterceptor(): void {\r\n    if (!this.#control) return;\r\n    this.#removeValueInterceptor = interceptProperty(this.#control, \"value\", {\r\n      set: (value, setter) => {\r\n        setter(value);\r\n        this.notifyControlStateChange(true);\r\n      },\r\n    });\r\n  }\r\n\r\n  /** @private */\r\n  #handleHintChange(): void {\r\n    const hintText = getTextContent(this._hint, true);\r\n    if (hintText === this.#hintText) return;\r\n\r\n    if (this.#control && this.#hintText) {\r\n      M3eAriaDescriber.removeDescription(this.#control, this.#hintText);\r\n    }\r\n\r\n    this.#hintText = hintText;\r\n\r\n    if (this.#control && this.#hintText) {\r\n      M3eAriaDescriber.describe(this.#control, this.#hintText);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleErrorChange(): void {\r\n    const errorText = getTextContent(this._error, true);\r\n    if (errorText === this.#errorText) return;\r\n\r\n    if (this.#control && this.#errorText) {\r\n      M3eAriaDescriber.removeDescription(this.#control, this.#errorText);\r\n    }\r\n\r\n    this.#errorText = errorText;\r\n\r\n    if (this.#control && this.#errorText && this._invalid) {\r\n      M3eAriaDescriber.describe(this.#control, this.#errorText);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-form-field\": M3eFormFieldElement;\r\n  }\r\n}\r\n"],"names":["KNOWN_FORM_FIELD_TAGS","isFormFieldControl","value","HTMLElement","HTMLInputElement","HTMLTextAreaElement","HTMLSelectElement","includes","tagName","toLowerCase","findFormFieldControl","slot","element","assignedElements","flatten","walker","document","createTreeWalker","NodeFilter","SHOW_ELEMENT","nextNode","currentNode","M3eFormFieldElement","ReconnectedCallback","AttachInternals","LitElement","constructor","super","_M3eFormFieldElement_control","set","this","_M3eFormFieldElement_removeValueInterceptor","_M3eFormFieldElement_formResetHandler","__classPrivateFieldGet","_M3eFormFieldElement_instances","_M3eFormFieldElement_handleFormReset","call","_M3eFormFieldElement_controlInvalidHandler","_M3eFormFieldElement_handleControlInvalid","_M3eFormFieldElement_controlMutationController","MutationController","target","config","attributeFilter","callback","notifyControlStateChange","_M3eFormFieldElement_resizeController","ResizeController","_M3eFormFieldElement_handlePrefixResize","_M3eFormFieldElement_focusController","FocusController","focused","disabled","setCustomState","__classPrivateFieldSet","_M3eFormFieldElement_focused","_invalid","checkValidity","_M3eFormFieldElement_hintMutationController","childList","subtree","_M3eFormFieldElement_handleHintChange","_M3eFormFieldElement_errorMutationController","_M3eFormFieldElement_handleErrorChange","_M3eFormFieldElement_pressedController","PressedController","pressed","_pseudoLabel","_required","_validationMessage","_M3eFormFieldElement_hintText","_M3eFormFieldElement_errorText","variant","hideRequiredMarker","hideSubscript","floatLabel","HoverController","menuAnchor","_base","control","required","isReadOnlyMixin","readOnly","_M3eFormFieldElement_shouldFloatLabel_get","validationMessage","isUpdatePending","performUpdate","connectedCallback","disconnectedCallback","_M3eFormFieldElement_changeControl","reconnectedCallback","_M3eFormFieldElement_initialize","firstUpdated","_changedProperties","update","changedProperties","has","ariaInvalid","M3eAriaDescriber","describe","removeDescription","render","html","_M3eFormFieldElement_handleContainerClick","nothing","_M3eFormFieldElement_handlePrefixSlotChange","_M3eFormFieldElement_handleSlotChange","_M3eFormFieldElement_handleControlChange","_M3eFormFieldElement_handleLabelSlotChange","_M3eFormFieldElement_stopPropagation","_M3eFormFieldElement_handleSuffixSlotChange","undefined","shouldLabelFloat","length","observe","_hint","_error","e","stopImmediatePropagation","stopPropagation","textContent","hasAssignedNodes","_prefix","style","setProperty","clientWidth","onContainerClick","focus","setTimeout","unobserve","removeEventListener","form","removeProperty","hasCustomState","addEventListener","removeAttribute","tagname","startsWith","customElements","get","whenDefined","then","_M3eFormFieldElement_bindValueInterceptor","interceptProperty","setter","hintText","getTextContent","errorText","registerStyleSheet","css","DesignToken","motion","duration","extraLong1","density","calc","styles","typescale","standard","body","large","fontSize","fontWeight","lineHeight","tracking","small","unsafeCSS","short4","color","onSurfaceVariant","scrollbar","thinWidth","short2","shape","corner","extraSmall","extraSmallTop","onSurface","outline","primary","surfaceContainerHighest","error","__decorate","query","prototype","state","property","reflect","attribute","type","Boolean","customElement"],"mappings":"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"}

package/dist/html-custom-data.json

@@ -99,12 +99,6 @@
       ],
       "references": []
     },
-    {
-      "name": "m3e-avatar",
-      "description": "An image, icon or textual initials representing a user or other identity.\n---\n\n\n### **Slots:**\n - _default_ - Renders the content of the avatar.\n\n### **CSS Properties:**\n - **--m3e-avatar-size** - Size of the avatar. _(default: undefined)_\n- **--m3e-avatar-shape** - Border radius of the avatar. _(default: undefined)_\n- **--m3e-avatar-font-size** - Font size for the avatar. _(default: undefined)_\n- **--m3e-avatar-font-weight** - Font weight for the avatar. _(default: undefined)_\n- **--m3e-avatar-line-height** - Line height for the avatar. _(default: undefined)_\n- **--m3e-avatar-tracking** - Letter spacing for the avatar. _(default: undefined)_\n- **--m3e-avatar-color** - Background color of the avatar. _(default: undefined)_\n- **--m3e-avatar-label-color** - Text color of the avatar. _(default: undefined)_",
-      "attributes": [],
-      "references": []
-    },
     {
       "name": "m3e-badge",
       "description": "A visual indicator used to label content.\n---\n\n\n### **Methods:**\n - **attach(control: _HTMLElement_): _void_** - Attaches the element to an interactive control.\n- **detach(): _void_** - Detaches the element from its current interactive control.\n\n### **Slots:**\n - _default_ - Renders the content of the badge.\n\n### **CSS Properties:**\n - **--m3e-badge-shape** - Corner radius of the badge. _(default: undefined)_\n- **--m3e-badge-color** - Foreground color of badge content. _(default: undefined)_\n- **--m3e-badge-container-color** - Background color of the badge. _(default: undefined)_\n- **--m3e-badge-small-size** - Fixed dimensions for small badge. Used for minimal indicators (e.g. dot). _(default: undefined)_\n- **--m3e-badge-medium-size** - Height and min-width for medium badge. _(default: undefined)_\n- **--m3e-badge-medium-font-size** - Font size for medium badge label. _(default: undefined)_\n- **--m3e-badge-medium-font-weight** - Font weight for medium badge label. _(default: undefined)_\n- **--m3e-badge-medium-line-height** - Line height for medium badge label. _(default: undefined)_\n- **--m3e-badge-medium-tracking** - Letter spacing for medium badge label. _(default: undefined)_\n- **--m3e-badge-large-size** - Height and min-width for large badge. _(default: undefined)_\n- **--m3e-badge-large-font-size** - Font size for large badge label. _(default: undefined)_\n- **--m3e-badge-large-font-weight** - Font weight for large badge label. _(default: undefined)_\n- **--m3e-badge-large-line-height** - Line height for large badge label. _(default: undefined)_\n- **--m3e-badge-large-tracking** - Letter spacing for large badge label. _(default: undefined)_",
@@ -207,6 +201,12 @@
       ],
       "references": []
     },
+    {
+      "name": "m3e-avatar",
+      "description": "An image, icon or textual initials representing a user or other identity.\n---\n\n\n### **Slots:**\n - _default_ - Renders the content of the avatar.\n\n### **CSS Properties:**\n - **--m3e-avatar-size** - Size of the avatar. _(default: undefined)_\n- **--m3e-avatar-shape** - Border radius of the avatar. _(default: undefined)_\n- **--m3e-avatar-font-size** - Font size for the avatar. _(default: undefined)_\n- **--m3e-avatar-font-weight** - Font weight for the avatar. _(default: undefined)_\n- **--m3e-avatar-line-height** - Line height for the avatar. _(default: undefined)_\n- **--m3e-avatar-tracking** - Letter spacing for the avatar. _(default: undefined)_\n- **--m3e-avatar-color** - Background color of the avatar. _(default: undefined)_\n- **--m3e-avatar-label-color** - Text color of the avatar. _(default: undefined)_",
+      "attributes": [],
+      "references": []
+    },
     {
       "name": "m3e-breadcrumb",
       "description": "Displays a hierarchical navigation path and identifies the user's\r\ncurrent location within an application.\n---\n\n\n### **Slots:**\n - _default_ - Renders breadcrumb items.\n- **separator** - Renders a custom separator between breadcrumb items.",
@@ -575,43 +575,6 @@
       ],
       "references": []
     },
-    {
-      "name": "m3e-checkbox",
-      "description": "A checkbox that allows a user to select one or more options from a limited number of choices.\n---\n\n\n### **Events:**\n - **input** - Emitted when the checked state changes.\n- **change** - Emitted when the checked state changes.\n- **invalid** - Emitted when a form is submitted and the element fails constraint validation.\n- **click** - Emitted when the element is clicked.\n\n### **Methods:**\n - **markAsPristine(): _void_** - Marks the element as pristine.\n- **markAsDirty(): _void_** - Marks the element as dirty.\n- **markAsTouched(): _void_** - Marks the element as touched.\n- **markAsUntouched(): _void_** - Marks the element as untouched.\n- **reportValidity(): _boolean_** - Returns `true` if the element has no validity problems; otherwise, returns `false`, fires\r\nan invalid event, and (if the event isn't canceled) reports the problem to the user.\n- **checkValidity(): _boolean_** - Returns `true` if the element has no validity problems; otherwise,\r\nreturns `false`, fires an invalid event.\n- **setCustomValidity(error: _string_): _void_** - Sets a custom validity message for the element.\n- **formDisabledCallback(disabled: _boolean_): _void_** - Called when the element is disabled or enabled via its form association.\n- **formResetCallback(): _void_** - Called when the associated form is reset.\n\n### **CSS Properties:**\n - **--m3e-checkbox-icon-size** - Size of the checkbox icon inside the container. _(default: undefined)_\n- **--m3e-checkbox-container-size** - Base size of the checkbox container. _(default: undefined)_\n- **--m3e-checkbox-container-shape** - Border radius of the icon container. _(default: undefined)_\n- **--m3e-checkbox-unselected-outline-thickness** - Border thickness for unselected state. _(default: undefined)_\n- **--m3e-checkbox-unselected-outline-color** - Border color for unselected state. _(default: undefined)_\n- **--m3e-checkbox-unselected-hover-outline-color** - Border color on hover when unselected. _(default: undefined)_\n- **--m3e-checkbox-unselected-disabled-outline-color** - Base color for disabled unselected outline. _(default: undefined)_\n- **--m3e-checkbox-unselected-disabled-outline-opacity** - Opacity for disabled unselected outline. _(default: undefined)_\n- **--m3e-checkbox-unselected-error-outline-color** - Border color for invalid unselected state. _(default: undefined)_\n- **--m3e-checkbox-selected-container-color** - Background color for selected container. _(default: undefined)_\n- **--m3e-checkbox-selected-icon-color** - Icon color for selected state. _(default: undefined)_\n- **--m3e-checkbox-selected-disabled-container-color** - Base color for disabled selected container. _(default: undefined)_\n- **--m3e-checkbox-selected-disabled-container-opacity** - Opacity for disabled selected container. _(default: undefined)_\n- **--m3e-checkbox-selected-disabled-icon-color** - Base color for disabled selected icon. _(default: undefined)_\n- **--m3e-checkbox-selected-disabled-icon-opacity** - Opacity for disabled selected icon. _(default: undefined)_\n- **--m3e-checkbox-unselected-hover-color** - Ripple hover color for unselected state. _(default: undefined)_\n- **--m3e-checkbox-unselected-focus-color** - Ripple focus color for unselected state. _(default: undefined)_\n- **--m3e-checkbox-unselected-ripple-color** - Ripple base color for unselected state. _(default: undefined)_\n- **--m3e-checkbox-selected-hover-color** - Ripple hover color for selected state. _(default: undefined)_\n- **--m3e-checkbox-selected-focus-color** - Ripple focus color for selected state. _(default: undefined)_\n- **--m3e-checkbox-selected-ripple-color** - Ripple base color for selected state. _(default: undefined)_\n- **--m3e-checkbox-unselected-error-hover-color** - Ripple hover color for invalid unselected state. _(default: undefined)_\n- **--m3e-checkbox-unselected-error-focus-color** - Ripple focus color for invalid unselected state. _(default: undefined)_\n- **--m3e-checkbox-unselected-error-ripple-color** - Ripple base color for invalid unselected state. _(default: undefined)_\n- **--m3e-checkbox-selected-error-hover-color** - Ripple hover color for invalid selected state. _(default: undefined)_\n- **--m3e-checkbox-selected-error-focus-color** - Ripple focus color for invalid selected state. _(default: undefined)_\n- **--m3e-checkbox-selected-error-ripple-color** - Ripple base color for invalid selected state. _(default: undefined)_",
-      "attributes": [
-        {
-          "name": "checked",
-          "description": "Whether the element is checked.",
-          "values": []
-        },
-        {
-          "name": "disabled",
-          "description": "Whether the element is disabled.",
-          "values": []
-        },
-        {
-          "name": "indeterminate",
-          "description": "Whether the element's checked state is indeterminate.",
-          "values": []
-        },
-        {
-          "name": "name",
-          "description": "The name that identifies the element when submitting the associated form.",
-          "values": []
-        },
-        {
-          "name": "required",
-          "description": "Whether the element is required.",
-          "values": []
-        },
-        {
-          "name": "value",
-          "description": "A string representing the value of the checkbox.",
-          "values": []
-        }
-      ],
-      "references": []
-    },
     {
       "name": "m3e-card",
       "description": "A content container for text, images (or other media), and actions in the context of a single subject.\n---\n\n\n### **Events:**\n - **click** - Emitted when the element is clicked.\n\n### **Slots:**\n - _default_ - Renders the content of the card without padding.\n- **header** - Renders the header of the card.\n- **content** - Renders the content of the card with padding.\n- **actions** - Renders the actions of the card.\n- **footer** - Renders the footer of the card.\n\n### **CSS Properties:**\n - **--m3e-card-padding** - Internal spacing for all slotted regions _(default: undefined)_\n- **--m3e-card-shape** - Corner radius of the card container. _(default: undefined)_\n- **--m3e-filled-card-text-color** - Foreground color for text content in filled cards. _(default: undefined)_\n- **--m3e-filled-card-container-color** - Background color of the filled card container. _(default: undefined)_\n- **--m3e-filled-card-container-elevation** - Elevation level for filled card container. _(default: undefined)_\n- **--m3e-filled-card-disabled-text-color** - Text color when filled card is disabled. _(default: undefined)_\n- **--m3e-filled-card-disabled-text-opacity** - Opacity applied to text when disabled. _(default: undefined)_\n- **--m3e-filled-card-disabled-container-color** - Background color when disabled. _(default: undefined)_\n- **--m3e-filled-card-disabled-container-elevation** - Elevation level when disabled. _(default: undefined)_\n- **--m3e-filled-card-disabled-container-elevation-color** - Shadow color when disabled. _(default: undefined)_\n- **--m3e-filled-card-disabled-container-elevation-opacity** - Shadow opacity when disabled. _(default: undefined)_\n- **--m3e-filled-card-disabled-container-opacity** - Overall container opacity when disabled. _(default: undefined)_\n- **--m3e-filled-card-hover-text-color** - Text color on hover. _(default: undefined)_\n- **--m3e-filled-card-hover-state-layer-color** - State layer color on hover. _(default: undefined)_\n- **--m3e-filled-card-hover-state-layer-opacity** - State layer opacity on hover. _(default: undefined)_\n- **--m3e-filled-card-hover-container-elevation** - Elevation level on hover. _(default: undefined)_\n- **--m3e-filled-card-focus-text-color** - Text color on focus. _(default: undefined)_\n- **--m3e-filled-card-focus-state-layer-color** - State layer color on focus. _(default: undefined)_\n- **--m3e-filled-card-focus-state-layer-opacity** - State layer opacity on focus. _(default: undefined)_\n- **--m3e-filled-card-focus-container-elevation** - Elevation level on focus. _(default: undefined)_\n- **--m3e-filled-card-pressed-text-color** - Text color on press. _(default: undefined)_\n- **--m3e-filled-card-pressed-state-layer-color** - State layer color on press. _(default: undefined)_\n- **--m3e-filled-card-pressed-state-layer-opacity** - State layer opacity on press. _(default: undefined)_\n- **--m3e-filled-card-pressed-container-elevation** - Elevation level on press. _(default: undefined)_\n- **--m3e-elevated-card-text-color** - Foreground color for text content in elevated cards. _(default: undefined)_\n- **--m3e-elevated-card-container-color** - Background color of the elevated card container. _(default: undefined)_\n- **--m3e-elevated-card-container-elevation** - Elevation level for elevated card container. _(default: undefined)_\n- **--m3e-elevated-card-disabled-text-color** - Text color when elevated card is disabled. _(default: undefined)_\n- **--m3e-elevated-card-disabled-text-opacity** - Opacity applied to text when disabled. _(default: undefined)_\n- **--m3e-elevated-card-disabled-container-color** - Background color when disabled. _(default: undefined)_\n- **--m3e-elevated-card-disabled-container-elevation** - Elevation level when disabled. _(default: undefined)_\n- **--m3e-elevated-card-disabled-container-elevation-color** - Shadow color when disabled. _(default: undefined)_\n- **--m3e-elevated-card-disabled-container-elevation-opacity** - Shadow opacity when disabled. _(default: undefined)_\n- **--m3e-elevated-card-disabled-container-opacity** - Overall container opacity when disabled. _(default: undefined)_\n- **--m3e-elevated-card-hover-text-color** - Text color on hover. _(default: undefined)_\n- **--m3e-elevated-card-hover-state-layer-color** - State layer color on hover. _(default: undefined)_\n- **--m3e-elevated-card-hover-state-layer-opacity** - State layer opacity on hover. _(default: undefined)_\n- **--m3e-elevated-card-hover-container-elevation** - Elevation level on hover. _(default: undefined)_\n- **--m3e-elevated-card-focus-text-color** - Text color on focus. _(default: undefined)_\n- **--m3e-elevated-card-focus-state-layer-color** - State layer color on focus. _(default: undefined)_\n- **--m3e-elevated-card-focus-state-layer-opacity** - State layer opacity on focus. _(default: undefined)_\n- **--m3e-elevated-card-focus-container-elevation** - Elevation level on focus. _(default: undefined)_\n- **--m3e-elevated-card-pressed-text-color** - Text color on press. _(default: undefined)_\n- **--m3e-elevated-card-pressed-state-layer-color** - State layer color on press. _(default: undefined)_\n- **--m3e-elevated-card-pressed-state-layer-opacity** - State layer opacity on press. _(default: undefined)_\n- **--m3e-elevated-card-pressed-container-elevation** - Elevation level on press. _(default: undefined)_\n- **--m3e-outlined-card-text-color** - Foreground color for text content in outlined cards. _(default: undefined)_\n- **--m3e-outlined-card-container-color** - Background color of the outlined card container. _(default: undefined)_\n- **--m3e-outlined-card-container-elevation** - Elevation level for outlined card container. _(default: undefined)_\n- **--m3e-outlined-card-outline-color** - Border color for outlined cards. _(default: undefined)_\n- **--m3e-outlined-card-outline-thickness** - Border thickness for outlined cards. _(default: undefined)_\n- **--m3e-outlined-card-disabled-text-color** - Text color when outlined card is disabled. _(default: undefined)_\n- **--m3e-outlined-card-disabled-text-opacity** - Opacity applied to text when disabled. _(default: undefined)_\n- **--m3e-outlined-card-disabled-container-elevation** - Elevation level when disabled. _(default: undefined)_\n- **--m3e-outlined-card-disabled-container-elevation-color** - Shadow color when disabled. _(default: undefined)_\n- **--m3e-outlined-card-disabled-container-elevation-opacity** - Shadow opacity when disabled. _(default: undefined)_\n- **--m3e-outlined-card-disabled-outline-color** - Border color when disabled. _(default: undefined)_\n- **--m3e-outlined-card-disabled-outline-opacity** - Border opacity when disabled. _(default: undefined)_\n- **--m3e-outlined-card-hover-text-color** - Text color on hover. _(default: undefined)_\n- **--m3e-outlined-card-hover-state-layer-color** - State layer color on hover. _(default: undefined)_\n- **--m3e-outlined-card-hover-state-layer-opacity** - State layer opacity on hover. _(default: undefined)_\n- **--m3e-outlined-card-hover-container-elevation** - Elevation level on hover. _(default: undefined)_\n- **--m3e-outlined-card-hover-outline-color** - Border color on hover. _(default: undefined)_\n- **--m3e-outlined-card-focus-text-color** - Text color on focus. _(default: undefined)_\n- **--m3e-outlined-card-focus-state-layer-color** - State layer color on focus. _(default: undefined)_\n- **--m3e-outlined-card-focus-state-layer-opacity** - State layer opacity on focus. _(default: undefined)_\n- **--m3e-outlined-card-focus-container-elevation** - Elevation level on focus. _(default: undefined)_\n- **--m3e-outlined-card-focus-outline-color** - Border color on focus. _(default: undefined)_\n- **--m3e-outlined-card-pressed-text-color** - Text color on press. _(default: undefined)_\n- **--m3e-outlined-card-pressed-state-layer-color** - State layer color on press. _(default: undefined)_\n- **--m3e-outlined-card-pressed-state-layer-opacity** - State layer opacity on press. _(default: undefined)_\n- **--m3e-outlined-card-pressed-container-elevation** - Elevation level on press. _(default: undefined)_\n- **--m3e-outlined-card-pressed-outline-color** - Border color on press. _(default: undefined)_",
@@ -684,6 +647,43 @@
       ],
       "references": []
     },
+    {
+      "name": "m3e-checkbox",
+      "description": "A checkbox that allows a user to select one or more options from a limited number of choices.\n---\n\n\n### **Events:**\n - **input** - Emitted when the checked state changes.\n- **change** - Emitted when the checked state changes.\n- **invalid** - Emitted when a form is submitted and the element fails constraint validation.\n- **click** - Emitted when the element is clicked.\n\n### **Methods:**\n - **markAsPristine(): _void_** - Marks the element as pristine.\n- **markAsDirty(): _void_** - Marks the element as dirty.\n- **markAsTouched(): _void_** - Marks the element as touched.\n- **markAsUntouched(): _void_** - Marks the element as untouched.\n- **reportValidity(): _boolean_** - Returns `true` if the element has no validity problems; otherwise, returns `false`, fires\r\nan invalid event, and (if the event isn't canceled) reports the problem to the user.\n- **checkValidity(): _boolean_** - Returns `true` if the element has no validity problems; otherwise,\r\nreturns `false`, fires an invalid event.\n- **setCustomValidity(error: _string_): _void_** - Sets a custom validity message for the element.\n- **formDisabledCallback(disabled: _boolean_): _void_** - Called when the element is disabled or enabled via its form association.\n- **formResetCallback(): _void_** - Called when the associated form is reset.\n\n### **CSS Properties:**\n - **--m3e-checkbox-icon-size** - Size of the checkbox icon inside the container. _(default: undefined)_\n- **--m3e-checkbox-container-size** - Base size of the checkbox container. _(default: undefined)_\n- **--m3e-checkbox-container-shape** - Border radius of the icon container. _(default: undefined)_\n- **--m3e-checkbox-unselected-outline-thickness** - Border thickness for unselected state. _(default: undefined)_\n- **--m3e-checkbox-unselected-outline-color** - Border color for unselected state. _(default: undefined)_\n- **--m3e-checkbox-unselected-hover-outline-color** - Border color on hover when unselected. _(default: undefined)_\n- **--m3e-checkbox-unselected-disabled-outline-color** - Base color for disabled unselected outline. _(default: undefined)_\n- **--m3e-checkbox-unselected-disabled-outline-opacity** - Opacity for disabled unselected outline. _(default: undefined)_\n- **--m3e-checkbox-unselected-error-outline-color** - Border color for invalid unselected state. _(default: undefined)_\n- **--m3e-checkbox-selected-container-color** - Background color for selected container. _(default: undefined)_\n- **--m3e-checkbox-selected-icon-color** - Icon color for selected state. _(default: undefined)_\n- **--m3e-checkbox-selected-disabled-container-color** - Base color for disabled selected container. _(default: undefined)_\n- **--m3e-checkbox-selected-disabled-container-opacity** - Opacity for disabled selected container. _(default: undefined)_\n- **--m3e-checkbox-selected-disabled-icon-color** - Base color for disabled selected icon. _(default: undefined)_\n- **--m3e-checkbox-selected-disabled-icon-opacity** - Opacity for disabled selected icon. _(default: undefined)_\n- **--m3e-checkbox-unselected-hover-color** - Ripple hover color for unselected state. _(default: undefined)_\n- **--m3e-checkbox-unselected-focus-color** - Ripple focus color for unselected state. _(default: undefined)_\n- **--m3e-checkbox-unselected-ripple-color** - Ripple base color for unselected state. _(default: undefined)_\n- **--m3e-checkbox-selected-hover-color** - Ripple hover color for selected state. _(default: undefined)_\n- **--m3e-checkbox-selected-focus-color** - Ripple focus color for selected state. _(default: undefined)_\n- **--m3e-checkbox-selected-ripple-color** - Ripple base color for selected state. _(default: undefined)_\n- **--m3e-checkbox-unselected-error-hover-color** - Ripple hover color for invalid unselected state. _(default: undefined)_\n- **--m3e-checkbox-unselected-error-focus-color** - Ripple focus color for invalid unselected state. _(default: undefined)_\n- **--m3e-checkbox-unselected-error-ripple-color** - Ripple base color for invalid unselected state. _(default: undefined)_\n- **--m3e-checkbox-selected-error-hover-color** - Ripple hover color for invalid selected state. _(default: undefined)_\n- **--m3e-checkbox-selected-error-focus-color** - Ripple focus color for invalid selected state. _(default: undefined)_\n- **--m3e-checkbox-selected-error-ripple-color** - Ripple base color for invalid selected state. _(default: undefined)_",
+      "attributes": [
+        {
+          "name": "checked",
+          "description": "Whether the element is checked.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Whether the element is disabled.",
+          "values": []
+        },
+        {
+          "name": "indeterminate",
+          "description": "Whether the element's checked state is indeterminate.",
+          "values": []
+        },
+        {
+          "name": "name",
+          "description": "The name that identifies the element when submitting the associated form.",
+          "values": []
+        },
+        {
+          "name": "required",
+          "description": "Whether the element is required.",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "A string representing the value of the checkbox.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "m3e-assist-chip",
       "description": "A chip users interact with to perform a smart or automated action that can span multiple applications.\n---\n\n\n### **Events:**\n - **click** - Emitted when the element is clicked.\n\n### **Slots:**\n - _default_ - Renders the label of the chip.\n- **icon** - Renders an icon before the chip's label.\n- **trailing-icon** - Renders an icon after the chip's label.\n\n### **CSS Properties:**\n - **--m3e-chip-container-shape** - Border radius of the chip container. _(default: undefined)_\n- **--m3e-chip-container-height** - Base height of the chip container before density adjustment. _(default: undefined)_\n- **--m3e-chip-label-text-font-size** - Font size of the chip label text. _(default: undefined)_\n- **--m3e-chip-label-text-font-weight** - Font weight of the chip label text. _(default: undefined)_\n- **--m3e-chip-label-text-line-height** - Line height of the chip label text. _(default: undefined)_\n- **--m3e-chip-label-text-tracking** - Letter spacing of the chip label text. _(default: undefined)_\n- **--m3e-chip-label-text-color** - Label text color in default state. _(default: undefined)_\n- **--m3e-chip-icon-color** - Icon color in default state. _(default: undefined)_\n- **--m3e-chip-icon-size** - Font size of leading/trailing icons. _(default: undefined)_\n- **--m3e-chip-spacing** - Horizontal gap between chip content elements. _(default: undefined)_\n- **--m3e-chip-padding-start** - Default start padding when no icon is present. _(default: undefined)_\n- **--m3e-chip-padding-end** - Default end padding when no trailing icon is present. _(default: undefined)_\n- **--m3e-chip-with-icon-padding-start** - Start padding when leading icon is present. _(default: undefined)_\n- **--m3e-chip-with-icon-padding-end** - End padding when trailing icon is present. _(default: undefined)_\n- **--m3e-chip-disabled-label-text-color** - Base color for disabled label text. _(default: undefined)_\n- **--m3e-chip-disabled-label-text-opacity** - Opacity applied to disabled label text. _(default: undefined)_\n- **--m3e-chip-disabled-icon-color** - Base color for disabled icons. _(default: undefined)_\n- **--m3e-chip-disabled-icon-opacity** - Opacity applied to disabled icons. _(default: undefined)_\n- **--m3e-elevated-chip-container-color** - Background color for elevated variant. _(default: undefined)_\n- **--m3e-elevated-chip-elevation** - Elevation level for elevated variant. _(default: undefined)_\n- **--m3e-elevated-chip-hover-elevation** - Elevation level on hover. _(default: undefined)_\n- **--m3e-elevated-chip-disabled-container-color** - Background color for disabled elevated variant. _(default: undefined)_\n- **--m3e-elevated-chip-disabled-container-opacity** - Opacity applied to disabled elevated background. _(default: undefined)_\n- **--m3e-elevated-chip-disabled-elevation** - Elevation level for disabled elevated variant. _(default: undefined)_\n- **--m3e-outlined-chip-outline-thickness** - Outline thickness for outlined variant. _(default: undefined)_\n- **--m3e-outlined-chip-outline-color** - Outline color for outlined variant. _(default: undefined)_\n- **--m3e-outlined-chip-disabled-outline-color** - Outline color for disabled outlined variant. _(default: undefined)_\n- **--m3e-outlined-chip-disabled-outline-opacity** - Opacity applied to disabled outline. _(default: undefined)_",
@@ -1967,7 +1967,7 @@
     },
     {
       "name": "m3e-nav-rail",
-      "description": "A vertical bar, typically used on larger devices, that allows a user to switch between views.\n---\n\n\n### **Events:**\n - **change** - Emitted when the selected state of an item changes.\n\n### **Slots:**\n - _default_ - Renders the items of the bar.\n\n### **CSS Properties:**\n - **--m3e-nav-rail-top-space** - Top block padding for the nav rail. _(default: undefined)_\n- **--m3e-nav-rail-bottom-space** - Bottom block padding for the nav rail. _(default: undefined)_\n- **--m3e-nav-rail-compact-width** - Width of the nav rail in compact mode. _(default: undefined)_\n- **--m3e-nav-rail-expanded-inline-padding** - Inline padding for expanded nav rail. _(default: undefined)_\n- **--m3e-nav-rail-expanded-min-width** - Minimum width of the nav rail in expanded mode. _(default: undefined)_\n- **--m3e-nav-rail-expanded-max-width** - Maximum width of the nav rail in expanded mode. _(default: undefined)_\n- **--m3e-nav-rail-expanded-item-height** - Height of nav items in expanded mode. _(default: undefined)_\n- **--m3e-nav-rail-button-item-space** - Space below icon buttons and FABs. _(default: undefined)_\n- **--m3e-nav-rail-expanded-icon-button-inset** - Inset for icon buttons in expanded mode. _(default: undefined)_\n- **--m3e-nav-bar-height** - Height of the navigation bar. _(default: undefined)_\n- **--m3e-nav-bar-container-color** - Background color of the navigation bar container. _(default: undefined)_\n- **--m3e-nav-bar-vertical-item-width** - Minimum width of vertical nav items. _(default: undefined)_",
+      "description": "A vertical bar, typically used on larger devices, that allows a user to switch between views.\n---\n\n\n### **Events:**\n - **change** - Emitted when the selected state of an item changes.\n\n### **Slots:**\n - _default_ - Renders the items of the bar.\n\n### **CSS Properties:**\n - **--m3e-nav-rail-top-space** - Top block padding for the nav rail. _(default: undefined)_\n- **--m3e-nav-rail-bottom-space** - Bottom block padding for the nav rail. _(default: undefined)_\n- **--m3e-nav-rail-compact-width** - Width of the nav rail in compact mode. _(default: undefined)_\n- **--m3e-nav-rail-inline-padding** - Inline padding for nav rail. _(default: undefined)_\n- **--m3e-nav-rail-expanded-width** - Width of the nav rail in expanded mode. _(default: undefined)_\n- **--m3e-nav-rail-expanded-item-height** - Height of nav items in expanded mode. _(default: undefined)_\n- **--m3e-nav-rail-button-item-space** - Space below icon buttons and FABs. _(default: undefined)_\n- **--m3e-nav-rail-icon-button-inset** - Inset for icon buttons. _(default: undefined)_\n- **--m3e-nav-rail-expanded-inline-padding** - Deprecated, use `--m3e-nav-rail-inline-padding`. _(default: undefined)_\n- **--m3e-nav-rail-expanded-min-width** - Deprecated, use `--m3e-nav-rail-expanded-width`. _(default: undefined)_\n- **--m3e-nav-rail-expanded-max-width** - Deprecated, use `--m3e-nav-rail-expanded-width`. _(default: undefined)_\n- **--m3e-nav-rail-expanded-icon-button-inset** - Deprecated, use `--m3e-nav-rail-icon-button-inset`. _(default: undefined)_\n- **--m3e-nav-bar-height** - Height of the navigation bar. _(default: undefined)_\n- **--m3e-nav-bar-container-color** - Background color of the navigation bar container. _(default: undefined)_\n- **--m3e-nav-bar-vertical-item-width** - Minimum width of vertical nav items. _(default: undefined)_",
       "attributes": [
         {
           "name": "mode",
@@ -3117,6 +3117,16 @@
           "name": "open",
           "description": "Whether content is visible.",
           "values": []
+        },
+        {
+          "name": "orientation",
+          "description": "Orientation of collapsible content.",
+          "values": [{ "name": "CollapsibleOrientation" }]
+        },
+        {
+          "name": "no-animate",
+          "description": "Whether to disable animation.",
+          "values": []
         }
       ],
       "references": []