@adia-ai/web-components 0.8.15 → 0.8.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -137,7 +137,7 @@ parent-template-re-read pattern that works across frameworks.`);return}if(this.d
137
137
  <icon-ui name="caret-down" slot="caret"></icon-ui>
138
138
  </span>
139
139
  ${o}
140
- `,this.hint&&this.setAttribute("aria-describedby",r);let a=this.querySelector("[data-clear-all]");a&&(a.removeEventListener("click",this.#y),a.addEventListener("click",this.#y)),this.searchable&&(this.#o&&(this.#o.removeEventListener("input",this.#T),this.#o.removeEventListener("focus",this.#h),this.#o.removeEventListener("click",this.#u)),this.#o=this.querySelector('input[slot="display"]'),this.#o&&(this.#o.addEventListener("input",this.#T),this.#o.addEventListener("focus",this.#h),this.#o.addEventListener("click",this.#u))),e&&this.appendChild(e)}this.#A(),this.multiple&&this.#M();let t=this.querySelector("[data-clear-all]");if(t&&(this.multiple&&this.clearable&&this.#f().length>0&&!this.disabled&&!this.readonly?t.removeAttribute("hidden"):t.setAttribute("hidden","")),this.#n||(this.#n=this.querySelector('[slot="listbox"]'),this.#n||(this.#n=document.createElement("div"),this.#n.setAttribute("slot","listbox"),this.#n.setAttribute("role","listbox"),this.#n.setAttribute("popover","manual"),this.appendChild(this.#n)),this.#$()),this.#n){let e=this.multiple?new Set(this.value.split(",").map(i=>i.trim()).filter(Boolean)):null;for(let i of this.#n.querySelectorAll('[role="option"]')){let n=i.getAttribute("data-value");(e?e.has(n):n===this.value)?i.setAttribute("aria-selected","true"):i.removeAttribute("aria-selected")}}if(this.setAttribute("aria-expanded",String(this.open)),this.open){this.#n?.showPopover?.();let e=this.querySelector('[slot="trigger"]')||this;this.#n.style.minWidth=`${e.getBoundingClientRect().width}px`,this.#n.style.width="max-content",this.#r=lt(e,this.#n,{placement:this.getAttribute("placement")||"bottom-start",gap:4,matchWidth:!1}),this.#l=requestAnimationFrame(()=>{this.#l=null,document.addEventListener("pointerdown",this.#R,{once:!0})})}else this.#r?.(),this.#r=null,this.#n?.hidePopover?.(),this.#l!=null&&(cancelAnimationFrame(this.#l),this.#l=null),document.removeEventListener("pointerdown",this.#R)}#v(){let t=[],e=i=>{for(let n of i.children)if(!n.hasAttribute("slot")){if(n.tagName==="OPTION"||n.tagName==="OPTGROUP"){t.push(n);continue}if(n.matches('[role="presentation"]')||n.style?.display==="contents"){e(n);continue}t.push(n)}};return e(this),t}#w(){this.#i=[];let t=new Set,e=[];for(let i of this.#v())if(i.tagName==="OPTGROUP"){let n={label:i.label||i.getAttribute("label")||"",options:[]};for(let r of i.querySelectorAll("option"))n.options.push({value:r.value,label:r.textContent.trim(),disabled:r.disabled,icon:r.getAttribute("icon")||"",avatar:r.getAttribute("avatar")||"",mark:r.hasAttribute("mark")}),r.hasAttribute("selected")&&e.push(r.value);this.#i.push(n)}else i.tagName==="OPTION"?(this.#i.push({value:i.value,label:i.textContent.trim(),disabled:i.disabled,icon:i.getAttribute("icon")||"",avatar:i.getAttribute("avatar")||"",mark:i.hasAttribute("mark")}),i.hasAttribute("selected")&&e.push(i.value)):i.hasAttribute("slot")||t.add(i.tagName.toLowerCase());for(let i of[...this.querySelectorAll("option, optgroup")])i.remove();!this.value&&e.length&&(this.value=this.multiple?e.join(","):e[0]),t.size>0&&!s.#t.has(this)&&(s.#t.add(this),console.warn(`<select-ui>: ignoring unrecognized child element(s) [${[...t].join(", ")}]. Consumer-authored children must be native <option> or <optgroup>, NOT <select-option> or other <*-ui> shapes. Or set element.options = [...] programmatically. (Once-per-element warn; see select.yaml usage: for details.)`))}set options(t){Mt(()=>{this.#i=t,this.#n||(this.#n=this.querySelector('[slot="listbox"]'),this.#n||(this.#n=document.createElement("div"),this.#n.setAttribute("slot","listbox"),this.#n.setAttribute("role","listbox"),this.#n.setAttribute("popover","manual"),this.appendChild(this.#n))),this.#$();let e=this.querySelector('[slot="display"]');e&&(e.textContent=this.#E()),this.#A()})}get options(){return this.#i}static#k(t){return t?t.mark?'<adia-mark-ui data-select-mark size="sm"></adia-mark-ui>':t.avatar?`<img data-option-avatar src="${Rt(t.avatar)}" alt="" />`:t.icon?`<icon-ui name="${Rt(t.icon)}"></icon-ui>`:"":""}#A(){if(this.multiple||!this.#s)return;let t=this.querySelector('[slot="trigger"]');if(!t)return;let i=this.#i.flatMap(u=>u.options||[u]).find(u=>!u.header&&!u.separator&&u.value===this.value),n=i&&i.mark||this.mark||!1,r=i&&i.avatar||this.avatar||"",o=i&&i.icon||this.icon||"",a=t.querySelector(":scope > [data-select-leading]"),l="";if(n?l='<adia-mark-ui slot="leading" data-select-leading size="sm"></adia-mark-ui>':r?l=`<img slot="leading" data-select-leading src="${Rt(r)}" alt="" />`:o&&(l=`<icon-ui slot="leading" data-select-leading name="${Rt(o)}"></icon-ui>`),!l){a?.remove();return}let h=document.createElement("template");h.innerHTML=l;let c=h.content.firstElementChild;a?a.tagName===c.tagName?c.tagName==="IMG"?a.getAttribute("src")!==c.getAttribute("src")&&a.setAttribute("src",c.getAttribute("src")):a.getAttribute("name")!==c.getAttribute("name")&&a.setAttribute("name",c.getAttribute("name")):a.replaceWith(c):t.insertBefore(c,t.firstChild)}#$(){if(!this.#n)return;if(this.#n.innerHTML="",this.multiple?this.#n.setAttribute("aria-multiselectable","true"):this.#n.removeAttribute("aria-multiselectable"),this.multiple&&this.selectAll){let e=document.createElement("div");e.setAttribute("data-select-all","");let i=document.createElement("button-ui");i.setAttribute("variant","ghost"),i.setAttribute("size","xs"),i.dataset.selectAllBtn="",i.setAttribute("text",this.#C()?"Clear":"Select all"),i.addEventListener("click",this.#O),e.appendChild(i),this.#n.appendChild(e)}let t=e=>{if(e.separator){let a=document.createElement("hr");return a.setAttribute("data-separator",""),a}let i=document.createElement("div");i.setAttribute("role","option"),i.setAttribute("data-value",e.value||"");let n=this.multiple?new Set(this.value.split(",").map(a=>a.trim()).filter(Boolean)):null,r=n?n.has(e.value):e.value===this.value,o=s.#k(e);if(this.multiple){i.setAttribute("data-multi-option","");let a=document.createElement("span");a.setAttribute("data-checkbox",""),a.innerHTML='<icon-ui name="check" aria-hidden="true"></icon-ui>',i.appendChild(a);let l=document.createElement("span");l.setAttribute("data-option-label",""),o?l.innerHTML=`${o}${Rt(e.label)}`:l.textContent=e.label,i.appendChild(l)}else o?i.innerHTML=`${o}${Rt(e.label)}`:i.textContent=e.label;return r&&i.setAttribute("aria-selected","true"),e.disabled&&i.setAttribute("aria-disabled","true"),e.action&&(i.dataset.action=e.action),i.__adiaOption=e,i.addEventListener("click",this.#d),i};for(let e of this.#i)if(e.separator)this.#n.appendChild(t(e));else if(e.header){let i=document.createElement("div");i.setAttribute("data-menu-header",""),i.innerHTML=e.avatar?`<img src="${e.avatar}" alt="" /><div><strong>${Rt(e.label)}</strong><span>${Rt(e.description||"")}</span></div>`:`<div><strong>${Rt(e.label)}</strong><span>${Rt(e.description||"")}</span></div>`,this.#n.appendChild(i)}else if(e.options){let i=document.createElement("div");i.setAttribute("role","group"),i.innerHTML=`<div slot="group-label">${Rt(e.label)}</div>`;for(let n of e.options)i.appendChild(t(n));this.#n.appendChild(i)}else this.#n.appendChild(t(e));if(this.#i.length===0){let e=document.createElement("div");e.setAttribute("data-empty",""),e.textContent="No options",this.#n.appendChild(e)}this.#a&&this.#I()}#C(){if(!this.multiple)return!1;let t=this.#i.flatMap(i=>i.options||[i]).filter(i=>!i.disabled&&!i.separator&&!i.header&&i.value!=null);if(t.length===0)return!1;let e=new Set(this.#f());return t.every(i=>e.has(String(i.value)))}#M(){let t=this.querySelector('[slot="trigger"] [data-chips]');if(!t)return;let e=this.#f(),i=Number(this.maxChips)||0,n=i>0&&e.length>i?e.slice(0,i):e,r=i>0&&e.length>i?e.length-i:0,o=this.#i.flatMap(l=>l.options||[l]).filter(l=>!l.separator&&!l.header&&l.value!=null),a=l=>{let h=o.find(c=>String(c.value)===String(l));return h?h.label:String(l)};for(;t.firstChild;)t.removeChild(t.firstChild);for(let l of n){let h=document.createElement("tag-ui");h.setAttribute("size","sm"),!this.disabled&&!this.readonly&&h.setAttribute("removable",""),h.dataset.chipValue=String(l),h.setAttribute("text",a(l)),t.appendChild(h)}if(r>0){let l=document.createElement("button-ui");l.setAttribute("variant","ghost"),l.setAttribute("size","xs"),l.dataset.more="",l.setAttribute("text",`+${r} more`),l.addEventListener("click",this.#b),t.appendChild(l)}}#E(){return this.multiple?this.value?"":this.placeholder:this.#i.flatMap(i=>i.options||[i]).find(i=>i.value===this.value||i.header&&i.label===this.value)?.label||this.value||this.placeholder}#P=t=>{this.disabled||this.#n&&t.composedPath().includes(this.#n)||(this.open=!this.open)};#R=t=>{!this.contains(t.target)&&!(this.#n&&t.composedPath().includes(this.#n))&&(this.open=!1)};#L=t=>{if(t.key==="Backspace"&&this.multiple&&!this.disabled&&!this.readonly){let e=t.target,i=e&&e.tagName==="INPUT"&&e.getAttribute("slot")==="display",n=!this.#a||this.#a.length===0;if((!i||n)&&this.#f().length>0){t.preventDefault(),this.#m();return}}if(t.key==="Escape"){if(this.searchable&&this.#a){this.#a="";let e=this.querySelector('input[slot="display"]');e&&(e.value=""),this.#I();return}this.open=!1;return}if(t.key==="Enter"){if(t.preventDefault(),this.open){let e=this.#n?.querySelector('[role="option"][data-focused]:not([data-filtered-out])');if(e)e.click(),this.multiple&&(this.open=!1);else if(this.searchable&&this.freeText&&this.#a){let i=this.#a;this.value=i,this.#a="",this.open=!1,this.syncValue?.(i),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:this.value}}))}else this.open=!1}else this.open=!0;return}if(t.key===" "&&!this.searchable){if(t.preventDefault(),this.open){let e=this.#n?.querySelector('[role="option"][data-focused]');e?e.click():this.multiple||(this.open=!1)}else this.open=!0;return}t.key==="ArrowDown"&&this.open&&(t.preventDefault(),this.#Q(1)),t.key==="ArrowUp"&&this.open&&(t.preventDefault(),this.#Q(-1))};#T=t=>{this.#a=t.target.value||"",this.open||(this.open=!0),this.#I()};#I(){if(!this.#n)return;let t=this.#a.toLowerCase(),e=this.#n.querySelectorAll('[role="option"]'),i=!1;for(let r of e){let o=(r.textContent||"").toLowerCase();!t||o.includes(t)?(r.removeAttribute("data-filtered-out"),r.style.display="",i=!0):(r.setAttribute("data-filtered-out",""),r.style.display="none")}for(let r of this.#n.querySelectorAll('[role="group"]')){let o=r.querySelectorAll('[role="option"]:not([data-filtered-out])').length;r.style.display=o?"":"none"}let n=this.#n.querySelector('[role="option"][data-focused]');n&&n.hasAttribute("data-filtered-out")&&n.removeAttribute("data-focused")}#Q(t){if(!this.#n)return;let e=[...this.#n.querySelectorAll('[role="option"]:not([aria-disabled]):not([data-filtered-out])')];if(!e.length)return;let i=this.#n.querySelector('[role="option"][data-focused]'),n=i?e.indexOf(i):-1,r=e[(n+t+e.length)%e.length];i&&i.removeAttribute("data-focused"),r&&(r.setAttribute("data-focused",""),r.scrollIntoView({block:"nearest"}))}disconnected(){super.disconnected(),this.removeEventListener("click",this.#P),this.removeEventListener("keydown",this.#L),this.removeEventListener("remove",this.#g),this.#c?.disconnect(),this.#l!=null&&(cancelAnimationFrame(this.#l),this.#l=null),document.removeEventListener("pointerdown",this.#R),this.#o&&(this.#o.removeEventListener("input",this.#T),this.#o.removeEventListener("focus",this.#h),this.#o.removeEventListener("click",this.#u),this.#o=null),this.#r?.(),this.#r=null,this.#n?.hidePopover?.(),this.#n=null}};x("select-ui",dn);P();var fn=class extends w{static properties={value:{type:String,default:"",reflect:!0},text:{type:String,default:"",reflect:!0},icon:{type:String,default:"",reflect:!0},disabled:{type:Boolean,default:!1,reflect:!0},selected:{type:Boolean,default:!1,reflect:!0}};static template=()=>null;connected(){this.setAttribute("role","radio"),this.getAttribute("tabindex")||this.setAttribute("tabindex","-1")}render(){if(this.text&&this.setAttribute("aria-label",this.text),this.setAttribute("aria-checked",this.selected?"true":"false"),this.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"),this.icon){let t=this.querySelector(":scope > icon-ui");if(!t||t.getAttribute("name")!==this.icon){t?.remove();let e=document.createElement("icon-ui");e.setAttribute("name",this.icon),e.setAttribute("aria-hidden","true"),this.prepend(e)}}else this.querySelector(":scope > icon-ui")?.remove()}};x("segment-ui",fn);var pn=class s extends Z{static properties={...Z.properties,value:{type:String,default:"",reflect:!0}};static template=()=>null;static#t=new WeakSet;#e=null;#i=!1;#s=null;#n=null;#r=null;connected(){if(super.connected(),this.setAttribute("role","radiogroup"),this.#i||(this.#i=!0,this.addEventListener("click",this.#h),this.addEventListener("keydown",this.#u)),!this.value){let t=this.querySelector("segment-ui:not([disabled])");t&&(this.value=t.value||t.getAttribute("value")||"")}typeof ResizeObserver<"u"&&(this.#n=new ResizeObserver(()=>this.#l(this.#a)),this.#n.observe(this)),document.fonts?.ready&&(this.#r=document.fonts.ready.then(()=>{this.#r=null,this.#l(this.#a)}))}disconnected(){super.disconnected(),this.#s!=null&&(cancelAnimationFrame(this.#s),this.#s=null),this.#n?.disconnect(),this.#n=null,this.#r&&(this.#r=null),this.removeEventListener("click",this.#h),this.removeEventListener("keydown",this.#u),this.#e=null,this.#i=!1}get#a(){return[...this.querySelectorAll("segment-ui")]}get#o(){return this.#a.filter(t=>!t.disabled)}render(){if(!s.#t.has(this)){let e=[...this.children].find(i=>i.tagName!=="SEGMENT-UI"&&!i.hasAttribute("data-indicator")&&!(i.tagName==="SPAN"&&i.style.display==="contents"));e&&(s.#t.add(this),console.warn(`[segmented-ui] child <${e.tagName.toLowerCase()}> is not <segment-ui> \u2014 bare <segment> tags render text but receive no sliding indicator or aria-checked state. Use <segment-ui>.`))}let t=this.#a;if(t.length){for(let e of t){let n=(e.value||e.getAttribute("value")||"")===this.value;n?e.setAttribute("selected",""):e.removeAttribute("selected"),e.setAttribute("tabindex",n?"0":"-1")}this.label&&this.setAttribute("aria-label",this.label),this.#l(t)}}#l(t){let e=t.findIndex(n=>(n.value||n.getAttribute("value")||"")===this.value);if(e<0){this.removeAttribute("data-indicator-ready");return}let i=!this.#e||!this.contains(this.#e);if(i){for(let n of this.querySelectorAll(":scope > [data-indicator]"))n.remove();this.#e=document.createElement("span"),this.#e.setAttribute("data-indicator",""),this.prepend(this.#e)}this.style.setProperty("--_segment-count",`${t.length}`),i?(this.#e.style.transition="none",this.#e.style.transform=`translateX(${e*100}%)`,this.setAttribute("data-indicator-ready",""),this.#s=requestAnimationFrame(()=>{this.#s=null,this.#e&&(this.#e.style.transition="")})):(this.#e.style.transform=`translateX(${e*100}%)`,this.setAttribute("data-indicator-ready",""))}#c(t){t.disabled||(this.value=t.value,this.syncValue(),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:this.value}})))}#h=t=>{let e=t.target.closest("segment-ui");e&&this.contains(e)&&this.#c(e)};#u=t=>{let e=t.target;if(e.tagName!=="SEGMENT-UI")return;let i=this.#o,n=i.indexOf(e);if(n<0)return;let r;switch(t.key){case"ArrowRight":case"ArrowDown":r=n<i.length-1?n+1:0;break;case"ArrowLeft":case"ArrowUp":r=n>0?n-1:i.length-1;break;case"Home":r=0;break;case"End":r=i.length-1;break;default:return}t.preventDefault(),i[r].focus(),this.#c(i[r])}};x("segmented-ui",pn);var mn=class extends Z{static labelDeprecated=!1;static properties={...Z.properties,value:{type:Number,default:0,reflect:!0},min:{type:Number,default:0,reflect:!0},max:{type:Number,default:100,reflect:!0},step:{type:Number,default:1,reflect:!0},label:{type:String,default:"",reflect:!0},suffix:{type:String,default:"",reflect:!0}};static template=()=>null;#t=null;#e=null;#i=!1;#s=0;#n=0;connected(){if(super.connected(),this.setAttribute("role","spinbutton"),this.setAttribute("tabindex","0"),!this.querySelector('[slot="field"]')){let t=`
140
+ `,this.hint&&this.setAttribute("aria-describedby",r);let a=this.querySelector("[data-clear-all]");a&&(a.removeEventListener("click",this.#y),a.addEventListener("click",this.#y)),this.searchable&&(this.#o&&(this.#o.removeEventListener("input",this.#T),this.#o.removeEventListener("focus",this.#h),this.#o.removeEventListener("click",this.#u)),this.#o=this.querySelector('input[slot="display"]'),this.#o&&(this.#o.addEventListener("input",this.#T),this.#o.addEventListener("focus",this.#h),this.#o.addEventListener("click",this.#u))),e&&this.appendChild(e)}this.#A(),this.multiple&&this.#M();let t=this.querySelector("[data-clear-all]");if(t&&(this.multiple&&this.clearable&&this.#f().length>0&&!this.disabled&&!this.readonly?t.removeAttribute("hidden"):t.setAttribute("hidden","")),this.#n||(this.#n=this.querySelector('[slot="listbox"]'),this.#n||(this.#n=document.createElement("div"),this.#n.setAttribute("slot","listbox"),this.#n.setAttribute("role","listbox"),this.#n.setAttribute("popover","manual"),this.appendChild(this.#n)),this.#$()),this.#n){let e=this.multiple?new Set(this.value.split(",").map(i=>i.trim()).filter(Boolean)):null;for(let i of this.#n.querySelectorAll('[role="option"]')){let n=i.getAttribute("data-value");(e?e.has(n):n===this.value)?i.setAttribute("aria-selected","true"):i.removeAttribute("aria-selected")}}if(this.setAttribute("aria-expanded",String(this.open)),this.open){this.#n?.showPopover?.();let e=this.querySelector('[slot="trigger"]')||this;this.#n.style.minWidth=`${e.getBoundingClientRect().width}px`,this.#n.style.width="max-content",this.#r=lt(e,this.#n,{placement:this.getAttribute("placement")||"bottom-start",gap:4,matchWidth:!1}),this.#l=requestAnimationFrame(()=>{this.#l=null,document.addEventListener("pointerdown",this.#R,{once:!0})})}else this.#r?.(),this.#r=null,this.#n?.hidePopover?.(),this.#l!=null&&(cancelAnimationFrame(this.#l),this.#l=null),document.removeEventListener("pointerdown",this.#R)}#v(){let t=[],e=i=>{for(let n of i.children)if(!n.hasAttribute("slot")){if(n.tagName==="OPTION"||n.tagName==="OPTGROUP"){t.push(n);continue}if(n.matches('[role="presentation"]')||n.style?.display==="contents"){e(n);continue}t.push(n)}};return e(this),t}#w(){this.#i=[];let t=new Set,e=[];for(let i of this.#v())if(i.tagName==="OPTGROUP"){let n={label:i.label||i.getAttribute("label")||"",options:[]};for(let r of i.querySelectorAll("option"))n.options.push({value:r.value,label:r.textContent.trim(),disabled:r.disabled,icon:r.getAttribute("icon")||"",avatar:r.getAttribute("avatar")||"",mark:r.hasAttribute("mark")}),r.hasAttribute("selected")&&e.push(r.value);this.#i.push(n)}else i.tagName==="OPTION"?(this.#i.push({value:i.value,label:i.textContent.trim(),disabled:i.disabled,icon:i.getAttribute("icon")||"",avatar:i.getAttribute("avatar")||"",mark:i.hasAttribute("mark")}),i.hasAttribute("selected")&&e.push(i.value)):i.hasAttribute("slot")||t.add(i.tagName.toLowerCase());for(let i of[...this.querySelectorAll("option, optgroup")])i.remove();!this.value&&e.length&&(this.value=this.multiple?e.join(","):e[0]),t.size>0&&!s.#t.has(this)&&(s.#t.add(this),console.warn(`<select-ui>: ignoring unrecognized child element(s) [${[...t].join(", ")}]. Consumer-authored children must be native <option> or <optgroup>, NOT <select-option> or other <*-ui> shapes. Or set element.options = [...] programmatically. (Once-per-element warn; see select.yaml usage: for details.)`))}set options(t){Mt(()=>{this.#i=t,this.#n||(this.#n=this.querySelector('[slot="listbox"]'),this.#n||(this.#n=document.createElement("div"),this.#n.setAttribute("slot","listbox"),this.#n.setAttribute("role","listbox"),this.#n.setAttribute("popover","manual"),this.appendChild(this.#n))),this.#$();let e=this.querySelector('[slot="display"]');e&&(e.textContent=this.#E()),this.#A()})}get options(){return this.#i}static#k(t){return t?t.mark?'<adia-mark-ui data-select-mark size="sm"></adia-mark-ui>':t.avatar?`<img data-option-avatar src="${Rt(t.avatar)}" alt="" />`:t.icon?`<icon-ui name="${Rt(t.icon)}"></icon-ui>`:"":""}#A(){if(this.multiple||!this.#s)return;let t=this.querySelector('[slot="trigger"]');if(!t)return;let i=this.#i.flatMap(u=>u.options||[u]).find(u=>!u.header&&!u.separator&&u.value===this.value),n=i&&i.mark||this.mark||!1,r=i&&i.avatar||this.avatar||"",o=i&&i.icon||this.icon||"",a=t.querySelector(":scope > [data-select-leading]"),l="";if(n?l='<adia-mark-ui slot="leading" data-select-leading size="sm"></adia-mark-ui>':r?l=`<img slot="leading" data-select-leading src="${Rt(r)}" alt="" />`:o&&(l=`<icon-ui slot="leading" data-select-leading name="${Rt(o)}"></icon-ui>`),!l){a?.remove();return}let h=document.createElement("template");h.innerHTML=l;let c=h.content.firstElementChild;a?a.tagName===c.tagName?c.tagName==="IMG"?a.getAttribute("src")!==c.getAttribute("src")&&a.setAttribute("src",c.getAttribute("src")):a.getAttribute("name")!==c.getAttribute("name")&&a.setAttribute("name",c.getAttribute("name")):a.replaceWith(c):t.insertBefore(c,t.firstChild)}#$(){if(!this.#n)return;if(this.#n.innerHTML="",this.multiple?this.#n.setAttribute("aria-multiselectable","true"):this.#n.removeAttribute("aria-multiselectable"),this.multiple&&this.selectAll){let e=document.createElement("div");e.setAttribute("data-select-all","");let i=document.createElement("button-ui");i.setAttribute("variant","ghost"),i.setAttribute("size","xs"),i.dataset.selectAllBtn="",i.setAttribute("text",this.#C()?"Clear":"Select all"),i.addEventListener("click",this.#O),e.appendChild(i),this.#n.appendChild(e)}let t=e=>{if(e.separator){let a=document.createElement("hr");return a.setAttribute("data-separator",""),a}let i=document.createElement("div");i.setAttribute("role","option"),i.setAttribute("data-value",e.value||"");let n=this.multiple?new Set(this.value.split(",").map(a=>a.trim()).filter(Boolean)):null,r=n?n.has(e.value):e.value===this.value,o=s.#k(e);if(this.multiple){i.setAttribute("data-multi-option","");let a=document.createElement("span");a.setAttribute("data-checkbox",""),a.innerHTML='<icon-ui name="check" aria-hidden="true"></icon-ui>',i.appendChild(a);let l=document.createElement("span");l.setAttribute("data-option-label",""),o?l.innerHTML=`${o}${Rt(e.label)}`:l.textContent=e.label,i.appendChild(l)}else{i.setAttribute("data-single-option","");let a=document.createElement("span");a.setAttribute("data-radio",""),a.setAttribute("aria-hidden","true"),i.appendChild(a);let l=document.createElement("span");l.setAttribute("data-option-label",""),o?l.innerHTML=`${o}${Rt(e.label)}`:l.textContent=e.label,i.appendChild(l)}return r&&i.setAttribute("aria-selected","true"),e.disabled&&i.setAttribute("aria-disabled","true"),e.action&&(i.dataset.action=e.action),i.__adiaOption=e,i.addEventListener("click",this.#d),i};for(let e of this.#i)if(e.separator)this.#n.appendChild(t(e));else if(e.header){let i=document.createElement("div");i.setAttribute("data-menu-header",""),i.innerHTML=e.avatar?`<img src="${e.avatar}" alt="" /><div><strong>${Rt(e.label)}</strong><span>${Rt(e.description||"")}</span></div>`:`<div><strong>${Rt(e.label)}</strong><span>${Rt(e.description||"")}</span></div>`,this.#n.appendChild(i)}else if(e.options){let i=document.createElement("div");i.setAttribute("role","group"),i.innerHTML=`<div slot="group-label">${Rt(e.label)}</div>`;for(let n of e.options)i.appendChild(t(n));this.#n.appendChild(i)}else this.#n.appendChild(t(e));if(this.#i.length===0){let e=document.createElement("div");e.setAttribute("data-empty",""),e.textContent="No options",this.#n.appendChild(e)}this.#a&&this.#I()}#C(){if(!this.multiple)return!1;let t=this.#i.flatMap(i=>i.options||[i]).filter(i=>!i.disabled&&!i.separator&&!i.header&&i.value!=null);if(t.length===0)return!1;let e=new Set(this.#f());return t.every(i=>e.has(String(i.value)))}#M(){let t=this.querySelector('[slot="trigger"] [data-chips]');if(!t)return;let e=this.#f(),i=Number(this.maxChips)||0,n=i>0&&e.length>i?e.slice(0,i):e,r=i>0&&e.length>i?e.length-i:0,o=this.#i.flatMap(l=>l.options||[l]).filter(l=>!l.separator&&!l.header&&l.value!=null),a=l=>{let h=o.find(c=>String(c.value)===String(l));return h?h.label:String(l)};for(;t.firstChild;)t.removeChild(t.firstChild);for(let l of n){let h=document.createElement("tag-ui");h.setAttribute("size","sm"),!this.disabled&&!this.readonly&&h.setAttribute("removable",""),h.dataset.chipValue=String(l),h.setAttribute("text",a(l)),t.appendChild(h)}if(r>0){let l=document.createElement("button-ui");l.setAttribute("variant","ghost"),l.setAttribute("size","xs"),l.dataset.more="",l.setAttribute("text",`+${r} more`),l.addEventListener("click",this.#b),t.appendChild(l)}}#E(){return this.multiple?this.value?"":this.placeholder:this.#i.flatMap(i=>i.options||[i]).find(i=>i.value===this.value||i.header&&i.label===this.value)?.label||this.value||this.placeholder}#P=t=>{this.disabled||this.#n&&t.composedPath().includes(this.#n)||(this.open=!this.open)};#R=t=>{!this.contains(t.target)&&!(this.#n&&t.composedPath().includes(this.#n))&&(this.open=!1)};#L=t=>{if(t.key==="Backspace"&&this.multiple&&!this.disabled&&!this.readonly){let e=t.target,i=e&&e.tagName==="INPUT"&&e.getAttribute("slot")==="display",n=!this.#a||this.#a.length===0;if((!i||n)&&this.#f().length>0){t.preventDefault(),this.#m();return}}if(t.key==="Escape"){if(this.searchable&&this.#a){this.#a="";let e=this.querySelector('input[slot="display"]');e&&(e.value=""),this.#I();return}this.open=!1;return}if(t.key==="Enter"){if(t.preventDefault(),this.open){let e=this.#n?.querySelector('[role="option"][data-focused]:not([data-filtered-out])');if(e)e.click(),this.multiple&&(this.open=!1);else if(this.searchable&&this.freeText&&this.#a){let i=this.#a;this.value=i,this.#a="",this.open=!1,this.syncValue?.(i),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:this.value}}))}else this.open=!1}else this.open=!0;return}if(t.key===" "&&!this.searchable){if(t.preventDefault(),this.open){let e=this.#n?.querySelector('[role="option"][data-focused]');e?e.click():this.multiple||(this.open=!1)}else this.open=!0;return}t.key==="ArrowDown"&&this.open&&(t.preventDefault(),this.#Q(1)),t.key==="ArrowUp"&&this.open&&(t.preventDefault(),this.#Q(-1))};#T=t=>{this.#a=t.target.value||"",this.open||(this.open=!0),this.#I()};#I(){if(!this.#n)return;let t=this.#a.toLowerCase(),e=this.#n.querySelectorAll('[role="option"]'),i=!1;for(let r of e){let o=(r.textContent||"").toLowerCase();!t||o.includes(t)?(r.removeAttribute("data-filtered-out"),r.style.display="",i=!0):(r.setAttribute("data-filtered-out",""),r.style.display="none")}for(let r of this.#n.querySelectorAll('[role="group"]')){let o=r.querySelectorAll('[role="option"]:not([data-filtered-out])').length;r.style.display=o?"":"none"}let n=this.#n.querySelector('[role="option"][data-focused]');n&&n.hasAttribute("data-filtered-out")&&n.removeAttribute("data-focused")}#Q(t){if(!this.#n)return;let e=[...this.#n.querySelectorAll('[role="option"]:not([aria-disabled]):not([data-filtered-out])')];if(!e.length)return;let i=this.#n.querySelector('[role="option"][data-focused]'),n=i?e.indexOf(i):-1,r=e[(n+t+e.length)%e.length];i&&i.removeAttribute("data-focused"),r&&(r.setAttribute("data-focused",""),r.scrollIntoView({block:"nearest"}))}disconnected(){super.disconnected(),this.removeEventListener("click",this.#P),this.removeEventListener("keydown",this.#L),this.removeEventListener("remove",this.#g),this.#c?.disconnect(),this.#l!=null&&(cancelAnimationFrame(this.#l),this.#l=null),document.removeEventListener("pointerdown",this.#R),this.#o&&(this.#o.removeEventListener("input",this.#T),this.#o.removeEventListener("focus",this.#h),this.#o.removeEventListener("click",this.#u),this.#o=null),this.#r?.(),this.#r=null,this.#n?.hidePopover?.(),this.#n=null}};x("select-ui",dn);P();var fn=class extends w{static properties={value:{type:String,default:"",reflect:!0},text:{type:String,default:"",reflect:!0},icon:{type:String,default:"",reflect:!0},disabled:{type:Boolean,default:!1,reflect:!0},selected:{type:Boolean,default:!1,reflect:!0}};static template=()=>null;connected(){this.setAttribute("role","radio"),this.getAttribute("tabindex")||this.setAttribute("tabindex","-1")}render(){if(this.text&&this.setAttribute("aria-label",this.text),this.setAttribute("aria-checked",this.selected?"true":"false"),this.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"),this.icon){let t=this.querySelector(":scope > icon-ui");if(!t||t.getAttribute("name")!==this.icon){t?.remove();let e=document.createElement("icon-ui");e.setAttribute("name",this.icon),e.setAttribute("aria-hidden","true"),this.prepend(e)}}else this.querySelector(":scope > icon-ui")?.remove()}};x("segment-ui",fn);var pn=class s extends Z{static properties={...Z.properties,value:{type:String,default:"",reflect:!0}};static template=()=>null;static#t=new WeakSet;#e=null;#i=!1;#s=null;#n=null;#r=null;connected(){if(super.connected(),this.setAttribute("role","radiogroup"),this.#i||(this.#i=!0,this.addEventListener("click",this.#h),this.addEventListener("keydown",this.#u)),!this.value){let t=this.querySelector("segment-ui:not([disabled])");t&&(this.value=t.value||t.getAttribute("value")||"")}typeof ResizeObserver<"u"&&(this.#n=new ResizeObserver(()=>this.#l(this.#a)),this.#n.observe(this)),document.fonts?.ready&&(this.#r=document.fonts.ready.then(()=>{this.#r=null,this.#l(this.#a)}))}disconnected(){super.disconnected(),this.#s!=null&&(cancelAnimationFrame(this.#s),this.#s=null),this.#n?.disconnect(),this.#n=null,this.#r&&(this.#r=null),this.removeEventListener("click",this.#h),this.removeEventListener("keydown",this.#u),this.#e=null,this.#i=!1}get#a(){return[...this.querySelectorAll("segment-ui")]}get#o(){return this.#a.filter(t=>!t.disabled)}render(){if(!s.#t.has(this)){let e=[...this.children].find(i=>i.tagName!=="SEGMENT-UI"&&!i.hasAttribute("data-indicator")&&!(i.tagName==="SPAN"&&i.style.display==="contents"));e&&(s.#t.add(this),console.warn(`[segmented-ui] child <${e.tagName.toLowerCase()}> is not <segment-ui> \u2014 bare <segment> tags render text but receive no sliding indicator or aria-checked state. Use <segment-ui>.`))}let t=this.#a;if(t.length){for(let e of t){let n=(e.value||e.getAttribute("value")||"")===this.value;n?e.setAttribute("selected",""):e.removeAttribute("selected"),e.setAttribute("tabindex",n?"0":"-1")}this.label&&this.setAttribute("aria-label",this.label),this.#l(t)}}#l(t){let e=t.findIndex(n=>(n.value||n.getAttribute("value")||"")===this.value);if(e<0){this.removeAttribute("data-indicator-ready");return}let i=!this.#e||!this.contains(this.#e);if(i){for(let n of this.querySelectorAll(":scope > [data-indicator]"))n.remove();this.#e=document.createElement("span"),this.#e.setAttribute("data-indicator",""),this.prepend(this.#e)}this.style.setProperty("--_segment-count",`${t.length}`),i?(this.#e.style.transition="none",this.#e.style.transform=`translateX(${e*100}%)`,this.setAttribute("data-indicator-ready",""),this.#s=requestAnimationFrame(()=>{this.#s=null,this.#e&&(this.#e.style.transition="")})):(this.#e.style.transform=`translateX(${e*100}%)`,this.setAttribute("data-indicator-ready",""))}#c(t){t.disabled||(this.value=t.value,this.syncValue(),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:this.value}})))}#h=t=>{let e=t.target.closest("segment-ui");e&&this.contains(e)&&this.#c(e)};#u=t=>{let e=t.target;if(e.tagName!=="SEGMENT-UI")return;let i=this.#o,n=i.indexOf(e);if(n<0)return;let r;switch(t.key){case"ArrowRight":case"ArrowDown":r=n<i.length-1?n+1:0;break;case"ArrowLeft":case"ArrowUp":r=n>0?n-1:i.length-1;break;case"Home":r=0;break;case"End":r=i.length-1;break;default:return}t.preventDefault(),i[r].focus(),this.#c(i[r])}};x("segmented-ui",pn);var mn=class extends Z{static labelDeprecated=!1;static properties={...Z.properties,value:{type:Number,default:0,reflect:!0},min:{type:Number,default:0,reflect:!0},max:{type:Number,default:100,reflect:!0},step:{type:Number,default:1,reflect:!0},label:{type:String,default:"",reflect:!0},suffix:{type:String,default:"",reflect:!0}};static template=()=>null;#t=null;#e=null;#i=!1;#s=0;#n=0;connected(){if(super.connected(),this.setAttribute("role","spinbutton"),this.setAttribute("tabindex","0"),!this.querySelector('[slot="field"]')){let t=`
141
141
  <span slot="label">${this.label}</span>
142
142
  <span slot="value">${this.#r(this.value)}</span>
143
143
  ${this.suffix?`<span slot="suffix">${this.suffix}</span>`:""}