esp-web-tools
Version:
Web tools for ESP devices
119 lines (118 loc) • 300 kB
JavaScript
import{e,_ as t,o as i,s as r,x as o,i as s,n as a,t as n,r as l,a as d,T as c,b as h,c as p,D as f,d as u,f as m,g as v,h as g,j as y,m as b,k as _,l as x,E as w,p as E,q as k,u as A,w as S,v as R,y as T,z as I}from"./styles-ChWDJ3ue.js";let C;function B(e,t=P){const i=O(e,t);return i&&(i.tabIndex=0,i.focus()),i}function $(e,t=P){const i=z(e,t);return i&&(i.tabIndex=0,i.focus()),i}function L(e,t=P){for(let i=0;i<e.length;i++){const r=e[i];if(0===r.tabIndex&&t(r))return{item:r,index:i}}return null}function O(e,t=P){for(const i of e)if(t(i))return i;return null}function z(e,t=P){for(let i=e.length-1;i>=0;i--){const r=e[i];if(t(r))return r}return null}function U(e,t,i=P){if(t){const r=function(e,t,i=P){for(let r=1;r<e.length;r++){const o=e[(r+t)%e.length];if(i(o))return o}return e[t]?e[t]:null}(e,t.index,i);return r&&(r.tabIndex=0,r.focus()),r}return B(e,i)}function D(e,t,i=P){if(t){const r=function(e,t,i=P){for(let r=1;r<e.length;r++){const o=e[(t-r+e.length)%e.length];if(i(o))return o}return e[t]?e[t]:null}(e,t.index,i);return r&&(r.tabIndex=0,r.focus()),r}return $(e,i)}function P(e){return!e.disabled}const F={ArrowDown:"ArrowDown",ArrowLeft:"ArrowLeft",ArrowUp:"ArrowUp",ArrowRight:"ArrowRight",Home:"Home",End:"End"};class M{constructor(e){this.handleKeydown=e=>{const t=e.key;if(e.defaultPrevented||!this.isNavigableKey(t))return;const i=this.items;if(!i.length)return;const r=L(i,this.isActivatable);r&&(r.item.tabIndex=-1),e.preventDefault();const o=this.isRtl();switch(t){case F.ArrowDown:case o?F.ArrowLeft:F.ArrowRight:U(i,r,this.isActivatable);break;case F.ArrowUp:case o?F.ArrowRight:F.ArrowLeft:D(i,r,this.isActivatable);break;case F.Home:B(i,this.isActivatable);break;case F.End:$(i,this.isActivatable)}},this.onDeactivateItems=()=>{const e=this.items;for(const t of e)this.deactivateItem(t)},this.onRequestActivation=e=>{this.onDeactivateItems();const t=e.target;this.activateItem(t),t.focus()},this.onSlotchange=()=>{const e=this.items;let t=!1;for(const i of e){!(!i.disabled&&i.tabIndex>-1)||t?i.tabIndex=-1:(t=!0,i.tabIndex=0)}if(t)return;const i=O(e,this.isActivatable);i&&(i.tabIndex=0)};const{isItem:t,getPossibleItems:i,isRtl:r,deactivateItem:o,activateItem:s,isNavigableKey:a,isActivatable:n}=e;this.isItem=t,this.getPossibleItems=i,this.isRtl=r,this.deactivateItem=o,this.activateItem=s,this.isNavigableKey=a,this.isActivatable=n}get items(){const e=this.getPossibleItems(),t=[];for(const i of e){if(this.isItem(i)){t.push(i);continue}const e=i.item;e&&this.isItem(e)&&t.push(e)}return t}activateNextItem(){const e=this.items,t=L(e,this.isActivatable);return t&&(t.item.tabIndex=-1),U(e,t,this.isActivatable)}activatePreviousItem(){const e=this.items,t=L(e,this.isActivatable);return t&&(t.item.tabIndex=-1),D(e,t,this.isActivatable)}}const N=new Set(Object.values(F));class H extends r{get items(){return this.listController.items}constructor(){super(),this.listController=new M({isItem:e=>e.hasAttribute("md-list-item"),getPossibleItems:()=>this.slotItems,isRtl:()=>"rtl"===getComputedStyle(this).direction,deactivateItem:e=>{e.tabIndex=-1},activateItem:e=>{e.tabIndex=0},isNavigableKey:e=>N.has(e),isActivatable:e=>!e.disabled&&"text"!==e.type}),this.internals=this.attachInternals(),this.internals.role="list",this.addEventListener("keydown",this.listController.handleKeydown)}render(){return o`
<slot
@deactivate-items=${this.listController.onDeactivateItems}
@request-activation=${this.listController.onRequestActivation}
@slotchange=${this.listController.onSlotchange}>
</slot>
`}activateNextItem(){return this.listController.activateNextItem()}activatePreviousItem(){return this.listController.activatePreviousItem()}}t([i({flatten:!0})],H.prototype,"slotItems",void 0);const q=s`:host{background:var(--md-list-container-color, var(--md-sys-color-surface, #fef7ff));color:unset;display:flex;flex-direction:column;outline:none;padding:8px 0;position:relative}/*# sourceMappingURL=list-styles.css.map */
`;class W extends H{}W.styles=[q],customElements.define("ew-list",W);class Z extends r{constructor(){super(...arguments),this.multiline=!1}render(){return o`
<slot name="container"></slot>
<slot class="non-text" name="start"></slot>
<div class="text">
<slot name="overline" @slotchange=${this.handleTextSlotChange}></slot>
<slot
class="default-slot"
@slotchange=${this.handleTextSlotChange}></slot>
<slot name="headline" @slotchange=${this.handleTextSlotChange}></slot>
<slot
name="supporting-text"
@slotchange=${this.handleTextSlotChange}></slot>
</div>
<slot class="non-text" name="trailing-supporting-text"></slot>
<slot class="non-text" name="end"></slot>
`}handleTextSlotChange(){let e=!1,t=0;for(const i of this.textSlots)if(V(i)&&(t+=1),t>1){e=!0;break}this.multiline=e}}function V(e){for(const t of e.assignedNodes({flatten:!0})){const e=t.nodeType===Node.ELEMENT_NODE,i=t.nodeType===Node.TEXT_NODE&&t.textContent?.match(/\S/);if(e||i)return!0}return!1}t([a({type:Boolean,reflect:!0})],Z.prototype,"multiline",void 0),t([function(t){return(i,r)=>e(i,r,{get(){return(this.renderRoot??C??(C=document.createDocumentFragment())).querySelectorAll(t)}})}(".text slot")],Z.prototype,"textSlots",void 0);const G=s`:host{color:var(--md-sys-color-on-surface, #1d1b20);font-family:var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto));font-size:var(--md-sys-typescale-body-large-size, 1rem);font-weight:var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400));line-height:var(--md-sys-typescale-body-large-line-height, 1.5rem);align-items:center;box-sizing:border-box;display:flex;gap:16px;min-height:56px;overflow:hidden;padding:12px 16px;position:relative;text-overflow:ellipsis}:host([multiline]){min-height:72px}[name=overline]{color:var(--md-sys-color-on-surface-variant, #49454f);font-family:var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto));font-size:var(--md-sys-typescale-label-small-size, 0.6875rem);font-weight:var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500));line-height:var(--md-sys-typescale-label-small-line-height, 1rem)}[name=supporting-text]{color:var(--md-sys-color-on-surface-variant, #49454f);font-family:var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto));font-size:var(--md-sys-typescale-body-medium-size, 0.875rem);font-weight:var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400));line-height:var(--md-sys-typescale-body-medium-line-height, 1.25rem)}[name=trailing-supporting-text]{color:var(--md-sys-color-on-surface-variant, #49454f);font-family:var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto));font-size:var(--md-sys-typescale-label-small-size, 0.6875rem);font-weight:var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500));line-height:var(--md-sys-typescale-label-small-line-height, 1rem)}[name=container]::slotted(*){inset:0;position:absolute}.default-slot{display:inline}.default-slot,.text ::slotted(*){overflow:hidden;text-overflow:ellipsis}.text{display:flex;flex:1;flex-direction:column;overflow:hidden}/*# sourceMappingURL=item-styles.css.map */
`;let j=class extends Z{};j.styles=[G],j=t([n("md-item")],j);const K=Symbol.for(""),Y=e=>{if(e?.r===K)return e?._$litStatic$},X=(e,...t)=>({_$litStatic$:t.reduce(((t,i,r)=>t+(e=>{if(void 0!==e._$litStatic$)return e._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${e}. Use 'unsafeStatic' to pass non-literal values, but\n take care to ensure page security.`)})(i)+e[r+1]),e[0]),r:K}),J=new Map,Q=(e=>(t,...i)=>{const r=i.length;let o,s;const a=[],n=[];let l,d=0,c=!1;for(;d<r;){for(l=t[d];d<r&&void 0!==(s=i[d],o=Y(s));)l+=o+t[++d],c=!0;d!==r&&n.push(s),a.push(l),d++}if(d===r&&a.push(t[r]),c){const e=a.join("$$lit$$");void 0===(t=J.get(e))&&(a.raw=a,J.set(e,t=a)),i=n}return e(t,...i)})(o);class ee extends r{constructor(){super(...arguments),this.disabled=!1,this.type="text",this.isListItem=!0,this.href="",this.target=""}get isDisabled(){return this.disabled&&"link"!==this.type}willUpdate(e){this.href&&(this.type="link"),super.willUpdate(e)}render(){return this.renderListItem(o`
<md-item>
<div slot="container">
${this.renderRipple()} ${this.renderFocusRing()}
</div>
<slot name="start" slot="start"></slot>
<slot name="end" slot="end"></slot>
${this.renderBody()}
</md-item>
`)}renderListItem(e){const t="link"===this.type;let i;switch(this.type){case"link":i=X`a`;break;case"button":i=X`button`;break;default:i=X`li`}const r="text"!==this.type,o=t&&this.target?this.target:c;return Q`
<${i}
id="item"
tabindex="${this.isDisabled||!r?-1:0}"
?disabled=${this.isDisabled}
role="listitem"
aria-selected=${this.ariaSelected||c}
aria-checked=${this.ariaChecked||c}
aria-expanded=${this.ariaExpanded||c}
aria-haspopup=${this.ariaHasPopup||c}
class="list-item ${h(this.getRenderClasses())}"
href=${this.href||c}
target=${o}
@focus=${this.onFocus}
>${e}</${i}>
`}renderRipple(){return"text"===this.type?c:o` <md-ripple
part="ripple"
for="item"
?disabled=${this.isDisabled}></md-ripple>`}renderFocusRing(){return"text"===this.type?c:o` <md-focus-ring
@visibility-changed=${this.onFocusRingVisibilityChanged}
part="focus-ring"
for="item"
inward></md-focus-ring>`}onFocusRingVisibilityChanged(e){}getRenderClasses(){return{disabled:this.isDisabled}}renderBody(){return o`
<slot></slot>
<slot name="overline" slot="overline"></slot>
<slot name="headline" slot="headline"></slot>
<slot name="supporting-text" slot="supporting-text"></slot>
<slot
name="trailing-supporting-text"
slot="trailing-supporting-text"></slot>
`}onFocus(){-1===this.tabIndex&&this.dispatchEvent(new Event("request-activation",{bubbles:!0,composed:!0}))}focus(){this.listItemRoot?.focus()}}l(ee),ee.shadowRootOptions={...r.shadowRootOptions,delegatesFocus:!0},t([a({type:Boolean,reflect:!0})],ee.prototype,"disabled",void 0),t([a({reflect:!0})],ee.prototype,"type",void 0),t([a({type:Boolean,attribute:"md-list-item",reflect:!0})],ee.prototype,"isListItem",void 0),t([a()],ee.prototype,"href",void 0),t([a()],ee.prototype,"target",void 0),t([d(".list-item")],ee.prototype,"listItemRoot",void 0);const te=s`:host{display:flex;-webkit-tap-highlight-color:rgba(0,0,0,0);--md-ripple-hover-color: var(--md-list-item-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-list-item-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-list-item-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-list-item-pressed-state-layer-opacity, 0.12)}:host(:is([type=button]:not([disabled]),[type=link])){cursor:pointer}md-focus-ring{z-index:1;--md-focus-ring-shape: 8px}a,button,li{background:none;border:none;cursor:inherit;padding:0;margin:0;text-align:unset;text-decoration:none}.list-item{border-radius:inherit;display:flex;flex:1;max-width:inherit;min-width:inherit;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);width:100%}.list-item.interactive{cursor:pointer}.list-item.disabled{opacity:var(--md-list-item-disabled-opacity, 0.3);pointer-events:none}[slot=container]{pointer-events:none}md-ripple{border-radius:inherit}md-item{border-radius:inherit;flex:1;height:100%;color:var(--md-list-item-label-text-color, var(--md-sys-color-on-surface, #1d1b20));font-family:var(--md-list-item-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-list-item-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));line-height:var(--md-list-item-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));font-weight:var(--md-list-item-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));min-height:var(--md-list-item-one-line-container-height, 56px);padding-top:var(--md-list-item-top-space, 12px);padding-bottom:var(--md-list-item-bottom-space, 12px);padding-inline-start:var(--md-list-item-leading-space, 16px);padding-inline-end:var(--md-list-item-trailing-space, 16px)}md-item[multiline]{min-height:var(--md-list-item-two-line-container-height, 72px)}[slot=supporting-text]{color:var(--md-list-item-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-list-item-supporting-text-font, var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-list-item-supporting-text-size, var(--md-sys-typescale-body-medium-size, 0.875rem));line-height:var(--md-list-item-supporting-text-line-height, var(--md-sys-typescale-body-medium-line-height, 1.25rem));font-weight:var(--md-list-item-supporting-text-weight, var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400)))}[slot=trailing-supporting-text]{color:var(--md-list-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));font-family:var(--md-list-item-trailing-supporting-text-font, var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto)));font-size:var(--md-list-item-trailing-supporting-text-size, var(--md-sys-typescale-label-small-size, 0.6875rem));line-height:var(--md-list-item-trailing-supporting-text-line-height, var(--md-sys-typescale-label-small-line-height, 1rem));font-weight:var(--md-list-item-trailing-supporting-text-weight, var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500)))}:is([slot=start],[slot=end])::slotted(*){fill:currentColor}[slot=start]{color:var(--md-list-item-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}[slot=end]{color:var(--md-list-item-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f))}@media(forced-colors: active){.disabled slot{color:GrayText}.list-item.disabled{color:GrayText;opacity:1}}/*# sourceMappingURL=list-item-styles.css.map */
`;class ie extends ee{}ie.styles=[te],customElements.define("ew-list-item",ie);class re extends f{}re.styles=[p],customElements.define("ew-divider",re);const oe=Symbol("createValidator"),se=Symbol("getValidityAnchor"),ae=Symbol("privateValidator"),ne=Symbol("privateSyncValidity"),le=Symbol("privateCustomValidationMessage");function de(e){var t;class i extends e{constructor(){super(...arguments),this[t]=""}get validity(){return this[ne](),this[u].validity}get validationMessage(){return this[ne](),this[u].validationMessage}get willValidate(){return this[ne](),this[u].willValidate}checkValidity(){return this[ne](),this[u].checkValidity()}reportValidity(){return this[ne](),this[u].reportValidity()}setCustomValidity(e){this[le]=e,this[ne]()}requestUpdate(e,t,i){super.requestUpdate(e,t,i),this[ne]()}firstUpdated(e){super.firstUpdated(e),this[ne]()}[(t=le,ne)](){this[ae]||(this[ae]=this[oe]());const{validity:e,validationMessage:t}=this[ae].getValidity(),i=!!this[le],r=this[le]||t;this[u].setValidity({...e,customError:i},r,this[se]()??void 0)}[oe](){throw new Error("Implement [createValidator]")}[se](){throw new Error("Implement [getValidityAnchor]")}}return i}const ce=Symbol("getFormValue"),he=Symbol("getFormState");function pe(e){class i extends e{get form(){return this[u].form}get labels(){return this[u].labels}get name(){return this.getAttribute("name")??""}set name(e){this.setAttribute("name",e)}get disabled(){return this.hasAttribute("disabled")}set disabled(e){this.toggleAttribute("disabled",e)}attributeChangedCallback(e,t,i){if("name"!==e&&"disabled"!==e)super.attributeChangedCallback(e,t,i);else{const i="disabled"===e?null!==t:t;this.requestUpdate(e,i)}}requestUpdate(e,t,i){super.requestUpdate(e,t,i),this[u].setFormValue(this[ce](),this[he]())}[ce](){throw new Error("Implement [getFormValue]")}[he](){return this[ce]()}formDisabledCallback(e){this.disabled=e}}return i.formAssociated=!0,t([a({noAccessor:!0})],i.prototype,"name",null),t([a({type:Boolean,noAccessor:!0})],i.prototype,"disabled",null),i}class fe{constructor(e){this.getCurrentState=e,this.currentValidity={validity:{},validationMessage:""}}getValidity(){const e=this.getCurrentState();if(!(!this.prevState||!this.equals(this.prevState,e)))return this.currentValidity;const{validity:t,validationMessage:i}=this.computeValidity(e);return this.prevState=this.copy(e),this.currentValidity={validationMessage:i,validity:{badInput:t.badInput,customError:t.customError,patternMismatch:t.patternMismatch,rangeOverflow:t.rangeOverflow,rangeUnderflow:t.rangeUnderflow,stepMismatch:t.stepMismatch,tooLong:t.tooLong,tooShort:t.tooShort,typeMismatch:t.typeMismatch,valueMissing:t.valueMissing}},this.currentValidity}}class ue extends fe{computeValidity(e){return this.checkboxControl||(this.checkboxControl=document.createElement("input"),this.checkboxControl.type="checkbox"),this.checkboxControl.checked=e.checked,this.checkboxControl.required=e.required,{validity:this.checkboxControl.validity,validationMessage:this.checkboxControl.validationMessage}}equals(e,t){return e.checked===t.checked&&e.required===t.required}copy({checked:e,required:t}){return{checked:e,required:t}}}const me=de(pe(b(r)));class ve extends me{constructor(){super(),this.checked=!1,this.indeterminate=!1,this.required=!1,this.value="on",this.prevChecked=!1,this.prevDisabled=!1,this.prevIndeterminate=!1,this.addEventListener("click",(e=>{v(e)&&this.input&&(this.focus(),g(this.input))}))}update(e){(e.has("checked")||e.has("disabled")||e.has("indeterminate"))&&(this.prevChecked=e.get("checked")??this.checked,this.prevDisabled=e.get("disabled")??this.disabled,this.prevIndeterminate=e.get("indeterminate")??this.indeterminate),super.update(e)}render(){const e=!this.prevChecked&&!this.prevIndeterminate,t=this.prevChecked&&!this.prevIndeterminate,i=this.prevIndeterminate,r=this.checked&&!this.indeterminate,s=this.indeterminate,a=h({disabled:this.disabled,selected:r||s,unselected:!r&&!s,checked:r,indeterminate:s,"prev-unselected":e,"prev-checked":t,"prev-indeterminate":i,"prev-disabled":this.prevDisabled}),{ariaLabel:n,ariaInvalid:l}=this;return o`
<div class="container ${a}">
<input
type="checkbox"
id="input"
aria-checked=${s?"mixed":c}
aria-label=${n||c}
aria-invalid=${l||c}
?disabled=${this.disabled}
?required=${this.required}
.indeterminate=${this.indeterminate}
.checked=${this.checked}
@input=${this.handleInput}
@change=${this.handleChange} />
<div class="outline"></div>
<div class="background"></div>
<md-focus-ring part="focus-ring" for="input"></md-focus-ring>
<md-ripple for="input" ?disabled=${this.disabled}></md-ripple>
<svg class="icon" viewBox="0 0 18 18" aria-hidden="true">
<rect class="mark short" />
<rect class="mark long" />
</svg>
</div>
`}handleInput(e){const t=e.target;this.checked=t.checked,this.indeterminate=t.indeterminate}handleChange(e){y(this,e)}[ce](){return!this.checked||this.indeterminate?null:this.value}[he](){return String(this.checked)}formResetCallback(){this.checked=this.hasAttribute("checked")}formStateRestoreCallback(e){this.checked="true"===e}[oe](){return new ue((()=>this))}[se](){return this.input}}l(ve),ve.shadowRootOptions={...r.shadowRootOptions,delegatesFocus:!0},t([a({type:Boolean})],ve.prototype,"checked",void 0),t([a({type:Boolean})],ve.prototype,"indeterminate",void 0),t([a({type:Boolean})],ve.prototype,"required",void 0),t([a()],ve.prototype,"value",void 0),t([m()],ve.prototype,"prevChecked",void 0),t([m()],ve.prototype,"prevDisabled",void 0),t([m()],ve.prototype,"prevIndeterminate",void 0),t([d("input")],ve.prototype,"input",void 0);const ge=s`:host{border-start-start-radius:var(--md-checkbox-container-shape-start-start, var(--md-checkbox-container-shape, 2px));border-start-end-radius:var(--md-checkbox-container-shape-start-end, var(--md-checkbox-container-shape, 2px));border-end-end-radius:var(--md-checkbox-container-shape-end-end, var(--md-checkbox-container-shape, 2px));border-end-start-radius:var(--md-checkbox-container-shape-end-start, var(--md-checkbox-container-shape, 2px));display:inline-flex;height:var(--md-checkbox-container-size, 18px);position:relative;vertical-align:top;width:var(--md-checkbox-container-size, 18px);-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer}:host([disabled]){cursor:default}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--md-checkbox-container-size, 18px))/2)}md-focus-ring{height:44px;inset:unset;width:44px}input{appearance:none;height:48px;margin:0;opacity:0;outline:none;position:absolute;width:48px;z-index:1;cursor:inherit}:host([touch-target=none]) input{height:100%;width:100%}.container{border-radius:inherit;display:flex;height:100%;place-content:center;place-items:center;position:relative;width:100%}.outline,.background,.icon{inset:0;position:absolute}.outline,.background{border-radius:inherit}.outline{border-color:var(--md-checkbox-outline-color, var(--md-sys-color-on-surface-variant, #49454f));border-style:solid;border-width:var(--md-checkbox-outline-width, 2px);box-sizing:border-box}.background{background-color:var(--md-checkbox-selected-container-color, var(--md-sys-color-primary, #6750a4))}.background,.icon{opacity:0;transition-duration:150ms,50ms;transition-property:transform,opacity;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15),linear;transform:scale(0.6)}:where(.selected) :is(.background,.icon){opacity:1;transition-duration:350ms,50ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1),linear;transform:scale(1)}md-ripple{border-radius:var(--md-checkbox-state-layer-shape, 9999px);height:var(--md-checkbox-state-layer-size, 40px);inset:unset;width:var(--md-checkbox-state-layer-size, 40px);--md-ripple-hover-color: var(--md-checkbox-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-checkbox-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-checkbox-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-opacity: var(--md-checkbox-pressed-state-layer-opacity, 0.12)}.selected md-ripple{--md-ripple-hover-color: var(--md-checkbox-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-opacity: var(--md-checkbox-selected-hover-state-layer-opacity, 0.08);--md-ripple-pressed-color: var(--md-checkbox-selected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-opacity: var(--md-checkbox-selected-pressed-state-layer-opacity, 0.12)}.icon{fill:var(--md-checkbox-selected-icon-color, var(--md-sys-color-on-primary, #fff));height:var(--md-checkbox-icon-size, 18px);width:var(--md-checkbox-icon-size, 18px)}.mark.short{height:2px;transition-property:transform,height;width:2px}.mark.long{height:2px;transition-property:transform,width;width:10px}.mark{animation-duration:150ms;animation-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15);transition-duration:150ms;transition-timing-function:cubic-bezier(0.3, 0, 0.8, 0.15)}.selected .mark{animation-duration:350ms;animation-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1);transition-duration:350ms;transition-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1)}.checked .mark,.prev-checked.unselected .mark{transform:scaleY(-1) translate(7px, -14px) rotate(45deg)}.checked .mark.short,.prev-checked.unselected .mark.short{height:5.6568542495px}.checked .mark.long,.prev-checked.unselected .mark.long{width:11.313708499px}.indeterminate .mark,.prev-indeterminate.unselected .mark{transform:scaleY(-1) translate(4px, -10px) rotate(0deg)}.prev-unselected .mark{transition-property:none}.prev-unselected.checked .mark.long{animation-name:prev-unselected-to-checked}@keyframes prev-unselected-to-checked{from{width:0}}:where(:hover) .outline{border-color:var(--md-checkbox-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-hover-outline-width, 2px)}:where(:hover) .background{background:var(--md-checkbox-selected-hover-container-color, var(--md-sys-color-primary, #6750a4))}:where(:hover) .icon{fill:var(--md-checkbox-selected-hover-icon-color, var(--md-sys-color-on-primary, #fff))}:where(:focus-within) .outline{border-color:var(--md-checkbox-focus-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-focus-outline-width, 2px)}:where(:focus-within) .background{background:var(--md-checkbox-selected-focus-container-color, var(--md-sys-color-primary, #6750a4))}:where(:focus-within) .icon{fill:var(--md-checkbox-selected-focus-icon-color, var(--md-sys-color-on-primary, #fff))}:where(:active) .outline{border-color:var(--md-checkbox-pressed-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-pressed-outline-width, 2px)}:where(:active) .background{background:var(--md-checkbox-selected-pressed-container-color, var(--md-sys-color-primary, #6750a4))}:where(:active) .icon{fill:var(--md-checkbox-selected-pressed-icon-color, var(--md-sys-color-on-primary, #fff))}:where(.disabled,.prev-disabled) :is(.background,.icon,.mark){animation-duration:0s;transition-duration:0s}:where(.disabled) .outline{border-color:var(--md-checkbox-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));border-width:var(--md-checkbox-disabled-outline-width, 2px);opacity:var(--md-checkbox-disabled-container-opacity, 0.38)}:where(.selected.disabled) .outline{visibility:hidden}:where(.selected.disabled) .background{background:var(--md-checkbox-selected-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-checkbox-selected-disabled-container-opacity, 0.38)}:where(.disabled) .icon{fill:var(--md-checkbox-selected-disabled-icon-color, var(--md-sys-color-surface, #fef7ff))}@media(forced-colors: active){.background{background-color:CanvasText}.selected.disabled .background{background-color:GrayText;opacity:1}.outline{border-color:CanvasText}.disabled .outline{border-color:GrayText;opacity:1}.icon{fill:Canvas}}/*# sourceMappingURL=checkbox-styles.css.map */
`;class ye extends ve{}ye.styles=[ge],customElements.define("ew-checkbox",ye);class be{constructor(e){this.targetElement=e,this.state={bold:!1,italic:!1,underline:!1,strikethrough:!1,foregroundColor:null,backgroundColor:null,carriageReturn:!1,secret:!1}}logs(){return this.targetElement.innerText}addLine(e){const t=/(?:\033|\\033)(?:\[(.*?)[@-~]|\].*?(?:\007|\033\\))/g;let i=0;this.state.carriageReturn&&("\n"!==e&&this.targetElement.removeChild(this.targetElement.lastChild),this.state.carriageReturn=!1),e.includes("\r")&&(this.state.carriageReturn=!0);const r=document.createElement("span");r.classList.add("line"),this.targetElement.appendChild(r);const o=e=>{if(""===e)return;const t=document.createElement("span");if(this.state.bold&&t.classList.add("log-bold"),this.state.italic&&t.classList.add("log-italic"),this.state.underline&&t.classList.add("log-underline"),this.state.strikethrough&&t.classList.add("log-strikethrough"),this.state.secret&&t.classList.add("log-secret"),null!==this.state.foregroundColor&&t.classList.add(`log-fg-${this.state.foregroundColor}`),null!==this.state.backgroundColor&&t.classList.add(`log-bg-${this.state.backgroundColor}`),t.appendChild(document.createTextNode(e)),r.appendChild(t),this.state.secret){const e=document.createElement("span");e.classList.add("log-secret-redacted"),e.appendChild(document.createTextNode("[redacted]")),r.appendChild(e)}};for(;;){const r=t.exec(e);if(null===r)break;const s=r.index;if(o(e.substring(i,s)),i=s+r[0].length,void 0!==r[1])for(const e of r[1].split(";"))switch(parseInt(e)){case 0:this.state.bold=!1,this.state.italic=!1,this.state.underline=!1,this.state.strikethrough=!1,this.state.foregroundColor=null,this.state.backgroundColor=null,this.state.secret=!1;break;case 1:this.state.bold=!0;break;case 3:this.state.italic=!0;break;case 4:this.state.underline=!0;break;case 5:this.state.secret=!0;break;case 6:this.state.secret=!1;break;case 9:this.state.strikethrough=!0;break;case 22:this.state.bold=!1;break;case 23:this.state.italic=!1;break;case 24:this.state.underline=!1;break;case 29:this.state.strikethrough=!1;break;case 30:this.state.foregroundColor="black";break;case 31:this.state.foregroundColor="red";break;case 32:this.state.foregroundColor="green";break;case 33:this.state.foregroundColor="yellow";break;case 34:this.state.foregroundColor="blue";break;case 35:this.state.foregroundColor="magenta";break;case 36:this.state.foregroundColor="cyan";break;case 37:this.state.foregroundColor="white";break;case 39:this.state.foregroundColor=null;break;case 41:this.state.backgroundColor="red";break;case 42:this.state.backgroundColor="green";break;case 43:this.state.backgroundColor="yellow";break;case 44:this.state.backgroundColor="blue";break;case 45:this.state.backgroundColor="magenta";break;case 46:this.state.backgroundColor="cyan";break;case 47:this.state.backgroundColor="white";break;case 40:case 49:this.state.backgroundColor=null}}const s=this.targetElement.scrollTop>this.targetElement.scrollHeight-this.targetElement.offsetHeight-50;o(e.substring(i)),s&&(this.targetElement.scrollTop=this.targetElement.scrollHeight)}}const _e=e=>new Promise((t=>setTimeout(t,e)));class xe{constructor(){this.chunks=""}transform(e,t){this.chunks+=e;const i=this.chunks.split("\r\n");this.chunks=i.pop(),i.forEach((e=>t.enqueue(e+"\r\n")))}flush(e){e.enqueue(this.chunks)}}class we extends HTMLElement{constructor(){super(...arguments),this.allowInput=!0}logs(){var e;return(null===(e=this._console)||void 0===e?void 0:e.logs())||""}connectedCallback(){if(this._console)return;if(this.attachShadow({mode:"open"}).innerHTML=`\n <style>\n :host, input {\n background-color: #1c1c1c;\n color: #ddd;\n font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,\n monospace;\n line-height: 1.45;\n display: flex;\n flex-direction: column;\n }\n form {\n display: flex;\n align-items: center;\n padding: 0 8px 0 16px;\n }\n input {\n flex: 1;\n padding: 4px;\n margin: 0 8px;\n border: 0;\n outline: none;\n }\n \n .log {\n flex: 1;\n background-color: #1c1c1c;\n font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,\n monospace;\n font-size: 12px;\n padding: 16px;\n overflow: auto;\n line-height: 1.45;\n border-radius: 3px;\n white-space: pre-wrap;\n overflow-wrap: break-word;\n color: #ddd;\n }\n\n .log-bold {\n font-weight: bold;\n }\n .log-italic {\n font-style: italic;\n }\n .log-underline {\n text-decoration: underline;\n }\n .log-strikethrough {\n text-decoration: line-through;\n }\n .log-underline.log-strikethrough {\n text-decoration: underline line-through;\n }\n .log-secret {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n .log-secret-redacted {\n opacity: 0;\n width: 1px;\n font-size: 1px;\n }\n .log-fg-black {\n color: rgb(128, 128, 128);\n }\n .log-fg-red {\n color: rgb(255, 0, 0);\n }\n .log-fg-green {\n color: rgb(0, 255, 0);\n }\n .log-fg-yellow {\n color: rgb(255, 255, 0);\n }\n .log-fg-blue {\n color: rgb(0, 0, 255);\n }\n .log-fg-magenta {\n color: rgb(255, 0, 255);\n }\n .log-fg-cyan {\n color: rgb(0, 255, 255);\n }\n .log-fg-white {\n color: rgb(187, 187, 187);\n }\n .log-bg-black {\n background-color: rgb(0, 0, 0);\n }\n .log-bg-red {\n background-color: rgb(255, 0, 0);\n }\n .log-bg-green {\n background-color: rgb(0, 255, 0);\n }\n .log-bg-yellow {\n background-color: rgb(255, 255, 0);\n }\n .log-bg-blue {\n background-color: rgb(0, 0, 255);\n }\n .log-bg-magenta {\n background-color: rgb(255, 0, 255);\n }\n .log-bg-cyan {\n background-color: rgb(0, 255, 255);\n }\n .log-bg-white {\n background-color: rgb(255, 255, 255);\n }\n\n </style>\n <div class="log"></div>\n ${this.allowInput?"<form>\n >\n <input autofocus>\n </form>\n ":""}\n `,this._console=new be(this.shadowRoot.querySelector("div")),this.allowInput){const e=this.shadowRoot.querySelector("input");this.addEventListener("click",(()=>{var t;""===(null===(t=getSelection())||void 0===t?void 0:t.toString())&&e.focus()})),e.addEventListener("keydown",(e=>{"Enter"===e.key&&(e.preventDefault(),e.stopPropagation(),this._sendCommand())}))}const e=new AbortController,t=this._connect(e.signal);this._cancelConnection=()=>(e.abort(),t)}async _connect(e){this.logger.debug("Starting console read loop");try{await this.port.readable.pipeThrough(new TextDecoderStream,{signal:e}).pipeThrough(new TransformStream(new xe)).pipeTo(new WritableStream({write:e=>{this._console.addLine(e.replace("\r",""))}})),e.aborted||(this._console.addLine(""),this._console.addLine(""),this._console.addLine("Terminal disconnected"))}catch(e){this._console.addLine(""),this._console.addLine(""),this._console.addLine(`Terminal disconnected: ${e}`)}finally{await _e(100),this.logger.debug("Finished console read loop")}}async _sendCommand(){const e=this.shadowRoot.querySelector("input"),t=e.value,i=new TextEncoder,r=this.port.writable.getWriter();await r.write(i.encode(t+"\r\n")),this._console.addLine(`> ${t}\r\n`),e.value="",e.focus();try{r.releaseLock()}catch(e){console.error("Ignoring release lock error",e)}}async disconnect(){this._cancelConnection&&(await this._cancelConnection(),this._cancelConnection=void 0)}async reset(){this.logger.debug("Triggering reset"),await this.port.setSignals({dataTerminalReady:!1,requestToSend:!0}),await _e(250),await this.port.setSignals({dataTerminalReady:!1,requestToSend:!1}),await _e(250),await new Promise((e=>setTimeout(e,1e3)))}}function Ee(e,t=!0){return t&&"rtl"===getComputedStyle(e).getPropertyValue("direction").trim()}customElements.define("ewt-console",we);const ke=b(r);class Ae extends ke{constructor(){super(...arguments),this.disabled=!1,this.flipIconInRtl=!1,this.href="",this.target="",this.ariaLabelSelected="",this.toggle=!1,this.selected=!1,this.type="submit",this.value="",this.flipIcon=Ee(this,this.flipIconInRtl)}get name(){return this.getAttribute("name")??""}set name(e){this.setAttribute("name",e)}get form(){return this[u].form}get labels(){return this[u].labels}willUpdate(){this.href&&(this.disabled=!1)}render(){const e=this.href?X`div`:X`button`,{ariaLabel:t,ariaHasPopup:i,ariaExpanded:r}=this,o=t&&this.ariaLabelSelected,s=this.toggle?this.selected:c;let a=c;return this.href||(a=o&&this.selected?this.ariaLabelSelected:t),Q`<${e}
class="icon-button ${h(this.getRenderClasses())}"
id="button"
aria-label="${a||c}"
aria-haspopup="${!this.href&&i||c}"
aria-expanded="${!this.href&&r||c}"
aria-pressed="${s}"
?disabled="${!this.href&&this.disabled}"
@click="${this.handleClick}">
${this.renderFocusRing()}
${this.renderRipple()}
${this.selected?c:this.renderIcon()}
${this.selected?this.renderSelectedIcon():c}
${this.renderTouchTarget()}
${this.href&&this.renderLink()}
</${e}>`}renderLink(){const{ariaLabel:e}=this;return o`
<a
class="link"
id="link"
href="${this.href}"
target="${this.target||c}"
aria-label="${e||c}"></a>
`}getRenderClasses(){return{"flip-icon":this.flipIcon,selected:this.toggle&&this.selected}}renderIcon(){return o`<span class="icon"><slot></slot></span>`}renderSelectedIcon(){return o`<span class="icon icon--selected"
><slot name="selected"><slot></slot></slot
></span>`}renderTouchTarget(){return o`<span class="touch"></span>`}renderFocusRing(){return o`<md-focus-ring
part="focus-ring"
for=${this.href?"link":"button"}></md-focus-ring>`}renderRipple(){return o`<md-ripple
for=${this.href?"link":c}
?disabled="${!this.href&&this.disabled}"></md-ripple>`}connectedCallback(){this.flipIcon=Ee(this,this.flipIconInRtl),super.connectedCallback()}async handleClick(e){await 0,!this.toggle||this.disabled||e.defaultPrevented||(this.selected=!this.selected,this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0})))}}l(Ae),_(Ae),Ae.formAssociated=!0,Ae.shadowRootOptions={mode:"open",delegatesFocus:!0},t([a({type:Boolean,reflect:!0})],Ae.prototype,"disabled",void 0),t([a({type:Boolean,attribute:"flip-icon-in-rtl"})],Ae.prototype,"flipIconInRtl",void 0),t([a()],Ae.prototype,"href",void 0),t([a()],Ae.prototype,"target",void 0),t([a({attribute:"aria-label-selected"})],Ae.prototype,"ariaLabelSelected",void 0),t([a({type:Boolean})],Ae.prototype,"toggle",void 0),t([a({type:Boolean,reflect:!0})],Ae.prototype,"selected",void 0),t([a()],Ae.prototype,"type",void 0),t([a({reflect:!0})],Ae.prototype,"value",void 0),t([m()],Ae.prototype,"flipIcon",void 0);const Se=s`:host{display:inline-flex;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);height:var(--_container-height);width:var(--_container-width);justify-content:center}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_container-height))/2) max(0px,(48px - var(--_container-width))/2)}md-focus-ring{--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-start)}:host([disabled]){pointer-events:none}.icon-button{place-items:center;background:none;border:none;box-sizing:border-box;cursor:pointer;display:flex;place-content:center;outline:none;padding:0;position:relative;text-decoration:none;user-select:none;z-index:0;flex:1;border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.icon ::slotted(*){font-size:var(--_icon-size);height:var(--_icon-size);width:var(--_icon-size);font-weight:inherit}md-ripple{z-index:-1;border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}.flip-icon .icon{transform:scaleX(-1)}.icon{display:inline-flex}.link{height:100%;outline:none;position:absolute;width:100%}.touch{position:absolute;height:max(48px,100%);width:max(48px,100%)}:host([touch-target=none]) .touch{display:none}@media(forced-colors: active){:host([disabled]){--_disabled-icon-opacity: 1}}/*# sourceMappingURL=shared-styles.css.map */
`,Re=s`:host{--_disabled-icon-color: var(--md-icon-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-icon-opacity: var(--md-icon-button-disabled-icon-opacity, 0.38);--_icon-size: var(--md-icon-button-icon-size, 24px);--_selected-focus-icon-color: var(--md-icon-button-selected-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-icon-color: var(--md-icon-button-selected-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-color: var(--md-icon-button-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-hover-state-layer-opacity: var(--md-icon-button-selected-hover-state-layer-opacity, 0.08);--_selected-icon-color: var(--md-icon-button-selected-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-icon-color: var(--md-icon-button-selected-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-color: var(--md-icon-button-selected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_selected-pressed-state-layer-opacity: var(--md-icon-button-selected-pressed-state-layer-opacity, 0.12);--_state-layer-height: var(--md-icon-button-state-layer-height, 40px);--_state-layer-shape: var(--md-icon-button-state-layer-shape, 9999px);--_state-layer-width: var(--md-icon-button-state-layer-width, 40px);--_focus-icon-color: var(--md-icon-button-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-icon-color: var(--md-icon-button-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-icon-button-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-icon-button-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-icon-button-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-icon-color: var(--md-icon-button-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-icon-button-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-opacity: var(--md-icon-button-pressed-state-layer-opacity, 0.12);--_container-shape-start-start: 0;--_container-shape-start-end: 0;--_container-shape-end-end: 0;--_container-shape-end-start: 0;--_container-height: 0;--_container-width: 0;height:var(--_state-layer-height);width:var(--_state-layer-width)}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_state-layer-height))/2) max(0px,(48px - var(--_state-layer-width))/2)}md-focus-ring{--md-focus-ring-shape-start-start: var(--_state-layer-shape);--md-focus-ring-shape-start-end: var(--_state-layer-shape);--md-focus-ring-shape-end-end: var(--_state-layer-shape);--md-focus-ring-shape-end-start: var(--_state-layer-shape)}.standard{background-color:rgba(0,0,0,0);color:var(--_icon-color);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.standard:hover{color:var(--_hover-icon-color)}.standard:focus{color:var(--_focus-icon-color)}.standard:active{color:var(--_pressed-icon-color)}.standard:disabled{color:var(--_disabled-icon-color)}md-ripple{border-radius:var(--_state-layer-shape)}.standard:disabled .icon{opacity:var(--_disabled-icon-opacity)}.selected{--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_selected-hover-state-layer-opacity);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_selected-pressed-state-layer-opacity)}.selected:not(:disabled){color:var(--_selected-icon-color)}.selected:not(:disabled):hover{color:var(--_selected-hover-icon-color)}.selected:not(:disabled):focus{color:var(--_selected-focus-icon-color)}.selected:not(:disabled):active{color:var(--_selected-pressed-icon-color)}/*# sourceMappingURL=standard-styles.css.map */
`;class Te extends Ae{}Te.styles=[Se,Re],customElements.define("ew-icon-button",Te);const Ie=s`:host{--_leading-space: var(--md-filled-text-field-leading-space, 16px);--_trailing-space: var(--md-filled-text-field-trailing-space, 16px);--_top-space: var(--md-filled-text-field-top-space, 16px);--_bottom-space: var(--md-filled-text-field-bottom-space, 16px);--_input-text-prefix-trailing-space: var(--md-filled-text-field-input-text-prefix-trailing-space, 2px);--_input-text-suffix-leading-space: var(--md-filled-text-field-input-text-suffix-leading-space, 2px);--_with-label-top-space: var(--md-filled-text-field-with-label-top-space, 8px);--_with-label-bottom-space: var(--md-filled-text-field-with-label-bottom-space, 8px);--_focus-caret-color: var(--md-filled-text-field-focus-caret-color, var(--md-sys-color-primary, #6750a4));--_active-indicator-color: var(--md-filled-text-field-active-indicator-color, var(--md-sys-color-on-surface-variant, #49454f));--_active-indicator-height: var(--md-filled-text-field-active-indicator-height, 1px);--_caret-color: var(--md-filled-text-field-caret-color, var(--md-sys-color-primary, #6750a4));--_container-color: var(--md-filled-text-field-container-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_container-shape-start-start: var( --md-filled-text-field-container-shape-start-start, var(--md-filled-text-field-container-shape, 4px) );--_container-shape-start-end: var( --md-filled-text-field-container-shape-start-end, var(--md-filled-text-field-container-shape, 4px) );--_container-shape-end-end: var( --md-filled-text-field-container-shape-end-end, var(--md-filled-text-field-container-shape, 0px) );--_container-shape-end-start: var( --md-filled-text-field-container-shape-end-start, var(--md-filled-text-field-container-shape, 0px) );--_disabled-active-indicator-color: var(--md-filled-text-field-disabled-active-indicator-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-active-indicator-height: var(--md-filled-text-field-disabled-active-indicator-height, 1px);--_disabled-active-indicator-opacity: var(--md-filled-text-field-disabled-active-indicator-opacity, 0.38);--_disabled-container-color: var(--md-filled-text-field-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-container-opacity: var(--md-filled-text-field-disabled-container-opacity, 0.04);--_disabled-input-text-color: var(--md-filled-text-field-disabled-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-input-text-opacity: var(--md-filled-text-field-disabled-input-text-opacity, 0.38);--_disabled-label-text-color: var(--md-filled-text-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-filled-text-field-disabled-label-text-opacity, 0.38);--_disabled-leading-icon-color: var(--md-filled-text-field-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-filled-text-field-disabled-leading-icon-opacity, 0.38);--_disabled-supporting-text-color: var(--md-filled-text-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-supporting-text-opacity: var(--md-filled-text-field-disabled-supporting-text-opacity, 0.38);--_disabled-trailing-icon-color: var(--md-filled-text-field-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-icon-opacity: var(--md-filled-text-field-disabled-trailing-icon-opacity, 0.38);--_error-active-indicator-color: var(--md-filled-text-field-error-active-indicator-color, var(--md-sys-color-error, #b3261e));--_error-focus-active-indicator-color: var(--md-filled-text-field-error-focus-active-indicator-color, var(--md-sys-color-error, #b3261e));--_error-focus-caret-color: var(--md-filled-text-field-error-focus-caret-color, var(--md-sys-color-error, #b3261e));--_error-focus-input-text-color: var(--md-filled-text-field-error-focus-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_error-focus-label-text-color: var(--md-filled-text-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-leading-icon-color: var(--md-filled-text-field-error-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-focus-supporting-text-color: var(--md-filled-text-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-trailing-icon-color: var(--md-filled-text-field-error-focus-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_error-hover-active-indicator-color: var(--md-filled-text-field-error-hover-active-indicator-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-input-text-color: var(--md-filled-text-field-error-hover-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_error-hover-label-text-color: var(--md-filled-text-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-leading-icon-color: var(--md-filled-text-field-error-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-hover-state-layer-color: var(--md-filled-text-field-error-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_error-hover-state-layer-opacity: var(--md-filled-text-field-error-hover-state-layer-opacity, 0.08);--_error-hover-supporting-text-color: var(--md-filled-text-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-hover-trailing-icon-color: var(--md-filled-text-field-error-hover-trailing-icon-color, var(--md-sys-color-on-error-container, #410e0b));--_error-input-text-color: var(--md-filled-text-field-error-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_error-label-text-color: var(--md-filled-text-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_error-leading-icon-color: var(--md-filled-text-field-error-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-supporting-text-color: var(--md-filled-text-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-trailing-icon-color: var(--md-filled-text-field-error-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_focus-active-indicator-color: var(--md-filled-text-field-focus-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_focus-active-indicator-height: var(--md-filled-text-field-focus-active-indicator-height, 3px);--_focus-input-text-color: var(--md-filled-text-field-focus-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_fo