@supersoniks/concorde 1.1.45 → 1.1.47

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,21 @@ 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 +391,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 +400,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 +554,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 +656,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 +745,7 @@ class Publisher extends PublisherProxy$1 {
           "offInternalMutation",
           "set",
           "get",
+          "$tag",
           "_templateFillListeners_",
           "_fillListeners_",
           "_assignListeners_",
@@ -613,7 +761,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 +780,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 +835,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 +1084,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 +1103,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;
@@ -949,7 +1127,7 @@ 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);
 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,23 +1138,23 @@ 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 : [];
   }, enumerable: true, configurable: true }) });
 }
-var __defProp$18 = Object.defineProperty;
-var __getOwnPropDesc$18 = Object.getOwnPropertyDescriptor;
-var __decorateClass$18 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$18(target, key) : target;
+var __defProp$17 = Object.defineProperty;
+var __getOwnPropDesc$17 = Object.getOwnPropertyDescriptor;
+var __decorateClass$17 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$17(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$18(target, key, result);
+    __defProp$17(target, key, result);
   return result;
 };
 let keepDebugOnMouseOut = false;
@@ -1035,18 +1213,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 +1236,9 @@ const Subscriber$1 = (superClass, type) => {
       } else {
         this.initWording();
         this.initPublisher();
+        this.addDebugger();
       }
-      this.addDebugger();
       super.connectedCallback();
-      _SubscriberElement.instanceCounter++;
     }
     disconnectedCallback() {
       var _a2;
@@ -1147,7 +1328,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 +1342,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 +1395,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");
@@ -1237,43 +1420,43 @@ const Subscriber$1 = (superClass, type) => {
   };
   let SubscriberElement = _SubscriberElement;
   SubscriberElement.instanceCounter = 0;
-  __decorateClass$18([
+  __decorateClass$17([
     e$7({ type: Boolean })
   ], SubscriberElement.prototype, "displayContents", 2);
-  __decorateClass$18([
+  __decorateClass$17([
     e$7({ type: Boolean })
   ], SubscriberElement.prototype, "noAutoFill", 2);
-  __decorateClass$18([
+  __decorateClass$17([
     e$7({ type: Boolean })
   ], SubscriberElement.prototype, "forceAutoFill", 2);
-  __decorateClass$18([
+  __decorateClass$17([
     e$7({ type: Object })
   ], SubscriberElement.prototype, "propertyMap", 2);
-  __decorateClass$18([
+  __decorateClass$17([
     e$7({ type: String, attribute: "data-title" })
   ], SubscriberElement.prototype, "title", 2);
-  __decorateClass$18([
+  __decorateClass$17([
     e$7({ reflect: true })
   ], SubscriberElement.prototype, "dataProvider", 2);
-  __decorateClass$18([
+  __decorateClass$17([
     e$7()
   ], SubscriberElement.prototype, "bindPublisher", 2);
-  __decorateClass$18([
+  __decorateClass$17([
     e$7()
   ], SubscriberElement.prototype, "props", 1);
   return SubscriberElement;
 };
 if (!window.SonicPublisherManager)
   window.SonicPublisherManager = PublisherManager$1;
-var __defProp$17 = Object.defineProperty;
-var __getOwnPropDesc$17 = Object.getOwnPropertyDescriptor;
-var __decorateClass$17 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$17(target, key) : target;
+var __defProp$16 = Object.defineProperty;
+var __getOwnPropDesc$16 = Object.getOwnPropertyDescriptor;
+var __decorateClass$16 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$16(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$17(target, key, result);
+    __defProp$16(target, key, result);
   return result;
 };
 const TemplatesContainer$1 = (superClass) => {
@@ -1300,7 +1483,7 @@ const TemplatesContainer$1 = (superClass) => {
       super.connectedCallback();
     }
   }
-  __decorateClass$17([
+  __decorateClass$16([
     e$7({ type: Array })
   ], TemplatesContainerElement.prototype, "templates", 2);
   return TemplatesContainerElement;
@@ -1311,7 +1494,7 @@ const TemplatesContainer$1 = (superClass) => {
  * 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 {
+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.");
@@ -1330,7 +1513,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 +1521,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 +1539,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$4 = { toAttribute(t2, i2) {
   switch (i2) {
     case Boolean:
       t2 = t2 ? h$3 : null;
@@ -1564,14 +1747,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$1.finalized = true, d$1.elementProperties = /* @__PURE__ */ new Map(), d$1.elementStyles = [], d$1.shadowRootOptions = { mode: "open" }, null == o$7 || o$7({ ReactiveElement: d$1 }), (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$3 = "?" + o$6, 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(`>|[ 	
 \f\r](?:([^\\s"'>=/]+)([ 	
 \f\r]*=[ 	
 \f\r]*(?:[^ 	
@@ -1584,7 +1767,7 @@ const i$3 = window, s$4 = i$3.trustedTypes, e$3 = s$4 ? s$4.createPolicy("lit-ht
     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);
     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 +1789,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 +1801,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++)
@@ -1631,8 +1814,8 @@ class C {
           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++;
     }
@@ -1817,7 +2000,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$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;
 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,7 +2017,7 @@ const Z = (t2, i2, s2) => {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-var l$3, o$4;
+var l$3, o$5;
 class s$3 extends d$1 {
   constructor() {
     super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
@@ -1863,19 +2046,19 @@ 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");
-var __defProp$16 = Object.defineProperty;
-var __getOwnPropDesc$16 = Object.getOwnPropertyDescriptor;
-var __decorateClass$16 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$16(target, key) : target;
+(null !== (o$5 = globalThis.litElementVersions) && void 0 !== o$5 ? o$5 : globalThis.litElementVersions = []).push("3.2.2");
+var __defProp$15 = Object.defineProperty;
+var __getOwnPropDesc$15 = Object.getOwnPropertyDescriptor;
+var __decorateClass$15 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$15(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$16(target, key, result);
+    __defProp$15(target, key, result);
   return result;
 };
-const tagName$$ = "sonic-date";
+const tagName$_ = "sonic-date";
 let SonicDate = class extends Subscriber$1(TemplatesContainer$1(s$3)) {
   constructor() {
     super(...arguments);
@@ -1935,9 +2118,6 @@ let SonicDate = class extends Subscriber$1(TemplatesContainer$1(s$3)) {
         options
       );
       parts = format.formatRangeToParts(start, end);
-      if (this.designMode) {
-        parts.forEach((part) => part.hidden = part.value.trim() == ",");
-      }
       if (!isSameDay) {
         const to = parts.find(
           (part) => part.type == "literal" && part.source == "shared" && part.value.trim().length > 0
@@ -1947,12 +2127,22 @@ let SonicDate = class extends Subscriber$1(TemplatesContainer$1(s$3)) {
           to.type = "to";
         }
         if (!this.designMode)
-          parts.unshift({ type: "from", value: this.duAu[0] + " ", source: "shared" });
+          parts.unshift({
+            type: "from",
+            value: this.duAu[0] + " ",
+            source: "shared"
+          });
       }
     } else {
-      const format = new Intl.DateTimeFormat(this.language || this.pageLanguage, options);
+      const format = new Intl.DateTimeFormat(
+        this.language || this.pageLanguage,
+        options
+      );
       parts = format.formatToParts(start);
     }
+    if (this.designMode) {
+      parts.forEach((part) => part.hidden = part.value.trim() == ",");
+    }
     parts[0].value = Format$1.ucFirst(parts[0].value);
     return parts.filter((p2) => p2.hidden !== true);
   }
@@ -2008,65 +2198,65 @@ let SonicDate = class extends Subscriber$1(TemplatesContainer$1(s$3)) {
     })}`;
   }
 };
-__decorateClass$16([
+__decorateClass$15([
   e$7()
 ], SonicDate.prototype, "wording_billet_periode_validite", 1);
-__decorateClass$16([
+__decorateClass$15([
   e$7({ type: Boolean })
 ], SonicDate.prototype, "designMode", 2);
-__decorateClass$16([
+__decorateClass$15([
   e$7({ type: String })
 ], SonicDate.prototype, "time_zone", 2);
-__decorateClass$16([
+__decorateClass$15([
   e$7({ type: Number })
 ], SonicDate.prototype, "date", 2);
-__decorateClass$16([
+__decorateClass$15([
   e$7({ type: String })
 ], SonicDate.prototype, "date_string", 2);
-__decorateClass$16([
+__decorateClass$15([
   e$7({ type: String })
 ], SonicDate.prototype, "start_date_string", 2);
-__decorateClass$16([
+__decorateClass$15([
   e$7({ type: String })
 ], SonicDate.prototype, "end_date_string", 2);
-__decorateClass$16([
+__decorateClass$15([
   e$7({ type: Number })
 ], SonicDate.prototype, "start_date", 2);
-__decorateClass$16([
+__decorateClass$15([
   e$7({ type: Number })
 ], SonicDate.prototype, "end_date", 2);
-__decorateClass$16([
+__decorateClass$15([
   e$7({ type: String })
 ], SonicDate.prototype, "era", 2);
-__decorateClass$16([
+__decorateClass$15([
   e$7({ type: String })
 ], SonicDate.prototype, "year", 2);
-__decorateClass$16([
+__decorateClass$15([
   e$7({ type: String })
 ], SonicDate.prototype, "month", 2);
-__decorateClass$16([
+__decorateClass$15([
   e$7({ type: String })
 ], SonicDate.prototype, "day", 2);
-__decorateClass$16([
+__decorateClass$15([
   e$7({ type: String })
 ], SonicDate.prototype, "weekday", 2);
-__decorateClass$16([
+__decorateClass$15([
   e$7({ type: String })
 ], SonicDate.prototype, "hour", 2);
-__decorateClass$16([
+__decorateClass$15([
   e$7({ type: String })
 ], SonicDate.prototype, "minute", 2);
-__decorateClass$16([
+__decorateClass$15([
   e$7({ type: String })
 ], SonicDate.prototype, "language", 2);
-__decorateClass$16([
+__decorateClass$15([
   e$7({ type: Boolean })
 ], SonicDate.prototype, "renderIf", 2);
-__decorateClass$16([
+__decorateClass$15([
   e$7({ type: Boolean })
 ], SonicDate.prototype, "now", 2);
-SonicDate = __decorateClass$16([
-  e$8(tagName$$)
+SonicDate = __decorateClass$15([
+  e$8(tagName$_)
 ], SonicDate);
 const _LocationHandler = class {
   static listen() {
@@ -2074,7 +2264,10 @@ const _LocationHandler = class {
     if (!_LocationHandler.listening) {
       return;
     }
-    const newURL = (_a2 = document.location) == null ? void 0 : _a2.href.replace(document.location.origin, "");
+    const newURL = (_a2 = document.location) == null ? void 0 : _a2.href.replace(
+      document.location.origin,
+      ""
+    );
     if (_LocationHandler.prevURL && _LocationHandler.prevURL != newURL) {
       _LocationHandler.prevURL = newURL;
       _LocationHandler.listeners.forEach((listener) => {
@@ -2151,8 +2344,9 @@ const _LocationHandler = class {
       document.location.href = to;
   }
   static updateComponentActiveState(component) {
-    if (component.autoActive == "disabled")
+    if (component.autoActive == "disabled") {
       return;
+    }
     if (component.href && component.href.indexOf("http") != 0) {
       const url1 = new URL(component.href, document.location.href);
       const url2 = new URL(component.location || "", document.location.origin);
@@ -2171,7 +2365,10 @@ const _LocationHandler = class {
 let LocationHandler$1 = _LocationHandler;
 LocationHandler$1.listeners = [];
 LocationHandler$1.listening = false;
-LocationHandler$1.prevURL = (_a = document.location) == null ? void 0 : _a.href.replace(document.location.origin, "");
+LocationHandler$1.prevURL = (_a = document.location) == null ? void 0 : _a.href.replace(
+  document.location.origin,
+  ""
+);
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -2229,15 +2426,15 @@ const i$1 = e$2(class extends i$2 {
     return x$1;
   }
 });
-var __defProp$15 = Object.defineProperty;
-var __getOwnPropDesc$15 = Object.getOwnPropertyDescriptor;
-var __decorateClass$15 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$15(target, key) : target;
+var __defProp$14 = Object.defineProperty;
+var __getOwnPropDesc$14 = Object.getOwnPropertyDescriptor;
+var __decorateClass$14 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$14(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$15(target, key, result);
+    __defProp$14(target, key, result);
   return result;
 };
 const keyboardLoops = /* @__PURE__ */ new Map();
@@ -2423,34 +2620,34 @@ const Form$2 = (superClass) => {
       }
     }
   }
-  __decorateClass$15([
+  __decorateClass$14([
     e$7({ type: Boolean, reflect: true })
   ], FormElement2.prototype, "touched", 2);
-  __decorateClass$15([
+  __decorateClass$14([
     e$7({ type: Boolean })
   ], FormElement2.prototype, "error", 2);
-  __decorateClass$15([
+  __decorateClass$14([
     e$7({ type: Boolean })
   ], FormElement2.prototype, "autofocus", 2);
-  __decorateClass$15([
+  __decorateClass$14([
     e$7({ type: Boolean })
   ], FormElement2.prototype, "required", 2);
-  __decorateClass$15([
+  __decorateClass$14([
     e$7()
   ], FormElement2.prototype, "forceAutoFill", 2);
-  __decorateClass$15([
+  __decorateClass$14([
     e$7({ type: Boolean })
   ], FormElement2.prototype, "disabled", 2);
-  __decorateClass$15([
+  __decorateClass$14([
     e$7({ type: String, attribute: "data-aria-label" })
   ], FormElement2.prototype, "ariaLabel", 2);
-  __decorateClass$15([
+  __decorateClass$14([
     e$7({ type: String, attribute: "data-aria-labelledby" })
   ], FormElement2.prototype, "ariaLabelledby", 2);
-  __decorateClass$15([
+  __decorateClass$14([
     e$7()
   ], FormElement2.prototype, "name", 1);
-  __decorateClass$15([
+  __decorateClass$14([
     e$7()
   ], FormElement2.prototype, "value", 1);
   return FormElement2;
@@ -2498,7 +2695,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 +2759,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 +2773,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)
+                        )
+                      )
                     );
                   }
                 };
@@ -2607,15 +2812,15 @@ window["concorde-utils"] = {
   PublisherManager,
   api
 };
-var __defProp$14 = Object.defineProperty;
-var __getOwnPropDesc$14 = Object.getOwnPropertyDescriptor;
-var __decorateClass$14 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$14(target, key) : target;
+var __defProp$13 = Object.defineProperty;
+var __getOwnPropDesc$13 = Object.getOwnPropertyDescriptor;
+var __decorateClass$13 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$13(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$14(target, key, result);
+    __defProp$13(target, key, result);
   return result;
 };
 const Form$1 = (superClass) => {
@@ -2856,22 +3061,22 @@ const Form$1 = (superClass) => {
       }
     }
   }
-  __decorateClass$14([
+  __decorateClass$13([
     e$7()
   ], FormCheckable2.prototype, "value", 1);
-  __decorateClass$14([
+  __decorateClass$13([
     e$7()
   ], FormCheckable2.prototype, "forceAutoFill", 2);
-  __decorateClass$14([
+  __decorateClass$13([
     e$7({ type: Boolean })
   ], FormCheckable2.prototype, "unique", 2);
-  __decorateClass$14([
+  __decorateClass$13([
     e$7({ type: Boolean })
   ], FormCheckable2.prototype, "radio", 2);
-  __decorateClass$14([
+  __decorateClass$13([
     e$7({ type: Boolean })
   ], FormCheckable2.prototype, "unCheckOnDisconnect", 2);
-  __decorateClass$14([
+  __decorateClass$13([
     e$7()
   ], FormCheckable2.prototype, "checked", 1);
   return FormCheckable2;
@@ -2883,18 +3088,18 @@ const Form$1 = (superClass) => {
  */
 const l$2 = (l2) => null != l2 ? l2 : b$1;
 const fontSize = i$4`:host{--sc-fs:1rem;--sc-lh:1.2;font-size:var(--sc-fs);line-height:var(--sc-lh)}:host([size="2xs"]){--sc-fs:0.625rem}:host([size=xs]){--sc-fs:0.75rem}:host([size=sm]){--sc-fs:0.875rem}:host([size=lg]){--sc-fs:1.125rem}:host([size=xl]){--sc-fs:1.25rem}:host([size="2xl"]){--sc-fs:1.5rem}`;
-var __defProp$13 = Object.defineProperty;
-var __getOwnPropDesc$13 = Object.getOwnPropertyDescriptor;
-var __decorateClass$13 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$13(target, key) : target;
+var __defProp$12 = Object.defineProperty;
+var __getOwnPropDesc$12 = Object.getOwnPropertyDescriptor;
+var __decorateClass$12 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$12(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$13(target, key, result);
+    __defProp$12(target, key, result);
   return result;
 };
-const tagName$_ = "sonic-button";
+const tagName$Z = "sonic-button";
 let Button = class extends Form$1(Form$2(Subscriber$1(s$3))) {
   constructor() {
     super(...arguments);
@@ -2920,7 +3125,6 @@ let Button = class extends Form$1(Form$2(Subscriber$1(s$3))) {
     this._href = value;
     if (this.href && this.href.indexOf("http") != 0) {
       LocationHandler$1.onChange(this);
-      this.location = document.location.href.replace(document.location.origin, "");
     } else
       LocationHandler$1.offChange(this);
     this.requestUpdate();
@@ -2969,7 +3173,12 @@ let Button = class extends Form$1(Form$2(Subscriber$1(s$3))) {
   }
   set location(value) {
     this._location = value;
-    LocationHandler$1.updateComponentActiveState(this);
+    this.requestUpdate();
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("location") || changedProperties.has("href") || changedProperties.has("autoActive")) {
+      LocationHandler$1.updateComponentActiveState(this);
+    }
   }
   render() {
     const btnStyles = {
@@ -2990,88 +3199,91 @@ let Button = class extends Form$1(Form$2(Subscriber$1(s$3))) {
 };
 Button.styles = [
   fontSize,
-  i$4`*{box-sizing:border-box}:host{--sc-btn-gap:0.35em;--sc-btn-py:0.25em;--sc-btn-px:1.1em;--sc-btn-fs:var(--sc-fs, 1rem);--sc-btn-fw:var(--sc-btn-font-weight);--sc-btn-ff:var(--sc-btn-font-family);--sc-btn-height:var(--sc-form-height);--btn-color:var(--sc-btn-color, var(--sc-base-content));--btn-bg:var(--sc-btn-bg, var(--sc-base-100));--sc-btn-border-style:solid;--sc-btn-border-width:var(--sc-form-border-width);--sc-btn-border-color:transparent;--btn-outline-bg-hover:var(--sc-btn-outline-bg-hover, var(--sc-base-100));--sc-btn-ghost-bg-hover:var(--sc-base-100);--sc-btn-active-color:var(--sc-base);--sc-btn-hover-filter:brightness(0.98);--sc-btn-active-filter:brightness(0.97);--sc-btn-active-bg:var(--sc-base-content);--sc-item-rounded-tr:var(--sc-btn-rounded);--sc-item-rounded-tl:var(--sc-btn-rounded);--sc-item-rounded-bl:var(--sc-btn-rounded);--sc-item-rounded-br:var(--sc-btn-rounded);display:inline-flex;vertical-align:middle;box-sizing:border-box;-webkit-print-color-adjust:exact}:host a{display:contents;color:unset}:host button{display:flex;flex:1;box-sizing:border-box;align-items:center;justify-content:center;font-family:var(--sc-btn-ff);font-weight:var(--sc-btn-fw);font-size:var(--sc-btn-fs);cursor:pointer;text-align:center;line-height:1.1;border-radius:var(--sc-item-rounded-tl) var(--sc-item-rounded-tr) var(--sc-item-rounded-br) var(--sc-item-rounded-bl);background:var(--btn-bg);color:var(--btn-color);padding-top:var(--sc-btn-py);padding-bottom:var(--sc-btn-py);padding-left:var(--sc-btn-px);padding-right:var(--sc-btn-px);border:var(--sc-btn-border-width) var(--sc-btn-border-style) var(--sc-btn-border-color);min-height:var(--sc-btn-height)}:host button.has-prefix-or-suffix{gap:var(--sc-btn-gap)}:host button:focus,:host button:hover{filter:var(--sc-btn-hover-filter)}:host button:active{filter:var(--sc-btn-active-filter)}:host([type=default]) button{--btn-color:var(--sc-base-content);--btn-bg:var(--sc-base-100)}:host([type=primary]) button{--btn-color:var(--sc-primary-content);--btn-bg:var(--sc-primary)}:host([type=warning]) button{--btn-color:var(--sc-warning-content);--btn-bg:var(--sc-warning)}:host([type=danger]) button{--btn-color:var(--sc-danger-content);--btn-bg:var(--sc-danger)}:host([type=info]) button{--btn-color:var(--sc-info-content);--btn-bg:var(--sc-info)}:host([type=success]) button{--btn-color:var(--sc-success-content);--btn-bg:var(--sc-success)}:host([type=neutral]) button{--btn-color:var(--sc-base);--btn-bg:var(--sc-base-600)}:host([type=custom]) button{--btn-color:var(--sc-btn-custom-color);--btn-bg:var(--sc-btn-custom-bg)}:host([variant=unstyled]){display:inline-block}:host([variant=unstyled]) button{all:unset;display:contents;cursor:pointer;--sc-btn-height:auto;--sc-btn-width:auto}:host(:not([disabled])) button:focus{box-shadow:0 0 0 .18rem var(--sc-base-300);border-color:var(--sc-base-300)!important;outline:0}:host([variant=ghost][type]) button{color:var(--btn-bg);background:0 0}:host([variant=ghost][type=default]) button{color:var(--btn-color);background:0 0}:host([variant=ghost]) button:hover{background:var(--sc-btn-ghost-bg-hover);filter:none}:host([active][variant=ghost]) button{background:var(--sc-btn-ghost-bg-hover);filter:none}:host([active][variant=ghost]) button:hover{filter:var(--sc-btn-hover-filter)}:host([variant=outline][type]) button{border-color:var(--btn-bg);color:var(--btn-bg);background:0 0}:host([variant=outline][type=default]) button{border-color:var(--sc-base-400);color:var(--sc-base-500);background:0 0}:host([variant=outline]) button:hover{background:var(--btn-outline-bg-hover)}:host([variant=link]:not([size])){vertical-align:baseline;margin-left:.25em;margin-right:.25em}:host([variant=link]:not([size])){font-size:inherit}:host([variant=link]) button{text-decoration:underline;padding:0;background:0 0;border:none;font-size:inherit;min-height:0;color:inherit}:host([variant=link][type]) button{color:var(--btn-bg)}:host([variant=link][type=default]) button{color:inherit}:host([variant=link]) button:focus,:host([variant=link]) button:hover{text-decoration:none}:host([shape=circle]) button{border-radius:50%}:host([shape=circle]) button,:host([shape=square]) button{width:var(--sc-btn-height);height:var(--sc-btn-height);padding:0;align-items:center;justify-content:0;text-align:center!important}:host([shape=block]),:host([shape=block]) button{width:100%}:host([disabled]){opacity:.3;pointer-events:none;user-select:none}:host([active]:not([variant=ghost]):not([variant=unstyled])) button{background:var(--sc-btn-active-bg);color:var(--sc-btn-active-color);border-color:var(--sc-btn-active-bg)}:host([align=left]) button{text-align:left}:host([align=right]) button{text-align:right}.main-slot{flex-grow:1;display:block}:host([minWidth]) .main-slot{flex-grow:0}slot[name=prefix],slot[name=suffix]{flex-shrink:0}::slotted(sonic-icon){min-width:1em;text-align:center}:host([icon]) ::slotted(sonic-icon){font-size:1.2em}sonic-tooltip{display:contents}:host(:not([active])) ::slotted([swap=on]){display:none!important}:host([active]) ::slotted([swap=off]){display:none!important}:host([loading]){pointer-events:none;position:relative}:host([loading]) slot{opacity:0!important;pointer-events:none}:host([loading]) .loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;line-height:0;height:var(--sc-btn-ff);width:var(--sc-btn-ff);animation:rotation 2s infinite linear}@keyframes rotation{from{transform-origin:50% 50%;transform:translate(-50%,-50%) rotate(0)}to{transform-origin:50% 50%;transform:translate(-50%,-50%) rotate(359deg)}}`
+  i$4`*{box-sizing:border-box}:host{--sc-btn-gap:0.35em;--sc-btn-py:0.25em;--sc-btn-px:1.1em;--sc-btn-fs:var(--sc-fs, 1rem);--sc-btn-fw:var(--sc-btn-font-weight);--sc-btn-ff:var(--sc-btn-font-family);--sc-btn-height:var(--sc-form-height);--btn-color:var(--sc-btn-color, var(--sc-base-content));--btn-bg:var(--sc-btn-bg, var(--sc-base-100));--sc-btn-border-style:solid;--sc-btn-border-width:var(--sc-form-border-width);--sc-btn-border-color:transparent;--btn-outline-bg-hover:var(
+          --sc-btn-outline-bg-hover,
+          var(--sc-base-100)
+        );--sc-btn-ghost-bg-hover:var(--sc-base-100);--sc-btn-active-color:var(--sc-base);--sc-btn-hover-filter:brightness(0.98);--sc-btn-active-filter:brightness(0.97);--sc-btn-active-bg:var(--sc-base-content);--sc-item-rounded-tr:var(--sc-btn-rounded);--sc-item-rounded-tl:var(--sc-btn-rounded);--sc-item-rounded-bl:var(--sc-btn-rounded);--sc-item-rounded-br:var(--sc-btn-rounded);display:inline-flex;vertical-align:middle;box-sizing:border-box;-webkit-print-color-adjust:exact}:host a{display:contents;color:unset}:host button{display:flex;flex:1;box-sizing:border-box;align-items:center;justify-content:center;font-family:var(--sc-btn-ff);font-weight:var(--sc-btn-fw);font-size:var(--sc-btn-fs);cursor:pointer;text-align:center;line-height:1.1;border-radius:var(--sc-item-rounded-tl) var(--sc-item-rounded-tr) var(--sc-item-rounded-br) var(--sc-item-rounded-bl);background:var(--btn-bg);color:var(--btn-color);padding-top:var(--sc-btn-py);padding-bottom:var(--sc-btn-py);padding-left:var(--sc-btn-px);padding-right:var(--sc-btn-px);border:var(--sc-btn-border-width) var(--sc-btn-border-style) var(--sc-btn-border-color);min-height:var(--sc-btn-height)}:host button.has-prefix-or-suffix{gap:var(--sc-btn-gap)}:host button:focus,:host button:hover{filter:var(--sc-btn-hover-filter)}:host button:active{filter:var(--sc-btn-active-filter)}:host([type=default]) button{--btn-color:var(--sc-base-content);--btn-bg:var(--sc-base-100)}:host([type=primary]) button{--btn-color:var(--sc-primary-content);--btn-bg:var(--sc-primary)}:host([type=warning]) button{--btn-color:var(--sc-warning-content);--btn-bg:var(--sc-warning)}:host([type=danger]) button{--btn-color:var(--sc-danger-content);--btn-bg:var(--sc-danger)}:host([type=info]) button{--btn-color:var(--sc-info-content);--btn-bg:var(--sc-info)}:host([type=success]) button{--btn-color:var(--sc-success-content);--btn-bg:var(--sc-success)}:host([type=neutral]) button{--btn-color:var(--sc-base);--btn-bg:var(--sc-base-600)}:host([type=custom]) button{--btn-color:var(--sc-btn-custom-color);--btn-bg:var(--sc-btn-custom-bg)}:host([variant=unstyled]){display:inline-block}:host([variant=unstyled]) button{all:unset;display:contents;cursor:pointer;--sc-btn-height:auto;--sc-btn-width:auto}:host(:not([disabled])) button:focus{box-shadow:0 0 0 .18rem var(--sc-base-300);border-color:var(--sc-base-300)!important;outline:0}:host([variant=ghost][type]) button{color:var(--btn-bg);background:0 0}:host([variant=ghost][type=default]) button{color:var(--btn-color);background:0 0}:host([variant=ghost]) button:hover{background:var(--sc-btn-ghost-bg-hover);filter:none}:host([active][variant=ghost]) button{background:var(--sc-btn-ghost-bg-hover);filter:none}:host([active][variant=ghost]) button:hover{filter:var(--sc-btn-hover-filter)}:host([variant=outline][type]) button{border-color:var(--btn-bg);color:var(--btn-bg);background:0 0}:host([variant=outline][type=default]) button{border-color:var(--sc-base-400);color:var(--sc-base-500);background:0 0}:host([variant=outline]) button:hover{background:var(--btn-outline-bg-hover)}:host([variant=link]:not([size])){vertical-align:baseline;margin-left:.25em;margin-right:.25em}:host([variant=link]:not([size])){font-size:inherit}:host([variant=link]) button{text-decoration:underline;padding:0;background:0 0;border:none;font-size:inherit;min-height:0;color:inherit}:host([variant=link][type]) button{color:var(--btn-bg)}:host([variant=link][type=default]) button{color:inherit}:host([variant=link]) button:focus,:host([variant=link]) button:hover{text-decoration:none}:host([shape=circle]) button{border-radius:50%}:host([shape=circle]) button,:host([shape=square]) button{width:var(--sc-btn-height);height:var(--sc-btn-height);padding:0;align-items:center;justify-content:0;text-align:center!important}:host([shape=block]),:host([shape=block]) button{width:100%}:host([disabled]){opacity:.3;pointer-events:none;user-select:none}:host([active]:not([variant=ghost]):not([variant=unstyled])) button{background:var(--sc-btn-active-bg);color:var(--sc-btn-active-color);border-color:var(--sc-btn-active-bg)}:host([align=left]) button{text-align:left}:host([align=right]) button{text-align:right}.main-slot{flex-grow:1;display:block}:host([minWidth]) .main-slot{flex-grow:0}slot[name=prefix],slot[name=suffix]{flex-shrink:0}::slotted(sonic-icon){min-width:1em;text-align:center}:host([icon]) ::slotted(sonic-icon){font-size:1.2em;vertical-align:middle}sonic-tooltip{display:contents}:host(:not([active])) ::slotted([swap=on]){display:none!important}:host([active]) ::slotted([swap=off]){display:none!important}:host([loading]){pointer-events:none;position:relative}:host([loading]) slot{opacity:0!important;pointer-events:none}:host([loading]) .loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;line-height:0;height:var(--sc-btn-ff);width:var(--sc-btn-ff);animation:rotation 2s infinite linear}@keyframes rotation{from{transform-origin:50% 50%;transform:translate(-50%,-50%) rotate(0)}to{transform-origin:50% 50%;transform:translate(-50%,-50%) rotate(359deg)}}`
 ];
-__decorateClass$13([
+__decorateClass$12([
   e$7({ type: String, reflect: true })
 ], Button.prototype, "type", 2);
-__decorateClass$13([
+__decorateClass$12([
   e$7({ type: String, reflect: true })
 ], Button.prototype, "variant", 2);
-__decorateClass$13([
+__decorateClass$12([
   e$7({ type: String, reflect: true })
 ], Button.prototype, "size", 2);
-__decorateClass$13([
+__decorateClass$12([
   e$7({ type: String, reflect: true })
 ], Button.prototype, "shape", 2);
-__decorateClass$13([
+__decorateClass$12([
   e$7({ type: String })
 ], Button.prototype, "direction", 2);
-__decorateClass$13([
+__decorateClass$12([
   e$7({ type: String, reflect: true })
 ], Button.prototype, "alignItems", 2);
-__decorateClass$13([
+__decorateClass$12([
   e$7({ type: String })
 ], Button.prototype, "justify", 2);
-__decorateClass$13([
+__decorateClass$12([
   e$7({ type: String, reflect: true })
 ], Button.prototype, "align", 2);
-__decorateClass$13([
+__decorateClass$12([
   e$7({ type: String })
 ], Button.prototype, "minWidth", 2);
-__decorateClass$13([
+__decorateClass$12([
   e$7({ type: Boolean, reflect: true })
 ], Button.prototype, "icon", 2);
-__decorateClass$13([
+__decorateClass$12([
   e$7({ type: String })
 ], Button.prototype, "autoActive", 2);
-__decorateClass$13([
+__decorateClass$12([
   e$7({ type: Boolean, reflect: true })
 ], Button.prototype, "loading", 2);
-__decorateClass$13([
+__decorateClass$12([
   t$3()
 ], Button.prototype, "hasPrefix", 2);
-__decorateClass$13([
+__decorateClass$12([
   t$3()
 ], Button.prototype, "hasSuffix", 2);
-__decorateClass$13([
+__decorateClass$12([
   l$6({ flatten: true, slot: "prefix" })
 ], Button.prototype, "prefixes", 2);
-__decorateClass$13([
+__decorateClass$12([
   l$6({ flatten: true, slot: "suffix" })
 ], Button.prototype, "suffixes", 2);
-__decorateClass$13([
+__decorateClass$12([
   e$7({ type: String })
 ], Button.prototype, "target", 2);
-__decorateClass$13([
+__decorateClass$12([
   e$7({ type: String })
 ], Button.prototype, "href", 1);
-__decorateClass$13([
+__decorateClass$12([
   e$7({ type: String })
 ], Button.prototype, "goBack", 2);
-__decorateClass$13([
+__decorateClass$12([
   e$7({ type: Boolean })
 ], Button.prototype, "pushState", 2);
-__decorateClass$13([
+__decorateClass$12([
   e$7({ type: Boolean, reflect: true })
 ], Button.prototype, "active", 2);
-Button = __decorateClass$13([
-  e$8(tagName$_)
+Button = __decorateClass$12([
+  e$8(tagName$Z)
 ], Button);
 const inline = i$4`:host([align=left]) .sonic-loader--inline{margin-left:0}:host([align=right]) .sonic-loader--inline{margin-left:auto;margin-right:0}.sonic-loader--inline{display:block;position:relative;width:80px;height:80px;margin:auto;z-index:20}.sonic-loader--inline div{position:absolute;top:33px;width:13px;height:13px;border-radius:50%;background:var(--sc-loader-bg);animation-timing-function:cubic-bezier(0,1,1,0)}.sonic-loader--inline div:nth-child(1){left:8px;animation:lds-ellipsis1 .6s infinite}.sonic-loader--inline div:nth-child(2){left:8px;animation:lds-ellipsis2 .6s infinite}.sonic-loader--inline div:nth-child(3){left:32px;animation:lds-ellipsis2 .6s infinite}.sonic-loader--inline div:nth-child(4){left:56px;animation:lds-ellipsis3 .6s infinite}@keyframes lds-ellipsis1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}100%{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0,0)}100%{transform:translate(24px,0)}}`;
 const fixed = i$4`@keyframes sonic-loader--fixed{0%{transform:scale(0);opacity:0}5%{opacity:1}70%{opacity:90%}100%{transform:scale(1);opacity:0}}.sonic-loader--fixed{position:fixed;top:50%;left:50%;transform:transateY(-50%) translateX(-50%);z-index:999}.sonic-loader--fixed>div:nth-child(2){animation-delay:-.5s}.sonic-loader--fixed>div:nth-child(3){animation-delay:-.2s}.sonic-loader--fixed>div:nth-child(4){display:none!important}.sonic-loader--fixed>div{background-color:var(--sc-loader-bg);width:5rem;height:5rem;border-radius:100%;margin:2px;animation-fill-mode:both;position:absolute;top:0;opacity:0;margin:0;top:-2.5rem;left:-2.5rem;width:5rem;height:5rem;animation:sonic-loader--fixed 1s 0s linear infinite}`;
-var __defProp$12 = Object.defineProperty;
-var __getOwnPropDesc$12 = Object.getOwnPropertyDescriptor;
-var __decorateClass$12 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$12(target, key) : target;
+var __defProp$11 = Object.defineProperty;
+var __getOwnPropDesc$11 = Object.getOwnPropertyDescriptor;
+var __decorateClass$11 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$11(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$12(target, key, result);
+    __defProp$11(target, key, result);
   return result;
 };
-const tagName$Z = "sonic-loader";
+const tagName$Y = "sonic-loader";
 let Loader = class extends s$3 {
   constructor() {
     super(...arguments);
@@ -3109,11 +3321,11 @@ Loader.styles = [
   i$4`:host{--sc-loader-bg:var(--sc-primary, currentColor);pointer-events:none}.sonic-loader{opacity:0;animation:showLoader .5s .5s forwards}.sonic-loader--inline{animation-delay:0s}@keyframes showLoader{0%{opacity:0}100%{opacity:1}}`
 ];
 Loader.callCounter = 0;
-__decorateClass$12([
+__decorateClass$11([
   e$7({ type: String })
 ], Loader.prototype, "mode", 2);
-Loader = __decorateClass$12([
-  e$8(tagName$Z)
+Loader = __decorateClass$11([
+  e$8(tagName$Y)
 ], Loader);
 /**
  * @license
@@ -3235,7 +3447,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 +3465,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 +3473,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 +3492,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 +3756,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 +3820,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,24 +3841,24 @@ 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;
-var __defProp$11 = Object.defineProperty;
-var __getOwnPropDesc$11 = Object.getOwnPropertyDescriptor;
-var __decorateClass$11 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$11(target, key) : target;
+var __defProp$10 = Object.defineProperty;
+var __getOwnPropDesc$10 = Object.getOwnPropertyDescriptor;
+var __decorateClass$10 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$10(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$11(target, key, result);
+    __defProp$10(target, key, result);
   return result;
 };
-const tagName$Y = "sonic-icon";
+const tagName$X = "sonic-icon";
 let Icon = class extends s$3 {
   constructor() {
     super(...arguments);
@@ -3661,7 +3873,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;
       }
@@ -3700,28 +3912,28 @@ let Icon = class extends s$3 {
   }
 };
 Icon.styles = i$4`:host{line-height:0;width:fit-content;height:fit-content;vertical-align:-.125em}svg{height:var(--sc-icon-size,1em);width:var(--sc-icon-size,1em)}svg:not([fill=none]){fill:currentColor}svg[fill=none]{stroke-width:2}:host([size="2xs"]) svg{--sc-icon-size:0.625em}:host([size=xs]) svg{--sc-icon-size:0.75em}:host([size=sm]) svg{--sc-icon-size:0.875em}:host([size=lg]) svg{--sc-icon-size:1.25em}:host([size=xl]) svg{--sc-icon-size:1.5em}:host([size="2xl"]) svg{--sc-icon-size:2em}:host([size="3xl"]) svg{--sc-icon-size:2.8em}`;
-__decorateClass$11([
+__decorateClass$10([
   e$7({ type: String })
 ], Icon.prototype, "name", 1);
-__decorateClass$11([
+__decorateClass$10([
   e$7({ type: String })
 ], Icon.prototype, "prefix", 1);
-__decorateClass$11([
+__decorateClass$10([
   e$7({ type: String })
 ], Icon.prototype, "library", 1);
-Icon = __decorateClass$11([
-  e$8(tagName$Y)
+Icon = __decorateClass$10([
+  e$8(tagName$X)
 ], Icon);
 const customScroll = i$4`.custom-scroll{overflow:auto!important;overflow-y:overlay!important}.custom-scroll::-webkit-scrollbar{width:.5rem;height:.5rem;border:solid .15rem transparent;border-radius:var(--sc-rounded);background:0 0}.custom-scroll::-webkit-scrollbar-thumb{box-shadow:inset 0 0 2rem 2rem var(--sc-scrollbar-bg);border-radius:var(--sc-rounded);border:solid .15rem transparent}`;
-var __defProp$10 = Object.defineProperty;
-var __getOwnPropDesc$10 = Object.getOwnPropertyDescriptor;
-var __decorateClass$10 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$10(target, key) : target;
+var __defProp$$ = Object.defineProperty;
+var __getOwnPropDesc$$ = Object.getOwnPropertyDescriptor;
+var __decorateClass$$ = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$$(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$10(target, key, result);
+    __defProp$$(target, key, result);
   return result;
 };
 const icon$1 = {
@@ -3730,7 +3942,7 @@ const icon$1 = {
   error: "warning-circled-outline",
   info: "info-empty"
 };
-const tagName$X = "sonic-toast-item";
+const tagName$W = "sonic-toast-item";
 let SonicToastItem = class extends s$3 {
   constructor() {
     super(...arguments);
@@ -3755,7 +3967,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")) {
@@ -3782,48 +3994,48 @@ SonicToastItem.styles = [
   customScroll,
   i$4`*{box-sizing:border-box}:host{display:block;pointer-events:auto;position:relative;--sc-toast-status-color:transparent;--sc-toast-color:var(--sc-base-content);--sc-toast-bg:var(--sc-base);--sc-toast-rounded:var(--sc-rounded-md);--sc-toast-shadow:var(--sc-shadow-lg)}.fixed-area{position:fixed;bottom:1.25rem;right:1.25rem;z-index:10000;display:flex;flex-direction:column-reverse}.sonic-toast{position:relative;pointer-events:auto;overflow:hidden;line-height:1.25;color:var(--sc-toast-color);box-shadow:var(--sc-toast-shadow);border-radius:var(--sc-toast-rounded);background:var(--sc-toast-bg)}.sonic-toast-content{padding:1em 2.5rem 1em 1em;display:flex;gap:.5rem;overflow:auto;position:relative}.sonic-toast-text{align-self:center;margin-top:auto;margin-bottom:auto;max-width:70ch;line-height:1.2}.sonic-toast-text a,::slotted(a:not(.btn)){color:inherit!important;text-decoration:underline!important;text-underline-offset:.15rem}.sonic-toast-text :is(p, ul, ol, hr, h1, h2, h3, h4, h5, h6),::slotted(:is(p,ul,ol,hr,h1,h2,h3,h4,h5,h6)){margin:0 0 .3em!important}.sonic-toast-text li,::slotted(li){margin-bottom:.15em!important}.sonic-toast-text>:is(p,ul,ol,hr,h1,h2,h3,h4,h5,h6):last-child,::slotted(:is(p,ul,ol,hr,h1,h2,h3,h4,h5,h6):last-child){margin-bottom:0!important}.sonic-toast-close{all:unset;position:absolute;z-index:4;pointer-events:initial;right:.5em;top:.5em;width:1.5rem;height:1.5rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;text-align:center;opacity:.5;background:rgba(0,0,0,0)}.sonic-toast-close:focus,.sonic-toast-close:hover{opacity:1;background:rgba(0,0,0,.075)}.sonic-toast-close svg{width:1rem;height:1rem;object-fit:contain;object-position:center center}.sonic-toast-title{font-weight:700;font-size:1.15rem;margin:.15em 0 .25em;line-height:1.2}.success{--sc-toast-status-color:var(--sc-success);--sc-toast-title-color:var(--sc-toast-status-color)}.error{--sc-toast-status-color:var(--sc-danger);--sc-toast-title-color:var(--sc-toast-status-color)}.warning{--sc-toast-status-color:var(--sc-warning);--sc-toast-title-color:var(--sc-toast-status-color)}.info{--sc-toast-status-color:var(--sc-info);--sc-toast-title-color:var(--sc-toast-status-color)}.error,.info,.success,.warning{border-top:3px solid var(--sc-toast-status-color,currentColor)}.sonic-toast:before{content:"";display:block;position:absolute;left:0;top:0;right:0;bottom:0;opacity:.05;pointer-events:none;transition:.2s;border-radius:var(--sc-toast-rounded);background-color:var(--sc-toast-status-color)}.sonic-toast:hover:before{opacity:.025}.error .sonic-toast-icon,.info .sonic-toast-icon,.success .sonic-toast-icon,.warning .sonic-toast-icon{color:var(--sc-toast-status-color,currentColor)}.sonic-toast-icon{position:sticky;top:0}.ghost{opacity:.85;pointer-events:none}`
 ];
-__decorateClass$10([
+__decorateClass$$([
   e$7({ type: String })
 ], SonicToastItem.prototype, "title", 2);
-__decorateClass$10([
+__decorateClass$$([
   e$7({ type: String })
 ], SonicToastItem.prototype, "id", 2);
-__decorateClass$10([
+__decorateClass$$([
   e$7({ type: String })
 ], SonicToastItem.prototype, "text", 2);
-__decorateClass$10([
+__decorateClass$$([
   e$7({ type: String })
 ], SonicToastItem.prototype, "status", 2);
-__decorateClass$10([
+__decorateClass$$([
   e$7({ type: Boolean })
 ], SonicToastItem.prototype, "ghost", 2);
-__decorateClass$10([
+__decorateClass$$([
   e$7({ type: Boolean })
 ], SonicToastItem.prototype, "preserve", 2);
-__decorateClass$10([
+__decorateClass$$([
   e$7({ type: Boolean })
 ], SonicToastItem.prototype, "dismissForever", 2);
-__decorateClass$10([
+__decorateClass$$([
   e$7({ type: String })
 ], SonicToastItem.prototype, "maxHeight", 2);
-__decorateClass$10([
+__decorateClass$$([
   t$3()
 ], SonicToastItem.prototype, "visible", 2);
-SonicToastItem = __decorateClass$10([
-  e$8(tagName$X)
+SonicToastItem = __decorateClass$$([
+  e$8(tagName$W)
 ], SonicToastItem);
-var __defProp$$ = Object.defineProperty;
-var __getOwnPropDesc$$ = Object.getOwnPropertyDescriptor;
-var __decorateClass$$ = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$$(target, key) : target;
+var __defProp$_ = Object.defineProperty;
+var __getOwnPropDesc$_ = Object.getOwnPropertyDescriptor;
+var __decorateClass$_ = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$_(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$$(target, key, result);
+    __defProp$_(target, key, result);
   return result;
 };
-const tagName$W = "sonic-toast";
+const tagName$V = "sonic-toast";
 let SonicToast$1 = class extends s$3 {
   constructor() {
     super(...arguments);
@@ -3873,7 +4085,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() {
@@ -3938,24 +4150,24 @@ let SonicToast$1 = class extends s$3 {
     });
   }
 };
-__decorateClass$$([
+__decorateClass$_([
   e$7({ type: Array })
 ], SonicToast$1.prototype, "toasts", 2);
-SonicToast$1 = __decorateClass$$([
-  e$8(tagName$W)
+SonicToast$1 = __decorateClass$_([
+  e$8(tagName$V)
 ], SonicToast$1);
 if (typeof window !== "undefined") {
   window.SonicToast = SonicToast$1;
 }
-var __defProp$_ = Object.defineProperty;
-var __getOwnPropDesc$_ = Object.getOwnPropertyDescriptor;
-var __decorateClass$_ = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$_(target, key) : target;
+var __defProp$Z = Object.defineProperty;
+var __getOwnPropDesc$Z = Object.getOwnPropertyDescriptor;
+var __decorateClass$Z = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$Z(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$_(target, key, result);
+    __defProp$Z(target, key, result);
   return result;
 };
 const Fetcher$1 = (superClass, propsType) => {
@@ -3995,24 +4207,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 +4265,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,23 +4278,35 @@ 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];
-      if (elt && elt.nodeName.toLocaleLowerCase() == "slot")
+      if ((elt == null ? void 0 : elt.nodeName.toLocaleLowerCase()) == "slot")
         elt = elt.children[0];
       if (!elt || elt.nodeName.toLocaleLowerCase() == "template") {
         elt = document.createElement("span");
+        const style = elt.style;
+        style.position = "absolute";
+        style.pointerEvents = "none";
+        this.lazyLoadSpan = elt;
         this.appendChild(elt);
       }
       if (elt) {
@@ -4076,39 +4316,44 @@ const Fetcher$1 = (superClass, propsType) => {
       }
     }
     onIntersection(entries) {
+      var _a2, _b;
       for (const e2 of entries) {
         if (e2.isIntersecting && this.isFirstLoad) {
           this._fetchData();
+          (_a2 = this.lazyLoadSpan) == null ? void 0 : _a2.remove();
+          this.lazyLoadSpan = void 0;
+          (_b = this.iObserver) == null ? void 0 : _b.disconnect();
+          break;
         }
       }
     }
   }
-  __decorateClass$_([
+  __decorateClass$Z([
     e$7()
   ], FetcherElement.prototype, "props", 1);
-  __decorateClass$_([
+  __decorateClass$Z([
     e$7({ type: String })
   ], FetcherElement.prototype, "endPoint", 1);
-  __decorateClass$_([
+  __decorateClass$Z([
     e$7()
   ], FetcherElement.prototype, "requestId", 2);
-  __decorateClass$_([
+  __decorateClass$Z([
     e$7({ type: Number })
   ], FetcherElement.prototype, "refetchEveryMs", 2);
   return FetcherElement;
 };
-var __defProp$Z = Object.defineProperty;
-var __getOwnPropDesc$Z = Object.getOwnPropertyDescriptor;
-var __decorateClass$Z = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$Z(target, key) : target;
+var __defProp$Y = Object.defineProperty;
+var __getOwnPropDesc$Y = Object.getOwnPropertyDescriptor;
+var __decorateClass$Y = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$Y(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$Z(target, key, result);
+    __defProp$Y(target, key, result);
   return result;
 };
-const tagName$V = "sonic-fetch";
+const tagName$U = "sonic-fetch";
 let Fetch = class extends Fetcher$1(Subscriber$1(s$3)) {
   render() {
     return y`<slot></slot>`;
@@ -4117,21 +4362,21 @@ let Fetch = class extends Fetcher$1(Subscriber$1(s$3)) {
 Fetch.styles = [
   i$4`:host{display:contents}`
 ];
-Fetch = __decorateClass$Z([
-  e$8(tagName$V)
+Fetch = __decorateClass$Y([
+  e$8(tagName$U)
 ], Fetch);
-var __defProp$Y = Object.defineProperty;
-var __getOwnPropDesc$Y = Object.getOwnPropertyDescriptor;
-var __decorateClass$Y = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$Y(target, key) : target;
+var __defProp$X = Object.defineProperty;
+var __getOwnPropDesc$X = Object.getOwnPropertyDescriptor;
+var __decorateClass$X = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$X(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$Y(target, key, result);
+    __defProp$X(target, key, result);
   return result;
 };
-const tagName$U = "sonic-if";
+const tagName$T = "sonic-if";
 let SonicIF = class extends s$3 {
   constructor() {
     super(...arguments);
@@ -4144,18 +4389,18 @@ let SonicIF = class extends s$3 {
   }
 };
 SonicIF.styles = i$4`:host{display:contents}`;
-__decorateClass$Y([
+__decorateClass$X([
   e$7({ type: Boolean })
 ], SonicIF.prototype, "condition", 2);
-SonicIF = __decorateClass$Y([
-  e$8(tagName$U)
+SonicIF = __decorateClass$X([
+  e$8(tagName$T)
 ], SonicIF);
 /**
  * @license
  * 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");
@@ -4164,18 +4409,18 @@ const o$1 = e$2(class extends i$2 {
     return this.ft === r2 ? x$1 : (this.ft = r2, document.importNode(r2.content, true));
   }
 });
-var __defProp$X = Object.defineProperty;
-var __getOwnPropDesc$X = Object.getOwnPropertyDescriptor;
-var __decorateClass$X = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$X(target, key) : target;
+var __defProp$W = Object.defineProperty;
+var __getOwnPropDesc$W = Object.getOwnPropertyDescriptor;
+var __decorateClass$W = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$W(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$X(target, key, result);
+    __defProp$W(target, key, result);
   return result;
 };
-const tagName$T = "sonic-subscriber";
+const tagName$S = "sonic-subscriber";
 let SonicSubscriber = class extends Subscriber$1(s$3) {
   constructor() {
     super(...arguments);
@@ -4196,21 +4441,21 @@ let SonicSubscriber = class extends Subscriber$1(s$3) {
     return y`<slot></slot>`;
   }
 };
-SonicSubscriber = __decorateClass$X([
-  e$8(tagName$T)
+SonicSubscriber = __decorateClass$W([
+  e$8(tagName$S)
 ], SonicSubscriber);
-var __defProp$W = Object.defineProperty;
-var __getOwnPropDesc$W = Object.getOwnPropertyDescriptor;
-var __decorateClass$W = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$W(target, key) : target;
+var __defProp$V = Object.defineProperty;
+var __getOwnPropDesc$V = Object.getOwnPropertyDescriptor;
+var __decorateClass$V = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$V(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$W(target, key, result);
+    __defProp$V(target, key, result);
   return result;
 };
-const tagName$S = "sonic-list";
+const tagName$R = "sonic-list";
 let List = class extends Fetcher$1(Subscriber$1(TemplatesContainer$1(s$3))) {
   constructor() {
     super(...arguments);
@@ -4226,8 +4471,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 +4515,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;
@@ -4291,42 +4539,64 @@ let List = class extends Fetcher$1(Subscriber$1(TemplatesContainer$1(s$3))) {
         return b$1;
       if (typeof key != "string" && typeof key != "number")
         return b$1;
-      const pub = this.publisher[key];
-      pub._key_ = key + "";
+      const isLastChild = index >= length - 1;
+      const indexMod2 = index % 2;
+      const childPublisher = this.publisher[key];
+      childPublisher._key_ = key + "";
+      childPublisher._metadata_ = {
+        ...childPublisher._metadata_.get(),
+        key,
+        even: indexMod2 == 0,
+        odd: indexMod2 == 1,
+        onlyChild: length == 1,
+        firstChild: index == 0,
+        lastChild: isLastChild
+      };
       counter++;
-      const isNotLast = index < length - 1;
       if (templatePart)
         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}`;
+        return childPublisher;
+      }}" .propertyMap?="${this.itemPropertyMap}" dataProvider="${this.dataProvider}/list-item/${key}">${templatePart ? o$2(templatePart) : o$2(this.templateList[counter % templateCount])}</sonic-subscriber>${separator && !isLastChild ? o$2(separator) : b$1}`;
     })}`;
   }
 };
-__decorateClass$W([
+__decorateClass$V([
   e$7({ type: Object })
 ], List.prototype, "itemPropertyMap", 2);
-__decorateClass$W([
+__decorateClass$V([
   e$7({ type: String })
 ], List.prototype, "templateKey", 2);
-__decorateClass$W([
+__decorateClass$V([
   e$7({ type: String })
 ], List.prototype, "idKey", 2);
-List = __decorateClass$W([
-  e$8(tagName$S)
+List = __decorateClass$V([
+  e$8(tagName$R)
 ], List);
-var __defProp$V = Object.defineProperty;
-var __getOwnPropDesc$V = Object.getOwnPropertyDescriptor;
-var __decorateClass$V = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$V(target, key) : target;
+/**
+ * @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$U = Object.defineProperty;
+var __getOwnPropDesc$U = Object.getOwnPropertyDescriptor;
+var __decorateClass$U = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$U(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$V(target, key, result);
+    __defProp$U(target, key, result);
   return result;
 };
-const tagName$R = "sonic-queue";
+const tagName$Q = "sonic-queue";
 let Queue = class extends Subscriber$1(s$3) {
   constructor() {
     super(...arguments);
@@ -4334,14 +4604,19 @@ 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.localStorage = "disabled";
     this.filterPublisher = null;
     this.searchHash = "";
     this.requestId = 0;
+    this.isFirstRequest = true;
     this.dataProviderExpression = "";
     this.idKey = "id";
     this.currentScrollPosition = void 0;
@@ -4355,33 +4630,33 @@ let Queue = class extends Subscriber$1(s$3) {
     super.disconnectedCallback();
     return;
   }
-  connectedCallback() {
+  async connectedCallback() {
+    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-" + Queue.instanceCounter++ + "-" + 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.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 +4677,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,19 +4685,24 @@ 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;
@@ -4431,7 +4711,7 @@ let Queue = class extends Subscriber$1(s$3) {
     }
     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,7 +4728,7 @@ 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)
+    if (requestDuration > 0 && e2 && !this.localStorage)
       this.limit = Math.round(this.limit / requestDuration * this.targetRequestDuration);
     if (this.limit < 1)
       this.limit = 1;
@@ -4469,7 +4749,6 @@ 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,
       {
@@ -4484,69 +4763,67 @@ 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>`;
-      }
-    )}`;
+    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="${!this.noLazyload}" 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}" idKey="${this.idKey}" .templates="${templates}"></sonic-list>`;
+    })}`;
   }
 };
 Queue.instanceCounter = 0;
-__decorateClass$V([
+__decorateClass$U([
   e$7({ type: Array })
 ], Queue.prototype, "templates", 2);
-__decorateClass$V([
+__decorateClass$U([
   e$7({ type: Object })
 ], Queue.prototype, "itemPropertyMap", 2);
-__decorateClass$V([
+__decorateClass$U([
+  e$7()
+], Queue.prototype, "cache", 2);
+__decorateClass$U([
   e$7()
 ], Queue.prototype, "targetRequestDuration", 2);
-__decorateClass$V([
+__decorateClass$U([
   e$7()
 ], Queue.prototype, "limit", 2);
-__decorateClass$V([
+__decorateClass$U([
+  e$7()
+], Queue.prototype, "lazyBoundsRatio", 2);
+__decorateClass$U([
   e$7()
 ], Queue.prototype, "offset", 2);
-__decorateClass$V([
+__decorateClass$U([
   e$7()
 ], Queue.prototype, "resultCount", 2);
-__decorateClass$V([
+__decorateClass$U([
+  e$7({ type: Boolean })
+], Queue.prototype, "noLazyload", 2);
+__decorateClass$U([
   e$7()
 ], Queue.prototype, "filteredFields", 2);
-__decorateClass$V([
+__decorateClass$U([
   e$7({ type: String })
 ], Queue.prototype, "dataProviderExpression", 2);
-__decorateClass$V([
+__decorateClass$U([
   e$7({ type: String })
 ], Queue.prototype, "idKey", 2);
-Queue = __decorateClass$V([
-  e$8(tagName$R)
+Queue = __decorateClass$U([
+  e$8(tagName$Q)
 ], Queue);
-var __defProp$U = Object.defineProperty;
-var __getOwnPropDesc$U = Object.getOwnPropertyDescriptor;
-var __decorateClass$U = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$U(target, key) : target;
+var __defProp$T = Object.defineProperty;
+var __getOwnPropDesc$T = Object.getOwnPropertyDescriptor;
+var __decorateClass$T = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$T(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$U(target, key, result);
+    __defProp$T(target, key, result);
   return result;
 };
-const tagName$Q = "sonic-submit";
+const tagName$P = "sonic-submit";
 let Submit = class extends Subscriber$1(s$3) {
   constructor() {
     super(...arguments);
@@ -4708,23 +4985,23 @@ let Submit = class extends Subscriber$1(s$3) {
   }
 };
 Submit.styles = i$4`[data-disabled]{opacity:.3;pointer-events:none;user-select:none}`;
-__decorateClass$U([
+__decorateClass$T([
   e$7({ type: String })
 ], Submit.prototype, "submitResultKey", 2);
-__decorateClass$U([
+__decorateClass$T([
   e$7({ type: Boolean })
 ], Submit.prototype, "disabled", 2);
-__decorateClass$U([
+__decorateClass$T([
   e$7({ type: String })
 ], Submit.prototype, "endPoint", 2);
-__decorateClass$U([
+__decorateClass$T([
   e$7()
 ], Submit.prototype, "name", 2);
-__decorateClass$U([
+__decorateClass$T([
   e$7()
 ], Submit.prototype, "value", 2);
-Submit = __decorateClass$U([
-  e$8(tagName$Q)
+Submit = __decorateClass$T([
+  e$8(tagName$P)
 ], Submit);
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 var urlPattern = { exports: {} };
@@ -5163,18 +5440,18 @@ var urlPattern = { exports: {} };
   });
 })(urlPattern, urlPattern.exports);
 var UrlPattern = urlPattern.exports;
-var __defProp$T = Object.defineProperty;
-var __getOwnPropDesc$T = Object.getOwnPropertyDescriptor;
-var __decorateClass$T = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$T(target, key) : target;
+var __defProp$S = Object.defineProperty;
+var __getOwnPropDesc$S = Object.getOwnPropertyDescriptor;
+var __decorateClass$S = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$S(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$T(target, key, result);
+    __defProp$S(target, key, result);
   return result;
 };
-const tagName$P = "sonic-router";
+const tagName$O = "sonic-router";
 let SonicRouter = class extends Subscriber$1(TemplatesContainer$1(s$3)) {
   constructor() {
     super(...arguments);
@@ -5240,31 +5517,31 @@ 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);
       }
     )}`;
   }
 };
-__decorateClass$T([
+__decorateClass$S([
   e$7()
 ], SonicRouter.prototype, "location", 1);
-SonicRouter = __decorateClass$T([
-  e$8(tagName$P)
+SonicRouter = __decorateClass$S([
+  e$8(tagName$O)
 ], SonicRouter);
-var __defProp$S = Object.defineProperty;
-var __getOwnPropDesc$S = Object.getOwnPropertyDescriptor;
-var __decorateClass$S = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$S(target, key) : target;
+var __defProp$R = Object.defineProperty;
+var __getOwnPropDesc$R = Object.getOwnPropertyDescriptor;
+var __decorateClass$R = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$R(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$S(target, key, result);
+    __defProp$R(target, key, result);
   return result;
 };
-const tagName$O = "sonic-redirect";
+const tagName$N = "sonic-redirect";
 let SonicRedirect = class extends Subscriber$1(s$3) {
   connectedCallback() {
     this.noShadowDom = "";
@@ -5293,21 +5570,21 @@ let SonicRedirect = class extends Subscriber$1(s$3) {
     }
   }
 };
-SonicRedirect = __decorateClass$S([
-  e$8(tagName$O)
+SonicRedirect = __decorateClass$R([
+  e$8(tagName$N)
 ], SonicRedirect);
-var __defProp$R = Object.defineProperty;
-var __getOwnPropDesc$R = Object.getOwnPropertyDescriptor;
-var __decorateClass$R = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$R(target, key) : target;
+var __defProp$Q = Object.defineProperty;
+var __getOwnPropDesc$Q = Object.getOwnPropertyDescriptor;
+var __decorateClass$Q = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$Q(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$R(target, key, result);
+    __defProp$Q(target, key, result);
   return result;
 };
-const tagName$N = "sonic-states";
+const tagName$M = "sonic-states";
 let SonicStates = class extends Subscriber$1(TemplatesContainer$1(s$3)) {
   constructor() {
     super(...arguments);
@@ -5398,34 +5675,34 @@ 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);
       }
     )}`;
   }
 };
-__decorateClass$R([
+__decorateClass$Q([
   e$7()
 ], SonicStates.prototype, "state", 2);
-__decorateClass$R([
+__decorateClass$Q([
   e$7({ type: Boolean, reflect: true })
 ], SonicStates.prototype, "inverted", 2);
-SonicStates = __decorateClass$R([
-  e$8(tagName$N)
+SonicStates = __decorateClass$Q([
+  e$8(tagName$M)
 ], SonicStates);
-var __defProp$Q = Object.defineProperty;
-var __getOwnPropDesc$Q = Object.getOwnPropertyDescriptor;
-var __decorateClass$Q = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$Q(target, key) : target;
+var __defProp$P = Object.defineProperty;
+var __getOwnPropDesc$P = Object.getOwnPropertyDescriptor;
+var __decorateClass$P = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$P(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$Q(target, key, result);
+    __defProp$P(target, key, result);
   return result;
 };
-const tagName$M = "sonic-scope";
+const tagName$L = "sonic-scope";
 let SonicScope = class extends s$3 {
   createRenderRoot() {
     return this;
@@ -5434,21 +5711,21 @@ let SonicScope = class extends s$3 {
     return y`<slot></slot>`;
   }
 };
-SonicScope = __decorateClass$Q([
-  e$8(tagName$M)
+SonicScope = __decorateClass$P([
+  e$8(tagName$L)
 ], SonicScope);
-var __defProp$P = Object.defineProperty;
-var __getOwnPropDesc$P = Object.getOwnPropertyDescriptor;
-var __decorateClass$P = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$P(target, key) : target;
+var __defProp$O = Object.defineProperty;
+var __getOwnPropDesc$O = Object.getOwnPropertyDescriptor;
+var __decorateClass$O = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$O(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$P(target, key, result);
+    __defProp$O(target, key, result);
   return result;
 };
-const tagName$L = "sonic-example";
+const tagName$K = "sonic-example";
 let SonicComponent$2 = class extends Subscriber$1(s$3) {
   constructor() {
     super(...arguments);
@@ -5458,11 +5735,11 @@ let SonicComponent$2 = class extends Subscriber$1(s$3) {
     return y`<div>${this.text}</div>`;
   }
 };
-__decorateClass$P([
+__decorateClass$O([
   e$7()
 ], SonicComponent$2.prototype, "text", 2);
-SonicComponent$2 = __decorateClass$P([
-  e$8(tagName$L)
+SonicComponent$2 = __decorateClass$O([
+  e$8(tagName$K)
 ], SonicComponent$2);
 const checkbox = {
   tagName: "sonic-checkbox"
@@ -5778,15 +6055,15 @@ class SDUIDescriptorTransformer {
     }
   }
 }
-var __defProp$O = Object.defineProperty;
-var __getOwnPropDesc$O = Object.getOwnPropertyDescriptor;
-var __decorateClass$O = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$O(target, key) : target;
+var __defProp$N = Object.defineProperty;
+var __getOwnPropDesc$N = Object.getOwnPropertyDescriptor;
+var __decorateClass$N = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$N(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$O(target, key, result);
+    __defProp$N(target, key, result);
   return result;
 };
 const Form = (superClass) => {
@@ -5834,22 +6111,22 @@ const Form = (superClass) => {
       this.requestUpdate();
     }
   }
-  __decorateClass$O([
+  __decorateClass$N([
     e$7()
   ], FormInput2.prototype, "forceAutoFill", 2);
-  __decorateClass$O([
+  __decorateClass$N([
     e$7({ type: String })
   ], FormInput2.prototype, "type", 1);
-  __decorateClass$O([
+  __decorateClass$N([
     e$7()
   ], FormInput2.prototype, "description", 1);
-  __decorateClass$O([
+  __decorateClass$N([
     e$7()
   ], FormInput2.prototype, "label", 1);
-  __decorateClass$O([
+  __decorateClass$N([
     e$7({ type: Number })
   ], FormInput2.prototype, "tabindex", 2);
-  __decorateClass$O([
+  __decorateClass$N([
     e$7({ type: String })
   ], FormInput2.prototype, "autocomplete", 2);
   return FormInput2;
@@ -5869,18 +6146,18 @@ window["concorde-mixins"] = {
   Subscriber,
   TemplatesContainer
 };
-var __defProp$N = Object.defineProperty;
-var __getOwnPropDesc$N = Object.getOwnPropertyDescriptor;
-var __decorateClass$N = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$N(target, key) : target;
+var __defProp$M = Object.defineProperty;
+var __getOwnPropDesc$M = Object.getOwnPropertyDescriptor;
+var __decorateClass$M = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$M(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$N(target, key, result);
+    __defProp$M(target, key, result);
   return result;
 };
-const tagName$K = "sonic-sdui";
+const tagName$J = "sonic-sdui";
 let SonicSDUI = class extends Fetcher(Subscriber(s$3)) {
   constructor() {
     super(...arguments);
@@ -6045,24 +6322,24 @@ let SonicSDUI = class extends Fetcher(Subscriber(s$3)) {
     }
   }
 };
-__decorateClass$N([
+__decorateClass$M([
   e$7()
 ], SonicSDUI.prototype, "sduiKey", 2);
-__decorateClass$N([
+__decorateClass$M([
   e$7()
 ], SonicSDUI.prototype, "messagesKey", 2);
-SonicSDUI = __decorateClass$N([
-  e$8(tagName$K)
+SonicSDUI = __decorateClass$M([
+  e$8(tagName$J)
 ], SonicSDUI);
-var __defProp$M = Object.defineProperty;
-var __getOwnPropDesc$M = Object.getOwnPropertyDescriptor;
-var __decorateClass$M = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$M(target, key) : target;
-  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
-    if (decorator = decorators[i2])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+var __defProp$L = Object.defineProperty;
+var __getOwnPropDesc$L = Object.getOwnPropertyDescriptor;
+var __decorateClass$L = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$L(target, key) : target;
+  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
+    if (decorator = decorators[i2])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$M(target, key, result);
+    __defProp$L(target, key, result);
   return result;
 };
 let SonicMix = class extends Subscriber(s$3) {
@@ -6144,24 +6421,24 @@ let SonicMix = class extends Subscriber(s$3) {
 SonicMix.styles = [
   i$4`:host{display:contents}`
 ];
-__decorateClass$M([
+__decorateClass$L([
   e$7({ type: Object })
 ], SonicMix.prototype, "composition", 1);
-SonicMix = __decorateClass$M([
+SonicMix = __decorateClass$L([
   e$8("sonic-mix")
 ], SonicMix);
-var __defProp$L = Object.defineProperty;
-var __getOwnPropDesc$L = Object.getOwnPropertyDescriptor;
-var __decorateClass$L = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$L(target, key) : target;
+var __defProp$K = Object.defineProperty;
+var __getOwnPropDesc$K = Object.getOwnPropertyDescriptor;
+var __decorateClass$K = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$K(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$L(target, key, result);
+    __defProp$K(target, key, result);
   return result;
 };
-const tagName$J = "sonic-value";
+const tagName$I = "sonic-value";
 let SonicValue = class extends Subscriber(s$3) {
   connectedCallback() {
     this.setAttribute("subDataProvider", this.getAttribute("key"));
@@ -6170,30 +6447,34 @@ 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 = __decorateClass$K([
+  e$8(tagName$I)
 ], 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``;
 const dark = i$4`:host([theme=dark]){${darkCss}}@media (prefers-color-scheme:dark){:host([theme=auto]){${darkCss}}}`;
-var __defProp$K = Object.defineProperty;
-var __getOwnPropDesc$K = Object.getOwnPropertyDescriptor;
-var __decorateClass$K = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$K(target, key) : target;
+var __defProp$J = Object.defineProperty;
+var __getOwnPropDesc$J = Object.getOwnPropertyDescriptor;
+var __decorateClass$J = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$J(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$K(target, key, result);
+    __defProp$J(target, key, result);
   return result;
 };
-const tagName$I = "sonic-theme";
+const tagName$H = "sonic-theme";
 let Theme = class extends s$3 {
   constructor() {
     super(...arguments);
@@ -6208,6 +6489,7 @@ let Theme = class extends s$3 {
     this.postCSSVars();
   }
   postCSSVars() {
+    var _a2;
     const stylesheets = document.styleSheets;
     const ssLength = stylesheets.length;
     const fontUrls = [];
@@ -6216,14 +6498,18 @@ let Theme = class extends s$3 {
       if (ss.href && (ss.href.includes("googleapis") || ss.href.includes("typekit.net")))
         fontUrls.push(ss.href);
     }
+    const theme = {
+      variables: this.getCssVariables(),
+      fonts: fontUrls
+    };
+    (_a2 = PublisherManager.get("sonic-theme")) == null ? void 0 : _a2.set(theme);
     document.querySelectorAll("iframe").forEach(
       (elt) => {
-        var _a2;
-        return (_a2 = elt.contentWindow) == null ? void 0 : _a2.postMessage(
+        var _a3;
+        return (_a3 = elt.contentWindow) == null ? void 0 : _a3.postMessage(
           {
             type: "SonicTheme",
-            variables: this.getCssVariables(),
-            fonts: fontUrls
+            ...theme
           },
           "*"
         );
@@ -6238,7 +6524,10 @@ 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)
+    ];
     for (const stylesheet of stylesheets) {
       try {
         if (!stylesheet)
@@ -6271,35 +6560,35 @@ 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([
+__decorateClass$J([
   e$7({ type: String, reflect: true })
 ], Theme.prototype, "theme", 2);
-__decorateClass$K([
+__decorateClass$J([
   e$7({ type: Boolean, reflect: true })
 ], Theme.prototype, "background", 2);
-__decorateClass$K([
+__decorateClass$J([
   e$7({ type: Boolean, reflect: true })
 ], Theme.prototype, "color", 2);
-__decorateClass$K([
+__decorateClass$J([
   e$7({ type: Boolean, reflect: true })
 ], Theme.prototype, "font", 2);
-Theme = __decorateClass$K([
-  e$8(tagName$I)
+Theme = __decorateClass$J([
+  e$8(tagName$H)
 ], Theme);
-var __defProp$J = Object.defineProperty;
-var __getOwnPropDesc$J = Object.getOwnPropertyDescriptor;
-var __decorateClass$J = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$J(target, key) : target;
+var __defProp$I = Object.defineProperty;
+var __getOwnPropDesc$I = Object.getOwnPropertyDescriptor;
+var __decorateClass$I = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$I(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$J(target, key, result);
+    __defProp$I(target, key, result);
   return result;
 };
-const tagName$H = "sonic-badge";
+const tagName$G = "sonic-badge";
 let Badge = class extends s$3 {
   constructor() {
     super(...arguments);
@@ -6313,22 +6602,22 @@ 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([
+__decorateClass$I([
   e$7({ type: String, reflect: true })
 ], Badge.prototype, "type", 2);
-__decorateClass$J([
+__decorateClass$I([
   e$7({ type: String, reflect: true })
 ], Badge.prototype, "variant", 2);
-__decorateClass$J([
+__decorateClass$I([
   e$7({ type: String, reflect: true })
 ], Badge.prototype, "size", 2);
-__decorateClass$J([
+__decorateClass$I([
   e$7({ type: Boolean, reflect: true })
 ], Badge.prototype, "ellipsis", 2);
-Badge = __decorateClass$J([
-  e$8(tagName$H)
+Badge = __decorateClass$I([
+  e$8(tagName$G)
 ], Badge);
 class Electron {
   static fixBlankLink(link) {
@@ -6341,18 +6630,18 @@ class Electron {
     }
   }
 }
-var __defProp$I = Object.defineProperty;
-var __getOwnPropDesc$I = Object.getOwnPropertyDescriptor;
-var __decorateClass$I = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$I(target, key) : target;
+var __defProp$H = Object.defineProperty;
+var __getOwnPropDesc$H = Object.getOwnPropertyDescriptor;
+var __decorateClass$H = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$H(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$I(target, key, result);
+    __defProp$H(target, key, result);
   return result;
 };
-const tagName$G = "sonic-link";
+const tagName$F = "sonic-link";
 let Link = class extends s$3 {
   constructor() {
     super(...arguments);
@@ -6401,33 +6690,33 @@ let Link = class extends s$3 {
 Link.styles = [
   i$4`a{color:inherit;text-decoration:none;display:contents}`
 ];
-__decorateClass$I([
+__decorateClass$H([
   e$7({ type: String })
 ], Link.prototype, "href", 2);
-__decorateClass$I([
+__decorateClass$H([
   e$7({ type: String })
 ], Link.prototype, "autoActive", 2);
-__decorateClass$I([
+__decorateClass$H([
   e$7({ type: String })
 ], Link.prototype, "target", 1);
-__decorateClass$I([
+__decorateClass$H([
   e$7({ type: Boolean })
 ], Link.prototype, "pushState", 2);
-Link = __decorateClass$I([
-  e$8(tagName$G)
+Link = __decorateClass$H([
+  e$8(tagName$F)
 ], Link);
-var __defProp$H = Object.defineProperty;
-var __getOwnPropDesc$H = Object.getOwnPropertyDescriptor;
-var __decorateClass$H = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$H(target, key) : target;
+var __defProp$G = Object.defineProperty;
+var __getOwnPropDesc$G = Object.getOwnPropertyDescriptor;
+var __decorateClass$G = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$G(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$H(target, key, result);
+    __defProp$G(target, key, result);
   return result;
 };
-const tagName$F = "sonic-progress";
+const tagName$E = "sonic-progress";
 let Progress = class extends s$3 {
   constructor() {
     super(...arguments);
@@ -6444,27 +6733,28 @@ Progress.styles = [
   fontSize,
   i$4`:host{--sc-progress-bg:var(--sc-input-bg, var(--sc-base-100, #f5f5f5));--sc-progress-color:var(--sc-base-content, #1f2937);--sc-progress-height:0.6em;--sc-progress-fs:var(--sc-fs, 1rem);--sc-progress-fw:500;--sc-progress-rounded:var(--sc-rounded-lg);display:block;line-height:1.2;font-weight:var(--sc-progress-fw);font-size:var(--sc-progress-fs)}progress{position:relative;width:100%;-webkit-appearance:none;appearance:none;overflow:hidden;border:none;height:var(--sc-progress-height);border-radius:var(--sc-progress-rounded);background-color:var(--sc-progress-bg);color:var(--sc-progress-color)}progress::-moz-progress-bar{background-color:var(--sc-progress-color);border-radius:var(--sc-progress-rounded)}progress:not([value])::-moz-progress-bar{background-color:var(--sc-progress-bg)}progress::-webkit-progress-bar{background-color:var(--sc-progress-bg)}progress::-webkit-progress-value{background-color:var(--sc-progress-color);border-radius:var(--sc-progress-rounded)}progress:indeterminate:after{background-color:var(--sc-progress-color);content:"";position:absolute;top:0;bottom:0;left:-40%;width:33.333333%;border-radius:var(--sc-progress-rounded);animation:progress-loading 3s infinite ease-in-out}@keyframes progress-loading{50%{left:107%}}:host([type=warning]){--sc-progress-color:var(--sc-warning)}:host([type=danger]){--sc-progress-color:var(--sc-danger)}:host([type=info]){--sc-progress-color:var(--sc-info)}:host([type=success]){--sc-progress-color:var(--sc-success)}:host([invert]){--sc-progress-bg:rgba(200, 200, 200, 0.1)}:host([type=default][invert]){--sc-progress-color:var(--sc-base)}slot[name=remaining]{font-weight:var(--sc-font-weight-base);font-size:.85em;margin-top:.5em}slot[name=remaining]::slotted(*){margin-left:auto}slot:not([name]){color:var(--sc-progress-color)}.slot-container{display:flex;justify-content:space-between;gap:.5em;margin-top:.15em}`
 ];
-__decorateClass$H([
+__decorateClass$G([
   e$7({ type: Number })
 ], Progress.prototype, "value", 2);
-__decorateClass$H([
+__decorateClass$G([
   e$7({ type: Number })
 ], Progress.prototype, "max", 2);
-__decorateClass$H([
+__decorateClass$G([
   e$7({ type: Boolean })
 ], Progress.prototype, "invert", 2);
-__decorateClass$H([
+__decorateClass$G([
   e$7({ type: String, reflect: true })
 ], Progress.prototype, "type", 2);
-__decorateClass$H([
+__decorateClass$G([
   e$7({ type: String, reflect: true })
 ], Progress.prototype, "size", 2);
-Progress = __decorateClass$H([
-  e$8(tagName$F)
+Progress = __decorateClass$G([
+  e$8(tagName$E)
 ], 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
@@ -6498,28 +6788,30 @@ const o = e$2(class extends i$2 {
     return x$1;
   }
 });
-var __defProp$G = Object.defineProperty;
-var __getOwnPropDesc$G = Object.getOwnPropertyDescriptor;
-var __decorateClass$G = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$G(target, key) : target;
+var __defProp$F = Object.defineProperty;
+var __getOwnPropDesc$F = Object.getOwnPropertyDescriptor;
+var __decorateClass$F = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$F(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$G(target, key, result);
+    __defProp$F(target, key, result);
   return result;
 };
-const tagName$E = "sonic-input";
+const tagName$D = "sonic-input";
 let Input = class extends Form(Form$2(Subscriber$1(s$3))) {
   constructor() {
     super(...arguments);
     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 +6824,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();
@@ -6568,12 +6865,19 @@ let Input = class extends Form(Form$2(Subscriber$1(s$3))) {
       clearTimeout(this.changeTimeoutId);
     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,89 +6885,96 @@ 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([
+__decorateClass$F([
   e$7({ type: String, reflect: true })
 ], Input.prototype, "size", 2);
-__decorateClass$G([
+__decorateClass$F([
   e$7({ type: String })
 ], Input.prototype, "list", 2);
-__decorateClass$G([
+__decorateClass$F([
   e$7({ type: String })
 ], Input.prototype, "placeholder", 2);
-__decorateClass$G([
+__decorateClass$F([
   e$7({ type: String })
 ], Input.prototype, "pattern", 2);
-__decorateClass$G([
+__decorateClass$F([
   e$7({ type: String })
 ], Input.prototype, "min", 2);
-__decorateClass$G([
+__decorateClass$F([
   e$7({ type: String })
 ], Input.prototype, "max", 2);
-__decorateClass$G([
+__decorateClass$F([
   e$7({ type: Boolean })
 ], Input.prototype, "readonly", 2);
-__decorateClass$G([
+__decorateClass$F([
   e$7({ type: Number })
 ], Input.prototype, "step", 2);
-__decorateClass$G([
+__decorateClass$F([
   e$7({ type: Number })
 ], Input.prototype, "minlength", 2);
-__decorateClass$G([
+__decorateClass$F([
   e$7({ type: Number })
 ], Input.prototype, "maxlength", 2);
-__decorateClass$G([
+__decorateClass$F([
   e$7({ type: String })
 ], Input.prototype, "src", 2);
-__decorateClass$G([
+__decorateClass$F([
   e$7({ type: Boolean, reflect: true })
 ], Input.prototype, "inlineContent", 2);
-__decorateClass$G([
+__decorateClass$F([
   e$7({ type: Boolean })
 ], Input.prototype, "disableInlineContentFocus", 2);
-__decorateClass$G([
-  o$8({ slot: "label" })
+__decorateClass$F([
+  e$7({ type: Boolean })
+], Input.prototype, "showPasswordToggle", 2);
+__decorateClass$F([
+  o$9({ slot: "label" })
 ], Input.prototype, "slotLabelNodes", 2);
-__decorateClass$G([
-  o$8({ slot: "description" })
+__decorateClass$F([
+  o$9({ slot: "description" })
 ], Input.prototype, "slotDescriptionNodes", 2);
-__decorateClass$G([
-  o$8({ slot: "suffix" })
+__decorateClass$F([
+  o$9({ slot: "suffix" })
 ], Input.prototype, "slotSuffixNodes", 2);
-__decorateClass$G([
-  o$8({ slot: "prefix" })
+__decorateClass$F([
+  o$9({ slot: "prefix" })
 ], Input.prototype, "slotPrefixNodes", 2);
-__decorateClass$G([
+__decorateClass$F([
   i$5("input")
 ], Input.prototype, "input", 2);
-__decorateClass$G([
+__decorateClass$F([
   t$3()
 ], Input.prototype, "hasDescription", 2);
-__decorateClass$G([
+__decorateClass$F([
   t$3()
 ], Input.prototype, "hasLabel", 2);
-__decorateClass$G([
+__decorateClass$F([
   t$3()
 ], Input.prototype, "hasSuffix", 2);
-__decorateClass$G([
+__decorateClass$F([
   t$3()
 ], Input.prototype, "hasPrefix", 2);
-Input = __decorateClass$G([
-  e$8(tagName$E)
+__decorateClass$F([
+  t$3()
+], Input.prototype, "isPassword", 2);
+Input = __decorateClass$F([
+  e$8(tagName$D)
 ], Input);
-var __defProp$F = Object.defineProperty;
-var __getOwnPropDesc$F = Object.getOwnPropertyDescriptor;
-var __decorateClass$F = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$F(target, key) : target;
+var __defProp$E = Object.defineProperty;
+var __getOwnPropDesc$E = Object.getOwnPropertyDescriptor;
+var __decorateClass$E = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$E(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$F(target, key, result);
+    __defProp$E(target, key, result);
   return result;
 };
-const tagName$D = "sonic-pop";
+const tagName$C = "sonic-pop";
 let Pop = class extends s$3 {
   constructor() {
     super(...arguments);
@@ -6734,7 +7045,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,49 +7122,49 @@ 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();
 Pop.styles = [
   i$4`:host{display:inline-block;vertical-align:middle}slot[name=content]{max-width:80vw;background-color:var(--sc-base);position:absolute;z-index:50;display:block;transform:translateY(1rem) scale(.95);opacity:0;pointer-events:none;transition-duration:.15s;transition-timing-function:ease;transition-property:all;border-radius:min(calc(var(--sc-btn-rounded) * 2),.4em)}slot[name=content].is-open:not(.is-empty){transform:translateY(0) scale(1);opacity:1;pointer-events:auto;transition-property:scale,opacity;transition-timing-function:cubic-bezier(.25,.25,.42,1.225)}:host([shadow=md]) slot[name=content],:host([shadow=true]) slot[name=content],:host([shadow]) slot[name=content]{box-shadow:var(--sc-shadow)}:host([shadow=sm]) slot[name=content]{box-shadow:var(--sc-shadow-sm)}:host([shadow=none]) slot[name=content]{box-shadow:none}:host([shadow=lg]) slot[name=content]{box-shadow:var(--sc-shadow-lg)}:host([inline]){vertical-align:baseline}`
 ];
-__decorateClass$F([
+__decorateClass$E([
   t$3()
 ], Pop.prototype, "open", 2);
-__decorateClass$F([
+__decorateClass$E([
   i$5("slot:not([name=content])")
 ], Pop.prototype, "popBtn", 2);
-__decorateClass$F([
+__decorateClass$E([
   i$5("slot[name=content]")
 ], Pop.prototype, "popContent", 2);
-__decorateClass$F([
+__decorateClass$E([
   e$7({ type: Boolean })
 ], Pop.prototype, "noToggle", 2);
-__decorateClass$F([
+__decorateClass$E([
   e$7({ type: Boolean, reflect: true })
 ], Pop.prototype, "inline", 2);
-__decorateClass$F([
+__decorateClass$E([
   e$7({ type: String, reflect: true })
 ], Pop.prototype, "shadow", 2);
-__decorateClass$F([
+__decorateClass$E([
   e$7({ type: String })
 ], Pop.prototype, "placement", 2);
-Pop = __decorateClass$F([
-  e$8(tagName$D)
+Pop = __decorateClass$E([
+  e$8(tagName$C)
 ], Pop);
-var __defProp$E = Object.defineProperty;
-var __getOwnPropDesc$E = Object.getOwnPropertyDescriptor;
-var __decorateClass$E = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$E(target, key) : target;
+var __defProp$D = Object.defineProperty;
+var __getOwnPropDesc$D = Object.getOwnPropertyDescriptor;
+var __decorateClass$D = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$D(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$E(target, key, result);
+    __defProp$D(target, key, result);
   return result;
 };
-const tagName$C = "sonic-menu-item";
+const tagName$B = "sonic-menu-item";
 let MenuItem = class extends Button {
   constructor() {
     super();
@@ -6875,18 +7185,18 @@ let MenuItem = class extends Button {
     super.connectedCallback();
   }
 };
-MenuItem = __decorateClass$E([
-  e$8(tagName$C)
+MenuItem = __decorateClass$D([
+  e$8(tagName$B)
 ], MenuItem);
-var __defProp$D = Object.defineProperty;
-var __getOwnPropDesc$D = Object.getOwnPropertyDescriptor;
-var __decorateClass$D = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$D(target, key) : target;
+var __defProp$C = Object.defineProperty;
+var __getOwnPropDesc$C = Object.getOwnPropertyDescriptor;
+var __decorateClass$C = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$C(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$D(target, key, result);
+    __defProp$C(target, key, result);
   return result;
 };
 let InputAutocomplete = class extends TemplatesContainer(Subscriber(s$3)) {
@@ -6940,51 +7250,51 @@ let InputAutocomplete = class extends TemplatesContainer(Subscriber(s$3)) {
 InputAutocomplete.styles = [
   i$4`:host{display:block}`
 ];
-__decorateClass$D([
+__decorateClass$C([
   e$7()
 ], InputAutocomplete.prototype, "name", 1);
-__decorateClass$D([
+__decorateClass$C([
   e$7()
 ], InputAutocomplete.prototype, "forceAutoFill", 2);
-__decorateClass$D([
+__decorateClass$C([
   e$7()
 ], InputAutocomplete.prototype, "description", 1);
-__decorateClass$D([
+__decorateClass$C([
   e$7()
 ], InputAutocomplete.prototype, "label", 1);
-__decorateClass$D([
+__decorateClass$C([
   e$7({ type: String })
 ], InputAutocomplete.prototype, "placeholder", 2);
-__decorateClass$D([
+__decorateClass$C([
   e$7()
 ], InputAutocomplete.prototype, "filteredFields", 2);
-__decorateClass$D([
+__decorateClass$C([
   e$7({ type: Boolean })
 ], InputAutocomplete.prototype, "readonly", 2);
-__decorateClass$D([
+__decorateClass$C([
   e$7({ type: String })
 ], InputAutocomplete.prototype, "dataProviderExpression", 2);
-__decorateClass$D([
+__decorateClass$C([
   e$7({ type: String })
 ], InputAutocomplete.prototype, "key", 2);
-__decorateClass$D([
+__decorateClass$C([
   e$7({ type: String })
 ], InputAutocomplete.prototype, "value", 2);
-InputAutocomplete = __decorateClass$D([
+InputAutocomplete = __decorateClass$C([
   e$8("sonic-input-autocomplete")
 ], InputAutocomplete);
-var __defProp$C = Object.defineProperty;
-var __getOwnPropDesc$C = Object.getOwnPropertyDescriptor;
-var __decorateClass$C = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$C(target, key) : target;
+var __defProp$B = Object.defineProperty;
+var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
+var __decorateClass$B = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$B(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$C(target, key, result);
+    __defProp$B(target, key, result);
   return result;
 };
-const tagName$B = "sonic-password-helper";
+const tagName$A = "sonic-password-helper";
 let SonicComponent$1 = class extends Subscriber(s$3) {
   constructor() {
     super(...arguments);
@@ -7036,63 +7346,63 @@ let SonicComponent$1 = class extends Subscriber(s$3) {
     return y`<div>${this.wording_password_helper_decription}</div><div>${this.getIcon(this.hasEnoughChars)} ${this.wording_password_helper_min_length}</div><div>${this.getIcon(this.hasMinuscule)} ${this.wording_password_helper_lower_case}</div><div>${this.getIcon(this.hasMajuscule)} ${this.wording_password_helper_upper_case}</div><div>${this.getIcon(this.hasNumber)} ${this.wording_password_helper_number}</div><div>${this.getIcon(this.hasSpecialChar)} ${this.wording_password_helper_special_char}</div>`;
   }
 };
-__decorateClass$C([
+__decorateClass$B([
   e$7()
 ], SonicComponent$1.prototype, "name", 2);
-__decorateClass$C([
+__decorateClass$B([
   e$7()
 ], SonicComponent$1.prototype, "minChars", 2);
-__decorateClass$C([
+__decorateClass$B([
   t$3()
 ], SonicComponent$1.prototype, "hasNoChar", 2);
-__decorateClass$C([
+__decorateClass$B([
   t$3()
 ], SonicComponent$1.prototype, "hasEnoughChars", 2);
-__decorateClass$C([
+__decorateClass$B([
   t$3()
 ], SonicComponent$1.prototype, "hasMinuscule", 2);
-__decorateClass$C([
+__decorateClass$B([
   t$3()
 ], SonicComponent$1.prototype, "hasMajuscule", 2);
-__decorateClass$C([
+__decorateClass$B([
   t$3()
 ], SonicComponent$1.prototype, "hasNumber", 2);
-__decorateClass$C([
+__decorateClass$B([
   t$3()
 ], SonicComponent$1.prototype, "hasSpecialChar", 2);
-__decorateClass$C([
+__decorateClass$B([
   e$7()
 ], SonicComponent$1.prototype, "wording_password_helper_decription", 2);
-__decorateClass$C([
+__decorateClass$B([
   e$7()
 ], SonicComponent$1.prototype, "wording_password_helper_min_length", 2);
-__decorateClass$C([
+__decorateClass$B([
   e$7()
 ], SonicComponent$1.prototype, "wording_password_helper_lower_case", 2);
-__decorateClass$C([
+__decorateClass$B([
   e$7()
 ], SonicComponent$1.prototype, "wording_password_helper_upper_case", 2);
-__decorateClass$C([
+__decorateClass$B([
   e$7()
 ], SonicComponent$1.prototype, "wording_password_helper_number", 2);
-__decorateClass$C([
+__decorateClass$B([
   e$7()
 ], SonicComponent$1.prototype, "wording_password_helper_special_char", 2);
-SonicComponent$1 = __decorateClass$C([
-  e$8(tagName$B)
+SonicComponent$1 = __decorateClass$B([
+  e$8(tagName$A)
 ], SonicComponent$1);
-var __defProp$B = Object.defineProperty;
-var __getOwnPropDesc$B = Object.getOwnPropertyDescriptor;
-var __decorateClass$B = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$B(target, key) : target;
+var __defProp$A = Object.defineProperty;
+var __getOwnPropDesc$A = Object.getOwnPropertyDescriptor;
+var __decorateClass$A = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$A(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$B(target, key, result);
+    __defProp$A(target, key, result);
   return result;
 };
-const tagName$A = "sonic-same-value-helper";
+const tagName$z = "sonic-same-value-helper";
 let SonicComponent = class extends Subscriber(s$3) {
   constructor() {
     super(...arguments);
@@ -7129,48 +7439,51 @@ 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([
+__decorateClass$A([
   e$7()
 ], SonicComponent.prototype, "name", 2);
-__decorateClass$B([
+__decorateClass$A([
   e$7()
 ], SonicComponent.prototype, "sameValueAs", 2);
-__decorateClass$B([
+__decorateClass$A([
   e$7()
 ], SonicComponent.prototype, "descriptionWhenEqual", 2);
-__decorateClass$B([
+__decorateClass$A([
   e$7()
 ], SonicComponent.prototype, "descriptionWhenNotEqual", 2);
-__decorateClass$B([
+__decorateClass$A([
   t$3()
 ], SonicComponent.prototype, "areEqual", 2);
-__decorateClass$B([
+__decorateClass$A([
   t$3()
 ], SonicComponent.prototype, "hasNoChar", 2);
-SonicComponent = __decorateClass$B([
-  e$8(tagName$A)
+SonicComponent = __decorateClass$A([
+  e$8(tagName$z)
 ], SonicComponent);
-var __defProp$A = Object.defineProperty;
-var __getOwnPropDesc$A = Object.getOwnPropertyDescriptor;
-var __decorateClass$A = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$A(target, key) : target;
+var __defProp$z = Object.defineProperty;
+var __getOwnPropDesc$z = Object.getOwnPropertyDescriptor;
+var __decorateClass$z = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$z(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$A(target, key, result);
+    __defProp$z(target, key, result);
   return result;
 };
-const tagName$z = "sonic-checkbox";
-let Checkbox = class extends Form$1(Form(Form$2(Subscriber$1(s$3)))) {
+const tagName$y = "sonic-checkbox";
+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,49 +7502,52 @@ 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([
+__decorateClass$z([
   e$7({ type: Boolean, reflect: true })
 ], Checkbox.prototype, "touched", 2);
-__decorateClass$A([
+__decorateClass$z([
   e$7({ type: String })
 ], Checkbox.prototype, "iconName", 2);
-__decorateClass$A([
+__decorateClass$z([
   e$7({ type: String })
 ], Checkbox.prototype, "indeterminateIconName", 2);
-__decorateClass$A([
+__decorateClass$z([
+  e$7({ type: Boolean })
+], Checkbox.prototype, "showAsIndeterminate", 2);
+__decorateClass$z([
   e$7({ type: Boolean })
 ], Checkbox.prototype, "hasDescription", 2);
-__decorateClass$A([
+__decorateClass$z([
   e$7({ type: Boolean })
 ], Checkbox.prototype, "hasLabel", 2);
-__decorateClass$A([
-  o$8()
+__decorateClass$z([
+  o$9()
 ], Checkbox.prototype, "slotLabelNodes", 2);
-__decorateClass$A([
-  o$8({ slot: "description" })
+__decorateClass$z([
+  o$9({ slot: "description" })
 ], Checkbox.prototype, "slotDescriptionNodes", 2);
-Checkbox = __decorateClass$A([
-  e$8(tagName$z)
+Checkbox = __decorateClass$z([
+  e$8(tagName$y)
 ], Checkbox);
-var __defProp$z = Object.defineProperty;
-var __getOwnPropDesc$z = Object.getOwnPropertyDescriptor;
-var __decorateClass$z = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$z(target, key) : target;
+var __defProp$y = Object.defineProperty;
+var __getOwnPropDesc$y = Object.getOwnPropertyDescriptor;
+var __decorateClass$y = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$y(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$z(target, key, result);
+    __defProp$y(target, key, result);
   return result;
 };
-const tagName$y = "sonic-radio";
+const tagName$x = "sonic-radio";
 let Radio = class extends Checkbox {
   constructor() {
     super();
@@ -7246,21 +7562,21 @@ Radio.styles = [
   Checkbox.styles,
   i$4`:host input{border-radius:50%}:host sonic-icon{border-radius:50%;overflow:hidden;background-color:var(--sc-primary-content);line-height:0;display:block;font-size:1em;height:.6em;width:.6em}`
 ];
-Radio = __decorateClass$z([
-  e$8(tagName$y)
+Radio = __decorateClass$y([
+  e$8(tagName$x)
 ], Radio);
-var __defProp$y = Object.defineProperty;
-var __getOwnPropDesc$y = Object.getOwnPropertyDescriptor;
-var __decorateClass$y = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$y(target, key) : target;
+var __defProp$x = Object.defineProperty;
+var __getOwnPropDesc$x = Object.getOwnPropertyDescriptor;
+var __decorateClass$x = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$x(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$y(target, key, result);
+    __defProp$x(target, key, result);
   return result;
 };
-const tagName$x = "sonic-select";
+const tagName$w = "sonic-select";
 let Select = class extends Form$2(Subscriber$1(s$3)) {
   constructor() {
     super(...arguments);
@@ -7374,14 +7690,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 = [
@@ -7391,75 +7707,75 @@ Select.styles = [
   description,
   i$4`.form-element{appearance:none}:host([disabled]) sonic-icon{opacity:0}@supports selector(:has(*)){:host(:not([disabled])) .form-element:not(:has(option:only-child)){padding-right:max(1.275em,calc(1.5 * var(--sc-input-px)))}}@supports not selector(:has(*)){:host(:not([disabled])) .form-element{padding-right:max(1.275em,calc(1.5 * var(--sc-input-px)))}}.form-select-wrapper{position:relative;width:100%}sonic-icon{position:absolute;right:calc(.8 * var(--sc-input-px));top:50%;pointer-events:none;transform:translateY(-50%);color:var(--sc-input-c)}option{padding:.1rem var(--sc-input-px);color:var(--sc-base-content);background:var(--sc-base)}select[multiple] option{background:0 0;padding:0}`
 ];
-__decorateClass$y([
+__decorateClass$x([
   e$7({ type: String })
 ], Select.prototype, "valueKey", 2);
-__decorateClass$y([
+__decorateClass$x([
   e$7({ type: String })
 ], Select.prototype, "wordingKey", 2);
-__decorateClass$y([
+__decorateClass$x([
   e$7({ type: Boolean })
 ], Select.prototype, "multiple", 2);
-__decorateClass$y([
+__decorateClass$x([
   e$7({ type: String, reflect: true })
 ], Select.prototype, "size", 2);
-__decorateClass$y([
+__decorateClass$x([
   e$7({ type: Number })
 ], Select.prototype, "selectSize", 2);
-__decorateClass$y([
+__decorateClass$x([
   e$7({ type: Array })
 ], Select.prototype, "options", 1);
-__decorateClass$y([
+__decorateClass$x([
   e$7({ reflect: true })
 ], Select.prototype, "value", 1);
-__decorateClass$y([
+__decorateClass$x([
   e$7({ type: Boolean })
 ], Select.prototype, "forceAutoFill", 2);
-__decorateClass$y([
+__decorateClass$x([
   e$7()
 ], Select.prototype, "description", 1);
-__decorateClass$y([
+__decorateClass$x([
   e$7()
 ], Select.prototype, "label", 1);
-__decorateClass$y([
-  o$8({ slot: "label" })
+__decorateClass$x([
+  o$9({ slot: "label" })
 ], Select.prototype, "slotLabelNodes", 2);
-__decorateClass$y([
-  o$8({ slot: "description" })
+__decorateClass$x([
+  o$9({ slot: "description" })
 ], Select.prototype, "slotDescriptionNodes", 2);
-__decorateClass$y([
-  o$8({ slot: "suffix" })
+__decorateClass$x([
+  o$9({ slot: "suffix" })
 ], Select.prototype, "slotSuffixNodes", 2);
-__decorateClass$y([
-  o$8({ slot: "prefix" })
+__decorateClass$x([
+  o$9({ slot: "prefix" })
 ], Select.prototype, "slotPrefixNodes", 2);
-__decorateClass$y([
+__decorateClass$x([
   t$3()
 ], Select.prototype, "hasDescription", 2);
-__decorateClass$y([
+__decorateClass$x([
   t$3()
 ], Select.prototype, "hasLabel", 2);
-__decorateClass$y([
+__decorateClass$x([
   t$3()
 ], Select.prototype, "hasSuffix", 2);
-__decorateClass$y([
+__decorateClass$x([
   t$3()
 ], Select.prototype, "hasPrefix", 2);
-Select = __decorateClass$y([
-  e$8(tagName$x)
+Select = __decorateClass$x([
+  e$8(tagName$w)
 ], Select);
-var __defProp$x = Object.defineProperty;
-var __getOwnPropDesc$x = Object.getOwnPropertyDescriptor;
-var __decorateClass$x = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$x(target, key) : target;
+var __defProp$w = Object.defineProperty;
+var __getOwnPropDesc$w = Object.getOwnPropertyDescriptor;
+var __decorateClass$w = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$w(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$x(target, key, result);
+    __defProp$w(target, key, result);
   return result;
 };
-const tagName$w = "sonic-textarea";
+const tagName$v = "sonic-textarea";
 let Textarea = class extends Form(Form$2(Subscriber$1(s$3))) {
   constructor() {
     super(...arguments);
@@ -7493,8 +7809,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 = [
@@ -7505,54 +7821,54 @@ Textarea.styles = [
   customScroll,
   i$4`textarea{font-size:inherit}`
 ];
-__decorateClass$x([
+__decorateClass$w([
   e$7({ type: String })
 ], Textarea.prototype, "size", 2);
-__decorateClass$x([
+__decorateClass$w([
   e$7({ type: Number })
 ], Textarea.prototype, "rows", 2);
-__decorateClass$x([
+__decorateClass$w([
   e$7({ type: Number })
 ], Textarea.prototype, "cols", 2);
-__decorateClass$x([
+__decorateClass$w([
   e$7({ type: Number })
 ], Textarea.prototype, "maxlength", 2);
-__decorateClass$x([
+__decorateClass$w([
   e$7({ type: Number })
 ], Textarea.prototype, "minlength", 2);
-__decorateClass$x([
+__decorateClass$w([
   e$7({ type: String })
 ], Textarea.prototype, "wrap", 2);
-__decorateClass$x([
+__decorateClass$w([
   e$7({ type: Boolean })
 ], Textarea.prototype, "readonly", 2);
-__decorateClass$x([
+__decorateClass$w([
   e$7({ type: String })
 ], Textarea.prototype, "placeholder", 2);
-__decorateClass$x([
-  o$8({ slot: "label" })
+__decorateClass$w([
+  o$9({ slot: "label" })
 ], Textarea.prototype, "slotLabelNodes", 2);
-__decorateClass$x([
-  o$8({ slot: "description" })
+__decorateClass$w([
+  o$9({ slot: "description" })
 ], Textarea.prototype, "slotDescriptionNodes", 2);
-__decorateClass$x([
+__decorateClass$w([
   t$3()
 ], Textarea.prototype, "hasDescription", 2);
-__decorateClass$x([
+__decorateClass$w([
   t$3()
 ], Textarea.prototype, "hasLabel", 2);
-Textarea = __decorateClass$x([
-  e$8(tagName$w)
+Textarea = __decorateClass$w([
+  e$8(tagName$v)
 ], Textarea);
-var __defProp$w = Object.defineProperty;
-var __getOwnPropDesc$w = Object.getOwnPropertyDescriptor;
-var __decorateClass$w = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$w(target, key) : target;
+var __defProp$v = Object.defineProperty;
+var __getOwnPropDesc$v = Object.getOwnPropertyDescriptor;
+var __decorateClass$v = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$v(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$w(target, key, result);
+    __defProp$v(target, key, result);
   return result;
 };
 let LegendDescription = class extends s$3 {
@@ -7563,21 +7879,21 @@ let LegendDescription = class extends s$3 {
 LegendDescription.styles = [
   i$4`:host{color:var(--sc-neutral-500);font-size:1.25rem;line-height:1.2;display:block;font-weight:var(--sc-font-weight-base);font-style:var(--sc-font-style-base);margin-top:.25em}`
 ];
-LegendDescription = __decorateClass$w([
+LegendDescription = __decorateClass$v([
   e$8("sonic-legend-description")
 ], LegendDescription);
-var __defProp$v = Object.defineProperty;
-var __getOwnPropDesc$v = Object.getOwnPropertyDescriptor;
-var __decorateClass$v = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$v(target, key) : target;
+var __defProp$u = Object.defineProperty;
+var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
+var __decorateClass$u = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$u(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$v(target, key, result);
+    __defProp$u(target, key, result);
   return result;
 };
-const tagName$v = "sonic-legend";
+const tagName$u = "sonic-legend";
 let Legend = class extends s$3 {
   constructor() {
     super(...arguments);
@@ -7602,45 +7918,45 @@ 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 = [
   i$4`:host{--sc-legend-font-size:1.5rem;--sc-legend-font-weight:var(--sc-font-weight-base);--sc-legend-font-style:var(--sc-headings-font-style);--sc-legend-family:var(--sc-headings-font-family);--sc-legend-line-height:var(--sc-headings-line-height);--sc-legend-color:var(--sc-base-content);display:flex;width:100%}legend{font-size:var(--sc-legend-font-size);font-weight:var(--sc-legend-font-weight);font-style:var(--sc-legend-font-style);font-family:var(--sc-legend-font-family);line-height:var(--sc-legend-line-height);color:var(--sc-legend-color);padding:0;display:flex;width:100%;align-items:flex-start;gap:.5em}slot[name=suffix]{display:block;margin-left:auto;flex-shrink:0}.legend-content{flex-grow:1}`
 ];
-__decorateClass$v([
+__decorateClass$u([
   e$7({ type: Boolean })
 ], Legend.prototype, "forceAutoFill", 2);
-__decorateClass$v([
+__decorateClass$u([
   e$7()
 ], Legend.prototype, "description", 1);
-__decorateClass$v([
+__decorateClass$u([
   e$7()
 ], Legend.prototype, "label", 1);
-__decorateClass$v([
+__decorateClass$u([
   e$7({ type: String })
 ], Legend.prototype, "iconName", 2);
-__decorateClass$v([
+__decorateClass$u([
   e$7({ type: String })
 ], Legend.prototype, "iconLibrary", 2);
-__decorateClass$v([
+__decorateClass$u([
   e$7({ type: String })
 ], Legend.prototype, "iconPrefix", 2);
-Legend = __decorateClass$v([
-  e$8(tagName$v)
+Legend = __decorateClass$u([
+  e$8(tagName$u)
 ], Legend);
-var __defProp$u = Object.defineProperty;
-var __getOwnPropDesc$u = Object.getOwnPropertyDescriptor;
-var __decorateClass$u = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$u(target, key) : target;
+var __defProp$t = Object.defineProperty;
+var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
+var __decorateClass$t = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$t(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$u(target, key, result);
+    __defProp$t(target, key, result);
   return result;
 };
-const tagName$u = "sonic-fieldset";
+const tagName$t = "sonic-fieldset";
 let Fieldset = class extends Subscriber$1(s$3) {
   constructor() {
     super(...arguments);
@@ -7654,32 +7970,32 @@ let Fieldset = class extends Subscriber$1(s$3) {
 Fieldset.styles = [
   i$4`:host{--sc-fieldset-mt:0;--sc-fieldset-mb:1rem;--sc-fieldset-border-color:var(--sc-border-color);--sc-fieldset-border-width:var(--sc-form-border-width);margin-top:var(--sc-fieldset-mt);margin-bottom:var(--sc-fieldset-mb);display:block;border:var(--sc-fieldset-border-width) solid var(--sc-fieldset-border-color)!important;padding:1.8rem 1.25rem;border-radius:var(--sc-rounded-lg)}fieldset{all:unset;display:contents}:host([variant=ghost]),:host([variant=shadow]){--sc-fieldset-border-color:transparent}:host([variant=shadow]){--sc-fieldset-border-color:transparent;box-shadow:var(--sc-shadow-lg)}::slotted(sonic-legend),sonic-legend{margin-bottom:1.5rem;display:block}::slotted(sonic-legend:last-child){margin-bottom:0}`
 ];
-__decorateClass$u([
+__decorateClass$t([
   e$7({ type: Boolean, reflect: true })
 ], Fieldset.prototype, "disabled", 2);
-__decorateClass$u([
+__decorateClass$t([
   e$7({ type: String })
 ], Fieldset.prototype, "form", 2);
-__decorateClass$u([
+__decorateClass$t([
   e$7({ type: String })
 ], Fieldset.prototype, "label", 2);
-__decorateClass$u([
+__decorateClass$t([
   e$7({ type: String })
 ], Fieldset.prototype, "description", 2);
-__decorateClass$u([
+__decorateClass$t([
   e$7({ type: String })
 ], Fieldset.prototype, "iconName", 2);
-__decorateClass$u([
+__decorateClass$t([
   e$7({ type: String })
 ], Fieldset.prototype, "iconLibrary", 2);
-__decorateClass$u([
+__decorateClass$t([
   e$7({ type: String })
 ], Fieldset.prototype, "iconPrefix", 2);
-__decorateClass$u([
+__decorateClass$t([
   e$7({ type: String, reflect: true })
 ], Fieldset.prototype, "variant", 2);
-Fieldset = __decorateClass$u([
-  e$8(tagName$u)
+Fieldset = __decorateClass$t([
+  e$8(tagName$t)
 ], Fieldset);
 class s {
   constructor(s2, { target: t2, config: i2, callback: h2, skipInitial: e2 }) {
@@ -7711,18 +8027,18 @@ class s {
     this.u.disconnect();
   }
 }
-var __defProp$t = Object.defineProperty;
-var __getOwnPropDesc$t = Object.getOwnPropertyDescriptor;
-var __decorateClass$t = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$t(target, key) : target;
+var __defProp$s = Object.defineProperty;
+var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
+var __decorateClass$s = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$s(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$t(target, key, result);
+    __defProp$s(target, key, result);
   return result;
 };
-const tagName$t = "sonic-form-layout";
+const tagName$s = "sonic-form-layout";
 let FormLayout = class extends Subscriber$1(s$3) {
   constructor() {
     super(...arguments);
@@ -7746,27 +8062,27 @@ let FormLayout = class extends Subscriber$1(s$3) {
 FormLayout.styles = [
   i$4`:host{display:block}div{display:grid;grid-gap:1.5rem;align-items:flex-start}.cq--md{grid-gap:1.75rem;grid-template-columns:repeat(2,minmax(0,1fr))}.one-form-element{grid-template-columns:1fr}::slotted(:not(sonic-input):not(sonic-select):not(sonic-input-autocomplete):not(.form-item-container)){grid-column:1/-1}::slotted(sonic-divider){--sc-divider-my:0}`
 ];
-__decorateClass$t([
+__decorateClass$s([
   l$6({ flatten: true })
 ], FormLayout.prototype, "slottedElements", 2);
-__decorateClass$t([
+__decorateClass$s([
   e$7({ type: Boolean })
 ], FormLayout.prototype, "oneFormElement", 2);
-FormLayout = __decorateClass$t([
-  e$8(tagName$t)
+FormLayout = __decorateClass$s([
+  e$8(tagName$s)
 ], FormLayout);
-var __defProp$s = Object.defineProperty;
-var __getOwnPropDesc$s = Object.getOwnPropertyDescriptor;
-var __decorateClass$s = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$s(target, key) : target;
+var __defProp$r = Object.defineProperty;
+var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
+var __decorateClass$r = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$r(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$s(target, key, result);
+    __defProp$r(target, key, result);
   return result;
 };
-const tagName$s = "sonic-form-actions";
+const tagName$r = "sonic-form-actions";
 let FormActions = class extends s$3 {
   constructor() {
     super(...arguments);
@@ -7784,27 +8100,27 @@ let FormActions = class extends s$3 {
 FormActions.styles = [
   i$4`:host{display:block}slot{display:flex;flex-wrap:wrap;gap:.3rem}`
 ];
-__decorateClass$s([
+__decorateClass$r([
   e$7({ type: String })
 ], FormActions.prototype, "direction", 2);
-__decorateClass$s([
+__decorateClass$r([
   e$7({ type: String })
 ], FormActions.prototype, "justify", 2);
-FormActions = __decorateClass$s([
-  e$8(tagName$s)
+FormActions = __decorateClass$r([
+  e$8(tagName$r)
 ], FormActions);
-var __defProp$r = Object.defineProperty;
-var __getOwnPropDesc$r = Object.getOwnPropertyDescriptor;
-var __decorateClass$r = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$r(target, key) : target;
+var __defProp$q = Object.defineProperty;
+var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
+var __decorateClass$q = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$q(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$r(target, key, result);
+    __defProp$q(target, key, result);
   return result;
 };
-const tagName$r = "sonic-group";
+const tagName$q = "sonic-group";
 let Group = class extends s$3 {
   constructor() {
     super(...arguments);
@@ -7850,7 +8166,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 = [
@@ -7859,42 +8175,42 @@ Group.styles = [
   description,
   i$4`:host{display:inline-block;vertical-align:middle}.main-slot{width:100%;display:flex}.hidden{display:none}::slotted(sonic-button),::slotted(sonic-input),::slotted(sonic-select){flex-grow:1}`
 ];
-__decorateClass$r([
+__decorateClass$q([
   e$7({ type: String })
 ], Group.prototype, "alignItems", 2);
-__decorateClass$r([
+__decorateClass$q([
   e$7({ type: String })
 ], Group.prototype, "label", 2);
-__decorateClass$r([
+__decorateClass$q([
   e$7({ type: String })
 ], Group.prototype, "description", 2);
-__decorateClass$r([
-  o$8({ slot: "label" })
+__decorateClass$q([
+  o$9({ slot: "label" })
 ], Group.prototype, "slotLabelNodes", 2);
-__decorateClass$r([
-  o$8({ slot: "description" })
+__decorateClass$q([
+  o$9({ slot: "description" })
 ], Group.prototype, "slotDescriptionNodes", 2);
-__decorateClass$r([
+__decorateClass$q([
   t$3()
 ], Group.prototype, "hasDescription", 2);
-__decorateClass$r([
+__decorateClass$q([
   t$3()
 ], Group.prototype, "hasLabel", 2);
-Group = __decorateClass$r([
-  e$8(tagName$r)
+Group = __decorateClass$q([
+  e$8(tagName$q)
 ], Group);
-var __defProp$q = Object.defineProperty;
-var __getOwnPropDesc$q = Object.getOwnPropertyDescriptor;
-var __decorateClass$q = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$q(target, key) : target;
+var __defProp$p = Object.defineProperty;
+var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
+var __decorateClass$p = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$p(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$q(target, key, result);
+    __defProp$p(target, key, result);
   return result;
 };
-const tagName$q = "sonic-image";
+const tagName$p = "sonic-image";
 let Image = class extends s$3 {
   constructor() {
     super(...arguments);
@@ -7907,6 +8223,17 @@ let Image = class extends s$3 {
     this.imageRendering = "auto";
     this.cover = false;
   }
+  firstUpdated() {
+    var _a2;
+    if (this.transition) {
+      const img = (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector("img");
+      if (!img)
+        return;
+      img.onload = function() {
+        img.classList.add("loaded");
+      };
+    }
+  }
   render() {
     const imgStyles = {
       aspectRatio: this.cover ? "auto" : this.ratio,
@@ -7917,108 +8244,38 @@ let Image = class extends s$3 {
   }
 };
 Image.styles = [
-  i$4`:host{--sc-img-radius:0;--sc-img-bg:var(--sc-placeholder-bg);border-radius:var(--sc-img-radius);display:block;width:100%;background:var(--sc-img-bg)}img{width:100%;vertical-align:middle;object-fit:cover}img[src=""]{visibility:hidden}:host([rounded]){--sc-img-radius:var(--sc-rounded);overflow:hidden}:host([rounded=sm]){--sc-img-radius:var(--sc-rounded-sm)}:host([rounded=md]){--sc-img-radius:var(--sc-rounded-md)}:host([rounded=lg]){--sc-img-radius:var(--sc-rounded-lg)}:host([rounded=xl]){--sc-img-radius:var(--sc-rounded-xl)}:host([rounded=full]){--sc-img-radius:50%!important}:host([rounded=none]){--sc-img-radius:0!important}:host([cover]),:host([cover]) img,:host([cover])>div{position:absolute!important;left:0!important;top:0!important;right:0!important;bottom:0!important;height:100%!important;width:100%!important}`
+  i$4`:host{--sc-img-radius:0;--sc-img-bg:var(--sc-placeholder-bg);border-radius:var(--sc-img-radius);display:block;width:100%;background:var(--sc-img-bg)}img{width:100%;vertical-align:middle;object-fit:cover}img[src=""]{visibility:hidden}:host([rounded]){--sc-img-radius:var(--sc-rounded);overflow:hidden}:host([rounded=sm]){--sc-img-radius:var(--sc-rounded-sm)}:host([rounded=md]){--sc-img-radius:var(--sc-rounded-md)}:host([rounded=lg]){--sc-img-radius:var(--sc-rounded-lg)}:host([rounded=xl]){--sc-img-radius:var(--sc-rounded-xl)}:host([rounded=full]){--sc-img-radius:50%!important}:host([rounded=none]){--sc-img-radius:0!important}:host([cover]),:host([cover]) img,:host([cover])>div{position:absolute!important;left:0!important;top:0!important;right:0!important;bottom:0!important;height:100%!important;width:100%!important}:host([transition]) img{opacity:0;transition:.25s}:host([transition=fade-scale-out]) img{scale:1.08;transition:opacity .3s linear,scale .3s cubic-bezier(.16,1,.3,1)}:host([transition]) img.loaded{opacity:1;scale:1}`
 ];
-__decorateClass$q([
+__decorateClass$p([
   e$7({ type: String })
 ], Image.prototype, "rounded", 2);
-__decorateClass$q([
+__decorateClass$p([
   e$7({ type: String })
 ], Image.prototype, "src", 2);
-__decorateClass$q([
+__decorateClass$p([
   e$7({ type: String })
 ], Image.prototype, "alt", 2);
-__decorateClass$q([
+__decorateClass$p([
   e$7({ type: String })
 ], Image.prototype, "loading", 2);
-__decorateClass$q([
+__decorateClass$p([
+  e$7({ type: String, reflect: true })
+], Image.prototype, "transition", 2);
+__decorateClass$p([
   e$7({ type: String })
 ], Image.prototype, "ratio", 2);
-__decorateClass$q([
+__decorateClass$p([
   e$7({ type: String })
 ], Image.prototype, "objectPosition", 2);
-__decorateClass$q([
+__decorateClass$p([
   e$7({ type: String })
 ], Image.prototype, "imageRendering", 2);
-__decorateClass$q([
+__decorateClass$p([
   e$7({ type: Boolean, reflect: true })
 ], Image.prototype, "cover", 2);
-Image = __decorateClass$q([
-  e$8(tagName$q)
-], Image);
-var __defProp$p = Object.defineProperty;
-var __getOwnPropDesc$p = Object.getOwnPropertyDescriptor;
-var __decorateClass$p = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$p(target, key) : target;
-  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
-    if (decorator = decorators[i2])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp$p(target, key, result);
-  return result;
-};
-const tagName$p = "sonic-event-taxonomy";
-let Taxonomy = class extends s$3 {
-  constructor() {
-    super(...arguments);
-    this.icon = { name: "" };
-    this.taxonomy = [];
-    this.separator = ",&nbsp;";
-    this.key = "";
-    this.displayAll = false;
-    this.type = "default";
-    this.variant = "default";
-    this.size = "md";
-  }
-  render() {
-    if (!Array.isArray(this.taxonomy))
-      return b$1;
-    const key = this.key + "_display";
-    const taxo = this.displayAll ? this.taxonomy : this.taxonomy.filter(
-      (elt) => elt != null && (elt[key] === true || elt[key] == "1" || !Object.hasOwnProperty.call(elt, key))
-    );
-    if (taxo.length === 0) {
-      this.style.display = "none";
-      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(
-      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>`;
-      }
-    )}</span></sonic-badge>`;
-  }
-};
-Taxonomy.styles = i$4`:host .sonic-taxonomy-separator:last-child{display:none}.taxonomy-list{display:flex;flex-wrap:wrap}`;
-__decorateClass$p([
-  e$7({ type: Object })
-], Taxonomy.prototype, "icon", 2);
-__decorateClass$p([
-  e$7({ type: Array })
-], Taxonomy.prototype, "taxonomy", 2);
-__decorateClass$p([
-  e$7({ type: String })
-], Taxonomy.prototype, "separator", 2);
-__decorateClass$p([
-  e$7({ type: String })
-], Taxonomy.prototype, "key", 2);
-__decorateClass$p([
-  e$7({ type: Boolean })
-], Taxonomy.prototype, "displayAll", 2);
-__decorateClass$p([
-  e$7({ type: String, reflect: true })
-], Taxonomy.prototype, "type", 2);
-__decorateClass$p([
-  e$7({ type: String, reflect: true })
-], Taxonomy.prototype, "variant", 2);
-__decorateClass$p([
-  e$7({ type: String, reflect: true })
-], Taxonomy.prototype, "size", 2);
-Taxonomy = __decorateClass$p([
+Image = __decorateClass$p([
   e$8(tagName$p)
-], Taxonomy);
+], Image);
 var __defProp$o = Object.defineProperty;
 var __getOwnPropDesc$o = Object.getOwnPropertyDescriptor;
 var __decorateClass$o = (decorators, target, key, kind) => {
@@ -8276,7 +8533,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 +8559,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 +8626,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 +8689,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 +8708,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 +8731,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 +8742,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 +8760,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 +8786,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 +8833,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 +9025,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 +9092,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 = [