@supersoniks/concorde 1.0.3 → 1.0.7

package/dist/concorde.bundle.js

@@ -281,7 +281,7 @@ var t$2;
 const i$4 = globalThis.trustedTypes, s$2 = i$4 ? i$4.createPolicy("lit-html", { createHTML: (t2) => t2 }) : void 0, e$5 = `lit$${(Math.random() + "").slice(9)}$`, o$4 = "?" + e$5, n$4 = `<${o$4}>`, l$2 = document, h$2 = (t2 = "") => l$2.createComment(t2), r$3 = (t2) => t2 === null || typeof t2 != "object" && typeof t2 != "function", d$1 = Array.isArray, u$2 = (t2) => {
   var i2;
   return d$1(t2) || typeof ((i2 = t2) === null || i2 === void 0 ? void 0 : i2[Symbol.iterator]) == "function";
-}, c$2 = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, v = /-->/g, a$2 = />/g, f$1 = />|[ 	\n\r](?:([^\s"'>=/]+)([ 	\n\r]*=[ 	\n\r]*(?:[^ 	\n\r"'`<>=]|("|')|))|$)/g, _ = /'/g, m$1 = /"/g, g$1 = /^(?:script|style|textarea)$/i, $$1 = (t2) => (i2, ...s2) => ({ _$litType$: t2, strings: i2, values: s2 }), p = $$1(1), b$1 = Symbol.for("lit-noChange"), T = Symbol.for("lit-nothing"), x$1 = new WeakMap(), w$1 = (t2, i2, s2) => {
+}, c$2 = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, v = /-->/g, a$2 = />/g, f$2 = />|[ 	\n\r](?:([^\s"'>=/]+)([ 	\n\r]*=[ 	\n\r]*(?:[^ 	\n\r"'`<>=]|("|')|))|$)/g, _ = /'/g, m$1 = /"/g, g$1 = /^(?:script|style|textarea)$/i, $$1 = (t2) => (i2, ...s2) => ({ _$litType$: t2, strings: i2, values: s2 }), p$1 = $$1(1), b$1 = Symbol.for("lit-noChange"), T = Symbol.for("lit-nothing"), x$1 = new WeakMap(), w$1 = (t2, i2, s2) => {
   var e2, o2;
   const n2 = (e2 = s2 == null ? void 0 : s2.renderBefore) !== null && e2 !== void 0 ? e2 : i2;
   let l2 = n2._$litPart$;
@@ -297,8 +297,8 @@ const i$4 = globalThis.trustedTypes, s$2 = i$4 ? i$4.createPolicy("lit-html", {
     const s2 = t2[i3];
     let o3, u3, $2 = -1, p2 = 0;
     for (; p2 < s2.length && (d2.lastIndex = p2, u3 = d2.exec(s2), u3 !== null); )
-      p2 = d2.lastIndex, d2 === c$2 ? u3[1] === "!--" ? d2 = v : u3[1] !== void 0 ? d2 = a$2 : u3[2] !== void 0 ? (g$1.test(u3[2]) && (h2 = RegExp("</" + u3[2], "g")), d2 = f$1) : u3[3] !== void 0 && (d2 = f$1) : d2 === f$1 ? u3[0] === ">" ? (d2 = h2 != null ? h2 : c$2, $2 = -1) : u3[1] === void 0 ? $2 = -2 : ($2 = d2.lastIndex - u3[2].length, o3 = u3[1], d2 = u3[3] === void 0 ? f$1 : u3[3] === '"' ? m$1 : _) : d2 === m$1 || d2 === _ ? d2 = f$1 : d2 === v || d2 === a$2 ? d2 = c$2 : (d2 = f$1, h2 = void 0);
-    const y = d2 === f$1 && t2[i3 + 1].startsWith("/>") ? " " : "";
+      p2 = d2.lastIndex, d2 === c$2 ? u3[1] === "!--" ? d2 = v : u3[1] !== void 0 ? d2 = a$2 : u3[2] !== void 0 ? (g$1.test(u3[2]) && (h2 = RegExp("</" + u3[2], "g")), d2 = f$2) : u3[3] !== void 0 && (d2 = f$2) : d2 === f$2 ? u3[0] === ">" ? (d2 = h2 != null ? h2 : c$2, $2 = -1) : u3[1] === void 0 ? $2 = -2 : ($2 = d2.lastIndex - u3[2].length, o3 = u3[1], d2 = u3[3] === void 0 ? f$2 : u3[3] === '"' ? m$1 : _) : d2 === m$1 || d2 === _ ? d2 = f$2 : d2 === v || d2 === a$2 ? d2 = c$2 : (d2 = f$2, h2 = void 0);
+    const y = d2 === f$2 && t2[i3 + 1].startsWith("/>") ? " " : "";
     r2 += d2 === c$2 ? s2 + n$4 : $2 >= 0 ? (l2.push(o3), s2.slice(0, $2) + "$lit$" + s2.slice($2) + e$5 + y) : s2 + e$5 + ($2 === -2 ? (l2.push(void 0), i3) : y);
   }
   const u2 = r2 + (t2[o2] || "<?>") + (i2 === 2 ? "</svg>" : "");
@@ -755,6 +755,7 @@ var publisherProxy = { exports: {} };
         this._mutationListeners_ = new Set();
         this._fillListeners_ = new Set();
         this._templateFillListeners_ = new Set();
+        this._lockInternalMutationPublishing_ = false;
         this.parent = parentProxPub;
         this.root = this;
         while (this.root.parent) {
@@ -764,6 +765,8 @@ var publisherProxy = { exports: {} };
       _createClass(CustomProxy2, [{
         key: "_publishInternalMutation_",
         value: function _publishInternalMutation_() {
+          if (this._lockInternalMutationPublishing_)
+            return;
           this._mutationListeners_.forEach(function(handler) {
             return handler();
           });
@@ -858,24 +861,25 @@ var publisherProxy = { exports: {} };
             this._publishAssignement_();
             return true;
           }
-          this._proxies_.keys();
-          Array.from(this._proxies_.keys()).forEach(function(key) {
-            if (!_this2._value_[key]) {
-              _this2._proxies_["delete"](key);
+          this._lockInternalMutationPublishing_ = true;
+          Array.from(this._proxies_.keys()).forEach(function(key2) {
+            if (!_this2._value_[key2]) {
+              _this2._proxies_["delete"](key2);
             }
           });
-          for (var _key in this._value_) {
-            var v2 = this._value_[_key];
-            if (!this._proxies_.has(_key)) {
-              this._proxies_.set(_key, new Publisher(isComplex(v2) ? v2 : {
+          for (var key in this._value_) {
+            var v2 = this._value_[key];
+            if (!this._proxies_.has(key)) {
+              this._proxies_.set(key, new Publisher(isComplex(v2) ? v2 : {
                 __value: v2
               }, this));
             }
-            this._proxies_.get(_key).set(isComplex(v2) ? v2 : {
+            this._proxies_.get(key).set(isComplex(v2) ? v2 : {
               __value: v2
             });
-            this._publishDynamicFilling_(_key, this._value_[_key]);
+            this._publishDynamicFilling_(key, this._value_[key]);
           }
+          this._lockInternalMutationPublishing_ = false;
           this._publishAssignement_();
           return true;
         }
@@ -926,7 +930,7 @@ var publisherProxy = { exports: {} };
         var that = _assertThisInitialized(_this3);
         return _possibleConstructorReturn(_this3, new Proxy(_assertThisInitialized(_this3), {
           "get": function get(oTarget, sKey) {
-            if (["onAssign", "offAssign", "startDynamicFilling", "stopDynamicFilling", "startTemplateFilling", "stopTemplateFilling", "onInternalMutation", "set", "get", "_templateFillListeners_", "_fillListeners_", "_assignListeners_", "_publishInternalMutation_", "_mutationListeners_", "_publishDynamicFilling_", "_publishTemplateFilling_", "_publishAssignement_", "_proxies_", "parent", "_value_"].includes(sKey))
+            if (["onAssign", "offAssign", "startDynamicFilling", "stopDynamicFilling", "startTemplateFilling", "stopTemplateFilling", "onInternalMutation", "set", "get", "_templateFillListeners_", "_fillListeners_", "_assignListeners_", "_publishInternalMutation_", "_mutationListeners_", "_publishDynamicFilling_", "_publishTemplateFilling_", "_publishAssignement_", "_proxies_", "parent", "_value_", "_lockInternalMutationPublishing_"].includes(sKey))
               return that[sKey];
             if (!that._proxies_.has(sKey)) {
               var vValue = target[sKey];
@@ -941,11 +945,14 @@ var publisherProxy = { exports: {} };
               oTarget._value_ = vValue;
               return oTarget._value_;
             }
+            var isValueComplex = isComplex(vValue);
             if (!that._proxies_.has(sKey)) {
-              that._proxies_.set(sKey, new Publisher2(isComplex(vValue) ? vValue : {
+              that._proxies_.set(sKey, new Publisher2(isValueComplex ? vValue : {
                 __value: vValue
               }, that));
             }
+            if (target[sKey] == vValue && isValueComplex)
+              return;
             target[sKey] = vValue;
             that._publishDynamicFilling_(sKey, vValue);
             that._proxies_.get(sKey).set(isComplex(vValue) ? vValue : {
@@ -993,15 +1000,15 @@ var publisherProxy = { exports: {} };
     };
   })();
 })(publisherProxy);
-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$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$h(target, key, result);
+    __defProp$k(target, key, result);
   return result;
 };
 const Subscriber = (superClass) => {
@@ -1009,7 +1016,7 @@ const Subscriber = (superClass) => {
     constructor(...args) {
       super();
       this.title = "";
-      this._dataProvider = null;
+      this.dataProvider = null;
       this._props = null;
       this.args = args;
     }
@@ -1038,13 +1045,6 @@ const Subscriber = (superClass) => {
       }
       return node.getAttribute(attributeName);
     }
-    get dataProvider() {
-      return this._dataProvider;
-    }
-    set dataProvider(value) {
-      this._dataProvider = value;
-      this.requestUpdate();
-    }
     get props() {
       return this.publisher.get();
     }
@@ -1078,7 +1078,7 @@ const Subscriber = (superClass) => {
       let publisherId = this.dataProvider;
       if (!publisherId)
         publisherId = this.getAncestorAttributeValue("dataProvider");
-      if (!publisherId) {
+      if (!publisherId && this._props) {
         this.dataProvider = publisherId = "__subscriber__" + _SubscriberElement.instanceCounter;
       }
       if (publisherId) {
@@ -1108,17 +1108,237 @@ const Subscriber = (superClass) => {
   };
   let SubscriberElement = _SubscriberElement;
   SubscriberElement.instanceCounter = 0;
-  __decorateClass$h([
+  __decorateClass$k([
     e$4({ type: String, attribute: "data-title" })
   ], SubscriberElement.prototype, "title", 2);
-  __decorateClass$h([
-    e$4({ type: String })
-  ], SubscriberElement.prototype, "dataProvider", 1);
-  __decorateClass$h([
+  __decorateClass$k([
+    e$4({ type: String, reflect: true })
+  ], SubscriberElement.prototype, "dataProvider", 2);
+  __decorateClass$k([
     e$4()
   ], SubscriberElement.prototype, "props", 1);
   return SubscriberElement;
 };
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t = { ATTRIBUTE: 1, CHILD: 2, PROPERTY: 3, BOOLEAN_ATTRIBUTE: 4, EVENT: 5, ELEMENT: 6 }, e$3 = (t2) => (...e2) => ({ _$litDirective$: t2, values: e2 });
+class i$2 {
+  constructor(t2) {
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AT(t2, e2, i2) {
+    this._$Ct = t2, this._$AM = e2, this._$Ci = i2;
+  }
+  _$AS(t2, e2) {
+    return this.update(t2, e2);
+  }
+  update(t2, e2) {
+    return this.render(...e2);
+  }
+}
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const { H: i$1 } = R, r$2 = (o2) => o2.strings === void 0, e$2 = () => document.createComment(""), u$1 = (o2, t2, n2) => {
+  var v2;
+  const l2 = o2._$AA.parentNode, d2 = t2 === void 0 ? o2._$AB : t2._$AA;
+  if (n2 === void 0) {
+    const t3 = l2.insertBefore(e$2(), d2), v3 = l2.insertBefore(e$2(), d2);
+    n2 = new i$1(t3, v3, o2, o2.options);
+  } else {
+    const i2 = n2._$AB.nextSibling, t3 = n2._$AM, r2 = t3 !== o2;
+    if (r2) {
+      let i3;
+      (v2 = n2._$AQ) === null || v2 === void 0 || v2.call(n2, o2), n2._$AM = o2, n2._$AP !== void 0 && (i3 = o2._$AU) !== t3._$AU && n2._$AP(i3);
+    }
+    if (i2 !== d2 || r2) {
+      let o3 = n2._$AA;
+      for (; o3 !== i2; ) {
+        const i3 = o3.nextSibling;
+        l2.insertBefore(o3, d2), o3 = i3;
+      }
+    }
+  }
+  return n2;
+}, c$1 = (o2, i2, t2 = o2) => (o2._$AI(i2, t2), o2), f$1 = {}, s = (o2, i2 = f$1) => o2._$AH = i2, a$1 = (o2) => o2._$AH, m = (o2) => {
+  var i2;
+  (i2 = o2._$AP) === null || i2 === void 0 || i2.call(o2, false, true);
+  let t2 = o2._$AA;
+  const n2 = o2._$AB.nextSibling;
+  for (; t2 !== n2; ) {
+    const o3 = t2.nextSibling;
+    t2.remove(), t2 = o3;
+  }
+};
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const u = (e2, s2, t2) => {
+  const r2 = new Map();
+  for (let l2 = s2; l2 <= t2; l2++)
+    r2.set(e2[l2], l2);
+  return r2;
+}, c = e$3(class extends i$2 {
+  constructor(e2) {
+    if (super(e2), e2.type !== t.CHILD)
+      throw Error("repeat() can only be used in text expressions");
+  }
+  dt(e2, s2, t2) {
+    let r2;
+    t2 === void 0 ? t2 = s2 : s2 !== void 0 && (r2 = s2);
+    const l2 = [], o2 = [];
+    let i2 = 0;
+    for (const s3 of e2)
+      l2[i2] = r2 ? r2(s3, i2) : i2, o2[i2] = t2(s3, i2), i2++;
+    return { values: o2, keys: l2 };
+  }
+  render(e2, s2, t2) {
+    return this.dt(e2, s2, t2).values;
+  }
+  update(s$12, [t2, r2, c2]) {
+    var d2;
+    const a2 = a$1(s$12), { values: p2, keys: v2 } = this.dt(t2, r2, c2);
+    if (!Array.isArray(a2))
+      return this.ct = v2, p2;
+    const h2 = (d2 = this.ct) !== null && d2 !== void 0 ? d2 : this.ct = [], m$12 = [];
+    let y, x2, j2 = 0, k2 = a2.length - 1, w2 = 0, A2 = p2.length - 1;
+    for (; j2 <= k2 && w2 <= A2; )
+      if (a2[j2] === null)
+        j2++;
+      else if (a2[k2] === null)
+        k2--;
+      else if (h2[j2] === v2[w2])
+        m$12[w2] = c$1(a2[j2], p2[w2]), j2++, w2++;
+      else if (h2[k2] === v2[A2])
+        m$12[A2] = c$1(a2[k2], p2[A2]), k2--, A2--;
+      else if (h2[j2] === v2[A2])
+        m$12[A2] = c$1(a2[j2], p2[A2]), u$1(s$12, m$12[A2 + 1], a2[j2]), j2++, A2--;
+      else if (h2[k2] === v2[w2])
+        m$12[w2] = c$1(a2[k2], p2[w2]), u$1(s$12, a2[j2], a2[k2]), k2--, w2++;
+      else if (y === void 0 && (y = u(v2, w2, A2), x2 = u(h2, j2, k2)), y.has(h2[j2]))
+        if (y.has(h2[k2])) {
+          const e2 = x2.get(v2[w2]), t3 = e2 !== void 0 ? a2[e2] : null;
+          if (t3 === null) {
+            const e3 = u$1(s$12, a2[j2]);
+            c$1(e3, p2[w2]), m$12[w2] = e3;
+          } else
+            m$12[w2] = c$1(t3, p2[w2]), u$1(s$12, a2[j2], t3), a2[e2] = null;
+          w2++;
+        } else
+          m(a2[k2]), k2--;
+      else
+        m(a2[j2]), j2++;
+    for (; w2 <= A2; ) {
+      const e2 = u$1(s$12, m$12[A2 + 1]);
+      c$1(e2, p2[w2]), m$12[w2++] = e2;
+    }
+    for (; j2 <= k2; ) {
+      const e2 = a2[j2++];
+      e2 !== null && m(e2);
+    }
+    return this.ct = v2, s(s$12, m$12), b$1;
+  }
+});
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const o$2 = e$3(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");
+  }
+  render(r2) {
+    return this.at === r2 ? b$1 : (this.at = r2, document.importNode(r2.content, true));
+  }
+});
+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$j(target, key, result);
+  return result;
+};
+let SonicQueue = class extends Subscriber(s$1) {
+  constructor() {
+    super(...arguments);
+    this.template = null;
+    this.lastRequestTime = 0;
+    this.targetRequestDuration = 500;
+    this.limit = 5;
+    this.dataProviderExpression = "";
+  }
+  connectedCallback() {
+    if (!this.dataProvider)
+      this.dataProvider = "sonic-queue-" + SonicQueue.instanceCounter++;
+    super.connectedCallback();
+    this.template = this.getElementsByTagName("template")[0];
+    this.lastRequestTime = new Date().getTime();
+    this.next();
+  }
+  next(e2) {
+    let offset = 0;
+    if (e2) {
+      if (!e2.detail.isFirstLoad || e2.detail.props.length == 0) {
+        return;
+      }
+    }
+    if (!Array.isArray(this.props))
+      this.props = [];
+    else {
+      const props = Object.values(this.props);
+      const item = props[props.length - 1];
+      offset = parseInt(item.offset.toString()) + parseInt(item.limit.toString());
+    }
+    const newTime = new Date().getTime();
+    const requestDuration = newTime - this.lastRequestTime;
+    this.lastRequestTime = newTime;
+    if (requestDuration > 0)
+      this.limit = Math.round(this.limit / requestDuration * this.targetRequestDuration);
+    if (this.limit < 1)
+      this.limit = 1;
+    if (this.limit > 15)
+      this.limit = 15;
+    const dataProvider = this.dataProviderExpression.replace("$offset", offset + "").replace("$limit", this.limit + "");
+    this.props = [...Object.values(this.props), { id: this.props.length, dataProvider, offset, limit: this.limit }];
+  }
+  render() {
+    if (!Array.isArray(this.props))
+      return p$1``;
+    return p$1`
+      ${c(this.props, (item) => item.id, (item) => p$1`
+            <sonic-list @load=${this.next} dataProvider="${item.dataProvider}"> ${o$2(this.template)} </sonic-list>
+          `)}
+    `;
+  }
+};
+SonicQueue.instanceCounter = 0;
+__decorateClass$j([
+  e$4()
+], SonicQueue.prototype, "targetRequestDuration", 2);
+__decorateClass$j([
+  e$4()
+], SonicQueue.prototype, "limit", 2);
+__decorateClass$j([
+  e$4({ type: String })
+], SonicQueue.prototype, "dataProviderExpression", 2);
+SonicQueue = __decorateClass$j([
+  n$2("sonic-queue")
+], SonicQueue);
 const inline = r$5`
   .sonic-loader--inline {
     display:block;
@@ -1126,8 +1346,7 @@ const inline = r$5`
     width: 80px;
     height: 80px;
     margin:auto;
-    z-index:999;
-
+    z-index:20;
   }
   .sonic-loader--inline  div {
     position: absolute;
@@ -1237,15 +1456,15 @@ const fixed = r$5`
   }
   
 `;
-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$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$g(target, key, result);
+    __defProp$i(target, key, result);
   return result;
 };
 let SonicLoader = class extends Subscriber(s$1) {
@@ -1277,7 +1496,7 @@ let SonicLoader = class extends Subscriber(s$1) {
       SonicLoader.loader.remove();
   }
   render() {
-    return p`<div class="sonic-loader--${this.mode} ">
+    return p$1`<div class="sonic-loader--${this.mode} ">
         <div></div>
         <div></div>
         <div></div>
@@ -1294,10 +1513,10 @@ SonicLoader.styles = [
     }`
 ];
 SonicLoader.callCounter = 0;
-__decorateClass$g([
+__decorateClass$i([
   e$4({ type: String })
 ], SonicLoader.prototype, "mode", 2);
-SonicLoader = __decorateClass$g([
+SonicLoader = __decorateClass$i([
   n$2("sonic-loader")
 ], SonicLoader);
 /**
@@ -1305,29 +1524,7 @@ SonicLoader = __decorateClass$g([
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const t = { ATTRIBUTE: 1, CHILD: 2, PROPERTY: 3, BOOLEAN_ATTRIBUTE: 4, EVENT: 5, ELEMENT: 6 }, e$3 = (t2) => (...e2) => ({ _$litDirective$: t2, values: e2 });
-class i$2 {
-  constructor(t2) {
-  }
-  get _$AU() {
-    return this._$AM._$AU;
-  }
-  _$AT(t2, e2, i2) {
-    this._$Ct = t2, this._$AM = e2, this._$Ci = i2;
-  }
-  _$AS(t2, e2) {
-    return this.update(t2, e2);
-  }
-  update(t2, e2) {
-    return this.render(...e2);
-  }
-}
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-class e$2 extends i$2 {
+class e$1 extends i$2 {
   constructor(i2) {
     if (super(i2), this.it = T, i2.type !== t.CHILD)
       throw Error(this.constructor.directiveName + "() can only be used in child bindings");
@@ -1346,115 +1543,8 @@ class e$2 extends i$2 {
     return s2.raw = s2, this.vt = { _$litType$: this.constructor.resultType, strings: s2, values: [] };
   }
 }
-e$2.directiveName = "unsafeHTML", e$2.resultType = 1;
-const o$2 = e$3(e$2);
-/**
- * @license
- * Copyright 2020 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const { H: i$1 } = R, r$2 = (o2) => o2.strings === void 0, e$1 = () => document.createComment(""), u$1 = (o2, t2, n2) => {
-  var v2;
-  const l2 = o2._$AA.parentNode, d2 = t2 === void 0 ? o2._$AB : t2._$AA;
-  if (n2 === void 0) {
-    const t3 = l2.insertBefore(e$1(), d2), v3 = l2.insertBefore(e$1(), d2);
-    n2 = new i$1(t3, v3, o2, o2.options);
-  } else {
-    const i2 = n2._$AB.nextSibling, t3 = n2._$AM, r2 = t3 !== o2;
-    if (r2) {
-      let i3;
-      (v2 = n2._$AQ) === null || v2 === void 0 || v2.call(n2, o2), n2._$AM = o2, n2._$AP !== void 0 && (i3 = o2._$AU) !== t3._$AU && n2._$AP(i3);
-    }
-    if (i2 !== d2 || r2) {
-      let o3 = n2._$AA;
-      for (; o3 !== i2; ) {
-        const i3 = o3.nextSibling;
-        l2.insertBefore(o3, d2), o3 = i3;
-      }
-    }
-  }
-  return n2;
-}, c$1 = (o2, i2, t2 = o2) => (o2._$AI(i2, t2), o2), f = {}, s = (o2, i2 = f) => o2._$AH = i2, a$1 = (o2) => o2._$AH, m = (o2) => {
-  var i2;
-  (i2 = o2._$AP) === null || i2 === void 0 || i2.call(o2, false, true);
-  let t2 = o2._$AA;
-  const n2 = o2._$AB.nextSibling;
-  for (; t2 !== n2; ) {
-    const o3 = t2.nextSibling;
-    t2.remove(), t2 = o3;
-  }
-};
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const u = (e2, s2, t2) => {
-  const r2 = new Map();
-  for (let l2 = s2; l2 <= t2; l2++)
-    r2.set(e2[l2], l2);
-  return r2;
-}, c = e$3(class extends i$2 {
-  constructor(e2) {
-    if (super(e2), e2.type !== t.CHILD)
-      throw Error("repeat() can only be used in text expressions");
-  }
-  dt(e2, s2, t2) {
-    let r2;
-    t2 === void 0 ? t2 = s2 : s2 !== void 0 && (r2 = s2);
-    const l2 = [], o2 = [];
-    let i2 = 0;
-    for (const s3 of e2)
-      l2[i2] = r2 ? r2(s3, i2) : i2, o2[i2] = t2(s3, i2), i2++;
-    return { values: o2, keys: l2 };
-  }
-  render(e2, s2, t2) {
-    return this.dt(e2, s2, t2).values;
-  }
-  update(s$12, [t2, r2, c2]) {
-    var d2;
-    const a2 = a$1(s$12), { values: p2, keys: v2 } = this.dt(t2, r2, c2);
-    if (!Array.isArray(a2))
-      return this.ct = v2, p2;
-    const h2 = (d2 = this.ct) !== null && d2 !== void 0 ? d2 : this.ct = [], m$12 = [];
-    let y, x2, j2 = 0, k2 = a2.length - 1, w2 = 0, A2 = p2.length - 1;
-    for (; j2 <= k2 && w2 <= A2; )
-      if (a2[j2] === null)
-        j2++;
-      else if (a2[k2] === null)
-        k2--;
-      else if (h2[j2] === v2[w2])
-        m$12[w2] = c$1(a2[j2], p2[w2]), j2++, w2++;
-      else if (h2[k2] === v2[A2])
-        m$12[A2] = c$1(a2[k2], p2[A2]), k2--, A2--;
-      else if (h2[j2] === v2[A2])
-        m$12[A2] = c$1(a2[j2], p2[A2]), u$1(s$12, m$12[A2 + 1], a2[j2]), j2++, A2--;
-      else if (h2[k2] === v2[w2])
-        m$12[w2] = c$1(a2[k2], p2[w2]), u$1(s$12, a2[j2], a2[k2]), k2--, w2++;
-      else if (y === void 0 && (y = u(v2, w2, A2), x2 = u(h2, j2, k2)), y.has(h2[j2]))
-        if (y.has(h2[k2])) {
-          const e2 = x2.get(v2[w2]), t3 = e2 !== void 0 ? a2[e2] : null;
-          if (t3 === null) {
-            const e3 = u$1(s$12, a2[j2]);
-            c$1(e3, p2[w2]), m$12[w2] = e3;
-          } else
-            m$12[w2] = c$1(t3, p2[w2]), u$1(s$12, a2[j2], t3), a2[e2] = null;
-          w2++;
-        } else
-          m(a2[k2]), k2--;
-      else
-        m(a2[j2]), j2++;
-    for (; w2 <= A2; ) {
-      const e2 = u$1(s$12, m$12[A2 + 1]);
-      c$1(e2, p2[w2]), m$12[w2++] = e2;
-    }
-    for (; j2 <= k2; ) {
-      const e2 = a2[j2++];
-      e2 !== null && m(e2);
-    }
-    return this.ct = v2, s(s$12, m$12), b$1;
-  }
-});
+e$1.directiveName = "unsafeHTML", e$1.resultType = 1;
+const o$1 = e$3(e$1);
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -1468,7 +1558,7 @@ const e = (i2, t2) => {
   for (const i3 of n2)
     (o2 = (s2 = i3)._$AO) === null || o2 === void 0 || o2.call(s2, t2, false), e(i3, t2);
   return true;
-}, o$1 = (i2) => {
+}, o = (i2) => {
   let t2, s2;
   do {
     if ((t2 = i2._$AM) === void 0)
@@ -1486,7 +1576,7 @@ const e = (i2, t2) => {
   }
 };
 function r$1(i2) {
-  this._$AN !== void 0 ? (o$1(this), this._$AM = i2, n$1(this)) : this._$AM = i2;
+  this._$AN !== void 0 ? (o(this), this._$AM = i2, n$1(this)) : this._$AM = i2;
 }
 function h$1(i2, t2 = false, s2 = 0) {
   const n2 = this._$AH, r2 = this._$AN;
@@ -1494,9 +1584,9 @@ function h$1(i2, t2 = false, s2 = 0) {
     if (t2)
       if (Array.isArray(n2))
         for (let i3 = s2; i3 < n2.length; i3++)
-          e(n2[i3], false), o$1(n2[i3]);
+          e(n2[i3], false), o(n2[i3]);
       else
-        n2 != null && (e(n2, false), o$1(n2));
+        n2 != null && (e(n2, false), o(n2));
     else
       e(this, i2);
 }
@@ -1513,7 +1603,7 @@ class d extends i$2 {
   }
   _$AO(i2, t2 = true) {
     var s2, n2;
-    i2 !== this.isConnected && (this.isConnected = i2, i2 ? (s2 = this.reconnected) === null || s2 === void 0 || s2.call(this) : (n2 = this.disconnected) === null || n2 === void 0 || n2.call(this)), t2 && (e(this, i2), o$1(this));
+    i2 !== this.isConnected && (this.isConnected = i2, i2 ? (s2 = this.reconnected) === null || s2 === void 0 || s2.call(this) : (n2 = this.disconnected) === null || n2 === void 0 || n2.call(this)), t2 && (e(this, i2), o(this));
   }
   setValue(t2) {
     if (r$2(this._$Ct))
@@ -1530,7 +1620,7 @@ class d extends i$2 {
 }
 const i = new WeakMap();
 let h = 0;
-const r = new Map(), n = new WeakSet(), a = () => new Promise((t2) => requestAnimationFrame(t2)), g = (t2, i2) => {
+const r = new Map(), n = new WeakSet(), a = () => new Promise((t2) => requestAnimationFrame(t2)), f = [{ opacity: 0 }], p = [{ opacity: 0 }, { opacity: 1 }], g = (t2, i2) => {
   const s2 = t2 - i2;
   return s2 === 0 ? void 0 : s2;
 }, w = (t2, i2) => {
@@ -1736,15 +1826,15 @@ class S extends d {
   }
 }
 const $ = e$3(S);
-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$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$f(target, key, result);
+    __defProp$h(target, key, result);
   return result;
 };
 const removeIcon = `<svg aria-hidden="true" focusable="false"  data-icon="xmark" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
@@ -1781,9 +1871,9 @@ let SonicToast = class extends Subscriber(s$1) {
     this.styled = false;
   }
   render() {
-    return p`<div class="sonic-toast-area">
+    return p$1`<div class="sonic-toast-area">
 
-    ${c(this.toasts, (item) => item.id, (item) => p`
+    ${c(this.toasts, (item) => item.id, (item) => p$1`
      <div
         class="${this.className} sonic-toast ${item.status}"
           ${$({
@@ -1803,16 +1893,16 @@ let SonicToast = class extends Subscriber(s$1) {
       stabilizeOut: true
     })}
         >
-          ${item.status && p`<div class="sonic-toast-icon">${o$2(icon[item.status])}</div>`}
+          ${item.status && p$1`<div class="sonic-toast-icon">${o$1(icon[item.status])}</div>`}
 
           <div class="sonic-toast-text">
-            ${item.title ? p`<div class="sonic-toast-title">${item.title}</div>` : ""}
-            ${item.text ? o$2(item.text) : ""}
+            ${item.title ? p$1`<div class="sonic-toast-title">${item.title}</div>` : ""}
+            ${item.text ? o$1(item.text) : ""}
             <slot></slot> 
           </div>
 
           <button class="sonic-toast-close" @click=${() => this.removeItem(item)}>
-            ${o$2(removeIcon)}
+            ${o$1(removeIcon)}
           </button>
           ${!item.preserve ? this.autoRemoveItem(item) : ""}
       
@@ -1853,13 +1943,16 @@ let SonicToast = class extends Subscriber(s$1) {
 };
 SonicToast.styles = [
   r$5`
+      * {
+        box-sizing:border-box;
+      }
 
       .sonic-toast-area{
         position: fixed;
         top: 1.25rem;
         right: 1.25rem;
         pointer-events: none;
-        width: 75%;
+        width: calc(100% - 2.5rem);
         max-width: 40ch;
         z-index: 999;
       }
@@ -1962,23 +2055,23 @@ SonicToast.styles = [
       }
     `
 ];
-__decorateClass$f([
+__decorateClass$h([
   t$1()
 ], SonicToast.prototype, "toasts", 2);
-__decorateClass$f([
+__decorateClass$h([
   e$4({ type: String })
 ], SonicToast.prototype, "className", 2);
-__decorateClass$f([
+__decorateClass$h([
   e$4({ type: Boolean })
 ], SonicToast.prototype, "styled", 2);
-SonicToast = __decorateClass$f([
+SonicToast = __decorateClass$h([
   n$2("sonic-toast")
 ], SonicToast);
 if (typeof window !== "undefined") {
   let win = window;
   win.SonicToast = SonicToast;
 }
-class API {
+const _API = class {
   constructor(config) {
     this.nologin = false;
     this.serviceURL = config.serviceURL;
@@ -1990,12 +2083,19 @@ class API {
     this.tokenProvider = config.tokenProvider;
   }
   async auth() {
+    if (this.token)
+      return;
+    if (_API.tokens.has(this.serviceURL)) {
+      this.token = _API.tokens.get(this.serviceURL);
+      return;
+    }
     if (!this.userName || !this.password || !this.tokenProvider)
       return;
     let headers = { Authorization: "Basic " + window.btoa(unescape(encodeURIComponent(this.userName + ":" + this.password))) };
     let result = await fetch(this.computeURL(this.tokenProvider), { headers });
     let json = await result.json();
     this.token = json.token;
+    _API.tokens.set(this.serviceURL, this.token);
   }
   async get(path) {
     let headers = await this.createHeaders();
@@ -2008,8 +2108,7 @@ class API {
     }
   }
   async createHeaders() {
-    if (!this.token)
-      await this.auth();
+    await this.auth();
     let headers = {};
     if (this.token)
       headers.Authorization = "Bearer " + this.token;
@@ -2020,6 +2119,7 @@ class API {
     return this.serviceURL + "/" + path;
   }
   async put(path, data) {
+    await this.auth();
     let headers = await this.createHeaders();
     headers["Accept"] = "application/json";
     headers["Content-Type"] = "application/json";
@@ -2035,7 +2135,9 @@ class API {
       return null;
     }
   }
-}
+};
+let API = _API;
+API.tokens = new Map();
 const Fetcher = (superClass) => {
   class FetcherElement extends superClass {
     constructor(...args) {
@@ -2046,7 +2148,7 @@ const Fetcher = (superClass) => {
       this.userName = "";
       this.key = "";
       this.password = "";
-      this.args = args;
+      this.isFirstLoad = true;
       this.dataProvider = "";
     }
     async _fetchEventData() {
@@ -2066,6 +2168,8 @@ const Fetcher = (superClass) => {
         data = data[this.key];
       }
       this.props = data;
+      this.dispatchEvent(new CustomEvent("load", { detail: this }));
+      this.isFirstLoad = false;
     }
     connectedCallback() {
       super.connectedCallback();
@@ -2078,8 +2182,8 @@ const Fetcher = (superClass) => {
         this.serviceURL = document.location.origin;
       this.api = new API({
         serviceURL: this.serviceURL,
-        userName: "api",
-        password: "super",
+        userName: this.userName,
+        password: this.password,
         tokenProvider: this.tokenProvider,
         dataProvider: this.dataProvider
       });
@@ -2091,23 +2195,23 @@ const Fetcher = (superClass) => {
   }
   return FetcherElement;
 };
-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$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$e(target, key, result);
+    __defProp$g(target, key, result);
   return result;
 };
 let SonicFetch = class extends Fetcher(Subscriber(s$1)) {
   render() {
-    return p`<slot></slot>`;
+    return p$1`<slot></slot>`;
   }
 };
-SonicFetch = __decorateClass$e([
+SonicFetch = __decorateClass$g([
   n$2("sonic-fetch")
 ], SonicFetch);
 const cssProse = r$5`
@@ -2136,15 +2240,15 @@ r$5`
     margin-bottom:.5em;
   }
 `;
-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$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$d(target, key, result);
+    __defProp$f(target, key, result);
   return result;
 };
 let SonicTextFormatted = class extends Subscriber(s$1) {
@@ -2155,9 +2259,9 @@ let SonicTextFormatted = class extends Subscriber(s$1) {
     this.className = "";
   }
   render() {
-    return p`
+    return p$1`
             <div class="${this.className} text-formatted">
-                ${o$2(this.html)}
+                ${o$1(this.html)}
             </div>
         `;
   }
@@ -2165,27 +2269,27 @@ let SonicTextFormatted = class extends Subscriber(s$1) {
 SonicTextFormatted.styles = [
   cssProse
 ];
-__decorateClass$d([
+__decorateClass$f([
   e$4({ type: String })
 ], SonicTextFormatted.prototype, "html", 2);
-__decorateClass$d([
+__decorateClass$f([
   e$4({ type: String })
 ], SonicTextFormatted.prototype, "leading", 2);
-__decorateClass$d([
+__decorateClass$f([
   e$4()
 ], SonicTextFormatted.prototype, "className", 2);
-SonicTextFormatted = __decorateClass$d([
+SonicTextFormatted = __decorateClass$f([
   n$2("sonic-text-formatted")
 ], SonicTextFormatted);
-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$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$c(target, key, result);
+    __defProp$e(target, key, result);
   return result;
 };
 let SonicText = class extends Subscriber(s$1) {
@@ -2197,55 +2301,37 @@ let SonicText = class extends Subscriber(s$1) {
   }
   render() {
     let text = this.text;
-    if (this.props) {
-      if (this.key)
-        text = this.props[this.key];
-      else if (typeof this.props === "string")
-        text = this.props;
-    }
-    return text || this.children.length ? p`<div class="${this.className}">
+    if (this.props && typeof this.props === "string")
+      text = this.props;
+    return text || this.children.length ? p$1`<div class="${this.className}">
           <slot name="prefix"></slot>
-          ${text && o$2(text)}
+          ${text && o$1(text)}
           <slot></slot>
           <slot name="suffix"></slot>
-        </div>` : p`<slot></slot>`;
+        </div>` : p$1`<slot></slot>`;
   }
 };
-__decorateClass$c([
+__decorateClass$e([
   e$4()
 ], SonicText.prototype, "key", 2);
-__decorateClass$c([
+__decorateClass$e([
   e$4()
 ], SonicText.prototype, "text", 2);
-__decorateClass$c([
+__decorateClass$e([
   e$4()
 ], SonicText.prototype, "className", 2);
-SonicText = __decorateClass$c([
+SonicText = __decorateClass$e([
   n$2("sonic-text")
 ], SonicText);
-/**
- * @license
- * Copyright 2020 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const o = e$3(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");
-  }
-  render(r2) {
-    return this.at === r2 ? b$1 : (this.at = r2, document.importNode(r2.content, true));
-  }
-});
-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$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$b(target, key, result);
+    __defProp$d(target, key, result);
   return result;
 };
 let SonicList = class extends Fetcher(Subscriber(s$1)) {
@@ -2260,16 +2346,16 @@ let SonicList = class extends Fetcher(Subscriber(s$1)) {
   render() {
     if (typeof this.props == "string") {
       const icon2 = `<svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="face-thinking" class="svg-inline--fa fa-face-thinking" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M40.05 315.7C42.4 324.3 37.4 333.1 28.88 335.4C20.37 337.8 11.56 332.8 9.204 324.3C3.202 302.5 0 279.6 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 379.9 424 483.2 307.2 506.9C298.5 508.6 290.1 503 288.3 494.4C286.6 485.7 292.2 477.3 300.8 475.5C403.1 454.8 480 364.4 480 256C480 132.3 379.7 32 256 32C132.3 32 32 132.3 32 256C32 276.7 34.81 296.7 40.05 315.7H40.05zM318.3 297.2C336.5 303.3 349.4 319.3 351.6 338C354.3 359.3 342.4 380.5 321.5 388.7L274.5 407.1L250.6 466.7C239.7 494.1 213.2 512 183.8 512H136C96.24 512 64 479.8 64 440V320C64 293.5 85.49 272 112 272C138.5 272 160 293.5 160 320V348.8L257.4 310.7L186.9 287.2C178.6 284.4 174 275.3 176.8 266.9C179.6 258.6 188.7 254 197.1 256.8L318.3 297.2zM318.9 338.2C315.7 329.9 306.4 325.9 298.2 329.1L149.8 387.1C144.9 389.1 139.3 388.4 134.1 385.5C130.6 382.5 128 377.5 128 372.2V320C128 311.2 120.8 304 112 304C103.2 304 96 311.2 96 320V440C96 462.1 113.9 480 136 480H183.8C200.1 480 214.8 470 220.9 454.9L246.9 389.9C246.9 389.7 247 389.6 247.1 389.4C248.6 385 252 381.5 256.3 379.8L309.8 358.9C316.1 356.4 320 350.4 320 344C320 343.6 319.1 343.1 319.1 342.7C319.8 341.2 319.5 339.7 318.9 338.2H318.9zM200.4 192C200.4 205.3 189.6 216 176.4 216C163.1 216 152.4 205.3 152.4 192C152.4 178.7 163.1 168 176.4 168C189.6 168 200.4 178.7 200.4 192zM312.4 208C312.4 194.7 323.1 184 336.4 184C349.6 184 360.4 194.7 360.4 208C360.4 221.3 349.6 232 336.4 232C323.1 232 312.4 221.3 312.4 208zM216.4 144.8C195.9 127.2 166.5 124.4 142.1 137.9L135.9 141.9C128.3 146.3 118.5 143.6 114.1 135.9C109.7 128.3 112.4 118.5 120.1 114.1L127.1 110.1C162.3 89.95 206.4 94.14 237.2 120.5L250.4 131.9C257.1 137.6 257.9 147.7 252.1 154.4C246.4 161.1 236.3 161.9 229.6 156.1L216.4 144.8z"></path></svg>`;
-      return p`<div class="sonic-no-result-container">
-        ${o$2(icon2)} <span class="sonic-no-result-text">${this.props}
+      return p$1`<div class="sonic-no-result-container">
+        ${o$1(icon2)} <span class="sonic-no-result-text">${this.props}
         </span></div>`;
     }
     if (!Array.isArray(this.props))
-      return p``;
-    return p`
-           ${c(this.props, (item) => item.id, (item, index) => p`
+      return p$1``;
+    return p$1`
+           ${c(this.props, (item) => item.id, (item, index) => item && p$1`
             <sonic-subscriber .props=${item} dataProvider="${this.dataProvider}/${index}"> 
-                ${o(this.template)}
+                ${o$2(this.template)}
             </sonic-subscriber>
         `)}
     `;
@@ -2294,39 +2380,39 @@ SonicList.styles = [
           }
         `
 ];
-SonicList = __decorateClass$b([
+SonicList = __decorateClass$d([
   n$2("sonic-list")
 ], SonicList);
-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$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$a(target, key, result);
+    __defProp$c(target, key, result);
   return result;
 };
 let SonicSubscriber = class extends Subscriber(s$1) {
   render() {
-    return p`
+    return p$1`
       <slot></slot>
     `;
   }
 };
-SonicSubscriber = __decorateClass$a([
+SonicSubscriber = __decorateClass$c([
   n$2("sonic-subscriber")
 ], SonicSubscriber);
-var __defProp$9 = Object.defineProperty;
-var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
-var __decorateClass$9 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(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$9(target, key, result);
+    __defProp$b(target, key, result);
   return result;
 };
 let SonicTaxonomy = class extends Subscriber(s$1) {
@@ -2340,11 +2426,11 @@ let SonicTaxonomy = class extends Subscriber(s$1) {
       return;
     const idKey = "category_id";
     const nameKey = "category_name";
-    return p`
+    return p$1`
       <div class="sonic-taxonomy">
         <i class=" fas fa-circle"></i>
         <div>
-        ${c(this.taxonomy, (item) => item[idKey], (item) => p`<span>
+        ${c(this.taxonomy, (item) => item[idKey], (item) => p$1`<span>
             ${item[nameKey]}
           </span>
           <span class="sonic-taxonomy-separator"></span>
@@ -2355,24 +2441,24 @@ let SonicTaxonomy = class extends Subscriber(s$1) {
     `;
   }
 };
-__decorateClass$9([
+__decorateClass$b([
   e$4({ type: Array })
 ], SonicTaxonomy.prototype, "taxonomy", 2);
-__decorateClass$9([
+__decorateClass$b([
   e$4({ type: String })
 ], SonicTaxonomy.prototype, "separator", 2);
-SonicTaxonomy = __decorateClass$9([
+SonicTaxonomy = __decorateClass$b([
   n$2("sonic-taxonomy")
 ], SonicTaxonomy);
-var __defProp$8 = Object.defineProperty;
-var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
-var __decorateClass$8 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(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$8(target, key, result);
+    __defProp$a(target, key, result);
   return result;
 };
 let SonicEventCard = class extends Subscriber(s$1) {
@@ -2383,7 +2469,7 @@ let SonicEventCard = class extends Subscriber(s$1) {
     this.categories = [];
   }
   render() {
-    return p`
+    return p$1`
       <div class="sonic-event-card">
         <div class="sonic-event-card-illustration">
           <sonic-illustration
@@ -2448,27 +2534,27 @@ SonicEventCard.styles = [
       }
     `
 ];
-__decorateClass$8([
+__decorateClass$a([
   e$4({ type: String })
 ], SonicEventCard.prototype, "start_date", 2);
-__decorateClass$8([
+__decorateClass$a([
   e$4({ type: String })
 ], SonicEventCard.prototype, "illustration", 2);
-__decorateClass$8([
+__decorateClass$a([
   e$4({ type: Array })
 ], SonicEventCard.prototype, "categories", 2);
-SonicEventCard = __decorateClass$8([
+SonicEventCard = __decorateClass$a([
   n$2("sonic-event-card")
 ], SonicEventCard);
-var __defProp$7 = Object.defineProperty;
-var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
-var __decorateClass$7 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
+var __defProp$9 = Object.defineProperty;
+var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
+var __decorateClass$9 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(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$7(target, key, result);
+    __defProp$9(target, key, result);
   return result;
 };
 let SonicEventTitle = class extends Subscriber(s$1) {
@@ -2477,47 +2563,47 @@ let SonicEventTitle = class extends Subscriber(s$1) {
     this.title = "";
   }
   render() {
-    return p`
+    return p$1`
             ${this.title}
         `;
   }
 };
-__decorateClass$7([
+__decorateClass$9([
   e$4({ type: String })
 ], SonicEventTitle.prototype, "title", 2);
-SonicEventTitle = __decorateClass$7([
+SonicEventTitle = __decorateClass$9([
   n$2("sonic-event-title")
 ], SonicEventTitle);
-var __defProp$6 = Object.defineProperty;
-var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
-var __decorateClass$6 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target;
+var __defProp$8 = Object.defineProperty;
+var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
+var __decorateClass$8 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(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$6(target, key, result);
+    __defProp$8(target, key, result);
   return result;
 };
 let SonicEvent = class extends Subscriber(s$1) {
   render() {
-    return p`
+    return p$1`
       <slot></slot>
     `;
   }
 };
-SonicEvent = __decorateClass$6([
+SonicEvent = __decorateClass$8([
   n$2("super-event")
 ], SonicEvent);
-var __defProp$5 = Object.defineProperty;
-var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
-var __decorateClass$5 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target;
+var __defProp$7 = Object.defineProperty;
+var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
+var __decorateClass$7 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(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$5(target, key, result);
+    __defProp$7(target, key, result);
   return result;
 };
 let SonicIllustration = class extends Subscriber(s$1) {
@@ -2529,7 +2615,7 @@ let SonicIllustration = class extends Subscriber(s$1) {
     this.className = "";
   }
   render() {
-    return p` <div class="${this.className} sonic-img-container">
+    return p$1` <div class="${this.className} sonic-img-container">
       <picture
         ><img src="${this.illustration}" loading="${this.loadingMode}" alt=""
       /></picture>
@@ -2554,30 +2640,30 @@ SonicIllustration.styles = r$5`
     }
     
   `;
-__decorateClass$5([
+__decorateClass$7([
   e$4({ type: String })
 ], SonicIllustration.prototype, "illustration", 2);
-__decorateClass$5([
+__decorateClass$7([
   e$4({ type: String })
 ], SonicIllustration.prototype, "loadingMode", 2);
-__decorateClass$5([
+__decorateClass$7([
   e$4({ type: String })
 ], SonicIllustration.prototype, "ratio", 2);
-__decorateClass$5([
+__decorateClass$7([
   e$4({ type: String })
 ], SonicIllustration.prototype, "className", 2);
-SonicIllustration = __decorateClass$5([
+SonicIllustration = __decorateClass$7([
   n$2("sonic-illustration")
 ], SonicIllustration);
-var __defProp$4 = Object.defineProperty;
-var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
-var __decorateClass$4 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target;
+var __defProp$6 = Object.defineProperty;
+var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
+var __decorateClass$6 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(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$4(target, key, result);
+    __defProp$6(target, key, result);
   return result;
 };
 let SonicGiftcard = class extends Subscriber(s$1) {
@@ -2585,9 +2671,10 @@ let SonicGiftcard = class extends Subscriber(s$1) {
     super(...arguments);
     this.title = "";
     this.body = "";
+    this.status = "";
   }
   render() {
-    return p`
+    return p$1`
       <div class="sonic-giftcard-item">
         <div class="sonic-giftcard-illustration">
           <sonic-illustration></sonic-illustration>
@@ -2595,12 +2682,10 @@ let SonicGiftcard = class extends Subscriber(s$1) {
         <div class="sonic-giftcard-text">
           <div class="sonic-giftcard-title">${this.title}</div>
           <div class="sonic-giftcard-body">
-            <sonic-text-formatted
-              .html=${this.body}
-              leading="tight"
-            ></sonic-text-formatted>
+            <sonic-text-formatted .html=${this.body} leading="tight"></sonic-text-formatted>
           </div>
-          <sonic-prices-form></sonic-prices-form>
+          ${this.status == "on_sale" ? p$1`<sonic-prices-form></sonic-prices-form>` : ""}
+          ${this.status == "only_visible" ? p$1`<div class="sonic-indispo"> Non disponible en ligne</div>` : ""}
         </div>
       </div>
     `;
@@ -2646,20 +2731,33 @@ SonicGiftcard.styles = [
       .sonic-giftcard-text {
         align-self: center;
       }
+
+      .sonic-indispo {
+        display:inline-block;
+        padding:.25em 1em;
+        font-size:.85rem;
+        font-weight:bold;
+        border-radius:5rem;
+        background:var(--sc-warning);
+        color:var(--sc-warning-content);
+      }
+      
     `
 ];
-__decorateClass$4([
+__decorateClass$6([
   e$4({ type: String })
 ], SonicGiftcard.prototype, "title", 2);
-__decorateClass$4([
+__decorateClass$6([
   e$4({ type: String })
 ], SonicGiftcard.prototype, "body", 2);
-SonicGiftcard = __decorateClass$4([
+__decorateClass$6([
+  e$4({ type: String })
+], SonicGiftcard.prototype, "status", 2);
+SonicGiftcard = __decorateClass$6([
   n$2("sonic-giftcard")
 ], SonicGiftcard);
 const cssButton = r$5`
-    button {
-
+    .btn {
       all: unset;
       cursor: pointer;
       text-align: center;
@@ -2674,24 +2772,24 @@ const cssButton = r$5`
       padding-inline: var(--sc-btn-px, 0.8em);
     }
 
-    button:hover,
-    button:focus {
+    .btn:hover,
+    .btn:focus {
       filter:brightness(.99)
     }
 
-    button:active{
+    .btn:active{
       transform:scale(.98)
     }
 `;
-var __defProp$3 = Object.defineProperty;
-var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
-var __decorateClass$3 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target;
+var __defProp$5 = Object.defineProperty;
+var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
+var __decorateClass$5 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(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$3(target, key, result);
+    __defProp$5(target, key, result);
   return result;
 };
 let SonicPricesButton = class extends Subscriber(s$1) {
@@ -2745,14 +2843,14 @@ let SonicPricesButton = class extends Subscriber(s$1) {
   render() {
     if (!this.props)
       return;
-    const icon2 = this.displayBtnIcon ? p`<i class="${this.btnIconClass}"></i>` : "";
-    const infoTooltip = this.price_help_text ? p`<div class="sonic-price-btn-help"><sonic-tooltip tooltipText="${this.price_help_text}">
+    const icon2 = this.displayBtnIcon ? p$1`<i class="${this.btnIconClass}"></i>` : "";
+    const infoTooltip = this.price_help_text ? p$1`<div class="sonic-price-btn-help"><sonic-tooltip tooltipText="${this.price_help_text}">
                   <span>?</span>
               </sonic-tooltip></div>` : "";
-    return p`
+    return p$1`
             
-            <button class="sonic-price-btn ${this.btnClass} ${!this.props.price_available || this.loading ? "sonic-price-disabled" : ""}" @click="${this._handleClick}">
-                ${this.displayPriceName && p`<span class="${this.priceNameClass} sonic-price-btn-name">
+            <button class="btn sonic-price-btn ${this.btnClass} ${!this.props.price_available || this.loading ? "sonic-price-disabled" : ""}" @click="${this._handleClick}">
+                ${this.displayPriceName && p$1`<span class="${this.priceNameClass} sonic-price-btn-name">
                     ${this.price_name}
                 </span>`}
                 <span> ${icon2} ${this._cleanPrice(this.price_amount)}€ </span>
@@ -2799,51 +2897,51 @@ SonicPricesButton.styles = [
 
         `
 ];
-__decorateClass$3([
+__decorateClass$5([
   e$4({ type: String })
 ], SonicPricesButton.prototype, "price_amount", 2);
-__decorateClass$3([
+__decorateClass$5([
   e$4({ type: String })
 ], SonicPricesButton.prototype, "giftcard_id", 2);
-__decorateClass$3([
+__decorateClass$5([
   e$4({ type: String })
 ], SonicPricesButton.prototype, "price_name", 2);
-__decorateClass$3([
+__decorateClass$5([
   e$4({ type: String })
 ], SonicPricesButton.prototype, "price_id", 2);
-__decorateClass$3([
+__decorateClass$5([
   e$4({ type: String })
 ], SonicPricesButton.prototype, "btnClass", 2);
-__decorateClass$3([
+__decorateClass$5([
   e$4({ type: Boolean })
 ], SonicPricesButton.prototype, "displayBtnIcon", 2);
-__decorateClass$3([
+__decorateClass$5([
   e$4({ type: Boolean })
 ], SonicPricesButton.prototype, "displayPriceName", 2);
-__decorateClass$3([
+__decorateClass$5([
   e$4({ type: String })
 ], SonicPricesButton.prototype, "priceNameClass", 2);
-__decorateClass$3([
+__decorateClass$5([
   e$4({ type: String })
 ], SonicPricesButton.prototype, "price_help_text", 2);
-__decorateClass$3([
+__decorateClass$5([
   e$4({ type: String })
 ], SonicPricesButton.prototype, "btnIconClass", 2);
-__decorateClass$3([
+__decorateClass$5([
   e$4()
 ], SonicPricesButton.prototype, "loading", 2);
-SonicPricesButton = __decorateClass$3([
+SonicPricesButton = __decorateClass$5([
   n$2("sonic-price-button")
 ], SonicPricesButton);
-var __defProp$2 = Object.defineProperty;
-var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
-var __decorateClass$2 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
+var __decorateClass$4 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(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$2(target, key, result);
+    __defProp$4(target, key, result);
   return result;
 };
 let SonicPricesForm = class extends Subscriber(s$1) {
@@ -2863,11 +2961,11 @@ let SonicPricesForm = class extends Subscriber(s$1) {
   render() {
     if (this.prices.length === 0)
       return;
-    return p`
+    return p$1`
       <div class="${this.className} sonic-prices-list">
-          ${c(this.prices, (price) => price.price_id, (price, index) => p`<div class="${this.itemClass} sonic-prices-list-item" ><sonic-price-button
-              .props=${this.makeShadow(this.props, price)}
-              dataProvider="${this.dataProvider}/${index}"
+          ${c(this.prices, (price) => price.price_id, (price, index) => price && p$1`<div class="${this.itemClass} sonic-prices-list-item" ><sonic-price-button
+              dataPath="prices.${index}"
+              giftcard_id="${this.giftcard_id}"
               .btnClass=${this.btnClass}
               .displayBtnIcon=${this.displayBtnIcon}
               .priceNameClass=${this.priceNameClass}
@@ -2893,48 +2991,227 @@ SonicPricesForm.styles = [
         }
     `
 ];
-__decorateClass$2([
+__decorateClass$4([
   e$4({ type: String })
 ], SonicPricesForm.prototype, "giftcard_id", 2);
-__decorateClass$2([
+__decorateClass$4([
   e$4({ type: Array })
 ], SonicPricesForm.prototype, "prices", 2);
-__decorateClass$2([
+__decorateClass$4([
   e$4({ type: Boolean })
 ], SonicPricesForm.prototype, "wrapper", 2);
-__decorateClass$2([
+__decorateClass$4([
   e$4({ type: Boolean })
 ], SonicPricesForm.prototype, "displayBtnIcon", 2);
-__decorateClass$2([
+__decorateClass$4([
   e$4({ type: Boolean })
 ], SonicPricesForm.prototype, "displayPriceName", 2);
-__decorateClass$2([
+__decorateClass$4([
   e$4({ type: String })
 ], SonicPricesForm.prototype, "className", 2);
-__decorateClass$2([
+__decorateClass$4([
   e$4({ type: String })
 ], SonicPricesForm.prototype, "itemClass", 2);
-__decorateClass$2([
+__decorateClass$4([
   e$4({ type: String })
 ], SonicPricesForm.prototype, "btnClass", 2);
-__decorateClass$2([
+__decorateClass$4([
   e$4({ type: String })
 ], SonicPricesForm.prototype, "iconClass", 2);
-__decorateClass$2([
+__decorateClass$4([
   e$4({ type: String })
 ], SonicPricesForm.prototype, "priceNameClass", 2);
-SonicPricesForm = __decorateClass$2([
+SonicPricesForm = __decorateClass$4([
   n$2("sonic-prices-form")
 ], SonicPricesForm);
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
-var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
+var __decorateClass$3 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(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$1(target, key, result);
+    __defProp$3(target, key, result);
+  return result;
+};
+let SonicButton = class extends Subscriber(s$1) {
+  constructor() {
+    super(...arguments);
+    this.type = "";
+    this.variant = "";
+    this.size = "";
+    this.shape = "";
+    this.className = "";
+    this.href = "";
+  }
+  render() {
+    const btn = p$1`<button
+      class="${this.className}
+                  sonic-btn
+                  sonic-btn-xs
+                  ${this.variant}
+                  "
+    >
+      <span>
+        <slot name="prefix"></slot>
+        <slot></slot>
+        <slot name="suffix"></slot>
+      </span>
+    </button>`;
+    return this.href ? p$1`<a href="${this.href}" class="sonic-btn-link"> ${btn}</a>` : p$1`${btn}`;
+  }
+};
+SonicButton.styles = [
+  r$5`
+
+      button {
+        all: unset;
+        box-sizing: border-box;
+        
+        --btn-height: 2.5em;
+        --btn-border-color:transparent;
+        --sc-btn-bg:var(--sc-base-200, #e5e7eb);
+        --sc-btn-color: var(--sc-content, #1f2937)
+        --sc-btn-ff:inherit;
+        --sc-btn-fs:1rem;
+        --sc-btn-py:.6em;
+        --sc-btn-px:1.1em;
+        
+        cursor: pointer;
+        text-align: center;
+        line-height: 1.2;
+        border-radius: var(--sc-btn-rounded);
+
+        background:var(--sc-btn-bg) ;
+        color: var(--sc-btn-color);
+
+        font-family: var(--sc-btn-ff);
+        font-size: var(--sc-btn-fs);
+
+        padding-block: var(--sc-btn-py);
+        padding-inline: var(--sc-btn-px);
+
+        border-width:var(--btn-)
+        height:var(--btn-height);
+      }
+
+      button:hover,
+      button:focus {
+        filter: brightness(0.98);
+      }
+
+      button:active {
+        filter: brightness(0.92);
+      }
+
+      /*TYPES*/
+      :host([type="primary"]) button {
+        --sc-btn-color: var(--sc-primary-content);
+        --sc-btn-bg: var(--sc-primary);
+      }
+      :host([type="warning"]) button {
+        --sc-btn-color: var(--sc-warning-content);
+        --sc-btn-bg: var(--sc-warning);
+      }
+      :host([type="danger"]) button {
+        --sc-btn-color: var(--sc-danger-content);
+        --sc-btn-bg: var(--sc-danger);
+      }
+      :host([type="info"]) button {
+        --sc-btn-color: var(--sc-info-content);
+        --sc-btn-bg: var(--sc-info);
+      }
+      :host([type="success"]) button {
+        --sc-btn-color: var(--sc-success-content);
+        --sc-btn-bg: var(--sc-success);
+      }
+      :host([type="dark"]) button {
+        --sc-btn-color: var(--sc-base);
+        --sc-btn-bg: var(--sc-base-content);
+      }
+
+
+      /*Variant*/
+      :host([size="xs"]) button {
+        font-size:.75rem;
+      }
+      :host([size="sm"]) button {
+        font-size:.85rem;
+      }
+      :host([size="lg"]) button {
+        font-size:1.2rem;
+      }
+
+
+
+      /*Variant*/
+      :host([variant="ghost"]:not([type])) button {
+        color: var(--sc-btn-color);
+        background: transparent;
+      }
+
+      :host([variant="ghost"][type]) button {
+        color: var(--sc-btn-bg);
+        background: transparent;
+      }
+
+      :host([variant="ghost"]) button:focus,
+      :host([variant="ghost"]) button:hover {
+        background: var(--sc-base-200);
+      }
+
+      /*Shape*/
+      :host([shape="circle"]) button {
+        border-radius: 50%;
+      }
+
+      :host([shape="circle"]) button,
+      :host([shape="square"]) button {
+        width: var(--btn-height);
+        height: var(--btn-height);
+        overflow: hidden;
+        padding: 0;
+        align-items: center;
+        justify-content: 0;
+      }
+
+      .sonic-btn-link {
+        color: unset;
+        display:contents;
+      }
+    `
+];
+__decorateClass$3([
+  e$4({ type: String })
+], SonicButton.prototype, "type", 2);
+__decorateClass$3([
+  e$4({ type: String })
+], SonicButton.prototype, "variant", 2);
+__decorateClass$3([
+  e$4({ type: String })
+], SonicButton.prototype, "size", 2);
+__decorateClass$3([
+  e$4({ type: String })
+], SonicButton.prototype, "shape", 2);
+__decorateClass$3([
+  e$4({ type: String })
+], SonicButton.prototype, "className", 2);
+__decorateClass$3([
+  e$4({ type: String })
+], SonicButton.prototype, "href", 2);
+SonicButton = __decorateClass$3([
+  n$2("sonic-button")
+], SonicButton);
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
+var __decorateClass$2 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(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$2(target, key, result);
   return result;
 };
 let SonicTooltip = class extends Subscriber(s$1) {
@@ -2944,7 +3221,7 @@ let SonicTooltip = class extends Subscriber(s$1) {
     this.className = "";
   }
   render() {
-    return p`<div
+    return p$1`<div
       data-tooltip-text="${this.tooltipText}"
       class="${this.className} sonic-tooltip"
     >
@@ -2956,6 +3233,8 @@ SonicTooltip.styles = [
   r$5`
       .sonic-tooltip {
         position: relative;
+      display:flex;
+      align-items-center;
       }
       .sonic-tooltip:before {
         position: absolute;
@@ -2973,21 +3252,187 @@ SonicTooltip.styles = [
         border-radius: 0.25rem;
         color:var(--sc-base, #fff);
         z-index:999;
+        display:none;
       }
       .sonic-tooltip:hover:before {
         opacity: 1;
+        display:block;
       }
     `
 ];
-__decorateClass$1([
+__decorateClass$2([
   e$4({ type: String })
 ], SonicTooltip.prototype, "tooltipText", 2);
-__decorateClass$1([
+__decorateClass$2([
   e$4({ type: String })
 ], SonicTooltip.prototype, "className", 2);
-SonicTooltip = __decorateClass$1([
+SonicTooltip = __decorateClass$2([
   n$2("sonic-tooltip")
 ], SonicTooltip);
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(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$1(target, key, result);
+  return result;
+};
+let SonicModal = class extends Subscriber(s$1) {
+  constructor() {
+    super(...arguments);
+    this.className = "";
+    this.title = "";
+    this.text = "";
+    this.visibility = "visible";
+  }
+  render() {
+    if (this.visibility == "hidden")
+      return p$1``;
+    return p$1`<div
+        class="sonic-modal-wrapper"
+        ${$({
+      out: f
+    })}
+      >
+        <div
+          class="${this.className} sonic-modal"
+          ${$({
+      in: [{ transform: "translateY(100%) 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="sonic-modal-text-container">
+            <div class="sonic-modal-title">${this.title}</div>
+            <div class="sonic-modal-text">${this.text}</div>
+            <slot name="text"></slot>
+          </div>
+
+          <div class="sonic-modal-actions">
+            <sonic-button type="success">Mon action</sonic-button>
+            <slot name="actions"></slot>
+          </div>
+        </div>
+      </div>
+
+      <div
+        class="sonic-modal-overlay"
+        @click="${() => this.hide()}"
+        ${$({
+      in: p,
+      out: f
+    })}
+      ></div> `;
+  }
+  hide() {
+    this.visibility = "hidden";
+  }
+  static show(conf) {
+    if (!document.querySelector("sonic-modal")) {
+      let ModalComponent2 = document.createElement("sonic-modal");
+      ModalComponent2.setAttribute("styled", new Boolean(conf.styled).toString() || "true");
+      let container = document.querySelector("sonic-theme") || document.body;
+      container.appendChild(ModalComponent2);
+    }
+    let ModalComponent = document.querySelector("sonic-modal");
+    conf.title ? ModalComponent.title = conf.title : "";
+    conf.text ? ModalComponent.text = conf.text : "";
+    ModalComponent.visibility = "visible";
+  }
+};
+SonicModal.styles = [
+  r$5`
+      * {
+        box-sizing: border-box;
+      }
+
+      .sonic-modal-wrapper {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        min-height: 20rem;
+        z-index: 990;
+        text-align: center;
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+      }
+
+      .sonic-modal {
+        width: 100%;
+        background: var(--sc-base);
+        min-height: 20rem;
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+        align-items: center;
+        padding: 1.25rem;
+        box-shadow: var(--sc-shadow-lg);
+        border-radius: var(--sc-rounded-lg) var(--sc-rounded-lg) 0 0;
+      }
+
+      .sonic-modal-text-container {
+        max-height: 20rem;
+        margin-block: auto;
+      }
+
+      .sonic-modal-title {
+        font-size: 2rem;
+        font-weight: bold;
+        line-height: 1.15;
+        margin-bottom: 0.25em;
+      }
+      .sonic-modal-overlay {
+        background: var(--sc-base-200);
+        inset: 0;
+        z-index: 900;
+        opacity: 0.8;
+        position: fixed;
+      }
+
+      @media (min-width: 768px) {
+        .sonic-modal-wrapper {
+          max-width: 60ch;
+          top: 50%;
+          left: 50%;
+          bottom: auto;
+          right: auto;
+          transform: translateX(-50%) translateY(-50%);
+        }
+
+        .sonic-modal {
+          max-width: 60ch;
+          top: 50%;
+          left: 50%;
+          bottom: auto;
+          right: auto;
+          border-radius: var(--sc-rounded-lg);
+        }
+      }
+    `
+];
+__decorateClass$1([
+  e$4({ type: String })
+], SonicModal.prototype, "className", 2);
+__decorateClass$1([
+  e$4({ type: String, reflect: false })
+], SonicModal.prototype, "title", 2);
+__decorateClass$1([
+  e$4({ type: String })
+], SonicModal.prototype, "text", 2);
+__decorateClass$1([
+  t$1()
+], SonicModal.prototype, "visibility", 2);
+SonicModal = __decorateClass$1([
+  n$2("sonic-modal")
+], SonicModal);
+if (typeof window !== "undefined") {
+  let win = window;
+  win.SonicModal = SonicModal;
+}
 const light = r$5`
   :host([theme="light"]) {
     --sc-primary: #6366f1;
@@ -3086,7 +3531,7 @@ const dark = r$5`
     --sc-headings-font-weight: bold;
     --sc-headings-text-transform: none;
 
-    --sc-btn-rounded: 0.25em;
+    --sc-btn-rounded: 5rem;
     --sc-rounded: 0.35rem;
     --sc-rounded-lg: 0.8rem;
     --sc-placeholder-bg: rgba(0, 0, 0, 0.1);
@@ -3148,7 +3593,7 @@ let SonicTheme = class extends Subscriber(s$1) {
     this.theme = "light";
   }
   render() {
-    return p`<slot></slot>`;
+    return p$1`<slot></slot>`;
   }
 };
 SonicTheme.styles = [
@@ -3159,11 +3604,10 @@ SonicTheme.styles = [
   r$5`
     :host {
       --sc-font-size-root: 1rem;
-      color:var(--sc-base-content);
     }
     :host([background]){
-      display:block;
-      background:var(--sc-base);
+      display:block !important;
+      background:var(--sc-base) !important;
     }
     
     `