@supersoniks/concorde 1.1.45 → 1.1.46

package/concorde-core.es.js

@@ -134,6 +134,7 @@ class Objects$1 {
 const _API = class {
   constructor(config) {
     this.addHTTPResponse = false;
+    this.cache = "default";
     this.serviceURL = config.serviceURL;
     if (!this.serviceURL)
       this.serviceURL = document.location.origin;
@@ -145,6 +146,7 @@ const _API = class {
     this.authToken = config.authToken;
     this.addHTTPResponse = config.addHTTPResponse || false;
     this.credentials = config.credentials;
+    this.cache = config.cache || "default";
   }
   set token(token) {
     this._token = token;
@@ -252,7 +254,7 @@ const _API = class {
     });
     if (!_API.loadingGetPromises.has(mapKey)) {
       const promise = new Promise(async (resolve) => {
-        const result2 = await fetch(url, { headers, credentials: this.credentials });
+        const result2 = await fetch(url, { headers, credentials: this.credentials, cache: this.cache });
         const handledResult = await this.handleResult(result2, lastCall);
         resolve(handledResult);
       });
@@ -360,19 +362,22 @@ class Format$1 {
 function isComplex(value) {
   return typeof value === "object" && value != null;
 }
-class PublisherProxy$1 {
+const _PublisherProxy = class {
   constructor(target, parentProxPub) {
     this._proxies_ = /* @__PURE__ */ new Map();
     this._key_ = "";
+    this._is_savable_ = false;
     this._invalidateListeners_ = /* @__PURE__ */ new Set();
     this._assignListeners_ = /* @__PURE__ */ new Set();
     this._mutationListeners_ = /* @__PURE__ */ new Set();
     this._fillListeners_ = /* @__PURE__ */ new Set();
     this._templateFillListeners_ = /* @__PURE__ */ new Set();
     this._lockInternalMutationPublishing_ = false;
+    this._instanceCounter_ = 0;
     this._value_ = target;
     this.parent = parentProxPub || null;
     this.root = this;
+    this._instanceCounter_ = 0;
     while (this.root.parent) {
       this.root = this.root.parent;
     }
@@ -387,6 +392,7 @@ class PublisherProxy$1 {
     this._fillListeners_.clear();
     this._templateFillListeners_.clear();
     this._proxies_.clear();
+    _PublisherProxy.instances.delete(this._instanceCounter_);
   }
   hasListener() {
     return this._templateFillListeners_.size > 0 || this._assignListeners_.size > 0 || this._invalidateListeners_.size > 0 || this._mutationListeners_.size > 0 || this._fillListeners_.size > 0;
@@ -395,6 +401,12 @@ class PublisherProxy$1 {
     this._mutationListeners_.forEach((handler) => handler());
     if (lockInternalMutationsTransmission)
       return;
+    if (!PublisherManager$1.changed && this._is_savable_) {
+      PublisherManager$1.changed = true;
+      PublisherManager$1.saveId++;
+      const saveId = PublisherManager$1.saveId;
+      setTimeout(() => PublisherManager$1.getInstance().saveToLocalStorage(saveId), 1e3);
+    }
     if (this.parent) {
       this.parent._publishInternalMutation_();
     }
@@ -543,28 +555,97 @@ class PublisherProxy$1 {
     }
     return this._value_;
   }
-}
+  get $tag() {
+    if (!this._instanceCounter_) {
+      _PublisherProxy.instancesCounter++;
+      this._instanceCounter_ = _PublisherProxy.instancesCounter;
+    }
+    _PublisherProxy.instances.set(this._instanceCounter_, this);
+    const str = '<reactive-publisher-proxy publisher="' + this._instanceCounter_ + '"></reactive-publisher-proxy>';
+    return str;
+  }
+};
+let PublisherProxy$1 = _PublisherProxy;
+PublisherProxy$1.instances = /* @__PURE__ */ new Map();
+PublisherProxy$1.instancesCounter = 0;
 const _PublisherManager = class {
   constructor() {
+    this.enabledLocaStorageProxies = [];
     this.publishers = /* @__PURE__ */ new Map();
+    this.localStorageData = {};
+    this.isLocalStrorageReady = null;
+    this.initialisedData = [];
     if (_PublisherManager.instance != null)
       throw "Singleton / use getInstance";
     _PublisherManager.instance = this;
+    this.isLocalStrorageReady = this.cleanStorageData();
+  }
+  async cleanStorageData() {
+    return new Promise((resolve) => {
+      const doiIt = async () => {
+        try {
+          let compressedData = localStorage.getItem("publisher-proxies-data");
+          let localStorageJSON = null;
+          if (compressedData)
+            localStorageJSON = await this.decompress(compressedData, "gzip");
+          if (localStorageJSON) {
+            try {
+              this.localStorageData = JSON.parse(localStorageJSON);
+            } catch (e2) {
+              this.localStorageData = {};
+            }
+          } else {
+            compressedData = await this.compress("{}", "gzip");
+            localStorage.setItem("publisher-proxies-data", compressedData);
+            this.localStorageData = {};
+          }
+          const expires = new Date().getTime() - 1e3 * 60 * 60 * 12;
+          for (const key in this.localStorageData) {
+            const item = this.localStorageData[key];
+            if (item.lastModifiationMS < expires) {
+              delete this.localStorageData[key];
+            }
+          }
+          resolve(true);
+        } catch (e2) {
+          window.requestAnimationFrame(() => {
+            resolve(false);
+          });
+          console.log("no publisher cache in this browser");
+        }
+      };
+      doiIt();
+    });
   }
   static getInstance() {
     if (_PublisherManager.instance == null)
       return new _PublisherManager();
     return _PublisherManager.instance;
   }
-  static get(id) {
-    return _PublisherManager.getInstance().get(id);
+  static get(id, options) {
+    return _PublisherManager.getInstance().get(id, options);
   }
   static delete(id) {
     return _PublisherManager.getInstance().delete(id);
   }
-  get(id) {
-    if (!this.publishers.has(id))
-      this.publishers.set(id, new Publisher({}));
+  async setLocalData(publisher, id) {
+    var _a2;
+    await this.isLocalStrorageReady;
+    publisher.set(((_a2 = this.localStorageData[id + "\xA4page:>" + document.location.pathname]) == null ? void 0 : _a2.data) || publisher.get());
+  }
+  get(id, options) {
+    const hasLocalStorage = (options == null ? void 0 : options.localStorageMode) === "enabled";
+    if (!this.publishers.has(id)) {
+      const data = {};
+      const publisher2 = new Publisher(data);
+      this.set(id, publisher2);
+    }
+    const publisher = this.publishers.get(id);
+    if (hasLocalStorage && this.initialisedData.indexOf(id) === -1) {
+      publisher._is_savable_ = true;
+      this.initialisedData.push(id);
+      this.setLocalData(publisher, id);
+    }
     return this.publishers.get(id);
   }
   set(id, publisher) {
@@ -576,8 +657,75 @@ const _PublisherManager = class {
     this.publishers.delete(id);
     return true;
   }
+  async saveToLocalStorage(saveId = 0) {
+    if (saveId !== _PublisherManager.saveId && saveId % 10 != 0)
+      return;
+    try {
+      if (!_PublisherManager.changed || _PublisherManager.saving)
+        return;
+      _PublisherManager.saving = true;
+      _PublisherManager.changed = false;
+      const keys = Array.from(this.publishers.keys());
+      let hasChanged = false;
+      for (const key of keys) {
+        const publisher = this.publishers.get(key);
+        if (!(publisher == null ? void 0 : publisher._is_savable_))
+          continue;
+        const data = publisher == null ? void 0 : publisher.get();
+        if (!data)
+          continue;
+        this.localStorageData[key + "\xA4page:>" + document.location.pathname] = {
+          lastModifiationMS: new Date().getTime(),
+          data
+        };
+        hasChanged = true;
+      }
+      if (hasChanged) {
+        const compressedData = await this.compress(JSON.stringify(this.localStorageData), "gzip");
+        localStorage.setItem("publisher-proxies-data", compressedData);
+      }
+      _PublisherManager.saving = false;
+      if (_PublisherManager.changed) {
+        _PublisherManager.saveId++;
+        const saveId2 = _PublisherManager.saveId;
+        setTimeout(() => this.saveToLocalStorage(saveId2), 1e3);
+      }
+    } catch (e2) {
+      _PublisherManager.saving = false;
+    }
+  }
+  async compress(string, encoding) {
+    const byteArray = new TextEncoder().encode(string);
+    const win = window;
+    const cs = new win.CompressionStream(encoding);
+    const writer = cs.writable.getWriter();
+    writer.write(byteArray);
+    writer.close();
+    const result = await new Response(cs.readable).arrayBuffer();
+    const arrayBufferView = new Uint8Array(result);
+    let str = "";
+    for (let i2 = 0; i2 < arrayBufferView.length; i2++) {
+      str += String.fromCharCode(arrayBufferView[i2]);
+    }
+    return btoa(str);
+  }
+  async decompress(str, encoding) {
+    const decodedString = atob(str);
+    const arrayBufferViewFromLocalStorage = Uint8Array.from(decodedString, (c2) => c2.charCodeAt(0));
+    const byteArray = arrayBufferViewFromLocalStorage.buffer;
+    const win = window;
+    const cs = new win.DecompressionStream(encoding);
+    const writer = cs.writable.getWriter();
+    writer.write(byteArray);
+    writer.close();
+    const result = await new Response(cs.readable).arrayBuffer();
+    return new TextDecoder().decode(result);
+  }
 };
 let PublisherManager$1 = _PublisherManager;
+PublisherManager$1.changed = false;
+PublisherManager$1.saving = false;
+PublisherManager$1.saveId = 0;
 PublisherManager$1.instance = null;
 class Publisher extends PublisherProxy$1 {
   constructor(target, parentProxPub = null) {
@@ -598,6 +746,7 @@ class Publisher extends PublisherProxy$1 {
           "offInternalMutation",
           "set",
           "get",
+          "$tag",
           "_templateFillListeners_",
           "_fillListeners_",
           "_assignListeners_",
@@ -613,7 +762,9 @@ class Publisher extends PublisherProxy$1 {
           "_proxies_",
           "parent",
           "_value_",
-          "_lockInternalMutationPublishing_"
+          "_is_savable_",
+          "_lockInternalMutationPublishing_",
+          "_instanceCounter_"
         ].includes(sKey))
           return publisherInstance[sKey];
         if (!publisherInstance._proxies_.has(sKey)) {
@@ -630,6 +781,14 @@ class Publisher extends PublisherProxy$1 {
           publisherInstance._value_ = vValue;
           return true;
         }
+        if (sKey == "_is_savable_") {
+          publisherInstance._is_savable_ = vValue;
+          return true;
+        }
+        if (sKey == "_instanceCounter_") {
+          publisherInstance._instanceCounter_ = vValue;
+          return true;
+        }
         if (!publisherInstance._proxies_.has(sKey)) {
           const newPublisher = new Publisher({}, publisherInstance);
           newPublisher._proxies_.set("_parent_", thisProxy);
@@ -677,6 +836,26 @@ class Publisher extends PublisherProxy$1 {
 }
 if (typeof module != "undefined")
   module.exports = { Publisher, PublisherManager: PublisherManager$1 };
+class PublisherWebComponent extends HTMLElement {
+  constructor() {
+    super();
+    this.publisherId = "";
+    this.onAssign = (value) => {
+      this.innerHTML = value.toString();
+    };
+  }
+  connectedCallback() {
+    var _a2;
+    this.publisherId = this.getAttribute("publisher") || "";
+    this.publisher = PublisherProxy$1.instances.get(parseInt(this.publisherId));
+    (_a2 = this.publisher) == null ? void 0 : _a2.onAssign(this.onAssign);
+  }
+  disconnectedCallback() {
+    var _a2;
+    (_a2 = this.publisher) == null ? void 0 : _a2.offAssign(this.onAssign);
+  }
+}
+customElements.define("reactive-publisher-proxy", PublisherWebComponent);
 const _DataBindObserver = class {
   static disable() {
     if (!this.enabled)
@@ -906,7 +1085,7 @@ function t$3(t2) {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const o$9 = ({ finisher: e2, descriptor: t2 }) => (o2, n2) => {
+const o$a = ({ finisher: e2, descriptor: t2 }) => (o2, n2) => {
   var r2;
   if (void 0 === n2) {
     const n3 = null !== (r2 = o2.originalKey) && void 0 !== r2 ? r2 : o2.key, i2 = null != t2 ? { kind: "method", placement: "prototype", key: n3, descriptor: t2(o2.key) } : { ...o2, key: n3 };
@@ -925,7 +1104,7 @@ const o$9 = ({ finisher: e2, descriptor: t2 }) => (o2, n2) => {
  * SPDX-License-Identifier: BSD-3-Clause
  */
 function i$5(i2, n2) {
-  return o$9({ descriptor: (o2) => {
+  return o$a({ descriptor: (o2) => {
     const t2 = { get() {
       var o3, n3;
       return null !== (n3 = null === (o3 = this.renderRoot) || void 0 === o3 ? void 0 : o3.querySelector(i2)) && void 0 !== n3 ? n3 : null;
@@ -945,11 +1124,11 @@ function i$5(i2, n2) {
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-var n$6;
-const e$6 = null != (null === (n$6 = window.HTMLSlotElement) || void 0 === n$6 ? void 0 : n$6.prototype.assignedElements) ? (o2, n2) => o2.assignedElements(n2) : (o2, n2) => o2.assignedNodes(n2).filter((o3) => o3.nodeType === Node.ELEMENT_NODE);
+var n$7;
+const e$6 = null != (null === (n$7 = window.HTMLSlotElement) || void 0 === n$7 ? void 0 : n$7.prototype.assignedElements) ? (o2, n2) => o2.assignedElements(n2) : (o2, n2) => o2.assignedNodes(n2).filter((o3) => o3.nodeType === Node.ELEMENT_NODE);
 function l$6(n2) {
   const { slot: l2, selector: t2 } = null != n2 ? n2 : {};
-  return o$9({ descriptor: (o2) => ({ get() {
+  return o$a({ descriptor: (o2) => ({ get() {
     var o3;
     const r2 = "slot" + (l2 ? `[name=${l2}]` : ":not([name])"), i2 = null === (o3 = this.renderRoot) || void 0 === o3 ? void 0 : o3.querySelector(r2), s2 = null != i2 ? e$6(i2, n2) : [];
     return t2 ? s2.filter((o4) => o4.matches(t2)) : s2;
@@ -960,9 +1139,9 @@ function l$6(n2) {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-function o$8(o2, n2, r2) {
+function o$9(o2, n2, r2) {
   let l2, s2 = o2;
-  return "object" == typeof o2 ? (s2 = o2.slot, l2 = o2) : l2 = { flatten: n2 }, r2 ? l$6({ slot: s2, flatten: n2, selector: r2 }) : o$9({ descriptor: (e2) => ({ get() {
+  return "object" == typeof o2 ? (s2 = o2.slot, l2 = o2) : l2 = { flatten: n2 }, r2 ? l$6({ slot: s2, flatten: n2, selector: r2 }) : o$a({ descriptor: (e2) => ({ get() {
     var e3, t2;
     const o3 = "slot" + (s2 ? `[name=${s2}]` : ":not([name])"), n3 = null === (e3 = this.renderRoot) || void 0 === e3 ? void 0 : e3.querySelector(o3);
     return null !== (t2 = null == n3 ? void 0 : n3.assignedNodes(l2)) && void 0 !== t2 ? t2 : [];
@@ -1035,18 +1214,22 @@ const Subscriber$1 = (superClass, type) => {
         this.style.removeProperty("display");
     }
     connectedCallback() {
+      _SubscriberElement.instanceCounter++;
       if (this.hasAttribute("lazyRendering")) {
         const options = {
           root: null,
-          rootMargin: Math.max(window.innerWidth * 0.1, window.innerHeight * 0.1) + "px"
+          rootMargin: Math.max(window.innerWidth, window.innerHeight) + "px"
         };
         let firstView = true;
         const iObserver = new IntersectionObserver((entries) => {
           for (const e2 of entries) {
             if (firstView && e2.isIntersecting) {
+              this.addDebugger();
               firstView = false;
               this.initWording();
               this.initPublisher();
+              iObserver.disconnect();
+              break;
             }
           }
         }, options);
@@ -1054,10 +1237,9 @@ const Subscriber$1 = (superClass, type) => {
       } else {
         this.initWording();
         this.initPublisher();
+        this.addDebugger();
       }
-      this.addDebugger();
       super.connectedCallback();
-      _SubscriberElement.instanceCounter++;
     }
     disconnectedCallback() {
       var _a2;
@@ -1147,7 +1329,8 @@ const Subscriber$1 = (superClass, type) => {
         password2 = this.getAncestorAttributeValue("password");
       }
       const credentials = this.getAncestorAttributeValue("credentials") || void 0;
-      return { serviceURL, token, userName, password: password2, authToken, tokenProvider, addHTTPResponse, credentials };
+      const cache = this.getAttribute("cache") || void 0 || void 0;
+      return { serviceURL, token, userName, password: password2, authToken, tokenProvider, addHTTPResponse, credentials, cache };
     }
     async initWording() {
       let hasWording = false;
@@ -1160,15 +1343,16 @@ const Subscriber$1 = (superClass, type) => {
       }
       if (!hasWording)
         return;
-      const publisher = PublisherManager$1.getInstance().get("sonic-wording");
+      const publisher = PublisherManager$1.get("sonic-wording");
       const wordingProvider = this.getAncestorAttributeValue("wordingProvider");
       const api2 = new API(this.getApiConfiguration());
       if (wordingProvider) {
         const wordings = [];
+        const publisherValue = publisher.get();
         for (const p2 of propNames) {
           if (p2.indexOf("wording_") == 0) {
             const p8 = p2.substring(8);
-            if (!publisher.get()[p2]) {
+            if (!publisherValue[p2]) {
               publisher[p2] = "...";
               wordings.push(p8);
             }
@@ -1212,7 +1396,7 @@ const Subscriber$1 = (superClass, type) => {
         if (this.bindPublisher) {
           mng.set(publisherId, this.bindPublisher());
         }
-        let pub = mng.get(publisherId);
+        let pub = mng.get(publisherId, { localStorageMode: this.getAttribute("localStorage") || "disabled" });
         this.dataProvider = publisherId;
         if (this.hasAttribute("subDataProvider")) {
           const dataPath = this.getAttribute("subDataProvider");
@@ -1310,8 +1494,8 @@ const TemplatesContainer$1 = (superClass) => {
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const t$2 = window, e$5 = t$2.ShadowRoot && (void 0 === t$2.ShadyCSS || t$2.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, s$6 = Symbol(), n$5 = /* @__PURE__ */ new WeakMap();
-class o$7 {
+const t$2 = window, e$5 = t$2.ShadowRoot && (void 0 === t$2.ShadyCSS || t$2.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, s$6 = Symbol(), n$6 = /* @__PURE__ */ new WeakMap();
+class o$8 {
   constructor(t2, e2, n2) {
     if (this._$cssResult$ = true, n2 !== s$6)
       throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
@@ -1322,7 +1506,7 @@ class o$7 {
     const s2 = this.t;
     if (e$5 && void 0 === t2) {
       const e2 = void 0 !== s2 && 1 === s2.length;
-      e2 && (t2 = n$5.get(s2)), void 0 === t2 && ((this.o = t2 = new CSSStyleSheet()).replaceSync(this.cssText), e2 && n$5.set(s2, t2));
+      e2 && (t2 = n$6.get(s2)), void 0 === t2 && ((this.o = t2 = new CSSStyleSheet()).replaceSync(this.cssText), e2 && n$6.set(s2, t2));
     }
     return t2;
   }
@@ -1330,7 +1514,7 @@ class o$7 {
     return this.cssText;
   }
 }
-const r$5 = (t2) => new o$7("string" == typeof t2 ? t2 : t2 + "", void 0, s$6), i$4 = (t2, ...e2) => {
+const r$5 = (t2) => new o$8("string" == typeof t2 ? t2 : t2 + "", void 0, s$6), i$4 = (t2, ...e2) => {
   const n2 = 1 === t2.length ? t2[0] : e2.reduce((e3, s2, n3) => e3 + ((t3) => {
     if (true === t3._$cssResult$)
       return t3.cssText;
@@ -1338,7 +1522,7 @@ const r$5 = (t2) => new o$7("string" == typeof t2 ? t2 : t2 + "", void 0, s$6),
       return t3;
     throw Error("Value passed to 'css' function must be a 'css' function result: " + t3 + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
   })(s2) + t2[n3 + 1], t2[0]);
-  return new o$7(n2, t2, s$6);
+  return new o$8(n2, t2, s$6);
 }, S$2 = (s2, n2) => {
   e$5 ? s2.adoptedStyleSheets = n2.map((t2) => t2 instanceof CSSStyleSheet ? t2 : t2.styleSheet) : n2.forEach((e2) => {
     const n3 = document.createElement("style"), o2 = t$2.litNonce;
@@ -1356,7 +1540,7 @@ const r$5 = (t2) => new o$7("string" == typeof t2 ? t2 : t2 + "", void 0, s$6),
  * SPDX-License-Identifier: BSD-3-Clause
  */
 var s$5;
-const e$4 = window, r$4 = e$4.trustedTypes, h$3 = r$4 ? r$4.emptyScript : "", o$6 = e$4.reactiveElementPolyfillSupport, n$4 = { toAttribute(t2, i2) {
+const e$4 = window, r$4 = e$4.trustedTypes, h$3 = r$4 ? r$4.emptyScript : "", o$7 = e$4.reactiveElementPolyfillSupport, n$5 = { toAttribute(t2, i2) {
   switch (i2) {
     case Boolean:
       t2 = t2 ? h$3 : null;
@@ -1384,8 +1568,8 @@ const e$4 = window, r$4 = e$4.trustedTypes, h$3 = r$4 ? r$4.emptyScript : "", o$
       }
   }
   return s2;
-} }, a$2 = (t2, i2) => i2 !== t2 && (i2 == i2 || t2 == t2), l$5 = { attribute: true, type: String, converter: n$4, reflect: false, hasChanged: a$2 };
-class d$1 extends HTMLElement {
+} }, a$3 = (t2, i2) => i2 !== t2 && (i2 == i2 || t2 == t2), l$5 = { attribute: true, type: String, converter: n$5, reflect: false, hasChanged: a$3 };
+class d$2 extends HTMLElement {
   constructor() {
     super(), this._$Ei = /* @__PURE__ */ new Map(), this.isUpdatePending = false, this.hasUpdated = false, this._$El = null, this.u();
   }
@@ -1489,7 +1673,7 @@ class d$1 extends HTMLElement {
     var e2;
     const r2 = this.constructor._$Ep(t2, s2);
     if (void 0 !== r2 && true === s2.reflect) {
-      const h2 = (void 0 !== (null === (e2 = s2.converter) || void 0 === e2 ? void 0 : e2.toAttribute) ? s2.converter : n$4).toAttribute(i2, s2.type);
+      const h2 = (void 0 !== (null === (e2 = s2.converter) || void 0 === e2 ? void 0 : e2.toAttribute) ? s2.converter : n$5).toAttribute(i2, s2.type);
       this._$El = t2, null == h2 ? this.removeAttribute(r2) : this.setAttribute(r2, h2), this._$El = null;
     }
   }
@@ -1497,13 +1681,13 @@ class d$1 extends HTMLElement {
     var s2;
     const e2 = this.constructor, r2 = e2._$Ev.get(t2);
     if (void 0 !== r2 && this._$El !== r2) {
-      const t3 = e2.getPropertyOptions(r2), h2 = "function" == typeof t3.converter ? { fromAttribute: t3.converter } : void 0 !== (null === (s2 = t3.converter) || void 0 === s2 ? void 0 : s2.fromAttribute) ? t3.converter : n$4;
+      const t3 = e2.getPropertyOptions(r2), h2 = "function" == typeof t3.converter ? { fromAttribute: t3.converter } : void 0 !== (null === (s2 = t3.converter) || void 0 === s2 ? void 0 : s2.fromAttribute) ? t3.converter : n$5;
       this._$El = r2, this[r2] = h2.fromAttribute(i2, t3.type), this._$El = null;
     }
   }
   requestUpdate(t2, i2, s2) {
     let e2 = true;
-    void 0 !== t2 && (((s2 = s2 || this.constructor.getPropertyOptions(t2)).hasChanged || a$2)(this[t2], i2) ? (this._$AL.has(t2) || this._$AL.set(t2, i2), true === s2.reflect && this._$El !== t2 && (void 0 === this._$EC && (this._$EC = /* @__PURE__ */ new Map()), this._$EC.set(t2, s2))) : e2 = false), !this.isUpdatePending && e2 && (this._$E_ = this._$Ej());
+    void 0 !== t2 && (((s2 = s2 || this.constructor.getPropertyOptions(t2)).hasChanged || a$3)(this[t2], i2) ? (this._$AL.has(t2) || this._$AL.set(t2, i2), true === s2.reflect && this._$El !== t2 && (void 0 === this._$EC && (this._$EC = /* @__PURE__ */ new Map()), this._$EC.set(t2, s2))) : e2 = false), !this.isUpdatePending && e2 && (this._$E_ = this._$Ej());
   }
   async _$Ej() {
     this.isUpdatePending = true;
@@ -1564,14 +1748,14 @@ class d$1 extends HTMLElement {
   firstUpdated(t2) {
   }
 }
-d$1.finalized = true, d$1.elementProperties = /* @__PURE__ */ new Map(), d$1.elementStyles = [], d$1.shadowRootOptions = { mode: "open" }, null == o$6 || o$6({ ReactiveElement: d$1 }), (null !== (s$5 = e$4.reactiveElementVersions) && void 0 !== s$5 ? s$5 : e$4.reactiveElementVersions = []).push("1.6.1");
+d$2.finalized = true, d$2.elementProperties = /* @__PURE__ */ new Map(), d$2.elementStyles = [], d$2.shadowRootOptions = { mode: "open" }, null == o$7 || o$7({ ReactiveElement: d$2 }), (null !== (s$5 = e$4.reactiveElementVersions) && void 0 !== s$5 ? s$5 : e$4.reactiveElementVersions = []).push("1.6.1");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
 var t$1;
-const i$3 = window, s$4 = i$3.trustedTypes, e$3 = s$4 ? s$4.createPolicy("lit-html", { createHTML: (t2) => t2 }) : void 0, o$5 = `lit$${(Math.random() + "").slice(9)}$`, n$3 = "?" + o$5, l$4 = `<${n$3}>`, h$2 = document, r$3 = (t2 = "") => h$2.createComment(t2), d = (t2) => null === t2 || "object" != typeof t2 && "function" != typeof t2, u$2 = Array.isArray, c$3 = (t2) => u$2(t2) || "function" == typeof (null == t2 ? void 0 : t2[Symbol.iterator]), v = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, a$1 = /-->/g, f$2 = />/g, _ = RegExp(`>|[ 	
+const i$3 = window, s$4 = i$3.trustedTypes, e$3 = s$4 ? s$4.createPolicy("lit-html", { createHTML: (t2) => t2 }) : void 0, o$6 = `lit$${(Math.random() + "").slice(9)}$`, n$4 = "?" + o$6, l$4 = `<${n$4}>`, h$2 = document, r$3 = (t2 = "") => h$2.createComment(t2), d$1 = (t2) => null === t2 || "object" != typeof t2 && "function" != typeof t2, u$2 = Array.isArray, c$3 = (t2) => u$2(t2) || "function" == typeof (null == t2 ? void 0 : t2[Symbol.iterator]), v = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, a$2 = /-->/g, f$2 = />/g, _ = RegExp(`>|[ 	
 \f\r](?:([^\\s"'>=/]+)([ 	
 \f\r]*=[ 	
 \f\r]*(?:[^ 	
@@ -1582,9 +1766,9 @@ const i$3 = window, s$4 = i$3.trustedTypes, e$3 = s$4 ? s$4.createPolicy("lit-ht
     const s3 = t2[i3];
     let e2, u3, c2 = -1, g2 = 0;
     for (; g2 < s3.length && (d2.lastIndex = g2, u3 = d2.exec(s3), null !== u3); )
-      g2 = d2.lastIndex, d2 === v ? "!--" === u3[1] ? d2 = a$1 : void 0 !== u3[1] ? d2 = f$2 : void 0 !== u3[2] ? ($$1.test(u3[2]) && (h2 = RegExp("</" + u3[2], "g")), d2 = _) : void 0 !== u3[3] && (d2 = _) : d2 === _ ? ">" === u3[0] ? (d2 = null != h2 ? h2 : v, c2 = -1) : void 0 === u3[1] ? c2 = -2 : (c2 = d2.lastIndex - u3[2].length, e2 = u3[1], d2 = void 0 === u3[3] ? _ : '"' === u3[3] ? p$2 : m$1) : d2 === p$2 || d2 === m$1 ? d2 = _ : d2 === a$1 || d2 === f$2 ? d2 = v : (d2 = _, h2 = void 0);
+      g2 = d2.lastIndex, d2 === v ? "!--" === u3[1] ? d2 = a$2 : void 0 !== u3[1] ? d2 = f$2 : void 0 !== u3[2] ? ($$1.test(u3[2]) && (h2 = RegExp("</" + u3[2], "g")), d2 = _) : void 0 !== u3[3] && (d2 = _) : d2 === _ ? ">" === u3[0] ? (d2 = null != h2 ? h2 : v, c2 = -1) : void 0 === u3[1] ? c2 = -2 : (c2 = d2.lastIndex - u3[2].length, e2 = u3[1], d2 = void 0 === u3[3] ? _ : '"' === u3[3] ? p$2 : m$1) : d2 === p$2 || d2 === m$1 ? d2 = _ : d2 === a$2 || d2 === f$2 ? d2 = v : (d2 = _, h2 = void 0);
     const y2 = d2 === _ && t2[i3 + 1].startsWith("/>") ? " " : "";
-    r2 += d2 === v ? s3 + l$4 : c2 >= 0 ? (n2.push(e2), s3.slice(0, c2) + "$lit$" + s3.slice(c2) + o$5 + y2) : s3 + o$5 + (-2 === c2 ? (n2.push(void 0), i3) : y2);
+    r2 += d2 === v ? s3 + l$4 : c2 >= 0 ? (n2.push(e2), s3.slice(0, c2) + "$lit$" + s3.slice(c2) + o$6 + y2) : s3 + o$6 + (-2 === c2 ? (n2.push(void 0), i3) : y2);
   }
   const u2 = r2 + (t2[s2] || "<?>") + (2 === i2 ? "</svg>" : "");
   if (!Array.isArray(t2) || !t2.hasOwnProperty("raw"))
@@ -1606,10 +1790,10 @@ class C {
         if (l2.hasAttributes()) {
           const t3 = [];
           for (const i3 of l2.getAttributeNames())
-            if (i3.endsWith("$lit$") || i3.startsWith(o$5)) {
+            if (i3.endsWith("$lit$") || i3.startsWith(o$6)) {
               const s2 = a2[d2++];
               if (t3.push(i3), void 0 !== s2) {
-                const t4 = l2.getAttribute(s2.toLowerCase() + "$lit$").split(o$5), i4 = /([.?@])?(.*)/.exec(s2);
+                const t4 = l2.getAttribute(s2.toLowerCase() + "$lit$").split(o$6), i4 = /([.?@])?(.*)/.exec(s2);
                 c2.push({ type: 1, index: h2, name: i4[2], strings: t4, ctor: "." === i4[1] ? M : "?" === i4[1] ? k : "@" === i4[1] ? H : S$1 });
               } else
                 c2.push({ type: 6, index: h2 });
@@ -1618,7 +1802,7 @@ class C {
             l2.removeAttribute(i3);
         }
         if ($$1.test(l2.tagName)) {
-          const t3 = l2.textContent.split(o$5), i3 = t3.length - 1;
+          const t3 = l2.textContent.split(o$6), i3 = t3.length - 1;
           if (i3 > 0) {
             l2.textContent = s$4 ? s$4.emptyScript : "";
             for (let s2 = 0; s2 < i3; s2++)
@@ -1627,12 +1811,12 @@ class C {
           }
         }
       } else if (8 === l2.nodeType)
-        if (l2.data === n$3)
+        if (l2.data === n$4)
           c2.push({ type: 2, index: h2 });
         else {
           let t3 = -1;
-          for (; -1 !== (t3 = l2.data.indexOf(o$5, t3 + 1)); )
-            c2.push({ type: 7, index: h2 }), t3 += o$5.length - 1;
+          for (; -1 !== (t3 = l2.data.indexOf(o$6, t3 + 1)); )
+            c2.push({ type: 7, index: h2 }), t3 += o$6.length - 1;
         }
       h2++;
     }
@@ -1647,7 +1831,7 @@ function P(t2, i2, s2 = t2, e2) {
   if (i2 === x$1)
     return i2;
   let r2 = void 0 !== e2 ? null === (o2 = s2._$Co) || void 0 === o2 ? void 0 : o2[e2] : s2._$Cl;
-  const u2 = d(i2) ? void 0 : i2._$litDirective$;
+  const u2 = d$1(i2) ? void 0 : i2._$litDirective$;
   return (null == r2 ? void 0 : r2.constructor) !== u2 && (null === (n2 = null == r2 ? void 0 : r2._$AO) || void 0 === n2 || n2.call(r2, false), void 0 === u2 ? r2 = void 0 : (r2 = new u2(t2), r2._$AT(t2, s2, e2)), void 0 !== e2 ? (null !== (l2 = (h2 = s2)._$Co) && void 0 !== l2 ? l2 : h2._$Co = [])[e2] = r2 : s2._$Cl = r2), void 0 !== r2 && (i2 = P(t2, r2._$AS(t2, i2.values), r2, e2)), i2;
 }
 class V {
@@ -1701,7 +1885,7 @@ class N {
     return this._$AB;
   }
   _$AI(t2, i2 = this) {
-    t2 = P(this, t2, i2), d(t2) ? t2 === b$1 || null == t2 || "" === t2 ? (this._$AH !== b$1 && this._$AR(), this._$AH = b$1) : t2 !== this._$AH && t2 !== x$1 && this.g(t2) : void 0 !== t2._$litType$ ? this.$(t2) : void 0 !== t2.nodeType ? this.T(t2) : c$3(t2) ? this.k(t2) : this.g(t2);
+    t2 = P(this, t2, i2), d$1(t2) ? t2 === b$1 || null == t2 || "" === t2 ? (this._$AH !== b$1 && this._$AR(), this._$AH = b$1) : t2 !== this._$AH && t2 !== x$1 && this.g(t2) : void 0 !== t2._$litType$ ? this.$(t2) : void 0 !== t2.nodeType ? this.T(t2) : c$3(t2) ? this.k(t2) : this.g(t2);
   }
   O(t2, i2 = this._$AB) {
     return this._$AA.parentNode.insertBefore(t2, i2);
@@ -1710,7 +1894,7 @@ class N {
     this._$AH !== t2 && (this._$AR(), this._$AH = this.O(t2));
   }
   g(t2) {
-    this._$AH !== b$1 && d(this._$AH) ? this._$AA.nextSibling.data = t2 : this.T(h$2.createTextNode(t2)), this._$AH = t2;
+    this._$AH !== b$1 && d$1(this._$AH) ? this._$AA.nextSibling.data = t2 : this.T(h$2.createTextNode(t2)), this._$AH = t2;
   }
   $(t2) {
     var i2;
@@ -1760,12 +1944,12 @@ class S$1 {
     const o2 = this.strings;
     let n2 = false;
     if (void 0 === o2)
-      t2 = P(this, t2, i2, 0), n2 = !d(t2) || t2 !== this._$AH && t2 !== x$1, n2 && (this._$AH = t2);
+      t2 = P(this, t2, i2, 0), n2 = !d$1(t2) || t2 !== this._$AH && t2 !== x$1, n2 && (this._$AH = t2);
     else {
       const e3 = t2;
       let l2, h2;
       for (t2 = o2[0], l2 = 0; l2 < o2.length - 1; l2++)
-        h2 = P(this, e3[s2 + l2], i2, l2), h2 === x$1 && (h2 = this._$AH[l2]), n2 || (n2 = !d(h2) || h2 !== this._$AH[l2]), h2 === b$1 ? t2 = b$1 : t2 !== b$1 && (t2 += (null != h2 ? h2 : "") + o2[l2 + 1]), this._$AH[l2] = h2;
+        h2 = P(this, e3[s2 + l2], i2, l2), h2 === x$1 && (h2 = this._$AH[l2]), n2 || (n2 = !d$1(h2) || h2 !== this._$AH[l2]), h2 === b$1 ? t2 = b$1 : t2 !== b$1 && (t2 += (null != h2 ? h2 : "") + o2[l2 + 1]), this._$AH[l2] = h2;
     }
     n2 && !e2 && this.j(t2);
   }
@@ -1817,7 +2001,7 @@ class I {
     P(this, t2);
   }
 }
-const L = { P: "$lit$", A: o$5, M: n$3, C: 1, L: E, R: V, D: c$3, V: P, I: N, H: S$1, N: k, U: H, B: M, F: I }, z = i$3.litHtmlPolyfillSupport;
+const L = { P: "$lit$", A: o$6, M: n$4, C: 1, L: E, R: V, D: c$3, V: P, I: N, H: S$1, N: k, U: H, B: M, F: I }, z = i$3.litHtmlPolyfillSupport;
 null == z || z(C, N), (null !== (t$1 = i$3.litHtmlVersions) && void 0 !== t$1 ? t$1 : i$3.litHtmlVersions = []).push("2.6.1");
 const Z = (t2, i2, s2) => {
   var e2, o2;
@@ -1834,8 +2018,8 @@ const Z = (t2, i2, s2) => {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-var l$3, o$4;
-class s$3 extends d$1 {
+var l$3, o$5;
+class s$3 extends d$2 {
   constructor() {
     super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
   }
@@ -1861,9 +2045,9 @@ class s$3 extends d$1 {
   }
 }
 s$3.finalized = true, s$3._$litElement$ = true, null === (l$3 = globalThis.litElementHydrateSupport) || void 0 === l$3 || l$3.call(globalThis, { LitElement: s$3 });
-const n$2 = globalThis.litElementPolyfillSupport;
-null == n$2 || n$2({ LitElement: s$3 });
-(null !== (o$4 = globalThis.litElementVersions) && void 0 !== o$4 ? o$4 : globalThis.litElementVersions = []).push("3.2.2");
+const n$3 = globalThis.litElementPolyfillSupport;
+null == n$3 || n$3({ LitElement: s$3 });
+(null !== (o$5 = globalThis.litElementVersions) && void 0 !== o$5 ? o$5 : globalThis.litElementVersions = []).push("3.2.2");
 var __defProp$16 = Object.defineProperty;
 var __getOwnPropDesc$16 = Object.getOwnPropertyDescriptor;
 var __decorateClass$16 = (decorators, target, key, kind) => {
@@ -2400,15 +2584,20 @@ const Form$2 = (superClass) => {
             next = loop[index - 1];
           }
         }
-        const elt = (_a2 = next == null ? void 0 : next.shadowRoot) == null ? void 0 : _a2.querySelector(selector);
+        const elt = (_a2 = next == null ? void 0 : next.shadowRoot) == null ? void 0 : _a2.querySelector(
+          selector
+        );
         if (elt && elt.focus) {
           elt.focus();
           e2.preventDefault();
+          e2.stopPropagation();
         }
       });
     }
     connectedCallback() {
-      this.formDataProvider = this.getAncestorAttributeValue("formDataProvider");
+      this.formDataProvider = this.getAncestorAttributeValue(
+        "formDataProvider"
+      );
       super.connectedCallback();
       this.addKeyboardNavigation();
     }
@@ -2498,7 +2687,9 @@ class Arrays$1 {
                         if (source.length < 1)
                           return true;
                         const first = (source[0] || {})[key];
-                        return source.every((item) => (item || {})[key] == first);
+                        return source.every(
+                          (item) => (item || {})[key] == first
+                        );
                       }
                     };
                   }
@@ -2560,7 +2751,9 @@ class Arrays$1 {
               forKey: (key) => {
                 const set = [...new Set(source.map((item) => item[key]))];
                 return Arrays$1.from(
-                  set.map((value) => source.find((item) => item[key] == value))
+                  set.map(
+                    (value) => source.find((item) => item[key] == value)
+                  )
                 );
               }
             };
@@ -2572,7 +2765,11 @@ class Arrays$1 {
                   forKey: (key) => {
                     const areValuesDifferentForKey = (compared1, key2) => (compared2) => compared1[key2] != compared2[key2];
                     return Arrays$1.from(
-                      source.filter((elt) => toRemoveFromSource.every(areValuesDifferentForKey(elt, key)))
+                      source.filter(
+                        (elt) => toRemoveFromSource.every(
+                          areValuesDifferentForKey(elt, key)
+                        )
+                      )
                     );
                   }
                 };
@@ -3120,7 +3317,7 @@ Loader = __decorateClass$12([
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { I: l$1 } = L, e$1 = (o2) => void 0 === o2.strings, c$2 = () => document.createComment(""), r$2 = (o2, t2, i2) => {
+const { I: l$1 } = L, n$2 = (o2, l2) => void 0 === l2 ? void 0 !== (null == o2 ? void 0 : o2._$litType$) : (null == o2 ? void 0 : o2._$litType$) === l2, e$1 = (o2) => void 0 === o2.strings, c$2 = () => document.createComment(""), r$2 = (o2, t2, i2) => {
   var n2;
   const d2 = o2._$AA.parentNode, v2 = void 0 === t2 ? o2._$AB : t2._$AA;
   if (void 0 === i2) {
@@ -3150,6 +3347,8 @@ const { I: l$1 } = L, e$1 = (o2) => void 0 === o2.strings, c$2 = () => document.
     const o3 = t2.nextSibling;
     t2.remove(), t2 = o3;
   }
+}, a$1 = (o2) => {
+  o2._$AR();
 };
 /**
  * @license
@@ -3235,7 +3434,7 @@ const s$1 = (i2, t2) => {
   for (const i3 of r2)
     null === (o2 = (e2 = i3)._$AO) || void 0 === o2 || o2.call(e2, t2, false), s$1(i3, t2);
   return true;
-}, o$3 = (i2) => {
+}, o$4 = (i2) => {
   let t2, e2;
   do {
     if (void 0 === (t2 = i2._$AM))
@@ -3253,7 +3452,7 @@ const s$1 = (i2, t2) => {
   }
 };
 function n$1(i2) {
-  void 0 !== this._$AN ? (o$3(this), this._$AM = i2, r$1(this)) : this._$AM = i2;
+  void 0 !== this._$AN ? (o$4(this), this._$AM = i2, r$1(this)) : this._$AM = i2;
 }
 function h$1(i2, t2 = false, e2 = 0) {
   const r2 = this._$AH, n2 = this._$AN;
@@ -3261,9 +3460,9 @@ function h$1(i2, t2 = false, e2 = 0) {
     if (t2)
       if (Array.isArray(r2))
         for (let i3 = e2; i3 < r2.length; i3++)
-          s$1(r2[i3], false), o$3(r2[i3]);
+          s$1(r2[i3], false), o$4(r2[i3]);
       else
-        null != r2 && (s$1(r2, false), o$3(r2));
+        null != r2 && (s$1(r2, false), o$4(r2));
     else
       s$1(this, i2);
 }
@@ -3280,7 +3479,7 @@ class c extends i$2 {
   }
   _$AO(i2, t2 = true) {
     var e2, r2;
-    i2 !== this.isConnected && (this.isConnected = i2, i2 ? null === (e2 = this.reconnected) || void 0 === e2 || e2.call(this) : null === (r2 = this.disconnected) || void 0 === r2 || r2.call(this)), t2 && (s$1(this, i2), o$3(this));
+    i2 !== this.isConnected && (this.isConnected = i2, i2 ? null === (e2 = this.reconnected) || void 0 === e2 || e2.call(this) : null === (r2 = this.disconnected) || void 0 === r2 || r2.call(this)), t2 && (s$1(this, i2), o$4(this));
   }
   setValue(t2) {
     if (e$1(this._$Ct))
@@ -3544,7 +3743,7 @@ class e extends i$2 {
   }
 }
 e.directiveName = "unsafeHTML", e.resultType = 1;
-const o$2 = e$2(e);
+const o$3 = e$2(e);
 const loadingGetPromises = /* @__PURE__ */ new Map();
 const libraries = {
   heroicons: {
@@ -3608,7 +3807,7 @@ Icons.fontAwesomeNext = {
       iconsAsRecord[library] = libIcons;
       const libIconsKey = prefix + "-" + name;
       if (libIcons[libIconsKey])
-        return o$2(libIcons[libIconsKey]);
+        return o$3(libIcons[libIconsKey]);
       const url = libraryItem.url.replace("$prefix", prefix).replace("$name", name);
       if (!loadingGetPromises.has(url)) {
         const promise = new Promise(async (resolve) => {
@@ -3629,9 +3828,9 @@ Icons.fontAwesomeNext = {
       const result = await loadingGetPromises.get(url);
       loadingGetPromises.delete(url);
       libIcons[libIconsKey] = result || "";
-      return o$2(result);
+      return o$3(result);
     }
-    return o$2(iconsAsRecord["core"][params.name] || "");
+    return o$3(iconsAsRecord["core"][params.name] || "");
   }
 };
 Icons.default = _Icons.fontAwesomeNext;
@@ -3661,7 +3860,7 @@ let Icon = class extends s$3 {
       return;
     this.renderId++;
     const frameRenderId = this.renderId;
-    window.requestAnimationFrame(async () => {
+    (window.queueMicrotask || window.requestAnimationFrame)(async () => {
       if (frameRenderId != this.renderId) {
         return;
       }
@@ -3755,7 +3954,7 @@ let SonicToastItem = class extends s$3 {
     if (!this.visible) {
       return b$1;
     }
-    return y`<div class="sonic-toast ${this.status} ${this.ghost ? "ghost" : ""}"><button aria-label="Close" class="sonic-toast-close" @click="${() => this.hide()}"><sonic-icon name="cancel" size="lg"></sonic-icon></button><div class="sonic-toast-content custom-scroll" style="max-height:${this.maxHeight}">${this.status && y`<sonic-icon name="${icon$1[this.status]}" class="sonic-toast-icon" size="2xl"></sonic-icon>`}<div class="sonic-toast-text">${this.title ? y`<div class="sonic-toast-title">${this.title}</div>` : ""} ${this.text ? o$2(this.text) : ""}<slot></slot></div>${!this.preserve ? this.autoHide() : ""}</div></div>`;
+    return y`<div class="sonic-toast ${this.status} ${this.ghost ? "ghost" : ""}"><button aria-label="Close" class="sonic-toast-close" @click="${() => this.hide()}"><sonic-icon name="cancel" size="lg"></sonic-icon></button><div class="sonic-toast-content custom-scroll" style="max-height:${this.maxHeight}">${this.status && y`<sonic-icon name="${icon$1[this.status]}" class="sonic-toast-icon" size="2xl"></sonic-icon>`}<div class="sonic-toast-text">${this.title ? y`<div class="sonic-toast-title">${this.title}</div>` : ""} ${this.text ? o$3(this.text) : ""}<slot></slot></div>${!this.preserve ? this.autoHide() : ""}</div></div>`;
   }
   hide() {
     if (!this.closest("sonic-toast")) {
@@ -3873,7 +4072,7 @@ let SonicToast$1 = class extends s$3 {
           }
         ],
         stabilizeOut: true
-      })}>${item.text ? o$2(item.text) : ""}</sonic-toast-item>`
+      })}>${item.text ? o$3(item.text) : ""}</sonic-toast-item>`
     )}</div>`;
   }
   static removeAll() {
@@ -3995,24 +4194,41 @@ const Fetcher$1 = (superClass, propsType) => {
       if (!this.api)
         return;
       this.dispatchEvent(new CustomEvent("loading", { detail: this }));
-      this.isLoading = true;
-      this.requestUpdate();
+      if (this.getAttribute("localStorage") === "enabled") {
+        await PublisherManager.getInstance().isLocalStrorageReady;
+      }
+      if (!this.isConnected)
+        return;
       const hasLoader = this.isDefaultLoaderEnabled && !this.hasAttribute("noLoader");
-      if (hasLoader)
+      if (hasLoader) {
         Loader.show();
+      }
       const headerData = PublisherManager.getInstance().get(this.getAncestorAttributeValue("headersDataProvider")).get();
+      this.isLoading = true;
+      if (Objects$1.isObject(this.props) && Object.keys(this.props || {}).length > 0 && this.isFirstLoad) {
+        this.dispatchEvent(new CustomEvent("load", { detail: this }));
+        this.isFirstLoad = false;
+        this.isLoading = false;
+      }
       let data = await this.api.get(this.endPoint || this.dataProvider || "", headerData);
+      if (!this.isConnected) {
+        if (hasLoader)
+          Loader.hide();
+        return;
+      }
       if (!data) {
         SonicToast$1.add({ text: "Network Error", status: "error" });
         this.isLoading = false;
-        if (hasLoader)
+        if (hasLoader) {
           Loader.hide();
+        }
         return;
       } else if (data._sonic_http_response_ && !data._sonic_http_response_.ok && Object.keys(data).length === 1) {
         SonicToast$1.add({ text: "Network Error", status: "error" });
       }
-      if (hasLoader)
+      if (hasLoader) {
         Loader.hide();
+      }
       if (this.key) {
         const response = data._sonic_http_response_;
         data = Objects$1.traverse(data, this.key.split("."), this.hasAttribute("preserveOtherKeys"));
@@ -4036,11 +4252,10 @@ const Fetcher$1 = (superClass, propsType) => {
     }
     connectedCallback() {
       var _a2;
+      super.connectedCallback();
       if (!this.isFetchEnabled) {
-        super.connectedCallback();
         return;
       }
-      super.connectedCallback();
       this.key = this.getAttribute("key");
       if (this.props) {
         this.publisher.set(this.props);
@@ -4050,16 +4265,24 @@ const Fetcher$1 = (superClass, propsType) => {
       const lazyLoad = this.getAttribute("lazyload");
       if (lazyLoad === null) {
         this._fetchData();
+      } else {
+        this.handleLazyLoad();
       }
     }
-    firstUpdated() {
+    handleLazyLoad() {
       const lazyLoad = this.getAttribute("lazyload");
       if (lazyLoad === null) {
         return;
       }
+      const rect = this.getBoundingClientRect();
+      if (rect.x < window.innerWidth && rect.right > 0 && rect.y < window.innerHeight && rect.right > 0) {
+        this._fetchData();
+        return;
+      }
+      const boundsRatio = parseFloat(this.getAttribute("lazyBoundsRatio") || "1");
       const options = {
         root: null,
-        rootMargin: Math.max(window.innerWidth, window.innerHeight) + "px"
+        rootMargin: Math.max(window.innerWidth * boundsRatio, window.innerHeight * boundsRatio) + "px"
       };
       this.iObserver = new IntersectionObserver((entries) => this.onIntersection(entries), options);
       let elt = this.shadowRoot ? this.shadowRoot.children[0] : this.children[0];
@@ -4076,9 +4299,12 @@ const Fetcher$1 = (superClass, propsType) => {
       }
     }
     onIntersection(entries) {
+      var _a2;
       for (const e2 of entries) {
         if (e2.isIntersecting && this.isFirstLoad) {
           this._fetchData();
+          (_a2 = this.iObserver) == null ? void 0 : _a2.disconnect();
+          break;
         }
       }
     }
@@ -4155,7 +4381,7 @@ SonicIF = __decorateClass$Y([
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const o$1 = e$2(class extends i$2 {
+const o$2 = e$2(class extends i$2 {
   constructor(t$12) {
     if (super(t$12), t$12.type !== t.CHILD)
       throw Error("templateContent can only be used in child bindings");
@@ -4226,8 +4452,11 @@ let List = class extends Fetcher$1(Subscriber$1(TemplatesContainer$1(s$3))) {
       this.isLoading = true;
     super.connectedCallback();
   }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
   renderLoadingState() {
-    return this.templateParts["skeleton"] ? o$1(this.templateParts["skeleton"]) : y`<sonic-loader mode="inline"></sonic-loader>`;
+    return this.templateParts["skeleton"] ? o$2(this.templateParts["skeleton"]) : y`<sonic-loader mode="inline"></sonic-loader>`;
   }
   renderNoResultState() {
     return y`<div style="color:var(--sc-base-400);font-size:1.5em;margin:4rem 0;display:flex;gap:.5rem"><sonic-icon name="emoji-puzzled" size="lg"></sonic-icon><span class="sonic-no-result-text">${typeof this.props === "string" && this.props == "" ? "Aucun r\xE9sultat" : this.props}</span></div>`;
@@ -4267,7 +4496,7 @@ let List = class extends Fetcher$1(Subscriber$1(TemplatesContainer$1(s$3))) {
       return y`<div></div>`;
     const props = this.formatProps();
     if (((props == null ? void 0 : props.length) || 0) == 0 && this.templateParts["no-item"]) {
-      return o$1(this.templateParts["no-item"]);
+      return o$2(this.templateParts["no-item"]);
     }
     const templateCount = this.templateList.length;
     let counter = -1;
@@ -4299,7 +4528,7 @@ let List = class extends Fetcher$1(Subscriber$1(TemplatesContainer$1(s$3))) {
         counter = -1;
       return item && y`<sonic-subscriber ?debug="${this.defferedDebug === true}" .bindPublisher="${function() {
         return pub;
-      }}" .propertyMap?="${this.itemPropertyMap}" dataProvider="${this.dataProvider}/list-item/${key}">${templatePart ? o$1(templatePart) : o$1(this.templateList[counter % templateCount])}</sonic-subscriber>${separator && isNotLast ? o$1(separator) : b$1}`;
+      }}" .propertyMap?="${this.itemPropertyMap}" dataProvider="${this.dataProvider}/list-item/${key}">${templatePart ? o$2(templatePart) : o$2(this.templateList[counter % templateCount])}</sonic-subscriber>${separator && isNotLast ? o$2(separator) : b$1}`;
     })}`;
   }
 };
@@ -4315,6 +4544,18 @@ __decorateClass$W([
 List = __decorateClass$W([
   e$8(tagName$S)
 ], List);
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function* o$1(o2, f2) {
+  if (void 0 !== o2) {
+    let i2 = 0;
+    for (const t2 of o2)
+      yield f2(t2, i2++);
+  }
+}
 var __defProp$V = Object.defineProperty;
 var __getOwnPropDesc$V = Object.getOwnPropertyDescriptor;
 var __decorateClass$V = (decorators, target, key, kind) => {
@@ -4334,14 +4575,20 @@ let Queue = class extends Subscriber$1(s$3) {
     this.lastRequestTime = 0;
     this.key = "";
     this.itemPropertyMap = null;
+    this.cache = "default";
     this.targetRequestDuration = 500;
     this.limit = 5;
+    this.lazyBoundsRatio = 1;
     this.offset = 0;
     this.resultCount = 0;
+    this.noLazyload = false;
     this.filteredFields = "";
+    this.instanceId = 0;
+    this.localStorage = "disabled";
     this.filterPublisher = null;
     this.searchHash = "";
     this.requestId = 0;
+    this.isFirstRequest = true;
     this.dataProviderExpression = "";
     this.idKey = "id";
     this.currentScrollPosition = void 0;
@@ -4355,33 +4602,36 @@ let Queue = class extends Subscriber$1(s$3) {
     super.disconnectedCallback();
     return;
   }
-  connectedCallback() {
+  async connectedCallback() {
+    this.instanceId = Queue.instanceCounter++;
+    this.localStorage = this.getAttribute("localStorage") || this.localStorage;
+    this.removeAttribute("localStorage");
     this.noShadowDom = "";
     this.defferedDebug = this.hasAttribute("debug") || null;
+    if (!this.dataProvider)
+      this.dataProvider = this.dataProviderExpression || "sonic-queue-" + this.instanceId + "-" + Math.random().toString(36).substring(7);
     if (!this.dataProviderExpression) {
       this.dataProviderExpression = HTML.getAncestorAttributeValue(this.parentElement, "dataProvider") || "";
     }
-    if (!this.dataProvider)
-      this.dataProvider = "sonic-queue-" + Queue.instanceCounter++;
-    this.configFilter();
     super.connectedCallback();
     this.key = this.getAttribute("key");
     if (!this.templates)
-      this.templates = Array.from(this.querySelectorAll("template"));
+      this.templates = Array.from(
+        this.querySelectorAll("template")
+      );
     this.lastRequestTime = new Date().getTime();
-    const func = window.requestAnimationFrame;
-    func(() => this.next());
+    await PublisherManager$1.getInstance().isLocalStrorageReady;
+    this.configFilter();
   }
   configFilter() {
     var _a2;
     const dataFilterProvider = this.getAncestorAttributeValue("dataFilterProvider");
-    if (!dataFilterProvider)
+    if (!dataFilterProvider) {
+      this.next();
       return;
+    }
     this.filterPublisher = PublisherManager$1.getInstance().get(dataFilterProvider);
     (_a2 = this.filterPublisher) == null ? void 0 : _a2.onInternalMutation(() => {
-      var _a3;
-      if (Object.keys((_a3 = this.filterPublisher) == null ? void 0 : _a3.get()).length == 0)
-        return;
       this.updateFilteredContent();
     });
   }
@@ -4402,7 +4652,7 @@ let Queue = class extends Subscriber$1(s$3) {
       searchParams.set(f2, filterData[f2].toString());
     }
     const searchHash = searchParams.toString();
-    if (searchHash == this.searchHash)
+    if (searchHash == this.searchHash && !this.isFirstRequest)
       return;
     this.searchHash = searchHash;
     for (const dataProvider2 of this.listDataProviders) {
@@ -4410,28 +4660,34 @@ let Queue = class extends Subscriber$1(s$3) {
     }
     this.listDataProviders = [];
     clearTimeout(this.filterTimeoutId);
-    this.filterTimeoutId = setTimeout(() => {
-      const count = this.resultCount;
-      this.props = null;
-      this.resultCount = count;
-      this.requestId++;
-      this.next();
-    }, 250);
+    this.filterTimeoutId = setTimeout(
+      async () => {
+        const count = this.resultCount;
+        this.props = null;
+        this.requestId++;
+        this.resultCount = count;
+        await PublisherManager$1.getInstance().isLocalStrorageReady;
+        window.requestAnimationFrame(() => this.next());
+      },
+      this.isFirstRequest ? 0 : 400
+    );
+    this.isFirstRequest = false;
   }
   resetDuration() {
     this.lastRequestTime = new Date().getTime();
   }
   next(e2) {
-    var _a2, _b;
+    var _a2;
     let offset = this.offset;
     const newTime = new Date().getTime();
     const requestDuration = newTime - this.lastRequestTime;
     if (!this.nextHadEvent && e2) {
+      this.publisher.resultCount = 0;
       this.resultCount = 0;
     }
     this.nextHadEvent = !!e2;
     if (e2) {
-      if (e2.detail.requestId != this.requestId)
+      if (e2.detail.requestId < this.requestId)
         return;
       this.resultCount += e2.detail.props.length;
       if (!e2.detail.isFirstLoad || !e2.detail.props.length || this.dataProviderExpression.indexOf("$offset") == -1) {
@@ -4448,8 +4704,10 @@ let Queue = class extends Subscriber$1(s$3) {
       const item = props[props.length - 1];
       offset = parseInt(item.offset.toString()) + parseInt(item.limit.toString());
     }
-    if (requestDuration > 0 && e2)
-      this.limit = Math.round(this.limit / requestDuration * this.targetRequestDuration);
+    if (requestDuration > 0 && e2 && !this.localStorage)
+      this.limit = Math.round(
+        this.limit / requestDuration * this.targetRequestDuration
+      );
     if (this.limit < 1)
       this.limit = 1;
     if (this.limit > 15)
@@ -4461,7 +4719,7 @@ let Queue = class extends Subscriber$1(s$3) {
     const filterData = (_a2 = this.filterPublisher) == null ? void 0 : _a2.get();
     const filteredFieldsArray = this.filteredFields.split(" ");
     for (const f2 in filterData) {
-      if (this.filteredFields && !filteredFieldsArray.includes(f2) || filterData[f2] == null)
+      if (this.filteredFields && filteredFieldsArray.includes(f2) || filterData[f2] == null || filterData[f2] == "")
         continue;
       searchParams.set(f2, filterData[f2]);
     }
@@ -4469,12 +4727,12 @@ let Queue = class extends Subscriber$1(s$3) {
       this.searchHash = searchParams.toString();
     dataProvider = endpoint + "?" + searchParams.toString();
     this.listDataProviders.push(dataProvider);
-    this.currentScrollPosition = (_b = document.scrollingElement) == null ? void 0 : _b.scrollTop;
     const newProps = [
       ...this.props,
       {
         id: searchParams.toString() + "/" + this.props.length,
-        dataProvider,
+        dataProvider: dataProvider + "_item_from_queue_" + this.instanceId,
+        endPoint: dataProvider,
         offset,
         limit: this.limit
       }
@@ -4484,24 +4742,19 @@ let Queue = class extends Subscriber$1(s$3) {
     this.lastRequestTime = new Date().getTime();
   }
   render() {
-    if (this.currentScrollPosition) {
-      window.requestAnimationFrame(() => {
-        if (document.scrollingElement && this.currentScrollPosition != void 0)
-          document.scrollingElement.scrollTop = this.currentScrollPosition;
-        this.currentScrollPosition = void 0;
-      });
-    }
     if (!Array.isArray(this.props))
       return b$1;
-    return y`${c$1(
-      this.props,
-      (item) => item.id,
-      (item, index) => {
-        var _a2;
-        const templates = index == 0 ? this.templates : (_a2 = this.templates) == null ? void 0 : _a2.filter((elt) => elt.getAttribute("data-value") != "no-item");
-        return y`<sonic-list fetch displayContents lazyload requestId="${this.requestId}" .itemPropertyMap="${this.itemPropertyMap}" ?debug="${this.defferedDebug === true}" @load="${this.next}" key="${this.key}" @loading="${this.resetDuration}" dataProvider="${item.dataProvider}" idKey="${this.idKey}" .templates="${templates}"></sonic-list>`;
-      }
-    )}`;
+    let lazyload = !this.noLazyload;
+    if (this.props.length == 1) {
+      lazyload = false;
+    }
+    return y`${o$1(this.props, (item, index) => {
+      var _a2;
+      const templates = index == 0 ? this.templates : (_a2 = this.templates) == null ? void 0 : _a2.filter(
+        (elt) => elt.getAttribute("data-value") != "no-item"
+      );
+      return y`<sonic-list fetch cache="${this.cache}" displayContents lazyBoundsRatio="${this.lazyBoundsRatio}" ?lazyload="${lazyload}" localStorage="${this.localStorage}" requestId="${this.requestId}" .itemPropertyMap="${this.itemPropertyMap}" ?debug="${this.defferedDebug === true}" @load="${this.next}" key="${this.key}" @loading="${this.resetDuration}" dataProvider="${item.dataProvider}" endPoint="${item.endPoint}" idKey="${this.idKey}" .templates="${templates}"></sonic-list>`;
+    })}`;
   }
 };
 Queue.instanceCounter = 0;
@@ -4511,18 +4764,27 @@ __decorateClass$V([
 __decorateClass$V([
   e$7({ type: Object })
 ], Queue.prototype, "itemPropertyMap", 2);
+__decorateClass$V([
+  e$7()
+], Queue.prototype, "cache", 2);
 __decorateClass$V([
   e$7()
 ], Queue.prototype, "targetRequestDuration", 2);
 __decorateClass$V([
   e$7()
 ], Queue.prototype, "limit", 2);
+__decorateClass$V([
+  e$7()
+], Queue.prototype, "lazyBoundsRatio", 2);
 __decorateClass$V([
   e$7()
 ], Queue.prototype, "offset", 2);
 __decorateClass$V([
   e$7()
 ], Queue.prototype, "resultCount", 2);
+__decorateClass$V([
+  e$7({ type: Boolean })
+], Queue.prototype, "noLazyload", 2);
 __decorateClass$V([
   e$7()
 ], Queue.prototype, "filteredFields", 2);
@@ -5240,9 +5502,9 @@ let SonicRouter = class extends Subscriber$1(TemplatesContainer$1(s$3)) {
               dataProvider = ((_a2 = match.shift()) == null ? void 0 : _a2.replace(regexp, dataProviderExpression)) || "";
             }
           }
-          return y`<div style="display:contents" dataProvider="${dataProvider}">${o$1(template)}</div>`;
+          return y`<div style="display:contents" dataProvider="${dataProvider}">${o$2(template)}</div>`;
         }
-        return o$1(template);
+        return o$2(template);
       }
     )}`;
   }
@@ -5398,9 +5660,9 @@ let SonicStates = class extends Subscriber$1(TemplatesContainer$1(s$3)) {
               dataProvider = (_a2 = match.shift()) == null ? void 0 : _a2.replace(regexp, dataProviderExpression);
             }
           }
-          return y`<div style="display:contents" dataProvider="${dataProvider}">${o$1(template)}</div>`;
+          return y`<div style="display:contents" dataProvider="${dataProvider}">${o$2(template)}</div>`;
         }
-        return o$1(template);
+        return o$2(template);
       }
     )}`;
   }
@@ -6170,14 +6432,18 @@ let SonicValue = class extends Subscriber(s$3) {
   render() {
     if (typeof this.props === "object" || this.props === void 0)
       return y`<slot name="prefix"></slot><slot></slot><slot name="suffix"></slot>`;
-    return y`${o$2(this.props.toString())}<slot name="prefix"></slot><slot></slot><slot name="suffix"></slot>`;
+    return y`${o$3(this.props.toString())}<slot name="prefix"></slot><slot></slot><slot name="suffix"></slot>`;
   }
 };
 SonicValue = __decorateClass$L([
   e$8(tagName$J)
 ], SonicValue);
-const coreVariables = i$4`:host{--sc-font-family-base:"Inter var","Inter",-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--sc-font-weight-base:400;--sc-font-style-base:normal;--sc-headings-font-family:var(--sc-font-family-base);--sc-headings-font-style:var(--sc-font-style-base);--sc-headings-line-height:1.1;--sc-headings-font-weight:700;--sc-headings-text-transform:none;--sc-btn-font-weight:var(--sc-font-weight-base);--sc-btn-font-family:var(--sc-font-family-base);--sc-btn-font-style:var(--sc-font-style-base);--sc-rounded-sm:calc(var(--sc-rounded) * 0.5);--sc-rounded:0.375rem;--sc-rounded-md:calc(var(--sc-rounded) * 1.8);--sc-rounded-lg:calc(var(--sc-rounded) * 3);--sc-rounded-xl:calc(var(--sc-rounded) * 7);--sc-rounded-size-intensity:calc((1em - 1rem) * 0.4);--sc-btn-rounded-intensity:1.4;--sc-btn-font-weight:500;--sc-btn-rounded:calc((var(--sc-rounded) + var(--sc-rounded-size-intensity)) * var(--sc-btn-rounded-intensity));--sc-placeholder-bg:rgba(17, 24, 39, 0.05);--sc-shadow-sm:0 1px 3px 0 rgb(0 0 0 / 0.1),0 1px 2px -1px rgb(0 0 0 / 0.1);--sc-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1),0 2px 4px -2px rgb(0 0 0 / 0.1);--sc-shadow-lg:0 10px 15px 0px rgb(0 0 0 / 0.1),0 4px 6px -4px rgb(0 0 0 / 0.1);--sc-shadow-xl:0 20px 25px -5px rgb(0 0 0 / 0.1),0 8px 10px -6px rgb(0 0 0 / 0.1);--sc-shadow-2xl:0 25px 50px -12px rgb(0 0 0 / 0.25);--sc-border-width:max(1px, 0.12rem);--sc-border-color:var(--sc-base-200);--sc-form-height:2.5em;--sc-form-border-width:var(--sc-border-width);--sc-input-bg:var(--sc-base-100);--sc-input-border-color:var(--sc-input-bg);--sc-input-rounded-intensity:1.4;--sc-input-rounded:calc(
-      (var(--sc-rounded) + var(--sc-rounded-size-intensity)) * var(--sc-input-rounded-intensity)
+const coreVariables = i$4`:host{--sc-font-family-base:"Inter var","Inter",-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--sc-font-weight-base:400;--sc-font-style-base:normal;--sc-headings-font-family:var(--sc-font-family-base),sans-serif;--sc-headings-font-style:var(--sc-font-style-base);--sc-headings-line-height:1.1;--sc-headings-font-weight:700;--sc-headings-text-transform:none;--sc-btn-font-weight:var(--sc-font-weight-base);--sc-btn-font-family:var(--sc-font-family-base);--sc-btn-font-style:var(--sc-font-style-base);--sc-rounded-sm:calc(var(--sc-rounded) * 0.5);--sc-rounded:0.375rem;--sc-rounded-md:calc(var(--sc-rounded) * 1.8);--sc-rounded-lg:calc(var(--sc-rounded) * 3);--sc-rounded-xl:calc(var(--sc-rounded) * 7);--sc-rounded-size-intensity:calc((1em - 1rem) * 0.4);--sc-btn-rounded-intensity:1.4;--sc-btn-font-weight:500;--sc-btn-rounded:calc(
+      (var(--sc-rounded) + var(--sc-rounded-size-intensity)) *
+        var(--sc-btn-rounded-intensity)
+    );--sc-placeholder-bg:rgba(17, 24, 39, 0.05);--sc-shadow-sm:0 1px 3px 0 rgb(0 0 0 / 0.1),0 1px 2px -1px rgb(0 0 0 / 0.1);--sc-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1),0 2px 4px -2px rgb(0 0 0 / 0.1);--sc-shadow-lg:0 10px 15px 0px rgb(0 0 0 / 0.1),0 4px 6px -4px rgb(0 0 0 / 0.1);--sc-shadow-xl:0 20px 25px -5px rgb(0 0 0 / 0.1),0 8px 10px -6px rgb(0 0 0 / 0.1);--sc-shadow-2xl:0 25px 50px -12px rgb(0 0 0 / 0.25);--sc-border-width:max(1px, 0.12rem);--sc-border-color:var(--sc-base-200);--sc-form-height:2.5em;--sc-form-border-width:var(--sc-border-width);--sc-input-bg:var(--sc-base-100);--sc-input-border-color:var(--sc-input-bg);--sc-input-rounded-intensity:1.4;--sc-input-rounded:calc(
+      (var(--sc-rounded) + var(--sc-rounded-size-intensity)) *
+        var(--sc-input-rounded-intensity)
     );--sc-label-font-weight:500;--sc-contrast-content:#fff;--sc-contrast:#11151f;--sc-scrollbar-bg:var(--sc-base-400);--sc-body-bg:var(--sc-base)}`;
 const light = i$4`:host{--sc-primary:var(--sc-base-800);--sc-info:#2563eb;--sc-danger:#f43f5e;--sc-warning:#f97316;--sc-success:#14b8a6;--sc-primary-content:var(--sc-base);--sc-info-content:var(--sc-base);--sc-danger-content:var(--sc-base);--sc-warning-content:var(--sc-base);--sc-success-content:var(--sc-base);--sc-base:#fff;--sc-base-50:#f8fafc;--sc-base-100:#f1f5f9;--sc-base-200:#e2e8f0;--sc-base-300:#cbd5e1;--sc-base-400:#94a3b8;--sc-base-500:#64748b;--sc-base-600:#475569;--sc-base-700:#334155;--sc-base-800:#1e293b;--sc-base-900:#0f172a;--sc-base-content:var(--sc-base-700);--sc-input-bg:var(--sc-base-100);--sc-input-color:var(--sc-base-content)}`;
 const darkCss = i$4``;
@@ -6238,7 +6504,11 @@ let Theme = class extends s$3 {
   }
   getCssVariables() {
     const names = [];
-    const stylesheets = [...Theme.styles.map((s2) => s2.styleSheet), ...Array.from(document.styleSheets)];
+    const stylesheets = [
+      ...Theme.styles.map((s2) => s2.styleSheet),
+      ...Array.from(document.styleSheets)
+    ];
+    console.log(stylesheets);
     for (const stylesheet of stylesheets) {
       try {
         if (!stylesheet)
@@ -6271,7 +6541,7 @@ Theme.styles = [
   light,
   dark,
   coreVariables,
-  i$4`:host([background]){display:block!important;background:var(--sc-body-bg)!important;min-height:100vh}:host([color]){color:var(--sc-base-content)}:host([font]){font-family:var(--sc-font-family-base);font-weight:var(--sc-font-weight-base);font-style:var(--sc-font-style-base)}`
+  i$4`:host([background]){display:block!important;background:var(--sc-body-bg)!important;min-height:100vh}:host([color]){color:var(--sc-base-content)}:host([font]){font-family:var(--sc-font-family-base),sans-serif;font-weight:var(--sc-font-weight-base);font-style:var(--sc-font-style-base)}`
 ];
 __decorateClass$K([
   e$7({ type: String, reflect: true })
@@ -6313,7 +6583,7 @@ let Badge = class extends s$3 {
 };
 Badge.styles = [
   fontSize,
-  i$4`:host{--sc-badge-gap:0.3em;--sc-badge-py:0.17em;--sc-badge-px:0.66em;--sc-fs:1rem;--sc-badge-color:var(--sc-base-content, #1f2937);--sc-badge-bg:var(--sc-base-200, #e5e7eb);--sc-badge-border-with:var(--sc-form-border-width, 0.1rem);--sc-badge-border-color:transparent;--sc-badge-border:var(--sc-badge-border-with) solid var(--sc-badge-border-color);--sc-badge-rounded:99px;--sc-badge-fw:var(--sc-font-weight-base);display:inline-flex;align-items:center;box-sizing:border-box;line-height:var(--sc-lh);border-radius:var(--sc-badge-rounded);background:var(--sc-badge-bg);color:var(--sc-badge-color);font-family:var(--sc-badge-ff,var(--sc-font-family-base,inherit));font-weight:var(--sc-badge-fw);padding-top:var(--sc-badge-py);padding-bottom:var(--sc-badge-py);padding-left:var(--sc-badge-px);padding-right:var(--sc-badge-px);min-height:calc(var(--sc-badge-px) * 2);border:var(--sc-badge-border);-webkit-print-color-adjust:exact}:host([type=primary]){--sc-badge-color:var(--sc-primary-content);--sc-badge-bg:var(--sc-primary)}:host([type=warning]){--sc-badge-color:var(--sc-warning-content);--sc-badge-bg:var(--sc-warning)}:host([type=danger]){--sc-badge-color:var(--sc-danger-content);--sc-badge-bg:var(--sc-danger)}:host([type=info]){--sc-badge-color:var(--sc-info-content);--sc-badge-bg:var(--sc-info)}:host([type=success]){--sc-badge-color:var(--sc-success-content);--sc-badge-bg:var(--sc-success)}:host([type=neutral]){--sc-badge-color:var(--sc-base);--sc-badge-bg:var(--sc-base-content)}:host{font-size:var(--sc-fs);gap:var(--sc-badge-gap)}:host([size="2xs"]){--sc-badge-gap:0.35em}:host([size=xs]){--sc-badge-gap:0.35em}:host([size=sm]){--sc-badge-gap:0.35em}:host([size=lg]){--sc-lh:1.2;--sc-badge-gap:0.5em}:host([size=xl]){--sc-lh:1.2;--sc-badge-gap:0.5em}:host([variant=outline][type]){border-width:var(--sc-badge-border-with)!important;border-color:var(--sc-badge-bg);color:var(--sc-badge-bg);background:0 0}:host([variant=outline][type=default]){border-color:var(--sc-base-400);color:var(--sc-base-500);background:0 0}:host([variant=ghost][type]){color:var(--sc-badge-bg);background:0 0;padding:0}:host([variant=ghost][type=default]){color:var(--sc-badge-color);background:0 0}:host([ellipsis]){flex-wrap:nowrap;white-space:nowrap;max-width:100%}:host([ellipsis]) slot{overflow:hidden;display:block;text-overflow:ellipsis;white-space:nowrap;max-width:100%}slot[name=prefix],slot[name=suffix]{flex-shrink:0}`
+  i$4`:host{--sc-badge-gap:0.3em;--sc-badge-py:0.17em;--sc-badge-px:0.66em;--sc-fs:1rem;--sc-badge-color:var(--sc-base-content, #1f2937);--sc-badge-bg:var(--sc-base-200, #e5e7eb);--sc-badge-border-with:var(--sc-form-border-width, 0.1rem);--sc-badge-border-color:transparent;--sc-badge-border:var(--sc-badge-border-with) solid var(--sc-badge-border-color);--sc-badge-rounded:0.85em;--sc-badge-fw:var(--sc-font-weight-base);display:inline-flex;align-items:center;box-sizing:border-box;line-height:var(--sc-lh);border-radius:var(--sc-badge-rounded);background:var(--sc-badge-bg);color:var(--sc-badge-color);font-family:var(--sc-badge-ff,var(--sc-font-family-base,inherit));font-weight:var(--sc-badge-fw);padding-top:var(--sc-badge-py);padding-bottom:var(--sc-badge-py);padding-left:var(--sc-badge-px);padding-right:var(--sc-badge-px);min-height:calc(var(--sc-badge-px) * 2);border:var(--sc-badge-border);-webkit-print-color-adjust:exact}:host([type=primary]){--sc-badge-color:var(--sc-primary-content);--sc-badge-bg:var(--sc-primary)}:host([type=warning]){--sc-badge-color:var(--sc-warning-content);--sc-badge-bg:var(--sc-warning)}:host([type=danger]){--sc-badge-color:var(--sc-danger-content);--sc-badge-bg:var(--sc-danger)}:host([type=info]){--sc-badge-color:var(--sc-info-content);--sc-badge-bg:var(--sc-info)}:host([type=success]){--sc-badge-color:var(--sc-success-content);--sc-badge-bg:var(--sc-success)}:host([type=neutral]){--sc-badge-color:var(--sc-base);--sc-badge-bg:var(--sc-base-content)}:host{font-size:var(--sc-fs);gap:var(--sc-badge-gap)}:host([size="2xs"]){--sc-badge-gap:0.35em}:host([size=xs]){--sc-badge-gap:0.35em}:host([size=sm]){--sc-badge-gap:0.35em}:host([size=lg]){--sc-lh:1.2;--sc-badge-gap:0.5em}:host([size=xl]){--sc-lh:1.2;--sc-badge-gap:0.5em}:host([contrast]){--sc-badge-color:var(--sc-contrast-content);--sc-badge-bg:var(--sc-contrast)}:host([variant=outline][type]){border-width:var(--sc-badge-border-with)!important;border-color:var(--sc-badge-bg);color:var(--sc-badge-bg);background:0 0}:host([variant=outline][type=default]){border-color:var(--sc-base-400);color:var(--sc-base-500);background:0 0}:host([variant=ghost][type]){color:var(--sc-badge-bg);background:0 0;padding:0}:host([variant=ghost][type=default]){color:var(--sc-badge-color);background:0 0}:host([ellipsis]){flex-wrap:nowrap;white-space:nowrap;max-width:100%}:host([ellipsis]) slot{overflow:hidden;display:block;text-overflow:ellipsis;white-space:nowrap;max-width:100%}slot[name=prefix],slot[name=suffix]{flex-shrink:0}`
 ];
 __decorateClass$J([
   e$7({ type: String, reflect: true })
@@ -6462,9 +6732,10 @@ __decorateClass$H([
 Progress = __decorateClass$H([
   e$8(tagName$F)
 ], Progress);
+const passwordToggle = i$4`.password-toggle{color:var(--sc-input-c);font-size:var(--sc-input-fs);cursor:pointer;margin-right:calc(-.5 * var(--sc-input-px))}:host([inlineContent]) .has-suffix .password-toggle{margin-right:0}`;
 const label = i$4`:host{--sc-label-fs:var(--sc-fs, 1rem);--sc-label-fw:var(--sc-label-font-weight)}label{font-size:var(--sc-label-fs);font-weight:var(--sc-label-fw);line-height:1.2}.form-label{margin-bottom:.22em;display:block}`;
 const description = i$4`.form-description{color:var(--sc-base-400);font-size:.85em;margin-top:.2em;display:block}`;
-const formControl = i$4`*{box-sizing:border-box}:host{--sc-input-height:var(--sc-form-height);--sc-input-c:var(--sc-input-color, var(--sc-base-content));--sc-input-b-width:var(--sc-form-border-width);--sc-input-b-color:var(--sc-input-border-color);--sc-item-rounded-tr:var(--sc-input-rounded);--sc-item-rounded-tl:var(--sc-input-rounded);--sc-item-rounded-bl:var(--sc-input-rounded);--sc-item-rounded-br:var(--sc-input-rounded);--sc-input-fs:var(--sc-fs, 1rem);--sc-input-ff:inherit;--sc-input-py:0.55em;--sc-input-px:clamp(0.3em, 8%, 1.1em);--sc-input-background:var(--sc-input-bg);--sc-input-addon-c:var(--sc-input-addon-color, var(--sc-base));--sc-input-addon-bg:var(--sc-input-c)}.form-element{display:block;flex-grow:1;width:100%;line-height:1.1;color:var(--sc-input-c);border-radius:var(--sc-item-rounded-tl) var(--sc-item-rounded-tr) var(--sc-item-rounded-br) var(--sc-item-rounded-bl);font-family:var(--sc-input-ff);background-color:var(--sc-input-background);border:var(--sc-input-b-width) solid var(--sc-input-b-color,var(--sc-base-300,#aaa));width:100%;font-size:var(--sc-input-fs);padding-top:var(--sc-input-py);padding-bottom:var(--sc-input-py);padding-left:var(--sc-input-px);padding-right:var(--sc-input-px);min-height:var(--sc-input-height)}.form-control{display:flex;width:100%}:host(:not([inlineContent])) .has-prefix slot[name=prefix],:host(:not([inlineContent])) .has-suffix slot[name=suffix]{min-width:var(--sc-input-height);box-sizing:border-box;display:flex;align-items:center;justify-content:center;line-height:1.1;flex-shrink:0;padding-left:clamp(.25em,3%,calc(.33 * var(--sc-input-px)));padding-right:clamp(.25em,3%,calc(.33 * var(--sc-input-px)))}:host(:not([inlineContent])) slot[name=prefix]{border-radius:var(--sc-item-rounded-tl) 0 0 var(--sc-item-rounded-bl);background-color:var(--sc-input-addon-bg);color:var(--sc-input-addon-c)}:host(:not([inlineContent])) slot[name=suffix]{border-radius:0 var(--sc-item-rounded-tr) var(--sc-item-rounded-br) 0;background-color:var(--sc-input-addon-bg);color:var(--sc-input-addon-c)}:host(:not([inlineContent])) .has-prefix .form-element{border-top-left-radius:0;border-bottom-left-radius:0}:host(:not([inlineContent])) .has-suffix .form-element{border-top-right-radius:0;border-bottom-right-radius:0}slot[name=prefix]::slotted(sonic-icon),slot[name=suffix]::slotted(sonic-icon){font-size:1.2em}.form-element .form-element,.form-element>slot{all:unset}:host([inlineContent]) .form-element{display:flex;align-items:center;gap:.35em;min-height:var(--sc-form-height)}:host([inlineContent]) .form-element .form-element{appearance:none;background:0 0;border:none;padding:0;display:block;width:50%;min-width:0;flex:1 1 auto;height:auto;min-height:auto;border-radius:0}:host([inlineContent]) slot[name=prefix]::slotted(*),:host([inlineContent]) slot[name=suffix]::slotted(*){display:block;flex:0 0 auto;max-width:100%;max-width:100%}:host([inlineContent]) .has-suffix slot[name=suffix]{margin-right:calc(-.5 * var(--sc-input-px))}:host([inlineContent]) .has-prefix slot[name=prefix]{margin-left:calc(-.5 * var(--sc-input-px))}:host([inlineContent]) slot[name=suffix]::slotted(*){margin-left:auto}:host([disabled]) .form-control{cursor:not-allowed}:host([variant=ghost]) .form-element{--sc-input-bg:transparent}:host([disabled]) .form-element{pointer-events:none;opacity:.5}:host([disabled]) .select-chevron{display:none}::placeholder{color:inherit;opacity:.45}:host([placehoderAsLabel]) ::placeholder{opacity:1}:focus::placeholder{opacity:0!important}.form-element:focus,.form-element:focus-visible,:host(:not([disabled])) .form-element:hover{filter:brightness(.97);outline:0}.form-label{margin-bottom:.22em;display:block}.form-description{color:var(--sc-base-400);font-size:.85em;margin-top:.2em;display:block}.hidden{display:none}.contents{display:contents}:host([error]){--sc-input-b-color:var(--sc-danger)}:host input:visited{display:none}:host([touched][required]) :not(:focus):invalid{--sc-input-b-color:var(--sc-danger);--sc-input-c:var(--sc-danger)}:host([touched][required]) :not(:focus):invalid+.select-chevron{--sc-input-c:var(--sc-danger)}:host([touched][required]) :not([value=""]):not(:focus):valid{--sc-input-b-color:var(--sc-success);--sc-input-c:var(--sc-success)}:host([touched][required]) :not(:focus):valid+.select-chevron{--sc-input-c:var(--sc-success)}:host([type=color]) .form-element{padding:0;border:0;min-width:var(--sc-input-height)}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:var(--sc-item-rounded-tl) var(--sc-item-rounded-tr) var(--sc-item-rounded-br) var(--sc-item-rounded-bl)}:host([type=image]) .form-element{padding:0;border:none}input[type=reset],input[type=submit]{cursor:pointer}:host([type=search]){appearance:none!important}input[type=search]::-webkit-search-cancel-button{appearance:none;cursor:pointer;height:.65em;width:.65em;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjEyMy4wNXB4IiBoZWlnaHQ9IjEyMy4wNXB4IiB2aWV3Qm94PSIwIDAgMTIzLjA1IDEyMy4wNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTIzLjA1IDEyMy4wNTsiDQoJIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggZD0iTTEyMS4zMjUsMTAuOTI1bC04LjUtOC4zOTljLTIuMy0yLjMtNi4xLTIuMy04LjUsMGwtNDIuNCw0Mi4zOTlMMTguNzI2LDEuNzI2Yy0yLjMwMS0yLjMwMS02LjEwMS0yLjMwMS04LjUsMGwtOC41LDguNQ0KCQljLTIuMzAxLDIuMy0yLjMwMSw2LjEsMCw4LjVsNDMuMSw0My4xbC00Mi4zLDQyLjVjLTIuMywyLjMtMi4zLDYuMSwwLDguNWw4LjUsOC41YzIuMywyLjMsNi4xLDIuMyw4LjUsMGw0Mi4zOTktNDIuNGw0Mi40LDQyLjQNCgkJYzIuMywyLjMsNi4xLDIuMyw4LjUsMGw4LjUtOC41YzIuMy0yLjMsMi4zLTYuMSwwLTguNWwtNDIuNS00Mi40bDQyLjQtNDIuMzk5QzEyMy42MjUsMTcuMTI1LDEyMy42MjUsMTMuMzI1LDEyMS4zMjUsMTAuOTI1eiIvPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo=);background-size:contain;background-repeat:no-repeat}:host([align=center]) .form-element{text-align:center}:host([align=left]) .form-element{text-align:left}:host([align=right]) .form-element{text-align:right}:host([noAppearance]) input[type=number]::-webkit-inner-spin-button,:host([noAppearance]) input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}:host([noAppearance]) input[type=number]{-moz-appearance:textfield!important}`;
+const formControl = i$4`*{box-sizing:border-box}:host{--sc-input-height:var(--sc-form-height);--sc-input-c:var(--sc-input-color, var(--sc-base-content));--sc-input-b-width:var(--sc-form-border-width);--sc-input-b-color:var(--sc-input-border-color);--sc-item-rounded-tr:var(--sc-input-rounded);--sc-item-rounded-tl:var(--sc-input-rounded);--sc-item-rounded-bl:var(--sc-input-rounded);--sc-item-rounded-br:var(--sc-input-rounded);--sc-input-fs:var(--sc-fs, 1rem);--sc-input-ff:inherit;--sc-input-py:0.55em;--sc-input-px:clamp(0.3em, 8%, 1.1em);--sc-input-background:var(--sc-input-bg);--sc-input-addon-c:var(--sc-input-addon-color, var(--sc-base));--sc-input-addon-bg:var(--sc-input-c)}.form-element{display:block;flex-grow:1;width:100%;line-height:1.1;color:var(--sc-input-c);border-radius:var(--sc-item-rounded-tl) var(--sc-item-rounded-tr) var(--sc-item-rounded-br) var(--sc-item-rounded-bl);font-family:var(--sc-input-ff);background-color:var(--sc-input-background);border:var(--sc-input-b-width) solid var(--sc-input-b-color,var(--sc-base-300,#aaa));width:100%;font-size:var(--sc-input-fs);padding-top:var(--sc-input-py);padding-bottom:var(--sc-input-py);padding-left:var(--sc-input-px);padding-right:var(--sc-input-px);min-height:var(--sc-input-height)}.form-control{display:flex;width:100%}:host(:not([inlineContent])) .has-prefix slot[name=prefix],:host(:not([inlineContent])) .has-suffix slot[name=suffix]{min-width:var(--sc-input-height);box-sizing:border-box;display:flex;align-items:center;justify-content:center;line-height:1.1;flex-shrink:0;padding-left:clamp(.25em,3%,calc(.33 * var(--sc-input-px)));padding-right:clamp(.25em,3%,calc(.33 * var(--sc-input-px)))}:host(:not([inlineContent])) slot[name=prefix]{border-radius:var(--sc-item-rounded-tl) 0 0 var(--sc-item-rounded-bl);background-color:var(--sc-input-addon-bg);color:var(--sc-input-addon-c)}:host(:not([inlineContent])) slot[name=suffix]{border-radius:0 var(--sc-item-rounded-tr) var(--sc-item-rounded-br) 0;background-color:var(--sc-input-addon-bg);color:var(--sc-input-addon-c)}:host(:not([inlineContent])) .has-prefix .form-element{border-top-left-radius:0;border-bottom-left-radius:0}:host(:not([inlineContent])) .has-suffix .form-element{border-top-right-radius:0;border-bottom-right-radius:0}slot[name=prefix]::slotted(sonic-icon),slot[name=suffix]::slotted(sonic-icon){font-size:1.2em}.form-element .form-element,.form-element>slot{all:unset}:host([inlineContent]) .form-element{display:flex;align-items:center;gap:.35em;min-height:var(--sc-form-height)}:host([inlineContent]) .form-element .form-element{appearance:none;background:0 0;border:none;padding:0;display:block;width:50%;min-width:0;flex:1 1 auto;height:auto;min-height:auto;border-radius:0}:host([inlineContent]) slot[name=prefix]::slotted(*),:host([inlineContent]) slot[name=suffix]::slotted(*){display:block;flex:0 0 auto;max-width:100%;max-width:100%}:host([inlineContent]) .has-suffix slot[name=suffix]{margin-right:calc(-.5 * var(--sc-input-px))}:host([inlineContent]) .has-prefix slot[name=prefix]{margin-left:calc(-.5 * var(--sc-input-px))}:host([inlineContent]) slot[name=suffix]::slotted(*){margin-left:auto}:host([inlineContent]) .no-prefix slot[name=prefix],:host([inlineContent]) .no-suffix slot[name=suffix]{display:none}:host([disabled]) .form-control{cursor:not-allowed}:host([variant=ghost]) .form-element{--sc-input-bg:transparent}:host([disabled]) .form-element{pointer-events:none;opacity:.5}:host([disabled]) .select-chevron{display:none}::placeholder{color:inherit;opacity:.45}:host([placehoderAsLabel]) ::placeholder{opacity:1}:focus::placeholder{opacity:0!important}.form-element:focus,.form-element:focus-visible,:host(:not([disabled])) .form-element:hover{filter:brightness(.97);outline:0}.form-label{margin-bottom:.22em;display:block}.form-description{color:var(--sc-base-400);font-size:.85em;margin-top:.2em;display:block}.hidden{display:none}.contents{display:contents}:host([error]){--sc-input-b-color:var(--sc-danger)}:host input:visited{display:none}:host([touched][required]) :not(:focus):invalid{--sc-input-b-color:var(--sc-danger);--sc-input-c:var(--sc-danger)}:host([touched][required]) :not(:focus):invalid+.select-chevron{--sc-input-c:var(--sc-danger)}:host([touched][required]) :not([value=""]):not(:focus):valid{--sc-input-b-color:var(--sc-success);--sc-input-c:var(--sc-success)}:host([touched][required]) :not(:focus):valid+.select-chevron{--sc-input-c:var(--sc-success)}:host([type=color]) .form-element{padding:0;border:0;min-width:var(--sc-input-height)}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:var(--sc-item-rounded-tl) var(--sc-item-rounded-tr) var(--sc-item-rounded-br) var(--sc-item-rounded-bl)}:host([type=image]) .form-element{padding:0;border:none}input[type=reset],input[type=submit]{cursor:pointer}:host([type=search]){appearance:none!important}input[type=search]::-webkit-search-cancel-button{appearance:none;cursor:pointer;height:.65em;width:.65em;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjEyMy4wNXB4IiBoZWlnaHQ9IjEyMy4wNXB4IiB2aWV3Qm94PSIwIDAgMTIzLjA1IDEyMy4wNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTIzLjA1IDEyMy4wNTsiDQoJIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggZD0iTTEyMS4zMjUsMTAuOTI1bC04LjUtOC4zOTljLTIuMy0yLjMtNi4xLTIuMy04LjUsMGwtNDIuNCw0Mi4zOTlMMTguNzI2LDEuNzI2Yy0yLjMwMS0yLjMwMS02LjEwMS0yLjMwMS04LjUsMGwtOC41LDguNQ0KCQljLTIuMzAxLDIuMy0yLjMwMSw2LjEsMCw4LjVsNDMuMSw0My4xbC00Mi4zLDQyLjVjLTIuMywyLjMtMi4zLDYuMSwwLDguNWw4LjUsOC41YzIuMywyLjMsNi4xLDIuMyw4LjUsMGw0Mi4zOTktNDIuNGw0Mi40LDQyLjQNCgkJYzIuMywyLjMsNi4xLDIuMyw4LjUsMGw4LjUtOC41YzIuMy0yLjMsMi4zLTYuMSwwLTguNWwtNDIuNS00Mi40bDQyLjQtNDIuMzk5QzEyMy42MjUsMTcuMTI1LDEyMy42MjUsMTMuMzI1LDEyMS4zMjUsMTAuOTI1eiIvPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo=);background-size:contain;background-repeat:no-repeat}:host([align=center]) .form-element{text-align:center}:host([align=left]) .form-element{text-align:left}:host([align=right]) .form-element{text-align:right}:host([noAppearance]) input[type=number]::-webkit-inner-spin-button,:host([noAppearance]) input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}:host([noAppearance]) input[type=number]{-moz-appearance:textfield!important}`;
 /**
  * @license
  * Copyright 2018 Google LLC
@@ -6516,10 +6787,12 @@ let Input = class extends Form(Form$2(Subscriber$1(s$3))) {
     this.readonly = false;
     this.inlineContent = false;
     this.disableInlineContentFocus = false;
+    this.showPasswordToggle = false;
     this.hasDescription = false;
     this.hasLabel = false;
     this.hasSuffix = false;
     this.hasPrefix = false;
+    this.isPassword = false;
   }
   connectedCallback() {
     super.connectedCallback();
@@ -6532,6 +6805,11 @@ let Input = class extends Form(Form$2(Subscriber$1(s$3))) {
         return;
       formPublisher[this.sameValueAsName].onAssign(this.sameValueAsHandle);
     }
+    if (this.type == "password") {
+      this.isPassword = true;
+      this.showPasswordToggle = true;
+      this.inlineContent = true;
+    }
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -6546,6 +6824,9 @@ let Input = class extends Form(Form$2(Subscriber$1(s$3))) {
     this.hasSlotOrProps();
     super.willUpdate(changedProperties);
   }
+  setSelectionRange(start, end) {
+    this.input.setSelectionRange(start, end);
+  }
   hasSlotOrProps() {
     var _a2, _b, _c, _d;
     this.hasLabel = this.label || ((_a2 = this.slotLabelNodes) == null ? void 0 : _a2.length) ? true : false;
@@ -6566,14 +6847,26 @@ let Input = class extends Form(Form$2(Subscriber$1(s$3))) {
     }
     if (this.changeTimeoutId)
       clearTimeout(this.changeTimeoutId);
-    this.changeTimeoutId = setTimeout(() => super.handleChange(e2), parseInt(this.getAttribute("inputDelayMs")));
+    this.changeTimeoutId = setTimeout(
+      () => super.handleChange(e2),
+      parseInt(this.getAttribute("inputDelayMs"))
+    );
+  }
+  togglePasswordVisibility() {
+    this.isPassword = !this.isPassword;
+    this._type = this.isPassword ? "password" : "text";
+    console.log(this.isPassword);
   }
   render() {
     const slotClasses = {
       "has-prefix": this.hasPrefix,
-      "has-suffix": this.hasSuffix
+      "has-suffix": this.hasSuffix,
+      "no-suffix": !this.hasSuffix,
+      "no-prefix": !this.hasPrefix
     };
-    return y`<label for="form-element" class="${this.hasLabel ? "form-label" : "hidden"}">${this.label ? o$2(this.label) : ""}<slot name="label" @slotchange="${this.hasSlotOrProps}"></slot></label><div @click="${this.inlineContentFocus}" class="form-control ${o(slotClasses)}"><div class="${this.inlineContent ? "form-element form-element-wrapper" : "contents"}"><slot name="prefix" @slotchange="${this.hasSlotOrProps}"></slot><input id="form-element" part="input" class="form-element input" @input="${this.handleChange}" @blur="${this.handleBlur}" type="${this.type}" disabled="${l$2(this.disabled)}" ?readonly="${this.readonly}" ?autofocus="${this.autofocus}" list="${l$2(this.list)}" tabindex="${l$2(this.tabindex)}" pattern="${l$2(this.pattern)}" min="${l$2(this.min)}" max="${l$2(this.max)}" step="${l$2(this.step)}" src="${l$2(this.src)}" minlength="${l$2(this.minlength)}" maxlength="${l$2(this.maxlength)}" placeholder="${l$2(this.placeholder)}" required="${l$2(this.required)}" autocomplete="${l$2(this.autocomplete)}" aria-label="${l$2(this.ariaLabel)}" aria-labelledby="${l$2(this.ariaLabelledby)}" .name="${this.name}" .value="${this.value}"><slot name="suffix" @slotchange="${this.hasSlotOrProps}"></slot></div></div><slot name="description" @slotchange="${this.hasSlotOrProps}" class="${this.hasDescription ? "form-description" : "hidden"}">${this.description ? y`${o$2(this.description)}` : ""}</slot><slot name="list"></slot>`;
+    return y`<label for="form-element" class="${this.hasLabel ? "form-label" : "hidden"}">${this.label ? o$3(this.label) : ""}<slot name="label" @slotchange="${this.hasSlotOrProps}"></slot></label><div @click="${this.inlineContentFocus}" class="form-control ${o(
+      slotClasses
+    )}"><div class="${this.inlineContent ? "form-element form-element-wrapper" : "contents"}"><slot name="prefix" @slotchange="${this.hasSlotOrProps}"></slot><input id="form-element" part="input" class="form-element input" @input="${this.handleChange}" @blur="${this.handleBlur}" type="${this.type}" disabled="${l$2(this.disabled)}" ?readonly="${this.readonly}" ?autofocus="${this.autofocus}" list="${l$2(this.list)}" tabindex="${l$2(this.tabindex)}" pattern="${l$2(this.pattern)}" min="${l$2(this.min)}" max="${l$2(this.max)}" step="${l$2(this.step)}" src="${l$2(this.src)}" minlength="${l$2(this.minlength)}" maxlength="${l$2(this.maxlength)}" placeholder="${l$2(this.placeholder)}" required="${l$2(this.required)}" autocomplete="${l$2(this.autocomplete)}" aria-label="${l$2(this.ariaLabel)}" aria-labelledby="${l$2(this.ariaLabelledby)}" .name="${this.name}" .value="${this.value}"> ${this.showPasswordToggle ? y`<sonic-button shape="circle" class="password-toggle" @click="${this.togglePasswordVisibility}" aria-label="Toggle password visibility" variant="unstyled"><sonic-icon library="heroicons" name="${this.isPassword ? "eye" : "eye-slash"}"></sonic-icon></sonic-button>` : ""}<slot name="suffix" @slotchange="${this.hasSlotOrProps}"></slot></div></div><slot name="description" @slotchange="${this.hasSlotOrProps}" class="${this.hasDescription ? "form-description" : "hidden"}">${this.description ? y`${o$3(this.description)}` : ""}</slot><slot name="list"></slot>`;
   }
 };
 Input.styles = [
@@ -6581,7 +6874,8 @@ Input.styles = [
   formControl,
   label,
   description,
-  i$4`:host([type=hidden]){appearance:none!important;display:none!important}`
+  passwordToggle,
+  i$4`:host([type=hidden]){appearance:none!important;display:none!important}:host>.form-control{position:relative}`
 ];
 __decorateClass$G([
   e$7({ type: String, reflect: true })
@@ -6623,16 +6917,19 @@ __decorateClass$G([
   e$7({ type: Boolean })
 ], Input.prototype, "disableInlineContentFocus", 2);
 __decorateClass$G([
-  o$8({ slot: "label" })
+  e$7({ type: Boolean })
+], Input.prototype, "showPasswordToggle", 2);
+__decorateClass$G([
+  o$9({ slot: "label" })
 ], Input.prototype, "slotLabelNodes", 2);
 __decorateClass$G([
-  o$8({ slot: "description" })
+  o$9({ slot: "description" })
 ], Input.prototype, "slotDescriptionNodes", 2);
 __decorateClass$G([
-  o$8({ slot: "suffix" })
+  o$9({ slot: "suffix" })
 ], Input.prototype, "slotSuffixNodes", 2);
 __decorateClass$G([
-  o$8({ slot: "prefix" })
+  o$9({ slot: "prefix" })
 ], Input.prototype, "slotPrefixNodes", 2);
 __decorateClass$G([
   i$5("input")
@@ -6649,6 +6946,9 @@ __decorateClass$G([
 __decorateClass$G([
   t$3()
 ], Input.prototype, "hasPrefix", 2);
+__decorateClass$G([
+  t$3()
+], Input.prototype, "isPassword", 2);
 Input = __decorateClass$G([
   e$8(tagName$E)
 ], Input);
@@ -6675,7 +6975,9 @@ let Pop = class extends s$3 {
     this.positioningRuns = false;
     this.lastContentX = 0;
     this.lastContentY = 0;
-    this.resizeObserver = new ResizeObserver(() => this.computePosition(this.placement));
+    this.resizeObserver = new ResizeObserver(
+      () => this.computePosition(this.placement)
+    );
   }
   runPositioningLoop() {
     if (!this.positioningRuns)
@@ -6703,18 +7005,22 @@ let Pop = class extends s$3 {
       this.lastContentY = 0;
       this.runPositioningLoop();
     }
+    this.dispatchEvent(new CustomEvent("show"));
   }
   _hide() {
     this.open = false;
     this.popContent.setAttribute("tabindex", "-1");
     this.positioningRuns = false;
+    this.dispatchEvent(new CustomEvent("hide"));
   }
   _handleClosePop(e2) {
     const path = e2.composedPath();
     const target = path[0];
     Pop.pops.forEach((pop) => {
       const popContainsTarget = path.includes(pop);
-      const popContentContainsTarget = path.includes(pop.querySelector('[slot="content"]'));
+      const popContentContainsTarget = path.includes(
+        pop.querySelector('[slot="content"]')
+      );
       const isCloseManual = HTML$1.getAncestorAttributeValue(target, "data-on-select") === "keep";
       if (e2.type == "pointerdown" && popContainsTarget)
         return;
@@ -6734,7 +7040,6 @@ let Pop = class extends s$3 {
   firstUpdated(_changedProperties) {
     super.firstUpdated(_changedProperties);
     this.resizeObserver.observe(this.popContent);
-    this.computePosition(this.placement);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -6812,7 +7117,7 @@ let Pop = class extends s$3 {
     });
   }
   render() {
-    return y`<slot @click="${this._toggle}" @keydown="${this._toggle}" class="contents"></slot><slot name="content" tabindex="-1" part="content" class="${this.open ? "is-open" : ""}"></slot>`;
+    return y`<slot @click="${this._toggle}" @keydown="${this._toggle}" class="contents"></slot><slot name="content" tabindex="-1" part="content" style="display:none" class="${this.open ? "is-open" : ""}"></slot>`;
   }
 };
 Pop.pops = /* @__PURE__ */ new Set();
@@ -6889,69 +7194,150 @@ var __decorateClass$D = (decorators, target, key, kind) => {
     __defProp$D(target, key, result);
   return result;
 };
-let InputAutocomplete = class extends TemplatesContainer(Subscriber(s$3)) {
+let InputAutocomplete = class extends TemplatesContainer(
+  FormInput(FormElement(Subscriber(s$3)))
+) {
   constructor() {
     super(...arguments);
-    this._name = "";
-    this.forceAutoFill = false;
+    this.size = "md";
     this.placeholder = "";
     this.filteredFields = "";
     this.readonly = null;
     this.dataProviderExpression = "";
     this.key = "";
-    this.value = "";
-    this.formDataProvider = "";
-  }
-  get name() {
-    return this._name;
-  }
-  set name(value) {
-    if (this.hasAttribute("name") && !this.forceAutoFill)
-      value = this.getAttribute("name");
-    this._name = value;
-    this.requestUpdate();
-  }
-  get description() {
-    return this._description;
+    this.searchParameter = "";
+    this.searchDataProvider = "";
+    this.initSearchDataProvider = "";
+    this.queueDataProvider = "";
+    this.initQueueDataProvider = "";
+    this.lastValidSearch = "";
+    this.updateSearchParameter = (value) => {
+      if (value == "") {
+        this.lastValidSearch = "";
+        return;
+      }
+      this.queryQueueListItem(
+        this.queueDataProvider,
+        this.findSelection,
+        this.setSearchFromSelection
+      );
+    };
+    this.initSearchParameter = () => {
+      this.queryQueueListItem(
+        this.initQueueDataProvider,
+        this.findSelection,
+        this.setSearchFromSelection
+      );
+    };
+    this.selectListItem = (listItem) => {
+      var _a2;
+      (_a2 = this.formValuePublisher) == null ? void 0 : _a2.set(listItem[this.name]);
+    };
+    this.findSearchedItem = (listItem) => {
+      var _a2;
+      return listItem[this.searchParameter || this.name] == ((_a2 = this.searchPublisher) == null ? void 0 : _a2.get());
+    };
+    this.findSelection = (listItem) => {
+      return listItem[this.name] == this.value;
+    };
+    this.setSearchFromSelection = (listItem) => {
+      var _a2;
+      this.lastValidSearch = listItem[this.searchParameter || this.name];
+      (_a2 = this.searchPublisher) == null ? void 0 : _a2.set(this.lastValidSearch);
+    };
+    this.updateActiveSelection = () => {
+      var _a2, _b, _c;
+      this.queryQueueListItem(
+        this.queueDataProvider,
+        this.findSearchedItem,
+        this.selectListItem
+      );
+      if (!this.select && this.lastValidSearch && this.lastValidSearch != ((_a2 = this.searchPublisher) == null ? void 0 : _a2.get()) && ((_b = this.formValuePublisher) == null ? void 0 : _b.get())) {
+        (_c = this.formValuePublisher) == null ? void 0 : _c.set("");
+      }
+    };
   }
-  set description(value) {
-    if (this.hasAttribute("description") && !this.forceAutoFill)
-      value = this.getAttribute("description");
-    this._description = value;
-    this.requestUpdate();
+  connectedCallback() {
+    var _a2, _b, _c;
+    super.connectedCallback();
+    const searchParameter = this.searchParameter || this.name;
+    const formDataProvider = this.getAncestorAttributeValue("formDataProvider");
+    const dpPrefix = formDataProvider + "__autocomplete";
+    this.initSearchDataProvider = `${dpPrefix}_init_search__`;
+    this.initQueueDataProvider = `${dpPrefix}_init_queue__`;
+    this.searchDataProvider = `${dpPrefix}_search__`;
+    this.queueDataProvider = `${dpPrefix}_queue__`;
+    const getPublisher = PublisherManager.get;
+    this.searchPublisher = getPublisher(this.searchDataProvider)[searchParameter];
+    this.formValuePublisher = getPublisher(formDataProvider)[this.name];
+    this.countPublisher = getPublisher(this.queueDataProvider).resultCount;
+    this.initCountPublisher = getPublisher(
+      this.initQueueDataProvider
+    ).resultCount;
+    if (this.value) {
+      PublisherManager.get(this.initSearchDataProvider)[this.name] = this.value;
+    }
+    (_a2 = this.initCountPublisher) == null ? void 0 : _a2.onAssign(this.initSearchParameter);
+    (_b = this.formValuePublisher) == null ? void 0 : _b.onAssign(this.updateSearchParameter);
+    (_c = this.countPublisher) == null ? void 0 : _c.onAssign(this.updateActiveSelection);
   }
-  get label() {
-    return this._label;
+  disconnectedCallback() {
+    var _a2, _b, _c;
+    super.disconnectedCallback();
+    (_a2 = this.initCountPublisher) == null ? void 0 : _a2.offAssign(this.initSearchParameter);
+    (_b = this.formValuePublisher) == null ? void 0 : _b.offAssign(this.updateSearchParameter);
+    (_c = this.countPublisher) == null ? void 0 : _c.offAssign(this.updateActiveSelection);
+    const getPublisher = PublisherManager.get;
+    getPublisher(this.initSearchDataProvider).delete();
+    getPublisher(this.initQueueDataProvider).delete();
+    getPublisher(this.searchDataProvider).delete();
+    getPublisher(this.queueDataProvider).delete();
+  }
+  queryQueueListItem(queueDataProvider, itemFinder, itemMutator) {
+    const queuePublisher = PublisherManager.get(queueDataProvider);
+    let listItem;
+    const listsDescriptors = queuePublisher.get();
+    if (!Array.isArray(listsDescriptors))
+      return;
+    for (const listDescriptor of listsDescriptors) {
+      const list = PublisherManager.get(listDescriptor.dataProvider).get();
+      if (!Array.isArray(list))
+        continue;
+      listItem = list.find(itemFinder);
+      console.log(listItem);
+      if (listItem) {
+        break;
+      }
+    }
+    if (listItem) {
+      itemMutator(listItem);
+    }
   }
-  set label(value) {
-    if (this.hasAttribute("label") && !this.forceAutoFill)
-      value = this.getAttribute("label");
-    this._label = value;
-    this.requestUpdate();
+  setSelectionRange(start, end) {
+    var _a2;
+    (_a2 = this.querySelector("sonic-input")) == null ? void 0 : _a2.setSelectionRange(start, end);
   }
-  connectedCallback() {
-    this.formDataProvider = this.getAncestorAttributeValue("formDataProvider");
-    super.connectedCallback();
+  handleHide() {
+    var _a2, _b, _c;
+    if (!this.select)
+      return;
+    if (((_a2 = this.searchPublisher) == null ? void 0 : _a2.get()) == "") {
+      this.lastValidSearch = "";
+      (_b = this.formValuePublisher) == null ? void 0 : _b.set("");
+      return;
+    }
+    (_c = this.searchPublisher) == null ? void 0 : _c.set(this.lastValidSearch);
   }
   render() {
-    return y`<sonic-pop noToggle style="display:block"><sonic-input type="search" data-keyboard-nav="nav-autocomplete" label="${l$2(this.label)}" description="${l$2(this.description)}" name="${l$2(this.name)}" value="${l$2(this.value)}" autocomplete="off" clearable></sonic-input><sonic-menu slot="content"><sonic-queue filteredFields="${this.filteredFields}" dataProviderExpression="${this.dataProviderExpression}" dataFilterProvider="${this.formDataProvider}" key="${this.key}" .templates="${this.templateList}" displayContents></sonic-queue></sonic-menu></sonic-pop>`;
+    return y`<sonic-pop noToggle style="display:block" @hide="${this.handleHide}"><sonic-input debug dataProvider="${this.initSearchDataProvider + Math.random()}" formDataProvider="${this.searchDataProvider}" type="search" data-keyboard-nav="${this.getAttribute("data-keyboard-nav") || ""}" label="${l$2(this.label)}" description="${l$2(this.description)}" name="${l$2(this.searchParameter || this.name)}" placeholder="${l$2(this.placeholder)}" ?readonly="${this.readonly}" autocomplete="off" clearable inlineContent size="${this.size}">${this.select ? y`<sonic-icon slot="suffix" class="select-chevron" name="nav-arrow-down" .size="${this.size}"></sonic-icon>` : b$1}</sonic-input><sonic-menu slot="content"><sonic-queue dataProvider="${this.queueDataProvider}" filteredFields="${this.filteredFields}" dataProviderExpression="${this.dataProviderExpression}" dataFilterProvider="${this.searchDataProvider}" key="${this.key}" .templates="${this.templateList}" displayContents></sonic-queue><sonic-queue noLazyload dataProvider="${this.initQueueDataProvider}" filteredFields="${this.filteredFields}" dataProviderExpression="${this.dataProviderExpression}" dataFilterProvider="${this.initSearchDataProvider}" key="${this.key}" displayContents></sonic-queue></sonic-menu></sonic-pop>`;
   }
 };
 InputAutocomplete.styles = [
   i$4`:host{display:block}`
 ];
 __decorateClass$D([
-  e$7()
-], InputAutocomplete.prototype, "name", 1);
-__decorateClass$D([
-  e$7()
-], InputAutocomplete.prototype, "forceAutoFill", 2);
-__decorateClass$D([
-  e$7()
-], InputAutocomplete.prototype, "description", 1);
-__decorateClass$D([
-  e$7()
-], InputAutocomplete.prototype, "label", 1);
+  e$7({ type: String })
+], InputAutocomplete.prototype, "size", 2);
 __decorateClass$D([
   e$7({ type: String })
 ], InputAutocomplete.prototype, "placeholder", 2);
@@ -6964,12 +7350,15 @@ __decorateClass$D([
 __decorateClass$D([
   e$7({ type: String })
 ], InputAutocomplete.prototype, "dataProviderExpression", 2);
+__decorateClass$D([
+  e$7({ type: Boolean })
+], InputAutocomplete.prototype, "select", 2);
 __decorateClass$D([
   e$7({ type: String })
 ], InputAutocomplete.prototype, "key", 2);
 __decorateClass$D([
   e$7({ type: String })
-], InputAutocomplete.prototype, "value", 2);
+], InputAutocomplete.prototype, "searchParameter", 2);
 InputAutocomplete = __decorateClass$D([
   e$8("sonic-input-autocomplete")
 ], InputAutocomplete);
@@ -7129,7 +7518,7 @@ let SonicComponent = class extends Subscriber(s$3) {
   render() {
     if (this.hasNoChar)
       return b$1;
-    return y`<span>${this.areEqual ? o$2(this.descriptionWhenEqual) : o$2(this.descriptionWhenNotEqual)}</span>`;
+    return y`<span>${this.areEqual ? o$3(this.descriptionWhenEqual) : o$3(this.descriptionWhenNotEqual)}</span>`;
   }
 };
 __decorateClass$B([
@@ -7165,12 +7554,15 @@ var __decorateClass$A = (decorators, target, key, kind) => {
   return result;
 };
 const tagName$z = "sonic-checkbox";
-let Checkbox = class extends Form$1(Form(Form$2(Subscriber$1(s$3)))) {
+let Checkbox = class extends Form$1(
+  Form(Form$2(Subscriber$1(s$3)))
+) {
   constructor() {
     super(...arguments);
     this.touched = false;
     this.iconName = "check";
     this.indeterminateIconName = "minus-small";
+    this.showAsIndeterminate = false;
     this.hasDescription = false;
     this.hasLabel = false;
   }
@@ -7189,12 +7581,12 @@ let Checkbox = class extends Form$1(Form(Form$2(Subscriber$1(s$3)))) {
     this.hasDescription = this.description || ((_b = this.slotDescriptionNodes) == null ? void 0 : _b.length) ? true : false;
   }
   render() {
-    return y`<label class="checkbox-container ${this.disabled ? "disabled" : ""}"><span class="icon-container"><input type="${this.type}" @click="${this.handleChange}" @blur="${this.handleBlur}" ?required="${this.required}" .disabled="${l$2(this.disabled)}" .checked="${l$2(this.checked)}" .name="${this.name}" .value="${this.value}" ?autofocus="${this.autofocus}" aria-label="${l$2(this.ariaLabel)}" aria-labelledby="${l$2(this.ariaLabelledby)}"><sonic-icon name="${this.checked == "indeterminate" ? this.indeterminateIconName : this.iconName}" class="sc-input-icon"></sonic-icon></span><div class="checkbox-text ${!this.hasDescription && !this.hasLabel ? "hidden" : "checkbox-text"}">${this.label ? o$2(this.label) : ""}<slot @slotchange="${this.hasSlotOrProps}"></slot><slot @slotchange="${this.hasSlotOrProps}" name="description" class="${this.hasDescription ? "description" : "hidden"}">${this.description ? y`${o$2(this.description)}` : ""}</slot></div></label>`;
+    return y`<label class="checkbox-container ${this.disabled ? "disabled" : ""}"><span class="icon-container"><input type="${this.type}" @click="${this.handleChange}" @blur="${this.handleBlur}" ?required="${this.required}" ?data-indeterminate="${this.showAsIndeterminate}" .disabled="${l$2(this.disabled)}" .checked="${l$2(this.checked)}" .name="${this.name}" .value="${this.value}" ?autofocus="${this.autofocus}" aria-label="${l$2(this.ariaLabel)}" aria-labelledby="${l$2(this.ariaLabelledby)}"><sonic-icon name="${this.checked == "indeterminate" || this.showAsIndeterminate ? this.indeterminateIconName : this.iconName}" class="sc-input-icon"></sonic-icon></span><div class="checkbox-text ${!this.hasDescription && !this.hasLabel ? "hidden" : "checkbox-text"}">${this.label ? o$3(this.label) : ""}<slot @slotchange="${this.hasSlotOrProps}"></slot><slot @slotchange="${this.hasSlotOrProps}" name="description" class="${this.hasDescription ? "description" : "hidden"}">${this.description ? y`${o$3(this.description)}` : ""}</slot></div></label>`;
   }
 };
 Checkbox.styles = [
   fontSize,
-  i$4`:host{--sc-checkbox-border-width:var(--sc-form-border-width);--sc-checkbox-border-color:var(--sc-input-border-color);--sc-checkbox-bg:var(--sc-input-bg);--sc-checkbox-color:transparent}*{box-sizing:border-box}.checkbox-container{min-height:1.4em;display:flex;gap:.5em;line-height:1.2;align-items:flex-start;font-size:var(--sc-fs)}.icon-container{position:relative;display:flex;flex-shrink:0}input{box-sizing:border-box;appearance:none;flex-shrink:0;height:calc(var(--sc-fs) * 1.25);width:calc(var(--sc-fs) * 1.25);display:block;cursor:pointer;border-radius:.25em;transition:.2s;outline:0;margin:0;background-color:var(--sc-checkbox-bg);border:var(--sc-checkbox-border-width) solid var(--sc-checkbox-border-color)}:host(:not([disabled])) input:active,input:focus{box-shadow:0 0 0 2px var(--sc-primary)}:host(:not([disabled])) label{cursor:pointer}sonic-icon{line-height:0;position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%) scale(0);transition:transform .2s ease-in-out;color:var(--sc-checkbox-color)}.description{color:var(--sc-base-400);font-size:.85em;margin-top:.2em;display:block}input:checked,input[checked]{--sc-checkbox-border-color:var(--sc-primary);--sc-checkbox-bg:var(--sc-primary)}input:checked+sonic-icon,input[checked]+sonic-icon{--sc-checkbox-color:var(--sc-primary-content);transform:translateX(-50%) translateY(-50%) scale(1)}.disabled{cursor:not-allowed}.disabled input{opacity:.4}.disabled .checkbox-text{opacity:.6}:host(:not([disabled])) label:hover input{filter:brightness(.97)}::slotted(a){color:inherit;text-decoration:underline!important}::slotted(a:hover){text-decoration:none!important}.hidden{display:none}`
+  i$4`:host{--sc-checkbox-border-width:var(--sc-form-border-width);--sc-checkbox-border-color:var(--sc-input-border-color);--sc-checkbox-bg:var(--sc-input-bg);--sc-checkbox-color:transparent}*{box-sizing:border-box}.checkbox-container{min-height:1.4em;display:flex;gap:.5em;line-height:1.2;align-items:flex-start;font-size:var(--sc-fs)}.icon-container{position:relative;display:flex;flex-shrink:0}input{box-sizing:border-box;appearance:none;flex-shrink:0;height:calc(var(--sc-fs) * 1.25);width:calc(var(--sc-fs) * 1.25);display:block;cursor:pointer;border-radius:.25em;transition:.2s;outline:0;margin:0;background-color:var(--sc-checkbox-bg);border:var(--sc-checkbox-border-width) solid var(--sc-checkbox-border-color)}:host(:not([disabled])) input:active,input:focus{box-shadow:0 0 0 2px var(--sc-primary)}:host(:not([disabled])) label{cursor:pointer}sonic-icon{line-height:0;position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%) scale(0);transition:transform .2s ease-in-out;color:var(--sc-checkbox-color)}.description{color:var(--sc-base-400);font-size:.85em;margin-top:.2em;display:block}input:checked,input[checked],input[data-indeterminate]{--sc-checkbox-border-color:var(--sc-primary);--sc-checkbox-bg:var(--sc-primary)}input:checked+sonic-icon,input[checked]+sonic-icon,input[data-indeterminate]+sonic-icon{--sc-checkbox-color:var(--sc-primary-content);transform:translateX(-50%) translateY(-50%) scale(1)}.disabled{cursor:not-allowed}.disabled input{opacity:.4}.disabled .checkbox-text{opacity:.6}:host(:not([disabled])) label:hover input{filter:brightness(.97)}::slotted(a){color:inherit;text-decoration:underline!important}::slotted(a:hover){text-decoration:none!important}.hidden{display:none}`
 ];
 __decorateClass$A([
   e$7({ type: Boolean, reflect: true })
@@ -7205,6 +7597,9 @@ __decorateClass$A([
 __decorateClass$A([
   e$7({ type: String })
 ], Checkbox.prototype, "indeterminateIconName", 2);
+__decorateClass$A([
+  e$7({ type: Boolean })
+], Checkbox.prototype, "showAsIndeterminate", 2);
 __decorateClass$A([
   e$7({ type: Boolean })
 ], Checkbox.prototype, "hasDescription", 2);
@@ -7212,10 +7607,10 @@ __decorateClass$A([
   e$7({ type: Boolean })
 ], Checkbox.prototype, "hasLabel", 2);
 __decorateClass$A([
-  o$8()
+  o$9()
 ], Checkbox.prototype, "slotLabelNodes", 2);
 __decorateClass$A([
-  o$8({ slot: "description" })
+  o$9({ slot: "description" })
 ], Checkbox.prototype, "slotDescriptionNodes", 2);
 Checkbox = __decorateClass$A([
   e$8(tagName$z)
@@ -7374,14 +7769,14 @@ let Select = class extends Form$2(Subscriber$1(s$3)) {
       "has-prefix": this.hasPrefix,
       "has-suffix": this.hasSuffix
     };
-    return y`<label for="form-element" class="${this.hasLabel ? "form-label" : "hidden"}">${this.label ? o$2(this.label) : ""}<slot name="label" @slotchange="${this.hasSlotOrProps}"></slot></label><div class="form-control ${o(slotClasses)}"><slot name="prefix" @slotchange="${this.hasSlotOrProps}"></slot><div class="form-select-wrapper"><select id="form-element" @change="${this.handleChange}" @blur="${this.handleBlur}" ?disabled="${this.disabled}" ?required="${this.required}" ?multiple="${this.multiple}" size="${l$2(this.selectSize)}" ?autofocus="${this.autofocus}" .value="${this.value}" class="form-element" aria-label="${l$2(this.ariaLabel)}" aria-labelledby="${l$2(this.ariaLabelledby)}">${c$1(
+    return y`<label for="form-element" class="${this.hasLabel ? "form-label" : "hidden"}">${this.label ? o$3(this.label) : ""}<slot name="label" @slotchange="${this.hasSlotOrProps}"></slot></label><div class="form-control ${o(slotClasses)}"><slot name="prefix" @slotchange="${this.hasSlotOrProps}"></slot><div class="form-select-wrapper"><select id="form-element" @change="${this.handleChange}" @blur="${this.handleBlur}" ?disabled="${this.disabled}" ?required="${this.required}" ?multiple="${this.multiple}" size="${l$2(this.selectSize)}" ?autofocus="${this.autofocus}" .value="${this.value}" class="form-element" aria-label="${l$2(this.ariaLabel)}" aria-labelledby="${l$2(this.ariaLabelledby)}">${c$1(
       this.options,
       (option) => option[this.valueKey],
       (option) => {
         const isSelected = this.value == option[this.valueKey] ? true : false;
         return y`<option ?selected="${isSelected}" value="${option[this.valueKey]}">${option[this.wordingKey]}</option>`;
       }
-    )}<slot></slot></select><sonic-icon class="select-chevron" name="nav-arrow-down" .size="${this.size}"></sonic-icon></div><slot name="suffix" @slotchange="${this.hasSlotOrProps}"></slot></div><slot name="description" @slotchange="${this.hasSlotOrProps}" class="${this.hasDescription ? "form-description" : "hidden"}">${this.description ? y`${o$2(this.description)}` : ""}</slot>`;
+    )}<slot></slot></select><sonic-icon class="select-chevron" name="nav-arrow-down" .size="${this.size}"></sonic-icon></div><slot name="suffix" @slotchange="${this.hasSlotOrProps}"></slot></div><slot name="description" @slotchange="${this.hasSlotOrProps}" class="${this.hasDescription ? "form-description" : "hidden"}">${this.description ? y`${o$3(this.description)}` : ""}</slot>`;
   }
 };
 Select.styles = [
@@ -7422,16 +7817,16 @@ __decorateClass$y([
   e$7()
 ], Select.prototype, "label", 1);
 __decorateClass$y([
-  o$8({ slot: "label" })
+  o$9({ slot: "label" })
 ], Select.prototype, "slotLabelNodes", 2);
 __decorateClass$y([
-  o$8({ slot: "description" })
+  o$9({ slot: "description" })
 ], Select.prototype, "slotDescriptionNodes", 2);
 __decorateClass$y([
-  o$8({ slot: "suffix" })
+  o$9({ slot: "suffix" })
 ], Select.prototype, "slotSuffixNodes", 2);
 __decorateClass$y([
-  o$8({ slot: "prefix" })
+  o$9({ slot: "prefix" })
 ], Select.prototype, "slotPrefixNodes", 2);
 __decorateClass$y([
   t$3()
@@ -7493,8 +7888,8 @@ let Textarea = class extends Form(Form$2(Subscriber$1(s$3))) {
     textarea2.reportValidity();
   }
   render() {
-    return y`<label for="form-element" class="${this.hasLabel ? "form-label" : "hidden"}">${this.label ? o$2(this.label) : ""}<slot name="label" @slotchange="${this.hasSlotOrProps}"></slot></label><div class="form-control"><textarea id="form-element" @input="${this.handleChange}" @blur="${this.handleBlur}" disabled="${l$2(this.disabled)}" ?required="${this.required}" ?autofocus="${this.autofocus}" rows="${l$2(this.rows)}" cols="${l$2(this.cols)}" maxlength="${l$2(this.maxlength)}" minlength="${l$2(this.minlength)}" ?readonly="${this.readonly}" spellcheck="${l$2(this.spellcheck)}" autocomplete="${l$2(this.autocomplete)}" tabindex="${l$2(this.tabindex)}" wrap="${l$2(this.wrap)}" placeholder="${this.placeholder}" class="form-element textarea custom-scroll" aria-label="${l$2(this.ariaLabel)}" aria-labelledby="${l$2(this.ariaLabelledby)}">
-${this.value}</textarea></div><slot name="description" @slotchange="${this.hasSlotOrProps}" class="${this.hasDescription ? "form-description" : "hidden"}">${this.description ? y`${o$2(this.description)}` : ""}</slot>`;
+    return y`<label for="form-element" class="${this.hasLabel ? "form-label" : "hidden"}">${this.label ? o$3(this.label) : ""}<slot name="label" @slotchange="${this.hasSlotOrProps}"></slot></label><div class="form-control"><textarea id="form-element" @input="${this.handleChange}" @blur="${this.handleBlur}" disabled="${l$2(this.disabled)}" ?required="${this.required}" ?autofocus="${this.autofocus}" rows="${l$2(this.rows)}" cols="${l$2(this.cols)}" maxlength="${l$2(this.maxlength)}" minlength="${l$2(this.minlength)}" ?readonly="${this.readonly}" spellcheck="${l$2(this.spellcheck)}" autocomplete="${l$2(this.autocomplete)}" tabindex="${l$2(this.tabindex)}" wrap="${l$2(this.wrap)}" placeholder="${this.placeholder}" class="form-element textarea custom-scroll" aria-label="${l$2(this.ariaLabel)}" aria-labelledby="${l$2(this.ariaLabelledby)}">
+${this.value}</textarea></div><slot name="description" @slotchange="${this.hasSlotOrProps}" class="${this.hasDescription ? "form-description" : "hidden"}">${this.description ? y`${o$3(this.description)}` : ""}</slot>`;
   }
 };
 Textarea.styles = [
@@ -7530,10 +7925,10 @@ __decorateClass$x([
   e$7({ type: String })
 ], Textarea.prototype, "placeholder", 2);
 __decorateClass$x([
-  o$8({ slot: "label" })
+  o$9({ slot: "label" })
 ], Textarea.prototype, "slotLabelNodes", 2);
 __decorateClass$x([
-  o$8({ slot: "description" })
+  o$9({ slot: "description" })
 ], Textarea.prototype, "slotDescriptionNodes", 2);
 __decorateClass$x([
   t$3()
@@ -7602,7 +7997,7 @@ let Legend = class extends s$3 {
     this.requestUpdate();
   }
   render() {
-    return y`<legend part="legend">${this.iconName ? y`<div class="icon"><sonic-icon name="${this.iconName}" prefix="${l$2(this.iconPrefix)}" library="${l$2(this.iconLibrary)}"></sonic-icon></div>` : ""}<div class="legend-content">${o$2(this.label ? this.label : "")} ${this.description ? y`<sonic-legend-description>${o$2(this.description)}</sonic-legend-description>` : ""}<slot></slot></div><slot name="suffix"></slot></legend>`;
+    return y`<legend part="legend">${this.iconName ? y`<div class="icon"><sonic-icon name="${this.iconName}" prefix="${l$2(this.iconPrefix)}" library="${l$2(this.iconLibrary)}"></sonic-icon></div>` : ""}<div class="legend-content">${o$3(this.label ? this.label : "")} ${this.description ? y`<sonic-legend-description>${o$3(this.description)}</sonic-legend-description>` : ""}<slot></slot></div><slot name="suffix"></slot></legend>`;
   }
 };
 Legend.styles = [
@@ -7850,7 +8245,7 @@ let Group = class extends s$3 {
     const slotStyle = {
       alignItems: this.alignItems
     };
-    return y`<span class="${this.hasLabel ? "form-label" : "hidden"}">${this.label ? o$2(this.label) : ""}<slot name="label" @slotchange="${this.hasSlotOrProps}"></slot></span><slot class="main-slot" style="${i$1(slotStyle)}"></slot><slot name="description" @slotchange="${this.hasSlotOrProps}" class="${this.hasDescription ? "form-description" : "hidden"}">${this.description ? y`${o$2(this.description)}` : ""}</slot>`;
+    return y`<span class="${this.hasLabel ? "form-label" : "hidden"}">${this.label ? o$3(this.label) : ""}<slot name="label" @slotchange="${this.hasSlotOrProps}"></slot></span><slot class="main-slot" style="${i$1(slotStyle)}"></slot><slot name="description" @slotchange="${this.hasSlotOrProps}" class="${this.hasDescription ? "form-description" : "hidden"}">${this.description ? y`${o$3(this.description)}` : ""}</slot>`;
   }
 };
 Group.styles = [
@@ -7869,10 +8264,10 @@ __decorateClass$r([
   e$7({ type: String })
 ], Group.prototype, "description", 2);
 __decorateClass$r([
-  o$8({ slot: "label" })
+  o$9({ slot: "label" })
 ], Group.prototype, "slotLabelNodes", 2);
 __decorateClass$r([
-  o$8({ slot: "description" })
+  o$9({ slot: "description" })
 ], Group.prototype, "slotDescriptionNodes", 2);
 __decorateClass$r([
   t$3()
@@ -7946,6 +8341,42 @@ __decorateClass$q([
 Image = __decorateClass$q([
   e$8(tagName$q)
 ], Image);
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const d = e$2(class extends i$2 {
+  constructor(t2) {
+    super(t2), this.et = /* @__PURE__ */ new WeakMap();
+  }
+  render(t2) {
+    return [t2];
+  }
+  update(s2, [e2]) {
+    if (n$2(this.it) && (!n$2(e2) || this.it.strings !== e2.strings)) {
+      const e3 = m(s2).pop();
+      let o2 = this.et.get(this.it.strings);
+      if (void 0 === o2) {
+        const s3 = document.createDocumentFragment();
+        o2 = Z(b$1, s3), o2.setConnected(false), this.et.set(this.it.strings, o2);
+      }
+      s$2(o2, [e3]), r$2(o2, void 0, e3);
+    }
+    if (n$2(e2)) {
+      if (!n$2(this.it) || this.it.strings !== e2.strings) {
+        const t2 = this.et.get(e2.strings);
+        if (void 0 !== t2) {
+          const i2 = m(t2).pop();
+          a$1(s2), r$2(s2, void 0, i2), s$2(s2, [i2]);
+        }
+      }
+      this.it = e2;
+    } else
+      this.it = void 0;
+    return this.render(e2);
+  }
+});
 var __defProp$p = Object.defineProperty;
 var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
 var __decorateClass$p = (decorators, target, key, kind) => {
@@ -7966,6 +8397,7 @@ let Taxonomy = class extends s$3 {
     this.separator = ",&nbsp;";
     this.key = "";
     this.displayAll = false;
+    this.contrast = false;
     this.type = "default";
     this.variant = "default";
     this.size = "md";
@@ -7982,13 +8414,13 @@ let Taxonomy = class extends s$3 {
       return b$1;
     }
     this.style.removeProperty("display");
-    return y`<sonic-badge type="${this.type}" variant="${this.variant}" size="${this.size}"><sonic-icon slot="prefix" library="${l$2(this.icon.library)}" prefix="${l$2(this.icon.prefix)}" name="${l$2(this.icon.name)}"></sonic-icon><span class="taxonomy-list">${c$1(
+    return d(y`<sonic-badge type="${this.type}" variant="${this.variant}" size="${this.size}" ?contrast="${this.contrast}"><sonic-icon slot="prefix" library="${l$2(this.icon.library)}" prefix="${l$2(this.icon.prefix)}" name="${l$2(this.icon.name)}"></sonic-icon><span class="taxonomy-list">${c$1(
       taxo,
       (item) => item[this.key + "_id"],
       (item) => {
-        return y`<span>${item[this.key + "_name"] || item["name"]}</span><span class="sonic-taxonomy-separator">${o$2(this.separator)}</span>`;
+        return y`<span>${item[this.key + "_name"] || item["name"]}</span><span class="sonic-taxonomy-separator">${o$3(this.separator)}</span>`;
       }
-    )}</span></sonic-badge>`;
+    )}</span></sonic-badge>`);
   }
 };
 Taxonomy.styles = i$4`:host .sonic-taxonomy-separator:last-child{display:none}.taxonomy-list{display:flex;flex-wrap:wrap}`;
@@ -8007,6 +8439,9 @@ __decorateClass$p([
 __decorateClass$p([
   e$7({ type: Boolean })
 ], Taxonomy.prototype, "displayAll", 2);
+__decorateClass$p([
+  e$7({ type: Boolean })
+], Taxonomy.prototype, "contrast", 2);
 __decorateClass$p([
   e$7({ type: String, reflect: true })
 ], Taxonomy.prototype, "type", 2);
@@ -8276,7 +8711,7 @@ let ModalClose = class extends s$3 {
   }
 };
 ModalClose.styles = [
-  i$4`:host{position:sticky;display:block;align-self:flex-end;height:0;top:0;padding-top:.5rem;padding-right:.5rem;transform:translate3d(calc(var(--sc-modal-px)),calc(-1 * var(--sc-modal-py)),0);z-index:20}`
+  i$4`:host{position:sticky;display:block;align-self:flex-end;height:0;top:.5rem;right:.5rem;transform:translate3d(calc(var(--sc-modal-px)),calc(-1 * var(--sc-modal-py)),0);z-index:20}`
 ];
 __decorateClass$m([
   e$7()
@@ -8302,7 +8737,7 @@ let ModalContent = class extends s$3 {
   }
 };
 ModalContent.styles = [
-  i$4`:host{display:block}`
+  i$4`:host{display:block;width:100%}`
 ];
 ModalContent = __decorateClass$l([
   e$8(tagName$l)
@@ -8369,17 +8804,31 @@ let Modal = class extends Subscriber$1(s$3) {
   constructor() {
     super(...arguments);
     this.forceAction = false;
+    this.removeOnHide = false;
     this.align = "left";
     this.padding = "var(--sc-modal-py) var(--sc-modal-px)";
     this.maxWidth = "var(--sc-modal-max-w) ";
     this.maxHeight = "var(--sc-modal-max-h) ";
     this.width = "100%";
     this.height = "auto";
+    this.zIndex = "var(--sc-modal-z-index)";
     this.fullScreen = false;
     this.visible = false;
   }
   static create(options) {
     const modal = document.createElement(tagName$i);
+    if (options.removeOnHide === true)
+      modal.setAttribute("removeOnHide", "true");
+    if (options.maxWidth)
+      modal.maxWidth = options == null ? void 0 : options.maxWidth;
+    if (options.width)
+      modal.width = options == null ? void 0 : options.width;
+    if (options.paddingX)
+      modal.style.setProperty("--sc-modal-px", options == null ? void 0 : options.paddingX);
+    if (options.paddingY)
+      modal.style.setProperty("--sc-modal-py", options == null ? void 0 : options.paddingY);
+    if (options.zIndex)
+      modal.style.setProperty("--sc-modal-z-index", options == null ? void 0 : options.zIndex);
     modal.innerHTML = `<sonic-modal-close></sonic-modal-close><sonic-modal-content>${options.content}</sonic-modal-content>` || "";
     const container = document.querySelector("sonic-theme") || document.body;
     container.appendChild(modal);
@@ -8418,6 +8867,7 @@ let Modal = class extends Subscriber$1(s$3) {
       maxHeight: this.maxHeight,
       width: this.width,
       height: this.height,
+      zIndex: this.zIndex,
       borderRadius: this.fullScreen ? "0" : "var(--sc-modal-rounded)"
     };
     const modalWrapperStyles = {
@@ -8436,7 +8886,7 @@ let Modal = class extends Subscriber$1(s$3) {
       },
       in: [{ transform: "translateY(25%) scale(1)", boxShadow: "0 0 0 rgba(0,0,0,0)", opacity: 0 }],
       out: [{ transform: "translateY(20%) scale(1)", boxShadow: "0 0 0 rgba(0,0,0,0)", opacity: 0 }]
-    })}><div class="modal-content"><slot></slot></div></div></div><div class="overlay" @click="${!this.forceAction ? this.hide : ""}" ${$({
+    })}><div class="modal-content"><slot></slot></div></div></div><div class="overlay" @click="${!this.forceAction ? this.hide : null}" ${$({
       keyframeOptions: {
         duration: 500
       },
@@ -8459,6 +8909,9 @@ let Modal = class extends Subscriber$1(s$3) {
     if (this.hasAttribute("resetDataProviderOnHide")) {
       PublisherManager.get(this.getAttribute("resetDataProviderOnHide")).set({});
     }
+    if (this.removeOnHide) {
+      this.remove();
+    }
   }
   dispose() {
     this.hide();
@@ -8467,9 +8920,9 @@ let Modal = class extends Subscriber$1(s$3) {
   handleEscape(e2) {
     if (e2.key === "Escape") {
       const modals = [...document.querySelectorAll(tagName$i)];
-      modals.forEach((item) => {
-        if (!this.forceAction) {
-          item.hide();
+      modals.forEach((modal) => {
+        if (!modal.forceAction) {
+          modal.hide();
         }
       });
     }
@@ -8485,11 +8938,14 @@ let Modal = class extends Subscriber$1(s$3) {
 };
 Modal.styles = [
   customScroll,
-  i$4`:host{--sc-modal-py:2.5rem;--sc-modal-px:1.5rem;--sc-modal-max-w:min(100vw, 64ch);--sc-modal-max-h:80vh;--sc-modal-rounded:var(--sc-rounded-lg)}*{box-sizing:border-box}.modal-wrapper{position:fixed;bottom:0;left:0;width:100%;z-index:990;align-items:center;justify-content:center;flex-direction:column;display:flex;pointer-events:none}.modal-content{display:flex;flex-direction:column;min-height:10rem;line-height:1.25}.modal{background:var(--sc-base);color:var(--sc-base-content);width:100%;box-shadow:var(--sc-shadow-lg);border-radius:var(--sc-modal-rounded) var(--sc-modal-rounded) 0 0;pointer-events:auto;transform:translateZ(0)}.overlay{background:var(--sc-modal-overlay-bg,var(--sc-base-200));left:0;top:0;right:0;bottom:0;z-index:900;opacity:.8;position:fixed}::slotted(sonic-modal-title){margin-bottom:1.25rem}::slotted(sonic-modal-subtitle){margin-top:-.9rem;margin-bottom:1.25rem}@media (max-width:767.5px){.modal,.modal-wrapper{max-width:none!important;width:100%!important}}@media (min-width:768px){.modal-wrapper{top:50%;left:50%;bottom:auto;right:auto;transform:translateX(-50%) translateY(-50%)}.modal{top:50%;bottom:auto;right:auto;border-radius:var(--sc-modal-rounded)}}:host([align=left]) .modal-content{text-align:left;align-items:flex-start}:host([align=center]) .modal-content{text-align:center;align-items:center}:host([align=right]) .modal-content{text-align:right;align-items:flex-end}:host([rounded=none]) modal{--sc-img-radius:0!important}`
+  i$4`:host{--sc-modal-py:2.5rem;--sc-modal-px:1.5rem;--sc-modal-max-w:min(100vw, 64ch);--sc-modal-max-h:80vh;--sc-modal-rounded:var(--sc-rounded-lg);--sc-modal-z-index:990}*{box-sizing:border-box}.modal-wrapper{position:fixed;bottom:0;left:0;width:100%;z-index:calc(var(--sc-modal-z-index) + 1);align-items:center;justify-content:center;flex-direction:column;display:flex;pointer-events:none}.modal-content{display:flex;flex-direction:column;min-height:10rem;line-height:1.25}.modal{background:var(--sc-base);color:var(--sc-base-content);width:100%;box-shadow:var(--sc-shadow-lg);border-radius:var(--sc-modal-rounded) var(--sc-modal-rounded) 0 0;pointer-events:auto;transform:translateZ(0)}.overlay{background:var(--sc-modal-overlay-bg,var(--sc-base-200));left:0;top:0;right:0;bottom:0;z-index:var(--sc-modal-z-index);opacity:.8;position:fixed}::slotted(sonic-modal-title){margin-bottom:1.25rem}::slotted(sonic-modal-subtitle){margin-top:-.9rem;margin-bottom:1.25rem}@media (max-width:767.5px){.modal,.modal-wrapper{max-width:none!important;width:100%!important;border-radius:var(--sc-modal-rounded) var(--sc-modal-rounded) 0 0!important}}@media (min-width:768px){.modal-wrapper{top:50%;left:50%;bottom:auto;right:auto;transform:translateX(-50%) translateY(-50%)}.modal{top:50%;bottom:auto;right:auto;border-radius:var(--sc-modal-rounded)}}:host([align=left]) .modal-content{text-align:left;align-items:flex-start}:host([align=center]) .modal-content{text-align:center;align-items:center}:host([align=right]) .modal-content{text-align:right;align-items:flex-end}:host([rounded=none]) modal{--sc-img-radius:0!important}`
 ];
 __decorateClass$i([
   e$7({ type: Boolean })
 ], Modal.prototype, "forceAction", 2);
+__decorateClass$i([
+  e$7({ type: Boolean })
+], Modal.prototype, "removeOnHide", 2);
 __decorateClass$i([
   e$7({ type: String, reflect: true })
 ], Modal.prototype, "align", 2);
@@ -8508,6 +8964,9 @@ __decorateClass$i([
 __decorateClass$i([
   e$7({ type: String })
 ], Modal.prototype, "height", 2);
+__decorateClass$i([
+  e$7({ type: String })
+], Modal.prototype, "zIndex", 2);
 __decorateClass$i([
   e$7({ type: Boolean, reflect: true })
 ], Modal.prototype, "fullScreen", 2);
@@ -8552,27 +9011,38 @@ let Alert = class extends s$3 {
   constructor() {
     super(...arguments);
     this.label = "";
+    this.noIcon = false;
     this.text = "";
+    this.dismissible = false;
     this.background = false;
     this.status = "default";
   }
   render() {
-    return y`<div part="alert" class="alert"><div>${this.status && y`<sonic-icon name="${icon[this.status]}"></sonic-icon>`}</div><div>${this.label ? y`<span class="label">${o$2(this.label)}</span>` : b$1}<slot>${this.text}</slot></div></div>`;
+    return y`<div part="alert" class="alert">${!this.noIcon ? y`<div>${this.status && y`<sonic-icon name="${icon[this.status]}"></sonic-icon>`}</div>` : b$1}<div>${this.label ? y`<span class="label">${o$3(this.label)}</span>` : b$1}<slot>${this.text}</slot></div>${this.dismissible ? y`<sonic-button @click="${this.close}" class="close-btn" variant="unstyled" shape="circle"><sonic-icon name="cancel" size="lg"></sonic-icon></sonic-button>` : b$1}</div>`;
+  }
+  close() {
+    this.remove();
   }
 };
 Alert.styles = [
   fontSize,
-  i$4`:host{--sc-alert-color:var(--sc-base-content);--sc-alert-rounded:var(--sc-rounded);--sc-alert-fw:var(--sc-font-weight-base);--sc-alert-fst:var(--sc-font-style-base);--sc-alert-label-fw:bold;display:block;font-weight:var(--sc-alert-fw);font-style:var(--sc-alert-fst)}.alert{color:var(--sc-alert-color);position:relative;display:flex;gap:.4em;border-radius:var(--sc-alert-rounded)}.label{font-weight:var(--sc-alert-label-fw)}:host([status=warning]){--sc-alert-color:var(--sc-warning)}:host([status=error]){--sc-alert-color:var(--sc-danger)}:host([status=info]){--sc-alert-color:var(--sc-info)}:host([status=success]){--sc-alert-color:var(--sc-success)}:host([background]) .alert{background:var(--sc-base);padding:.8em 1.15em}:host([background]) .alert:before{background-color:currentColor;content:"";display:block;position:absolute;left:0;top:0;right:0;bottom:0;opacity:.08;border-radius:var(--sc-alert-rounded);pointer-events:none}:host([background])>div{z-index:2;position:relative}slot{display:block}:host([size=xs]) .alert{--sc-alert-rounded:var(--sc-rounded-sm)}:host([size=sm]) .alert{--sc-alert-rounded:var(--sc-rounded-sm)}`
+  i$4`:host{--sc-alert-color:var(--sc-base-content);--sc-alert-rounded:var(--sc-rounded);--sc-alert-fw:var(--sc-font-weight-base);--sc-alert-fst:var(--sc-font-style-base);--sc-alert-label-fw:bold;display:block;font-weight:var(--sc-alert-fw);font-style:var(--sc-alert-fst)}.alert{color:var(--sc-alert-color);position:relative;display:flex;gap:.4em;border-radius:var(--sc-alert-rounded)}.label{font-weight:var(--sc-alert-label-fw)}:host([status=warning]){--sc-alert-color:var(--sc-warning)}:host([status=error]){--sc-alert-color:var(--sc-danger)}:host([status=info]){--sc-alert-color:var(--sc-info)}:host([status=success]){--sc-alert-color:var(--sc-success)}:host([background]) .alert,:host([dismissible]) .alert{background:var(--sc-base);padding:.8em 1.15em}:host([background]) .alert:before,:host([dismissible]) .alert:before{background-color:currentColor;content:"";display:block;position:absolute;left:0;top:0;right:0;bottom:0;opacity:.08;border-radius:var(--sc-alert-rounded);pointer-events:none}:host([background])>div,:host([dismissible])>div{z-index:2;position:relative}slot{display:block}:host([size=xs]) .alert{--sc-alert-rounded:var(--sc-rounded-sm)}:host([size=sm]) .alert{--sc-alert-rounded:var(--sc-rounded-sm)}:host([dismissible]) .alert{padding-right:3rem}:host([dismissible]) .close-btn{padding:.5em;position:absolute;top:.25rem;right:.25rem}`
 ];
 __decorateClass$h([
   e$7({ type: String })
 ], Alert.prototype, "label", 2);
+__decorateClass$h([
+  e$7({ type: Boolean, reflect: true })
+], Alert.prototype, "noIcon", 2);
 __decorateClass$h([
   e$7({ type: String })
 ], Alert.prototype, "text", 2);
 __decorateClass$h([
   e$7({ type: String, reflect: true })
 ], Alert.prototype, "size", 2);
+__decorateClass$h([
+  e$7({ type: Boolean, reflect: true })
+], Alert.prototype, "dismissible", 2);
 __decorateClass$h([
   e$7({ type: Boolean, reflect: true })
 ], Alert.prototype, "background", 2);
@@ -8733,14 +9203,14 @@ let Divider = class extends s$3 {
     }
   }
   render() {
-    return y`<div part="divider"><span class="text">${o$2(this.label ? this.label : "")}<slot></slot></span></div>`;
+    return y`<div part="divider"><span class="text">${o$3(this.label ? this.label : "")}<slot></slot></span></div>`;
   }
 };
 Divider.styles = [
   i$4`:host{--sc-divider-my:0.5rem;--sc-divider-mx:0;--sc-divider-border-width:max(1px, var(--sc-border-width));--sc-divider-border-color:var(--sc-border-color);--sc-divider-border-style:solid;--sc-divider-color:currentColor;--sc-divider-ff:var(--sc-font-family-base);--sc-divider-fs:1rem;--sc-divider-fw:var(--sc-font-weight-base);--sc-divider-fst:var(--sc-font-style-base);margin:var(--sc-divider-my) var(--sc-divider-mx);font-size:var(--sc-divider-fs);font-style:var(--sc-divider-fst);font-family:var(--sc-divider-ff);font-weight:var(--sc-divider-fw);color:var(--sc-divider-color);display:block}:host([size="2xs"]){--sc-divider-my:0.35rem;--sc-divider-fs:0.68rem}:host([size=xs]){--sc-divider-my:0.5rem;--sc-divider-fs:0.75rem}:host([size=sm]){--sc-divider-my:0.75rem;--sc-divider-fs:0.875rem}:host([size=md]){--sc-divider-my:1.25rem}:host([size=lg]){--sc-divider-my:1.85rem}:host([size=xl]){--sc-divider-my:2.25rem}:host([size="2xl"]){--sc-divider-my:3.35rem}div{display:flex;align-items:center;width:100%}div::after,div::before{content:"";flex-grow:1;border-top:var(--sc-divider-border-width) var(--sc-divider-border-style) var(--sc-divider-border-color);width:100%;opacity:var(--sc-divider-opacity,1)}:host([align=left]) div:before{display:none}:host([align=right]) div:after{display:none}:host([vertical]){margin:var(--sc-divider-mx) var(--sc-divider-my)}:host([vertical]) div{flex-direction:column;height:100%;min-height:var(--sc-form-height)}:host([vertical]) .has-text{gap:.25rem}:host([vertical]) div::after,:host([vertical]) div::before{border-top:none;border-left:var(--sc-divider-border-width) var(--sc-divider-border-style) var(--sc-divider-border-color);width:auto;height:100%;opacity:var(--sc-divider-opacity,1)}:host([noMargin]){margin:0}.text{flex-shrink:0;line-height:1.1;max-width:80%}.no-text .text{display:none}.has-text{gap:.5rem}`
 ];
 __decorateClass$e([
-  o$8()
+  o$9()
 ], Divider.prototype, "slotNodes", 2);
 __decorateClass$e([
   i$5("div")
@@ -8800,7 +9270,7 @@ var __decorateClass$c = (decorators, target, key, kind) => {
 const tagName$c = "sonic-card-header";
 let CardHeader = class extends s$3 {
   render() {
-    return y`<div class="header"><div class="header-content">${o$2(this.label)} ${this.description ? y`<sonic-card-header-description>${o$2(this.description)}</sonic-card-header-description>` : ""}<slot></slot></div><slot name="suffix"></slot></div>`;
+    return y`<div class="header"><div class="header-content">${o$3(this.label)} ${this.description ? y`<sonic-card-header-description>${o$3(this.description)}</sonic-card-header-description>` : ""}<slot></slot></div><slot name="suffix"></slot></div>`;
   }
 };
 CardHeader.styles = [