@aquera/nile-elements 0.0.6-7 → 0.0.6-8

package/dist/index.iife.js

@@ -992,10 +992,10 @@ const YM=Symbol.for(""),bM=M=>{if((null==M?void 0:M.r)===YM)return null==M?void
      * @license
      * Copyright 2020 Google LLC
      * SPDX-License-Identifier: BSD-3-Clause
-     */})(M),N}});M.NileInput=class extends GM{constructor(){super(...arguments),this.formControlController=new QM(this,{assumeInteractionOn:["nile-blur","nile-input"]}),this.hasSlotController=new hM(this,"help-text","label"),this.hasFocus=!1,this.title="",this.type="text",this.name="",this.value="",this.defaultValue="",this.size="medium",this.filled=!1,this.warning=!1,this.error=!1,this.success=!1,this.pill=!1,this.label="",this.helpText="",this.errorMessage="",this.clearable=!1,this.disabled=!1,this.placeholder="",this.readonly=!1,this.passwordToggle=!1,this.passwordVisible=!1,this.noSpinButtons=!1,this.form="",this.required=!1,this.spellcheck=!0}connectedCallback(){super.connectedCallback(),this.emit("nile-init")}disconnectedCallback(){super.disconnectedCallback(),this.emit("nile-destroy")}get valueAsDate(){const M=document.createElement("input");return M.type="date",M.value=this.value,M.valueAsDate}set valueAsDate(M){const N=document.createElement("input");N.type="date",N.valueAsDate=M,this.value=N.value}get valueAsNumber(){const M=document.createElement("input");return M.type="number",M.value=this.value,M.valueAsNumber}set valueAsNumber(M){const N=document.createElement("input");N.type="number",N.valueAsNumber=M,this.value=N.value}get validity(){return this.input.validity}get validationMessage(){return this.input.validationMessage}firstUpdated(){this.formControlController.updateValidity()}handleBlur(){this.hasFocus=!1,this.emit("nile-blur",{value:this.value})}handleChange(){this.value=this.input.value,this.emit("nile-change",{value:this.value})}handleClearClick(M){this.value="",this.emit("nile-clear",{value:this.value}),this.emit("nile-input",{value:this.value}),this.emit("nile-change",{value:this.value}),this.input.focus(),M.stopPropagation()}handleFocus(){this.hasFocus=!0,this.emit("nile-focus",{value:this.value})}handleInput(){this.value=this.input.value,this.formControlController.updateValidity(),this.emit("nile-input",{value:this.value})}handleInvalid(M){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(M)}handleKeyDown(M){const N=M.metaKey||M.ctrlKey||M.shiftKey||M.altKey;"Enter"!==M.key||N||setTimeout((()=>{M.defaultPrevented||M.isComposing||this.formControlController.submit()}))}handlePasswordToggle(){this.passwordVisible=!this.passwordVisible}handleDisabledChange(){this.formControlController.setValidity(this.disabled)}handleStepChange(){this.input.step=String(this.step),this.formControlController.updateValidity()}async handleValueChange(){await this.updateComplete,this.formControlController.updateValidity()}focus(M){this.input.focus(M)}blur(){this.input.blur()}select(){this.input.select()}setSelectionRange(M,N,D="none"){this.input.setSelectionRange(M,N,D)}setRangeText(M,N,D,i){this.input.setRangeText(M,N,D,i),this.value!==this.input.value&&(this.value=this.input.value)}stepUp(){this.input.stepUp(),this.value!==this.input.value&&(this.value=this.input.value)}stepDown(){this.input.stepDown(),this.value!==this.input.value&&(this.value=this.input.value)}checkValidity(){return this.input.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return this.input.reportValidity()}setCustomValidity(M){this.input.setCustomValidity(M),this.formControlController.updateValidity()}render(){const M=this.hasSlotController.test("label");this.hasSlotController.test("help-text");const N=!!this.label||!!M,D=!!this.helpText,i=!!this.errorMessage,j=this.clearable&&!this.disabled&&!this.readonly&&("number"==typeof this.value||this.value.length>0);return V`
+     */})(M),N}});M.NileInput=class extends GM{constructor(){super(...arguments),this.formControlController=new QM(this,{assumeInteractionOn:["nile-blur","nile-input"]}),this.hasSlotController=new hM(this,"help-text","label"),this.hasFocus=!1,this.title="",this.type="text",this.name="",this.value="",this.defaultValue="",this.size="medium",this.filled=!1,this.warning=!1,this.error=!1,this.success=!1,this.pill=!1,this.label="",this.helpText="",this.errorMessage="",this.clearable=!1,this.disabled=!1,this.placeholder="",this.readonly=!1,this.passwordToggle=!1,this.passwordVisible=!1,this.noSpinButtons=!1,this.form="",this.required=!1,this.spellcheck=!0}connectedCallback(){super.connectedCallback(),this.emit("nile-init")}disconnectedCallback(){super.disconnectedCallback(),this.emit("nile-destroy")}get valueAsDate(){const M=document.createElement("input");return M.type="date",M.value=this.value,M.valueAsDate}set valueAsDate(M){const N=document.createElement("input");N.type="date",N.valueAsDate=M,this.value=N.value}get valueAsNumber(){const M=document.createElement("input");return M.type="number",M.value=this.value,M.valueAsNumber}set valueAsNumber(M){const N=document.createElement("input");N.type="number",N.valueAsNumber=M,this.value=N.value}get validity(){return this.input.validity}get validationMessage(){return this.input.validationMessage}firstUpdated(){this.formControlController.updateValidity()}handleBlur(){this.hasFocus=!1,this.emit("nile-blur",{value:this.value})}handleChange(){this.value=this.input.value,this.emit("nile-change",{value:this.value})}handleClearClick(M){this.value="",this.emit("nile-clear",{value:this.value}),this.emit("nile-input",{value:this.value}),this.emit("nile-change",{value:this.value}),this.input.focus(),M.stopPropagation()}handleFocus(){this.hasFocus=!0,this.emit("nile-focus",{value:this.value})}handleInput(){this.value=this.input.value,this.formControlController.updateValidity(),this.emit("nile-input",{value:this.value})}handleInvalid(M){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(M)}handleKeyDown(M){const N=M.metaKey||M.ctrlKey||M.shiftKey||M.altKey;"Enter"!==M.key||N||setTimeout((()=>{M.defaultPrevented||M.isComposing||this.formControlController.submit()}))}handlePasswordToggle(){this.passwordVisible=!this.passwordVisible}handleDisabledChange(){this.formControlController.setValidity(this.disabled)}handleStepChange(){this.input.step=String(this.step),this.formControlController.updateValidity()}async handleValueChange(){await this.updateComplete,this.formControlController.updateValidity()}focus(M){this.input.focus(M)}blur(){this.input.blur()}select(){this.input.select()}setSelectionRange(M,N,D="none"){this.input.setSelectionRange(M,N,D)}setRangeText(M,N,D,i){this.input.setRangeText(M,N,D,i),this.value!==this.input.value&&(this.value=this.input.value)}stepUp(){this.input.stepUp(),this.value!==this.input.value&&(this.value=this.input.value)}stepDown(){this.input.stepDown(),this.value!==this.input.value&&(this.value=this.input.value)}checkValidity(){return this.input.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return this.input.reportValidity()}setCustomValidity(M){this.input.setCustomValidity(M),this.formControlController.updateValidity()}render(){const M=this.hasSlotController.test("label");this.hasSlotController.test("help-text");const N=!!this.label||!!M,D=this.hasSlotController.test("label-suffix"),i=!!this.helpText,j=!!this.errorMessage,I=this.clearable&&!this.disabled&&!this.readonly&&("number"==typeof this.value||this.value.length>0);return V`
       <div
         part="form-control"
-        class=${EM({"form-control":!0,"form-control--small":"small"===this.size,"form-control--medium":"medium"===this.size,"form-control--large":"large"===this.size,"form-control--has-label":N,"form-control--has-help-text":D})}
+        class=${EM({"form-control":!0,"form-control--small":"small"===this.size,"form-control--medium":"medium"===this.size,"form-control--large":"large"===this.size,"form-control--has-label":N,"form-control--has-help-text":i})}
       >
         <label
           part="form-control-label"
@@ -1006,6 +1006,8 @@ const YM=Symbol.for(""),bM=M=>{if((null==M?void 0:M.r)===YM)return null==M?void
           <slot name="label">${this.label}</slot>
         </label>
 
+        ${D?V` <slot name="label-suffix"></slot> `:""}
+
         <div part="form-control-input" class="form-control-input">
           <div
             part="base"
@@ -1046,7 +1048,7 @@ const YM=Symbol.for(""),bM=M=>{if((null==M?void 0:M.r)===YM)return null==M?void
               @blur=${this.handleBlur}
             />
 
-            ${j?V`
+            ${I?V`
                     <button
                       part="clear-button"
                       class="input__clear"
@@ -1091,11 +1093,11 @@ const YM=Symbol.for(""),bM=M=>{if((null==M?void 0:M.r)===YM)return null==M?void
           </div>
         </div>
 
-        ${D?V`
+        ${i?V`
                 <nile-form-help-text>${this.helpText}</nile-form-help-text>
               `:""}
 
-        ${i?V`
+        ${j?V`
                 <nile-form-error-message
                   >${this.errorMessage}</nile-form-error-message
                 >
@@ -1826,7 +1828,7 @@ const YM=Symbol.for(""),bM=M=>{if((null==M?void 0:M.r)===YM)return null==M?void
     white-space: nowrap;
     border: 0;
   }
-`;M.NileRadioGroup=class extends GM{constructor(){super(...arguments),this.hasSlotController=new hM(this,"help-text","label"),this.customValidityMessage="",this.hasButtonGroup=!1,this.defaultValue="",this.label="",this.name="option",this.value="",this.form="",this.required=!1,this.labelInline=!1,this.disabled=!1,this.helpText="",this.errorMessage=""}connectedCallback(){super.connectedCallback(),this.defaultValue=this.value,this.handleInitialDisabledState(),this.emit("nile-init")}disconnectedCallback(){super.disconnectedCallback(),this.emit("nile-destroy")}getAllRadios(){return[...this.querySelectorAll("nile-radio")]}handleRadioClick(M){const N=M.target.closest("nile-radio"),D=this.getAllRadios(),i=this.value;N.disabled||this.disabled||(this.value=N.value,D.forEach((M=>M.checked=M===N)),this.value!==i&&(this.emit("change",{value:this.value}),this.emit("input")))}handleDisabledChange(){this.getAllRadios().forEach((M=>{M.disabled=this.disabled}))}handleInitialDisabledState(){this.getAllRadios().forEach((M=>{M.disabled=M.hasAttribute("disabled")?M.disabled:this.disabled}))}handleKeyDown(M){if(!["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"," "].includes(M.key))return;const N=this.getAllRadios().filter((M=>!M.disabled)),D=N.find((M=>M.checked))??N[0],i=" "===M.key?0:["ArrowUp","ArrowLeft"].includes(M.key)?-1:1,j=this.value;let I=N.indexOf(D)+i;I<0&&(I=N.length-1),I>N.length-1&&(I=0),this.getAllRadios().forEach((M=>{M.checked=!1,this.hasButtonGroup||(M.tabIndex=-1)})),this.value=N[I].value,N[I].checked=!0,this.hasButtonGroup?N[I].shadowRoot.querySelector("button").focus():(N[I].tabIndex=0,N[I].focus()),this.value!==j&&(this.emit("change"),this.emit("input")),M.preventDefault()}handleLabelClick(){const M=this.getAllRadios(),N=M.find((M=>M.checked)),D=N||M[0];D&&D.focus()}handleSlotChange(){const M=this.getAllRadios();if(M.forEach((M=>M.checked=M.value===this.value)),this.hasButtonGroup=M.some((M=>"nile-radio-button"===M.tagName.toLowerCase())),!M.some((M=>M.checked)))if(this.hasButtonGroup){M[0].shadowRoot.querySelector("button").tabIndex=0}else M[0].tabIndex=0;this.hasButtonGroup&&this.shadowRoot?.querySelector("nile-button-group")}updateCheckedRadio(){this.getAllRadios().forEach((M=>M.checked=M.value===this.value))}handleValueChange(){this.hasUpdated&&this.updateCheckedRadio()}render(){const M=this.hasSlotController.test("label");this.hasSlotController.test("help-text");const N=!!this.label||!!M,D=!!this.helpText,i=!!this.errorMessage,j=V`
+`;M.NileRadioGroup=class extends GM{constructor(){super(...arguments),this.hasSlotController=new hM(this,"help-text","label"),this.customValidityMessage="",this.hasButtonGroup=!1,this.defaultValue="",this.label="",this.name="option",this.value="",this.form="",this.required=!1,this.labelInline=!1,this.disabled=!1,this.helpText="",this.errorMessage=""}connectedCallback(){super.connectedCallback(),this.defaultValue=this.value,this.handleInitialDisabledState(),this.emit("nile-init")}disconnectedCallback(){super.disconnectedCallback(),this.emit("nile-destroy")}getAllRadios(){return[...this.querySelectorAll("nile-radio")]}handleRadioClick(M){const N=M.target.closest("nile-radio"),D=this.getAllRadios(),i=this.value;N.disabled||this.disabled||(this.value=N.value,D.forEach((M=>M.checked=M===N)),this.value!==i&&(this.emit("change",{value:this.value}),this.emit("input")))}handleDisabledChange(){this.getAllRadios().forEach((M=>{M.disabled=this.disabled}))}handleInitialDisabledState(){this.getAllRadios().forEach((M=>{M.disabled=M.hasAttribute("disabled")?M.disabled:this.disabled}))}handleKeyDown(M){if(!["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"," "].includes(M.key))return;const N=this.getAllRadios().filter((M=>!M.disabled)),D=N.find((M=>M.checked))??N[0],i=" "===M.key?0:["ArrowUp","ArrowLeft"].includes(M.key)?-1:1,j=this.value;let I=N.indexOf(D)+i;I<0&&(I=N.length-1),I>N.length-1&&(I=0),this.getAllRadios().forEach((M=>{M.checked=!1,this.hasButtonGroup||(M.tabIndex=-1)})),this.value=N[I].value,N[I].checked=!0,this.hasButtonGroup?N[I].shadowRoot.querySelector("button").focus():(N[I].tabIndex=0,N[I].focus()),this.value!==j&&(this.emit("change"),this.emit("input")),M.preventDefault()}handleLabelClick(){const M=this.getAllRadios(),N=M.find((M=>M.checked)),D=N||M[0];D&&D.focus()}handleSlotChange(){const M=this.getAllRadios();if(M.forEach((M=>M.checked=M.value===this.value)),this.hasButtonGroup=M.some((M=>"nile-radio-button"===M.tagName.toLowerCase())),!M.some((M=>M.checked)))if(this.hasButtonGroup){M[0].shadowRoot.querySelector("button").tabIndex=0}else M[0].tabIndex=0;this.hasButtonGroup&&this.shadowRoot?.querySelector("nile-button-group")}updateCheckedRadio(){this.getAllRadios().forEach((M=>M.checked=M.value===this.value))}handleValueChange(){this.hasUpdated&&this.updateCheckedRadio()}render(){const M=this.hasSlotController.test("label");this.hasSlotController.test("help-text");const N=this.hasSlotController.test("label-suffix"),D=!!this.label||!!M,i=!!this.helpText,j=!!this.errorMessage,I=V`
       <slot
         @click=${this.handleRadioClick}
         @keydown=${this.handleKeyDown}
@@ -1836,7 +1838,7 @@ const YM=Symbol.for(""),bM=M=>{if((null==M?void 0:M.r)===YM)return null==M?void
     `;return V`
       <fieldset
         part="form-control"
-        class=${EM({"form-control":!0,"form-control--medium":!0,"form-control--radio-group":!0,"form-control--has-label":N,"form-control--has-help-text":D})}
+        class=${EM({"form-control":!0,"form-control--medium":!0,"form-control--radio-group":!0,"form-control--has-label":D,"form-control--has-help-text":i})}
         role="radiogroup"
         aria-labelledby="label"
         aria-describedby="help-text"
@@ -1846,12 +1848,14 @@ const YM=Symbol.for(""),bM=M=>{if((null==M?void 0:M.r)===YM)return null==M?void
           part="form-control-label"
           id="label"
           class="form-control__label"
-          aria-hidden=${N?"false":"true"}
+          aria-hidden=${D?"false":"true"}
           @click=${this.handleLabelClick}
         >
           <slot name="label">${this.label}</slot>
         </label>
 
+        ${N?V` <slot name="label-suffix"></slot> `:""}
+
         <div part="form-control-input" class="form-control-input">
           <div class="visually-hidden">
             <label class="radio-group__validation">
@@ -1866,16 +1870,16 @@ const YM=Symbol.for(""),bM=M=>{if((null==M?void 0:M.r)===YM)return null==M?void
           </div>
 
           ${this.hasButtonGroup?V`
-            ${j}
+            ${I}
               `:V`
-            <div class="${this.labelInline?"form-control--inline-radio":""}"> ${j}</div> `}
+            <div class="${this.labelInline?"form-control--inline-radio":""}"> ${I}</div> `}
         </div>
 
-        ${D?V`
+        ${i?V`
                 <nile-form-help-text>${this.helpText}</nile-form-help-text>
               `:""}
 
-        ${i?V`
+        ${j?V`
                 <nile-form-error-message
                   >${this.errorMessage}</nile-form-error-message
                 >
@@ -2829,24 +2833,26 @@ const YM=Symbol.for(""),bM=M=>{if((null==M?void 0:M.r)===YM)return null==M?void
               ></nile-icon-button>
             `:""}
       </span>
-    `}},M.NileTag.styles=wD,N([zM({reflect:!0})],M.NileTag.prototype,"variant",void 0),N([zM({reflect:!0})],M.NileTag.prototype,"size",void 0),N([zM({type:Boolean,reflect:!0})],M.NileTag.prototype,"pill",void 0),N([zM({type:Boolean})],M.NileTag.prototype,"removable",void 0),M.NileTag=N([uM("nile-tag")],M.NileTag),M.NileSelect=class extends GM{constructor(){super(...arguments),this.formControlController=new QM(this,{assumeInteractionOn:["nile-blur","nile-input"]}),this.hasSlotController=new hM(this,"help-text","label"),this.typeToSelectString="",this.hasFocus=!1,this.displayLabel="",this.selectedOptions=[],this.name="",this.value="",this.defaultValue="",this.size="medium",this.placeholder="Select...",this.searchValue="",this.searchEnabled=!1,this.optionsLoading=!1,this.multiple=!1,this.helpText="",this.errorMessage="",this.warning=!1,this.error=!1,this.success=!1,this.maxOptionsVisible=3,this.disabled=!1,this.clearable=!1,this.open=!1,this.hoist=!1,this.filled=!1,this.pill=!1,this.label="",this.placement="bottom",this.form="",this.required=!1,this.showSelected=!1,this.noResultsMessage="No results found"}get validity(){return this.valueInput?.validity}get validationMessage(){return this.valueInput?.validationMessage}connectedCallback(){super.connectedCallback(),this.handleDocumentFocusIn=this.handleDocumentFocusIn.bind(this),this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this),this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this),this.open=!1,this.emit("nile-init")}disconnectedCallback(){super.disconnectedCallback(),this.emit("nile-destroy")}addOpenListeners(){document.addEventListener("focusin",this.handleDocumentFocusIn),document.addEventListener("keydown",this.handleDocumentKeyDown),document.addEventListener("mousedown",this.handleDocumentMouseDown)}removeOpenListeners(){document.removeEventListener("focusin",this.handleDocumentFocusIn),document.removeEventListener("keydown",this.handleDocumentKeyDown),document.removeEventListener("mousedown",this.handleDocumentMouseDown)}handleFocus(){this.hasFocus=!0,this.displayInput.setSelectionRange(0,0),this.emit("nile-focus",{value:this.value,name:this.name})}handleBlur(){this.hasFocus=!1,this.emit("nile-blur",{value:this.value,name:this.name})}handleDocumentFocusIn(M){const N=M.composedPath();this&&!N.includes(this)&&this.hide()}handleFooterClick(M){M.stopPropagation(),M.preventDefault()}toggleShowSelected(M){if(M.stopPropagation(),M.preventDefault(),0===this.selectedOptions?.length)return;this.showSelected=!this.showSelected;this.getAllOptions().forEach((M=>{M.selected||(M.hidden=this.showSelected)})),this.requestUpdate()}unSlectAll(){this.showSelected=!1;this.getAllOptions().forEach((M=>{M.selected=!1,M.hidden=!1})),this.value="",this.selectionChanged(),this.emit("nile-change",{value:this.value,name:this.name})}handleDocumentKeyDown(M){const N=M.target,D=null!==N.closest(".select__clear"),i=null!==N.closest("nile-icon-button");if(!D&&!i){if("Escape"===M.key&&this.open&&(M.preventDefault(),M.stopPropagation(),this.hide(),this.displayInput.focus({preventScroll:!0})),"Enter"===M.key||" "===M.key&&""===this.typeToSelectString)return M.preventDefault(),M.stopImmediatePropagation(),this.open?void(this.currentOption&&!this.currentOption.disabled&&(this.multiple?this.toggleOptionSelection(this.currentOption):this.setSelectedOptions(this.currentOption),this.updateComplete.then((()=>{this.emit("nile-input",{value:this.value,name:this.name}),this.emit("nile-change",{value:this.value,name:this.name})})),this.multiple||(this.hide(),this.displayInput.focus({preventScroll:!0})))):void this.show();if(["ArrowUp","ArrowDown","Home","End"].includes(M.key)){const N=this.getAllOptions(),D=N.indexOf(this.currentOption);let i=Math.max(0,D);if(M.preventDefault(),!this.open&&(this.show(),this.currentOption))return;"ArrowDown"===M.key?(i=D+1,i>N.length-1&&(i=0)):"ArrowUp"===M.key?(i=D-1,i<0&&(i=N.length-1)):"Home"===M.key?i=0:"End"===M.key&&(i=N.length-1),this.setCurrentOption(N[i])}if(1===M.key.length||"Backspace"===M.key){const N=this.getAllOptions();if(M.metaKey||M.ctrlKey||M.altKey)return;if(!this.open){if("Backspace"===M.key)return;this.show()}M.stopPropagation(),M.preventDefault(),clearTimeout(this.typeToSelectTimeout),this.typeToSelectTimeout=window.setTimeout((()=>this.typeToSelectString=""),1e3),"Backspace"===M.key?this.typeToSelectString=this.typeToSelectString.slice(0,-1):this.typeToSelectString+=M.key.toLowerCase();for(const M of N){if(M.getTextLabel().toLowerCase().startsWith(this.typeToSelectString)){this.setCurrentOption(M);break}}}}}handleDocumentMouseDown(M){const N=M.composedPath();this&&!N.includes(this)&&this.hide()}handleLabelClick(){this.displayInput.focus()}handleComboboxMouseDown(M){const N=M.composedPath().some((M=>M instanceof Element&&"nile-icon-button"===M.tagName.toLowerCase()));this.disabled||N||(M.preventDefault(),this.displayInput.focus({preventScroll:!0}),this.open=!this.open)}handleComboboxKeyDown(M){M.stopPropagation(),this.handleDocumentKeyDown(M)}handleClearClick(M){M.stopPropagation(),""!==this.value&&(this.setSelectedOptions([]),this.displayInput.focus({preventScroll:!0}),this.updateComplete.then((()=>{this.emit("nile-clear",{value:this.value,name:this.name}),this.emit("nile-input",{value:this.value,name:this.name}),this.emit("nile-change",{value:this.value,name:this.name})})))}handleClearMouseDown(M){M.stopPropagation(),M.preventDefault()}handleOptionClick(M){const N=M.target.closest("nile-option"),D=this.value;if(N&&!N.disabled&&(this.multiple?this.toggleOptionSelection(N):this.setSelectedOptions(N),this.updateComplete.then((()=>this.displayInput.focus({preventScroll:!0}))),this.value!==D&&this.updateComplete.then((()=>{this.emit("nile-input",{value:this.value,name:this.name}),this.emit("nile-change",{value:this.value,name:this.name})})),this.multiple||(this.hide(),this.displayInput.focus({preventScroll:!0}))),this.showSelected){this.getAllOptions().forEach((M=>{M.selected||(M.hidden=this.showSelected)})),this.requestUpdate()}}handleDefaultSlotChange(){const M=this.getAllOptions(),N=Array.isArray(this.value)?this.value:[this.value],D=[];customElements.get("nile-option")?(M.forEach((M=>D.push(M.value))),this.setSelectedOptions(M.filter((M=>N.includes(M.value))))):customElements.whenDefined("nile-option").then((()=>this.handleDefaultSlotChange()))}handleTagRemove(M,N){M.stopPropagation(),this.disabled||(this.toggleOptionSelection(N,!1),this.updateComplete.then((()=>{this.emit("nile-input",{value:this.value,name:this.name}),this.emit("nile-change",{value:this.value,name:this.name})})))}getAllOptions(){return[...this.querySelectorAll("nile-option")]}getOptionPrefix(M){const N=M.shadowRoot?.querySelector('slot[name="prefix"]');if(!N)return"";const D=N.assignedNodes(),i=[];return D.forEach((M=>{M instanceof HTMLElement?i.push(M.outerHTML):M.nodeType===Node.TEXT_NODE&&i.push(M.textContent||"")})),i.join("")}getFirstOption(){return this.querySelector("nile-option")}setCurrentOption(M){this.getAllOptions().forEach((M=>{M.current=!1,M.tabIndex=-1})),M&&(this.currentOption=M,M.current=!0,M.tabIndex=0,M.focus())}setSelectedOptions(M){const N=this.getAllOptions(),D=Array.isArray(M)?M:[M];N.forEach((M=>M.selected=!1)),D.length&&D.forEach((M=>M.selected=!0)),this.selectionChanged()}toggleOptionSelection(M,N){M.selected=!0===N||!1===N?N:!M.selected,this.selectionChanged()}selectionChanged(){this.selectedOptions=this.getAllOptions().filter((M=>M.selected)),this.multiple?(this.value=this.selectedOptions.map((M=>M.value)),this.placeholder&&0===this.value.length?this.displayLabel="":this.displayLabel=this.selectedOptions.length+" selected"):(this.value=this.selectedOptions[0]?.value??"",this.displayLabel=this.selectedOptions[0]?.getTextLabel()??""),this.updateComplete.then((()=>{this.formControlController.updateValidity()}))}handleSearchFocus(){document.removeEventListener("keydown",this.handleDocumentKeyDown)}handleSearchBlur(){document.addEventListener("keydown",this.handleDocumentKeyDown)}handleSearchChange(M){this.searchValue=M.detail.value,0===this.filterOptions(this.searchValue).length?this.showNoResults=!0:this.showNoResults=!1}filterOptions(M){const N=this.getAllOptions(),D=M.toLowerCase();let i=[];return N.forEach((M=>{const N=M.getTextLabel().toLowerCase(),j=(M.value||"").toLowerCase();N.includes(D)||j.includes(D)?(M.hidden=!1,i.push(M)):M.hidden=!0})),i}handleInvalid(M){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(M)}handleDisabledChange(){this.disabled&&(this.open=!1,this.handleOpenChange())}handleValueChange(){const M=this.getAllOptions(),N=Array.isArray(this.value)?this.value:[this.value];this.setSelectedOptions(M.filter((M=>N.includes(M.value))))}async handleOpenChange(){if(this.open&&!this.disabled){this.setCurrentOption(this.selectedOptions[0]||this.getFirstOption()),this.emit("nile-show",{value:this.value,name:this.name}),this.addOpenListeners(),await uD(this),this.listbox.hidden=!1,this.popup.active=!0,requestAnimationFrame((()=>{this.setCurrentOption(this.currentOption)}));const{keyframes:M,options:N}=tD(this,"select.show",{dir:"ltr"});await jD(this.popup.popup,M,N),this.currentOption&&ED(this.currentOption,this.listbox,"vertical","auto"),this.emit("nile-after-show",{value:this.value,name:this.name})}else{this.emit("nile-hide",{value:this.value,name:this.name}),this.removeOpenListeners(),await uD(this);const{keyframes:M,options:N}=tD(this,"select.hide",{dir:"ltr"});await jD(this.popup.popup,M,N),this.listbox.hidden=!0,this.popup.active=!1,this.emit("nile-after-hide",{value:this.value,name:this.name})}}async show(){if(!this.open&&!this.disabled)return this.open=!0,yD(this,"nile-after-show");this.open=!1}async hide(){if(this.open&&!this.disabled)return this.open=!1,yD(this,"nile-after-hide");this.open=!1}checkValidity(){return this.valueInput.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return this.valueInput.reportValidity()}setCustomValidity(M){this.valueInput.setCustomValidity(M),this.formControlController.updateValidity()}focus(M){this.displayInput.focus(M)}blur(){this.displayInput.blur()}onInputChange(M){M.stopPropagation()}render(){const M=this.hasSlotController.test("label");this.hasSlotController.test("help-text");const N=!!this.label||!!M,D=this.clearable&&!this.disabled&&this.value.length>0,i=this.placeholder&&0===this.value.length,j=this.searchValue||"",I=!!this.helpText,g=!!this.errorMessage;return V`
+    `}},M.NileTag.styles=wD,N([zM({reflect:!0})],M.NileTag.prototype,"variant",void 0),N([zM({reflect:!0})],M.NileTag.prototype,"size",void 0),N([zM({type:Boolean,reflect:!0})],M.NileTag.prototype,"pill",void 0),N([zM({type:Boolean})],M.NileTag.prototype,"removable",void 0),M.NileTag=N([uM("nile-tag")],M.NileTag),M.NileSelect=class extends GM{constructor(){super(...arguments),this.formControlController=new QM(this,{assumeInteractionOn:["nile-blur","nile-input"]}),this.hasSlotController=new hM(this,"help-text","label"),this.typeToSelectString="",this.hasFocus=!1,this.displayLabel="",this.selectedOptions=[],this.name="",this.value="",this.defaultValue="",this.size="medium",this.placeholder="Select...",this.searchValue="",this.searchEnabled=!1,this.optionsLoading=!1,this.multiple=!1,this.helpText="",this.errorMessage="",this.warning=!1,this.error=!1,this.success=!1,this.maxOptionsVisible=3,this.disabled=!1,this.clearable=!1,this.open=!1,this.hoist=!1,this.filled=!1,this.pill=!1,this.label="",this.placement="bottom",this.form="",this.required=!1,this.showSelected=!1,this.noResultsMessage="No results found"}get validity(){return this.valueInput?.validity}get validationMessage(){return this.valueInput?.validationMessage}connectedCallback(){super.connectedCallback(),this.handleDocumentFocusIn=this.handleDocumentFocusIn.bind(this),this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this),this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this),this.open=!1,this.emit("nile-init")}disconnectedCallback(){super.disconnectedCallback(),this.emit("nile-destroy")}addOpenListeners(){document.addEventListener("focusin",this.handleDocumentFocusIn),document.addEventListener("keydown",this.handleDocumentKeyDown),document.addEventListener("mousedown",this.handleDocumentMouseDown)}removeOpenListeners(){document.removeEventListener("focusin",this.handleDocumentFocusIn),document.removeEventListener("keydown",this.handleDocumentKeyDown),document.removeEventListener("mousedown",this.handleDocumentMouseDown)}handleFocus(){this.hasFocus=!0,this.displayInput.setSelectionRange(0,0),this.emit("nile-focus",{value:this.value,name:this.name})}handleBlur(){this.hasFocus=!1,this.emit("nile-blur",{value:this.value,name:this.name})}handleDocumentFocusIn(M){const N=M.composedPath();this&&!N.includes(this)&&this.hide()}handleFooterClick(M){M.stopPropagation(),M.preventDefault()}toggleShowSelected(M){if(M.stopPropagation(),M.preventDefault(),0===this.selectedOptions?.length)return;this.showSelected=!this.showSelected;this.getAllOptions().forEach((M=>{M.selected||(M.hidden=this.showSelected)})),this.requestUpdate()}unSlectAll(){this.showSelected=!1;this.getAllOptions().forEach((M=>{M.selected=!1,M.hidden=!1})),this.value="",this.selectionChanged(),this.emit("nile-change",{value:this.value,name:this.name})}handleDocumentKeyDown(M){const N=M.target,D=null!==N.closest(".select__clear"),i=null!==N.closest("nile-icon-button");if(!D&&!i){if("Escape"===M.key&&this.open&&(M.preventDefault(),M.stopPropagation(),this.hide(),this.displayInput.focus({preventScroll:!0})),"Enter"===M.key||" "===M.key&&""===this.typeToSelectString)return M.preventDefault(),M.stopImmediatePropagation(),this.open?void(this.currentOption&&!this.currentOption.disabled&&(this.multiple?this.toggleOptionSelection(this.currentOption):this.setSelectedOptions(this.currentOption),this.updateComplete.then((()=>{this.emit("nile-input",{value:this.value,name:this.name}),this.emit("nile-change",{value:this.value,name:this.name})})),this.multiple||(this.hide(),this.displayInput.focus({preventScroll:!0})))):void this.show();if(["ArrowUp","ArrowDown","Home","End"].includes(M.key)){const N=this.getAllOptions(),D=N.indexOf(this.currentOption);let i=Math.max(0,D);if(M.preventDefault(),!this.open&&(this.show(),this.currentOption))return;"ArrowDown"===M.key?(i=D+1,i>N.length-1&&(i=0)):"ArrowUp"===M.key?(i=D-1,i<0&&(i=N.length-1)):"Home"===M.key?i=0:"End"===M.key&&(i=N.length-1),this.setCurrentOption(N[i])}if(1===M.key.length||"Backspace"===M.key){const N=this.getAllOptions();if(M.metaKey||M.ctrlKey||M.altKey)return;if(!this.open){if("Backspace"===M.key)return;this.show()}M.stopPropagation(),M.preventDefault(),clearTimeout(this.typeToSelectTimeout),this.typeToSelectTimeout=window.setTimeout((()=>this.typeToSelectString=""),1e3),"Backspace"===M.key?this.typeToSelectString=this.typeToSelectString.slice(0,-1):this.typeToSelectString+=M.key.toLowerCase();for(const M of N){if(M.getTextLabel().toLowerCase().startsWith(this.typeToSelectString)){this.setCurrentOption(M);break}}}}}handleDocumentMouseDown(M){const N=M.composedPath();this&&!N.includes(this)&&this.hide()}handleLabelClick(){this.displayInput.focus()}handleComboboxMouseDown(M){const N=M.composedPath().some((M=>M instanceof Element&&"nile-icon-button"===M.tagName.toLowerCase()));this.disabled||N||(M.preventDefault(),this.displayInput.focus({preventScroll:!0}),this.open=!this.open)}handleComboboxKeyDown(M){M.stopPropagation(),this.handleDocumentKeyDown(M)}handleClearClick(M){M.stopPropagation(),""!==this.value&&(this.setSelectedOptions([]),this.displayInput.focus({preventScroll:!0}),this.updateComplete.then((()=>{this.emit("nile-clear",{value:this.value,name:this.name}),this.emit("nile-input",{value:this.value,name:this.name}),this.emit("nile-change",{value:this.value,name:this.name})})))}handleClearMouseDown(M){M.stopPropagation(),M.preventDefault()}handleOptionClick(M){const N=M.target.closest("nile-option"),D=this.value;if(N&&!N.disabled&&(this.multiple?this.toggleOptionSelection(N):this.setSelectedOptions(N),this.updateComplete.then((()=>this.displayInput.focus({preventScroll:!0}))),this.value!==D&&this.updateComplete.then((()=>{this.emit("nile-input",{value:this.value,name:this.name}),this.emit("nile-change",{value:this.value,name:this.name})})),this.multiple||(this.hide(),this.displayInput.focus({preventScroll:!0}))),this.showSelected){this.getAllOptions().forEach((M=>{M.selected||(M.hidden=this.showSelected)})),this.requestUpdate()}}handleDefaultSlotChange(){const M=this.getAllOptions(),N=Array.isArray(this.value)?this.value:[this.value],D=[];customElements.get("nile-option")?(M.forEach((M=>D.push(M.value))),this.setSelectedOptions(M.filter((M=>N.includes(M.value))))):customElements.whenDefined("nile-option").then((()=>this.handleDefaultSlotChange()))}handleTagRemove(M,N){M.stopPropagation(),this.disabled||(this.toggleOptionSelection(N,!1),this.updateComplete.then((()=>{this.emit("nile-input",{value:this.value,name:this.name}),this.emit("nile-change",{value:this.value,name:this.name})})))}getAllOptions(){return[...this.querySelectorAll("nile-option")]}getOptionPrefix(M){const N=M.shadowRoot?.querySelector('slot[name="prefix"]');if(!N)return"";const D=N.assignedNodes(),i=[];return D.forEach((M=>{M instanceof HTMLElement?i.push(M.outerHTML):M.nodeType===Node.TEXT_NODE&&i.push(M.textContent||"")})),i.join("")}getFirstOption(){return this.querySelector("nile-option")}setCurrentOption(M){this.getAllOptions().forEach((M=>{M.current=!1,M.tabIndex=-1})),M&&(this.currentOption=M,M.current=!0,M.tabIndex=0,M.focus())}setSelectedOptions(M){const N=this.getAllOptions(),D=Array.isArray(M)?M:[M];N.forEach((M=>M.selected=!1)),D.length&&D.forEach((M=>M.selected=!0)),this.selectionChanged()}toggleOptionSelection(M,N){M.selected=!0===N||!1===N?N:!M.selected,this.selectionChanged()}selectionChanged(){this.selectedOptions=this.getAllOptions().filter((M=>M.selected)),this.multiple?(this.value=this.selectedOptions.map((M=>M.value)),this.placeholder&&0===this.value.length?this.displayLabel="":this.displayLabel=this.selectedOptions.length+" selected"):(this.value=this.selectedOptions[0]?.value??"",this.displayLabel=this.selectedOptions[0]?.getTextLabel()??""),this.updateComplete.then((()=>{this.formControlController.updateValidity()}))}handleSearchFocus(){document.removeEventListener("keydown",this.handleDocumentKeyDown)}handleSearchBlur(){document.addEventListener("keydown",this.handleDocumentKeyDown)}handleSearchChange(M){this.searchValue=M.detail.value,0===this.filterOptions(this.searchValue).length?this.showNoResults=!0:this.showNoResults=!1}filterOptions(M){const N=this.getAllOptions(),D=M.toLowerCase();let i=[];return N.forEach((M=>{const N=M.getTextLabel().toLowerCase(),j=(M.value||"").toLowerCase();N.includes(D)||j.includes(D)?(M.hidden=!1,i.push(M)):M.hidden=!0})),i}handleInvalid(M){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(M)}handleDisabledChange(){this.disabled&&(this.open=!1,this.handleOpenChange())}handleValueChange(){const M=this.getAllOptions(),N=Array.isArray(this.value)?this.value:[this.value];this.setSelectedOptions(M.filter((M=>N.includes(M.value))))}async handleOpenChange(){if(this.open&&!this.disabled){this.setCurrentOption(this.selectedOptions[0]||this.getFirstOption()),this.emit("nile-show",{value:this.value,name:this.name}),this.addOpenListeners(),await uD(this),this.listbox.hidden=!1,this.popup.active=!0,requestAnimationFrame((()=>{this.setCurrentOption(this.currentOption)}));const{keyframes:M,options:N}=tD(this,"select.show",{dir:"ltr"});await jD(this.popup.popup,M,N),this.currentOption&&ED(this.currentOption,this.listbox,"vertical","auto"),this.emit("nile-after-show",{value:this.value,name:this.name})}else{this.emit("nile-hide",{value:this.value,name:this.name}),this.removeOpenListeners(),await uD(this);const{keyframes:M,options:N}=tD(this,"select.hide",{dir:"ltr"});await jD(this.popup.popup,M,N),this.listbox.hidden=!0,this.popup.active=!1,this.emit("nile-after-hide",{value:this.value,name:this.name})}}async show(){if(!this.open&&!this.disabled)return this.open=!0,yD(this,"nile-after-show");this.open=!1}async hide(){if(this.open&&!this.disabled)return this.open=!1,yD(this,"nile-after-hide");this.open=!1}checkValidity(){return this.valueInput.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return this.valueInput.reportValidity()}setCustomValidity(M){this.valueInput.setCustomValidity(M),this.formControlController.updateValidity()}focus(M){this.displayInput.focus(M)}blur(){this.displayInput.blur()}onInputChange(M){M.stopPropagation()}render(){const M=this.hasSlotController.test("label");this.hasSlotController.test("help-text");const N=this.hasSlotController.test("label-suffix"),D=!!this.label||!!M,i=this.clearable&&!this.disabled&&this.value.length>0,j=this.placeholder&&0===this.value.length,I=this.searchValue||"",g=!!this.helpText,u=!!this.errorMessage;return V`
       <div
         part="form-control"
-        class=${EM({"form-control":!0,"form-control--small":"small"===this.size,"form-control--medium":"medium"===this.size,"form-control--large":"large"===this.size,"form-control--has-label":N,"form-control--has-help-text":I})}
+        class=${EM({"form-control":!0,"form-control--small":"small"===this.size,"form-control--medium":"medium"===this.size,"form-control--large":"large"===this.size,"form-control--has-label":D,"form-control--has-help-text":g})}
       >
         <label
           id="label"
           part="form-control-label"
           class="form-control__label"
-          aria-hidden=${N?"false":"true"}
+          aria-hidden=${D?"false":"true"}
           @click=${this.handleLabelClick}
         >
           <slot name="label">${this.label}</slot>
         </label>
 
+        ${N?V` <slot name="label-suffix"></slot> `:""}
+
         <div part="form-control-input" class="form-control-input">
           <nile-popup
-            class=${EM({select:!0,"select--warning":this.warning,"select--error":this.error,"select--success":this.success,"select--standard":!0,"select--filled":this.filled,"select--pill":this.pill,"select--open":this.open,"select--disabled":this.disabled,"select--multiple":this.multiple,"select--focused":this.hasFocus,"select--placeholder-visible":i,"select--top":"top"===this.placement,"select--bottom":"bottom"===this.placement,"select--small":"small"===this.size,"select--medium":"medium"===this.size,"select--large":"large"===this.size})}
+            class=${EM({select:!0,"select--warning":this.warning,"select--error":this.error,"select--success":this.success,"select--standard":!0,"select--filled":this.filled,"select--pill":this.pill,"select--open":this.open,"select--disabled":this.disabled,"select--multiple":this.multiple,"select--focused":this.hasFocus,"select--placeholder-visible":j,"select--top":"top"===this.placement,"select--bottom":"bottom"===this.placement,"select--small":"small"===this.size,"select--medium":"medium"===this.size,"select--large":"large"===this.size})}
             placement=${this.placement}
             strategy=${this.hoist?"fixed":"absolute"}
             flip
@@ -2932,7 +2938,7 @@ const YM=Symbol.for(""),bM=M=>{if((null==M?void 0:M.r)===YM)return null==M?void
                 @invalid=${this.handleInvalid}
               />
 
-              ${D?V`
+              ${i?V`
                     <button
                       part="clear-button"
                       class="select__clear"
@@ -2981,7 +2987,7 @@ const YM=Symbol.for(""),bM=M=>{if((null==M?void 0:M.r)===YM)return null==M?void
                     <nile-input
                       size="small"
                       clearable
-                      .value=${j}
+                      .value=${I}
                       placeholder="Search..."
                       @nile-input=${this.handleSearchChange}
                       @nile-focus=${this.handleSearchFocus}
@@ -3025,8 +3031,8 @@ const YM=Symbol.for(""),bM=M=>{if((null==M?void 0:M.r)===YM)return null==M?void
           </nile-popup>
         </div>
 
-        ${I?V` <nile-form-help-text>${this.helpText}</nile-form-help-text> `:""}
-        ${g?V`
+        ${g?V` <nile-form-help-text>${this.helpText}</nile-form-help-text> `:""}
+        ${u?V`
               <nile-form-error-message
                 >${this.errorMessage}</nile-form-error-message
               >
@@ -4341,17 +4347,19 @@ const YM=Symbol.for(""),bM=M=>{if((null==M?void 0:M.r)===YM)return null==M?void
      * @license
      * Copyright 2021 Google LLC
      * SPDX-License-Identifier: BSD-3-Clause
-     */,pD=(M,N,D)=>{for(const D of N)if(D[0]===M)return(0,D[1])();return null==D?void 0:D()};var WD;!function(M){M.DEFAULT="defaultInput",M.SWITCH="switchInput"}(WD||(WD={})),M.NileSwitcher=class extends GM{constructor(){super(...arguments),this.nileSwitchConfig={toggleSwitch:!1,defaultInput:{inputType:"radio",value:"True",options:["True","False"]},switchInput:{inputType:"text-area",value:"test"}}}connectedCallback(){super.connectedCallback(),this.emit("nile-init")}disconnectedCallback(){super.disconnectedCallback(),this.emit("nile-destroy")}renderNileText(M,N){const{value:D,label:i,placeholder:j,disabled:I}=M;return V`<nile-input
+     */,pD=(M,N,D)=>{for(const D of N)if(D[0]===M)return(0,D[1])();return null==D?void 0:D()};var WD;!function(M){M.DEFAULT="defaultInput",M.SWITCH="switchInput"}(WD||(WD={})),M.NileSwitcher=class extends GM{connectedCallback(){super.connectedCallback(),this.emit("nile-init")}disconnectedCallback(){super.disconnectedCallback(),this.emit("nile-destroy")}renderNileText(M,N){const{value:D,label:i,placeholder:j,disabled:I}=M;return V`<nile-input
       .value=${D}
       .label=${i}
       .disabled=${I}
       .placeholder=${j}
       @nile-input=${M=>{this.handleChange(M,N)}}
-    ></nile-input>`}renderDropdown(M,N){const{options:D,multiple:i,placeholder:j}=M;return V`<nile-select
+    ></nile-input>`}renderDropdown(M,N){const{options:D,multiple:i,placeholder:j,disabled:I}=M;return V`<nile-select
       .placeholder=${j}
+      .disabled="${I}"
       .multiple="${i}"
       @nile-change=${M=>{this.handleChange(M,N)}}
-      ${D&&D.map((M=>V`<nile-option .value="${M}">${M} </nile-option>`))}
+    >
+      ${D?.map((M=>V`<nile-option .value="${M}">${M} </nile-option>`))}
     </nile-select>`}renderNileTextArea(M,N){const{value:D,disabled:i}=M;return V`<nile-textarea
       .value=${D}
       .disabled=${i}
@@ -4361,12 +4369,13 @@ const YM=Symbol.for(""),bM=M=>{if((null==M?void 0:M.r)===YM)return null==M?void
       .label=${i}
       .disabled=${j}
       @valueChange=${M=>{this.handleChangeCheckbox(M,N)}}
-    ></nile-checkbox>`}renderNileRadio(M,N){const{options:D,value:i}=M;return V`<nile-radio-group
+    ></nile-checkbox>`}renderNileRadio(M,N){const{options:D,value:i,disabled:j}=M;return V`<nile-radio-group
       .value=${i}
+      .disabled=${j}
       @change=${M=>{this.handleChange(M,N)}}
     >
       ${D&&D.map((M=>V`<nile-radio .value="${M}">${M} </nile-radio>`))}
-    </nile-radio-group>`}handleChange(M,N){N===WD.DEFAULT?this.nileSwitchConfig.defaultInput.value=M.detail.value:this.nileSwitchConfig.switchInput.value=M.detail.value,console.log(this.nileSwitchConfig),this.emit("nile-change",{config:this.nileSwitchConfig})}handleChangeCheckbox(M,N){N===WD.DEFAULT?this.nileSwitchConfig.defaultInput.value=M.detail.checked:this.nileSwitchConfig.switchInput.value=M.detail.checked,this.emit("nile-change",{config:this.nileSwitchConfig})}renderIcon(){const M=this.nileSwitchConfig.toggleSwitch?"stringinput":"header-functions";return V`<nile-icon
+    </nile-radio-group>`}handleChange(M,N){N===WD.DEFAULT?this.nileSwitchConfig.defaultInput.value=M.detail.value:this.nileSwitchConfig.switchInput.value=M.detail.value,M.stopPropagation(),this.emit("nile-change",{config:this.nileSwitchConfig})}handleChangeCheckbox(M,N){N===WD.DEFAULT?this.nileSwitchConfig.defaultInput.value=M.detail.checked:this.nileSwitchConfig.switchInput.value=M.detail.checked,this.emit("nile-change",{config:this.nileSwitchConfig})}renderIcon(){const M=this.nileSwitchConfig.toggleSwitch?"stringinput":"header-functions";return V`<nile-icon
       size="14"
       class=${EM({"pointer-cursor":!0,"flex-start":"stringinput"===M})}
       .name=${M}