@webority/ui-elements 0.23.1 → 0.24.0

package/dist/ui-elements.global.js

@@ -19,8 +19,8 @@ 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,g(this,this._value),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:``),r=n.trim().toLowerCase(),i=this._readOptions();!this._remote&&r&&(i=i.filter(e=>ae(e.label).toLowerCase().includes(r)));let a=n.trim(),o=this._allowCustom&&a&&!this._matchesKnownOption(a)?[...i,{value:a,custom:!0}]:i,s=this._listboxId||`${this.id||`wui-autocomplete`}-listbox`;t.optionsWrap.innerHTML=o.map((e,t)=>{let n=`${s}-opt-${t}`;if(e.custom){let t=`Add “${b(e.value)}”`;return`<button type="button" role="option" id="${S(n)}" class="search-select-option search-select-option-custom" data-value="${S(e.value)}" data-custom="true" aria-selected="false">${t}</button>`}let r=String(e.value)===String(this._value);return`<button type="button" role="option" id="${S(n)}" class="search-select-option${r?` selected`:``}" data-value="${S(e.value)}" aria-selected="${r}">${x(e)}</button>`}).join(``),this._active=-1,t.control?.removeAttribute(`aria-activedescendant`);let c=r.length<this._minChars;t.hint&&(t.hint.hidden=!(this._remote&&c&&!i.length)),t.empty&&(t.empty.hidden=this._loading||o.length>0||this._remote&&c),this._reanchor?.()}_wire(){this._teardown();let e=this._refs();if(!e.control||!e.input)return;let t=()=>f(e.control,e.menu,{matchWidth:!0}),n=()=>this._optionEls().filter(e=>!e.hidden),r=t=>{let r=n();this._active=t;for(let e of this._optionEls())e.classList.remove(`is-active`);t>=0&&r[t]?(r[t].classList.add(`is-active`),r[t].scrollIntoView({block:`nearest`}),e.control.setAttribute(`aria-activedescendant`,r[t].id)):e.control.removeAttribute(`aria-activedescendant`)},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),clearTimeout(this._typeaheadTimer),this._typeaheadTimer=null,this._typeahead=``,this._syncInput()},s=t=>{let n=t.dataset.custom===`true`;this._value=t.dataset.value,this._label=n?t.dataset.value:ae(t.innerHTML),g(this,this._value),e.input.value=this._label,this.dispatchEvent(new CustomEvent(`change`,{bubbles:!0,detail:{isCustom:n}})),o(),e.input.focus()},c=t=>{this._value=t,this._label=t,g(this,t),e.input.value=t,this.dispatchEvent(new CustomEvent(`change`,{bubbles:!0,detail:{isCustom:!0}})),o()},l=()=>{let t=e.input.value;if(e.clear&&(e.clear.hidden=!t),i()||a(),this._remote){if(this._renderOptions(t),clearTimeout(this._timer),t.trim().length<this._minChars){this._pendingSearch=null;return}let e=++this._reqSeq;this._pendingSearch={query:t,seq:e},this._timer=setTimeout(()=>this._fireSearch(t,e),this._debounceMs)}else this._renderOptions(t)};this._navHandler=ee({getVisibleOptions:n,getActive:()=>this._active,setActive:e=>r(e),onEnter:(t,n)=>{if(n[this._active])s(n[this._active]);else if(this._allowCustom){let t=e.input.value.trim();t&&!this._matchesKnownOption(t)&&c(t)}},onEscape:()=>{this._navHandler.clearTypeahead(),o()}});let u=e=>{let t=e.target?.tagName===`INPUT`||e.target?.tagName===`TEXTAREA`;if(e.key===`ArrowDown`){e.preventDefault(),i()||a();let t=n();r(Math.min(this._active+1,t.length-1));return}else if(e.key===`ArrowUp`){e.preventDefault(),r(Math.max(this._active-1,0));return}else if((e.key===`Home`||e.key===`End`||e.key===`PageDown`||e.key===`PageUp`)&&(!i()||t))return;else if(e.key.length===1&&(e.ctrlKey||e.metaKey||e.altKey||!i()||e.target?.tagName===`INPUT`||e.target?.tagName===`TEXTAREA`)&&(!i()||e.target?.tagName===`INPUT`||e.target?.tagName===`TEXTAREA`))return;this._navHandler.handler(e)};e.input.addEventListener(`focus`,()=>a()),e.input.addEventListener(`input`,l),e.input.addEventListener(`keydown`,u),e.menu.addEventListener(`keydown`,u),e.input.addEventListener(`blur`,t=>{if(!this._allowCustom||t.relatedTarget&&this.contains(t.relatedTarget))return;let n=e.input.value.trim();!n||n===this._label||this._matchesKnownOption(n)||c(n)}),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.optionsWrap.addEventListener(`mouseleave`,()=>r(-1)),e.clear?.addEventListener(`click`,()=>{this._value=``,this._label=``,g(this,``),e.input.value=``,e.clear.hidden=!0,this._renderOptions(``),this.dispatchEvent(new Event(`change`,{bubbles:!0})),e.input.focus()}),this._bindGlobal=()=>{this._teardown(),this._onDocClick=e=>{i()&&!this.contains(e.target)&&o()},document.addEventListener(`click`,this._onDocClick),p(this,()=>{i()&&t()})},this._bindGlobal()}_fireSearch(e,t){this._pendingSearch=null,this.dispatchEvent(new CustomEvent(`search`,{bubbles:!0,detail:{query:e,seq:t}}))}_teardown(){this._onDocClick&&=(document.removeEventListener(`click`,this._onDocClick),null),m(this),clearTimeout(this._timer),this._navHandler?.teardown()}disconnectedCallback(){this._teardown()}},S=e=>String(e??``).replace(/&/g,`&amp;`).replace(/"/g,`&quot;`).replace(/</g,`&lt;`),ae=e=>String(e??``).replace(/<[^>]*>/g,``);function oe(e,t){let n=String(e??``),r=String(t??``).trim();if(!r||!n)return[{text:n,match:!1}];let i=n.toLowerCase(),a=r.toLowerCase();if(i.length!==n.length)return[{text:n,match:!1}];let o=[],s=0,c=i.indexOf(a,s);for(;c!==-1;)c>s&&o.push({text:n.slice(s,c),match:!1}),o.push({text:n.slice(c,c+a.length),match:!0}),s=c+a.length,c=i.indexOf(a,s);return s<n.length&&o.push({text:n.slice(s),match:!1}),o}var se=`[role="option"]`,ce=`No results`,le=class extends i{static get observedAttributes(){return[`filter`,`highlight`,`empty-text`]}constructor(){super(),this._activeId=null,this._lastQuery=null,this._lastIds=null,this._userChose=!1,this._onKeyDown=e=>this._handleKeyDown(e),this._onClick=e=>{let t=this._optionFrom(e.target);t&&this._select(t)},this._onMouseDown=e=>{this._optionFrom(e.target)&&e.preventDefault()},this._onMouseMove=e=>{let t=this._optionFrom(e.target);t&&t.id!==this._activeId&&(this._userChose=!0,this._setActive(t,!1))},this._onInput=e=>{!this.hasAttribute(`filter`)||e.target!==this._input()||(this._applyFilter(),this.refresh())}}connectedCallback(){this._teardown(),this.addEventListener(`keydown`,this._onKeyDown),this.addEventListener(`click`,this._onClick),this.addEventListener(`mousedown`,this._onMouseDown),this.addEventListener(`mousemove`,this._onMouseMove),this.addEventListener(`input`,this._onInput),this.hasAttribute(`filter`)&&this._applyFilter(),this.refresh()}disconnectedCallback(){this._teardown()}attributeChangedCallback(){this.isConnected&&(this.hasAttribute(`filter`)&&this._applyFilter(),this.refresh())}get filter(){return this.hasAttribute(`filter`)}set filter(e){this.toggleAttribute(`filter`,!!e)}get highlight(){return this.getAttribute(`highlight`)!==`false`}set highlight(e){this.setAttribute(`highlight`,e?`true`:`false`)}get emptyText(){return this.getAttribute(`empty-text`)??ce}set emptyText(e){this.setAttribute(`empty-text`,String(e??``))}refresh(){let e=this._input(),t=e?e.value:``,n=t!==this._lastQuery;this._lastQuery=t;let r=this._visibleOptions(),i=r.map(e=>e.id).join(`
-`),a=i!==this._lastIds;this._lastIds=i;let o=!n&&(this._userChose||!a)?r.find(e=>e.id===this._activeId):null;o||(this._userChose=!1),this._setActive(o??r[0]??null,n)}_input(){return this.querySelector(`[role="combobox"]`)}_optionFrom(e){let t=e?.closest?.(se);return t&&this.contains(t)&&!this._isHidden(t)?t:null}_isHidden(e){return e.hidden||!!e.closest(`[role="group"]`)?.hidden}_visibleOptions(){return[...this.querySelectorAll(se)].filter(e=>!this._isHidden(e))}_setActive(e,t){this._activeId=e?e.id:null;for(let t of this.querySelectorAll(se))t.setAttribute(`aria-selected`,t===e?`true`:`false`);let n=this._input();n&&(e?n.setAttribute(`aria-activedescendant`,e.id):n.removeAttribute(`aria-activedescendant`)),e&&t&&e.scrollIntoView({block:`nearest`})}_move(e){let t=this._visibleOptions();if(!t.length)return;let n=t.findIndex(e=>e.id===this._activeId),r=n<0?e>0?0:t.length-1:(n+e+t.length)%t.length;this._userChose=!0,this._setActive(t[r],!0)}_handleKeyDown(e){if(e.target===this._input()){if(e.key===`ArrowDown`||e.key===`ArrowUp`)e.preventDefault(),this._move(e.key===`ArrowDown`?1:-1);else if(e.key===`Enter`&&!e.isComposing){let t=this._visibleOptions().find(e=>e.id===this._activeId);if(!t)return;e.preventDefault(),this._select(t)}}}_select(e){this.dispatchEvent(new CustomEvent(`wui-command-palette:select`,{bubbles:!0,cancelable:!0,detail:{key:e.dataset.key??null,groupKey:e.dataset.groupKey??null,id:e.id}}))&&e.dataset.href&&this._navigate(e.dataset.href)}_navigate(e){window.location.assign(e)}_applyFilter(){let e=this._input(),t=(e?e.value:``).trim(),n=t.toLowerCase(),r=this.highlight,i=0;for(let e of this.querySelectorAll(se)){let a=e.querySelector(`.wui-cmd-item-label`),o=e.dataset.label??a?.textContent??``,s=!n||o.toLowerCase().includes(n);e.hidden=!s,s&&i++,a&&(a.innerHTML=oe(o,r?t:``).map(e=>e.match?`<mark class="wui-cmd-mark">${b(e.text)}</mark>`:b(e.text)).join(``))}for(let e of this.querySelectorAll(`[role="group"]`))e.hidden=![...e.querySelectorAll(se)].some(e=>!e.hidden);let a=this.querySelector(`[role="listbox"]`);a&&(a.hidden=i===0);let o=this.querySelector(`.wui-cmd-empty`);o&&(o.textContent=n&&i===0?this.emptyText:``)}_teardown(){this.removeEventListener(`keydown`,this._onKeyDown),this.removeEventListener(`click`,this._onClick),this.removeEventListener(`mousedown`,this._onMouseDown),this.removeEventListener(`mousemove`,this._onMouseMove),this.removeEventListener(`input`,this._onInput)}},ue={"--color-primary":`#4F46E5`,"--color-primary-hover":`#4338CA`,"--color-text":`#071437`,"--color-text-muted":`#4B5675`,"--color-border":`#EBEDF3`,"--color-surface":`#FFFFFF`,"--wui-radius-lg":`14px`,"--wui-shadow-overlay-lg":`0 24px 60px -16px rgba(7, 20, 55, 0.28)`,"--wui-z-fixed":`1030`},C=e=>`var(${e}, ${ue[e]})`,de=`
+      </div>`,this._rendered=!0,g(this,this._value),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:``),r=n.trim().toLowerCase(),i=this._readOptions();!this._remote&&r&&(i=i.filter(e=>ae(e.label).toLowerCase().includes(r)));let a=n.trim(),o=this._allowCustom&&a&&!this._matchesKnownOption(a)?[...i,{value:a,custom:!0}]:i,s=this._listboxId||`${this.id||`wui-autocomplete`}-listbox`;t.optionsWrap.innerHTML=o.map((e,t)=>{let n=`${s}-opt-${t}`;if(e.custom){let t=`Add “${b(e.value)}”`;return`<button type="button" role="option" id="${S(n)}" class="search-select-option search-select-option-custom" data-value="${S(e.value)}" data-custom="true" aria-selected="false">${t}</button>`}let r=String(e.value)===String(this._value);return`<button type="button" role="option" id="${S(n)}" class="search-select-option${r?` selected`:``}" data-value="${S(e.value)}" aria-selected="${r}">${x(e)}</button>`}).join(``),this._active=-1,t.control?.removeAttribute(`aria-activedescendant`);let c=r.length<this._minChars;t.hint&&(t.hint.hidden=!(this._remote&&c&&!i.length)),t.empty&&(t.empty.hidden=this._loading||o.length>0||this._remote&&c),this._reanchor?.()}_wire(){this._teardown();let e=this._refs();if(!e.control||!e.input)return;let t=()=>f(e.control,e.menu,{matchWidth:!0}),n=()=>this._optionEls().filter(e=>!e.hidden),r=t=>{let r=n();this._active=t;for(let e of this._optionEls())e.classList.remove(`is-active`);t>=0&&r[t]?(r[t].classList.add(`is-active`),r[t].scrollIntoView({block:`nearest`}),e.control.setAttribute(`aria-activedescendant`,r[t].id)):e.control.removeAttribute(`aria-activedescendant`)},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),clearTimeout(this._typeaheadTimer),this._typeaheadTimer=null,this._typeahead=``,this._syncInput()},s=t=>{let n=t.dataset.custom===`true`;this._value=t.dataset.value,this._label=n?t.dataset.value:ae(t.innerHTML),g(this,this._value),e.input.value=this._label,this.dispatchEvent(new CustomEvent(`change`,{bubbles:!0,detail:{isCustom:n}})),o(),e.input.focus()},c=t=>{this._value=t,this._label=t,g(this,t),e.input.value=t,this.dispatchEvent(new CustomEvent(`change`,{bubbles:!0,detail:{isCustom:!0}})),o()},l=()=>{let t=e.input.value;if(e.clear&&(e.clear.hidden=!t),i()||a(),this._remote){if(this._renderOptions(t),clearTimeout(this._timer),t.trim().length<this._minChars){this._pendingSearch=null;return}let e=++this._reqSeq;this._pendingSearch={query:t,seq:e},this._timer=setTimeout(()=>this._fireSearch(t,e),this._debounceMs)}else this._renderOptions(t)};this._navHandler=ee({getVisibleOptions:n,getActive:()=>this._active,setActive:e=>r(e),onEnter:(t,n)=>{if(n[this._active])s(n[this._active]);else if(this._allowCustom){let t=e.input.value.trim();t&&!this._matchesKnownOption(t)&&c(t)}},onEscape:()=>{this._navHandler.clearTypeahead(),o()}});let u=e=>{let t=e.target?.tagName===`INPUT`||e.target?.tagName===`TEXTAREA`;if(e.key===`ArrowDown`){e.preventDefault(),i()||a();let t=n();r(Math.min(this._active+1,t.length-1));return}else if(e.key===`ArrowUp`){e.preventDefault(),r(Math.max(this._active-1,0));return}else if((e.key===`Home`||e.key===`End`||e.key===`PageDown`||e.key===`PageUp`)&&(!i()||t))return;else if(e.key.length===1&&(e.ctrlKey||e.metaKey||e.altKey||!i()||e.target?.tagName===`INPUT`||e.target?.tagName===`TEXTAREA`)&&(!i()||e.target?.tagName===`INPUT`||e.target?.tagName===`TEXTAREA`))return;this._navHandler.handler(e)};e.input.addEventListener(`focus`,()=>a()),e.input.addEventListener(`input`,l),e.input.addEventListener(`keydown`,u),e.menu.addEventListener(`keydown`,u),e.input.addEventListener(`blur`,t=>{if(!this._allowCustom||t.relatedTarget&&this.contains(t.relatedTarget))return;let n=e.input.value.trim();!n||n===this._label||this._matchesKnownOption(n)||c(n)}),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.optionsWrap.addEventListener(`mouseleave`,()=>r(-1)),e.clear?.addEventListener(`click`,()=>{this._value=``,this._label=``,g(this,``),e.input.value=``,e.clear.hidden=!0,this._renderOptions(``),this.dispatchEvent(new Event(`change`,{bubbles:!0})),e.input.focus()}),this._bindGlobal=()=>{this._teardown(),this._onDocClick=e=>{i()&&!this.contains(e.target)&&o()},document.addEventListener(`click`,this._onDocClick),p(this,()=>{i()&&t()})},this._bindGlobal()}_fireSearch(e,t){this._pendingSearch=null,this.dispatchEvent(new CustomEvent(`search`,{bubbles:!0,detail:{query:e,seq:t}}))}_teardown(){this._onDocClick&&=(document.removeEventListener(`click`,this._onDocClick),null),m(this),clearTimeout(this._timer),this._navHandler?.teardown()}disconnectedCallback(){this._teardown()}},S=e=>String(e??``).replace(/&/g,`&amp;`).replace(/"/g,`&quot;`).replace(/</g,`&lt;`),ae=e=>String(e??``).replace(/<[^>]*>/g,``);function oe(e,t){let n=String(e??``),r=String(t??``).trim();if(!r||!n)return[{text:n,match:!1}];let i=n.toLowerCase(),a=r.toLowerCase();if(i.length!==n.length)return[{text:n,match:!1}];let o=[],s=0,c=i.indexOf(a,s);for(;c!==-1;)c>s&&o.push({text:n.slice(s,c),match:!1}),o.push({text:n.slice(c,c+a.length),match:!0}),s=c+a.length,c=i.indexOf(a,s);return s<n.length&&o.push({text:n.slice(s),match:!1}),o}var se=`[role="option"]`,ce=`No results`,le=class extends i{static get observedAttributes(){return[`filter`,`highlight`,`empty-text`]}constructor(){super(),this._activeId=null,this._lastQuery=null,this._lastIds=null,this._userChose=!1,this._onKeyDown=e=>this._handleKeyDown(e),this._onClick=e=>{let t=this._optionFrom(e.target);t&&this._select(t)},this._onMouseDown=e=>{this._optionFrom(e.target,!0)&&e.preventDefault()},this._onMouseMove=e=>{let t=this._optionFrom(e.target);t&&t.id!==this._activeId&&(this._userChose=!0,this._setActive(t,!1))},this._onInput=e=>{!this.hasAttribute(`filter`)||e.target!==this._input()||(this._applyFilter(),this.refresh())}}connectedCallback(){this._teardown(),this.addEventListener(`keydown`,this._onKeyDown),this.addEventListener(`click`,this._onClick),this.addEventListener(`mousedown`,this._onMouseDown),this.addEventListener(`mousemove`,this._onMouseMove),this.addEventListener(`input`,this._onInput),this.hasAttribute(`filter`)&&this._applyFilter(),this.refresh()}disconnectedCallback(){this._teardown()}attributeChangedCallback(){this.isConnected&&(this.hasAttribute(`filter`)&&this._applyFilter(),this.refresh())}get filter(){return this.hasAttribute(`filter`)}set filter(e){this.toggleAttribute(`filter`,!!e)}get highlight(){return this.getAttribute(`highlight`)!==`false`}set highlight(e){this.setAttribute(`highlight`,e?`true`:`false`)}get emptyText(){return this.getAttribute(`empty-text`)??ce}set emptyText(e){this.setAttribute(`empty-text`,String(e??``))}refresh(){let e=this._input(),t=e?e.value:``,n=t!==this._lastQuery;this._lastQuery=t;let r=this._selectableOptions(),i=r.map(e=>e.id).join(`
+`),a=i!==this._lastIds;this._lastIds=i;let o=!n&&(this._userChose||!a)?r.find(e=>e.id===this._activeId):null;o||(this._userChose=!1),this._setActive(o??r[0]??null,n)}_input(){return this.querySelector(`[role="combobox"]`)}_optionFrom(e,t=!1){let n=e?.closest?.(se);return n&&this.contains(n)&&!this._isHidden(n)&&(t||!this._isDisabled(n))?n:null}_isDisabled(e){return e.getAttribute(`aria-disabled`)===`true`}_isHidden(e){return e.hidden||!!e.closest(`[role="group"]`)?.hidden}_selectableOptions(){return[...this.querySelectorAll(se)].filter(e=>!this._isHidden(e)&&!this._isDisabled(e))}_setActive(e,t){this._activeId=e?e.id:null;for(let t of this.querySelectorAll(se))t.setAttribute(`aria-selected`,t===e?`true`:`false`);let n=this._input();n&&(e?n.setAttribute(`aria-activedescendant`,e.id):n.removeAttribute(`aria-activedescendant`)),e&&t&&e.scrollIntoView({block:`nearest`})}_move(e){let t=this._selectableOptions();if(!t.length)return;let n=t.findIndex(e=>e.id===this._activeId),r=n<0?e>0?0:t.length-1:(n+e+t.length)%t.length;this._userChose=!0,this._setActive(t[r],!0)}_handleKeyDown(e){if(e.target===this._input()){if(e.key===`ArrowDown`||e.key===`ArrowUp`)e.preventDefault(),this._move(e.key===`ArrowDown`?1:-1);else if(e.key===`Enter`&&!e.isComposing){let t=this._selectableOptions().find(e=>e.id===this._activeId);if(!t)return;e.preventDefault(),this._select(t)}}}_select(e){this.dispatchEvent(new CustomEvent(`wui-command-palette:select`,{bubbles:!0,cancelable:!0,detail:{key:e.dataset.key??null,groupKey:e.dataset.groupKey??null,id:e.id}}))&&e.dataset.href&&this._navigate(e.dataset.href)}_navigate(e){window.location.assign(e)}_applyFilter(){let e=this._input(),t=(e?e.value:``).trim(),n=t.toLowerCase(),r=this.highlight,i=0;for(let e of this.querySelectorAll(se)){let a=e.querySelector(`.wui-cmd-item-label`),o=e.dataset.label??a?.textContent??``,s=!n||o.toLowerCase().includes(n);e.hidden=!s,s&&i++,a&&(a.innerHTML=oe(o,r?t:``).map(e=>e.match?`<mark class="wui-cmd-mark">${b(e.text)}</mark>`:b(e.text)).join(``))}for(let e of this.querySelectorAll(`[role="group"]`))e.hidden=![...e.querySelectorAll(se)].some(e=>!e.hidden);let a=this.querySelector(`[role="listbox"]`);a&&(a.hidden=i===0);let o=this.querySelector(`.wui-cmd-empty`);o&&(o.textContent=n&&i===0?this.emptyText:``)}_teardown(){this.removeEventListener(`keydown`,this._onKeyDown),this.removeEventListener(`click`,this._onClick),this.removeEventListener(`mousedown`,this._onMouseDown),this.removeEventListener(`mousemove`,this._onMouseMove),this.removeEventListener(`input`,this._onInput)}},ue={"--color-primary":`#4F46E5`,"--color-primary-hover":`#4338CA`,"--color-text":`#071437`,"--color-text-muted":`#4B5675`,"--color-border":`#EBEDF3`,"--color-surface":`#FFFFFF`,"--wui-radius-lg":`14px`,"--wui-shadow-overlay-lg":`0 24px 60px -16px rgba(7, 20, 55, 0.28)`,"--wui-z-fixed":`1030`},C=e=>`var(${e}, ${ue[e]})`,de=`
 :host {
     all: initial;
     position: fixed;

package/dist/ui-elements.js

@@ -592,7 +592,7 @@ var E = "[role=\"option\"]", D = "No results", ee = class extends e {
 			let t = this._optionFrom(e.target);
 			t && this._select(t);
 		}, this._onMouseDown = (e) => {
-			this._optionFrom(e.target) && e.preventDefault();
+			this._optionFrom(e.target, !0) && e.preventDefault();
 		}, this._onMouseMove = (e) => {
 			let t = this._optionFrom(e.target);
 			t && t.id !== this._activeId && (this._userChose = !0, this._setActive(t, !1));
@@ -630,7 +630,7 @@ var E = "[role=\"option\"]", D = "No results", ee = class extends e {
 	refresh() {
 		let e = this._input(), t = e ? e.value : "", n = t !== this._lastQuery;
 		this._lastQuery = t;
-		let r = this._visibleOptions(), i = r.map((e) => e.id).join("\n"), a = i !== this._lastIds;
+		let r = this._selectableOptions(), i = r.map((e) => e.id).join("\n"), a = i !== this._lastIds;
 		this._lastIds = i;
 		let o = !n && (this._userChose || !a) ? r.find((e) => e.id === this._activeId) : null;
 		o || (this._userChose = !1), this._setActive(o ?? r[0] ?? null, n);
@@ -638,15 +638,18 @@ var E = "[role=\"option\"]", D = "No results", ee = class extends e {
 	_input() {
 		return this.querySelector("[role=\"combobox\"]");
 	}
-	_optionFrom(e) {
-		let t = e?.closest?.(E);
-		return t && this.contains(t) && !this._isHidden(t) ? t : null;
+	_optionFrom(e, t = !1) {
+		let n = e?.closest?.(E);
+		return n && this.contains(n) && !this._isHidden(n) && (t || !this._isDisabled(n)) ? n : null;
+	}
+	_isDisabled(e) {
+		return e.getAttribute("aria-disabled") === "true";
 	}
 	_isHidden(e) {
 		return e.hidden || !!e.closest("[role=\"group\"]")?.hidden;
 	}
-	_visibleOptions() {
-		return [...this.querySelectorAll(E)].filter((e) => !this._isHidden(e));
+	_selectableOptions() {
+		return [...this.querySelectorAll(E)].filter((e) => !this._isHidden(e) && !this._isDisabled(e));
 	}
 	_setActive(e, t) {
 		this._activeId = e ? e.id : null;
@@ -655,7 +658,7 @@ var E = "[role=\"option\"]", D = "No results", ee = class extends e {
 		n && (e ? n.setAttribute("aria-activedescendant", e.id) : n.removeAttribute("aria-activedescendant")), e && t && e.scrollIntoView({ block: "nearest" });
 	}
 	_move(e) {
-		let t = this._visibleOptions();
+		let t = this._selectableOptions();
 		if (!t.length) return;
 		let n = t.findIndex((e) => e.id === this._activeId), r = n < 0 ? e > 0 ? 0 : t.length - 1 : (n + e + t.length) % t.length;
 		this._userChose = !0, this._setActive(t[r], !0);
@@ -664,7 +667,7 @@ var E = "[role=\"option\"]", D = "No results", ee = class extends e {
 		if (e.target === this._input()) {
 			if (e.key === "ArrowDown" || e.key === "ArrowUp") e.preventDefault(), this._move(e.key === "ArrowDown" ? 1 : -1);
 			else if (e.key === "Enter" && !e.isComposing) {
-				let t = this._visibleOptions().find((e) => e.id === this._activeId);
+				let t = this._selectableOptions().find((e) => e.id === this._activeId);
 				if (!t) return;
 				e.preventDefault(), this._select(t);
 			}

package/package.json

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