@cas-smartdesign/token-selector 0.20.1 → 0.21.0

package/dist/token-selector.mjs

@@ -1,17 +1,18 @@
-import { LitElement as x, unsafeCSS as T, html as m, nothing as I } from "lit";
-import { property as a } from "lit/decorators/property.js";
+import { LitElement as w, unsafeCSS as T, html as v, nothing as x } from "lit";
+import { property as d } from "lit/decorators/property.js";
 import "@cas-smartdesign/lit-input";
 import S from "@cas-smartdesign/field-validation-message";
 import { generator as _ } from "@cas-smartdesign/list-item";
 import L from "@cas-smartdesign/popover";
 import y from "@cas-smartdesign/virtual-list";
-import { KeyDownDelegator as C } from "@cas-smartdesign/element-utils";
-import { ifDefined as A } from "lit/directives/if-defined.js";
+import { KeyDownDelegator as A } from "@cas-smartdesign/element-utils";
+import { ifDefined as C } from "lit/directives/if-defined.js";
 import { unsafeSVG as P } from "lit/directives/unsafe-svg.js";
 import D from "@cas-smartdesign/image-tools";
-class O {
-  constructor(e, t, i, n) {
-    this.inputElement = e, this.notSelectedTokensProvider = t, this.initializeCallback = n, this.filter = (s, o) => s ? o.filter((d) => d.disabled || d.deactivated ? !1 : d.caption && d.caption.toLowerCase().includes(s)) : o, y.ensureDefined(), this._tokenList = new y(), this._tokenList.style.minWidth = "250px", this._tokenList.style.maxHeight = "49vh", this._tokenList.itemHeight = 50, this._tokenList.addEventListener("pointerdown", () => {
+let O = 0;
+class q {
+  constructor(e, t, i, s) {
+    this.inputElement = e, this.notSelectedTokensProvider = t, this.initializeCallback = s, this.filter = (n, o) => n ? o.filter((a) => a.disabled || a.deactivated ? !1 : a.caption && a.caption.toLowerCase().includes(n)) : o, y.ensureDefined(), this._tokenList = new y(), this._tokenList.id = "sd_token_suggest_popover_list_" + O++, this._tokenList.style.minWidth = "250px", this._tokenList.style.maxHeight = "49vh", this._tokenList.itemHeight = 50, this._tokenList.addEventListener("pointerdown", () => {
       this.pointerDown = !0, window.addEventListener(
         "pointerup",
         () => {
@@ -19,16 +20,16 @@ class O {
         },
         { once: !0, capture: !0 }
       );
-    }), this._tokenList.addEventListener("selection", (s) => {
-      const o = s.detail.index, d = this._suggestItems[o];
-      i(d), this.hide();
-    }), this._tokenList.addEventListener("data-request", (s) => {
-      this.lastRequestedStartIndex = s.detail.startIndex, this.lastRequestedStopIndex = s.detail.stopIndex, this.pointerDown || this._tokenList.increaseWidthOnNextRenderIfNeeded(), this._tokenList.items = this._suggestItems.slice(
+    }), this._tokenList.addEventListener("selection", (n) => {
+      const o = n.detail.index, a = this._suggestItems[o];
+      i(a), this.hide();
+    }), this._tokenList.addEventListener("data-request", (n) => {
+      this.lastRequestedStartIndex = n.detail.startIndex, this.lastRequestedStopIndex = n.detail.stopIndex, this.pointerDown || this._tokenList.increaseWidthOnNextRenderIfNeeded(), this._tokenList.items = this._suggestItems.slice(
         this.lastRequestedStartIndex,
         this.lastRequestedStopIndex + 1
       );
-    }), new C(this._tokenList, (s, o, d) => {
-      this._tokenList.dispatchEvent(new KeyboardEvent(s.type, s)), !d && !this.isOpened && this.show();
+    }), new A(this._tokenList, (n, o, a) => {
+      this._tokenList.dispatchEvent(new KeyboardEvent(n.type, n)), !a && !this.isOpened && this.show();
     }).connect(e);
   }
   show() {
@@ -67,25 +68,25 @@ class O {
     return this._suggestItems[this._tokenList.focusIndex];
   }
 }
-const q = `:host{flex-shrink:0;max-width:100%}:host([aria-checked=true]){position:relative}:host([aria-checked=true]):before{content:"";position:absolute;left:0;top:0;height:12px;width:12px;background:#1467ba url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20fill='none'%3e%3cpath%20stroke='%23FFF'%20stroke-width='2'%20d='M9%204%205%208%203%206'/%3e%3c/svg%3e") no-repeat center center}.container{display:flex;height:28px;background-color:var(--sd-token-background-color, #f3f3f3);border:var(--sd-token-focused-border, var(--sd-token-border));box-sizing:border-box}.container .icon-wrapper{display:flex;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:100%;overflow:hidden;background-color:var(--sd-token-icon-background-color, transparent)}.container .icon-wrapper .icon{height:100%;width:100%;object-fit:contain;background-size:cover;background-repeat:no-repeat;background-position:center}.container .value{display:inline-block;align-self:center;padding:0 8px;font-family:Segoe UI,Lucida Sans,Arial,sans-serif;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.container .delete-button-wrapper{display:flex;align-self:center;height:16px;width:16px;padding-right:8px;opacity:.5}.container .delete-button-wrapper:hover{cursor:pointer;filter:brightness(10%);opacity:1}`, M = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\r
+const M = `:host{flex-shrink:0;max-width:100%;height:28px}:host([aria-checked=true]){position:relative}:host([aria-checked=true]):before{content:"";position:absolute;left:0;top:0;height:12px;width:12px;background:#1467ba url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20fill='none'%3e%3cpath%20stroke='%23FFF'%20stroke-width='2'%20d='M9%204%205%208%203%206'/%3e%3c/svg%3e") no-repeat center center}.container{display:flex;height:100%;background-color:var(--sd-token-background-color, #f3f3f3);border:var(--sd-token-focused-border, var(--sd-token-border));box-sizing:border-box}.container .icon-wrapper{display:flex;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:100%;overflow:hidden;background-color:var(--sd-token-icon-background-color, transparent)}.container .icon-wrapper .icon{height:100%;width:100%;object-fit:contain;background-size:cover;background-repeat:no-repeat;background-position:center}.container .value{display:inline-block;align-self:center;padding:0 8px;font-family:Segoe UI,Lucida Sans,Arial,sans-serif;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.container .delete-button-wrapper{display:flex;align-self:center;height:16px;width:16px;padding-right:8px;opacity:.5}.container .delete-button-wrapper:hover{cursor:pointer;filter:brightness(10%);opacity:1}`, $ = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\r
   <path d="m3.5 12.5 9-9m-9 0 9 9" style="fill:none;stroke:#333;stroke-linecap:square;stroke-width:1.1px"/>\r
 </svg>`;
-var $ = Object.defineProperty, R = Object.getOwnPropertyDescriptor, g = (r, e, t, i) => {
-  for (var n = i > 1 ? void 0 : i ? R(e, t) : e, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (n = (i ? o(e, t, n) : o(n)) || n);
-  return i && n && $(e, t, n), n;
+var R = Object.defineProperty, N = Object.getOwnPropertyDescriptor, f = (r, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? N(e, t) : e, n = r.length - 1, o; n >= 0; n--)
+    (o = r[n]) && (s = (i ? o(e, t, s) : o(s)) || s);
+  return i && s && R(e, t, s), s;
 };
-const w = {
+const I = {
   fromAttribute: (r) => r == "true",
   toAttribute: (r) => r
 };
 var u;
-const p = (u = class extends x {
+const p = (u = class extends w {
   constructor() {
     super(...arguments), this.value = "", this.type = "", this.icon = "", this.iconPlaceholder = "", this.iconBackgroundColor = "", this._checked = !1;
   }
   static get styles() {
-    return T(q);
+    return T(M);
   }
   set checked(e) {
     const t = this._checked;
@@ -96,7 +97,12 @@ const p = (u = class extends x {
   }
   firstUpdated(e) {
     super.firstUpdated(e), this.tabIndex = -1, this.setAttribute("role", "option"), this.setAttribute("aria-selected", "true"), this.addEventListener("click", (i) => {
-      i.stopPropagation(), i.getModifierState("Control") ? this.checked = !this.checked : (this.checked = !0, this._tokenClickHandler && this._tokenClickHandler(this.index));
+      const s = window.getSelection();
+      if (s && s.type == "Range" || this.disabled)
+        return;
+      i.stopPropagation();
+      const n = i.getModifierState("Control");
+      n ? this.checked = !this.checked : this.checked = !0, this._tokenClickHandler && this._tokenClickHandler(this.index, n);
     });
     const t = this.shadowRoot.querySelector(".delete-button-wrapper");
     t && t.addEventListener("click", (i) => {
@@ -104,26 +110,26 @@ const p = (u = class extends x {
     });
   }
   render() {
-    return m`
+    return v`
             <div class="container">
                 <slot name="before-icon"></slot>
                 ${this.renderIcon()}
                 <slot name="after-icon"></slot>
                 <div class="value">${this.value}</div>
-                ${this.disabled ? I : m` <div class="delete-button-wrapper">${P(M)}</div> `}
+                ${this.disabled ? x : v` <div class="delete-button-wrapper">${P($)}</div> `}
             </div>
         `;
   }
   renderIcon() {
     if (this.icon || this.iconPlaceholder) {
       const e = this.iconBackgroundColor != null ? `--sd-token-icon-background-color: ${this.iconBackgroundColor}` : void 0;
-      return m`
-                <div class="icon-wrapper" style="${A(e)}" role="img">
+      return v`
+                <div class="icon-wrapper" style="${C(e)}" role="img">
                     <div part="icon" class="icon"></div>
                 </div>
             `;
     }
-    return I;
+    return x;
   }
   updated(e) {
     super.updated(e), (e.has("icon") || e.has("iconPlaceholder")) && (this.icon || this.iconPlaceholder) && D.showImage(this.shadowRoot.querySelector(".icon"), this.icon, this.iconPlaceholder), e.has("disabled") && !this.disabled && this.checked && (this.checked = !1);
@@ -137,41 +143,42 @@ const p = (u = class extends x {
 }, u.ID = "sd-token", u.ensureDefined = () => {
   customElements.get(u.ID) || customElements.define(u.ID, u);
 }, u);
-g([
-  a({ type: String, attribute: !0, reflect: !0 })
+f([
+  d({ type: String, attribute: !0, reflect: !0 })
 ], p.prototype, "value", 2);
-g([
-  a({ type: String, attribute: !0, reflect: !0 })
+f([
+  d({ type: String, attribute: !0, reflect: !0 })
 ], p.prototype, "type", 2);
-g([
-  a({ type: String })
+f([
+  d({ type: String })
 ], p.prototype, "icon", 2);
-g([
-  a({ type: String })
+f([
+  d({ type: String })
 ], p.prototype, "iconPlaceholder", 2);
-g([
-  a({ type: String })
+f([
+  d({ type: String })
 ], p.prototype, "iconBackgroundColor", 2);
-g([
-  a({ converter: w, reflect: !0, attribute: "aria-disabled" })
+f([
+  d({ converter: I, reflect: !0, attribute: "aria-disabled" })
 ], p.prototype, "disabled", 2);
-g([
-  a({ converter: w, reflect: !0, attribute: "aria-current" })
+f([
+  d({ converter: I, reflect: !0, attribute: "aria-current" })
 ], p.prototype, "current", 2);
-g([
-  a({ converter: w, reflect: !0, attribute: "aria-checked" })
+f([
+  d({ converter: I, reflect: !0, attribute: "aria-checked" })
 ], p.prototype, "checked", 1);
 let b = p;
-const N = (r, e) => {
+const F = (r, e) => {
   const t = document.createElement(b.ID);
   return r && (t.value = r.caption, t.type = r.type, t.icon = r.icon, t.iconPlaceholder = r.iconPlaceholder, t.iconBackgroundColor = r.iconBackgroundColor, t.disabled = r.disabled, t.index = e), t;
 };
 b.ensureDefined();
 const k = "web application/json";
-class F {
+class G {
   constructor(e, t, i) {
     navigator.clipboard && (e.addEventListener("copy", () => {
-      t() || this.writeToClipboard(e);
+      const s = window.getSelection();
+      (!s || s.type != "Range") && !t() && this.writeToClipboard(e);
     }), e.addEventListener("cut", () => {
       t() || (e.removeSelectionOrActiveToken(), this.writeToClipboard(e));
     }), e.addEventListener("paste", () => {
@@ -181,16 +188,16 @@ class F {
   writeToClipboard(e) {
     const t = e.querySelectorAll("[slot='items'][aria-checked='true']"), i = [];
     if (t.length > 0)
-      t.forEach((n) => i.push(n.index));
+      t.forEach((s) => i.push(s.index));
     else if (e.activeTokenIndex != -1) {
-      const n = e.activeTokenElement;
-      n && i.push(n.index);
+      const s = e.activeTokenElement;
+      s && i.push(s.index);
     }
     if (i.length > 0) {
-      const n = JSON.stringify(i.map((o) => e.items[o])), s = new Blob([n], { type: k });
+      const s = JSON.stringify(i.map((o) => e.items[o])), n = new Blob([s], { type: k });
       navigator.clipboard.write([
         new ClipboardItem({
-          [k]: s
+          [k]: n
         })
       ]);
     }
@@ -199,56 +206,56 @@ class F {
     const t = await navigator.clipboard.read();
     for (const i of t)
       if (i.types.includes(k)) {
-        const s = await (await i.getType(k)).text(), o = JSON.parse(s);
+        const n = await (await i.getType(k)).text(), o = JSON.parse(n);
         Array.isArray(o) && e(o);
       }
   }
 }
-const G = ":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){max-width:calc(100% - 24px);margin-right:24px;margin-bottom:4px}:host ::slotted(sd-token){--sd-token-border: 1px solid transparent;margin:2px}.input:focus-within ::slotted(sd-token[aria-current=true]),.container:focus-within ::slotted(sd-token[aria-current=true]){outline:2px solid #1467ba;--sd-token-focused-border: 1px solid #fff}.container{outline:none;display:flex;flex-wrap:wrap;gap:4px;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 H {
+const H = ":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){max-width:calc(100% - 24px);margin-right:24px;margin-bottom:4px}:host ::slotted(sd-token){--sd-token-border: 1px solid transparent;margin:1px}.input[focus-visible]:focus-within ::slotted(sd-token[aria-current=true]),.container:focus-visible ::slotted(sd-token[aria-current=true]){outline:1px solid #1467ba;--sd-token-focused-border: 1px solid #fff}.input[focus-visible]:focus-within ::slotted(sd-token[aria-current=true][aria-disabled=true]:not([aria-haspopup])),.container:focus-visible ::slotted(sd-token[aria-current=true][aria-disabled=true]:not([aria-haspopup])){outline-color:#767676}.container{outline:none;display:flex;flex-wrap:wrap;gap:6px;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:6px}";
+class B {
   constructor(e, t) {
     this.tokenSelector = e;
-    const i = /* @__PURE__ */ new Map(), n = (s) => {
-      const o = s.target;
+    const i = /* @__PURE__ */ new Map(), s = (n) => {
+      const o = n.target;
       if (e.removeAttribute("drag-source"), !e.contains(o)) {
-        const d = s.addedIndexes;
-        d && e.removeTokens(d.map((v) => i.get(v)));
+        const a = n.addedIndexes;
+        a && e.removeTokens(a.map((m) => i.get(m)));
       }
       i.clear();
     };
-    e.addEventListener("dragstart", (s) => {
-      const o = s.target;
+    e.addEventListener("dragstart", (n) => {
+      const o = n.target;
       if (o instanceof b) {
         if (o.disabled) {
-          s.preventDefault();
+          n.preventDefault();
           return;
         }
         e.setAttribute("drag-source", ""), o.setAttribute("aria-checked", "true");
-        const d = e.querySelectorAll("[slot='items'][aria-checked='true']");
-        if (d.length > 0) {
-          const v = Array.from(d).filter((f) => !f.disabled).map((f, E) => (i.set(E, f.index), e.items[f.index]));
-          if (s.dataTransfer.setData("text/sd-token-selector", JSON.stringify(v)), s.dataTransfer.dropEffect = "move", s.dataTransfer.effectAllowed = "move", d.length > 1) {
-            const f = this.createCustomDragImage(o, v.length);
-            s.dataTransfer.setDragImage(f, -14, -14);
+        const a = e.querySelectorAll("[slot='items'][aria-checked='true']");
+        if (a.length > 0) {
+          const m = Array.from(a).filter((g) => !g.disabled).map((g, E) => (i.set(E, g.index), e.items[g.index]));
+          if (n.dataTransfer.setData("text/sd-token-selector", JSON.stringify(m)), n.dataTransfer.dropEffect = "move", n.dataTransfer.effectAllowed = "move", a.length > 1) {
+            const g = this.createCustomDragImage(o, m.length);
+            n.dataTransfer.setDragImage(g, -14, -14);
           }
-          window.addEventListener("drop", n, { once: !0 });
+          window.addEventListener("drop", s, { once: !0 });
         }
       }
-    }), e.addEventListener("dragenter", (s) => {
-      e.setAttribute("drop", ""), s.preventDefault();
-    }), e.addEventListener("dragover", (s) => s.preventDefault()), e.addEventListener("dragleave", (s) => {
-      s.target == e && e.removeAttribute("drop");
-    }), e.addEventListener("drop", (s) => {
+    }), e.addEventListener("dragenter", (n) => {
+      e.setAttribute("drop", ""), n.preventDefault();
+    }), e.addEventListener("dragover", (n) => n.preventDefault()), e.addEventListener("dragleave", (n) => {
+      n.target == e && e.removeAttribute("drop");
+    }), e.addEventListener("drop", (n) => {
       e.removeAttribute("drop");
-      const o = s.dataTransfer.getData("text/sd-token-selector");
+      const o = n.dataTransfer.getData("text/sd-token-selector");
       if (o)
         try {
-          const d = JSON.parse(o);
-          Array.isArray(d) && (s.addedIndexes = t(d), s.preventDefault());
+          const a = JSON.parse(o);
+          Array.isArray(a) && (n.addedIndexes = t(a), n.preventDefault());
         } catch {
         }
     }), e.addEventListener("dragend", () => {
-      window.removeEventListener("drop", n), e.removeAttribute("drag-source"), i.clear();
+      window.removeEventListener("drop", s), e.removeAttribute("drag-source"), i.clear();
     });
   }
   createCustomDragImage(e, t) {
@@ -256,14 +263,14 @@ class H {
     if (i.setAttribute("aria-disabled", "true"), this.tokenSelector.tokenType)
       i.value = t + " " + this.tokenSelector.tokenType;
     else {
-      const n = document.createElement("div");
-      n.innerText = "+" + (t - 1), Object.assign(n.style, {
+      const s = document.createElement("div");
+      s.innerText = "+" + (t - 1), Object.assign(s.style, {
         position: "absolute",
         left: "90%",
         top: "75%"
       });
-      const s = document.createElement("div");
-      s.appendChild(i), s.appendChild(n), i = s;
+      const n = document.createElement("div");
+      n.appendChild(i), n.appendChild(s), i = n;
     }
     return Object.assign(i.style, {
       height: e.offsetHeight,
@@ -277,23 +284,23 @@ class H {
     }), i.slot = "items", this.tokenSelector.appendChild(i), requestAnimationFrame(() => i.remove()), i;
   }
 }
-var B = Object.defineProperty, V = Object.getOwnPropertyDescriptor, h = (r, e, t, i) => {
-  for (var n = i > 1 ? void 0 : i ? V(e, t) : e, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (n = (i ? o(e, t, n) : o(n)) || n);
-  return i && n && B(e, t, n), n;
+var V = Object.defineProperty, K = Object.getOwnPropertyDescriptor, c = (r, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? K(e, t) : e, n = r.length - 1, o; n >= 0; n--)
+    (o = r[n]) && (s = (i ? o(e, t, s) : o(s)) || s);
+  return i && s && V(e, t, s), s;
 };
-function K(r, e) {
+function j(r, e) {
   let t;
   return function(...i) {
     t != null && clearTimeout(t), t = window.setTimeout(() => r(...i), e);
   };
 }
-var j = /* @__PURE__ */ ((r) => (r.RemoveOnly = "remove-only", r.Multi = "multi", r))(j || {}), c;
-const l = (c = class extends x {
+var U = /* @__PURE__ */ ((r) => (r.RemoveOnly = "remove-only", r.Multi = "multi", r))(U || {}), h;
+const l = (h = class extends w {
   constructor() {
-    super(...arguments), this.selectionMode = "multi", this.items = [], this.selectedIndexes = [], this._tokenGenerator = N, this._autoSuggestItemGenerator = _, this.additionalTokenCommittingKeys = [], this._activeTokenIndex = -1, this.handleInputKeyDown = (e, t) => {
+    super(...arguments), this.selectionMode = "multi", this.items = [], this.selectedIndexes = [], this._tokenGenerator = F, this._autoSuggestItemGenerator = _, 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);
+        e.preventDefault(), e.stopPropagation(), this.commitTokenValue(t.value), this.inputElement.removeAttribute("focus-visible");
         return;
       }
       switch (e.key) {
@@ -302,7 +309,7 @@ const l = (c = class extends x {
           break;
         }
         case "Tab": {
-          this.commitTokenValue(t.value), this.tokenSuggestPopover.hide();
+          this.commitTokenValue(t.value), this.tokenSuggestPopover.hide(), this.inputElement.removeAttribute("focus-visible");
           break;
         }
         default:
@@ -320,8 +327,8 @@ const l = (c = class extends x {
         }
         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();
+            const t = this.activeTokenElement, i = e.getModifierState("Control");
+            i ? t.checked = !t.checked : t.checked = !0, this.onTokenClick(t, !1, i), document.activeElement != this && this.focus();
           }
           break;
         }
@@ -340,23 +347,23 @@ const l = (c = class extends x {
         }
       }
     }, this.selectOrAddItems = (e) => {
-      const t = [], i = e.map((n, s) => {
-        const o = n.caption == null ? -1 : this.findIndex(n);
-        return o != -1 && !this.items[o].disabled && !this.selectedIndexes.includes(o) ? (t.push(s), o) : -1;
-      }).filter((n) => n != -1);
+      const t = [], i = e.map((s, n) => {
+        const o = s.caption == null ? -1 : this.findIndex(s);
+        return o != -1 && !this.items[o].disabled && !this.selectedIndexes.includes(o) ? (t.push(n), o) : -1;
+      }).filter((s) => s != -1);
       return i.length > 0 && this.handleTokenSelection(i), t;
     }, this.handleWindowPointerDown = (e) => {
       const t = this.inputElement;
       if (!t || !t.value)
         return;
-      e.composedPath().some((n) => {
-        if (n instanceof HTMLElement && (e.composedPath().indexOf(t) > -1 || n.getAttribute("popover-for") === "token-autosuggest-popover"))
+      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 = K(this.showFilteredTokenSuggestions.bind(this), 200);
+    }, this.debouncedShowTokenSuggestPopover = j(this.showFilteredTokenSuggestions.bind(this), 200);
   }
   static get styles() {
-    return T(G);
+    return T(H);
   }
   get tokenGenerator() {
     return this._tokenGenerator;
@@ -377,17 +384,18 @@ const l = (c = class extends x {
     this.inputElement && (this.focus(), this.tokenSuggestPopover.show());
   }
   focus() {
-    this.inputElement ? this.inputElement.focus() : this.shadowRoot.querySelector(".container").focus();
+    const e = this.inputElement;
+    e ? e.focus() : this.shadowRoot.querySelector(".container").focus();
   }
   render() {
-    return this.selectionMode == "remove-only" ? m`<div class="container" tabindex="0">
+    return this.selectionMode == "remove-only" ? v`<div class="container" tabindex="${this.disabled ? -1 : 0}">
                       <slot name="items"
-                          >${this.placeholder ? m`<span part="remove-only-placeholder" class="placeholder"
+                          >${this.placeholder ? v`<span part="remove-only-placeholder" class="placeholder"
                                     >${this.placeholder}</span
-                                >` : I}</slot
+                                >` : x}</slot
                       >
                   </div>
-                  <slot class="additonal-content" name="additional-content" @focusin=${this.clearCheckedTokens}></slot>` : m`
+                  <slot class="additonal-content" name="additional-content" @focusin=${this.clearCheckedTokens}></slot>` : v`
                   <sd-lit-input
                       class="input"
                       .extendedPrefix=${!0}
@@ -398,31 +406,35 @@ const l = (c = class extends x {
                       .alwaysFloatLabel=${this.selectedIndexes.length > 0}
                       .placeholder=${this.selectedIndexes.length == 0 ? this.placeholder : ""}
                       .disabled=${this.disabled}
+                      aria-autocomplete="list"
                       tabindex="0"
+                      @focus=${(e) => e.target.setAttribute("focused", "")}
                       ><div class="token-wrapper" slot="prefix"><slot name="items"></slot></div>
                   </sd-lit-input>
                   <slot class="additonal-content" name="additional-content" @focusin=${this.clearCheckedTokens}></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) => {
+    super.firstUpdated(e), this.setAttribute("role", "listbox"), this.setAttribute("aria-multiselectable", "true"), !this.hasAttribute("tabIndex") && !this.disabled && (this.tabIndex = 0), this.addEventListener("focusout", (t) => {
       const i = t.relatedTarget;
       !this.contains(i) && !this.shadowRoot.contains(i) && this.clearCheckedTokens();
     }), this.addEventListener("focusin", () => {
-      this.selectionMode == "remove-only" && this.activeTokenIndex == -1 && this.items.length > 0 && (this.activeTokenIndex = 0);
-    }), new F(
+      this.selectionMode == "remove-only" && this.activeTokenIndex == -1 && this.items.length > 0 && !this.disabled && (this.activeTokenIndex = 0);
+    }), new G(
       this,
       () => {
         var t;
         return (t = this.inputElement) == null ? void 0 : t.value;
       },
       (t) => this.selectOrAddItems(t)
-    ), new H(this, (t) => this.selectOrAddItems(t));
+    ), new B(this, (t) => this.selectOrAddItems(t));
   }
   clearCheckedTokens() {
     this.querySelectorAll("[slot='items'][aria-checked='true']").forEach(
-      (e) => e.checked = !1
+      (t) => t.checked = !1
     );
+    const e = this.inputElement;
+    e && (e.removeAttribute("focus-visible"), e.removeAttribute("focused"));
   }
   removeSelectionOrActiveToken() {
     if (!this.disabled) {
@@ -437,10 +449,13 @@ const l = (c = class extends x {
     }
   }
   updateActiveToken(e) {
+    var i;
+    if (this.disabled)
+      return;
     const t = this.querySelectorAll("[slot='items']").length - 1;
-    if (this.activeTokenIndex == -1 ? e < 0 && (this.activeTokenIndex = t) : this.activeTokenIndex == t && e > 0 && this.selectionMode == "multi" ? (this.activeTokenIndex = -1, this.focus()) : this.activeTokenIndex = Math.max(0, Math.min(t, this.activeTokenIndex + e)), this.activeTokenIndex > -1 && this.scrollHeight > this.offsetHeight) {
-      const i = this.activeTokenElement;
-      i.scrollIntoViewIfNeeded ? i.scrollIntoViewIfNeeded() : i.scrollIntoView();
+    if (this.activeTokenIndex == -1 ? e < 0 && (this.activeTokenIndex = t) : this.activeTokenIndex == t && e > 0 && this.selectionMode == "multi" ? (this.activeTokenIndex = -1, this.focus()) : this.activeTokenIndex = Math.max(0, Math.min(t, this.activeTokenIndex + e)), this.activeTokenIndex > -1 && ((i = this.inputElement) == null || i.setAttribute("focus-visible", ""), this.scrollHeight > this.offsetHeight)) {
+      const s = this.activeTokenElement;
+      s.scrollIntoViewIfNeeded ? s.scrollIntoViewIfNeeded() : s.scrollIntoView();
     }
   }
   commitTokenValue(e) {
@@ -450,8 +465,8 @@ const l = (c = class extends x {
       const i = this.tokenSuggestPopover.focusedSuggestToken;
       if (i) {
         if (!i.disabled) {
-          const n = this.findIndex(i);
-          this.handleTokenSelection([n]), this.tokenSuggestPopover.hide();
+          const s = this.findIndex(i);
+          this.handleTokenSelection([s]), this.tokenSuggestPopover.hide();
         }
         return;
       }
@@ -471,7 +486,7 @@ const l = (c = class extends x {
         t.addEventListener("immediate-value-change", (i) => this.handleInputValueChange(i)), t.addEventListener("keydown", (i) => this.handleInputKeyDown(i, 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();
+    (e.size == 0 || e.has("selectionMode") || e.has("items") || e.has("selectedIndexes") || e.has("disabled")) && this.updateItems(), e.has("inputLabel") && (this.inputLabel ? this.setAttribute("aria-label", this.inputLabel) : this.removeAttribute("aria-label"));
   }
   handleInputValueChange(e) {
     e.detail.value ? (this.activeTokenIndex = -1, this.cancelSearch = !1, this.debouncedShowTokenSuggestPopover(), window.addEventListener("pointerdown", this.handleWindowPointerDown)) : (this.tokenSuggestPopover.hide(), this.cancelSearch = !0);
@@ -483,7 +498,7 @@ const l = (c = class extends x {
     return !this.selectedIndexes.includes(e);
   }
   get tokenSuggestPopover() {
-    return !this._tokenSuggestPopover && this.inputElement && (this._tokenSuggestPopover = new O(
+    return !this._tokenSuggestPopover && this.inputElement && (this._tokenSuggestPopover = new q(
       this.inputElement,
       () => this.items.filter((e, t) => !e.disabled && this.isTokenNotSelected(t)),
       (e) => {
@@ -491,7 +506,7 @@ const l = (c = class extends x {
         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.appendChild(e.popover), this.inputElement.setAttribute("aria-controls", e.list.id), this.dispatchEvent(new CustomEvent("auto-suggest-initialized")), e.popover.addEventListener("close", () => {
           this.inputElement.value && !this.contains(document.activeElement) && (this.inputElement.value = "");
         });
       }
@@ -502,18 +517,21 @@ const l = (c = class extends x {
       return;
     this.activeTokenIndex = -1;
     const e = this.inputElement;
-    e && (!this._tokenSuggestPopover || !this._tokenSuggestPopover.isOpened) && (e.value = ""), this.querySelectorAll("[slot='items']").forEach((n) => {
-      this.removeChild(n);
+    e && (!this._tokenSuggestPopover || !this._tokenSuggestPopover.isOpened) && (e.value = ""), this.querySelectorAll("[slot='items']").forEach((s) => {
+      this.removeChild(s);
     });
     const t = document.createDocumentFragment();
     let i = [];
-    this.selectionMode == "remove-only" ? i = this.items.map((n) => this.disableIfNeeded(n)) : this.selectedIndexes.forEach((n) => {
-      i.push(this.disableIfNeeded(this.items[n]));
-    }), i.forEach((n) => {
-      const s = this.tokenGenerator(n, this.findIndex(n));
-      s.slot = "items", t.appendChild(s), s.id || (s.id = window.crypto.getRandomValues(new Uint32Array(1))[0].toString(16)), s.setClickHandler(() => this.onTokenClick(s, !0)), s.addEventListener("click", () => {
-        document.activeElement != this && this.focus();
-      }), s.setDeleteHandler((o) => this.removeTokens([o]));
+    this.selectionMode == "remove-only" ? i = this.items.map((s) => this.disableIfNeeded(s)) : this.selectedIndexes.forEach((s) => {
+      i.push(this.disableIfNeeded(this.items[s]));
+    }), i.forEach((s) => {
+      const n = this.tokenGenerator(s, this.findIndex(s));
+      n.slot = "items", t.appendChild(n), n.id || (n.id = window.crypto.getRandomValues(new Uint32Array(1))[0].toString(16)), n.setClickHandler((o, a) => this.onTokenClick(n, !0, a)), n.addEventListener("click", () => {
+        var a;
+        (a = this.inputElement) == null || a.removeAttribute("focus-visible");
+        const o = window.getSelection();
+        (!o || o.type != "Range") && document.activeElement != this && this.focus();
+      }), n.setDeleteHandler((o) => this.removeTokens([o]));
     }), this.appendChild(t), this._tokenSuggestPopover && this._tokenSuggestPopover.refreshItems();
   }
   removeTokens(e) {
@@ -538,11 +556,11 @@ const l = (c = class extends x {
         ));
       }
   }
-  onTokenClick(e, t) {
-    let i;
-    this.querySelectorAll("[slot='items']").forEach((n, s) => {
-      e == n ? i = s : n.setAttribute("aria-checked", "false");
-    }), this.activeTokenIndex = i, this.setAttribute("aria-activedescendant", this.activeTokenElement.id), this._tokenSuggestPopover && this._tokenSuggestPopover.isOpened && this._tokenSuggestPopover.hide(), this.dispatchEvent(
+  onTokenClick(e, t, i) {
+    let s;
+    this.querySelectorAll("[slot='items']").forEach((n, o) => {
+      e == n ? s = o : i || n.setAttribute("aria-checked", "false");
+    }), this.activeTokenIndex = s, this.setAttribute("aria-activedescendant", this.activeTokenElement.id), this._tokenSuggestPopover && this._tokenSuggestPopover.isOpened && this._tokenSuggestPopover.hide(), i || this.dispatchEvent(
       new CustomEvent("token-clicked", {
         detail: {
           index: e.index,
@@ -605,32 +623,32 @@ const l = (c = class extends x {
     var e;
     return !!((e = this.inputElement) != null && e.value);
   }
-}, c.ID = "sd-token-selector", c.ensureDefined = () => {
-  b.ensureDefined(), customElements.get(c.ID) || customElements.define(c.ID, c);
-}, c.shadowRootOptions = {
-  ...x.shadowRootOptions,
+}, h.ID = "sd-token-selector", h.ensureDefined = () => {
+  b.ensureDefined(), customElements.get(h.ID) || customElements.define(h.ID, h);
+}, h.shadowRootOptions = {
+  ...w.shadowRootOptions,
   delegatesFocus: !0
-}, c);
-h([
-  a({ type: String, attribute: "selection-mode", reflect: !0 })
+}, h);
+c([
+  d({ type: String, attribute: "selection-mode", reflect: !0 })
 ], l.prototype, "selectionMode", 2);
-h([
-  a({ type: Array, attribute: !1 })
+c([
+  d({ type: Array, attribute: !1 })
 ], l.prototype, "items", 2);
-h([
-  a({ type: Array, attribute: !1 })
+c([
+  d({ type: Array, attribute: !1 })
 ], l.prototype, "selectedIndexes", 2);
-h([
-  a({ type: String, reflect: !0 })
+c([
+  d({ type: String, reflect: !0 })
 ], l.prototype, "placeholder", 2);
-h([
-  a({ type: String, reflect: !0, attribute: "suggest-list-class" })
+c([
+  d({ type: String, reflect: !0, attribute: "suggest-list-class" })
 ], l.prototype, "suggestListClass", 2);
-h([
-  a({ type: String, reflect: !0, attribute: "input-label" })
+c([
+  d({ type: String, reflect: !0, attribute: "input-label" })
 ], l.prototype, "inputLabel", 2);
-h([
-  a({
+c([
+  d({
     converter: {
       fromAttribute: (r) => r == "true",
       toAttribute: (r) => r
@@ -639,25 +657,25 @@ h([
     attribute: "aria-disabled"
   })
 ], l.prototype, "disabled", 2);
-h([
-  a({ type: String, attribute: !0 })
+c([
+  d({ type: String, attribute: !0 })
 ], l.prototype, "validationMessage", 2);
-h([
-  a({ type: String, attribute: !0 })
+c([
+  d({ type: String, attribute: !0 })
 ], l.prototype, "validationIconSrc", 2);
-h([
-  a({ converter: S.levelConverter, attribute: !0, reflect: !0 })
+c([
+  d({ converter: S.levelConverter, attribute: !0, reflect: !0 })
 ], l.prototype, "validationLevel", 2);
-h([
-  a({ type: String, reflect: !0, attribute: "token-type" })
+c([
+  d({ type: String, reflect: !0, attribute: "token-type" })
 ], l.prototype, "tokenType", 2);
-h([
-  a({ type: Boolean, reflect: !0, attribute: "case-sensitive" })
+c([
+  d({ type: Boolean, reflect: !0, attribute: "case-sensitive" })
 ], l.prototype, "caseSensitive", 2);
-let se = l;
+let ne = l;
 export {
-  j as SelectionMode,
-  se as default,
-  N as generator
+  U as SelectionMode,
+  ne as default,
+  F as generator
 };
 //# sourceMappingURL=token-selector.mjs.map