@cas-smartdesign/token-selector 0.17.0 → 0.17.2

package/dist/docs/doc.mjs

@@ -549,7 +549,7 @@ export function getItems(): ExtendedTokenData[] {
   <path d="M0 0l11.96 12L24 0z" fill="#999" class="arrow-border"/>\r
   <path d="M12 11L1 0h22z" fill="#f2f2f2" class="arrow-background"/>\r
 </svg>\r
-`,Al=navigator.userAgent.indexOf("Trident")!==-1,ps=1,fs="sd-popover-open",sr=class extends HTMLElement{constructor(){super(...arguments),this._open=!1,this._firstUpdated=!1,this.toggle=()=>{this.open=!this.open},this.show=()=>{this.open=!0},this.hide=()=>{this.open=!1},this.hideIfExternalTarget=e=>{const t=e.target;(!(t instanceof HTMLElement)||!this._container.contains(t)&&!this.targetElement.contains(t))&&this.hide()}}get triggerType(){return this.getAttribute("trigger-type")}set triggerType(e){e?this.setAttribute("trigger-type",e):this.removeAttribute("trigger-type")}get placement(){return this.getAttribute("placement")}set placement(e){e?this.setAttribute("placement",e):this.removeAttribute("placement")}get targetElement(){return this._targetElement}set targetElement(e){this.removeTargetEventListener(this.targetElement),this._targetElement&&this._targetElement.getAttribute("aria-expanded")=="true"&&this._targetElement.setAttribute("aria-expanded","false"),this._targetElement=e,e.setAttribute("aria-expanded","false"),this.addTargetEventListener(this.targetElement),this.updatePopper()}get targetSelector(){return this.getAttribute("target-selector")}set targetSelector(e){e?this.setAttribute("target-selector",e):this.removeAttribute("target-selector")}get modal(){return this.hasAttribute("modal")}set modal(e){e?this.setAttribute("modal",""):this.removeAttribute("modal")}get popoverFor(){return this.getAttribute("popover-for")}set popoverFor(e){e?this.setAttribute("popover-for",e):this.removeAttribute("popover-for")}get flipPriority(){return this._flipPriority}set flipPriority(e){e&&e.length>0?this._flipPriority=e:this._flipPriority=null,this.reConfigurePopper()}get offset(){return this.getAttribute("offset")?parseInt(this.getAttribute("offset")):0}set offset(e){e?this.setAttribute("offset",e.toString()):this.removeAttribute("offset"),this.reConfigurePopper()}reConfigurePopper(){this._popper&&this.configurePopper()}get noArrow(){return this.hasAttribute("no-arrow")}set noArrow(e){e?this.setAttribute("no-arrow",""):this.removeAttribute("no-arrow")}static get observedAttributes(){return["placement","target-selector","trigger-type"]}attributeChangedCallback(e,t){switch(e){case"placement":{this.updatePopper();break}case"trigger-type":{this.removeTargetEventListener(this.targetElement),this.addTargetEventListener(this.targetElement);break}case"target-selector":{this.handleTargetSelectorChange(t);break}}}connectedCallback(){this._firstUpdated||(this.firstUpdated(),this._firstUpdated=!0),this.targetElement?this.addTargetEventListener(this.targetElement):this.targetSelector&&requestAnimationFrame(()=>{this.isConnected&&this.handleTargetSelectorChange(null)}),this._arrow=document.createElement("div"),this._arrow.classList.add("popover-arrow"),this._arrow.setAttribute("data-popper-arrow",""),this._arrow.style.display="flex",this._arrow.innerHTML=_l}disconnectedCallback(){this.targetElement&&(this.removeTargetEventListener(this.targetElement),this.removeTargetClassForOpen(this.targetElement)),this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null)}firstUpdated(){this.style.display="none",this.triggerType=this.triggerType||"click",this.placement=this.placement||"auto"}get open(){return this._open}set open(e){e!==this._open&&(this._open=e,this.handleOpenChange())}handleOpenChange(){this.open?(this._popper||this.configurePopper(),this._container.innerHTML="",this.popoverFor&&this._container.setAttribute("popover-for",this.popoverFor),this.content&&(this._container.prepend(this.content),Object.assign(this.content.style,{position:"relative",display:"block",zIndex:1}),window.requestAnimationFrame(()=>{let e=getComputedStyle(this.content).backgroundColor;e=="rgba(0, 0, 0, 0)"&&(this.content.style.background=e="#f2f2f2"),this._arrow.querySelector(".arrow-background").style.fill=e})),this.ensureArrowIsAdded(),this.ownerDocument.body.appendChild(this._container),this.updatePopper(),this.setAttribute("open",""),this.modal&&(window.addEventListener("click",this.hideIfExternalTarget,{capture:!0}),window.addEventListener("focus",this.hideIfExternalTarget,{capture:!0})),this.targetElement&&(this.addTargetClassForOpen(this.targetElement),this.targetElement.setAttribute("aria-expanded","true")),this.dispatchEvent(new CustomEvent("open"))):(this.ownerDocument.body.removeChild(this._container),this.removeAttribute("open"),window.removeEventListener("click",this.hideIfExternalTarget,{capture:!0}),window.removeEventListener("focus",this.hideIfExternalTarget,{capture:!0}),this.targetElement&&(this.removeTargetClassForOpen(this.targetElement),this.targetElement.setAttribute("aria-expanded","false")),this.dispatchEvent(new CustomEvent("close")))}handleTargetSelectorChange(e){const t=document.querySelector(e);t&&(this.removeTargetEventListener(t),this.removeTargetClassForOpen(t)),this.targetSelector&&(this.targetElement=document.querySelector(this.targetSelector),this.addTargetEventListener(this.targetElement))}addTargetEventListener(e){if(e)switch(this.triggerType){case"hover":{e.addEventListener("mouseenter",this.show),e.addEventListener("mouseleave",this.hide);break}case"click":{e.addEventListener("click",this.toggle);break}}}removeTargetEventListener(e){if(e)switch(this.triggerType){case"hover":{e.removeEventListener("mouseenter",this.show),e.removeEventListener("mouseleave",this.hide);break}case"click":{e.removeEventListener("click",this.toggle);break}}}configurePopper(){this.createContentContainer(),this.ensureArrowIsAdded();const e=this,t={placement:e.placement,strategy:"absolute",modifiers:[{name:"computeStyles",options:{gpuAcceleration:!Al}},{name:"flip",options:{fallbackPlacements:e._flipPriority}},{name:"offset",options:{offset:()=>[0,e.noArrow?0+e.offset:this._arrow.clientHeight+e.offset]}},{name:"arrow",options:{padding:6}},{name:"resetArrowStyles",enabled:!0,phase:"beforeWrite",fn({state:n}){Object.assign(e._arrow.style,{top:n.styles.arrow.top||"",left:n.styles.arrow.left||"",bottom:n.styles.arrow.bottom||"",right:n.styles.arrow.right||""})}},{name:"onUpdate",enabled:!0,phase:"afterWrite",fn({state:n}){e.updateArrow(n.placement)}}]};this._popper=Sl(this.targetElement,this._container,t)}createContentContainer(){this._container=document.createElement("div"),this._container.classList.add("popover-container"),this._container.tabIndex=0,this._resizeObserver&&this._resizeObserver.disconnect(),this._resizeObserver=new ResizeObserver(()=>{this._popper&&this._popper.update()}),this._resizeObserver.observe(this._container),Object.assign(this._container.style,{boxShadow:`0 4px 5px 0 rgba(0, 0, 0, 0.14),
+`,Al=navigator.userAgent.indexOf("Trident")!==-1,ps=1,fs="sd-popover-open",sr=class extends HTMLElement{constructor(){super(...arguments),this._open=!1,this._firstUpdated=!1,this.toggle=()=>{this.open=!this.open},this.show=()=>{this.open=!0},this.hide=()=>{this.open=!1},this.hideIfExternalTarget=e=>{const t=e.target;(!(t instanceof HTMLElement)||!this._container.contains(t)&&!this.targetElement.contains(t))&&this.hide()}}get triggerType(){return this.getAttribute("trigger-type")}set triggerType(e){e?this.setAttribute("trigger-type",e):this.removeAttribute("trigger-type")}get placement(){return this.getAttribute("placement")}set placement(e){e?this.setAttribute("placement",e):this.removeAttribute("placement")}get targetElement(){return this._targetElement}set targetElement(e){this.removeTargetEventListener(this.targetElement),this._targetElement&&this._targetElement.getAttribute("aria-expanded")=="true"&&this._targetElement.setAttribute("aria-expanded","false"),this._targetElement=e,e&&e.setAttribute("aria-expanded","false"),this.addTargetEventListener(this.targetElement),this.updatePopper()}get targetSelector(){return this.getAttribute("target-selector")}set targetSelector(e){e?this.setAttribute("target-selector",e):this.removeAttribute("target-selector")}get modal(){return this.hasAttribute("modal")}set modal(e){e?this.setAttribute("modal",""):this.removeAttribute("modal")}get popoverFor(){return this.getAttribute("popover-for")}set popoverFor(e){e?this.setAttribute("popover-for",e):this.removeAttribute("popover-for")}get flipPriority(){return this._flipPriority}set flipPriority(e){e&&e.length>0?this._flipPriority=e:this._flipPriority=null,this.reConfigurePopper()}get offset(){return this.getAttribute("offset")?parseInt(this.getAttribute("offset")):0}set offset(e){e?this.setAttribute("offset",e.toString()):this.removeAttribute("offset"),this.reConfigurePopper()}reConfigurePopper(){this._popper&&this.configurePopper()}get noArrow(){return this.hasAttribute("no-arrow")}set noArrow(e){e?this.setAttribute("no-arrow",""):this.removeAttribute("no-arrow")}static get observedAttributes(){return["placement","target-selector","trigger-type"]}attributeChangedCallback(e,t){switch(e){case"placement":{this.updatePopper();break}case"trigger-type":{this.removeTargetEventListener(this.targetElement),this.addTargetEventListener(this.targetElement);break}case"target-selector":{this.handleTargetSelectorChange(t);break}}}connectedCallback(){this._firstUpdated||(this.firstUpdated(),this._firstUpdated=!0),this.targetElement?this.addTargetEventListener(this.targetElement):this.targetSelector&&requestAnimationFrame(()=>{this.isConnected&&this.handleTargetSelectorChange(null)}),this._arrow=document.createElement("div"),this._arrow.classList.add("popover-arrow"),this._arrow.setAttribute("data-popper-arrow",""),this._arrow.style.display="flex",this._arrow.innerHTML=_l}disconnectedCallback(){this.targetElement&&(this.removeTargetEventListener(this.targetElement),this.removeTargetClassForOpen(this.targetElement)),this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null)}firstUpdated(){this.style.display="none",this.triggerType=this.triggerType||"click",this.placement=this.placement||"auto"}get open(){return this._open}set open(e){e!==this._open&&(this._open=e,this.handleOpenChange())}handleOpenChange(){this.open?(this._popper||this.configurePopper(),this._container.innerHTML="",this.popoverFor&&this._container.setAttribute("popover-for",this.popoverFor),this.content&&(this._container.prepend(this.content),Object.assign(this.content.style,{position:"relative",display:"block",zIndex:1}),window.requestAnimationFrame(()=>{let e=getComputedStyle(this.content).backgroundColor;e=="rgba(0, 0, 0, 0)"&&(this.content.style.background=e="#f2f2f2"),this._arrow.querySelector(".arrow-background").style.fill=e})),this.ensureArrowIsAdded(),this.ownerDocument.body.appendChild(this._container),this.updatePopper(),this.setAttribute("open",""),this.modal&&(window.addEventListener("click",this.hideIfExternalTarget,{capture:!0}),window.addEventListener("focus",this.hideIfExternalTarget,{capture:!0})),this.targetElement&&(this.addTargetClassForOpen(this.targetElement),this.targetElement.setAttribute("aria-expanded","true")),this.dispatchEvent(new CustomEvent("open"))):(this.ownerDocument.body.removeChild(this._container),this.removeAttribute("open"),window.removeEventListener("click",this.hideIfExternalTarget,{capture:!0}),window.removeEventListener("focus",this.hideIfExternalTarget,{capture:!0}),this.targetElement&&(this.removeTargetClassForOpen(this.targetElement),this.targetElement.setAttribute("aria-expanded","false")),this.dispatchEvent(new CustomEvent("close")))}handleTargetSelectorChange(e){const t=document.querySelector(e);t&&(this.removeTargetEventListener(t),this.removeTargetClassForOpen(t)),this.targetSelector&&(this.targetElement=document.querySelector(this.targetSelector),this.addTargetEventListener(this.targetElement))}addTargetEventListener(e){if(e)switch(this.triggerType){case"hover":{e.addEventListener("mouseenter",this.show),e.addEventListener("mouseleave",this.hide);break}case"click":{e.addEventListener("click",this.toggle);break}}}removeTargetEventListener(e){if(e)switch(this.triggerType){case"hover":{e.removeEventListener("mouseenter",this.show),e.removeEventListener("mouseleave",this.hide);break}case"click":{e.removeEventListener("click",this.toggle);break}}}configurePopper(){this.createContentContainer(),this.ensureArrowIsAdded();const e=this,t={placement:e.placement,strategy:"absolute",modifiers:[{name:"computeStyles",options:{gpuAcceleration:!Al}},{name:"flip",options:{fallbackPlacements:e._flipPriority}},{name:"offset",options:{offset:()=>[0,e.noArrow?0+e.offset:this._arrow.clientHeight+e.offset]}},{name:"arrow",options:{padding:6}},{name:"resetArrowStyles",enabled:!0,phase:"beforeWrite",fn({state:n}){Object.assign(e._arrow.style,{top:n.styles.arrow.top||"",left:n.styles.arrow.left||"",bottom:n.styles.arrow.bottom||"",right:n.styles.arrow.right||""})}},{name:"onUpdate",enabled:!0,phase:"afterWrite",fn({state:n}){e.updateArrow(n.placement)}}]};this._popper=Sl(this.targetElement,this._container,t)}createContentContainer(){this._container=document.createElement("div"),this._container.classList.add("popover-container"),this._container.tabIndex=0,this._resizeObserver&&this._resizeObserver.disconnect(),this._resizeObserver=new ResizeObserver(()=>{this._popper&&this._popper.update()}),this._resizeObserver.observe(this._container),Object.assign(this._container.style,{boxShadow:`0 4px 5px 0 rgba(0, 0, 0, 0.14),
                         0 1px 10px 0 rgba(0, 0, 0, 0.12),
                         0 2px 4px -1px rgba(0, 0, 0, 0.4)`,border:"1px solid #999",boxSizing:"border-box",zIndex:2e4})}ensureArrowIsAdded(){!this.noArrow&&!this._container.contains(this._arrow)&&this._container.appendChild(this._arrow)}updatePopper(){this._popper&&(this._popper.state.elements.reference=this.targetElement,this._popper.state.options.placement=this.placement,this.open&&this._popper.update())}updateArrow(e){if(this._arrow){const t=this.getArrowVariant(e);if(this._arrow.setAttribute("variant",t),this._content){const n=this._arrow.querySelector("svg"),s=this._arrow.clientWidth,r=this._arrow.clientHeight,o=`-${r-ps}px`,a=(s-r)/2,l=`-${r+a-ps}px`;switch(t){case"bottom":{this._arrow.style.top=o,n.style.transform="rotate(180deg)";break}case"top":{this._arrow.style.bottom=o,n.style.transform="rotate(0deg)";break}case"left":{this._arrow.style.right=l,n.style.transform="rotate(270deg)";break}case"right":{this._arrow.style.left=l,n.style.transform="rotate(90deg)";break}}}}}getArrowVariant(e){if(e.indexOf("bottom")!==-1)return"bottom";if(e.indexOf("top")!==-1)return"top";if(e.indexOf("left")!==-1)return"left";if(e.indexOf("right")!==-1)return"right"}get content(){return this._content||(this._content=this.firstElementChild,this._content.setAttribute("data-popper-content","")),this._content}addTargetClassForOpen(e){e&&e.classList.add(fs)}removeTargetClassForOpen(e){e&&e.classList.remove(fs)}};sr.ID="sd-popover";let hn=sr;customElements.get(hn.ID)||customElements.define(hn.ID,hn);class $l{getOffsetForIndexAndAlignment(e,t,n,s,r,o){const a=Math.max(0,o*s),l=Math.min(a,e*s),c=Math.max(0,e*s-r+s);switch(t){case"start":return l;case"end":return c;case"center":{const d=Math.round(c+(l-c)/2);return d<Math.ceil(r/2)?0:d>a+Math.floor(r/2)?a:d}case"auto":default:return n>=c&&n<=l?n:n<c?c:l}}debounce(e){let t;return(...n)=>{t&&window.cancelAnimationFrame(t),t=window.requestAnimationFrame(()=>{e(...n),t=null})}}}const Cl=new $l,Il=":host{display:block;position:relative;contain:layout}:host(:focus){outline:none}:host(:focus-visible) ::slotted([focused]){box-shadow:0 0 0 1px #1467ba inset}.container{width:100%}.container>::slotted(*){width:100%;position:absolute;box-sizing:border-box}.container>::slotted(:not([last])){border-bottom:1px solid #d9d9d9}";var Ol=Object.defineProperty,Tl=Object.getOwnPropertyDescriptor,Ne=(i,e,t,n)=>{for(var s=n>1?void 0:n?Tl(e,t):e,r=i.length-1,o;r>=0;r--)(o=i[r])&&(s=(n?o(e,t,s):o(s))||s);return n&&s&&Ol(e,t,s),s};let Ll=0;var Re;const Te=(Re=class extends ue{constructor(){super(),this.items=[],this.selectionType="trigger-only",this.id=Re.ID+"_"+Ll++,this.role="listbox",this.itemGenerator=Ks,this._lastKnownScrollTop=0,this._lastRenderedScrollTop=0,this._itemsRenderData=[],this._elementCache=new Map,this._visibleItemsNum=0,this._selectedIndices=[],this._focusIndex=-1,this._lastKnownHeight=0,this.onScroll=()=>{this._lastKnownScrollTop=this.scrollTop;const i=this._lastRenderedScrollTop-this._lastKnownScrollTop;Math.abs(i)>=this.itemHeight&&(this._lastRenderedScrollTop=this._lastKnownScrollTop,this.requestUpdate())},this.handleKeyDown=i=>{let e=!0;switch(i.key){case"Down":case"ArrowDown":this.focusIndex=this.normalizeIndex(this.focusIndex+1);break;case"Up":case"ArrowUp":this.focusIndex=this.normalizeIndex(this.focusIndex-1);break;case"Enter":this.handleSelection(this.focusIndex,i.metaKey||i.ctrlKey);break;case"End":this.focusIndex=this.itemCount-1;break;case"PageDown":this.focusIndex=this.normalizeIndex(this.focusIndex+this._visibleItemsNum-1);break;case"Home":this.focusIndex=0;break;case"PageUp":this.focusIndex=this.normalizeIndex(this.focusIndex-this._visibleItemsNum+1);break;default:e=!1;break}e&&(i.preventDefault(),i.stopPropagation())},this._resizeObserver=new ResizeObserver(()=>{this._lastKnownHeight!==this.offsetHeight&&(this._lastKnownHeight=this.offsetHeight,this.requestUpdate())})}get focusTarget(){return this.hasAttribute("focus-target")}set focusTarget(i){this.toggleAttribute("focus-target",i)}get focusIndex(){return this._focusIndex}set focusIndex(i){if(i>=-1&&i<this.itemCount){const e=this._focusIndex;this._focusIndex=i,(i<=this._firstVisibleIndex||this._lastVisibleIndex<=i)&&this.scrollToItem(i),e!=i&&(i==-1&&this.removeAttribute("aria-activedescendant"),this.requestUpdate("focusIndex",e))}}get selectedIndices(){return this._selectedIndices}set selectedIndices(i){i?this._selectedIndices=i.map(e=>Number(e)):this._selectedIndices=[],this.requestUpdate("selectedIndices")}scrollToItem(i,e="auto"){this.scrollTop=Cl.getOffsetForIndexAndAlignment(this.normalizeIndex(i),e,this.scrollTop,this.itemHeight,this.height,this.itemCount),this._lastKnownScrollTop=this.scrollTop}getListItem(i){return!this.shadowRoot||i<this._firstVisibleIndex||this._lastVisibleIndex<i?null:this.querySelector(`[item-index="${i}"]`)}connectedCallback(){super.connectedCallback(),this._resizeObserver.observe(this),this.scrollTop!==this._lastKnownScrollTop&&(this.scrollTop=this._lastKnownScrollTop,this.requestUpdate())}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver.disconnect()}firstUpdated(i){super.firstUpdated(i),this.addEventListener("scroll",this.onScroll),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("click",this.handleClick),this.addEventListener("mousedown",e=>{e.button==1&&e.preventDefault()}),this.addEventListener("auxclick",this.handleClick),this.addEventListener("focus",()=>{this.matches(":focus-visible")&&(this.focusIndex==-1?(this.selectedIndices&&(this.focusIndex=this.selectedIndices[0]),this.focusIndex==-1&&this.itemCount>0&&(this.focusIndex=0)):this.updateFocusedItemAttributes())}),this.addEventListener("blur",()=>{this.focusIndex!=-1&&this.updateFocusedItemAttributes()}),this.selectedIndices.length>0&&this.scrollToItem(this.selectedIndices[0],"center")}updateFocusedItemAttributes(){const i=this.getListItem(this.focusIndex);i&&(this.focusTarget||document.activeElement==this?(i.setAttribute("focused",""),this.setAttribute("aria-activedescendant",i.id)):(i.removeAttribute("focused"),this.removeAttribute("aria-activedescendant")))}static get styles(){return[_n`
                 ${Ze(Il)}
@@ -569,7 +569,7 @@ export function getItems(): ExtendedTokenData[] {
             </div>
         `}renderIcon(){if(this.icon||this.iconPlaceholder){const e=this.iconBackgroundColor!=null?`--token-icon-background-color: ${this.iconBackgroundColor}`:void 0;return Z`
                 <div class="icon-wrapper" style="${le(e)}" role="img">
-                    <div class="icon"></div>
+                    <div part="icon" class="icon"></div>
                 </div>
             `}return z}updated(e){super.updated(e),(e.has("icon")||e.has("iconPlaceholder"))&&(this.icon||this.iconPlaceholder)&&Gs.showImage(this.shadowRoot.querySelector(".icon"),this.icon,this.iconPlaceholder),e.has("disabled")&&!this.disabled&&this.checked&&(this.checked=!1)}setClickHandler(e){this._tokenClickHandler=e}setDeleteHandler(e){this._tokenDeleteHandler=e}},Ce.ID="sd-token",Ce.ensureDefined=()=>{customElements.get(Ce.ID)||customElements.define(Ce.ID,Ce)},Ce);je([b({type:String,attribute:!0,reflect:!0})],Le.prototype,"value",2);je([b({type:String,attribute:!0,reflect:!0})],Le.prototype,"type",2);je([b({type:String})],Le.prototype,"icon",2);je([b({type:String})],Le.prototype,"iconPlaceholder",2);je([b({type:String})],Le.prototype,"iconBackgroundColor",2);je([b({converter:Ii,reflect:!0,attribute:"aria-disabled"})],Le.prototype,"disabled",2);je([b({converter:Ii,reflect:!0,attribute:"aria-current"})],Le.prototype,"current",2);je([b({converter:Ii,reflect:!0,attribute:"aria-checked"})],Le.prototype,"checked",1);let Cn=Le;const zl=(i,e)=>{const t=document.createElement(Cn.ID);return i&&(t.value=i.caption,t.type=i.type,t.icon=i.icon,t.iconPlaceholder=i.iconPlaceholder,t.iconBackgroundColor=i.iconBackgroundColor,t.disabled=i.disabled,t.index=e),t};Cn.ensureDefined();const Xt="web application/json";class Ul{constructor(e,t,n){navigator.clipboard&&(e.addEventListener("copy",()=>{t()||this.writeToClipboard(e)}),e.addEventListener("cut",()=>{t()||(e.removeSelectionOrActiveToken(),this.writeToClipboard(e))}),e.addEventListener("paste",()=>{e.disabled||this.readFromClipboard(n)}))}writeToClipboard(e){const t=e.querySelectorAll("[slot='items'][aria-checked='true']"),n=[];if(t.length>0)t.forEach(s=>n.push(s.index));else if(e.activeTokenIndex!=-1){const s=e.activeTokenElement;s&&n.push(s.index)}if(n.length>0){const s=JSON.stringify(n.map(o=>e.items[o])),r=new Blob([s],{type:Xt});navigator.clipboard.write([new ClipboardItem({[Xt]:r})])}}async readFromClipboard(e){const t=await navigator.clipboard.read();for(const n of t)if(n.types.includes(Xt)){const r=await(await n.getType(Xt)).text(),o=JSON.parse(r);Array.isArray(o)&&e(o)}}}const Hl=":host{display:flex;contain:layout style}:host .additonal-content::slotted(*){align-self:end;flex-shrink:0}:host([drop]) ::slotted(*){pointer-events:none}:host(:not([readonly])) ::slotted(sd-token:last-of-type){margin-right:24px;margin-bottom:4px}.container{display:flex;flex-wrap:wrap;gap:8px;flex-grow:1;min-width:0;margin-top:auto}.container .placeholder{color:#767676;line-height:24px;align-self:flex-end}.input{flex-grow:1;min-width:0;width:100%;margin-top:auto}.input .token-wrapper{display:flex;flex-wrap:wrap;flex:1 0 auto;width:100%;gap:8px}";class Fl{constructor(e,t){this.tokenSelector=e;const n=new Map,s=r=>{const o=r.target;if(!e.contains(o)){const a=r.addedIndexes;a&&e.removeTokens(a.map(l=>n.get(l)))}n.clear()};e.addEventListener("dragstart",r=>{const o=r.target;if(o instanceof Cn){if(o.disabled){r.preventDefault();return}o.setAttribute("aria-checked","true");const a=e.querySelectorAll("[slot='items'][aria-checked='true']");if(a.length>0){const l=Array.from(a).filter(c=>!c.disabled).map((c,d)=>(n.set(d,c.index),e.items[c.index]));if(r.dataTransfer.setData("text/sd-token-selector",JSON.stringify(l)),r.dataTransfer.dropEffect="move",r.dataTransfer.effectAllowed="move",a.length>1){const c=this.createCustomDragImage(o,l.length);r.dataTransfer.setDragImage(c,-14,-14)}window.addEventListener("drop",s,{once:!0})}}}),e.addEventListener("dragenter",r=>{e.setAttribute("drop",""),r.preventDefault()}),e.addEventListener("dragover",r=>r.preventDefault()),e.addEventListener("dragleave",r=>{r.target==e&&e.removeAttribute("drop")}),e.addEventListener("drop",r=>{e.removeAttribute("drop");const o=r.dataTransfer.getData("text/sd-token-selector");if(o)try{const a=JSON.parse(o);Array.isArray(a)&&(r.addedIndexes=t(a),r.preventDefault())}catch{}}),e.addEventListener("dragend",()=>{window.removeEventListener("drop",s),n.clear()})}createCustomDragImage(e,t){let n=e.cloneNode(!0);if(n.setAttribute("aria-disabled","true"),this.tokenSelector.tokenType)n.value=t+" "+this.tokenSelector.tokenType;else{const s=document.createElement("div");s.innerText="+"+(t-1),Object.assign(s.style,{position:"absolute",left:"90%",top:"75%"});const r=document.createElement("div");r.appendChild(n),r.appendChild(s),n=r}return Object.assign(n.style,{height:e.offsetHeight,outline:"none",maxWidth:"500px",position:"absolute",display:"block",left:"-99999px",overflow:"visible",margin:"1px"}),n.slot="items",this.tokenSelector.appendChild(n),requestAnimationFrame(()=>n.remove()),n}}var Wl=Object.defineProperty,ql=Object.getOwnPropertyDescriptor,ge=(i,e,t,n)=>{for(var s=n>1?void 0:n?ql(e,t):e,r=i.length-1,o;r>=0;r--)(o=i[r])&&(s=(n?o(e,t,s):o(s))||s);return n&&s&&Wl(e,t,s),s};function Vl(i,e){let t;return function(...n){t!=null&&clearTimeout(t),t=window.setTimeout(()=>i(...n),e)}}var Se;const de=(Se=class extends ue{constructor(){super(...arguments),this.selectionMode="multi",this.items=[],this.selectedIndexes=[],this._tokenGenerator=zl,this._autoSuggestItemGenerator=Ks,this.additionalTokenCommittingKeys=[],this._activeTokenIndex=-1,this.handleInputKeyDown=(e,t)=>{if((e.key==="Enter"||this.additionalTokenCommittingKeys.includes(e.key))&&t.value){e.preventDefault(),e.stopPropagation(),this.commitTokenValue(t.value);return}switch(e.key){case"Escape":{e.preventDefault(),e.stopPropagation(),this.tokenSuggestPopover.hide();break}case"Tab":{this.commitTokenValue(t.value),this.tokenSuggestPopover.hide();break}default:this.handleKeyDown(e)}},this.handleKeyDown=e=>{switch(e.key){case"ArrowLeft":{this.hasInputValue||this.updateActiveToken(-1);break}case"ArrowRight":{this.hasInputValue||this.updateActiveToken(1);break}case"Enter":{if(!this.hasInputValue&&this.activeTokenIndex!=-1){const t=this.activeTokenElement;e.getModifierState("Control")?t.checked=!t.checked:(t.checked=!0,this.onTokenClick(t,!1)),document.activeElement!=this&&this.focus()}break}case"Backspace":{this.hasInputValue||(this.activeTokenIndex==-1?this.updateActiveToken(-1):this.removeSelectionOrActiveToken());break}case"Clear":case"Delete":{this.removeSelectionOrActiveToken();break}case"a":{!this.hasInputValue&&e.getModifierState("Control")&&(this.querySelectorAll("[slot='items']").forEach(t=>t.checked=!0),e.preventDefault(),e.stopPropagation());break}}},this.handleWindowPointerDown=e=>{const t=this.inputElement;if(!t||!t.value)return;e.composedPath().some(s=>{if(s instanceof HTMLElement&&(e.composedPath().indexOf(t)>-1||s.getAttribute("popover-for")==="token-autosuggest-popover"))return!0})||this.commitTokenValue(t.value)},this.debouncedShowTokenSuggestPopover=Vl(this.showFilteredTokenSuggestions.bind(this),200)}static get styles(){return Ze(Hl)}get tokenGenerator(){return this._tokenGenerator}set tokenGenerator(e){this._tokenGenerator=e,this.render()}get autoSuggestItemGenerator(){return this._autoSuggestItemGenerator}set autoSuggestItemGenerator(e){this._autoSuggestItemGenerator=e,this._tokenSuggestPopover&&(this._tokenSuggestPopover.list.itemGenerator=e)}setAdditionalTokenCommittingKeys(e){this.additionalTokenCommittingKeys=e}openSuggestions(){this.inputElement&&(this.focus(),this.tokenSuggestPopover.show())}focus(){this.inputElement?this.inputElement.focus():this.shadowRoot.querySelector(".container").focus()}render(){return this.selectionMode=="remove-only"?Z`<div class="container" tabindex="0">
                       <slot name="items"
@@ -593,7 +593,7 @@ export function getItems(): ExtendedTokenData[] {
                       ><div class="token-wrapper" slot="prefix"><slot name="items"></slot></div>
                   </sd-lit-input>
                   <slot class="additonal-content" name="additional-content"></slot>
-              `}firstUpdated(e){super.firstUpdated(e),this.setAttribute("role","listbox"),this.setAttribute("aria-multiselectable","true"),this.hasAttribute("tabIndex")||(this.tabIndex=0),this.addEventListener("focusout",t=>{const n=t.relatedTarget;!this.contains(n)&&!this.shadowRoot.contains(n)&&this.querySelectorAll("[slot='items'][aria-checked='true']").forEach(s=>s.checked=!1)}),new Ul(this,()=>{var t;return(t=this.inputElement)==null?void 0:t.value},t=>this.addMatchingItems(t)),new Fl(this,t=>this.addMatchingItems(t))}addMatchingItems(e){const t=[],n=e.map((s,r)=>{const o=s.caption==null?-1:this.findIndex(s);return o!=-1&&!this.items[o].disabled&&!this.selectedIndexes.includes(o)?(t.push(r),o):-1}).filter(s=>s!=-1);return n.length>0&&this.handleTokenSelection(n),t}removeSelectionOrActiveToken(){if(!this.disabled){const e=this.querySelectorAll("[slot='items'][aria-checked='true']");if(e.length>0){const t=Array.from(e);this.removeTokens(t.filter(n=>!n.disabled).map(n=>n.index))}else if(this.activeTokenIndex!=-1){const t=this.activeTokenElement;t&&!t.disabled&&this.removeTokens([t.index])}}}updateActiveToken(e){const t=this.querySelectorAll("[slot='items']").length-1;this.activeTokenIndex==-1?e<0&&(this.activeTokenIndex=t):this.activeTokenIndex==t&&e>0?(this.activeTokenIndex=-1,this.focus()):this.activeTokenIndex=Math.max(0,Math.min(t,this.activeTokenIndex+e))}commitTokenValue(e){if(this.disabled)return;if(this.tokenSuggestPopover.isOpened){const n=this.tokenSuggestPopover.focusedSuggestToken;if(n){if(!n.disabled){const s=this.findIndex(n);this.handleTokenSelection([s]),this.tokenSuggestPopover.hide()}return}}if(!(e!=null&&e.trim()))return;const t=this.items.findIndex(n=>this.caseSensitive?n.caption==e:n.caption.toLowerCase()==e.toLowerCase());this.selectedIndexes.includes(t)||(t>=0?this.handleTokenSelection([t]):this.handleTokenCreation(e)),this.requestUpdate("selectedIndexes"),this.tokenSuggestPopover.hide(),window.removeEventListener("pointerdown",this.handleWindowPointerDown)}updated(e){if(super.updated(e),this._tokenSuggestPopover&&(this.tokenSuggestPopover.list.className=this.suggestListClass||"",this.suggestionFilter&&(this.tokenSuggestPopover.filter=this.suggestionFilter)),e.has("selectionMode"))if(this.selectionMode=="multi"){this.setAttribute("aria-haspopup","listbox");const t=this.inputElement;t.addEventListener("immediate-value-change",n=>this.handleInputValueChange(n)),t.addEventListener("keydown",n=>this.handleInputKeyDown(n,t)),window.queueMicrotask(()=>this.tokenSuggestPopover)}else this.removeAttribute("aria-haspopup"),this.addEventListener("keydown",this.handleKeyDown),this._tokenSuggestPopover&&(this._tokenSuggestPopover.popover.remove(),this._tokenSuggestPopover=null);(e.size==0||e.has("selectionMode")||e.has("items")||e.has("selectedIndexes")||e.has("disabled"))&&this.updateItems()}handleInputValueChange(e){e.detail.value?(this.activeTokenIndex=-1,this.cancelSearch=!1,this.debouncedShowTokenSuggestPopover(),window.addEventListener("pointerdown",this.handleWindowPointerDown)):(this.tokenSuggestPopover.hide(),this.cancelSearch=!0)}showFilteredTokenSuggestions(){!this.cancelSearch&&this.inputElement.value&&this.tokenSuggestPopover.show()}isTokenNotSelected(e){return!this.selectedIndexes.includes(e)}get tokenSuggestPopover(){return!this._tokenSuggestPopover&&this.inputElement&&(this._tokenSuggestPopover=new Pl(this.inputElement,()=>this.items.filter((e,t)=>!e.disabled&&this.isTokenNotSelected(t)),e=>{const t=this.findIndex(e);this.handleTokenSelection([t]),window.removeEventListener("pointerdown",this.handleWindowPointerDown)},e=>{this.appendChild(e.popover),this.dispatchEvent(new CustomEvent("auto-suggest-initialized")),e.popover.addEventListener("close",()=>{this.inputElement.value&&!this.contains(document.activeElement)&&(this.inputElement.value="")})}),this._tokenSuggestPopover.list.itemGenerator=this._autoSuggestItemGenerator,this._tokenSuggestPopover.list.className=this.suggestListClass,this.suggestionFilter&&(this._tokenSuggestPopover.filter=this.suggestionFilter)),this._tokenSuggestPopover}updateItems(){if(!this.isConnected||!this.items)return;const e=this.inputElement;e&&(!this._tokenSuggestPopover||!this._tokenSuggestPopover.isOpened)&&(e.value=""),this.querySelectorAll("[slot='items']").forEach(s=>{this.removeChild(s)});const t=document.createDocumentFragment();let n=[];this.selectionMode=="remove-only"?n=this.items.map(s=>this.disableIfNeeded(s)):this.selectedIndexes.forEach(s=>{n.push(this.disableIfNeeded(this.items[s]))}),n.forEach(s=>{const r=this.tokenGenerator(s,this.findIndex(s));r.slot="items",t.appendChild(r),r.id||(r.id=window.crypto.getRandomValues(new Uint32Array(1))[0].toString(16)),r.setClickHandler(()=>this.onTokenClick(r,!0)),r.addEventListener("click",()=>{document.activeElement!=this&&this.focus()}),r.setDeleteHandler(o=>this.removeTokens([o]))}),this.appendChild(t),this._tokenSuggestPopover&&this._tokenSuggestPopover.refreshItems()}removeTokens(e){this.disabled||(this.activeTokenIndex!=-1&&e.includes(this.activeTokenElement.index)&&(this.activeTokenIndex=-1),this.selectionMode=="remove-only"?this.dispatchEvent(new CustomEvent("tokens-removed",{detail:{removedIndices:e}})):(this.selectedIndexes=this.selectedIndexes.filter(t=>!e.includes(t)),this.dispatchEvent(new CustomEvent("tokens-removed",{detail:{removedIndices:e,selectedIndices:[...this.selectedIndexes]}}))))}onTokenClick(e,t){let n;this.querySelectorAll("[slot='items']").forEach((s,r)=>{e==s?n=r:s.setAttribute("aria-checked","false")}),this.activeTokenIndex=n,this.setAttribute("aria-activedescendant",this.activeTokenElement.id),this._tokenSuggestPopover&&this._tokenSuggestPopover.isOpened&&this._tokenSuggestPopover.hide(),this.dispatchEvent(new CustomEvent("token-clicked",{detail:{index:e.index,tokenElement:e,byPointerDevice:t}}))}disableIfNeeded(e){return this.disabled?{...e,disabled:!0}:e}handleTokenSelection(e){this.selectedIndexes=this.selectedIndexes.concat(e),this.dispatchEvent(new CustomEvent("tokens-selected",{detail:{newIndices:e,selectedIndices:[...this.selectedIndexes]}}))}handleTokenCreation(e){this.dispatchEvent(new CustomEvent("token-created",{detail:{value:e}}))}get inputElement(){return this.shadowRoot.querySelector(".input")}get activeTokenElement(){return this.getTokenElement(this.activeTokenIndex)}getTokenElement(e){return this.querySelector("[slot='items']:nth-of-type("+(e+1)+")")}findIndex(e){return this.items.findIndex(t=>t.caption===e.caption)}get activeTokenIndex(){return this._activeTokenIndex}set activeTokenIndex(e){if(this._activeTokenIndex!=-1){const t=this.activeTokenElement;t&&(t.current=!1)}if(this._activeTokenIndex=e,e==-1)this.removeAttribute("aria-activedescendant");else{const t=this.activeTokenElement;t.current=!0,this.setAttribute("aria-activedescendant",t.id)}}get hasInputValue(){var e;return!!((e=this.inputElement)!=null&&e.value)}},Se.ID="sd-token-selector",Se.ensureDefined=()=>{Cn.ensureDefined(),customElements.get(Se.ID)||customElements.define(Se.ID,Se)},Se.shadowRootOptions={...ue.shadowRootOptions,delegatesFocus:!0},Se);ge([b({type:String,attribute:"selection-mode",reflect:!0})],de.prototype,"selectionMode",2);ge([b({type:Array,attribute:!1})],de.prototype,"items",2);ge([b({type:Array,attribute:!1})],de.prototype,"selectedIndexes",2);ge([b({type:String,reflect:!0})],de.prototype,"placeholder",2);ge([b({type:String,reflect:!0,attribute:"suggest-list-class"})],de.prototype,"suggestListClass",2);ge([b({type:String,reflect:!0,attribute:"input-label"})],de.prototype,"inputLabel",2);ge([b({converter:{fromAttribute:i=>i=="true",toAttribute:i=>i},reflect:!0,attribute:"aria-disabled"})],de.prototype,"disabled",2);ge([b({type:String,attribute:!0})],de.prototype,"validationMessage",2);ge([b({type:String,attribute:!0})],de.prototype,"validationIconSrc",2);ge([b({converter:dn.levelConverter,attribute:!0,reflect:!0})],de.prototype,"validationLevel",2);ge([b({type:String,reflect:!0,attribute:"token-type"})],de.prototype,"tokenType",2);ge([b({type:Boolean,reflect:!0,attribute:"case-sensitive"})],de.prototype,"caseSensitive",2);let oh=de;function or(i){return i&&i.__esModule&&Object.prototype.hasOwnProperty.call(i,"default")?i.default:i}function Gl(i){if(i.__esModule)return i;var e=i.default;if(typeof e=="function"){var t=function n(){return this instanceof n?Reflect.construct(e,arguments,this.constructor):e.apply(this,arguments)};t.prototype=e.prototype}else t={};return Object.defineProperty(t,"__esModule",{value:!0}),Object.keys(i).forEach(function(n){var s=Object.getOwnPropertyDescriptor(i,n);Object.defineProperty(t,n,s.get?s:{enumerable:!0,get:function(){return i[n]}})}),t}var Oi={exports:{}},U=String,ar=function(){return{isColorSupported:!1,reset:U,bold:U,dim:U,italic:U,underline:U,inverse:U,hidden:U,strikethrough:U,black:U,red:U,green:U,yellow:U,blue:U,magenta:U,cyan:U,white:U,gray:U,bgBlack:U,bgRed:U,bgGreen:U,bgYellow:U,bgBlue:U,bgMagenta:U,bgCyan:U,bgWhite:U}};Oi.exports=ar();Oi.exports.createColors=ar;var Kl=Oi.exports;const Zl={},Xl=Object.freeze(Object.defineProperty({__proto__:null,default:Zl},Symbol.toStringTag,{value:"Module"})),ye=Gl(Xl);let gs=Kl,ms=ye,ii=class lr extends Error{constructor(e,t,n,s,r,o){super(e),this.name="CssSyntaxError",this.reason=e,r&&(this.file=r),s&&(this.source=s),o&&(this.plugin=o),typeof t<"u"&&typeof n<"u"&&(typeof t=="number"?(this.line=t,this.column=n):(this.line=t.line,this.column=t.column,this.endLine=n.line,this.endColumn=n.column)),this.setMessage(),Error.captureStackTrace&&Error.captureStackTrace(this,lr)}setMessage(){this.message=this.plugin?this.plugin+": ":"",this.message+=this.file?this.file:"<css input>",typeof this.line<"u"&&(this.message+=":"+this.line+":"+this.column),this.message+=": "+this.reason}showSourceCode(e){if(!this.source)return"";let t=this.source;e==null&&(e=gs.isColorSupported),ms&&e&&(t=ms(t));let n=t.split(/\r?\n/),s=Math.max(this.line-3,0),r=Math.min(this.line+2,n.length),o=String(r).length,a,l;if(e){let{bold:c,gray:d,red:h}=gs.createColors(!0);a=p=>c(h(p)),l=p=>d(p)}else a=l=c=>c;return n.slice(s,r).map((c,d)=>{let h=s+1+d,p=" "+(" "+h).slice(-o)+" | ";if(h===this.line){let m=l(p.replace(/\d/g," "))+c.slice(0,this.column-1).replace(/[^\t]/g," ");return a(">")+l(p)+c+`
+              `}firstUpdated(e){super.firstUpdated(e),this.setAttribute("role","listbox"),this.setAttribute("aria-multiselectable","true"),this.hasAttribute("tabIndex")||(this.tabIndex=0),this.addEventListener("focusout",t=>{const n=t.relatedTarget;!this.contains(n)&&!this.shadowRoot.contains(n)&&this.querySelectorAll("[slot='items'][aria-checked='true']").forEach(s=>s.checked=!1)}),new Ul(this,()=>{var t;return(t=this.inputElement)==null?void 0:t.value},t=>this.addMatchingItems(t)),new Fl(this,t=>this.addMatchingItems(t))}addMatchingItems(e){const t=[],n=e.map((s,r)=>{const o=s.caption==null?-1:this.findIndex(s);return o!=-1&&!this.items[o].disabled&&!this.selectedIndexes.includes(o)?(t.push(r),o):-1}).filter(s=>s!=-1);return n.length>0&&this.handleTokenSelection(n),t}removeSelectionOrActiveToken(){if(!this.disabled){const e=this.querySelectorAll("[slot='items'][aria-checked='true']");if(e.length>0){const t=Array.from(e);this.removeTokens(t.filter(n=>!n.disabled).map(n=>n.index))}else if(this.activeTokenIndex!=-1){const t=this.activeTokenElement;t&&!t.disabled&&this.removeTokens([t.index])}}}updateActiveToken(e){const t=this.querySelectorAll("[slot='items']").length-1;this.activeTokenIndex==-1?e<0&&(this.activeTokenIndex=t):this.activeTokenIndex==t&&e>0?(this.activeTokenIndex=-1,this.focus()):this.activeTokenIndex=Math.max(0,Math.min(t,this.activeTokenIndex+e))}commitTokenValue(e){if(this.disabled)return;if(this.tokenSuggestPopover.isOpened){const n=this.tokenSuggestPopover.focusedSuggestToken;if(n){if(!n.disabled){const s=this.findIndex(n);this.handleTokenSelection([s]),this.tokenSuggestPopover.hide()}return}}if(!(e!=null&&e.trim()))return;const t=this.items.findIndex(n=>this.caseSensitive?n.caption==e:n.caption.toLowerCase()==e.toLowerCase());this.selectedIndexes.includes(t)||(t>=0?this.handleTokenSelection([t]):this.handleTokenCreation(e)),this.requestUpdate("selectedIndexes"),this.tokenSuggestPopover.hide(),window.removeEventListener("pointerdown",this.handleWindowPointerDown)}updated(e){if(super.updated(e),this._tokenSuggestPopover&&(this.tokenSuggestPopover.list.className=this.suggestListClass||"",this.suggestionFilter&&(this.tokenSuggestPopover.filter=this.suggestionFilter)),e.has("selectionMode"))if(this.selectionMode=="multi"){this.setAttribute("aria-haspopup","listbox");const t=this.inputElement;t.addEventListener("immediate-value-change",n=>this.handleInputValueChange(n)),t.addEventListener("keydown",n=>this.handleInputKeyDown(n,t)),window.queueMicrotask(()=>this.tokenSuggestPopover)}else this.removeAttribute("aria-haspopup"),this.addEventListener("keydown",this.handleKeyDown),this._tokenSuggestPopover&&(this._tokenSuggestPopover.popover.remove(),this._tokenSuggestPopover=null);(e.size==0||e.has("selectionMode")||e.has("items")||e.has("selectedIndexes")||e.has("disabled"))&&this.updateItems()}handleInputValueChange(e){e.detail.value?(this.activeTokenIndex=-1,this.cancelSearch=!1,this.debouncedShowTokenSuggestPopover(),window.addEventListener("pointerdown",this.handleWindowPointerDown)):(this.tokenSuggestPopover.hide(),this.cancelSearch=!0)}showFilteredTokenSuggestions(){!this.cancelSearch&&this.inputElement.value&&this.tokenSuggestPopover.show()}isTokenNotSelected(e){return!this.selectedIndexes.includes(e)}get tokenSuggestPopover(){return!this._tokenSuggestPopover&&this.inputElement&&(this._tokenSuggestPopover=new Pl(this.inputElement,()=>this.items.filter((e,t)=>!e.disabled&&this.isTokenNotSelected(t)),e=>{const t=this.findIndex(e);this.handleTokenSelection([t]),window.removeEventListener("pointerdown",this.handleWindowPointerDown)},e=>{this.appendChild(e.popover),this.dispatchEvent(new CustomEvent("auto-suggest-initialized")),e.popover.addEventListener("close",()=>{this.inputElement.value&&!this.contains(document.activeElement)&&(this.inputElement.value="")})}),this._tokenSuggestPopover.list.itemGenerator=this._autoSuggestItemGenerator,this._tokenSuggestPopover.list.className=this.suggestListClass,this.suggestionFilter&&(this._tokenSuggestPopover.filter=this.suggestionFilter)),this._tokenSuggestPopover}updateItems(){if(!this.isConnected||!this.items)return;const e=this.inputElement;e&&(!this._tokenSuggestPopover||!this._tokenSuggestPopover.isOpened)&&(e.value=""),this.querySelectorAll("[slot='items']").forEach(s=>{this.removeChild(s)});const t=document.createDocumentFragment();let n=[];this.selectionMode=="remove-only"?n=this.items.map(s=>this.disableIfNeeded(s)):this.selectedIndexes.forEach(s=>{n.push(this.disableIfNeeded(this.items[s]))}),n.forEach(s=>{const r=this.tokenGenerator(s,this.findIndex(s));r.slot="items",t.appendChild(r),r.id||(r.id=window.crypto.getRandomValues(new Uint32Array(1))[0].toString(16)),r.setClickHandler(()=>this.onTokenClick(r,!0)),r.addEventListener("click",()=>{document.activeElement!=this&&this.focus()}),r.setDeleteHandler(o=>this.removeTokens([o]))}),this.appendChild(t),this._tokenSuggestPopover&&this._tokenSuggestPopover.refreshItems()}removeTokens(e){this.disabled||(this.activeTokenIndex!=-1&&e.includes(this.activeTokenElement.index)&&(this.activeTokenIndex=-1),this.selectionMode=="remove-only"?this.dispatchEvent(new CustomEvent("tokens-removed",{detail:{removedIndices:e}})):(this.selectedIndexes=this.selectedIndexes.filter(t=>!e.includes(t)),this.dispatchEvent(new CustomEvent("tokens-removed",{detail:{removedIndices:e,selectedIndices:[...this.selectedIndexes]}}))))}onTokenClick(e,t){let n;this.querySelectorAll("[slot='items']").forEach((s,r)=>{e==s?n=r:s.setAttribute("aria-checked","false")}),this.activeTokenIndex=n,this.setAttribute("aria-activedescendant",this.activeTokenElement.id),this._tokenSuggestPopover&&this._tokenSuggestPopover.isOpened&&this._tokenSuggestPopover.hide(),this.dispatchEvent(new CustomEvent("token-clicked",{detail:{index:e.index,tokenElement:e,byPointerDevice:t}}))}disableIfNeeded(e){return this.disabled?{...e,disabled:!0}:e}handleTokenSelection(e){this.selectedIndexes=this.selectedIndexes.concat(e),this.dispatchEvent(new CustomEvent("tokens-selected",{detail:{newIndices:e,selectedIndices:[...this.selectedIndexes]}}))}handleTokenCreation(e){this.dispatchEvent(new CustomEvent("token-created",{detail:{value:e}}))}get inputElement(){return this.shadowRoot.querySelector(".input")}get activeTokenElement(){return this.getTokenElement(this.activeTokenIndex)}getTokenElement(e){return this.querySelector("[slot='items']:nth-of-type("+(e+1)+")")}findIndex(e){return this.items.findIndex(t=>t.caption===e.caption)}get activeTokenIndex(){return this._activeTokenIndex}set activeTokenIndex(e){if(this._activeTokenIndex!=-1){const t=this.activeTokenElement;t&&(t.current=!1)}if(this._activeTokenIndex=e,e==-1)this.removeAttribute("aria-activedescendant");else{const t=this.activeTokenElement;t.current=!0,this.setAttribute("aria-activedescendant",t.id)}}get hasInputValue(){var e;return!!((e=this.inputElement)!=null&&e.value)}},Se.ID="sd-token-selector",Se.ensureDefined=()=>{Cn.ensureDefined(),customElements.get(Se.ID)||customElements.define(Se.ID,Se)},Se.shadowRootOptions={...ue.shadowRootOptions,delegatesFocus:!0},Se);ge([b({type:String,attribute:"selection-mode",reflect:!0})],de.prototype,"selectionMode",2);ge([b({type:Array,attribute:!1})],de.prototype,"items",2);ge([b({type:Array,attribute:!1})],de.prototype,"selectedIndexes",2);ge([b({type:String,reflect:!0})],de.prototype,"placeholder",2);ge([b({type:String,reflect:!0,attribute:"suggest-list-class"})],de.prototype,"suggestListClass",2);ge([b({type:String,reflect:!0,attribute:"input-label"})],de.prototype,"inputLabel",2);ge([b({converter:{fromAttribute:i=>i=="true",toAttribute:i=>i},reflect:!0,attribute:"aria-disabled"})],de.prototype,"disabled",2);ge([b({type:String,attribute:!0})],de.prototype,"validationMessage",2);ge([b({type:String,attribute:!0})],de.prototype,"validationIconSrc",2);ge([b({converter:dn.levelConverter,attribute:!0,reflect:!0})],de.prototype,"validationLevel",2);ge([b({type:String,reflect:!0,attribute:"token-type"})],de.prototype,"tokenType",2);ge([b({type:Boolean,reflect:!0,attribute:"case-sensitive"})],de.prototype,"caseSensitive",2);let ah=de;function or(i){return i&&i.__esModule&&Object.prototype.hasOwnProperty.call(i,"default")?i.default:i}function Gl(i){if(i.__esModule)return i;var e=i.default;if(typeof e=="function"){var t=function n(){return this instanceof n?Reflect.construct(e,arguments,this.constructor):e.apply(this,arguments)};t.prototype=e.prototype}else t={};return Object.defineProperty(t,"__esModule",{value:!0}),Object.keys(i).forEach(function(n){var s=Object.getOwnPropertyDescriptor(i,n);Object.defineProperty(t,n,s.get?s:{enumerable:!0,get:function(){return i[n]}})}),t}var Oi={exports:{}},U=String,ar=function(){return{isColorSupported:!1,reset:U,bold:U,dim:U,italic:U,underline:U,inverse:U,hidden:U,strikethrough:U,black:U,red:U,green:U,yellow:U,blue:U,magenta:U,cyan:U,white:U,gray:U,bgBlack:U,bgRed:U,bgGreen:U,bgYellow:U,bgBlue:U,bgMagenta:U,bgCyan:U,bgWhite:U}};Oi.exports=ar();Oi.exports.createColors=ar;var Kl=Oi.exports;const Zl={},Xl=Object.freeze(Object.defineProperty({__proto__:null,default:Zl},Symbol.toStringTag,{value:"Module"})),ye=Gl(Xl);let gs=Kl,ms=ye,ii=class lr extends Error{constructor(e,t,n,s,r,o){super(e),this.name="CssSyntaxError",this.reason=e,r&&(this.file=r),s&&(this.source=s),o&&(this.plugin=o),typeof t<"u"&&typeof n<"u"&&(typeof t=="number"?(this.line=t,this.column=n):(this.line=t.line,this.column=t.column,this.endLine=n.line,this.endColumn=n.column)),this.setMessage(),Error.captureStackTrace&&Error.captureStackTrace(this,lr)}setMessage(){this.message=this.plugin?this.plugin+": ":"",this.message+=this.file?this.file:"<css input>",typeof this.line<"u"&&(this.message+=":"+this.line+":"+this.column),this.message+=": "+this.reason}showSourceCode(e){if(!this.source)return"";let t=this.source;e==null&&(e=gs.isColorSupported),ms&&e&&(t=ms(t));let n=t.split(/\r?\n/),s=Math.max(this.line-3,0),r=Math.min(this.line+2,n.length),o=String(r).length,a,l;if(e){let{bold:c,gray:d,red:h}=gs.createColors(!0);a=p=>c(h(p)),l=p=>d(p)}else a=l=c=>c;return n.slice(s,r).map((c,d)=>{let h=s+1+d,p=" "+(" "+h).slice(-o)+" | ";if(h===this.line){let m=l(p.replace(/\d/g," "))+c.slice(0,this.column-1).replace(/[^\t]/g," ");return a(">")+l(p)+c+`
  `+m+a("^")}return" "+l(p)+c}).join(`
 `)}toString(){let e=this.showSourceCode();return e&&(e=`
 
@@ -809,6 +809,10 @@ https://github.com/highlightjs/highlight.js/issues/2277`),B=u,C=v),k===void 0&&(
 <li>Applies to the placeholder text which is shown when the selector has no selection in <code>remove-only</code> mode.</li>
 </ul>
 </li>
+<li><code>icon</code> part of tokens<ul>
+<li>Applies to the icon element within the wrapper around it that defines the <code>iconBackgroundColor</code> for example.</li>
+</ul>
+</li>
 </ul>
 <h2 id="custom-events">Custom Events</h2>
 <ul>
@@ -838,8 +842,7 @@ https://github.com/highlightjs/highlight.js/issues/2277`),B=u,C=v),k===void 0&&(
 </ul>
 </li>
 </ul>
-<h2 id="examples">Examples</h2>
-`;document.querySelector("#markdown-container").innerHTML=Xu;Gu(Object.assign({"./examples/1_remove_only/index.ts":bo,"./examples/2_multi_select/index.ts":Eo,"./examples/3_editable_input_attributes/index.ts":Co,"./examples/4_dnd/index.ts":Ro,"./examples/5_other/index.ts":zo}));export{oh as T,zl as g,Ot as h};
+`,Ju=document.querySelector("#markdown-container");Ju.innerHTML=Xu;Gu(Object.assign({"./examples/1_remove_only/index.ts":bo,"./examples/2_multi_select/index.ts":Eo,"./examples/3_editable_input_attributes/index.ts":Co,"./examples/4_dnd/index.ts":Ro,"./examples/5_other/index.ts":zo}),document.querySelector(".markdown-body"));export{ah as T,zl as g,Ot as h};
 function __vite__mapDeps(indexes) {
   if (!__vite__mapDeps.viteFileDeps) {
     __vite__mapDeps.viteFileDeps = ["./1_remove_only.js","./token-provider.mjs","./2_multi_select.js","./button.mjs","./3_editable_input_attributes.js","./4_dnd.js","./5_other.js"]

package/dist/token-selector-with-externals.js

@@ -104,7 +104,7 @@ var window;(window||={})["@cas-smartdesign/token-selector"]=(()=>{var We=Object.
   <path d="M0 0l11.96 12L24 0z" fill="#999" class="arrow-border"/>\r
   <path d="M12 11L1 0h22z" fill="#f2f2f2" class="arrow-background"/>\r
 </svg>\r
-`,Kr=navigator.userAgent.indexOf("Trident")!==-1,Co=1,$o="sd-popover-open",To=class extends HTMLElement{constructor(){super(...arguments),this._open=!1,this._firstUpdated=!1,this.toggle=()=>{this.open=!this.open},this.show=()=>{this.open=!0},this.hide=()=>{this.open=!1},this.hideIfExternalTarget=t=>{let i=t.target;(!(i instanceof HTMLElement)||!this._container.contains(i)&&!this.targetElement.contains(i))&&this.hide()}}get triggerType(){return this.getAttribute("trigger-type")}set triggerType(t){t?this.setAttribute("trigger-type",t):this.removeAttribute("trigger-type")}get placement(){return this.getAttribute("placement")}set placement(t){t?this.setAttribute("placement",t):this.removeAttribute("placement")}get targetElement(){return this._targetElement}set targetElement(t){this.removeTargetEventListener(this.targetElement),this._targetElement&&this._targetElement.getAttribute("aria-expanded")=="true"&&this._targetElement.setAttribute("aria-expanded","false"),this._targetElement=t,t.setAttribute("aria-expanded","false"),this.addTargetEventListener(this.targetElement),this.updatePopper()}get targetSelector(){return this.getAttribute("target-selector")}set targetSelector(t){t?this.setAttribute("target-selector",t):this.removeAttribute("target-selector")}get modal(){return this.hasAttribute("modal")}set modal(t){t?this.setAttribute("modal",""):this.removeAttribute("modal")}get popoverFor(){return this.getAttribute("popover-for")}set popoverFor(t){t?this.setAttribute("popover-for",t):this.removeAttribute("popover-for")}get flipPriority(){return this._flipPriority}set flipPriority(t){t&&t.length>0?this._flipPriority=t:this._flipPriority=null,this.reConfigurePopper()}get offset(){return this.getAttribute("offset")?parseInt(this.getAttribute("offset")):0}set offset(t){t?this.setAttribute("offset",t.toString()):this.removeAttribute("offset"),this.reConfigurePopper()}reConfigurePopper(){this._popper&&this.configurePopper()}get noArrow(){return this.hasAttribute("no-arrow")}set noArrow(t){t?this.setAttribute("no-arrow",""):this.removeAttribute("no-arrow")}static get observedAttributes(){return["placement","target-selector","trigger-type"]}attributeChangedCallback(t,i){switch(t){case"placement":{this.updatePopper();break}case"trigger-type":{this.removeTargetEventListener(this.targetElement),this.addTargetEventListener(this.targetElement);break}case"target-selector":{this.handleTargetSelectorChange(i);break}}}connectedCallback(){this._firstUpdated||(this.firstUpdated(),this._firstUpdated=!0),this.targetElement?this.addTargetEventListener(this.targetElement):this.targetSelector&&requestAnimationFrame(()=>{this.isConnected&&this.handleTargetSelectorChange(null)}),this._arrow=document.createElement("div"),this._arrow.classList.add("popover-arrow"),this._arrow.setAttribute("data-popper-arrow",""),this._arrow.style.display="flex",this._arrow.innerHTML=Wr}disconnectedCallback(){this.targetElement&&(this.removeTargetEventListener(this.targetElement),this.removeTargetClassForOpen(this.targetElement)),this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null)}firstUpdated(){this.style.display="none",this.triggerType=this.triggerType||"click",this.placement=this.placement||"auto"}get open(){return this._open}set open(t){t!==this._open&&(this._open=t,this.handleOpenChange())}handleOpenChange(){this.open?(this._popper||this.configurePopper(),this._container.innerHTML="",this.popoverFor&&this._container.setAttribute("popover-for",this.popoverFor),this.content&&(this._container.prepend(this.content),Object.assign(this.content.style,{position:"relative",display:"block",zIndex:1}),window.requestAnimationFrame(()=>{let t=getComputedStyle(this.content).backgroundColor;t=="rgba(0, 0, 0, 0)"&&(this.content.style.background=t="#f2f2f2"),this._arrow.querySelector(".arrow-background").style.fill=t})),this.ensureArrowIsAdded(),this.ownerDocument.body.appendChild(this._container),this.updatePopper(),this.setAttribute("open",""),this.modal&&(window.addEventListener("click",this.hideIfExternalTarget,{capture:!0}),window.addEventListener("focus",this.hideIfExternalTarget,{capture:!0})),this.targetElement&&(this.addTargetClassForOpen(this.targetElement),this.targetElement.setAttribute("aria-expanded","true")),this.dispatchEvent(new CustomEvent("open"))):(this.ownerDocument.body.removeChild(this._container),this.removeAttribute("open"),window.removeEventListener("click",this.hideIfExternalTarget,{capture:!0}),window.removeEventListener("focus",this.hideIfExternalTarget,{capture:!0}),this.targetElement&&(this.removeTargetClassForOpen(this.targetElement),this.targetElement.setAttribute("aria-expanded","false")),this.dispatchEvent(new CustomEvent("close")))}handleTargetSelectorChange(t){let i=document.querySelector(t);i&&(this.removeTargetEventListener(i),this.removeTargetClassForOpen(i)),this.targetSelector&&(this.targetElement=document.querySelector(this.targetSelector),this.addTargetEventListener(this.targetElement))}addTargetEventListener(t){if(t)switch(this.triggerType){case"hover":{t.addEventListener("mouseenter",this.show),t.addEventListener("mouseleave",this.hide);break}case"click":{t.addEventListener("click",this.toggle);break}}}removeTargetEventListener(t){if(t)switch(this.triggerType){case"hover":{t.removeEventListener("mouseenter",this.show),t.removeEventListener("mouseleave",this.hide);break}case"click":{t.removeEventListener("click",this.toggle);break}}}configurePopper(){this.createContentContainer(),this.ensureArrowIsAdded();let t=this,i={placement:t.placement,strategy:"absolute",modifiers:[{name:"computeStyles",options:{gpuAcceleration:!Kr}},{name:"flip",options:{fallbackPlacements:t._flipPriority}},{name:"offset",options:{offset:()=>[0,t.noArrow?0+t.offset:this._arrow.clientHeight+t.offset]}},{name:"arrow",options:{padding:6}},{name:"resetArrowStyles",enabled:!0,phase:"beforeWrite",fn({state:o}){Object.assign(t._arrow.style,{top:o.styles.arrow.top||"",left:o.styles.arrow.left||"",bottom:o.styles.arrow.bottom||"",right:o.styles.arrow.right||""})}},{name:"onUpdate",enabled:!0,phase:"afterWrite",fn({state:o}){t.updateArrow(o.placement)}}]};this._popper=Ai(this.targetElement,this._container,i)}createContentContainer(){this._container=document.createElement("div"),this._container.classList.add("popover-container"),this._container.tabIndex=0,this._resizeObserver&&this._resizeObserver.disconnect(),this._resizeObserver=new ResizeObserver(()=>{this._popper&&this._popper.update()}),this._resizeObserver.observe(this._container),Object.assign(this._container.style,{boxShadow:`0 4px 5px 0 rgba(0, 0, 0, 0.14),
+`,Kr=navigator.userAgent.indexOf("Trident")!==-1,Co=1,$o="sd-popover-open",To=class extends HTMLElement{constructor(){super(...arguments),this._open=!1,this._firstUpdated=!1,this.toggle=()=>{this.open=!this.open},this.show=()=>{this.open=!0},this.hide=()=>{this.open=!1},this.hideIfExternalTarget=t=>{let i=t.target;(!(i instanceof HTMLElement)||!this._container.contains(i)&&!this.targetElement.contains(i))&&this.hide()}}get triggerType(){return this.getAttribute("trigger-type")}set triggerType(t){t?this.setAttribute("trigger-type",t):this.removeAttribute("trigger-type")}get placement(){return this.getAttribute("placement")}set placement(t){t?this.setAttribute("placement",t):this.removeAttribute("placement")}get targetElement(){return this._targetElement}set targetElement(t){this.removeTargetEventListener(this.targetElement),this._targetElement&&this._targetElement.getAttribute("aria-expanded")=="true"&&this._targetElement.setAttribute("aria-expanded","false"),this._targetElement=t,t&&t.setAttribute("aria-expanded","false"),this.addTargetEventListener(this.targetElement),this.updatePopper()}get targetSelector(){return this.getAttribute("target-selector")}set targetSelector(t){t?this.setAttribute("target-selector",t):this.removeAttribute("target-selector")}get modal(){return this.hasAttribute("modal")}set modal(t){t?this.setAttribute("modal",""):this.removeAttribute("modal")}get popoverFor(){return this.getAttribute("popover-for")}set popoverFor(t){t?this.setAttribute("popover-for",t):this.removeAttribute("popover-for")}get flipPriority(){return this._flipPriority}set flipPriority(t){t&&t.length>0?this._flipPriority=t:this._flipPriority=null,this.reConfigurePopper()}get offset(){return this.getAttribute("offset")?parseInt(this.getAttribute("offset")):0}set offset(t){t?this.setAttribute("offset",t.toString()):this.removeAttribute("offset"),this.reConfigurePopper()}reConfigurePopper(){this._popper&&this.configurePopper()}get noArrow(){return this.hasAttribute("no-arrow")}set noArrow(t){t?this.setAttribute("no-arrow",""):this.removeAttribute("no-arrow")}static get observedAttributes(){return["placement","target-selector","trigger-type"]}attributeChangedCallback(t,i){switch(t){case"placement":{this.updatePopper();break}case"trigger-type":{this.removeTargetEventListener(this.targetElement),this.addTargetEventListener(this.targetElement);break}case"target-selector":{this.handleTargetSelectorChange(i);break}}}connectedCallback(){this._firstUpdated||(this.firstUpdated(),this._firstUpdated=!0),this.targetElement?this.addTargetEventListener(this.targetElement):this.targetSelector&&requestAnimationFrame(()=>{this.isConnected&&this.handleTargetSelectorChange(null)}),this._arrow=document.createElement("div"),this._arrow.classList.add("popover-arrow"),this._arrow.setAttribute("data-popper-arrow",""),this._arrow.style.display="flex",this._arrow.innerHTML=Wr}disconnectedCallback(){this.targetElement&&(this.removeTargetEventListener(this.targetElement),this.removeTargetClassForOpen(this.targetElement)),this._resizeObserver&&(this._resizeObserver.disconnect(),this._resizeObserver=null)}firstUpdated(){this.style.display="none",this.triggerType=this.triggerType||"click",this.placement=this.placement||"auto"}get open(){return this._open}set open(t){t!==this._open&&(this._open=t,this.handleOpenChange())}handleOpenChange(){this.open?(this._popper||this.configurePopper(),this._container.innerHTML="",this.popoverFor&&this._container.setAttribute("popover-for",this.popoverFor),this.content&&(this._container.prepend(this.content),Object.assign(this.content.style,{position:"relative",display:"block",zIndex:1}),window.requestAnimationFrame(()=>{let t=getComputedStyle(this.content).backgroundColor;t=="rgba(0, 0, 0, 0)"&&(this.content.style.background=t="#f2f2f2"),this._arrow.querySelector(".arrow-background").style.fill=t})),this.ensureArrowIsAdded(),this.ownerDocument.body.appendChild(this._container),this.updatePopper(),this.setAttribute("open",""),this.modal&&(window.addEventListener("click",this.hideIfExternalTarget,{capture:!0}),window.addEventListener("focus",this.hideIfExternalTarget,{capture:!0})),this.targetElement&&(this.addTargetClassForOpen(this.targetElement),this.targetElement.setAttribute("aria-expanded","true")),this.dispatchEvent(new CustomEvent("open"))):(this.ownerDocument.body.removeChild(this._container),this.removeAttribute("open"),window.removeEventListener("click",this.hideIfExternalTarget,{capture:!0}),window.removeEventListener("focus",this.hideIfExternalTarget,{capture:!0}),this.targetElement&&(this.removeTargetClassForOpen(this.targetElement),this.targetElement.setAttribute("aria-expanded","false")),this.dispatchEvent(new CustomEvent("close")))}handleTargetSelectorChange(t){let i=document.querySelector(t);i&&(this.removeTargetEventListener(i),this.removeTargetClassForOpen(i)),this.targetSelector&&(this.targetElement=document.querySelector(this.targetSelector),this.addTargetEventListener(this.targetElement))}addTargetEventListener(t){if(t)switch(this.triggerType){case"hover":{t.addEventListener("mouseenter",this.show),t.addEventListener("mouseleave",this.hide);break}case"click":{t.addEventListener("click",this.toggle);break}}}removeTargetEventListener(t){if(t)switch(this.triggerType){case"hover":{t.removeEventListener("mouseenter",this.show),t.removeEventListener("mouseleave",this.hide);break}case"click":{t.removeEventListener("click",this.toggle);break}}}configurePopper(){this.createContentContainer(),this.ensureArrowIsAdded();let t=this,i={placement:t.placement,strategy:"absolute",modifiers:[{name:"computeStyles",options:{gpuAcceleration:!Kr}},{name:"flip",options:{fallbackPlacements:t._flipPriority}},{name:"offset",options:{offset:()=>[0,t.noArrow?0+t.offset:this._arrow.clientHeight+t.offset]}},{name:"arrow",options:{padding:6}},{name:"resetArrowStyles",enabled:!0,phase:"beforeWrite",fn({state:o}){Object.assign(t._arrow.style,{top:o.styles.arrow.top||"",left:o.styles.arrow.left||"",bottom:o.styles.arrow.bottom||"",right:o.styles.arrow.right||""})}},{name:"onUpdate",enabled:!0,phase:"afterWrite",fn({state:o}){t.updateArrow(o.placement)}}]};this._popper=Ai(this.targetElement,this._container,i)}createContentContainer(){this._container=document.createElement("div"),this._container.classList.add("popover-container"),this._container.tabIndex=0,this._resizeObserver&&this._resizeObserver.disconnect(),this._resizeObserver=new ResizeObserver(()=>{this._popper&&this._popper.update()}),this._resizeObserver.observe(this._container),Object.assign(this._container.style,{boxShadow:`0 4px 5px 0 rgba(0, 0, 0, 0.14),
                         0 1px 10px 0 rgba(0, 0, 0, 0.12),
                         0 2px 4px -1px rgba(0, 0, 0, 0.4)`,border:"1px solid #999",boxSizing:"border-box",zIndex:2e4})}ensureArrowIsAdded(){!this.noArrow&&!this._container.contains(this._arrow)&&this._container.appendChild(this._arrow)}updatePopper(){this._popper&&(this._popper.state.elements.reference=this.targetElement,this._popper.state.options.placement=this.placement,this.open&&this._popper.update())}updateArrow(t){if(this._arrow){let i=this.getArrowVariant(t);if(this._arrow.setAttribute("variant",i),this._content){let o=this._arrow.querySelector("svg"),r=this._arrow.clientWidth,s=this._arrow.clientHeight,n=`-${s-Co}px`,a=(r-s)/2,l=`-${s+a-Co}px`;switch(i){case"bottom":{this._arrow.style.top=n,o.style.transform="rotate(180deg)";break}case"top":{this._arrow.style.bottom=n,o.style.transform="rotate(0deg)";break}case"left":{this._arrow.style.right=l,o.style.transform="rotate(270deg)";break}case"right":{this._arrow.style.left=l,o.style.transform="rotate(90deg)";break}}}}}getArrowVariant(t){if(t.indexOf("bottom")!==-1)return"bottom";if(t.indexOf("top")!==-1)return"top";if(t.indexOf("left")!==-1)return"left";if(t.indexOf("right")!==-1)return"right"}get content(){return this._content||(this._content=this.firstElementChild,this._content.setAttribute("data-popper-content","")),this._content}addTargetClassForOpen(t){t&&t.classList.add($o)}removeTargetClassForOpen(t){t&&t.classList.remove($o)}};To.ID="sd-popover";var ge=To;customElements.get(ge.ID)||customElements.define(ge.ID,ge);var ki=class{getOffsetForIndexAndAlignment(t,i,o,r,s,n){let a=Math.max(0,n*r),l=Math.min(a,t*r),c=Math.max(0,t*r-s+r);switch(i){case"start":return l;case"end":return c;case"center":{let d=Math.round(c+(l-c)/2);return d<Math.ceil(s/2)?0:d>a+Math.floor(s/2)?a:d}case"auto":default:return o>=c&&o<=l?o:o<c?c:l}}debounce(t){let i;return(...o)=>{i&&window.cancelAnimationFrame(i),i=window.requestAnimationFrame(()=>{t(...o),i=null})}}},Gr=new ki;var Xr=":host{display:block;position:relative;contain:layout}:host(:focus){outline:none}:host(:focus-visible) ::slotted([focused]){box-shadow:0 0 0 1px #1467ba inset}.container{width:100%}.container>::slotted(*){width:100%;position:absolute;box-sizing:border-box}.container>::slotted(:not([last])){border-bottom:1px solid #d9d9d9}",Yr=Object.defineProperty,Jr=Object.getOwnPropertyDescriptor,xt=(e,t,i,o)=>{for(var r=o>1?void 0:o?Jr(t,i):t,s=e.length-1,n;s>=0;s--)(n=e[s])&&(r=(o?n(t,i,r):n(r))||r);return o&&r&&Yr(t,i,r),r};var Zr=0,yt,ut=(yt=class extends P{constructor(){super(),this.items=[],this.selectionType="trigger-only",this.id=yt.ID+"_"+Zr++,this.role="listbox",this.itemGenerator=Le,this._lastKnownScrollTop=0,this._lastRenderedScrollTop=0,this._itemsRenderData=[],this._elementCache=new Map,this._visibleItemsNum=0,this._selectedIndices=[],this._focusIndex=-1,this._lastKnownHeight=0,this.onScroll=()=>{this._lastKnownScrollTop=this.scrollTop;let e=this._lastRenderedScrollTop-this._lastKnownScrollTop;Math.abs(e)>=this.itemHeight&&(this._lastRenderedScrollTop=this._lastKnownScrollTop,this.requestUpdate())},this.handleKeyDown=e=>{let t=!0;switch(e.key){case"Down":case"ArrowDown":this.focusIndex=this.normalizeIndex(this.focusIndex+1);break;case"Up":case"ArrowUp":this.focusIndex=this.normalizeIndex(this.focusIndex-1);break;case"Enter":this.handleSelection(this.focusIndex,e.metaKey||e.ctrlKey);break;case"End":this.focusIndex=this.itemCount-1;break;case"PageDown":this.focusIndex=this.normalizeIndex(this.focusIndex+this._visibleItemsNum-1);break;case"Home":this.focusIndex=0;break;case"PageUp":this.focusIndex=this.normalizeIndex(this.focusIndex-this._visibleItemsNum+1);break;default:t=!1;break}t&&(e.preventDefault(),e.stopPropagation())},this._resizeObserver=new ResizeObserver(()=>{this._lastKnownHeight!==this.offsetHeight&&(this._lastKnownHeight=this.offsetHeight,this.requestUpdate())})}get focusTarget(){return this.hasAttribute("focus-target")}set focusTarget(e){this.toggleAttribute("focus-target",e)}get focusIndex(){return this._focusIndex}set focusIndex(e){if(e>=-1&&e<this.itemCount){let t=this._focusIndex;this._focusIndex=e,(e<=this._firstVisibleIndex||this._lastVisibleIndex<=e)&&this.scrollToItem(e),t!=e&&(e==-1&&this.removeAttribute("aria-activedescendant"),this.requestUpdate("focusIndex",t))}}get selectedIndices(){return this._selectedIndices}set selectedIndices(e){e?this._selectedIndices=e.map(t=>Number(t)):this._selectedIndices=[],this.requestUpdate("selectedIndices")}scrollToItem(e,t="auto"){this.scrollTop=Gr.getOffsetForIndexAndAlignment(this.normalizeIndex(e),t,this.scrollTop,this.itemHeight,this.height,this.itemCount),this._lastKnownScrollTop=this.scrollTop}getListItem(e){return!this.shadowRoot||e<this._firstVisibleIndex||this._lastVisibleIndex<e?null:this.querySelector(`[item-index="${e}"]`)}connectedCallback(){super.connectedCallback(),this._resizeObserver.observe(this),this.scrollTop!==this._lastKnownScrollTop&&(this.scrollTop=this._lastKnownScrollTop,this.requestUpdate())}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver.disconnect()}firstUpdated(e){super.firstUpdated(e),this.addEventListener("scroll",this.onScroll),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("click",this.handleClick),this.addEventListener("mousedown",t=>{t.button==1&&t.preventDefault()}),this.addEventListener("auxclick",this.handleClick),this.addEventListener("focus",()=>{this.matches(":focus-visible")&&(this.focusIndex==-1?(this.selectedIndices&&(this.focusIndex=this.selectedIndices[0]),this.focusIndex==-1&&this.itemCount>0&&(this.focusIndex=0)):this.updateFocusedItemAttributes())}),this.addEventListener("blur",()=>{this.focusIndex!=-1&&this.updateFocusedItemAttributes()}),this.selectedIndices.length>0&&this.scrollToItem(this.selectedIndices[0],"center")}updateFocusedItemAttributes(){let e=this.getListItem(this.focusIndex);e&&(this.focusTarget||document.activeElement==this?(e.setAttribute("focused",""),this.setAttribute("aria-activedescendant",e.id)):(e.removeAttribute("focused"),this.removeAttribute("aria-activedescendant")))}static get styles(){return[at`
                 ${X(Xr)}
@@ -124,7 +124,7 @@ var window;(window||={})["@cas-smartdesign/token-selector"]=(()=>{var We=Object.
             </div>
         `}renderIcon(){if(this.icon||this.iconPlaceholder){let e=this.iconBackgroundColor!=null?`--token-icon-background-color: ${this.iconBackgroundColor}`:void 0;return E`
                 <div class="icon-wrapper" style="${V(e)}" role="img">
-                    <div class="icon"></div>
+                    <div part="icon" class="icon"></div>
                 </div>
             `}return b}updated(e){super.updated(e),(e.has("icon")||e.has("iconPlaceholder"))&&(this.icon||this.iconPlaceholder)&&Xt.showImage(this.shadowRoot.querySelector(".icon"),this.icon,this.iconPlaceholder),e.has("disabled")&&!this.disabled&&this.checked&&(this.checked=!1)}setClickHandler(e){this._tokenClickHandler=e}setDeleteHandler(e){this._tokenDeleteHandler=e}},Bt.ID="sd-token",Bt.ensureDefined=()=>{customElements.get(Bt.ID)||customElements.define(Bt.ID,Bt)},Bt);_t([h({type:String,attribute:!0,reflect:!0})],ft.prototype,"value",2);_t([h({type:String,attribute:!0,reflect:!0})],ft.prototype,"type",2);_t([h({type:String})],ft.prototype,"icon",2);_t([h({type:String})],ft.prototype,"iconPlaceholder",2);_t([h({type:String})],ft.prototype,"iconBackgroundColor",2);_t([h({converter:$i,reflect:!0,attribute:"aria-disabled"})],ft.prototype,"disabled",2);_t([h({converter:$i,reflect:!0,attribute:"aria-current"})],ft.prototype,"current",2);_t([h({converter:$i,reflect:!0,attribute:"aria-checked"})],ft.prototype,"checked",1);var qe=ft,Oo=(e,t)=>{let i=document.createElement(qe.ID);return e&&(i.value=e.caption,i.type=e.type,i.icon=e.icon,i.iconPlaceholder=e.iconPlaceholder,i.iconBackgroundColor=e.iconBackgroundColor,i.disabled=e.disabled,i.index=t),i};qe.ensureDefined();var Ue="web application/json",Ii=class{constructor(t,i,o){navigator.clipboard&&(t.addEventListener("copy",()=>{i()||this.writeToClipboard(t)}),t.addEventListener("cut",()=>{i()||(t.removeSelectionOrActiveToken(),this.writeToClipboard(t))}),t.addEventListener("paste",()=>{t.disabled||this.readFromClipboard(o)}))}writeToClipboard(t){let i=t.querySelectorAll("[slot='items'][aria-checked='true']"),o=[];if(i.length>0)i.forEach(r=>o.push(r.index));else if(t.activeTokenIndex!=-1){let r=t.activeTokenElement;r&&o.push(r.index)}if(o.length>0){let r=JSON.stringify(o.map(n=>t.items[n])),s=new Blob([r],{type:Ue});navigator.clipboard.write([new ClipboardItem({[Ue]:s})])}}async readFromClipboard(t){let i=await navigator.clipboard.read();for(let o of i)if(o.types.includes(Ue)){let r=await(await o.getType(Ue)).text(),s=JSON.parse(r);Array.isArray(s)&&t(s)}}},os=":host{display:flex;contain:layout style}:host .additonal-content::slotted(*){align-self:end;flex-shrink:0}:host([drop]) ::slotted(*){pointer-events:none}:host(:not([readonly])) ::slotted(sd-token:last-of-type){margin-right:24px;margin-bottom:4px}.container{display:flex;flex-wrap:wrap;gap:8px;flex-grow:1;min-width:0;margin-top:auto}.container .placeholder{color:#767676;line-height:24px;align-self:flex-end}.input{flex-grow:1;min-width:0;width:100%;margin-top:auto}.input .token-wrapper{display:flex;flex-wrap:wrap;flex:1 0 auto;width:100%;gap:8px}",Ci=class{constructor(t,i){this.tokenSelector=t;let o=new Map,r=s=>{let n=s.target;if(!t.contains(n)){let a=s.addedIndexes;a&&t.removeTokens(a.map(l=>o.get(l)))}o.clear()};t.addEventListener("dragstart",s=>{let n=s.target;if(n instanceof qe){if(n.disabled){s.preventDefault();return}n.setAttribute("aria-checked","true");let a=t.querySelectorAll("[slot='items'][aria-checked='true']");if(a.length>0){let l=Array.from(a).filter(c=>!c.disabled).map((c,d)=>(o.set(d,c.index),t.items[c.index]));if(s.dataTransfer.setData("text/sd-token-selector",JSON.stringify(l)),s.dataTransfer.dropEffect="move",s.dataTransfer.effectAllowed="move",a.length>1){let c=this.createCustomDragImage(n,l.length);s.dataTransfer.setDragImage(c,-14,-14)}window.addEventListener("drop",r,{once:!0})}}}),t.addEventListener("dragenter",s=>{t.setAttribute("drop",""),s.preventDefault()}),t.addEventListener("dragover",s=>s.preventDefault()),t.addEventListener("dragleave",s=>{s.target==t&&t.removeAttribute("drop")}),t.addEventListener("drop",s=>{t.removeAttribute("drop");let n=s.dataTransfer.getData("text/sd-token-selector");if(n)try{let a=JSON.parse(n);Array.isArray(a)&&(s.addedIndexes=i(a),s.preventDefault())}catch{}}),t.addEventListener("dragend",()=>{window.removeEventListener("drop",r),o.clear()})}createCustomDragImage(t,i){let o=t.cloneNode(!0);if(o.setAttribute("aria-disabled","true"),this.tokenSelector.tokenType)o.value=i+" "+this.tokenSelector.tokenType;else{let r=document.createElement("div");r.innerText="+"+(i-1),Object.assign(r.style,{position:"absolute",left:"90%",top:"75%"});let s=document.createElement("div");s.appendChild(o),s.appendChild(r),o=s}return Object.assign(o.style,{height:t.offsetHeight,outline:"none",maxWidth:"500px",position:"absolute",display:"block",left:"-99999px",overflow:"visible",margin:"1px"}),o.slot="items",this.tokenSelector.appendChild(o),requestAnimationFrame(()=>o.remove()),o}},rs=Object.defineProperty,ss=Object.getOwnPropertyDescriptor,tt=(e,t,i,o)=>{for(var r=o>1?void 0:o?ss(t,i):t,s=e.length-1,n;s>=0;s--)(n=e[s])&&(r=(o?n(t,i,r):n(r))||r);return o&&r&&rs(t,i,r),r};function ns(e,t){let i;return function(...o){i!=null&&clearTimeout(i),i=window.setTimeout(()=>e(...o),t)}}var Po=(e=>(e.RemoveOnly="remove-only",e.Multi="multi",e))(Po||{}),wt,Y=(wt=class extends P{constructor(){super(...arguments),this.selectionMode="multi",this.items=[],this.selectedIndexes=[],this._tokenGenerator=Oo,this._autoSuggestItemGenerator=Le,this.additionalTokenCommittingKeys=[],this._activeTokenIndex=-1,this.handleInputKeyDown=(e,t)=>{if((e.key==="Enter"||this.additionalTokenCommittingKeys.includes(e.key))&&t.value){e.preventDefault(),e.stopPropagation(),this.commitTokenValue(t.value);return}switch(e.key){case"Escape":{e.preventDefault(),e.stopPropagation(),this.tokenSuggestPopover.hide();break}case"Tab":{this.commitTokenValue(t.value),this.tokenSuggestPopover.hide();break}default:this.handleKeyDown(e)}},this.handleKeyDown=e=>{switch(e.key){case"ArrowLeft":{this.hasInputValue||this.updateActiveToken(-1);break}case"ArrowRight":{this.hasInputValue||this.updateActiveToken(1);break}case"Enter":{if(!this.hasInputValue&&this.activeTokenIndex!=-1){let t=this.activeTokenElement;e.getModifierState("Control")?t.checked=!t.checked:(t.checked=!0,this.onTokenClick(t,!1)),document.activeElement!=this&&this.focus()}break}case"Backspace":{this.hasInputValue||(this.activeTokenIndex==-1?this.updateActiveToken(-1):this.removeSelectionOrActiveToken());break}case"Clear":case"Delete":{this.removeSelectionOrActiveToken();break}case"a":{!this.hasInputValue&&e.getModifierState("Control")&&(this.querySelectorAll("[slot='items']").forEach(t=>t.checked=!0),e.preventDefault(),e.stopPropagation());break}}},this.handleWindowPointerDown=e=>{let t=this.inputElement;!t||!t.value||e.composedPath().some(i=>{if(i instanceof HTMLElement&&(e.composedPath().indexOf(t)>-1||i.getAttribute("popover-for")==="token-autosuggest-popover"))return!0})||this.commitTokenValue(t.value)},this.debouncedShowTokenSuggestPopover=ns(this.showFilteredTokenSuggestions.bind(this),200)}static get styles(){return X(os)}get tokenGenerator(){return this._tokenGenerator}set tokenGenerator(e){this._tokenGenerator=e,this.render()}get autoSuggestItemGenerator(){return this._autoSuggestItemGenerator}set autoSuggestItemGenerator(e){this._autoSuggestItemGenerator=e,this._tokenSuggestPopover&&(this._tokenSuggestPopover.list.itemGenerator=e)}setAdditionalTokenCommittingKeys(e){this.additionalTokenCommittingKeys=e}openSuggestions(){this.inputElement&&(this.focus(),this.tokenSuggestPopover.show())}focus(){this.inputElement?this.inputElement.focus():this.shadowRoot.querySelector(".container").focus()}render(){return this.selectionMode=="remove-only"?E`<div class="container" tabindex="0">
                       <slot name="items"