@webority/ui-elements 0.6.6 → 0.6.7

package/dist/ui-elements.global.js

@@ -81,28 +81,42 @@ var WeborityUiElements=(function(e){Object.defineProperty(e,Symbol.toStringTag,{
           <div class="search-select-options"></div>
           <div class="search-select-empty" hidden>No matches</div>
         </div>
-      </div>`,this._rendered=!0,a(this,this._values.join(`,`)),this._renderControl(),this._renderOptions(),this._wire()}_renderControl(){let e=this.querySelector(`[data-chips]`);if(!e)return;let t=this.getAttribute(`placeholder`)||`Select…`;if(!this._values.length){e.innerHTML=`<span class="search-select-placeholder">${s(t)}</span>`;return}e.innerHTML=this._values.map(e=>`<span class="chip chip-sm"><span class="chip-label">${this._labelHtmlFor(e)}</span><button type="button" class="chip-remove" data-remove="${b(e)}" aria-label="Remove"><i class="bi bi-x" aria-hidden="true"></i></button></span>`).join(``)}_renderOptions(e){let t=this.querySelector(`.search-select-options`),n=this.querySelector(`.search-select-empty`);if(!t)return;let r=(e||``).trim().toLowerCase(),i=this._readOptions();r&&(i=i.filter(e=>x(e.label).toLowerCase().includes(r))),t.innerHTML=i.map(e=>{let t=this._values.includes(String(e.value));return`<button type="button" role="option" class="search-select-option${t?` selected`:``}" data-value="${b(e.value)}" aria-selected="${t}"><span class="ms-check"><i class="bi bi-check" aria-hidden="true"></i></span><span class="ms-opt-label">${c(e)}</span></button>`}).join(``),n&&(n.hidden=i.length>0),this._active=-1}_wire(){let e=this.querySelector(`.search-select-control`),t=this.querySelector(`.search-select-menu`),n=this.querySelector(`.search-select-input`),r=this.querySelector(`.search-select-clear`),i=this.querySelector(`.search-select-options`);if(!e||!t)return;let o=()=>this.hasAttribute(`disabled`),s=()=>{let n=e.getBoundingClientRect();t.style.position=`fixed`,t.style.top=`${n.bottom+4}px`,t.style.left=`${n.left}px`,t.style.width=`${n.width}px`},c=()=>[...this.querySelectorAll(`.search-select-option`)],l=()=>c().filter(e=>!e.hidden),u=e=>{let t=l();this._active=e;for(let e of c())e.classList.remove(`is-active`);e>=0&&t[e]&&(t[e].classList.add(`is-active`),t[e].scrollIntoView({block:`nearest`}))},d=()=>!t.hidden,f=()=>{o()||(t.hidden=!1,e.setAttribute(`aria-expanded`,`true`),e.classList.add(`open`),s(),n&&(n.value=``,this._renderOptions(``),n.focus()))},p=()=>{t.hidden=!0,e.setAttribute(`aria-expanded`,`false`),e.classList.remove(`open`),u(-1)},m=()=>{a(this,this._values.join(`,`)),this.dispatchEvent(new Event(`change`,{bubbles:!0}))},h=e=>{let t=String(e);this._values.includes(t)?this._values=this._values.filter(e=>e!==t):this._values=[...this._values,t],this._renderControl(),this._renderOptions(n?n.value:``),m()},g=e=>{this._values=this._values.filter(t=>t!==String(e)),this._renderControl(),this._renderOptions(n?n.value:``),m()};e.addEventListener(`click`,e=>{let t=e.target.closest(`[data-remove]`);if(t){e.stopPropagation(),g(t.dataset.remove);return}d()?p():f()}),i.addEventListener(`click`,e=>{let t=e.target.closest(`.search-select-option`);t&&(h(t.dataset.value),n?.focus())}),i.addEventListener(`mousemove`,e=>{let t=e.target.closest(`.search-select-option`);t&&u(l().indexOf(t))}),n?.addEventListener(`input`,()=>{this._renderOptions(n.value),r&&(r.hidden=!n.value),u(-1)});let _=t=>{let r=l();t.key===`ArrowDown`?(t.preventDefault(),u(Math.min(this._active+1,r.length-1))):t.key===`ArrowUp`?(t.preventDefault(),u(Math.max(this._active-1,0))):t.key===`Enter`?(t.preventDefault(),r[this._active]&&h(r[this._active].dataset.value)):t.key===`Escape`?(p(),e.focus()):t.key===`Backspace`&&!n.value&&this._values.length&&g(this._values[this._values.length-1])};n?.addEventListener(`keydown`,_),r?.addEventListener(`click`,()=>{n.value=``,this._renderOptions(``),r.hidden=!0,n.focus()}),e.addEventListener(`keydown`,e=>{if(d()){_(e);return}(e.key===`ArrowDown`||e.key===`Enter`||e.key===` `)&&(e.preventDefault(),f())}),this._onDocClick=e=>{d()&&!this.contains(e.target)&&p()},document.addEventListener(`click`,this._onDocClick),window.addEventListener(`resize`,()=>{d()&&s()})}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},b=e=>String(e??``).replace(/"/g,`&quot;`).replace(/</g,`&lt;`),x=e=>String(e??``).replace(/<[^>]*>/g,``),S=[[`AF`,`Afghanistan`,`93`],[`AX`,`Åland Islands`,`358`],[`AL`,`Albania`,`355`],[`DZ`,`Algeria`,`213`],[`AS`,`American Samoa`,`1`],[`AD`,`Andorra`,`376`],[`AO`,`Angola`,`244`],[`AI`,`Anguilla`,`1`],[`AG`,`Antigua & Barbuda`,`1`],[`AR`,`Argentina`,`54`],[`AM`,`Armenia`,`374`],[`AW`,`Aruba`,`297`],[`AC`,`Ascension Island`,`247`],[`AU`,`Australia`,`61`],[`AT`,`Austria`,`43`],[`AZ`,`Azerbaijan`,`994`],[`BS`,`Bahamas`,`1`],[`BH`,`Bahrain`,`973`],[`BD`,`Bangladesh`,`880`],[`BB`,`Barbados`,`1`],[`BY`,`Belarus`,`375`],[`BE`,`Belgium`,`32`],[`BZ`,`Belize`,`501`],[`BJ`,`Benin`,`229`],[`BM`,`Bermuda`,`1`],[`BT`,`Bhutan`,`975`],[`BO`,`Bolivia`,`591`],[`BA`,`Bosnia & Herzegovina`,`387`],[`BW`,`Botswana`,`267`],[`BR`,`Brazil`,`55`],[`IO`,`British Indian Ocean Territory`,`246`],[`VG`,`British Virgin Islands`,`1`],[`BN`,`Brunei`,`673`],[`BG`,`Bulgaria`,`359`],[`BF`,`Burkina Faso`,`226`],[`BI`,`Burundi`,`257`],[`KH`,`Cambodia`,`855`],[`CM`,`Cameroon`,`237`],[`CA`,`Canada`,`1`],[`CV`,`Cape Verde`,`238`],[`BQ`,`Caribbean Netherlands`,`599`],[`KY`,`Cayman Islands`,`1`],[`CF`,`Central African Republic`,`236`],[`TD`,`Chad`,`235`],[`CL`,`Chile`,`56`],[`CN`,`China`,`86`],[`CX`,`Christmas Island`,`61`],[`CC`,`Cocos (Keeling) Islands`,`61`],[`CO`,`Colombia`,`57`],[`KM`,`Comoros`,`269`],[`CG`,`Congo - Brazzaville`,`242`],[`CD`,`Congo - Kinshasa`,`243`],[`CK`,`Cook Islands`,`682`],[`CR`,`Costa Rica`,`506`],[`CI`,`Côte d’Ivoire`,`225`],[`HR`,`Croatia`,`385`],[`CU`,`Cuba`,`53`],[`CW`,`Curaçao`,`599`],[`CY`,`Cyprus`,`357`],[`CZ`,`Czechia`,`420`],[`DK`,`Denmark`,`45`],[`DJ`,`Djibouti`,`253`],[`DM`,`Dominica`,`1`],[`DO`,`Dominican Republic`,`1`],[`EC`,`Ecuador`,`593`],[`EG`,`Egypt`,`20`],[`SV`,`El Salvador`,`503`],[`GQ`,`Equatorial Guinea`,`240`],[`ER`,`Eritrea`,`291`],[`EE`,`Estonia`,`372`],[`SZ`,`Eswatini`,`268`],[`ET`,`Ethiopia`,`251`],[`FK`,`Falkland Islands`,`500`],[`FO`,`Faroe Islands`,`298`],[`FJ`,`Fiji`,`679`],[`FI`,`Finland`,`358`],[`FR`,`France`,`33`],[`GF`,`French Guiana`,`594`],[`PF`,`French Polynesia`,`689`],[`GA`,`Gabon`,`241`],[`GM`,`Gambia`,`220`],[`GE`,`Georgia`,`995`],[`DE`,`Germany`,`49`],[`GH`,`Ghana`,`233`],[`GI`,`Gibraltar`,`350`],[`GR`,`Greece`,`30`],[`GL`,`Greenland`,`299`],[`GD`,`Grenada`,`1`],[`GP`,`Guadeloupe`,`590`],[`GU`,`Guam`,`1`],[`GT`,`Guatemala`,`502`],[`GG`,`Guernsey`,`44`],[`GN`,`Guinea`,`224`],[`GW`,`Guinea-Bissau`,`245`],[`GY`,`Guyana`,`592`],[`HT`,`Haiti`,`509`],[`HN`,`Honduras`,`504`],[`HK`,`Hong Kong SAR China`,`852`],[`HU`,`Hungary`,`36`],[`IS`,`Iceland`,`354`],[`IN`,`India`,`91`],[`ID`,`Indonesia`,`62`],[`IR`,`Iran`,`98`],[`IQ`,`Iraq`,`964`],[`IE`,`Ireland`,`353`],[`IM`,`Isle of Man`,`44`],[`IL`,`Israel`,`972`],[`IT`,`Italy`,`39`],[`JM`,`Jamaica`,`1`],[`JP`,`Japan`,`81`],[`JE`,`Jersey`,`44`],[`JO`,`Jordan`,`962`],[`KZ`,`Kazakhstan`,`7`],[`KE`,`Kenya`,`254`],[`KI`,`Kiribati`,`686`],[`XK`,`Kosovo`,`383`],[`KW`,`Kuwait`,`965`],[`KG`,`Kyrgyzstan`,`996`],[`LA`,`Laos`,`856`],[`LV`,`Latvia`,`371`],[`LB`,`Lebanon`,`961`],[`LS`,`Lesotho`,`266`],[`LR`,`Liberia`,`231`],[`LY`,`Libya`,`218`],[`LI`,`Liechtenstein`,`423`],[`LT`,`Lithuania`,`370`],[`LU`,`Luxembourg`,`352`],[`MO`,`Macao SAR China`,`853`],[`MG`,`Madagascar`,`261`],[`MW`,`Malawi`,`265`],[`MY`,`Malaysia`,`60`],[`MV`,`Maldives`,`960`],[`ML`,`Mali`,`223`],[`MT`,`Malta`,`356`],[`MH`,`Marshall Islands`,`692`],[`MQ`,`Martinique`,`596`],[`MR`,`Mauritania`,`222`],[`MU`,`Mauritius`,`230`],[`YT`,`Mayotte`,`262`],[`MX`,`Mexico`,`52`],[`FM`,`Micronesia`,`691`],[`MD`,`Moldova`,`373`],[`MC`,`Monaco`,`377`],[`MN`,`Mongolia`,`976`],[`ME`,`Montenegro`,`382`],[`MS`,`Montserrat`,`1`],[`MA`,`Morocco`,`212`],[`MZ`,`Mozambique`,`258`],[`MM`,`Myanmar (Burma)`,`95`],[`NA`,`Namibia`,`264`],[`NR`,`Nauru`,`674`],[`NP`,`Nepal`,`977`],[`NL`,`Netherlands`,`31`],[`NC`,`New Caledonia`,`687`],[`NZ`,`New Zealand`,`64`],[`NI`,`Nicaragua`,`505`],[`NE`,`Niger`,`227`],[`NG`,`Nigeria`,`234`],[`NU`,`Niue`,`683`],[`NF`,`Norfolk Island`,`672`],[`KP`,`North Korea`,`850`],[`MK`,`North Macedonia`,`389`],[`MP`,`Northern Mariana Islands`,`1`],[`NO`,`Norway`,`47`],[`OM`,`Oman`,`968`],[`PK`,`Pakistan`,`92`],[`PW`,`Palau`,`680`],[`PS`,`Palestinian Territories`,`970`],[`PA`,`Panama`,`507`],[`PG`,`Papua New Guinea`,`675`],[`PY`,`Paraguay`,`595`],[`PE`,`Peru`,`51`],[`PH`,`Philippines`,`63`],[`PL`,`Poland`,`48`],[`PT`,`Portugal`,`351`],[`PR`,`Puerto Rico`,`1`],[`QA`,`Qatar`,`974`],[`RE`,`Réunion`,`262`],[`RO`,`Romania`,`40`],[`RU`,`Russia`,`7`],[`RW`,`Rwanda`,`250`],[`WS`,`Samoa`,`685`],[`SM`,`San Marino`,`378`],[`ST`,`São Tomé & Príncipe`,`239`],[`SA`,`Saudi Arabia`,`966`],[`SN`,`Senegal`,`221`],[`RS`,`Serbia`,`381`],[`SC`,`Seychelles`,`248`],[`SL`,`Sierra Leone`,`232`],[`SG`,`Singapore`,`65`],[`SX`,`Sint Maarten`,`1`],[`SK`,`Slovakia`,`421`],[`SI`,`Slovenia`,`386`],[`SB`,`Solomon Islands`,`677`],[`SO`,`Somalia`,`252`],[`ZA`,`South Africa`,`27`],[`KR`,`South Korea`,`82`],[`SS`,`South Sudan`,`211`],[`ES`,`Spain`,`34`],[`LK`,`Sri Lanka`,`94`],[`BL`,`St. Barthélemy`,`590`],[`SH`,`St. Helena`,`290`],[`KN`,`St. Kitts & Nevis`,`1`],[`LC`,`St. Lucia`,`1`],[`MF`,`St. Martin`,`590`],[`PM`,`St. Pierre & Miquelon`,`508`],[`VC`,`St. Vincent & Grenadines`,`1`],[`SD`,`Sudan`,`249`],[`SR`,`Suriname`,`597`],[`SJ`,`Svalbard & Jan Mayen`,`47`],[`SE`,`Sweden`,`46`],[`CH`,`Switzerland`,`41`],[`SY`,`Syria`,`963`],[`TW`,`Taiwan`,`886`],[`TJ`,`Tajikistan`,`992`],[`TZ`,`Tanzania`,`255`],[`TH`,`Thailand`,`66`],[`TL`,`Timor-Leste`,`670`],[`TG`,`Togo`,`228`],[`TK`,`Tokelau`,`690`],[`TO`,`Tonga`,`676`],[`TT`,`Trinidad & Tobago`,`1`],[`TA`,`Tristan da Cunha`,`290`],[`TN`,`Tunisia`,`216`],[`TR`,`Türkiye`,`90`],[`TM`,`Turkmenistan`,`993`],[`TC`,`Turks & Caicos Islands`,`1`],[`TV`,`Tuvalu`,`688`],[`VI`,`U.S. Virgin Islands`,`1`],[`UG`,`Uganda`,`256`],[`UA`,`Ukraine`,`380`],[`AE`,`United Arab Emirates`,`971`],[`GB`,`United Kingdom`,`44`],[`US`,`United States`,`1`],[`UY`,`Uruguay`,`598`],[`UZ`,`Uzbekistan`,`998`],[`VU`,`Vanuatu`,`678`],[`VA`,`Vatican City`,`39`],[`VE`,`Venezuela`,`58`],[`VN`,`Vietnam`,`84`],[`WF`,`Wallis & Futuna`,`681`],[`EH`,`Western Sahara`,`212`],[`YE`,`Yemen`,`967`],[`ZM`,`Zambia`,`260`],[`ZW`,`Zimbabwe`,`263`]],C=e=>(S.find(t=>t[0]===e)||[``,``,``])[2],w=e=>`wui-flag wui-flag-${String(e).toLowerCase()}`,T=class extends HTMLElement{static get observedAttributes(){return[`value`,`country`,`placeholder`,`disabled`]}constructor(){super(),this._country=`IN`,this._national=``}connectedCallback(){this._rendered||this.render()}attributeChangedCallback(e,t,n){this._rendered&&(e===`country`&&(this._country=n||`IN`),this.render())}get value(){return`+${C(this._country)}${this._national}`}set value(e){this._national=String(e??``).replace(/[^0-9]/g,``),this._commit()}_commit(){a(this,this.value),this.dispatchEvent(new Event(`change`,{bubbles:!0}))}render(){let e=this.getAttribute(`placeholder`)||`Enter phone number`;this._country=this.getAttribute(`country`)||this._country;let t=S.map(([e,t,n])=>`<button type="button" role="option" class="country-dropdown-item${e===this._country?` selected`:``}" data-iso="${e}"><span class="${w(e)}" aria-hidden="true"></span><span class="country-name-text">${t}<span class="country-code-text">+${n}</span></span></button>`).join(``);this.innerHTML=`
+      </div>`,this._rendered=!0,a(this,this._values.join(`,`)),this._renderControl(),this._renderOptions(),this._wire()}_renderControl(){let e=this.querySelector(`[data-chips]`);if(!e)return;let t=this.getAttribute(`placeholder`)||`Select…`;if(!this._values.length){e.innerHTML=`<span class="search-select-placeholder">${s(t)}</span>`;return}e.innerHTML=this._values.map(e=>`<span class="chip chip-sm"><span class="chip-label">${this._labelHtmlFor(e)}</span><button type="button" class="chip-remove" data-remove="${b(e)}" aria-label="Remove"><i class="bi bi-x" aria-hidden="true"></i></button></span>`).join(``)}_renderOptions(e){let t=this.querySelector(`.search-select-options`),n=this.querySelector(`.search-select-empty`);if(!t)return;let r=(e||``).trim().toLowerCase(),i=this._readOptions();r&&(i=i.filter(e=>x(e.label).toLowerCase().includes(r))),t.innerHTML=i.map(e=>{let t=this._values.includes(String(e.value));return`<button type="button" role="option" class="search-select-option${t?` selected`:``}" data-value="${b(e.value)}" aria-selected="${t}"><span class="ms-check"><i class="bi bi-check" aria-hidden="true"></i></span><span class="ms-opt-label">${c(e)}</span></button>`}).join(``),n&&(n.hidden=i.length>0),this._active=-1}_wire(){let e=this.querySelector(`.search-select-control`),t=this.querySelector(`.search-select-menu`),n=this.querySelector(`.search-select-input`),r=this.querySelector(`.search-select-clear`),i=this.querySelector(`.search-select-options`);if(!e||!t)return;let o=()=>this.hasAttribute(`disabled`),s=()=>{let n=e.getBoundingClientRect();t.style.position=`fixed`,t.style.top=`${n.bottom+4}px`,t.style.left=`${n.left}px`,t.style.width=`${n.width}px`},c=()=>[...this.querySelectorAll(`.search-select-option`)],l=()=>c().filter(e=>!e.hidden),u=e=>{let t=l();this._active=e;for(let e of c())e.classList.remove(`is-active`);e>=0&&t[e]&&(t[e].classList.add(`is-active`),t[e].scrollIntoView({block:`nearest`}))},d=()=>!t.hidden,f=()=>{o()||(t.hidden=!1,e.setAttribute(`aria-expanded`,`true`),e.classList.add(`open`),s(),n&&(n.value=``,this._renderOptions(``),n.focus()))},p=()=>{t.hidden=!0,e.setAttribute(`aria-expanded`,`false`),e.classList.remove(`open`),u(-1)},m=()=>{a(this,this._values.join(`,`)),this.dispatchEvent(new Event(`change`,{bubbles:!0}))},h=e=>{let t=String(e);this._values.includes(t)?this._values=this._values.filter(e=>e!==t):this._values=[...this._values,t],this._renderControl(),this._renderOptions(n?n.value:``),m()},g=e=>{this._values=this._values.filter(t=>t!==String(e)),this._renderControl(),this._renderOptions(n?n.value:``),m()};e.addEventListener(`click`,e=>{let t=e.target.closest(`[data-remove]`);if(t){e.stopPropagation(),g(t.dataset.remove);return}d()?p():f()}),i.addEventListener(`click`,e=>{let t=e.target.closest(`.search-select-option`);t&&(h(t.dataset.value),n?.focus())}),i.addEventListener(`mousemove`,e=>{let t=e.target.closest(`.search-select-option`);t&&u(l().indexOf(t))}),n?.addEventListener(`input`,()=>{this._renderOptions(n.value),r&&(r.hidden=!n.value),u(-1)});let _=t=>{let r=l();t.key===`ArrowDown`?(t.preventDefault(),u(Math.min(this._active+1,r.length-1))):t.key===`ArrowUp`?(t.preventDefault(),u(Math.max(this._active-1,0))):t.key===`Enter`?(t.preventDefault(),r[this._active]&&h(r[this._active].dataset.value)):t.key===`Escape`?(p(),e.focus()):t.key===`Backspace`&&!n.value&&this._values.length&&g(this._values[this._values.length-1])};n?.addEventListener(`keydown`,_),r?.addEventListener(`click`,()=>{n.value=``,this._renderOptions(``),r.hidden=!0,n.focus()}),e.addEventListener(`keydown`,e=>{if(d()){_(e);return}(e.key===`ArrowDown`||e.key===`Enter`||e.key===` `)&&(e.preventDefault(),f())}),this._onDocClick=e=>{d()&&!this.contains(e.target)&&p()},document.addEventListener(`click`,this._onDocClick),window.addEventListener(`resize`,()=>{d()&&s()})}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},b=e=>String(e??``).replace(/"/g,`&quot;`).replace(/</g,`&lt;`),x=e=>String(e??``).replace(/<[^>]*>/g,``),S=/[^0-9]/g,C=/[^0-9a-zA-Z]/g,w=class extends HTMLElement{static get observedAttributes(){return[`value`,`length`,`mode`,`disabled`,`aria-label`]}get length(){let e=Number.parseInt(this.getAttribute(`length`)??`6`,10);return Number.isFinite(e)&&e>0?e:6}set length(e){this.setAttribute(`length`,String(e))}get mode(){return this.getAttribute(`mode`)===`alphanumeric`?`alphanumeric`:`numeric`}set mode(e){this.setAttribute(`mode`,String(e??`numeric`))}get value(){return this._value??``}set value(e){this._value=this._clean(e),a(this,this._value),this._paint()}_clean(e){return(e==null?``:String(e)).replace(this.mode===`alphanumeric`?C:S,``).slice(0,this.length)}connectedCallback(){this._rendered||this.render()}attributeChangedCallback(e,t,n){this._rendered&&(e===`value`?(this._value=this._clean(n),a(this,this._value),this._paint()):this.render())}render(){this._value=this._clean(this.getAttribute(`value`)??this._value);let e=this.length,t=this.mode===`numeric`,n=this.hasAttribute(`disabled`),r=Array.from({length:e},()=>`<span class="otp-slot" aria-hidden="true"></span>`).join(``),i=this.getAttribute(`aria-label`),o=i?` aria-label="${i.replace(/"/g,`&quot;`)}"`:``;this.innerHTML=`
+      <div class="otp">
+        <input
+          class="otp-field"
+          type="text"
+          autocomplete="one-time-code"
+          inputmode="${t?`numeric`:`text`}"
+          ${t?`pattern="[0-9]*"`:``}${o}
+          autocapitalize="off"
+          autocorrect="off"
+          spellcheck="false"
+          ${n?`disabled`:``} />
+        <div class="otp-slots" aria-hidden="true">${r}</div>
+      </div>`,this._rendered=!0,a(this,this._value),this._wire(),this._paint()}_refs(){return{input:this.querySelector(`.otp-field`),slots:[...this.querySelectorAll(`.otp-slot`)]}}_paint(){let{input:e,slots:t}=this._refs();if(!e||!t.length)return;e.value!==this._value&&(e.value=this._value);let n=e.selectionStart??this._value.length,r=Math.min(n,t.length-1),i=document.activeElement===e;t.forEach((e,t)=>{e.textContent=this._value[t]??``,e.classList.toggle(`filled`,!!this._value[t]),e.classList.toggle(`active`,i&&t===r)})}_wire(){let{input:e}=this._refs();if(!e)return;let t=e=>{let t=this._clean(e),n=t!==this._value;this._value=t,a(this,this._value),this._paint(),n&&this.dispatchEvent(new Event(`change`,{bubbles:!0})),n&&t.length===this.length&&this.dispatchEvent(new CustomEvent(`complete`,{bubbles:!0,detail:t}))};e.addEventListener(`input`,()=>t(e.value)),e.addEventListener(`paste`,e=>{let n=e.clipboardData?.getData(`text`);n!=null&&(e.preventDefault(),t(n))});for(let t of[`keyup`,`click`,`focus`,`blur`,`select`])e.addEventListener(t,()=>this._paint());document.addEventListener(`selectionchange`,()=>{document.activeElement===e&&this._paint()})}},T=[[`AF`,`Afghanistan`,`93`],[`AX`,`Åland Islands`,`358`],[`AL`,`Albania`,`355`],[`DZ`,`Algeria`,`213`],[`AS`,`American Samoa`,`1`],[`AD`,`Andorra`,`376`],[`AO`,`Angola`,`244`],[`AI`,`Anguilla`,`1`],[`AG`,`Antigua & Barbuda`,`1`],[`AR`,`Argentina`,`54`],[`AM`,`Armenia`,`374`],[`AW`,`Aruba`,`297`],[`AC`,`Ascension Island`,`247`],[`AU`,`Australia`,`61`],[`AT`,`Austria`,`43`],[`AZ`,`Azerbaijan`,`994`],[`BS`,`Bahamas`,`1`],[`BH`,`Bahrain`,`973`],[`BD`,`Bangladesh`,`880`],[`BB`,`Barbados`,`1`],[`BY`,`Belarus`,`375`],[`BE`,`Belgium`,`32`],[`BZ`,`Belize`,`501`],[`BJ`,`Benin`,`229`],[`BM`,`Bermuda`,`1`],[`BT`,`Bhutan`,`975`],[`BO`,`Bolivia`,`591`],[`BA`,`Bosnia & Herzegovina`,`387`],[`BW`,`Botswana`,`267`],[`BR`,`Brazil`,`55`],[`IO`,`British Indian Ocean Territory`,`246`],[`VG`,`British Virgin Islands`,`1`],[`BN`,`Brunei`,`673`],[`BG`,`Bulgaria`,`359`],[`BF`,`Burkina Faso`,`226`],[`BI`,`Burundi`,`257`],[`KH`,`Cambodia`,`855`],[`CM`,`Cameroon`,`237`],[`CA`,`Canada`,`1`],[`CV`,`Cape Verde`,`238`],[`BQ`,`Caribbean Netherlands`,`599`],[`KY`,`Cayman Islands`,`1`],[`CF`,`Central African Republic`,`236`],[`TD`,`Chad`,`235`],[`CL`,`Chile`,`56`],[`CN`,`China`,`86`],[`CX`,`Christmas Island`,`61`],[`CC`,`Cocos (Keeling) Islands`,`61`],[`CO`,`Colombia`,`57`],[`KM`,`Comoros`,`269`],[`CG`,`Congo - Brazzaville`,`242`],[`CD`,`Congo - Kinshasa`,`243`],[`CK`,`Cook Islands`,`682`],[`CR`,`Costa Rica`,`506`],[`CI`,`Côte d’Ivoire`,`225`],[`HR`,`Croatia`,`385`],[`CU`,`Cuba`,`53`],[`CW`,`Curaçao`,`599`],[`CY`,`Cyprus`,`357`],[`CZ`,`Czechia`,`420`],[`DK`,`Denmark`,`45`],[`DJ`,`Djibouti`,`253`],[`DM`,`Dominica`,`1`],[`DO`,`Dominican Republic`,`1`],[`EC`,`Ecuador`,`593`],[`EG`,`Egypt`,`20`],[`SV`,`El Salvador`,`503`],[`GQ`,`Equatorial Guinea`,`240`],[`ER`,`Eritrea`,`291`],[`EE`,`Estonia`,`372`],[`SZ`,`Eswatini`,`268`],[`ET`,`Ethiopia`,`251`],[`FK`,`Falkland Islands`,`500`],[`FO`,`Faroe Islands`,`298`],[`FJ`,`Fiji`,`679`],[`FI`,`Finland`,`358`],[`FR`,`France`,`33`],[`GF`,`French Guiana`,`594`],[`PF`,`French Polynesia`,`689`],[`GA`,`Gabon`,`241`],[`GM`,`Gambia`,`220`],[`GE`,`Georgia`,`995`],[`DE`,`Germany`,`49`],[`GH`,`Ghana`,`233`],[`GI`,`Gibraltar`,`350`],[`GR`,`Greece`,`30`],[`GL`,`Greenland`,`299`],[`GD`,`Grenada`,`1`],[`GP`,`Guadeloupe`,`590`],[`GU`,`Guam`,`1`],[`GT`,`Guatemala`,`502`],[`GG`,`Guernsey`,`44`],[`GN`,`Guinea`,`224`],[`GW`,`Guinea-Bissau`,`245`],[`GY`,`Guyana`,`592`],[`HT`,`Haiti`,`509`],[`HN`,`Honduras`,`504`],[`HK`,`Hong Kong SAR China`,`852`],[`HU`,`Hungary`,`36`],[`IS`,`Iceland`,`354`],[`IN`,`India`,`91`],[`ID`,`Indonesia`,`62`],[`IR`,`Iran`,`98`],[`IQ`,`Iraq`,`964`],[`IE`,`Ireland`,`353`],[`IM`,`Isle of Man`,`44`],[`IL`,`Israel`,`972`],[`IT`,`Italy`,`39`],[`JM`,`Jamaica`,`1`],[`JP`,`Japan`,`81`],[`JE`,`Jersey`,`44`],[`JO`,`Jordan`,`962`],[`KZ`,`Kazakhstan`,`7`],[`KE`,`Kenya`,`254`],[`KI`,`Kiribati`,`686`],[`XK`,`Kosovo`,`383`],[`KW`,`Kuwait`,`965`],[`KG`,`Kyrgyzstan`,`996`],[`LA`,`Laos`,`856`],[`LV`,`Latvia`,`371`],[`LB`,`Lebanon`,`961`],[`LS`,`Lesotho`,`266`],[`LR`,`Liberia`,`231`],[`LY`,`Libya`,`218`],[`LI`,`Liechtenstein`,`423`],[`LT`,`Lithuania`,`370`],[`LU`,`Luxembourg`,`352`],[`MO`,`Macao SAR China`,`853`],[`MG`,`Madagascar`,`261`],[`MW`,`Malawi`,`265`],[`MY`,`Malaysia`,`60`],[`MV`,`Maldives`,`960`],[`ML`,`Mali`,`223`],[`MT`,`Malta`,`356`],[`MH`,`Marshall Islands`,`692`],[`MQ`,`Martinique`,`596`],[`MR`,`Mauritania`,`222`],[`MU`,`Mauritius`,`230`],[`YT`,`Mayotte`,`262`],[`MX`,`Mexico`,`52`],[`FM`,`Micronesia`,`691`],[`MD`,`Moldova`,`373`],[`MC`,`Monaco`,`377`],[`MN`,`Mongolia`,`976`],[`ME`,`Montenegro`,`382`],[`MS`,`Montserrat`,`1`],[`MA`,`Morocco`,`212`],[`MZ`,`Mozambique`,`258`],[`MM`,`Myanmar (Burma)`,`95`],[`NA`,`Namibia`,`264`],[`NR`,`Nauru`,`674`],[`NP`,`Nepal`,`977`],[`NL`,`Netherlands`,`31`],[`NC`,`New Caledonia`,`687`],[`NZ`,`New Zealand`,`64`],[`NI`,`Nicaragua`,`505`],[`NE`,`Niger`,`227`],[`NG`,`Nigeria`,`234`],[`NU`,`Niue`,`683`],[`NF`,`Norfolk Island`,`672`],[`KP`,`North Korea`,`850`],[`MK`,`North Macedonia`,`389`],[`MP`,`Northern Mariana Islands`,`1`],[`NO`,`Norway`,`47`],[`OM`,`Oman`,`968`],[`PK`,`Pakistan`,`92`],[`PW`,`Palau`,`680`],[`PS`,`Palestinian Territories`,`970`],[`PA`,`Panama`,`507`],[`PG`,`Papua New Guinea`,`675`],[`PY`,`Paraguay`,`595`],[`PE`,`Peru`,`51`],[`PH`,`Philippines`,`63`],[`PL`,`Poland`,`48`],[`PT`,`Portugal`,`351`],[`PR`,`Puerto Rico`,`1`],[`QA`,`Qatar`,`974`],[`RE`,`Réunion`,`262`],[`RO`,`Romania`,`40`],[`RU`,`Russia`,`7`],[`RW`,`Rwanda`,`250`],[`WS`,`Samoa`,`685`],[`SM`,`San Marino`,`378`],[`ST`,`São Tomé & Príncipe`,`239`],[`SA`,`Saudi Arabia`,`966`],[`SN`,`Senegal`,`221`],[`RS`,`Serbia`,`381`],[`SC`,`Seychelles`,`248`],[`SL`,`Sierra Leone`,`232`],[`SG`,`Singapore`,`65`],[`SX`,`Sint Maarten`,`1`],[`SK`,`Slovakia`,`421`],[`SI`,`Slovenia`,`386`],[`SB`,`Solomon Islands`,`677`],[`SO`,`Somalia`,`252`],[`ZA`,`South Africa`,`27`],[`KR`,`South Korea`,`82`],[`SS`,`South Sudan`,`211`],[`ES`,`Spain`,`34`],[`LK`,`Sri Lanka`,`94`],[`BL`,`St. Barthélemy`,`590`],[`SH`,`St. Helena`,`290`],[`KN`,`St. Kitts & Nevis`,`1`],[`LC`,`St. Lucia`,`1`],[`MF`,`St. Martin`,`590`],[`PM`,`St. Pierre & Miquelon`,`508`],[`VC`,`St. Vincent & Grenadines`,`1`],[`SD`,`Sudan`,`249`],[`SR`,`Suriname`,`597`],[`SJ`,`Svalbard & Jan Mayen`,`47`],[`SE`,`Sweden`,`46`],[`CH`,`Switzerland`,`41`],[`SY`,`Syria`,`963`],[`TW`,`Taiwan`,`886`],[`TJ`,`Tajikistan`,`992`],[`TZ`,`Tanzania`,`255`],[`TH`,`Thailand`,`66`],[`TL`,`Timor-Leste`,`670`],[`TG`,`Togo`,`228`],[`TK`,`Tokelau`,`690`],[`TO`,`Tonga`,`676`],[`TT`,`Trinidad & Tobago`,`1`],[`TA`,`Tristan da Cunha`,`290`],[`TN`,`Tunisia`,`216`],[`TR`,`Türkiye`,`90`],[`TM`,`Turkmenistan`,`993`],[`TC`,`Turks & Caicos Islands`,`1`],[`TV`,`Tuvalu`,`688`],[`VI`,`U.S. Virgin Islands`,`1`],[`UG`,`Uganda`,`256`],[`UA`,`Ukraine`,`380`],[`AE`,`United Arab Emirates`,`971`],[`GB`,`United Kingdom`,`44`],[`US`,`United States`,`1`],[`UY`,`Uruguay`,`598`],[`UZ`,`Uzbekistan`,`998`],[`VU`,`Vanuatu`,`678`],[`VA`,`Vatican City`,`39`],[`VE`,`Venezuela`,`58`],[`VN`,`Vietnam`,`84`],[`WF`,`Wallis & Futuna`,`681`],[`EH`,`Western Sahara`,`212`],[`YE`,`Yemen`,`967`],[`ZM`,`Zambia`,`260`],[`ZW`,`Zimbabwe`,`263`]],E=e=>(T.find(t=>t[0]===e)||[``,``,``])[2],D=e=>`wui-flag wui-flag-${String(e).toLowerCase()}`,O=class extends HTMLElement{static get observedAttributes(){return[`value`,`country`,`placeholder`,`disabled`]}constructor(){super(),this._country=`IN`,this._national=``}connectedCallback(){this._rendered||this.render()}attributeChangedCallback(e,t,n){this._rendered&&(e===`country`&&(this._country=n||`IN`),this.render())}get value(){return`+${E(this._country)}${this._national}`}set value(e){this._national=String(e??``).replace(/[^0-9]/g,``),this._commit()}_commit(){a(this,this.value),this.dispatchEvent(new Event(`change`,{bubbles:!0}))}render(){let e=this.getAttribute(`placeholder`)||`Enter phone number`;this._country=this.getAttribute(`country`)||this._country;let t=T.map(([e,t,n])=>`<button type="button" role="option" class="country-dropdown-item${e===this._country?` selected`:``}" data-iso="${e}"><span class="${D(e)}" aria-hidden="true"></span><span class="country-name-text">${t}<span class="country-code-text">+${n}</span></span></button>`).join(``);this.innerHTML=`
       <div class="phone-input-wrap">
         <div class="phone-country-adornment">
           <button type="button" class="country-toggle" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute(`disabled`)?` disabled`:``}>
-            <span class="${w(this._country)}" data-flag aria-hidden="true"></span>
+            <span class="${D(this._country)}" data-flag aria-hidden="true"></span>
             <i class="bi bi-chevron-down phone-chevron" aria-hidden="true"></i>
-            <span class="phone-dial" data-dial>+${C(this._country)}</span>
+            <span class="phone-dial" data-dial>+${E(this._country)}</span>
           </button>
           <div class="country-dropdown-menu" role="listbox" hidden>
             <div class="dropdown-search-wrapper"><span class="dropdown-search-icon"><i class="bi bi-search" aria-hidden="true"></i></span><input type="text" class="dropdown-search-input" placeholder="Search country or code" aria-label="Search countries" /></div>
             <div class="country-list-scroll">${t}<div class="country-empty" hidden>No countries found</div></div>
           </div>
         </div>
-        <input type="tel" class="input" placeholder="${E(e)}" value="${E(this._national)}"${this.hasAttribute(`disabled`)?` disabled`:``} />
-      </div>`,this._rendered=!0,a(this,this.value),this._wire()}_wire(){let e=this.querySelector(`.country-toggle`),t=this.querySelector(`.country-dropdown-menu`),n=this.querySelector(`.dropdown-search-input`),r=this.querySelector(`.country-list-scroll`),i=this.querySelector(`.country-empty`),o=this.querySelector(`input[type=tel]`),s=this.querySelector(`[data-flag]`),c=this.querySelector(`[data-dial]`);if(!e||!t)return;let l=()=>!t.hidden,u=()=>{let n=e.getBoundingClientRect(),r=t.offsetWidth||320,i=t.offsetHeight||320,a=window.innerHeight-n.bottom,o=a<i+6&&n.top>a?n.top-i-6:n.bottom+6,s=Math.min(Math.max(8,n.left),Math.max(8,window.innerWidth-r-8));t.style.top=`${Math.max(8,o)}px`,t.style.left=`${s}px`},d=()=>{t.hidden=!1,e.setAttribute(`aria-expanded`,`true`),n.value=``,p(``),u(),n.focus()},f=()=>{t.hidden=!0,e.setAttribute(`aria-expanded`,`false`)};this._reposition=()=>{l()&&u()},window.addEventListener(`scroll`,this._reposition,!0),window.addEventListener(`resize`,this._reposition);let p=e=>{let t=e.trim().toLowerCase(),n=0;for(let e of r.querySelectorAll(`.country-dropdown-item`)){let r=!t||e.textContent.toLowerCase().includes(t);e.hidden=!r,r&&(n+=1)}i&&(i.hidden=n>0)},m=e=>{this._country=e,this.setAttribute(`country`,e),s&&(s.className=w(e)),c&&(c.textContent=`+${C(e)}`);for(let t of r.querySelectorAll(`.country-dropdown-item`))t.classList.toggle(`selected`,t.dataset.iso===e);f(),this._commit()};e.addEventListener(`click`,()=>l()?f():d()),n.addEventListener(`input`,()=>p(n.value)),r.addEventListener(`click`,e=>{let t=e.target.closest(`.country-dropdown-item`);t&&m(t.dataset.iso)}),o.addEventListener(`input`,()=>{this._national=o.value.replace(/[^0-9]/g,``),this._commit()}),this._onDocClick=e=>{l()&&!this.contains(e.target)&&f()},document.addEventListener(`click`,this._onDocClick),a(this,this.value)}disconnectedCallback(){this._reposition&&(window.removeEventListener(`scroll`,this._reposition,!0),window.removeEventListener(`resize`,this._reposition)),this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},E=e=>String(e??``).replace(/"/g,`&quot;`).replace(/</g,`&lt;`),D=class extends HTMLElement{static get observedAttributes(){return[`value`,`placeholder`,`search-placeholder`,`searchable`,`disabled`,`compact`,`aria-label`]}_accessibleName(){return this.getAttribute(`aria-label`)||this.getAttribute(`placeholder`)||`Select`}constructor(){super(),this._value=``,this._optionsProp=null,this._active=-1}connectedCallback(){this._rendered||this.render()}attributeChangedCallback(e,t,n){this._rendered&&(e===`value`?this.value=n:this.render())}get value(){return this._value}set value(e){this._value=e==null?``:String(e),a(this,this._value),this._syncSelected()}set options(e){this._optionsProp=Array.isArray(e)?e:null,this.isConnected&&this.render()}get options(){return this._readOptions()}_snapshotDeclared(){if(this._declared)return;let e=[...this.querySelectorAll(`:scope > wui-option`)];e.length&&(this._declared=e.map(e=>({value:e.getAttribute(`value`)??e.textContent.trim(),label:e.innerHTML,[o]:!0,selected:e.hasAttribute(`selected`)})))}_readOptions(){return this._optionsProp?this._optionsProp:(this._snapshotDeclared(),this._declared||[])}render(){this._snapshotDeclared();let e=this._readOptions(),t=this.hasAttribute(`searchable`),n=this.getAttribute(`placeholder`)||`Select...`,r=this.getAttribute(`search-placeholder`)||`Search...`,i=e.find(e=>String(e.value)===String(this._value))||e.find(e=>e.selected);i&&(this._value=String(i.value)),a(this,this._value);let o=e.map(e=>{let t=String(e.value)===String(this._value);return`<button type="button" role="option" class="search-select-option${t?` selected`:``}" data-value="${O(e.value)}" aria-selected="${t}">${c(e)}</button>`}).join(``);this.innerHTML=`
-      <div class="search-select${this.hasAttribute(`compact`)?` search-select-compact`:``}">
-        <button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-label="${O(this._accessibleName())}"${this.hasAttribute(`disabled`)?` disabled`:``}>
-          <span class="${i?``:`search-select-placeholder`}" data-label>${i?c(i):s(n)}</span>
+        <input type="tel" class="input" placeholder="${k(e)}" value="${k(this._national)}"${this.hasAttribute(`disabled`)?` disabled`:``} />
+      </div>`,this._rendered=!0,a(this,this.value),this._wire()}_wire(){let e=this.querySelector(`.country-toggle`),t=this.querySelector(`.country-dropdown-menu`),n=this.querySelector(`.dropdown-search-input`),r=this.querySelector(`.country-list-scroll`),i=this.querySelector(`.country-empty`),o=this.querySelector(`input[type=tel]`),s=this.querySelector(`[data-flag]`),c=this.querySelector(`[data-dial]`);if(!e||!t)return;let l=()=>!t.hidden,u=()=>{let n=e.getBoundingClientRect(),r=t.offsetWidth||320,i=t.offsetHeight||320,a=window.innerHeight-n.bottom,o=a<i+6&&n.top>a?n.top-i-6:n.bottom+6,s=Math.min(Math.max(8,n.left),Math.max(8,window.innerWidth-r-8));t.style.top=`${Math.max(8,o)}px`,t.style.left=`${s}px`},d=()=>{t.hidden=!1,e.setAttribute(`aria-expanded`,`true`),n.value=``,p(``),u(),n.focus()},f=()=>{t.hidden=!0,e.setAttribute(`aria-expanded`,`false`)};this._reposition=()=>{l()&&u()},window.addEventListener(`scroll`,this._reposition,!0),window.addEventListener(`resize`,this._reposition);let p=e=>{let t=e.trim().toLowerCase(),n=0;for(let e of r.querySelectorAll(`.country-dropdown-item`)){let r=!t||e.textContent.toLowerCase().includes(t);e.hidden=!r,r&&(n+=1)}i&&(i.hidden=n>0)},m=e=>{this._country=e,this.setAttribute(`country`,e),s&&(s.className=D(e)),c&&(c.textContent=`+${E(e)}`);for(let t of r.querySelectorAll(`.country-dropdown-item`))t.classList.toggle(`selected`,t.dataset.iso===e);f(),this._commit()};e.addEventListener(`click`,()=>l()?f():d()),n.addEventListener(`input`,()=>p(n.value)),r.addEventListener(`click`,e=>{let t=e.target.closest(`.country-dropdown-item`);t&&m(t.dataset.iso)}),o.addEventListener(`input`,()=>{this._national=o.value.replace(/[^0-9]/g,``),this._commit()}),this._onDocClick=e=>{l()&&!this.contains(e.target)&&f()},document.addEventListener(`click`,this._onDocClick),a(this,this.value)}disconnectedCallback(){this._reposition&&(window.removeEventListener(`scroll`,this._reposition,!0),window.removeEventListener(`resize`,this._reposition)),this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},k=e=>String(e??``).replace(/"/g,`&quot;`).replace(/</g,`&lt;`),A=class extends HTMLElement{static get observedAttributes(){return[`value`,`placeholder`,`search-placeholder`,`searchable`,`disabled`,`compact`,`size`,`clearable`,`aria-label`]}_accessibleName(){return this.getAttribute(`aria-label`)||this.getAttribute(`placeholder`)||`Select`}constructor(){super(),this._value=``,this._optionsProp=null,this._active=-1}connectedCallback(){this._rendered||this.render()}attributeChangedCallback(e,t,n){this._rendered&&(e===`value`?this.value=n:this.render())}get value(){return this._value}set value(e){this._value=e==null?``:String(e),a(this,this._value),this._syncSelected(),this._syncReset()}set options(e){this._optionsProp=Array.isArray(e)?e:null,this.isConnected&&this.render()}get options(){return this._readOptions()}_snapshotDeclared(){if(this._declared)return;let e=[...this.querySelectorAll(`:scope > wui-option`)];e.length&&(this._declared=e.map(e=>({value:e.getAttribute(`value`)??e.textContent.trim(),label:e.innerHTML,[o]:!0,selected:e.hasAttribute(`selected`)})))}_readOptions(){return this._optionsProp?this._optionsProp:(this._snapshotDeclared(),this._declared||[])}render(){this._snapshotDeclared();let e=this._readOptions(),t=this.hasAttribute(`searchable`),n=this.hasAttribute(`clearable`),r=this.getAttribute(`size`),i=r===`sm`?` search-select-sm`:r===`lg`?` search-select-lg`:``,o=this.getAttribute(`placeholder`)||`Select...`,l=this.getAttribute(`search-placeholder`)||`Search...`,u=e.find(e=>String(e.value)===String(this._value))||e.find(e=>e.selected);u&&(this._value=String(u.value)),a(this,this._value);let d=e.map(e=>{let t=String(e.value)===String(this._value);return`<button type="button" role="option" class="search-select-option${t?` selected`:``}" data-value="${j(e.value)}" aria-selected="${t}">${c(e)}</button>`}).join(``);this.innerHTML=`
+      <div class="search-select${this.hasAttribute(`compact`)?` search-select-compact`:``}${i}">
+        <button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-label="${j(this._accessibleName())}"${this.hasAttribute(`disabled`)?` disabled`:``}>
+          <span class="${u?``:`search-select-placeholder`}" data-label>${u?c(u):s(o)}</span>
+          ${n?`<span class="search-select-reset" role="button" aria-label="Clear selection" hidden><i class="bi bi-x-lg" aria-hidden="true"></i></span>`:``}
           <i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
         </button>
         <div class="search-select-menu search-select-menu-fixed" role="listbox" tabindex="-1" hidden>
-          ${t?`<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${O(r)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden><i class="bi bi-x" aria-hidden="true"></i></button></div>`:``}
-          <div class="search-select-options">${o}<div class="search-select-empty" hidden>No matches</div></div>
+          ${t?`<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${j(l)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden><i class="bi bi-x" aria-hidden="true"></i></button></div>`:``}
+          <div class="search-select-options">${d}<div class="search-select-empty" hidden>No matches</div></div>
         </div>
-      </div>`,this._rendered=!0,a(this,this._value),this._wire()}_refs(){return{control:this.querySelector(`.search-select-control`),menu:this.querySelector(`.search-select-menu`),label:this.querySelector(`[data-label]`),search:this.querySelector(`.search-select-input`),clear:this.querySelector(`.search-select-clear`),empty:this.querySelector(`.search-select-empty`),optionsWrap:this.querySelector(`.search-select-options`)}}_optionEls(){return[...this.querySelectorAll(`.search-select-option`)]}_visible(){return this._optionEls().filter(e=>!e.hidden)}_syncSelected(){let{label:e}=this._refs(),t=this._readOptions().find(e=>String(e.value)===String(this._value));for(let e of this._optionEls()){let t=e.dataset.value===String(this._value);e.classList.toggle(`selected`,t),e.setAttribute(`aria-selected`,String(t))}e&&(e.innerHTML=t?c(t):e.innerHTML,e.classList.toggle(`search-select-placeholder`,!t))}_wire(){let e=this._refs();if(!e.control||!e.menu)return;let t=()=>{let t=e.control.getBoundingClientRect();e.menu.style.position=`fixed`,e.menu.style.top=`${t.bottom+4}px`,e.menu.style.left=`${t.left}px`,e.menu.style.width=`${t.width}px`},n=e=>{let t=this._visible();this._active=e;for(let e of this._optionEls())e.classList.remove(`is-active`);e>=0&&t[e]&&(t[e].classList.add(`is-active`),t[e].scrollIntoView({block:`nearest`}))},r=t=>{let n=t.trim().toLowerCase(),r=0;for(let e of this._optionEls()){let t=!n||e.textContent.toLowerCase().includes(n);e.hidden=!t,t&&(r+=1)}e.empty&&(e.empty.hidden=r>0),e.clear&&(e.clear.hidden=!n)},i=()=>!e.menu.hidden,a=()=>{e.menu.hidden=!1,e.control.setAttribute(`aria-expanded`,`true`),e.control.classList.add(`open`),t(),e.search&&(e.search.value=``,r(``),e.search.focus()),n(this._optionEls().findIndex(e=>e.classList.contains(`selected`)))},o=()=>{e.menu.hidden=!0,e.control.setAttribute(`aria-expanded`,`false`),e.control.classList.remove(`open`),n(-1)},s=t=>{this.value=t.dataset.value,this.dispatchEvent(new Event(`change`,{bubbles:!0})),o(),e.control.focus()},c=t=>{let r=this._visible();t.key===`ArrowDown`?(t.preventDefault(),n(Math.min(this._active+1,r.length-1))):t.key===`ArrowUp`?(t.preventDefault(),n(Math.max(this._active-1,0))):t.key===`Enter`?(t.preventDefault(),r[this._active]&&s(r[this._active])):t.key===`Escape`&&(o(),e.control.focus())};e.control.addEventListener(`click`,()=>i()?o():a()),e.control.addEventListener(`keydown`,e=>{if(i()){c(e);return}(e.key===`ArrowDown`||e.key===`Enter`||e.key===` `)&&(e.preventDefault(),a())}),e.optionsWrap.addEventListener(`click`,e=>{let t=e.target.closest(`.search-select-option`);t&&s(t)}),e.optionsWrap.addEventListener(`mousemove`,e=>{let t=e.target.closest(`.search-select-option`);t&&n(this._visible().indexOf(t))}),e.search?.addEventListener(`input`,()=>{r(e.search.value),n(-1)}),e.search?.addEventListener(`keydown`,c),e.clear?.addEventListener(`click`,()=>{e.search.value=``,r(``),e.search.focus()}),e.menu.addEventListener(`keydown`,c),this._onDocClick=e=>{i()&&!this.contains(e.target)&&o()},document.addEventListener(`click`,this._onDocClick),window.addEventListener(`resize`,()=>{i()&&t()})}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},O=e=>String(e??``).replace(/"/g,`&quot;`).replace(/</g,`&lt;`),k=`image/png,image/jpeg,image/webp`,A=5,j={"image/png":[`.png`],"image/jpeg":[`.jpg`,`.jpeg`],"image/webp":[`.webp`],"image/gif":[`.gif`],"image/svg+xml":[`.svg`],"application/pdf":[`.pdf`]},M={"image/png":`PNG`,"image/jpeg":`JPG`,"image/webp":`WEBP`,"image/gif":`GIF`,"image/svg+xml":`SVG`,"application/pdf":`PDF`,".png":`PNG`,".jpg":`JPG`,".jpeg":`JPG`,".webp":`WEBP`,".gif":`GIF`,".svg":`SVG`,".pdf":`PDF`},N=e=>String(e||``).split(`,`).map(e=>e.trim().toLowerCase()).filter(Boolean);function P(e){let t=[];for(let n of N(e)){let e=M[n]||(n.startsWith(`.`)?n.slice(1).toUpperCase():n.toUpperCase());t.includes(e)||t.push(e)}return t.length<=1?t[0]||`supported`:`${t.slice(0,-1).join(`, `)} or ${t[t.length-1]}`}function F(e,t){let n=N(t);if(!n.length)return!0;let r=(e.type||``).toLowerCase(),i=(e.name||``).toLowerCase();return n.some(e=>e.startsWith(`.`)?i.endsWith(e):e.endsWith(`/*`)?r.startsWith(e.slice(0,-1)):r&&r===e?!0:!r&&(j[e]||[]).some(e=>i.endsWith(e)))}function I(e,t={}){if(!e)return null;let n=t.accept===void 0?k:t.accept,r=t.maxSizeMb||5;return F(e,n)?e.size>r*1024*1024?`Keep the file under ${r} MB.`:null:`Choose a ${P(n)} file.`}var L=(e,t)=>{typeof customElements<`u`&&!customElements.get(e)&&customElements.define(e,t)};function R(){L(`wui-select`,D),L(`wui-phone`,T),L(`wui-datepicker`,v),L(`wui-autocomplete`,l),L(`wui-multiselect`,y),L(`wui-status-icon`,r)}return R(),e.DEFAULT_IMAGE_ACCEPT=k,e.DEFAULT_MAX_SIZE_MB=A,e.STATUS_TONES=n,e.WuiAutocomplete=l,e.WuiDatePicker=v,e.WuiMultiSelect=y,e.WuiPhone=T,e.WuiSelect=D,e.WuiStatusIcon=r,e.acceptLabel=P,e.defineWeborityElements=R,e.matchesAccept=F,e.validateFile=I,e})({});
+      </div>`,this._rendered=!0,a(this,this._value),this._wire(),this._syncReset()}_refs(){return{control:this.querySelector(`.search-select-control`),menu:this.querySelector(`.search-select-menu`),label:this.querySelector(`[data-label]`),reset:this.querySelector(`.search-select-reset`),search:this.querySelector(`.search-select-input`),clear:this.querySelector(`.search-select-clear`),empty:this.querySelector(`.search-select-empty`),optionsWrap:this.querySelector(`.search-select-options`)}}_optionEls(){return[...this.querySelectorAll(`.search-select-option`)]}_visible(){return this._optionEls().filter(e=>!e.hidden)}_syncSelected(){let{label:e}=this._refs(),t=this._readOptions().find(e=>String(e.value)===String(this._value));for(let e of this._optionEls()){let t=e.dataset.value===String(this._value);e.classList.toggle(`selected`,t),e.setAttribute(`aria-selected`,String(t))}e&&(e.innerHTML=t?c(t):e.innerHTML,e.classList.toggle(`search-select-placeholder`,!t))}_syncReset(){let{reset:e}=this._refs();e&&(e.hidden=!(this.hasAttribute(`clearable`)&&this._value!==``&&!this.hasAttribute(`disabled`)))}_wire(){let e=this._refs();if(!e.control||!e.menu)return;let t=()=>{let t=e.control.getBoundingClientRect();e.menu.style.position=`fixed`,e.menu.style.top=`${t.bottom+4}px`,e.menu.style.left=`${t.left}px`,e.menu.style.width=`${t.width}px`},n=e=>{let t=this._visible();this._active=e;for(let e of this._optionEls())e.classList.remove(`is-active`);e>=0&&t[e]&&(t[e].classList.add(`is-active`),t[e].scrollIntoView({block:`nearest`}))},r=t=>{let n=t.trim().toLowerCase(),r=0;for(let e of this._optionEls()){let t=!n||e.textContent.toLowerCase().includes(n);e.hidden=!t,t&&(r+=1)}e.empty&&(e.empty.hidden=r>0),e.clear&&(e.clear.hidden=!n)},i=()=>!e.menu.hidden,a=()=>{e.menu.hidden=!1,e.control.setAttribute(`aria-expanded`,`true`),e.control.classList.add(`open`),t(),e.search&&(e.search.value=``,r(``),e.search.focus()),n(this._optionEls().findIndex(e=>e.classList.contains(`selected`)))},o=()=>{e.menu.hidden=!0,e.control.setAttribute(`aria-expanded`,`false`),e.control.classList.remove(`open`),n(-1)},s=t=>{this.value=t.dataset.value,this.dispatchEvent(new Event(`change`,{bubbles:!0})),o(),e.control.focus()},c=t=>{let r=this._visible();t.key===`ArrowDown`?(t.preventDefault(),n(Math.min(this._active+1,r.length-1))):t.key===`ArrowUp`?(t.preventDefault(),n(Math.max(this._active-1,0))):t.key===`Enter`?(t.preventDefault(),r[this._active]&&s(r[this._active])):t.key===`Escape`&&(o(),e.control.focus())};e.reset?.addEventListener(`click`,t=>{t.stopPropagation(),this.value=``,this.dispatchEvent(new Event(`change`,{bubbles:!0})),e.control.focus()}),e.control.addEventListener(`click`,()=>i()?o():a()),e.control.addEventListener(`keydown`,e=>{if(i()){c(e);return}(e.key===`ArrowDown`||e.key===`Enter`||e.key===` `)&&(e.preventDefault(),a())}),e.optionsWrap.addEventListener(`click`,e=>{let t=e.target.closest(`.search-select-option`);t&&s(t)}),e.optionsWrap.addEventListener(`mousemove`,e=>{let t=e.target.closest(`.search-select-option`);t&&n(this._visible().indexOf(t))}),e.optionsWrap.addEventListener(`mouseleave`,()=>n(-1)),e.search?.addEventListener(`input`,()=>{r(e.search.value),n(-1)}),e.search?.addEventListener(`keydown`,c),e.clear?.addEventListener(`click`,()=>{e.search.value=``,r(``),e.search.focus()}),e.menu.addEventListener(`keydown`,c),this._onDocClick=e=>{i()&&!this.contains(e.target)&&o()},document.addEventListener(`click`,this._onDocClick),window.addEventListener(`resize`,()=>{i()&&t()})}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},j=e=>String(e??``).replace(/"/g,`&quot;`).replace(/</g,`&lt;`),M=`image/png,image/jpeg,image/webp`,N=5,P={"image/png":[`.png`],"image/jpeg":[`.jpg`,`.jpeg`],"image/webp":[`.webp`],"image/gif":[`.gif`],"image/svg+xml":[`.svg`],"application/pdf":[`.pdf`]},F={"image/png":`PNG`,"image/jpeg":`JPG`,"image/webp":`WEBP`,"image/gif":`GIF`,"image/svg+xml":`SVG`,"application/pdf":`PDF`,".png":`PNG`,".jpg":`JPG`,".jpeg":`JPG`,".webp":`WEBP`,".gif":`GIF`,".svg":`SVG`,".pdf":`PDF`},I=e=>String(e||``).split(`,`).map(e=>e.trim().toLowerCase()).filter(Boolean);function L(e){let t=[];for(let n of I(e)){let e=F[n]||(n.startsWith(`.`)?n.slice(1).toUpperCase():n.toUpperCase());t.includes(e)||t.push(e)}return t.length<=1?t[0]||`supported`:`${t.slice(0,-1).join(`, `)} or ${t[t.length-1]}`}function R(e,t){let n=I(t);if(!n.length)return!0;let r=(e.type||``).toLowerCase(),i=(e.name||``).toLowerCase();return n.some(e=>e.startsWith(`.`)?i.endsWith(e):e.endsWith(`/*`)?r.startsWith(e.slice(0,-1)):r&&r===e?!0:!r&&(P[e]||[]).some(e=>i.endsWith(e)))}function z(e,t={}){if(!e)return null;let n=t.accept===void 0?M:t.accept,r=t.maxSizeMb||5;return R(e,n)?e.size>r*1024*1024?`Keep the file under ${r} MB.`:null:`Choose a ${L(n)} file.`}var B=(e,t)=>{typeof customElements<`u`&&!customElements.get(e)&&customElements.define(e,t)};function V(){B(`wui-select`,A),B(`wui-phone`,O),B(`wui-datepicker`,v),B(`wui-autocomplete`,l),B(`wui-multiselect`,y),B(`wui-otp`,w),B(`wui-status-icon`,r)}return V(),e.DEFAULT_IMAGE_ACCEPT=M,e.DEFAULT_MAX_SIZE_MB=N,e.STATUS_TONES=n,e.WuiAutocomplete=l,e.WuiDatePicker=v,e.WuiMultiSelect=y,e.WuiOtp=w,e.WuiPhone=O,e.WuiSelect=A,e.WuiStatusIcon=r,e.acceptLabel=L,e.defineWeborityElements=V,e.matchesAccept=R,e.validateFile=z,e})({});

package/dist/ui-elements.js

@@ -487,7 +487,103 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
 	disconnectedCallback() {
 		this._onDocClick && document.removeEventListener("click", this._onDocClick);
 	}
-}, y = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), b = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), x = [
+}, y = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), b = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), x = /[^0-9]/g, S = /[^0-9a-zA-Z]/g, C = class extends HTMLElement {
+	static get observedAttributes() {
+		return [
+			"value",
+			"length",
+			"mode",
+			"disabled",
+			"aria-label"
+		];
+	}
+	get length() {
+		let e = Number.parseInt(this.getAttribute("length") ?? "6", 10);
+		return Number.isFinite(e) && e > 0 ? e : 6;
+	}
+	set length(e) {
+		this.setAttribute("length", String(e));
+	}
+	get mode() {
+		return this.getAttribute("mode") === "alphanumeric" ? "alphanumeric" : "numeric";
+	}
+	set mode(e) {
+		this.setAttribute("mode", String(e ?? "numeric"));
+	}
+	get value() {
+		return this._value ?? "";
+	}
+	set value(e) {
+		this._value = this._clean(e), i(this, this._value), this._paint();
+	}
+	_clean(e) {
+		return (e == null ? "" : String(e)).replace(this.mode === "alphanumeric" ? S : x, "").slice(0, this.length);
+	}
+	connectedCallback() {
+		this._rendered || this.render();
+	}
+	attributeChangedCallback(e, t, n) {
+		this._rendered && (e === "value" ? (this._value = this._clean(n), i(this, this._value), this._paint()) : this.render());
+	}
+	render() {
+		this._value = this._clean(this.getAttribute("value") ?? this._value);
+		let e = this.length, t = this.mode === "numeric", n = this.hasAttribute("disabled"), r = Array.from({ length: e }, () => "<span class=\"otp-slot\" aria-hidden=\"true\"></span>").join(""), a = this.getAttribute("aria-label"), o = a ? ` aria-label="${a.replace(/"/g, "&quot;")}"` : "";
+		this.innerHTML = `
+      <div class="otp">
+        <input
+          class="otp-field"
+          type="text"
+          autocomplete="one-time-code"
+          inputmode="${t ? "numeric" : "text"}"
+          ${t ? "pattern=\"[0-9]*\"" : ""}${o}
+          autocapitalize="off"
+          autocorrect="off"
+          spellcheck="false"
+          ${n ? "disabled" : ""} />
+        <div class="otp-slots" aria-hidden="true">${r}</div>
+      </div>`, this._rendered = !0, i(this, this._value), this._wire(), this._paint();
+	}
+	_refs() {
+		return {
+			input: this.querySelector(".otp-field"),
+			slots: [...this.querySelectorAll(".otp-slot")]
+		};
+	}
+	_paint() {
+		let { input: e, slots: t } = this._refs();
+		if (!e || !t.length) return;
+		e.value !== this._value && (e.value = this._value);
+		let n = e.selectionStart ?? this._value.length, r = Math.min(n, t.length - 1), i = document.activeElement === e;
+		t.forEach((e, t) => {
+			e.textContent = this._value[t] ?? "", e.classList.toggle("filled", !!this._value[t]), e.classList.toggle("active", i && t === r);
+		});
+	}
+	_wire() {
+		let { input: e } = this._refs();
+		if (!e) return;
+		let t = (e) => {
+			let t = this._clean(e), n = t !== this._value;
+			this._value = t, i(this, this._value), this._paint(), n && this.dispatchEvent(new Event("change", { bubbles: !0 })), n && t.length === this.length && this.dispatchEvent(new CustomEvent("complete", {
+				bubbles: !0,
+				detail: t
+			}));
+		};
+		e.addEventListener("input", () => t(e.value)), e.addEventListener("paste", (e) => {
+			let n = e.clipboardData?.getData("text");
+			n != null && (e.preventDefault(), t(n));
+		});
+		for (let t of [
+			"keyup",
+			"click",
+			"focus",
+			"blur",
+			"select"
+		]) e.addEventListener(t, () => this._paint());
+		document.addEventListener("selectionchange", () => {
+			document.activeElement === e && this._paint();
+		});
+	}
+}, w = [
 	[
 		"AF",
 		"Afghanistan",
@@ -1713,11 +1809,11 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
 		"Zimbabwe",
 		"263"
 	]
-], S = (e) => (x.find((t) => t[0] === e) || [
+], T = (e) => (w.find((t) => t[0] === e) || [
 	"",
 	"",
 	""
-])[2], C = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, w = class extends HTMLElement {
+])[2], E = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, D = class extends HTMLElement {
 	static get observedAttributes() {
 		return [
 			"value",
@@ -1736,7 +1832,7 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
 		this._rendered && (e === "country" && (this._country = n || "IN"), this.render());
 	}
 	get value() {
-		return `+${S(this._country)}${this._national}`;
+		return `+${T(this._country)}${this._national}`;
 	}
 	set value(e) {
 		this._national = String(e ?? "").replace(/[^0-9]/g, ""), this._commit();
@@ -1747,21 +1843,21 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
 	render() {
 		let e = this.getAttribute("placeholder") || "Enter phone number";
 		this._country = this.getAttribute("country") || this._country;
-		let t = x.map(([e, t, n]) => `<button type="button" role="option" class="country-dropdown-item${e === this._country ? " selected" : ""}" data-iso="${e}"><span class="${C(e)}" aria-hidden="true"></span><span class="country-name-text">${t}<span class="country-code-text">+${n}</span></span></button>`).join("");
+		let t = w.map(([e, t, n]) => `<button type="button" role="option" class="country-dropdown-item${e === this._country ? " selected" : ""}" data-iso="${e}"><span class="${E(e)}" aria-hidden="true"></span><span class="country-name-text">${t}<span class="country-code-text">+${n}</span></span></button>`).join("");
 		this.innerHTML = `
       <div class="phone-input-wrap">
         <div class="phone-country-adornment">
           <button type="button" class="country-toggle" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}>
-            <span class="${C(this._country)}" data-flag aria-hidden="true"></span>
+            <span class="${E(this._country)}" data-flag aria-hidden="true"></span>
             <i class="bi bi-chevron-down phone-chevron" aria-hidden="true"></i>
-            <span class="phone-dial" data-dial>+${S(this._country)}</span>
+            <span class="phone-dial" data-dial>+${T(this._country)}</span>
           </button>
           <div class="country-dropdown-menu" role="listbox" hidden>
             <div class="dropdown-search-wrapper"><span class="dropdown-search-icon"><i class="bi bi-search" aria-hidden="true"></i></span><input type="text" class="dropdown-search-input" placeholder="Search country or code" aria-label="Search countries" /></div>
             <div class="country-list-scroll">${t}<div class="country-empty" hidden>No countries found</div></div>
           </div>
         </div>
-        <input type="tel" class="input" placeholder="${T(e)}" value="${T(this._national)}"${this.hasAttribute("disabled") ? " disabled" : ""} />
+        <input type="tel" class="input" placeholder="${O(e)}" value="${O(this._national)}"${this.hasAttribute("disabled") ? " disabled" : ""} />
       </div>`, this._rendered = !0, i(this, this.value), this._wire();
 	}
 	_wire() {
@@ -1786,7 +1882,7 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
 			}
 			a && (a.hidden = n > 0);
 		}, m = (e) => {
-			this._country = e, this.setAttribute("country", e), s && (s.className = C(e)), c && (c.textContent = `+${S(e)}`);
+			this._country = e, this.setAttribute("country", e), s && (s.className = E(e)), c && (c.textContent = `+${T(e)}`);
 			for (let t of r.querySelectorAll(".country-dropdown-item")) t.classList.toggle("selected", t.dataset.iso === e);
 			f(), this._commit();
 		};
@@ -1802,7 +1898,7 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
 	disconnectedCallback() {
 		this._reposition && (window.removeEventListener("scroll", this._reposition, !0), window.removeEventListener("resize", this._reposition)), this._onDocClick && document.removeEventListener("click", this._onDocClick);
 	}
-}, T = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), E = class extends HTMLElement {
+}, O = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), k = class extends HTMLElement {
 	static get observedAttributes() {
 		return [
 			"value",
@@ -1811,6 +1907,8 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
 			"searchable",
 			"disabled",
 			"compact",
+			"size",
+			"clearable",
 			"aria-label"
 		];
 	}
@@ -1830,7 +1928,7 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
 		return this._value;
 	}
 	set value(e) {
-		this._value = e == null ? "" : String(e), i(this, this._value), this._syncSelected();
+		this._value = e == null ? "" : String(e), i(this, this._value), this._syncSelected(), this._syncReset();
 	}
 	set options(e) {
 		this._optionsProp = Array.isArray(e) ? e : null, this.isConnected && this.render();
@@ -1853,29 +1951,31 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
 	}
 	render() {
 		this._snapshotDeclared();
-		let e = this._readOptions(), t = this.hasAttribute("searchable"), n = this.getAttribute("placeholder") || "Select...", r = this.getAttribute("search-placeholder") || "Search...", a = e.find((e) => String(e.value) === String(this._value)) || e.find((e) => e.selected);
-		a && (this._value = String(a.value)), i(this, this._value);
-		let c = e.map((e) => {
+		let e = this._readOptions(), t = this.hasAttribute("searchable"), n = this.hasAttribute("clearable"), r = this.getAttribute("size"), a = r === "sm" ? " search-select-sm" : r === "lg" ? " search-select-lg" : "", c = this.getAttribute("placeholder") || "Select...", l = this.getAttribute("search-placeholder") || "Search...", u = e.find((e) => String(e.value) === String(this._value)) || e.find((e) => e.selected);
+		u && (this._value = String(u.value)), i(this, this._value);
+		let d = e.map((e) => {
 			let t = String(e.value) === String(this._value);
-			return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${D(e.value)}" aria-selected="${t}">${s(e)}</button>`;
+			return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${A(e.value)}" aria-selected="${t}">${s(e)}</button>`;
 		}).join("");
 		this.innerHTML = `
-      <div class="search-select${this.hasAttribute("compact") ? " search-select-compact" : ""}">
-        <button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-label="${D(this._accessibleName())}"${this.hasAttribute("disabled") ? " disabled" : ""}>
-          <span class="${a ? "" : "search-select-placeholder"}" data-label>${a ? s(a) : o(n)}</span>
+      <div class="search-select${this.hasAttribute("compact") ? " search-select-compact" : ""}${a}">
+        <button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-label="${A(this._accessibleName())}"${this.hasAttribute("disabled") ? " disabled" : ""}>
+          <span class="${u ? "" : "search-select-placeholder"}" data-label>${u ? s(u) : o(c)}</span>
+          ${n ? "<span class=\"search-select-reset\" role=\"button\" aria-label=\"Clear selection\" hidden><i class=\"bi bi-x-lg\" aria-hidden=\"true\"></i></span>" : ""}
           <i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
         </button>
         <div class="search-select-menu search-select-menu-fixed" role="listbox" tabindex="-1" hidden>
-          ${t ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${D(r)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden><i class="bi bi-x" aria-hidden="true"></i></button></div>` : ""}
-          <div class="search-select-options">${c}<div class="search-select-empty" hidden>No matches</div></div>
+          ${t ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${A(l)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden><i class="bi bi-x" aria-hidden="true"></i></button></div>` : ""}
+          <div class="search-select-options">${d}<div class="search-select-empty" hidden>No matches</div></div>
         </div>
-      </div>`, this._rendered = !0, i(this, this._value), this._wire();
+      </div>`, this._rendered = !0, i(this, this._value), this._wire(), this._syncReset();
 	}
 	_refs() {
 		return {
 			control: this.querySelector(".search-select-control"),
 			menu: this.querySelector(".search-select-menu"),
 			label: this.querySelector("[data-label]"),
+			reset: this.querySelector(".search-select-reset"),
 			search: this.querySelector(".search-select-input"),
 			clear: this.querySelector(".search-select-clear"),
 			empty: this.querySelector(".search-select-empty"),
@@ -1896,6 +1996,10 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
 		}
 		e && (e.innerHTML = t ? s(t) : e.innerHTML, e.classList.toggle("search-select-placeholder", !t));
 	}
+	_syncReset() {
+		let { reset: e } = this._refs();
+		e && (e.hidden = !(this.hasAttribute("clearable") && this._value !== "" && !this.hasAttribute("disabled")));
+	}
 	_wire() {
 		let e = this._refs();
 		if (!e.control || !e.menu) return;
@@ -1924,7 +2028,9 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
 			let r = this._visible();
 			t.key === "ArrowDown" ? (t.preventDefault(), n(Math.min(this._active + 1, r.length - 1))) : t.key === "ArrowUp" ? (t.preventDefault(), n(Math.max(this._active - 1, 0))) : t.key === "Enter" ? (t.preventDefault(), r[this._active] && s(r[this._active])) : t.key === "Escape" && (o(), e.control.focus());
 		};
-		e.control.addEventListener("click", () => i() ? o() : a()), e.control.addEventListener("keydown", (e) => {
+		e.reset?.addEventListener("click", (t) => {
+			t.stopPropagation(), this.value = "", this.dispatchEvent(new Event("change", { bubbles: !0 })), e.control.focus();
+		}), e.control.addEventListener("click", () => i() ? o() : a()), e.control.addEventListener("keydown", (e) => {
 			if (i()) {
 				c(e);
 				return;
@@ -1936,7 +2042,7 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
 		}), e.optionsWrap.addEventListener("mousemove", (e) => {
 			let t = e.target.closest(".search-select-option");
 			t && n(this._visible().indexOf(t));
-		}), e.search?.addEventListener("input", () => {
+		}), e.optionsWrap.addEventListener("mouseleave", () => n(-1)), e.search?.addEventListener("input", () => {
 			r(e.search.value), n(-1);
 		}), e.search?.addEventListener("keydown", c), e.clear?.addEventListener("click", () => {
 			e.search.value = "", r(""), e.search.focus();
@@ -1949,14 +2055,14 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
 	disconnectedCallback() {
 		this._onDocClick && document.removeEventListener("click", this._onDocClick);
 	}
-}, D = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), O = "image/png,image/jpeg,image/webp", k = 5, A = {
+}, A = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), j = "image/png,image/jpeg,image/webp", M = 5, N = {
 	"image/png": [".png"],
 	"image/jpeg": [".jpg", ".jpeg"],
 	"image/webp": [".webp"],
 	"image/gif": [".gif"],
 	"image/svg+xml": [".svg"],
 	"application/pdf": [".pdf"]
-}, j = {
+}, P = {
 	"image/png": "PNG",
 	"image/jpeg": "JPG",
 	"image/webp": "WEBP",
@@ -1970,34 +2076,34 @@ var a = Symbol("wui.trustedHtml"), o = (e) => String(e ?? "").replace(/&/g, "&am
 	".gif": "GIF",
 	".svg": "SVG",
 	".pdf": "PDF"
-}, M = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean);
-function N(e) {
+}, F = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean);
+function I(e) {
 	let t = [];
-	for (let n of M(e)) {
-		let e = j[n] || (n.startsWith(".") ? n.slice(1).toUpperCase() : n.toUpperCase());
+	for (let n of F(e)) {
+		let e = P[n] || (n.startsWith(".") ? n.slice(1).toUpperCase() : n.toUpperCase());
 		t.includes(e) || t.push(e);
 	}
 	return t.length <= 1 ? t[0] || "supported" : `${t.slice(0, -1).join(", ")} or ${t[t.length - 1]}`;
 }
-function P(e, t) {
-	let n = M(t);
+function L(e, t) {
+	let n = F(t);
 	if (!n.length) return !0;
 	let r = (e.type || "").toLowerCase(), i = (e.name || "").toLowerCase();
-	return n.some((e) => e.startsWith(".") ? i.endsWith(e) : e.endsWith("/*") ? r.startsWith(e.slice(0, -1)) : r && r === e ? !0 : !r && (A[e] || []).some((e) => i.endsWith(e)));
+	return n.some((e) => e.startsWith(".") ? i.endsWith(e) : e.endsWith("/*") ? r.startsWith(e.slice(0, -1)) : r && r === e ? !0 : !r && (N[e] || []).some((e) => i.endsWith(e)));
 }
-function F(e, t = {}) {
+function R(e, t = {}) {
 	if (!e) return null;
-	let n = t.accept === void 0 ? O : t.accept, r = t.maxSizeMb || 5;
-	return P(e, n) ? e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${N(n)} file.`;
+	let n = t.accept === void 0 ? j : t.accept, r = t.maxSizeMb || 5;
+	return L(e, n) ? e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${I(n)} file.`;
 }
 //#endregion
 //#region src/index.js
-var I = (e, t) => {
+var z = (e, t) => {
 	typeof customElements < "u" && !customElements.get(e) && customElements.define(e, t);
 };
-function L() {
-	I("wui-select", E), I("wui-phone", w), I("wui-datepicker", _), I("wui-autocomplete", c), I("wui-multiselect", v), I("wui-status-icon", n);
+function B() {
+	z("wui-select", k), z("wui-phone", D), z("wui-datepicker", _), z("wui-autocomplete", c), z("wui-multiselect", v), z("wui-otp", C), z("wui-status-icon", n);
 }
-L();
+B();
 //#endregion
-export { O as DEFAULT_IMAGE_ACCEPT, k as DEFAULT_MAX_SIZE_MB, t as STATUS_TONES, c as WuiAutocomplete, _ as WuiDatePicker, v as WuiMultiSelect, w as WuiPhone, E as WuiSelect, n as WuiStatusIcon, N as acceptLabel, L as defineWeborityElements, P as matchesAccept, F as validateFile };
+export { j as DEFAULT_IMAGE_ACCEPT, M as DEFAULT_MAX_SIZE_MB, t as STATUS_TONES, c as WuiAutocomplete, _ as WuiDatePicker, v as WuiMultiSelect, C as WuiOtp, D as WuiPhone, k as WuiSelect, n as WuiStatusIcon, I as acceptLabel, B as defineWeborityElements, L as matchesAccept, R as validateFile };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-elements",
-  "version": "0.6.6",
+  "version": "0.6.7",
   "description": "Webority framework-agnostic UI custom elements (<wui-*>) — the single implementation of the interactive components, styled by @webority/theme. Used natively in Razor and wrapped by @webority/ui-react.",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",