@webority/ui-elements 0.4.0 → 0.5.0

package/dist/ui-elements.global.js

@@ -43,10 +43,10 @@ var WeborityUiElements=(function(e){Object.defineProperty(e,Symbol.toStringTag,{
 <path d="M108.216 75.5971C107.507 74.8585 106.532 74.4448 105.527 74.4448H68.1816C67.177 74.4448 66.1725 74.8585 65.4929 75.5971C64.8134 76.3357 64.4293 77.3403 64.4884 78.3744L66.3202 108.688C66.6452 113.179 67.0588 118.793 77.3702 118.793H96.3384C106.65 118.793 107.063 113.208 107.388 108.688L109.22 78.4039C109.279 77.3403 108.895 76.3357 108.216 75.5971ZM91.7588 103.99H81.9202C80.7088 103.99 79.7043 102.986 79.7043 101.774C79.7043 100.563 80.7088 99.5585 81.9202 99.5585H91.7588C92.9702 99.5585 93.9747 100.563 93.9747 101.774C93.9747 102.986 92.9702 103.99 91.7588 103.99ZM94.2406 92.1721H79.4679C78.2566 92.1721 77.252 91.1676 77.252 89.9562C77.252 88.7448 78.2566 87.7403 79.4679 87.7403H94.2406C95.452 87.7403 96.4566 88.7448 96.4566 89.9562C96.4566 91.1676 95.452 92.1721 94.2406 92.1721Z" fill="white"/>
 </g>
 </g>
-<defs><clipPath id="wui_delete_clip0"><rect x="32" y="32" width="110" height="110" rx="55" fill="white"/></clipPath><clipPath id="wui_delete_clip1"><rect width="65" height="65" fill="white" transform="translate(54.3535 54.502)"/></clipPath></defs>`},n=Object.keys(t),r=class extends HTMLElement{static get observedAttributes(){return[`tone`,`size`]}connectedCallback(){this.render()}attributeChangedCallback(){this.isConnected&&this.render()}render(){let e=this.getAttribute(`tone`),n=this.getAttribute(`size`)||`72`,r=t[e]||t.info;this.innerHTML=`<svg width="${n}" height="${n}" viewBox="0 0 174 174" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">${r}</svg>`}},i=class extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return[`value`,`placeholder`,`disabled`,`min-chars`,`debounce`,`remote`]}constructor(){super(),this._internals=this.attachInternals?this.attachInternals():null,this._value=``,this._label=``,this._optionsProp=null,this._loading=!1,this._active=-1,this._timer=null}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),this._internals?.setFormValue(this._value);let t=this._readOptions().find(e=>String(e.value)===this._value);t&&(this._label=o(t.label)),this._syncInput()}set options(e){this._optionsProp=Array.isArray(e)?e:[],this._renderOptions()}get options(){return this._readOptions()}set loading(e){this._loading=!!e,this._renderLoading()}get loading(){return this._loading}get _remote(){return this.hasAttribute(`remote`)}get _minChars(){return Math.max(0,Number(this.getAttribute(`min-chars`))||+!!this._remote)}get _debounceMs(){let e=Number(this.getAttribute(`debounce`));return Number.isFinite(e)&&e>=0?e:250}_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,selected:e.hasAttribute(`selected`)})))}_readOptions(){return this._optionsProp?this._optionsProp:(this._snapshotDeclared(),this._declared||[])}render(){this._snapshotDeclared();let e=this.getAttribute(`placeholder`)||`Search…`;this.innerHTML=`
+<defs><clipPath id="wui_delete_clip0"><rect x="32" y="32" width="110" height="110" rx="55" fill="white"/></clipPath><clipPath id="wui_delete_clip1"><rect width="65" height="65" fill="white" transform="translate(54.3535 54.502)"/></clipPath></defs>`},n=Object.keys(t),r=class extends HTMLElement{static get observedAttributes(){return[`tone`,`size`]}connectedCallback(){this.render()}attributeChangedCallback(){this.isConnected&&this.render()}render(){let e=this.getAttribute(`tone`),n=this.getAttribute(`size`)||`72`,r=t[e]||t.info;this.innerHTML=`<svg width="${n}" height="${n}" viewBox="0 0 174 174" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">${r}</svg>`}},i=Symbol(`wui.trustedHtml`),a=e=>String(e??``).replace(/&/g,`&amp;`).replace(/</g,`&lt;`).replace(/>/g,`&gt;`).replace(/"/g,`&quot;`).replace(/'/g,`&#39;`),o=e=>e?.[i]?String(e.label??``):a(e==null?``:e.label),s=class extends HTMLElement{static formAssociated=!0;_accessibleName(){return this.getAttribute(`aria-label`)||this.getAttribute(`placeholder`)||`Select`}static get observedAttributes(){return[`value`,`placeholder`,`disabled`,`min-chars`,`debounce`,`remote`]}constructor(){super(),this._internals=this.attachInternals?this.attachInternals():null,this._value=``,this._label=``,this._optionsProp=null,this._loading=!1,this._active=-1,this._timer=null}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),this._internals?.setFormValue(this._value);let t=this._readOptions().find(e=>String(e.value)===this._value);t&&(this._label=l(t.label)),this._syncInput()}set options(e){this._optionsProp=Array.isArray(e)?e:[],this._renderOptions()}get options(){return this._readOptions()}set loading(e){this._loading=!!e,this._renderLoading()}get loading(){return this._loading}get _remote(){return this.hasAttribute(`remote`)}get _minChars(){return Math.max(0,Number(this.getAttribute(`min-chars`))||+!!this._remote)}get _debounceMs(){let e=Number(this.getAttribute(`debounce`));return Number.isFinite(e)&&e>=0?e:250}_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,[i]:!0,selected:e.hasAttribute(`selected`)})))}_readOptions(){return this._optionsProp?this._optionsProp:(this._snapshotDeclared(),this._declared||[])}render(){this._snapshotDeclared();let e=this.getAttribute(`placeholder`)||`Search…`;this.innerHTML=`
       <div class="search-select">
-        <div class="input search-select-control search-select-ac" role="combobox" aria-haspopup="listbox" aria-expanded="false">
-          <input class="search-select-input search-select-ac-input" placeholder="${a(e)}" aria-autocomplete="list" autocomplete="off"${this.hasAttribute(`disabled`)?` disabled`:``} />
+        <div class="input search-select-control search-select-ac" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-label="${c(this._accessibleName())}">
+          <input class="search-select-input search-select-ac-input" placeholder="${c(e)}" aria-autocomplete="list" autocomplete="off"${this.hasAttribute(`disabled`)?` disabled`:``} />
           <span class="search-select-spinner spinner-border spinner-border-sm" role="status" aria-hidden="true" hidden></span>
           <button type="button" class="search-select-clear" aria-label="Clear" hidden><i class="bi bi-x" aria-hidden="true"></i></button>
         </div>
@@ -55,54 +55,54 @@ var WeborityUiElements=(function(e){Object.defineProperty(e,Symbol.toStringTag,{
           <div class="search-select-empty" hidden>No matches</div>
           <div class="search-select-hint" hidden>Type to search…</div>
         </div>
-      </div>`,this._rendered=!0,this._wire(),this._syncInput(),this._renderOptions()}_refs(){return{control:this.querySelector(`.search-select-control`),input:this.querySelector(`.search-select-ac-input`),menu:this.querySelector(`.search-select-menu`),spinner:this.querySelector(`.search-select-spinner`),clear:this.querySelector(`.search-select-clear`),optionsWrap:this.querySelector(`.search-select-options`),empty:this.querySelector(`.search-select-empty`),hint:this.querySelector(`.search-select-hint`)}}_optionEls(){return[...this.querySelectorAll(`.search-select-option`)]}_syncInput(){let{input:e,clear:t}=this._refs();e&&document.activeElement!==e&&(e.value=this._label),t&&(t.hidden=!this._value&&!e?.value)}_renderLoading(){let{spinner:e}=this._refs();e&&(e.hidden=!this._loading)}_renderOptions(e){let t=this._refs();if(!t.optionsWrap)return;let n=(e??(t.input?t.input.value:``)).trim().toLowerCase(),r=this._readOptions();!this._remote&&n&&(r=r.filter(e=>o(e.label).toLowerCase().includes(n))),t.optionsWrap.innerHTML=r.map(e=>{let t=String(e.value)===String(this._value);return`<button type="button" role="option" class="search-select-option${t?` selected`:``}" data-value="${a(e.value)}" aria-selected="${t}">${e.label}</button>`}).join(``),this._active=-1;let i=n.length<this._minChars;t.hint&&(t.hint.hidden=!(this._remote&&i&&!r.length)),t.empty&&(t.empty.hidden=this._loading||r.length>0||this._remote&&i)}_wire(){let e=this._refs();if(!e.control||!e.input)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=()=>this._optionEls().filter(e=>!e.hidden),r=e=>{let t=n();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`}))},i=()=>!e.menu.hidden,a=()=>{e.menu.hidden=!1,e.control.setAttribute(`aria-expanded`,`true`),e.control.classList.add(`open`),t(),this._renderOptions()},s=()=>{e.menu.hidden=!0,e.control.setAttribute(`aria-expanded`,`false`),e.control.classList.remove(`open`),r(-1),this._syncInput()},c=t=>{this._value=t.dataset.value,this._label=o(t.innerHTML),this._internals?.setFormValue(this._value),e.input.value=this._label,this.dispatchEvent(new Event(`change`,{bubbles:!0})),s(),e.input.focus()};e.input.addEventListener(`focus`,()=>a()),e.input.addEventListener(`input`,()=>{let t=e.input.value;if(e.clear&&(e.clear.hidden=!t),i()||a(),this._remote){if(this._renderOptions(t),t.trim().length<this._minChars)return;clearTimeout(this._timer),this._timer=setTimeout(()=>{this.dispatchEvent(new CustomEvent(`search`,{bubbles:!0,detail:{query:t}}))},this._debounceMs)}else this._renderOptions(t)}),e.input.addEventListener(`keydown`,e=>{let t=n();e.key===`ArrowDown`?(e.preventDefault(),i()||a(),r(Math.min(this._active+1,t.length-1))):e.key===`ArrowUp`?(e.preventDefault(),r(Math.max(this._active-1,0))):e.key===`Enter`?t[this._active]&&(e.preventDefault(),c(t[this._active])):e.key===`Escape`&&s()}),e.optionsWrap.addEventListener(`click`,e=>{let t=e.target.closest(`.search-select-option`);t&&c(t)}),e.optionsWrap.addEventListener(`mousemove`,e=>{let t=e.target.closest(`.search-select-option`);t&&r(this._optionEls().indexOf(t))}),e.clear?.addEventListener(`click`,()=>{this._value=``,this._label=``,this._internals?.setFormValue(``),e.input.value=``,e.clear.hidden=!0,this._renderOptions(``),this.dispatchEvent(new Event(`change`,{bubbles:!0})),e.input.focus()}),this._onDocClick=e=>{i()&&!this.contains(e.target)&&s()},document.addEventListener(`click`,this._onDocClick),window.addEventListener(`resize`,()=>{i()&&t()})}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick),clearTimeout(this._timer)}},a=e=>String(e??``).replace(/"/g,`&quot;`).replace(/</g,`&lt;`),o=e=>String(e??``).replace(/<[^>]*>/g,``),s=[`January`,`February`,`March`,`April`,`May`,`June`,`July`,`August`,`September`,`October`,`November`,`December`],c=[`Su`,`Mo`,`Tu`,`We`,`Th`,`Fr`,`Sa`],l=e=>String(e).padStart(2,`0`),u=(e,t,n)=>`${e}-${l(t+1)}-${l(n)}`,d=e=>{let t=/^(\d{4})-(\d{2})-(\d{2})$/.exec(e||``);return t?{y:+t[1],m:t[2]-1,d:+t[3]}:null},f=e=>{let t=d(e);return t?`${l(t.d)} ${s[t.m].slice(0,3)} ${t.y}`:``},p=class extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return[`value`,`min`,`max`,`placeholder`,`disabled`]}constructor(){super(),this._internals=this.attachInternals?this.attachInternals():null,this._value=``;let e=new Date(2e3,0,1);this._viewY=e.getFullYear(),this._viewM=e.getMonth()}connectedCallback(){this._rendered||this.render()}attributeChangedCallback(e,t,n){this._rendered&&(e===`value`?(this._value=n||``,this._syncTrigger()):this.render())}get value(){return this._value}set value(e){this._value=e||``,this._internals?.setFormValue(this._value),this._syncTrigger(),this.dispatchEvent(new Event(`change`,{bubbles:!0}))}render(){this._value=this.getAttribute(`value`)||this._value;let e=this.getAttribute(`placeholder`)||`Enter Date`,t=d(this._value);t&&(this._viewY=t.y,this._viewM=t.m),this.innerHTML=`
+      </div>`,this._rendered=!0,this._wire(),this._syncInput(),this._renderOptions()}_refs(){return{control:this.querySelector(`.search-select-control`),input:this.querySelector(`.search-select-ac-input`),menu:this.querySelector(`.search-select-menu`),spinner:this.querySelector(`.search-select-spinner`),clear:this.querySelector(`.search-select-clear`),optionsWrap:this.querySelector(`.search-select-options`),empty:this.querySelector(`.search-select-empty`),hint:this.querySelector(`.search-select-hint`)}}_optionEls(){return[...this.querySelectorAll(`.search-select-option`)]}_syncInput(){let{input:e,clear:t}=this._refs();e&&document.activeElement!==e&&(e.value=this._label),t&&(t.hidden=!this._value&&!e?.value)}_renderLoading(){let{spinner:e}=this._refs();e&&(e.hidden=!this._loading)}_renderOptions(e){let t=this._refs();if(!t.optionsWrap)return;let n=(e??(t.input?t.input.value:``)).trim().toLowerCase(),r=this._readOptions();!this._remote&&n&&(r=r.filter(e=>l(e.label).toLowerCase().includes(n))),t.optionsWrap.innerHTML=r.map(e=>{let t=String(e.value)===String(this._value);return`<button type="button" role="option" class="search-select-option${t?` selected`:``}" data-value="${c(e.value)}" aria-selected="${t}">${o(e)}</button>`}).join(``),this._active=-1;let i=n.length<this._minChars;t.hint&&(t.hint.hidden=!(this._remote&&i&&!r.length)),t.empty&&(t.empty.hidden=this._loading||r.length>0||this._remote&&i)}_wire(){let e=this._refs();if(!e.control||!e.input)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=()=>this._optionEls().filter(e=>!e.hidden),r=e=>{let t=n();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`}))},i=()=>!e.menu.hidden,a=()=>{e.menu.hidden=!1,e.control.setAttribute(`aria-expanded`,`true`),e.control.classList.add(`open`),t(),this._renderOptions()},o=()=>{e.menu.hidden=!0,e.control.setAttribute(`aria-expanded`,`false`),e.control.classList.remove(`open`),r(-1),this._syncInput()},s=t=>{this._value=t.dataset.value,this._label=l(t.innerHTML),this._internals?.setFormValue(this._value),e.input.value=this._label,this.dispatchEvent(new Event(`change`,{bubbles:!0})),o(),e.input.focus()};e.input.addEventListener(`focus`,()=>a()),e.input.addEventListener(`input`,()=>{let t=e.input.value;if(e.clear&&(e.clear.hidden=!t),i()||a(),this._remote){if(this._renderOptions(t),t.trim().length<this._minChars)return;clearTimeout(this._timer),this._timer=setTimeout(()=>{this.dispatchEvent(new CustomEvent(`search`,{bubbles:!0,detail:{query:t}}))},this._debounceMs)}else this._renderOptions(t)}),e.input.addEventListener(`keydown`,e=>{let t=n();e.key===`ArrowDown`?(e.preventDefault(),i()||a(),r(Math.min(this._active+1,t.length-1))):e.key===`ArrowUp`?(e.preventDefault(),r(Math.max(this._active-1,0))):e.key===`Enter`?t[this._active]&&(e.preventDefault(),s(t[this._active])):e.key===`Escape`&&o()}),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&&r(this._optionEls().indexOf(t))}),e.clear?.addEventListener(`click`,()=>{this._value=``,this._label=``,this._internals?.setFormValue(``),e.input.value=``,e.clear.hidden=!0,this._renderOptions(``),this.dispatchEvent(new Event(`change`,{bubbles:!0})),e.input.focus()}),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),clearTimeout(this._timer)}},c=e=>String(e??``).replace(/"/g,`&quot;`).replace(/</g,`&lt;`),l=e=>String(e??``).replace(/<[^>]*>/g,``),u=[`January`,`February`,`March`,`April`,`May`,`June`,`July`,`August`,`September`,`October`,`November`,`December`],d=[`Su`,`Mo`,`Tu`,`We`,`Th`,`Fr`,`Sa`],f=e=>String(e).padStart(2,`0`),p=(e,t,n)=>`${e}-${f(t+1)}-${f(n)}`,m=e=>{let t=/^(\d{4})-(\d{2})-(\d{2})$/.exec(e||``);return t?{y:+t[1],m:t[2]-1,d:+t[3]}:null},h=e=>{let t=m(e);return t?`${f(t.d)} ${u[t.m].slice(0,3)} ${t.y}`:``},g=class extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return[`value`,`min`,`max`,`placeholder`,`disabled`]}constructor(){super(),this._internals=this.attachInternals?this.attachInternals():null,this._value=``;let e=new Date(2e3,0,1);this._viewY=e.getFullYear(),this._viewM=e.getMonth()}connectedCallback(){this._rendered||this.render()}attributeChangedCallback(e,t,n){this._rendered&&(e===`value`?(this._value=n||``,this._syncTrigger()):this.render())}get value(){return this._value}set value(e){this._value=e||``,this._internals?.setFormValue(this._value),this._syncTrigger(),this.dispatchEvent(new Event(`change`,{bubbles:!0}))}render(){this._value=this.getAttribute(`value`)||this._value;let e=this.getAttribute(`placeholder`)||`Enter Date`,t=m(this._value);t&&(this._viewY=t.y,this._viewM=t.m),this.innerHTML=`
       <div class="datepicker">
         <button type="button" class="input datepicker-trigger" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute(`disabled`)?` disabled`:``}>
-          <span data-trigger-label class="${t?``:`search-select-placeholder`}">${t?f(this._value):e}</span>
+          <span data-trigger-label class="${t?``:`search-select-placeholder`}">${t?h(this._value):e}</span>
           <i class="bi bi-calendar3" aria-hidden="true"></i>
         </button>
         <div class="datepicker-pop" role="dialog" hidden></div>
-      </div>`,this._rendered=!0,this._wire()}_internalsSet(){this._internals?.setFormValue(this._value)}_syncTrigger(){let e=this.querySelector(`[data-trigger-label]`);if(!e)return;let t=d(this._value);e.textContent=t?f(this._value):this.getAttribute(`placeholder`)||`Enter Date`,e.classList.toggle(`search-select-placeholder`,!t)}_renderMonth(){let e=this.querySelector(`.datepicker-pop`),t=new Date(this._viewY,this._viewM,1).getDay(),n=new Date(this._viewY,this._viewM+1,0).getDate(),r=d(this._value),i=d(this.getAttribute(`min`)),a=d(this.getAttribute(`max`)),o=(e,t,n)=>{let r=new Date(e,t,n).getTime();return!!(i&&r<new Date(i.y,i.m,i.d).getTime()||a&&r>new Date(a.y,a.m,a.d).getTime())},l=``;for(let e=0;e<t;e++)l+=`<span class="datepicker-day is-outside"></span>`;for(let e=1;e<=n;e++){let t=u(this._viewY,this._viewM,e),n=r&&r.y===this._viewY&&r.m===this._viewM&&r.d===e,i=o(this._viewY,this._viewM,e);l+=`<button type="button" class="datepicker-day${n?` selected`:``}" data-iso="${t}"${i?` disabled`:``}>${e}</button>`}e.innerHTML=`
+      </div>`,this._rendered=!0,this._wire()}_internalsSet(){this._internals?.setFormValue(this._value)}_syncTrigger(){let e=this.querySelector(`[data-trigger-label]`);if(!e)return;let t=m(this._value);e.textContent=t?h(this._value):this.getAttribute(`placeholder`)||`Enter Date`,e.classList.toggle(`search-select-placeholder`,!t)}_renderMonth(){let e=this.querySelector(`.datepicker-pop`),t=new Date(this._viewY,this._viewM,1).getDay(),n=new Date(this._viewY,this._viewM+1,0).getDate(),r=m(this._value),i=m(this.getAttribute(`min`)),a=m(this.getAttribute(`max`)),o=(e,t,n)=>{let r=new Date(e,t,n).getTime();return!!(i&&r<new Date(i.y,i.m,i.d).getTime()||a&&r>new Date(a.y,a.m,a.d).getTime())},s=``;for(let e=0;e<t;e++)s+=`<span class="datepicker-day is-outside"></span>`;for(let e=1;e<=n;e++){let t=p(this._viewY,this._viewM,e),n=r&&r.y===this._viewY&&r.m===this._viewM&&r.d===e,i=o(this._viewY,this._viewM,e);s+=`<button type="button" class="datepicker-day${n?` selected`:``}" data-iso="${t}"${i?` disabled`:``}>${e}</button>`}e.innerHTML=`
       <div class="datepicker-head">
         <button type="button" class="datepicker-nav-btn" data-nav="-1" aria-label="Previous month"><i class="bi bi-chevron-left" aria-hidden="true"></i></button>
-        <span class="datepicker-month">${s[this._viewM]} ${this._viewY}</span>
+        <span class="datepicker-month">${u[this._viewM]} ${this._viewY}</span>
         <button type="button" class="datepicker-nav-btn" data-nav="1" aria-label="Next month"><i class="bi bi-chevron-right" aria-hidden="true"></i></button>
       </div>
-      <div class="datepicker-weekdays">${c.map(e=>`<span>${e}</span>`).join(``)}</div>
-      <div class="datepicker-grid">${l}</div>
-      <div class="datepicker-foot"><button type="button" class="datepicker-link" data-clear>Clear</button></div>`}_wire(){let e=this.querySelector(`.datepicker-trigger`),t=this.querySelector(`.datepicker-pop`);if(!e||!t)return;let n=()=>!t.hidden,r=()=>{this._renderMonth(),t.hidden=!1,e.setAttribute(`aria-expanded`,`true`)},i=()=>{t.hidden=!0,e.setAttribute(`aria-expanded`,`false`)};e.addEventListener(`click`,()=>n()?i():r()),t.addEventListener(`click`,e=>{let t=e.target.closest(`[data-nav]`);if(t){this._viewM+=Number(t.dataset.nav),this._viewM<0?(this._viewM=11,--this._viewY):this._viewM>11&&(this._viewM=0,this._viewY+=1),this._renderMonth();return}if(e.target.closest(`[data-clear]`)){this.value=``,i();return}let n=e.target.closest(`.datepicker-day[data-iso]`);n&&!n.disabled&&(this.value=n.dataset.iso,i())}),this._onDocClick=e=>{n()&&!this.contains(e.target)&&i()},document.addEventListener(`click`,this._onDocClick),document.addEventListener(`keydown`,e=>{n()&&e.key===`Escape`&&i()}),this._internalsSet()}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},m=class extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return[`placeholder`,`search-placeholder`,`searchable`,`disabled`]}constructor(){super(),this._internals=this.attachInternals?this.attachInternals():null,this._values=[],this._optionsProp=null,this._active=-1}connectedCallback(){if(!this._rendered){if(!this._valuesInit&&!this._optionsProp&&!this._values.length){let e=[...this.querySelectorAll(`:scope > wui-option[selected]`)].map(e=>e.getAttribute(`value`)??e.textContent.trim());e.length&&(this._values=e.map(String))}this._valuesInit=!0,this.render()}}attributeChangedCallback(){this._rendered&&this.render()}get values(){return this._values.slice()}set values(e){this._values=Array.isArray(e)?e.map(String):[],this._internals?.setFormValue(this._values.join(`,`)),this._rendered&&this._renderControl()}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,selected:e.hasAttribute(`selected`)})))}_readOptions(){return this._optionsProp?this._optionsProp:(this._snapshotDeclared(),this._declared||[])}_labelFor(e){let t=this._readOptions().find(t=>String(t.value)===String(e));return t?t.label:e}render(){this._snapshotDeclared();let e=this.hasAttribute(`searchable`),t=this.getAttribute(`search-placeholder`)||`Search…`;this._internals?.setFormValue(this._values.join(`,`)),this.innerHTML=`
+      <div class="datepicker-weekdays">${d.map(e=>`<span>${e}</span>`).join(``)}</div>
+      <div class="datepicker-grid">${s}</div>
+      <div class="datepicker-foot"><button type="button" class="datepicker-link" data-clear>Clear</button></div>`}_wire(){let e=this.querySelector(`.datepicker-trigger`),t=this.querySelector(`.datepicker-pop`);if(!e||!t)return;let n=()=>!t.hidden,r=()=>{this._renderMonth(),t.hidden=!1,e.setAttribute(`aria-expanded`,`true`)},i=()=>{t.hidden=!0,e.setAttribute(`aria-expanded`,`false`)};e.addEventListener(`click`,()=>n()?i():r()),t.addEventListener(`click`,e=>{let t=e.target.closest(`[data-nav]`);if(t){this._viewM+=Number(t.dataset.nav),this._viewM<0?(this._viewM=11,--this._viewY):this._viewM>11&&(this._viewM=0,this._viewY+=1),this._renderMonth();return}if(e.target.closest(`[data-clear]`)){this.value=``,i();return}let n=e.target.closest(`.datepicker-day[data-iso]`);n&&!n.disabled&&(this.value=n.dataset.iso,i())}),this._onDocClick=e=>{n()&&!this.contains(e.target)&&i()},document.addEventListener(`click`,this._onDocClick),this._onDocKey=e=>{n()&&e.key===`Escape`&&i()},document.addEventListener(`keydown`,this._onDocKey),this._internalsSet()}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick),this._onDocKey&&document.removeEventListener(`keydown`,this._onDocKey)}},_=class extends HTMLElement{static formAssociated=!0;_accessibleName(){return this.getAttribute(`aria-label`)||this.getAttribute(`placeholder`)||`Select`}static get observedAttributes(){return[`placeholder`,`search-placeholder`,`searchable`,`disabled`]}constructor(){super(),this._internals=this.attachInternals?this.attachInternals():null,this._values=[],this._optionsProp=null,this._active=-1}connectedCallback(){if(!this._rendered){if(!this._valuesInit&&!this._optionsProp&&!this._values.length){let e=[...this.querySelectorAll(`:scope > wui-option[selected]`)].map(e=>e.getAttribute(`value`)??e.textContent.trim());e.length&&(this._values=e.map(String))}this._valuesInit=!0,this.render()}}attributeChangedCallback(){this._rendered&&this.render()}get values(){return this._values.slice()}set values(e){this._values=Array.isArray(e)?e.map(String):[],this._internals?.setFormValue(this._values.join(`,`)),this._rendered&&this._renderControl()}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,[i]:!0,selected:e.hasAttribute(`selected`)})))}_readOptions(){return this._optionsProp?this._optionsProp:(this._snapshotDeclared(),this._declared||[])}_labelFor(e){let t=this._readOptions().find(t=>String(t.value)===String(e));return t?t.label:e}_labelHtmlFor(e){let t=this._readOptions().find(t=>String(t.value)===String(e));return t?o(t):a(e)}render(){this._snapshotDeclared();let e=this.hasAttribute(`searchable`),t=this.getAttribute(`search-placeholder`)||`Search…`;this._internals?.setFormValue(this._values.join(`,`)),this.innerHTML=`
       <div class="search-select">
-        <div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute(`disabled`)?` aria-disabled="true"`:``}>
+        <div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-label="${v(this._accessibleName())}"${this.hasAttribute(`disabled`)?` aria-disabled="true"`:``}>
           <div class="ms-chips" data-chips></div>
           <i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
         </div>
         <div class="search-select-menu search-select-menu-fixed" role="listbox" aria-multiselectable="true" tabindex="-1" hidden>
-          ${e?`<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${h(t)}" 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>`:``}
+          ${e?`<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${v(t)}" 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"></div>
           <div class="search-select-empty" hidden>No matches</div>
         </div>
-      </div>`,this._rendered=!0,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">${g(t)}</span>`;return}e.innerHTML=this._values.map(e=>`<span class="chip chip-sm"><span class="chip-label">${this._labelFor(e)}</span><button type="button" class="chip-remove" data-remove="${h(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=>_(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="${h(e.value)}" aria-selected="${t}"><span class="ms-check"><i class="bi bi-check" aria-hidden="true"></i></span><span class="ms-opt-label">${e.label}</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 a=()=>this.hasAttribute(`disabled`),o=()=>{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`},s=()=>[...this.querySelectorAll(`.search-select-option`)],c=()=>s().filter(e=>!e.hidden),l=e=>{let t=c();this._active=e;for(let e of s())e.classList.remove(`is-active`);e>=0&&t[e]&&(t[e].classList.add(`is-active`),t[e].scrollIntoView({block:`nearest`}))},u=()=>!t.hidden,d=()=>{a()||(t.hidden=!1,e.setAttribute(`aria-expanded`,`true`),e.classList.add(`open`),o(),n&&(n.value=``,this._renderOptions(``),n.focus()))},f=()=>{t.hidden=!0,e.setAttribute(`aria-expanded`,`false`),e.classList.remove(`open`),l(-1)},p=()=>{this._internals?.setFormValue(this._values.join(`,`)),this.dispatchEvent(new Event(`change`,{bubbles:!0}))},m=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:``),p()},h=e=>{this._values=this._values.filter(t=>t!==String(e)),this._renderControl(),this._renderOptions(n?n.value:``),p()};e.addEventListener(`click`,e=>{let t=e.target.closest(`[data-remove]`);if(t){e.stopPropagation(),h(t.dataset.remove);return}u()?f():d()}),i.addEventListener(`click`,e=>{let t=e.target.closest(`.search-select-option`);t&&(m(t.dataset.value),n?.focus())}),i.addEventListener(`mousemove`,e=>{let t=e.target.closest(`.search-select-option`);t&&l(c().indexOf(t))}),n?.addEventListener(`input`,()=>{this._renderOptions(n.value),r&&(r.hidden=!n.value),l(-1)}),n?.addEventListener(`keydown`,t=>{let r=c();t.key===`ArrowDown`?(t.preventDefault(),l(Math.min(this._active+1,r.length-1))):t.key===`ArrowUp`?(t.preventDefault(),l(Math.max(this._active-1,0))):t.key===`Enter`?(t.preventDefault(),r[this._active]&&m(r[this._active].dataset.value)):t.key===`Escape`?(f(),e.focus()):t.key===`Backspace`&&!n.value&&this._values.length&&h(this._values[this._values.length-1])}),r?.addEventListener(`click`,()=>{n.value=``,this._renderOptions(``),r.hidden=!0,n.focus()}),e.addEventListener(`keydown`,e=>{!u()&&(e.key===`ArrowDown`||e.key===`Enter`||e.key===` `)&&(e.preventDefault(),d())}),this._onDocClick=e=>{u()&&!this.contains(e.target)&&f()},document.addEventListener(`click`,this._onDocClick),window.addEventListener(`resize`,()=>{u()&&o()})}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},h=e=>String(e??``).replace(/"/g,`&quot;`).replace(/</g,`&lt;`),g=e=>String(e??``).replace(/&/g,`&amp;`).replace(/</g,`&lt;`),_=e=>String(e??``).replace(/<[^>]*>/g,``),v=[[`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`]],y=e=>(v.find(t=>t[0]===e)||[``,``,``])[2],b=e=>`wui-flag wui-flag-${String(e).toLowerCase()}`,x=class extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return[`value`,`country`,`placeholder`,`disabled`]}constructor(){super(),this._internals=this.attachInternals?this.attachInternals():null,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`+${y(this._country)}${this._national}`}set value(e){this._national=String(e??``).replace(/[^0-9]/g,``),this._commit()}_commit(){this._internals?.setFormValue(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=v.map(([e,t,n])=>`<button type="button" role="option" class="country-dropdown-item${e===this._country?` selected`:``}" data-iso="${e}"><span class="${b(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,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">${a(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="${v(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=>y(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="${v(e.value)}" aria-selected="${t}"><span class="ms-check"><i class="bi bi-check" aria-hidden="true"></i></span><span class="ms-opt-label">${o(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 a=()=>this.hasAttribute(`disabled`),o=()=>{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`},s=()=>[...this.querySelectorAll(`.search-select-option`)],c=()=>s().filter(e=>!e.hidden),l=e=>{let t=c();this._active=e;for(let e of s())e.classList.remove(`is-active`);e>=0&&t[e]&&(t[e].classList.add(`is-active`),t[e].scrollIntoView({block:`nearest`}))},u=()=>!t.hidden,d=()=>{a()||(t.hidden=!1,e.setAttribute(`aria-expanded`,`true`),e.classList.add(`open`),o(),n&&(n.value=``,this._renderOptions(``),n.focus()))},f=()=>{t.hidden=!0,e.setAttribute(`aria-expanded`,`false`),e.classList.remove(`open`),l(-1)},p=()=>{this._internals?.setFormValue(this._values.join(`,`)),this.dispatchEvent(new Event(`change`,{bubbles:!0}))},m=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:``),p()},h=e=>{this._values=this._values.filter(t=>t!==String(e)),this._renderControl(),this._renderOptions(n?n.value:``),p()};e.addEventListener(`click`,e=>{let t=e.target.closest(`[data-remove]`);if(t){e.stopPropagation(),h(t.dataset.remove);return}u()?f():d()}),i.addEventListener(`click`,e=>{let t=e.target.closest(`.search-select-option`);t&&(m(t.dataset.value),n?.focus())}),i.addEventListener(`mousemove`,e=>{let t=e.target.closest(`.search-select-option`);t&&l(c().indexOf(t))}),n?.addEventListener(`input`,()=>{this._renderOptions(n.value),r&&(r.hidden=!n.value),l(-1)});let g=t=>{let r=c();t.key===`ArrowDown`?(t.preventDefault(),l(Math.min(this._active+1,r.length-1))):t.key===`ArrowUp`?(t.preventDefault(),l(Math.max(this._active-1,0))):t.key===`Enter`?(t.preventDefault(),r[this._active]&&m(r[this._active].dataset.value)):t.key===`Escape`?(f(),e.focus()):t.key===`Backspace`&&!n.value&&this._values.length&&h(this._values[this._values.length-1])};n?.addEventListener(`keydown`,g),r?.addEventListener(`click`,()=>{n.value=``,this._renderOptions(``),r.hidden=!0,n.focus()}),e.addEventListener(`keydown`,e=>{if(u()){g(e);return}(e.key===`ArrowDown`||e.key===`Enter`||e.key===` `)&&(e.preventDefault(),d())}),this._onDocClick=e=>{u()&&!this.contains(e.target)&&f()},document.addEventListener(`click`,this._onDocClick),window.addEventListener(`resize`,()=>{u()&&o()})}disconnectedCallback(){this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},v=e=>String(e??``).replace(/"/g,`&quot;`).replace(/</g,`&lt;`),y=e=>String(e??``).replace(/<[^>]*>/g,``),b=[[`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`]],x=e=>(b.find(t=>t[0]===e)||[``,``,``])[2],S=e=>`wui-flag wui-flag-${String(e).toLowerCase()}`,C=class extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return[`value`,`country`,`placeholder`,`disabled`]}constructor(){super(),this._internals=this.attachInternals?this.attachInternals():null,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`+${x(this._country)}${this._national}`}set value(e){this._national=String(e??``).replace(/[^0-9]/g,``),this._commit()}_commit(){this._internals?.setFormValue(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=b.map(([e,t,n])=>`<button type="button" role="option" class="country-dropdown-item${e===this._country?` selected`:``}" data-iso="${e}"><span class="${S(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="${b(this._country)}" data-flag aria-hidden="true"></span>
+            <span class="${S(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>+${y(this._country)}</span>
+            <span class="phone-dial" data-dial>+${x(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="${S(e)}" value="${S(this._national)}"${this.hasAttribute(`disabled`)?` disabled`:``} />
-      </div>`,this._rendered=!0,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`),a=this.querySelector(`input[type=tel]`),o=this.querySelector(`[data-flag]`),s=this.querySelector(`[data-dial]`);if(!e||!t)return;let c=()=>!t.hidden,l=()=>{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`},u=()=>{t.hidden=!1,e.setAttribute(`aria-expanded`,`true`),n.value=``,f(``),l(),n.focus()},d=()=>{t.hidden=!0,e.setAttribute(`aria-expanded`,`false`)};this._reposition=()=>{c()&&l()},window.addEventListener(`scroll`,this._reposition,!0),window.addEventListener(`resize`,this._reposition);let f=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)},p=e=>{this._country=e,this.setAttribute(`country`,e),o&&(o.className=b(e)),s&&(s.textContent=`+${y(e)}`);for(let t of r.querySelectorAll(`.country-dropdown-item`))t.classList.toggle(`selected`,t.dataset.iso===e);d(),this._commit()};e.addEventListener(`click`,()=>c()?d():u()),n.addEventListener(`input`,()=>f(n.value)),r.addEventListener(`click`,e=>{let t=e.target.closest(`.country-dropdown-item`);t&&p(t.dataset.iso)}),a.addEventListener(`input`,()=>{this._national=a.value.replace(/[^0-9]/g,``),this._commit()}),this._onDocClick=e=>{c()&&!this.contains(e.target)&&d()},document.addEventListener(`click`,this._onDocClick),this._internals?.setFormValue(this.value)}disconnectedCallback(){this._reposition&&(window.removeEventListener(`scroll`,this._reposition,!0),window.removeEventListener(`resize`,this._reposition)),this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},S=e=>String(e??``).replace(/"/g,`&quot;`).replace(/</g,`&lt;`),C=class extends HTMLElement{static formAssociated=!0;static get observedAttributes(){return[`value`,`placeholder`,`search-placeholder`,`searchable`,`disabled`,`compact`]}constructor(){super(),this._internals=this.attachInternals?this.attachInternals():null,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),this._internals?.setFormValue(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,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)),this._internals?.setFormValue(this._value);let a=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="${w(e.value)}" aria-selected="${t}">${e.label}</button>`}).join(``);this.innerHTML=`
+        <input type="tel" class="input" placeholder="${w(e)}" value="${w(this._national)}"${this.hasAttribute(`disabled`)?` disabled`:``} />
+      </div>`,this._rendered=!0,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`),a=this.querySelector(`input[type=tel]`),o=this.querySelector(`[data-flag]`),s=this.querySelector(`[data-dial]`);if(!e||!t)return;let c=()=>!t.hidden,l=()=>{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`},u=()=>{t.hidden=!1,e.setAttribute(`aria-expanded`,`true`),n.value=``,f(``),l(),n.focus()},d=()=>{t.hidden=!0,e.setAttribute(`aria-expanded`,`false`)};this._reposition=()=>{c()&&l()},window.addEventListener(`scroll`,this._reposition,!0),window.addEventListener(`resize`,this._reposition);let f=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)},p=e=>{this._country=e,this.setAttribute(`country`,e),o&&(o.className=S(e)),s&&(s.textContent=`+${x(e)}`);for(let t of r.querySelectorAll(`.country-dropdown-item`))t.classList.toggle(`selected`,t.dataset.iso===e);d(),this._commit()};e.addEventListener(`click`,()=>c()?d():u()),n.addEventListener(`input`,()=>f(n.value)),r.addEventListener(`click`,e=>{let t=e.target.closest(`.country-dropdown-item`);t&&p(t.dataset.iso)}),a.addEventListener(`input`,()=>{this._national=a.value.replace(/[^0-9]/g,``),this._commit()}),this._onDocClick=e=>{c()&&!this.contains(e.target)&&d()},document.addEventListener(`click`,this._onDocClick),this._internals?.setFormValue(this.value)}disconnectedCallback(){this._reposition&&(window.removeEventListener(`scroll`,this._reposition,!0),window.removeEventListener(`resize`,this._reposition)),this._onDocClick&&document.removeEventListener(`click`,this._onDocClick)}},w=e=>String(e??``).replace(/"/g,`&quot;`).replace(/</g,`&lt;`),T=class extends HTMLElement{static formAssociated=!0;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._internals=this.attachInternals?this.attachInternals():null,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),this._internals?.setFormValue(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,[i]:!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)),this._internals?.setFormValue(this._value);let s=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="${E(e.value)}" aria-selected="${t}">${o(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"${this.hasAttribute(`disabled`)?` disabled`:``}>
-          <span class="${i?``:`search-select-placeholder`}" data-label>${i?i.label:n}</span>
+        <button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-label="${E(this._accessibleName())}"${this.hasAttribute(`disabled`)?` disabled`:``}>
+          <span class="${i?``:`search-select-placeholder`}" data-label>${i?o(i):a(n)}</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="${w(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">${a}<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="${E(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">${s}<div class="search-select-empty" hidden>No matches</div></div>
         </div>
-      </div>`,this._rendered=!0,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?t.label: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=>{!i()&&(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)}},w=e=>String(e??``).replace(/"/g,`&quot;`).replace(/</g,`&lt;`),T=`image/png,image/jpeg,image/webp`,E=5,D={"image/png":[`.png`],"image/jpeg":[`.jpg`,`.jpeg`],"image/webp":[`.webp`],"image/gif":[`.gif`],"image/svg+xml":[`.svg`],"application/pdf":[`.pdf`]},O={"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`},k=e=>String(e||``).split(`,`).map(e=>e.trim().toLowerCase()).filter(Boolean);function A(e){let t=[];for(let n of k(e)){let e=O[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 j(e,t){let n=k(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&&(D[e]||[]).some(e=>i.endsWith(e)))}function M(e,t={}){if(!e)return null;let n=t.accept===void 0?T:t.accept,r=t.maxSizeMb||5;return j(e,n)?e.size>r*1024*1024?`Keep the file under ${r} MB.`:null:`Choose a ${A(n)} file.`}var N=(e,t)=>{typeof customElements<`u`&&!customElements.get(e)&&customElements.define(e,t)};function P(){N(`wui-select`,C),N(`wui-phone`,x),N(`wui-datepicker`,p),N(`wui-autocomplete`,i),N(`wui-multiselect`,m),N(`wui-status-icon`,r)}return P(),e.DEFAULT_IMAGE_ACCEPT=T,e.DEFAULT_MAX_SIZE_MB=E,e.STATUS_TONES=n,e.WuiAutocomplete=i,e.WuiDatePicker=p,e.WuiMultiSelect=m,e.WuiPhone=x,e.WuiSelect=C,e.WuiStatusIcon=r,e.acceptLabel=A,e.defineWeborityElements=P,e.matchesAccept=j,e.validateFile=M,e})({});
+      </div>`,this._rendered=!0,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?o(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)}},E=e=>String(e??``).replace(/"/g,`&quot;`).replace(/</g,`&lt;`),D=`image/png,image/jpeg,image/webp`,O=5,k={"image/png":[`.png`],"image/jpeg":[`.jpg`,`.jpeg`],"image/webp":[`.webp`],"image/gif":[`.gif`],"image/svg+xml":[`.svg`],"application/pdf":[`.pdf`]},A={"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`},j=e=>String(e||``).split(`,`).map(e=>e.trim().toLowerCase()).filter(Boolean);function M(e){let t=[];for(let n of j(e)){let e=A[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 N(e,t){let n=j(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&&(k[e]||[]).some(e=>i.endsWith(e)))}function P(e,t={}){if(!e)return null;let n=t.accept===void 0?D:t.accept,r=t.maxSizeMb||5;return N(e,n)?e.size>r*1024*1024?`Keep the file under ${r} MB.`:null:`Choose a ${M(n)} file.`}var F=(e,t)=>{typeof customElements<`u`&&!customElements.get(e)&&customElements.define(e,t)};function I(){F(`wui-select`,T),F(`wui-phone`,C),F(`wui-datepicker`,g),F(`wui-autocomplete`,s),F(`wui-multiselect`,_),F(`wui-status-icon`,r)}return I(),e.DEFAULT_IMAGE_ACCEPT=D,e.DEFAULT_MAX_SIZE_MB=O,e.STATUS_TONES=n,e.WuiAutocomplete=s,e.WuiDatePicker=g,e.WuiMultiSelect=_,e.WuiPhone=C,e.WuiSelect=T,e.WuiStatusIcon=r,e.acceptLabel=M,e.defineWeborityElements=I,e.matchesAccept=N,e.validateFile=P,e})({});

package/dist/ui-elements.js

@@ -19,8 +19,11 @@ var e = {
 		let t = this.getAttribute("tone"), n = this.getAttribute("size") || "72", r = e[t] || e.info;
 		this.innerHTML = `<svg width="${n}" height="${n}" viewBox="0 0 174 174" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">${r}</svg>`;
 	}
-}, r = class extends HTMLElement {
+}, r = Symbol("wui.trustedHtml"), i = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;"), a = (e) => e?.[r] ? String(e.label ?? "") : i(e == null ? "" : e.label), o = class extends HTMLElement {
 	static formAssociated = !0;
+	_accessibleName() {
+		return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
+	}
 	static get observedAttributes() {
 		return [
 			"value",
@@ -46,7 +49,7 @@ var e = {
 	set value(e) {
 		this._value = e == null ? "" : String(e), this._internals?.setFormValue(this._value);
 		let t = this._readOptions().find((e) => String(e.value) === this._value);
-		t && (this._label = a(t.label)), this._syncInput();
+		t && (this._label = c(t.label)), this._syncInput();
 	}
 	set options(e) {
 		this._optionsProp = Array.isArray(e) ? e : [], this._renderOptions();
@@ -76,6 +79,7 @@ var e = {
 		e.length && (this._declared = e.map((e) => ({
 			value: e.getAttribute("value") ?? e.textContent.trim(),
 			label: e.innerHTML,
+			[r]: !0,
 			selected: e.hasAttribute("selected")
 		})));
 	}
@@ -87,8 +91,8 @@ var e = {
 		let e = this.getAttribute("placeholder") || "Search…";
 		this.innerHTML = `
       <div class="search-select">
-        <div class="input search-select-control search-select-ac" role="combobox" aria-haspopup="listbox" aria-expanded="false">
-          <input class="search-select-input search-select-ac-input" placeholder="${i(e)}" aria-autocomplete="list" autocomplete="off"${this.hasAttribute("disabled") ? " disabled" : ""} />
+        <div class="input search-select-control search-select-ac" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-label="${s(this._accessibleName())}">
+          <input class="search-select-input search-select-ac-input" placeholder="${s(e)}" aria-autocomplete="list" autocomplete="off"${this.hasAttribute("disabled") ? " disabled" : ""} />
           <span class="search-select-spinner spinner-border spinner-border-sm" role="status" aria-hidden="true" hidden></span>
           <button type="button" class="search-select-clear" aria-label="Clear" hidden><i class="bi bi-x" aria-hidden="true"></i></button>
         </div>
@@ -126,12 +130,12 @@ var e = {
 		let t = this._refs();
 		if (!t.optionsWrap) return;
 		let n = (e ?? (t.input ? t.input.value : "")).trim().toLowerCase(), r = this._readOptions();
-		!this._remote && n && (r = r.filter((e) => a(e.label).toLowerCase().includes(n))), t.optionsWrap.innerHTML = r.map((e) => {
+		!this._remote && n && (r = r.filter((e) => c(e.label).toLowerCase().includes(n))), t.optionsWrap.innerHTML = r.map((e) => {
 			let t = String(e.value) === String(this._value);
-			return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${i(e.value)}" aria-selected="${t}">${e.label}</button>`;
+			return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${s(e.value)}" aria-selected="${t}">${a(e)}</button>`;
 		}).join(""), this._active = -1;
-		let o = n.length < this._minChars;
-		t.hint && (t.hint.hidden = !(this._remote && o && !r.length)), t.empty && (t.empty.hidden = this._loading || r.length > 0 || this._remote && o);
+		let i = n.length < this._minChars;
+		t.hint && (t.hint.hidden = !(this._remote && i && !r.length)), t.empty && (t.empty.hidden = this._loading || r.length > 0 || this._remote && i);
 	}
 	_wire() {
 		let e = this._refs();
@@ -144,16 +148,16 @@ var e = {
 			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" }));
-		}, i = () => !e.menu.hidden, o = () => {
+		}, i = () => !e.menu.hidden, a = () => {
 			e.menu.hidden = !1, e.control.setAttribute("aria-expanded", "true"), e.control.classList.add("open"), t(), this._renderOptions();
-		}, s = () => {
+		}, o = () => {
 			e.menu.hidden = !0, e.control.setAttribute("aria-expanded", "false"), e.control.classList.remove("open"), r(-1), this._syncInput();
-		}, c = (t) => {
-			this._value = t.dataset.value, this._label = a(t.innerHTML), this._internals?.setFormValue(this._value), e.input.value = this._label, this.dispatchEvent(new Event("change", { bubbles: !0 })), s(), e.input.focus();
+		}, s = (t) => {
+			this._value = t.dataset.value, this._label = c(t.innerHTML), this._internals?.setFormValue(this._value), e.input.value = this._label, this.dispatchEvent(new Event("change", { bubbles: !0 })), o(), e.input.focus();
 		};
-		e.input.addEventListener("focus", () => o()), e.input.addEventListener("input", () => {
+		e.input.addEventListener("focus", () => a()), e.input.addEventListener("input", () => {
 			let t = e.input.value;
-			if (e.clear && (e.clear.hidden = !t), i() || o(), this._remote) {
+			if (e.clear && (e.clear.hidden = !t), i() || a(), this._remote) {
 				if (this._renderOptions(t), t.trim().length < this._minChars) return;
 				clearTimeout(this._timer), this._timer = setTimeout(() => {
 					this.dispatchEvent(new CustomEvent("search", {
@@ -164,17 +168,17 @@ var e = {
 			} else this._renderOptions(t);
 		}), e.input.addEventListener("keydown", (e) => {
 			let t = n();
-			e.key === "ArrowDown" ? (e.preventDefault(), i() || o(), r(Math.min(this._active + 1, t.length - 1))) : e.key === "ArrowUp" ? (e.preventDefault(), r(Math.max(this._active - 1, 0))) : e.key === "Enter" ? t[this._active] && (e.preventDefault(), c(t[this._active])) : e.key === "Escape" && s();
+			e.key === "ArrowDown" ? (e.preventDefault(), i() || a(), r(Math.min(this._active + 1, t.length - 1))) : e.key === "ArrowUp" ? (e.preventDefault(), r(Math.max(this._active - 1, 0))) : e.key === "Enter" ? t[this._active] && (e.preventDefault(), s(t[this._active])) : e.key === "Escape" && o();
 		}), e.optionsWrap.addEventListener("click", (e) => {
 			let t = e.target.closest(".search-select-option");
-			t && c(t);
+			t && s(t);
 		}), e.optionsWrap.addEventListener("mousemove", (e) => {
 			let t = e.target.closest(".search-select-option");
 			t && r(this._optionEls().indexOf(t));
 		}), e.clear?.addEventListener("click", () => {
 			this._value = "", this._label = "", this._internals?.setFormValue(""), e.input.value = "", e.clear.hidden = !0, this._renderOptions(""), this.dispatchEvent(new Event("change", { bubbles: !0 })), e.input.focus();
 		}), this._onDocClick = (e) => {
-			i() && !this.contains(e.target) && s();
+			i() && !this.contains(e.target) && o();
 		}, document.addEventListener("click", this._onDocClick), window.addEventListener("resize", () => {
 			i() && t();
 		});
@@ -182,7 +186,7 @@ var e = {
 	disconnectedCallback() {
 		this._onDocClick && document.removeEventListener("click", this._onDocClick), clearTimeout(this._timer);
 	}
-}, i = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), a = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), o = [
+}, s = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), c = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), l = [
 	"January",
 	"February",
 	"March",
@@ -195,7 +199,7 @@ var e = {
 	"October",
 	"November",
 	"December"
-], s = [
+], u = [
 	"Su",
 	"Mo",
 	"Tu",
@@ -203,17 +207,17 @@ var e = {
 	"Th",
 	"Fr",
 	"Sa"
-], c = (e) => String(e).padStart(2, "0"), l = (e, t, n) => `${e}-${c(t + 1)}-${c(n)}`, u = (e) => {
+], d = (e) => String(e).padStart(2, "0"), f = (e, t, n) => `${e}-${d(t + 1)}-${d(n)}`, p = (e) => {
 	let t = /^(\d{4})-(\d{2})-(\d{2})$/.exec(e || "");
 	return t ? {
 		y: +t[1],
 		m: t[2] - 1,
 		d: +t[3]
 	} : null;
-}, d = (e) => {
-	let t = u(e);
-	return t ? `${c(t.d)} ${o[t.m].slice(0, 3)} ${t.y}` : "";
-}, f = class extends HTMLElement {
+}, m = (e) => {
+	let t = p(e);
+	return t ? `${d(t.d)} ${l[t.m].slice(0, 3)} ${t.y}` : "";
+}, h = class extends HTMLElement {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -243,11 +247,11 @@ var e = {
 	}
 	render() {
 		this._value = this.getAttribute("value") || this._value;
-		let e = this.getAttribute("placeholder") || "Enter Date", t = u(this._value);
+		let e = this.getAttribute("placeholder") || "Enter Date", t = p(this._value);
 		t && (this._viewY = t.y, this._viewM = t.m), this.innerHTML = `
       <div class="datepicker">
         <button type="button" class="input datepicker-trigger" aria-haspopup="dialog" aria-expanded="false"${this.hasAttribute("disabled") ? " disabled" : ""}>
-          <span data-trigger-label class="${t ? "" : "search-select-placeholder"}">${t ? d(this._value) : e}</span>
+          <span data-trigger-label class="${t ? "" : "search-select-placeholder"}">${t ? m(this._value) : e}</span>
           <i class="bi bi-calendar3" aria-hidden="true"></i>
         </button>
         <div class="datepicker-pop" role="dialog" hidden></div>
@@ -259,27 +263,27 @@ var e = {
 	_syncTrigger() {
 		let e = this.querySelector("[data-trigger-label]");
 		if (!e) return;
-		let t = u(this._value);
-		e.textContent = t ? d(this._value) : this.getAttribute("placeholder") || "Enter Date", e.classList.toggle("search-select-placeholder", !t);
+		let t = p(this._value);
+		e.textContent = t ? m(this._value) : this.getAttribute("placeholder") || "Enter Date", e.classList.toggle("search-select-placeholder", !t);
 	}
 	_renderMonth() {
-		let e = this.querySelector(".datepicker-pop"), t = new Date(this._viewY, this._viewM, 1).getDay(), n = new Date(this._viewY, this._viewM + 1, 0).getDate(), r = u(this._value), i = u(this.getAttribute("min")), a = u(this.getAttribute("max")), c = (e, t, n) => {
+		let e = this.querySelector(".datepicker-pop"), t = new Date(this._viewY, this._viewM, 1).getDay(), n = new Date(this._viewY, this._viewM + 1, 0).getDate(), r = p(this._value), i = p(this.getAttribute("min")), a = p(this.getAttribute("max")), o = (e, t, n) => {
 			let r = new Date(e, t, n).getTime();
 			return !!(i && r < new Date(i.y, i.m, i.d).getTime() || a && r > new Date(a.y, a.m, a.d).getTime());
-		}, d = "";
-		for (let e = 0; e < t; e++) d += "<span class=\"datepicker-day is-outside\"></span>";
+		}, s = "";
+		for (let e = 0; e < t; e++) s += "<span class=\"datepicker-day is-outside\"></span>";
 		for (let e = 1; e <= n; e++) {
-			let t = l(this._viewY, this._viewM, e), n = r && r.y === this._viewY && r.m === this._viewM && r.d === e, i = c(this._viewY, this._viewM, e);
-			d += `<button type="button" class="datepicker-day${n ? " selected" : ""}" data-iso="${t}"${i ? " disabled" : ""}>${e}</button>`;
+			let t = f(this._viewY, this._viewM, e), n = r && r.y === this._viewY && r.m === this._viewM && r.d === e, i = o(this._viewY, this._viewM, e);
+			s += `<button type="button" class="datepicker-day${n ? " selected" : ""}" data-iso="${t}"${i ? " disabled" : ""}>${e}</button>`;
 		}
 		e.innerHTML = `
       <div class="datepicker-head">
         <button type="button" class="datepicker-nav-btn" data-nav="-1" aria-label="Previous month"><i class="bi bi-chevron-left" aria-hidden="true"></i></button>
-        <span class="datepicker-month">${o[this._viewM]} ${this._viewY}</span>
+        <span class="datepicker-month">${l[this._viewM]} ${this._viewY}</span>
         <button type="button" class="datepicker-nav-btn" data-nav="1" aria-label="Next month"><i class="bi bi-chevron-right" aria-hidden="true"></i></button>
       </div>
-      <div class="datepicker-weekdays">${s.map((e) => `<span>${e}</span>`).join("")}</div>
-      <div class="datepicker-grid">${d}</div>
+      <div class="datepicker-weekdays">${u.map((e) => `<span>${e}</span>`).join("")}</div>
+      <div class="datepicker-grid">${s}</div>
       <div class="datepicker-foot"><button type="button" class="datepicker-link" data-clear>Clear</button></div>`;
 	}
 	_wire() {
@@ -304,15 +308,18 @@ var e = {
 			n && !n.disabled && (this.value = n.dataset.iso, i());
 		}), this._onDocClick = (e) => {
 			n() && !this.contains(e.target) && i();
-		}, document.addEventListener("click", this._onDocClick), document.addEventListener("keydown", (e) => {
+		}, document.addEventListener("click", this._onDocClick), this._onDocKey = (e) => {
 			n() && e.key === "Escape" && i();
-		}), this._internalsSet();
+		}, document.addEventListener("keydown", this._onDocKey), this._internalsSet();
 	}
 	disconnectedCallback() {
-		this._onDocClick && document.removeEventListener("click", this._onDocClick);
+		this._onDocClick && document.removeEventListener("click", this._onDocClick), this._onDocKey && document.removeEventListener("keydown", this._onDocKey);
 	}
-}, p = class extends HTMLElement {
+}, g = class extends HTMLElement {
 	static formAssociated = !0;
+	_accessibleName() {
+		return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
+	}
 	static get observedAttributes() {
 		return [
 			"placeholder",
@@ -354,6 +361,7 @@ var e = {
 		e.length && (this._declared = e.map((e) => ({
 			value: e.getAttribute("value") ?? e.textContent.trim(),
 			label: e.innerHTML,
+			[r]: !0,
 			selected: e.hasAttribute("selected")
 		})));
 	}
@@ -364,17 +372,21 @@ var e = {
 		let t = this._readOptions().find((t) => String(t.value) === String(e));
 		return t ? t.label : e;
 	}
+	_labelHtmlFor(e) {
+		let t = this._readOptions().find((t) => String(t.value) === String(e));
+		return t ? a(t) : i(e);
+	}
 	render() {
 		this._snapshotDeclared();
 		let e = this.hasAttribute("searchable"), t = this.getAttribute("search-placeholder") || "Search…";
 		this._internals?.setFormValue(this._values.join(",")), this.innerHTML = `
       <div class="search-select">
-        <div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false"${this.hasAttribute("disabled") ? " aria-disabled=\"true\"" : ""}>
+        <div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-label="${_(this._accessibleName())}"${this.hasAttribute("disabled") ? " aria-disabled=\"true\"" : ""}>
           <div class="ms-chips" data-chips></div>
           <i class="bi bi-chevron-down search-select-caret" aria-hidden="true"></i>
         </div>
         <div class="search-select-menu search-select-menu-fixed" role="listbox" aria-multiselectable="true" tabindex="-1" hidden>
-          ${e ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${m(t)}" 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>` : ""}
+          ${e ? `<div class="search-select-search"><i class="bi bi-search" aria-hidden="true"></i><input class="search-select-input" placeholder="${_(t)}" 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"></div>
           <div class="search-select-empty" hidden>No matches</div>
         </div>
@@ -385,18 +397,18 @@ var e = {
 		if (!e) return;
 		let t = this.getAttribute("placeholder") || "Select…";
 		if (!this._values.length) {
-			e.innerHTML = `<span class="search-select-placeholder">${h(t)}</span>`;
+			e.innerHTML = `<span class="search-select-placeholder">${i(t)}</span>`;
 			return;
 		}
-		e.innerHTML = this._values.map((e) => `<span class="chip chip-sm"><span class="chip-label">${this._labelFor(e)}</span><button type="button" class="chip-remove" data-remove="${m(e)}" aria-label="Remove"><i class="bi bi-x" aria-hidden="true"></i></button></span>`).join("");
+		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="${_(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) => g(e.label).toLowerCase().includes(r))), t.innerHTML = i.map((e) => {
+		r && (i = i.filter((e) => v(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="${m(e.value)}" aria-selected="${t}"><span class="ms-check"><i class="bi bi-check" aria-hidden="true"></i></span><span class="ms-opt-label">${e.label}</span></button>`;
+			return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${_(e.value)}" aria-selected="${t}"><span class="ms-check"><i class="bi bi-check" aria-hidden="true"></i></span><span class="ms-opt-label">${a(e)}</span></button>`;
 		}).join(""), n && (n.hidden = i.length > 0), this._active = -1;
 	}
 	_wire() {
@@ -437,13 +449,19 @@ var e = {
 			t && l(c().indexOf(t));
 		}), n?.addEventListener("input", () => {
 			this._renderOptions(n.value), r && (r.hidden = !n.value), l(-1);
-		}), n?.addEventListener("keydown", (t) => {
+		});
+		let g = (t) => {
 			let r = c();
 			t.key === "ArrowDown" ? (t.preventDefault(), l(Math.min(this._active + 1, r.length - 1))) : t.key === "ArrowUp" ? (t.preventDefault(), l(Math.max(this._active - 1, 0))) : t.key === "Enter" ? (t.preventDefault(), r[this._active] && m(r[this._active].dataset.value)) : t.key === "Escape" ? (f(), e.focus()) : t.key === "Backspace" && !n.value && this._values.length && h(this._values[this._values.length - 1]);
-		}), r?.addEventListener("click", () => {
+		};
+		n?.addEventListener("keydown", g), r?.addEventListener("click", () => {
 			n.value = "", this._renderOptions(""), r.hidden = !0, n.focus();
 		}), e.addEventListener("keydown", (e) => {
-			!u() && (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), d());
+			if (u()) {
+				g(e);
+				return;
+			}
+			(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), d());
 		}), this._onDocClick = (e) => {
 			u() && !this.contains(e.target) && f();
 		}, document.addEventListener("click", this._onDocClick), window.addEventListener("resize", () => {
@@ -453,7 +471,7 @@ var e = {
 	disconnectedCallback() {
 		this._onDocClick && document.removeEventListener("click", this._onDocClick);
 	}
-}, m = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), h = (e) => String(e ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;"), g = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), _ = [
+}, _ = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), v = (e) => String(e ?? "").replace(/<[^>]*>/g, ""), y = [
 	[
 		"AF",
 		"Afghanistan",
@@ -1679,11 +1697,11 @@ var e = {
 		"Zimbabwe",
 		"263"
 	]
-], v = (e) => (_.find((t) => t[0] === e) || [
+], b = (e) => (y.find((t) => t[0] === e) || [
 	"",
 	"",
 	""
-])[2], y = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, b = class extends HTMLElement {
+])[2], x = (e) => `wui-flag wui-flag-${String(e).toLowerCase()}`, S = class extends HTMLElement {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -1703,7 +1721,7 @@ var e = {
 		this._rendered && (e === "country" && (this._country = n || "IN"), this.render());
 	}
 	get value() {
-		return `+${v(this._country)}${this._national}`;
+		return `+${b(this._country)}${this._national}`;
 	}
 	set value(e) {
 		this._national = String(e ?? "").replace(/[^0-9]/g, ""), this._commit();
@@ -1714,21 +1732,21 @@ var e = {
 	render() {
 		let e = this.getAttribute("placeholder") || "Enter phone number";
 		this._country = this.getAttribute("country") || this._country;
-		let t = _.map(([e, t, n]) => `<button type="button" role="option" class="country-dropdown-item${e === this._country ? " selected" : ""}" data-iso="${e}"><span class="${y(e)}" aria-hidden="true"></span><span class="country-name-text">${t}<span class="country-code-text">+${n}</span></span></button>`).join("");
+		let t = y.map(([e, t, n]) => `<button type="button" role="option" class="country-dropdown-item${e === this._country ? " selected" : ""}" data-iso="${e}"><span class="${x(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="${y(this._country)}" data-flag aria-hidden="true"></span>
+            <span class="${x(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>+${v(this._country)}</span>
+            <span class="phone-dial" data-dial>+${b(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="${x(e)}" value="${x(this._national)}"${this.hasAttribute("disabled") ? " disabled" : ""} />
+        <input type="tel" class="input" placeholder="${C(e)}" value="${C(this._national)}"${this.hasAttribute("disabled") ? " disabled" : ""} />
       </div>`, this._rendered = !0, this._wire();
 	}
 	_wire() {
@@ -1753,7 +1771,7 @@ var e = {
 			}
 			i && (i.hidden = n > 0);
 		}, p = (e) => {
-			this._country = e, this.setAttribute("country", e), o && (o.className = y(e)), s && (s.textContent = `+${v(e)}`);
+			this._country = e, this.setAttribute("country", e), o && (o.className = x(e)), s && (s.textContent = `+${b(e)}`);
 			for (let t of r.querySelectorAll(".country-dropdown-item")) t.classList.toggle("selected", t.dataset.iso === e);
 			d(), this._commit();
 		};
@@ -1769,7 +1787,7 @@ var e = {
 	disconnectedCallback() {
 		this._reposition && (window.removeEventListener("scroll", this._reposition, !0), window.removeEventListener("resize", this._reposition)), this._onDocClick && document.removeEventListener("click", this._onDocClick);
 	}
-}, x = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), S = class extends HTMLElement {
+}, C = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), w = class extends HTMLElement {
 	static formAssociated = !0;
 	static get observedAttributes() {
 		return [
@@ -1778,9 +1796,13 @@ var e = {
 			"search-placeholder",
 			"searchable",
 			"disabled",
-			"compact"
+			"compact",
+			"aria-label"
 		];
 	}
+	_accessibleName() {
+		return this.getAttribute("aria-label") || this.getAttribute("placeholder") || "Select";
+	}
 	constructor() {
 		super(), this._internals = this.attachInternals ? this.attachInternals() : null, this._value = "", this._optionsProp = null, this._active = -1;
 	}
@@ -1808,6 +1830,7 @@ var e = {
 		e.length && (this._declared = e.map((e) => ({
 			value: e.getAttribute("value") ?? e.textContent.trim(),
 			label: e.innerHTML,
+			[r]: !0,
 			selected: e.hasAttribute("selected")
 		})));
 	}
@@ -1816,21 +1839,21 @@ var e = {
 	}
 	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)), this._internals?.setFormValue(this._value);
-		let a = e.map((e) => {
+		let e = this._readOptions(), t = this.hasAttribute("searchable"), n = this.getAttribute("placeholder") || "Select...", r = this.getAttribute("search-placeholder") || "Search...", o = e.find((e) => String(e.value) === String(this._value)) || e.find((e) => e.selected);
+		o && (this._value = String(o.value)), this._internals?.setFormValue(this._value);
+		let s = 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="${C(e.value)}" aria-selected="${t}">${e.label}</button>`;
+			return `<button type="button" role="option" class="search-select-option${t ? " selected" : ""}" data-value="${T(e.value)}" aria-selected="${t}">${a(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"${this.hasAttribute("disabled") ? " disabled" : ""}>
-          <span class="${i ? "" : "search-select-placeholder"}" data-label>${i ? i.label : n}</span>
+        <button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-label="${T(this._accessibleName())}"${this.hasAttribute("disabled") ? " disabled" : ""}>
+          <span class="${o ? "" : "search-select-placeholder"}" data-label>${o ? a(o) : i(n)}</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="${C(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">${a}<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="${T(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">${s}<div class="search-select-empty" hidden>No matches</div></div>
         </div>
       </div>`, this._rendered = !0, this._wire();
 	}
@@ -1857,7 +1880,7 @@ var e = {
 			let t = e.dataset.value === String(this._value);
 			e.classList.toggle("selected", t), e.setAttribute("aria-selected", String(t));
 		}
-		e && (e.innerHTML = t ? t.label : e.innerHTML, e.classList.toggle("search-select-placeholder", !t));
+		e && (e.innerHTML = t ? a(t) : e.innerHTML, e.classList.toggle("search-select-placeholder", !t));
 	}
 	_wire() {
 		let e = this._refs();
@@ -1888,7 +1911,11 @@ var e = {
 			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) => {
-			!i() && (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), a());
+			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);
@@ -1908,14 +1935,14 @@ var e = {
 	disconnectedCallback() {
 		this._onDocClick && document.removeEventListener("click", this._onDocClick);
 	}
-}, C = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), w = "image/png,image/jpeg,image/webp", T = 5, E = {
+}, T = (e) => String(e ?? "").replace(/"/g, "&quot;").replace(/</g, "&lt;"), E = "image/png,image/jpeg,image/webp", D = 5, O = {
 	"image/png": [".png"],
 	"image/jpeg": [".jpg", ".jpeg"],
 	"image/webp": [".webp"],
 	"image/gif": [".gif"],
 	"image/svg+xml": [".svg"],
 	"application/pdf": [".pdf"]
-}, D = {
+}, k = {
 	"image/png": "PNG",
 	"image/jpeg": "JPG",
 	"image/webp": "WEBP",
@@ -1929,34 +1956,34 @@ var e = {
 	".gif": "GIF",
 	".svg": "SVG",
 	".pdf": "PDF"
-}, O = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean);
-function k(e) {
+}, A = (e) => String(e || "").split(",").map((e) => e.trim().toLowerCase()).filter(Boolean);
+function j(e) {
 	let t = [];
-	for (let n of O(e)) {
-		let e = D[n] || (n.startsWith(".") ? n.slice(1).toUpperCase() : n.toUpperCase());
+	for (let n of A(e)) {
+		let e = k[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 A(e, t) {
-	let n = O(t);
+function M(e, t) {
+	let n = A(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 && (E[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 && (O[e] || []).some((e) => i.endsWith(e)));
 }
-function j(e, t = {}) {
+function N(e, t = {}) {
 	if (!e) return null;
-	let n = t.accept === void 0 ? w : t.accept, r = t.maxSizeMb || 5;
-	return A(e, n) ? e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${k(n)} file.`;
+	let n = t.accept === void 0 ? E : t.accept, r = t.maxSizeMb || 5;
+	return M(e, n) ? e.size > r * 1024 * 1024 ? `Keep the file under ${r} MB.` : null : `Choose a ${j(n)} file.`;
 }
 //#endregion
 //#region src/index.js
-var M = (e, t) => {
+var P = (e, t) => {
 	typeof customElements < "u" && !customElements.get(e) && customElements.define(e, t);
 };
-function N() {
-	M("wui-select", S), M("wui-phone", b), M("wui-datepicker", f), M("wui-autocomplete", r), M("wui-multiselect", p), M("wui-status-icon", n);
+function F() {
+	P("wui-select", w), P("wui-phone", S), P("wui-datepicker", h), P("wui-autocomplete", o), P("wui-multiselect", g), P("wui-status-icon", n);
 }
-N();
+F();
 //#endregion
-export { w as DEFAULT_IMAGE_ACCEPT, T as DEFAULT_MAX_SIZE_MB, t as STATUS_TONES, r as WuiAutocomplete, f as WuiDatePicker, p as WuiMultiSelect, b as WuiPhone, S as WuiSelect, n as WuiStatusIcon, k as acceptLabel, N as defineWeborityElements, A as matchesAccept, j as validateFile };
+export { E as DEFAULT_IMAGE_ACCEPT, D as DEFAULT_MAX_SIZE_MB, t as STATUS_TONES, o as WuiAutocomplete, h as WuiDatePicker, g as WuiMultiSelect, S as WuiPhone, w as WuiSelect, n as WuiStatusIcon, j as acceptLabel, F as defineWeborityElements, M as matchesAccept, N as validateFile };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-elements",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "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",