@decidables/decidables-elements 0.3.4 → 0.4.0

package/lib/decidablesElements.umd.js

@@ -9,21 +9,21 @@
    * Copyright 2019 Google LLC
    * SPDX-License-Identifier: BSD-3-Clause
    */
-  const t$2 = window,
-    e$4 = t$2.ShadowRoot && (void 0 === t$2.ShadyCSS || t$2.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype,
-    s$5 = Symbol(),
-    n$5 = new WeakMap();
-  let o$5 = class o {
+  const t$1 = window,
+    e$2 = t$1.ShadowRoot && (void 0 === t$1.ShadyCSS || t$1.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype,
+    s$3 = Symbol(),
+    n$3 = new WeakMap();
+  let o$3 = class o {
     constructor(t, e, n) {
-      if (this._$cssResult$ = !0, n !== s$5) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+      if (this._$cssResult$ = !0, n !== s$3) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
       this.cssText = t, this.t = e;
     }
     get styleSheet() {
       let t = this.o;
       const s = this.t;
-      if (e$4 && void 0 === t) {
+      if (e$2 && void 0 === t) {
         const e = void 0 !== s && 1 === s.length;
-        e && (t = n$5.get(s)), void 0 === t && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), e && n$5.set(s, t));
+        e && (t = n$3.get(s)), void 0 === t && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), e && n$3.set(s, t));
       }
       return t;
     }
@@ -31,18 +31,26 @@
       return this.cssText;
     }
   };
-  const r$4 = t => new o$5("string" == typeof t ? t : t + "", void 0, s$5),
-    S$2 = (s, n) => {
-      e$4 ? s.adoptedStyleSheets = n.map(t => t instanceof CSSStyleSheet ? t : t.styleSheet) : n.forEach(e => {
+  const r$2 = t => new o$3("string" == typeof t ? t : t + "", void 0, s$3),
+    i$1 = (t, ...e) => {
+      const n = 1 === t.length ? t[0] : e.reduce((e, s, n) => e + (t => {
+        if (!0 === t._$cssResult$) return t.cssText;
+        if ("number" == typeof t) return t;
+        throw Error("Value passed to 'css' function must be a 'css' function result: " + t + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
+      })(s) + t[n + 1], t[0]);
+      return new o$3(n, t, s$3);
+    },
+    S$1 = (s, n) => {
+      e$2 ? s.adoptedStyleSheets = n.map(t => t instanceof CSSStyleSheet ? t : t.styleSheet) : n.forEach(e => {
         const n = document.createElement("style"),
-          o = t$2.litNonce;
+          o = t$1.litNonce;
         void 0 !== o && n.setAttribute("nonce", o), n.textContent = e.cssText, s.appendChild(n);
       });
     },
-    c$1 = e$4 ? t => t : t => t instanceof CSSStyleSheet ? (t => {
+    c$1 = e$2 ? t => t : t => t instanceof CSSStyleSheet ? (t => {
       let e = "";
       for (const s of t.cssRules) e += s.cssText;
-      return r$4(e);
+      return r$2(e);
     })(t) : t;
 
   /**
@@ -50,16 +58,16 @@
    * Copyright 2017 Google LLC
    * SPDX-License-Identifier: BSD-3-Clause
    */
-  var s$4;
-  const e$3 = window,
-    r$3 = e$3.trustedTypes,
-    h$2 = r$3 ? r$3.emptyScript : "",
-    o$4 = e$3.reactiveElementPolyfillSupport,
-    n$4 = {
+  var s$2;
+  const e$1 = window,
+    r$1 = e$1.trustedTypes,
+    h$1 = r$1 ? r$1.emptyScript : "",
+    o$2 = e$1.reactiveElementPolyfillSupport,
+    n$2 = {
       toAttribute(t, i) {
         switch (i) {
           case Boolean:
-            t = t ? h$2 : null;
+            t = t ? h$1 : null;
             break;
           case Object:
           case Array:
@@ -87,17 +95,18 @@
         return s;
       }
     },
-    a$2 = (t, i) => i !== t && (i == i || t == t),
-    l$4 = {
+    a$1 = (t, i) => i !== t && (i == i || t == t),
+    l$3 = {
       attribute: !0,
       type: String,
-      converter: n$4,
+      converter: n$2,
       reflect: !1,
-      hasChanged: a$2
-    };
-  let d$1 = class d extends HTMLElement {
+      hasChanged: a$1
+    },
+    d$1 = "finalized";
+  let u$1 = class u extends HTMLElement {
     constructor() {
-      super(), this._$Ei = new Map(), this.isUpdatePending = !1, this.hasUpdated = !1, this._$El = null, this.u();
+      super(), this._$Ei = new Map(), this.isUpdatePending = !1, this.hasUpdated = !1, this._$El = null, this._$Eu();
     }
     static addInitializer(t) {
       var i;
@@ -111,7 +120,7 @@
         void 0 !== e && (this._$Ev.set(e, s), t.push(e));
       }), t;
     }
-    static createProperty(t, i = l$4) {
+    static createProperty(t, i = l$3) {
       if (i.state && (i.attribute = !1), this.finalize(), this.elementProperties.set(t, i), !i.noAccessor && !this.prototype.hasOwnProperty(t)) {
         const s = "symbol" == typeof t ? Symbol() : "__" + t,
           e = this.getPropertyDescriptor(t, s, i);
@@ -132,11 +141,11 @@
       };
     }
     static getPropertyOptions(t) {
-      return this.elementProperties.get(t) || l$4;
+      return this.elementProperties.get(t) || l$3;
     }
     static finalize() {
-      if (this.hasOwnProperty("finalized")) return !1;
-      this.finalized = !0;
+      if (this.hasOwnProperty(d$1)) return !1;
+      this[d$1] = !0;
       const t = Object.getPrototypeOf(this);
       if (t.finalize(), void 0 !== t.h && (this.h = [...t.h]), this.elementProperties = new Map(t.elementProperties), this._$Ev = new Map(), this.hasOwnProperty("properties")) {
         const t = this.properties,
@@ -157,7 +166,7 @@
       const s = i.attribute;
       return !1 === s ? void 0 : "string" == typeof s ? s : "string" == typeof t ? t.toLowerCase() : void 0;
     }
-    u() {
+    _$Eu() {
       var t;
       this._$E_ = new Promise(t => this.enableUpdating = t), this._$AL = new Map(), this._$Eg(), this.requestUpdate(), null === (t = this.constructor.h) || void 0 === t || t.forEach(t => t(this));
     }
@@ -177,7 +186,7 @@
     createRenderRoot() {
       var t;
       const s = null !== (t = this.shadowRoot) && void 0 !== t ? t : this.attachShadow(this.constructor.shadowRootOptions);
-      return S$2(s, this.constructor.elementStyles), s;
+      return S$1(s, this.constructor.elementStyles), s;
     }
     connectedCallback() {
       var t;
@@ -197,11 +206,11 @@
     attributeChangedCallback(t, i, s) {
       this._$AK(t, s);
     }
-    _$EO(t, i, s = l$4) {
+    _$EO(t, i, s = l$3) {
       var e;
       const r = this.constructor._$Ep(t, s);
       if (void 0 !== r && !0 === s.reflect) {
-        const h = (void 0 !== (null === (e = s.converter) || void 0 === e ? void 0 : e.toAttribute) ? s.converter : n$4).toAttribute(i, s.type);
+        const h = (void 0 !== (null === (e = s.converter) || void 0 === e ? void 0 : e.toAttribute) ? s.converter : n$2).toAttribute(i, s.type);
         this._$El = t, null == h ? this.removeAttribute(r) : this.setAttribute(r, h), this._$El = null;
       }
     }
@@ -213,13 +222,13 @@
         const t = e.getPropertyOptions(r),
           h = "function" == typeof t.converter ? {
             fromAttribute: t.converter
-          } : void 0 !== (null === (s = t.converter) || void 0 === s ? void 0 : s.fromAttribute) ? t.converter : n$4;
+          } : void 0 !== (null === (s = t.converter) || void 0 === s ? void 0 : s.fromAttribute) ? t.converter : n$2;
         this._$El = r, this[r] = h.fromAttribute(i, t.type), this._$El = null;
       }
     }
     requestUpdate(t, i, s) {
       let e = !0;
-      void 0 !== t && (((s = s || this.constructor.getPropertyOptions(t)).hasChanged || a$2)(this[t], i) ? (this._$AL.has(t) || this._$AL.set(t, i), !0 === s.reflect && this._$El !== t && (void 0 === this._$EC && (this._$EC = new Map()), this._$EC.set(t, s))) : e = !1), !this.isUpdatePending && e && (this._$E_ = this._$Ej());
+      void 0 !== t && (((s = s || this.constructor.getPropertyOptions(t)).hasChanged || a$1)(this[t], i) ? (this._$AL.has(t) || this._$AL.set(t, i), !0 === s.reflect && this._$El !== t && (void 0 === this._$EC && (this._$EC = new Map()), this._$EC.set(t, s))) : e = !1), !this.isUpdatePending && e && (this._$E_ = this._$Ej());
     }
     async _$Ej() {
       this.isUpdatePending = !0;
@@ -276,37 +285,37 @@
     updated(t) {}
     firstUpdated(t) {}
   };
-  d$1.finalized = !0, d$1.elementProperties = new Map(), d$1.elementStyles = [], d$1.shadowRootOptions = {
+  u$1[d$1] = !0, u$1.elementProperties = new Map(), u$1.elementStyles = [], u$1.shadowRootOptions = {
     mode: "open"
-  }, null == o$4 || o$4({
-    ReactiveElement: d$1
-  }), (null !== (s$4 = e$3.reactiveElementVersions) && void 0 !== s$4 ? s$4 : e$3.reactiveElementVersions = []).push("1.6.1");
+  }, null == o$2 || o$2({
+    ReactiveElement: u$1
+  }), (null !== (s$2 = e$1.reactiveElementVersions) && void 0 !== s$2 ? s$2 : e$1.reactiveElementVersions = []).push("1.6.3");
 
   /**
    * @license
    * Copyright 2017 Google LLC
    * SPDX-License-Identifier: BSD-3-Clause
    */
-  var t$1;
-  const i$1 = window,
-    s$3 = i$1.trustedTypes,
-    e$2 = s$3 ? s$3.createPolicy("lit-html", {
+  var t;
+  const i = window,
+    s$1 = i.trustedTypes,
+    e = s$1 ? s$1.createPolicy("lit-html", {
       createHTML: t => t
     }) : void 0,
-    o$3 = "$lit$",
-    n$3 = `lit$${(Math.random() + "").slice(9)}$`,
-    l$3 = "?" + n$3,
-    h$1 = `<${l$3}>`,
-    r$2 = document,
-    d = () => r$2.createComment(""),
-    u = t => null === t || "object" != typeof t && "function" != typeof t,
+    o$1 = "$lit$",
+    n$1 = `lit$${(Math.random() + "").slice(9)}$`,
+    l$2 = "?" + n$1,
+    h = `<${l$2}>`,
+    r = document,
+    u = () => r.createComment(""),
+    d = t => null === t || "object" != typeof t && "function" != typeof t,
     c = Array.isArray,
     v = t => c(t) || "function" == typeof (null == t ? void 0 : t[Symbol.iterator]),
-    a$1 = "[ \t\n\f\r]",
+    a = "[ \t\n\f\r]",
     f = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,
     _ = /-->/g,
     m = />/g,
-    p = RegExp(`>|${a$1}(?:([^\\s"'>=/]+)(${a$1}*=${a$1}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`, "g"),
+    p = RegExp(`>|${a}(?:([^\\s"'>=/]+)(${a}*=${a}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`, "g"),
     g = /'/g,
     $ = /"/g,
     y = /^(?:script|style|textarea|title)$/i,
@@ -320,28 +329,30 @@
     T = Symbol.for("lit-noChange"),
     A = Symbol.for("lit-nothing"),
     E = new WeakMap(),
-    C = r$2.createTreeWalker(r$2, 129, null, !1),
-    P = (t, i) => {
-      const s = t.length - 1,
-        l = [];
-      let r,
-        d = 2 === i ? "<svg>" : "",
-        u = f;
-      for (let i = 0; i < s; i++) {
-        const s = t[i];
-        let e,
-          c,
-          v = -1,
-          a = 0;
-        for (; a < s.length && (u.lastIndex = a, c = u.exec(s), null !== c);) a = u.lastIndex, u === f ? "!--" === c[1] ? u = _ : void 0 !== c[1] ? u = m : void 0 !== c[2] ? (y.test(c[2]) && (r = RegExp("</" + c[2], "g")), u = p) : void 0 !== c[3] && (u = p) : u === p ? ">" === c[0] ? (u = null != r ? r : f, v = -1) : void 0 === c[1] ? v = -2 : (v = u.lastIndex - c[2].length, e = c[1], u = void 0 === c[3] ? p : '"' === c[3] ? $ : g) : u === $ || u === g ? u = p : u === _ || u === m ? u = f : (u = p, r = void 0);
-        const w = u === p && t[i + 1].startsWith("/>") ? " " : "";
-        d += u === f ? s + h$1 : v >= 0 ? (l.push(e), s.slice(0, v) + o$3 + s.slice(v) + n$3 + w) : s + n$3 + (-2 === v ? (l.push(void 0), i) : w);
-      }
-      const c = d + (t[s] || "<?>") + (2 === i ? "</svg>" : "");
-      if (!Array.isArray(t) || !t.hasOwnProperty("raw")) throw Error("invalid template strings array");
-      return [void 0 !== e$2 ? e$2.createHTML(c) : c, l];
-    };
-  class V {
+    C = r.createTreeWalker(r, 129, null, !1);
+  function P(t, i) {
+    if (!Array.isArray(t) || !t.hasOwnProperty("raw")) throw Error("invalid template strings array");
+    return void 0 !== e ? e.createHTML(i) : i;
+  }
+  const V = (t, i) => {
+    const s = t.length - 1,
+      e = [];
+    let l,
+      r = 2 === i ? "<svg>" : "",
+      u = f;
+    for (let i = 0; i < s; i++) {
+      const s = t[i];
+      let d,
+        c,
+        v = -1,
+        a = 0;
+      for (; a < s.length && (u.lastIndex = a, c = u.exec(s), null !== c);) a = u.lastIndex, u === f ? "!--" === c[1] ? u = _ : void 0 !== c[1] ? u = m : void 0 !== c[2] ? (y.test(c[2]) && (l = RegExp("</" + c[2], "g")), u = p) : void 0 !== c[3] && (u = p) : u === p ? ">" === c[0] ? (u = null != l ? l : f, v = -1) : void 0 === c[1] ? v = -2 : (v = u.lastIndex - c[2].length, d = c[1], u = void 0 === c[3] ? p : '"' === c[3] ? $ : g) : u === $ || u === g ? u = p : u === _ || u === m ? u = f : (u = p, l = void 0);
+      const w = u === p && t[i + 1].startsWith("/>") ? " " : "";
+      r += u === f ? s + h : v >= 0 ? (e.push(d), s.slice(0, v) + o$1 + s.slice(v) + n$1 + w) : s + n$1 + (-2 === v ? (e.push(void 0), i) : w);
+    }
+    return [P(t, r + (t[s] || "<?>") + (2 === i ? "</svg>" : "")), e];
+  };
+  class N {
     constructor({
       strings: t,
       _$litType$: i
@@ -349,11 +360,11 @@
       let h;
       this.parts = [];
       let r = 0,
-        u = 0;
+        d = 0;
       const c = t.length - 1,
         v = this.parts,
-        [a, f] = P(t, i);
-      if (this.el = V.createElement(a, e), C.currentNode = this.el.content, 2 === i) {
+        [a, f] = V(t, i);
+      if (this.el = N.createElement(a, e), C.currentNode = this.el.content, 2 === i) {
         const t = this.el.content,
           i = t.firstChild;
         i.remove(), t.append(...i.childNodes);
@@ -362,17 +373,17 @@
         if (1 === h.nodeType) {
           if (h.hasAttributes()) {
             const t = [];
-            for (const i of h.getAttributeNames()) if (i.endsWith(o$3) || i.startsWith(n$3)) {
-              const s = f[u++];
+            for (const i of h.getAttributeNames()) if (i.endsWith(o$1) || i.startsWith(n$1)) {
+              const s = f[d++];
               if (t.push(i), void 0 !== s) {
-                const t = h.getAttribute(s.toLowerCase() + o$3).split(n$3),
+                const t = h.getAttribute(s.toLowerCase() + o$1).split(n$1),
                   i = /([.?@])?(.*)/.exec(s);
                 v.push({
                   type: 1,
                   index: r,
                   name: i[2],
                   strings: t,
-                  ctor: "." === i[1] ? k : "?" === i[1] ? I : "@" === i[1] ? L : R
+                  ctor: "." === i[1] ? H : "?" === i[1] ? L : "@" === i[1] ? z : k
                 });
               } else v.push({
                 type: 6,
@@ -382,45 +393,45 @@
             for (const i of t) h.removeAttribute(i);
           }
           if (y.test(h.tagName)) {
-            const t = h.textContent.split(n$3),
+            const t = h.textContent.split(n$1),
               i = t.length - 1;
             if (i > 0) {
-              h.textContent = s$3 ? s$3.emptyScript : "";
-              for (let s = 0; s < i; s++) h.append(t[s], d()), C.nextNode(), v.push({
+              h.textContent = s$1 ? s$1.emptyScript : "";
+              for (let s = 0; s < i; s++) h.append(t[s], u()), C.nextNode(), v.push({
                 type: 2,
                 index: ++r
               });
-              h.append(t[i], d());
+              h.append(t[i], u());
             }
           }
-        } else if (8 === h.nodeType) if (h.data === l$3) v.push({
+        } else if (8 === h.nodeType) if (h.data === l$2) v.push({
           type: 2,
           index: r
         });else {
           let t = -1;
-          for (; -1 !== (t = h.data.indexOf(n$3, t + 1));) v.push({
+          for (; -1 !== (t = h.data.indexOf(n$1, t + 1));) v.push({
             type: 7,
             index: r
-          }), t += n$3.length - 1;
+          }), t += n$1.length - 1;
         }
         r++;
       }
     }
     static createElement(t, i) {
-      const s = r$2.createElement("template");
+      const s = r.createElement("template");
       return s.innerHTML = t, s;
     }
   }
-  function N(t, i, s = t, e) {
+  function S(t, i, s = t, e) {
     var o, n, l, h;
     if (i === T) return i;
     let r = void 0 !== e ? null === (o = s._$Co) || void 0 === o ? void 0 : o[e] : s._$Cl;
-    const d = u(i) ? void 0 : i._$litDirective$;
-    return (null == r ? void 0 : r.constructor) !== d && (null === (n = null == r ? void 0 : r._$AO) || void 0 === n || n.call(r, !1), void 0 === d ? r = void 0 : (r = new d(t), r._$AT(t, s, e)), void 0 !== e ? (null !== (l = (h = s)._$Co) && void 0 !== l ? l : h._$Co = [])[e] = r : s._$Cl = r), void 0 !== r && (i = N(t, r._$AS(t, i.values), r, e)), i;
+    const u = d(i) ? void 0 : i._$litDirective$;
+    return (null == r ? void 0 : r.constructor) !== u && (null === (n = null == r ? void 0 : r._$AO) || void 0 === n || n.call(r, !1), void 0 === u ? r = void 0 : (r = new u(t), r._$AT(t, s, e)), void 0 !== e ? (null !== (l = (h = s)._$Co) && void 0 !== l ? l : h._$Co = [])[e] = r : s._$Cl = r), void 0 !== r && (i = S(t, r._$AS(t, i.values), r, e)), i;
   }
-  let S$1 = class S {
+  class M {
     constructor(t, i) {
-      this.u = [], this._$AN = void 0, this._$AD = t, this._$AM = i;
+      this._$AV = [], this._$AN = void 0, this._$AD = t, this._$AM = i;
     }
     get parentNode() {
       return this._$AM.parentNode;
@@ -428,7 +439,7 @@
     get _$AU() {
       return this._$AM._$AU;
     }
-    v(t) {
+    u(t) {
       var i;
       const {
           el: {
@@ -436,34 +447,34 @@
           },
           parts: e
         } = this._$AD,
-        o = (null !== (i = null == t ? void 0 : t.creationScope) && void 0 !== i ? i : r$2).importNode(s, !0);
+        o = (null !== (i = null == t ? void 0 : t.creationScope) && void 0 !== i ? i : r).importNode(s, !0);
       C.currentNode = o;
       let n = C.nextNode(),
         l = 0,
         h = 0,
-        d = e[0];
-      for (; void 0 !== d;) {
-        if (l === d.index) {
+        u = e[0];
+      for (; void 0 !== u;) {
+        if (l === u.index) {
           let i;
-          2 === d.type ? i = new M(n, n.nextSibling, this, t) : 1 === d.type ? i = new d.ctor(n, d.name, d.strings, this, t) : 6 === d.type && (i = new z(n, this, t)), this.u.push(i), d = e[++h];
+          2 === u.type ? i = new R(n, n.nextSibling, this, t) : 1 === u.type ? i = new u.ctor(n, u.name, u.strings, this, t) : 6 === u.type && (i = new Z(n, this, t)), this._$AV.push(i), u = e[++h];
         }
-        l !== (null == d ? void 0 : d.index) && (n = C.nextNode(), l++);
+        l !== (null == u ? void 0 : u.index) && (n = C.nextNode(), l++);
       }
-      return o;
+      return C.currentNode = r, o;
     }
-    p(t) {
+    v(t) {
       let i = 0;
-      for (const s of this.u) void 0 !== s && (void 0 !== s.strings ? (s._$AI(t, s, i), i += s.strings.length - 2) : s._$AI(t[i])), i++;
+      for (const s of this._$AV) void 0 !== s && (void 0 !== s.strings ? (s._$AI(t, s, i), i += s.strings.length - 2) : s._$AI(t[i])), i++;
     }
-  };
-  class M {
+  }
+  class R {
     constructor(t, i, s, e) {
       var o;
-      this.type = 2, this._$AH = A, this._$AN = void 0, this._$AA = t, this._$AB = i, this._$AM = s, this.options = e, this._$Cm = null === (o = null == e ? void 0 : e.isConnected) || void 0 === o || o;
+      this.type = 2, this._$AH = A, this._$AN = void 0, this._$AA = t, this._$AB = i, this._$AM = s, this.options = e, this._$Cp = null === (o = null == e ? void 0 : e.isConnected) || void 0 === o || o;
     }
     get _$AU() {
       var t, i;
-      return null !== (i = null === (t = this._$AM) || void 0 === t ? void 0 : t._$AU) && void 0 !== i ? i : this._$Cm;
+      return null !== (i = null === (t = this._$AM) || void 0 === t ? void 0 : t._$AU) && void 0 !== i ? i : this._$Cp;
     }
     get parentNode() {
       let t = this._$AA.parentNode;
@@ -477,40 +488,40 @@
       return this._$AB;
     }
     _$AI(t, i = this) {
-      t = N(this, t, i), u(t) ? t === A || null == t || "" === t ? (this._$AH !== A && this._$AR(), this._$AH = A) : t !== this._$AH && t !== T && this.g(t) : void 0 !== t._$litType$ ? this.$(t) : void 0 !== t.nodeType ? this.T(t) : v(t) ? this.k(t) : this.g(t);
+      t = S(this, t, i), d(t) ? t === A || null == t || "" === t ? (this._$AH !== A && this._$AR(), this._$AH = A) : t !== this._$AH && t !== T && this._(t) : void 0 !== t._$litType$ ? this.g(t) : void 0 !== t.nodeType ? this.$(t) : v(t) ? this.T(t) : this._(t);
     }
-    S(t) {
+    k(t) {
       return this._$AA.parentNode.insertBefore(t, this._$AB);
     }
-    T(t) {
-      this._$AH !== t && (this._$AR(), this._$AH = this.S(t));
+    $(t) {
+      this._$AH !== t && (this._$AR(), this._$AH = this.k(t));
     }
-    g(t) {
-      this._$AH !== A && u(this._$AH) ? this._$AA.nextSibling.data = t : this.T(r$2.createTextNode(t)), this._$AH = t;
+    _(t) {
+      this._$AH !== A && d(this._$AH) ? this._$AA.nextSibling.data = t : this.$(r.createTextNode(t)), this._$AH = t;
     }
-    $(t) {
+    g(t) {
       var i;
       const {
           values: s,
           _$litType$: e
         } = t,
-        o = "number" == typeof e ? this._$AC(t) : (void 0 === e.el && (e.el = V.createElement(e.h, this.options)), e);
-      if ((null === (i = this._$AH) || void 0 === i ? void 0 : i._$AD) === o) this._$AH.p(s);else {
-        const t = new S$1(o, this),
-          i = t.v(this.options);
-        t.p(s), this.T(i), this._$AH = t;
+        o = "number" == typeof e ? this._$AC(t) : (void 0 === e.el && (e.el = N.createElement(P(e.h, e.h[0]), this.options)), e);
+      if ((null === (i = this._$AH) || void 0 === i ? void 0 : i._$AD) === o) this._$AH.v(s);else {
+        const t = new M(o, this),
+          i = t.u(this.options);
+        t.v(s), this.$(i), this._$AH = t;
       }
     }
     _$AC(t) {
       let i = E.get(t.strings);
-      return void 0 === i && E.set(t.strings, i = new V(t)), i;
+      return void 0 === i && E.set(t.strings, i = new N(t)), i;
     }
-    k(t) {
+    T(t) {
       c(this._$AH) || (this._$AH = [], this._$AR());
       const i = this._$AH;
       let s,
         e = 0;
-      for (const o of t) e === i.length ? i.push(s = new M(this.S(d()), this.S(d()), this, this.options)) : s = i[e], s._$AI(o), e++;
+      for (const o of t) e === i.length ? i.push(s = new R(this.k(u()), this.k(u()), this, this.options)) : s = i[e], s._$AI(o), e++;
       e < i.length && (this._$AR(s && s._$AB.nextSibling, e), i.length = e);
     }
     _$AR(t = this._$AA.nextSibling, i) {
@@ -522,10 +533,10 @@
     }
     setConnected(t) {
       var i;
-      void 0 === this._$AM && (this._$Cm = t, null === (i = this._$AP) || void 0 === i || i.call(this, t));
+      void 0 === this._$AM && (this._$Cp = t, null === (i = this._$AP) || void 0 === i || i.call(this, t));
     }
   }
-  class R {
+  class k {
     constructor(t, i, s, e, o) {
       this.type = 1, this._$AH = A, this._$AN = void 0, this.element = t, this.name = i, this._$AM = e, this.options = o, s.length > 2 || "" !== s[0] || "" !== s[1] ? (this._$AH = Array(s.length - 1).fill(new String()), this.strings = s) : this._$AH = A;
     }
@@ -538,10 +549,10 @@
     _$AI(t, i = this, s, e) {
       const o = this.strings;
       let n = !1;
-      if (void 0 === o) t = N(this, t, i, 0), n = !u(t) || t !== this._$AH && t !== T, n && (this._$AH = t);else {
+      if (void 0 === o) t = S(this, t, i, 0), n = !d(t) || t !== this._$AH && t !== T, n && (this._$AH = t);else {
         const e = t;
         let l, h;
-        for (t = o[0], l = 0; l < o.length - 1; l++) h = N(this, e[s + l], i, l), h === T && (h = this._$AH[l]), n || (n = !u(h) || h !== this._$AH[l]), h === A ? t = A : t !== A && (t += (null != h ? h : "") + o[l + 1]), this._$AH[l] = h;
+        for (t = o[0], l = 0; l < o.length - 1; l++) h = S(this, e[s + l], i, l), h === T && (h = this._$AH[l]), n || (n = !d(h) || h !== this._$AH[l]), h === A ? t = A : t !== A && (t += (null != h ? h : "") + o[l + 1]), this._$AH[l] = h;
       }
       n && !e && this.j(t);
     }
@@ -549,7 +560,7 @@
       t === A ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, null != t ? t : "");
     }
   }
-  class k extends R {
+  class H extends k {
     constructor() {
       super(...arguments), this.type = 3;
     }
@@ -557,22 +568,22 @@
       this.element[this.name] = t === A ? void 0 : t;
     }
   }
-  const H = s$3 ? s$3.emptyScript : "";
-  class I extends R {
+  const I = s$1 ? s$1.emptyScript : "";
+  class L extends k {
     constructor() {
       super(...arguments), this.type = 4;
     }
     j(t) {
-      t && t !== A ? this.element.setAttribute(this.name, H) : this.element.removeAttribute(this.name);
+      t && t !== A ? this.element.setAttribute(this.name, I) : this.element.removeAttribute(this.name);
     }
   }
-  class L extends R {
+  class z extends k {
     constructor(t, i, s, e, o) {
       super(t, i, s, e, o), this.type = 5;
     }
     _$AI(t, i = this) {
       var s;
-      if ((t = null !== (s = N(this, t, i, 0)) && void 0 !== s ? s : A) === T) return;
+      if ((t = null !== (s = S(this, t, i, 0)) && void 0 !== s ? s : A) === T) return;
       const e = this._$AH,
         o = t === A && e !== A || t.capture !== e.capture || t.once !== e.once || t.passive !== e.passive,
         n = t !== A && (e === A || o);
@@ -583,7 +594,7 @@
       "function" == typeof this._$AH ? this._$AH.call(null !== (s = null === (i = this.options) || void 0 === i ? void 0 : i.host) && void 0 !== s ? s : this.element, t) : this._$AH.handleEvent(t);
     }
   }
-  class z {
+  class Z {
     constructor(t, i, s) {
       this.element = t, this.type = 6, this._$AN = void 0, this._$AM = i, this.options = s;
     }
@@ -591,307 +602,29 @@
       return this._$AM._$AU;
     }
     _$AI(t) {
-      N(this, t);
+      S(this, t);
     }
   }
-  const j = i$1.litHtmlPolyfillSupport;
-  null == j || j(V, M), (null !== (t$1 = i$1.litHtmlVersions) && void 0 !== t$1 ? t$1 : i$1.litHtmlVersions = []).push("2.7.0");
-  const B = (t, i, s) => {
+  const B = i.litHtmlPolyfillSupport;
+  null == B || B(N, R), (null !== (t = i.litHtmlVersions) && void 0 !== t ? t : i.litHtmlVersions = []).push("2.8.0");
+  const D = (t, i, s) => {
     var e, o;
     const n = null !== (e = null == s ? void 0 : s.renderBefore) && void 0 !== e ? e : i;
     let l = n._$litPart$;
     if (void 0 === l) {
       const t = null !== (o = null == s ? void 0 : s.renderBefore) && void 0 !== o ? o : null;
-      n._$litPart$ = l = new M(i.insertBefore(d(), t), t, void 0, null != s ? s : {});
+      n._$litPart$ = l = new R(i.insertBefore(u(), t), t, void 0, null != s ? s : {});
     }
     return l._$AI(t), l;
   };
 
-  /**
-   * @license
-   * Copyright 2019 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   */
-  const t = window.ShadowRoot && (void 0 === window.ShadyCSS || window.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype,
-    e$1 = Symbol(),
-    n$2 = new Map();
-  let s$2 = class s {
-    constructor(t, n) {
-      if (this._$cssResult$ = !0, n !== e$1) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
-      this.cssText = t;
-    }
-    get styleSheet() {
-      let e = n$2.get(this.cssText);
-      return t && void 0 === e && (n$2.set(this.cssText, e = new CSSStyleSheet()), e.replaceSync(this.cssText)), e;
-    }
-    toString() {
-      return this.cssText;
-    }
-  };
-  const o$2 = t => new s$2("string" == typeof t ? t : t + "", e$1),
-    r$1 = (t, ...n) => {
-      const o = 1 === t.length ? t[0] : n.reduce((e, n, s) => e + (t => {
-        if (!0 === t._$cssResult$) return t.cssText;
-        if ("number" == typeof t) return t;
-        throw Error("Value passed to 'css' function must be a 'css' function result: " + t + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
-      })(n) + t[s + 1], t[0]);
-      return new s$2(o, e$1);
-    },
-    i = (e, n) => {
-      t ? e.adoptedStyleSheets = n.map(t => t instanceof CSSStyleSheet ? t : t.styleSheet) : n.forEach(t => {
-        const n = document.createElement("style"),
-          s = window.litNonce;
-        void 0 !== s && n.setAttribute("nonce", s), n.textContent = t.cssText, e.appendChild(n);
-      });
-    },
-    S = t ? t => t : t => t instanceof CSSStyleSheet ? (t => {
-      let e = "";
-      for (const n of t.cssRules) e += n.cssText;
-      return o$2(e);
-    })(t) : t;
-
-  /**
-   * @license
-   * Copyright 2017 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   */
-  var s$1;
-  const e = window.trustedTypes,
-    r = e ? e.emptyScript : "",
-    h = window.reactiveElementPolyfillSupport,
-    o$1 = {
-      toAttribute(t, i) {
-        switch (i) {
-          case Boolean:
-            t = t ? r : null;
-            break;
-          case Object:
-          case Array:
-            t = null == t ? t : JSON.stringify(t);
-        }
-        return t;
-      },
-      fromAttribute(t, i) {
-        let s = t;
-        switch (i) {
-          case Boolean:
-            s = null !== t;
-            break;
-          case Number:
-            s = null === t ? null : Number(t);
-            break;
-          case Object:
-          case Array:
-            try {
-              s = JSON.parse(t);
-            } catch (t) {
-              s = null;
-            }
-        }
-        return s;
-      }
-    },
-    n$1 = (t, i) => i !== t && (i == i || t == t),
-    l$2 = {
-      attribute: !0,
-      type: String,
-      converter: o$1,
-      reflect: !1,
-      hasChanged: n$1
-    };
-  class a extends HTMLElement {
-    constructor() {
-      super(), this._$Et = new Map(), this.isUpdatePending = !1, this.hasUpdated = !1, this._$Ei = null, this.o();
-    }
-    static addInitializer(t) {
-      var i;
-      null !== (i = this.l) && void 0 !== i || (this.l = []), this.l.push(t);
-    }
-    static get observedAttributes() {
-      this.finalize();
-      const t = [];
-      return this.elementProperties.forEach((i, s) => {
-        const e = this._$Eh(s, i);
-        void 0 !== e && (this._$Eu.set(e, s), t.push(e));
-      }), t;
-    }
-    static createProperty(t, i = l$2) {
-      if (i.state && (i.attribute = !1), this.finalize(), this.elementProperties.set(t, i), !i.noAccessor && !this.prototype.hasOwnProperty(t)) {
-        const s = "symbol" == typeof t ? Symbol() : "__" + t,
-          e = this.getPropertyDescriptor(t, s, i);
-        void 0 !== e && Object.defineProperty(this.prototype, t, e);
-      }
-    }
-    static getPropertyDescriptor(t, i, s) {
-      return {
-        get() {
-          return this[i];
-        },
-        set(e) {
-          const r = this[t];
-          this[i] = e, this.requestUpdate(t, r, s);
-        },
-        configurable: !0,
-        enumerable: !0
-      };
-    }
-    static getPropertyOptions(t) {
-      return this.elementProperties.get(t) || l$2;
-    }
-    static finalize() {
-      if (this.hasOwnProperty("finalized")) return !1;
-      this.finalized = !0;
-      const t = Object.getPrototypeOf(this);
-      if (t.finalize(), this.elementProperties = new Map(t.elementProperties), this._$Eu = new Map(), this.hasOwnProperty("properties")) {
-        const t = this.properties,
-          i = [...Object.getOwnPropertyNames(t), ...Object.getOwnPropertySymbols(t)];
-        for (const s of i) this.createProperty(s, t[s]);
-      }
-      return this.elementStyles = this.finalizeStyles(this.styles), !0;
-    }
-    static finalizeStyles(i) {
-      const s = [];
-      if (Array.isArray(i)) {
-        const e = new Set(i.flat(1 / 0).reverse());
-        for (const i of e) s.unshift(S(i));
-      } else void 0 !== i && s.push(S(i));
-      return s;
-    }
-    static _$Eh(t, i) {
-      const s = i.attribute;
-      return !1 === s ? void 0 : "string" == typeof s ? s : "string" == typeof t ? t.toLowerCase() : void 0;
-    }
-    o() {
-      var t;
-      this._$Ep = new Promise(t => this.enableUpdating = t), this._$AL = new Map(), this._$Em(), this.requestUpdate(), null === (t = this.constructor.l) || void 0 === t || t.forEach(t => t(this));
-    }
-    addController(t) {
-      var i, s;
-      (null !== (i = this._$Eg) && void 0 !== i ? i : this._$Eg = []).push(t), void 0 !== this.renderRoot && this.isConnected && (null === (s = t.hostConnected) || void 0 === s || s.call(t));
-    }
-    removeController(t) {
-      var i;
-      null === (i = this._$Eg) || void 0 === i || i.splice(this._$Eg.indexOf(t) >>> 0, 1);
-    }
-    _$Em() {
-      this.constructor.elementProperties.forEach((t, i) => {
-        this.hasOwnProperty(i) && (this._$Et.set(i, this[i]), delete this[i]);
-      });
-    }
-    createRenderRoot() {
-      var t;
-      const s = null !== (t = this.shadowRoot) && void 0 !== t ? t : this.attachShadow(this.constructor.shadowRootOptions);
-      return i(s, this.constructor.elementStyles), s;
-    }
-    connectedCallback() {
-      var t;
-      void 0 === this.renderRoot && (this.renderRoot = this.createRenderRoot()), this.enableUpdating(!0), null === (t = this._$Eg) || void 0 === t || t.forEach(t => {
-        var i;
-        return null === (i = t.hostConnected) || void 0 === i ? void 0 : i.call(t);
-      });
-    }
-    enableUpdating(t) {}
-    disconnectedCallback() {
-      var t;
-      null === (t = this._$Eg) || void 0 === t || t.forEach(t => {
-        var i;
-        return null === (i = t.hostDisconnected) || void 0 === i ? void 0 : i.call(t);
-      });
-    }
-    attributeChangedCallback(t, i, s) {
-      this._$AK(t, s);
-    }
-    _$ES(t, i, s = l$2) {
-      var e, r;
-      const h = this.constructor._$Eh(t, s);
-      if (void 0 !== h && !0 === s.reflect) {
-        const n = (null !== (r = null === (e = s.converter) || void 0 === e ? void 0 : e.toAttribute) && void 0 !== r ? r : o$1.toAttribute)(i, s.type);
-        this._$Ei = t, null == n ? this.removeAttribute(h) : this.setAttribute(h, n), this._$Ei = null;
-      }
-    }
-    _$AK(t, i) {
-      var s, e, r;
-      const h = this.constructor,
-        n = h._$Eu.get(t);
-      if (void 0 !== n && this._$Ei !== n) {
-        const t = h.getPropertyOptions(n),
-          l = t.converter,
-          a = null !== (r = null !== (e = null === (s = l) || void 0 === s ? void 0 : s.fromAttribute) && void 0 !== e ? e : "function" == typeof l ? l : null) && void 0 !== r ? r : o$1.fromAttribute;
-        this._$Ei = n, this[n] = a(i, t.type), this._$Ei = null;
-      }
-    }
-    requestUpdate(t, i, s) {
-      let e = !0;
-      void 0 !== t && (((s = s || this.constructor.getPropertyOptions(t)).hasChanged || n$1)(this[t], i) ? (this._$AL.has(t) || this._$AL.set(t, i), !0 === s.reflect && this._$Ei !== t && (void 0 === this._$EC && (this._$EC = new Map()), this._$EC.set(t, s))) : e = !1), !this.isUpdatePending && e && (this._$Ep = this._$E_());
-    }
-    async _$E_() {
-      this.isUpdatePending = !0;
-      try {
-        await this._$Ep;
-      } catch (t) {
-        Promise.reject(t);
-      }
-      const t = this.scheduleUpdate();
-      return null != t && (await t), !this.isUpdatePending;
-    }
-    scheduleUpdate() {
-      return this.performUpdate();
-    }
-    performUpdate() {
-      var t;
-      if (!this.isUpdatePending) return;
-      this.hasUpdated, this._$Et && (this._$Et.forEach((t, i) => this[i] = t), this._$Et = void 0);
-      let i = !1;
-      const s = this._$AL;
-      try {
-        i = this.shouldUpdate(s), i ? (this.willUpdate(s), null === (t = this._$Eg) || void 0 === t || t.forEach(t => {
-          var i;
-          return null === (i = t.hostUpdate) || void 0 === i ? void 0 : i.call(t);
-        }), this.update(s)) : this._$EU();
-      } catch (t) {
-        throw i = !1, this._$EU(), t;
-      }
-      i && this._$AE(s);
-    }
-    willUpdate(t) {}
-    _$AE(t) {
-      var i;
-      null === (i = this._$Eg) || void 0 === i || i.forEach(t => {
-        var i;
-        return null === (i = t.hostUpdated) || void 0 === i ? void 0 : i.call(t);
-      }), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(t)), this.updated(t);
-    }
-    _$EU() {
-      this._$AL = new Map(), this.isUpdatePending = !1;
-    }
-    get updateComplete() {
-      return this.getUpdateComplete();
-    }
-    getUpdateComplete() {
-      return this._$Ep;
-    }
-    shouldUpdate(t) {
-      return !0;
-    }
-    update(t) {
-      void 0 !== this._$EC && (this._$EC.forEach((t, i) => this._$ES(i, this[i], t)), this._$EC = void 0), this._$EU();
-    }
-    updated(t) {}
-    firstUpdated(t) {}
-  }
-  a.finalized = !0, a.elementProperties = new Map(), a.elementStyles = [], a.shadowRootOptions = {
-    mode: "open"
-  }, null == h || h({
-    ReactiveElement: a
-  }), (null !== (s$1 = globalThis.reactiveElementVersions) && void 0 !== s$1 ? s$1 : globalThis.reactiveElementVersions = []).push("1.3.1");
-
   /**
    * @license
    * Copyright 2017 Google LLC
    * SPDX-License-Identifier: BSD-3-Clause
    */
   var l$1, o;
-  class s extends a {
+  class s extends u$1 {
     constructor() {
       super(...arguments), this.renderOptions = {
         host: this
@@ -904,7 +637,7 @@
     }
     update(t) {
       const i = this.render();
-      this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t), this._$Do = B(i, this.renderRoot, this.renderOptions);
+      this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t), this._$Do = D(i, this.renderRoot, this.renderOptions);
     }
     connectedCallback() {
       var t;
@@ -925,7 +658,7 @@
   null == n || n({
     LitElement: s
   });
-  (null !== (o = globalThis.litElementVersions) && void 0 !== o ? o : globalThis.litElementVersions = []).push("3.3.0");
+  (null !== (o = globalThis.litElementVersions) && void 0 !== o ? o : globalThis.litElementVersions = []).push("3.3.3");
 
   var noop = {
     value: () => {}
@@ -1842,15 +1575,15 @@
   var darker = 0.7;
   var brighter = 1 / darker;
   var reI = "\\s*([+-]?\\d+)\\s*",
-    reN = "\\s*([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)\\s*",
-    reP = "\\s*([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)%\\s*",
+    reN = "\\s*([+-]?(?:\\d*\\.)?\\d+(?:[eE][+-]?\\d+)?)\\s*",
+    reP = "\\s*([+-]?(?:\\d*\\.)?\\d+(?:[eE][+-]?\\d+)?)%\\s*",
     reHex = /^#([0-9a-f]{3,8})$/,
-    reRgbInteger = new RegExp("^rgb\\(" + [reI, reI, reI] + "\\)$"),
-    reRgbPercent = new RegExp("^rgb\\(" + [reP, reP, reP] + "\\)$"),
-    reRgbaInteger = new RegExp("^rgba\\(" + [reI, reI, reI, reN] + "\\)$"),
-    reRgbaPercent = new RegExp("^rgba\\(" + [reP, reP, reP, reN] + "\\)$"),
-    reHslPercent = new RegExp("^hsl\\(" + [reN, reP, reP] + "\\)$"),
-    reHslaPercent = new RegExp("^hsla\\(" + [reN, reP, reP, reN] + "\\)$");
+    reRgbInteger = new RegExp(`^rgb\\(${reI},${reI},${reI}\\)$`),
+    reRgbPercent = new RegExp(`^rgb\\(${reP},${reP},${reP}\\)$`),
+    reRgbaInteger = new RegExp(`^rgba\\(${reI},${reI},${reI},${reN}\\)$`),
+    reRgbaPercent = new RegExp(`^rgba\\(${reP},${reP},${reP},${reN}\\)$`),
+    reHslPercent = new RegExp(`^hsl\\(${reN},${reP},${reP}\\)$`),
+    reHslaPercent = new RegExp(`^hsla\\(${reN},${reP},${reP},${reN}\\)$`);
   var named = {
     aliceblue: 0xf0f8ff,
     antiquewhite: 0xfaebd7,
@@ -2002,15 +1735,16 @@
     yellowgreen: 0x9acd32
   };
   define(Color, color, {
-    copy: function (channels) {
+    copy(channels) {
       return Object.assign(new this.constructor(), this, channels);
     },
-    displayable: function () {
+    displayable() {
       return this.rgb().displayable();
     },
     hex: color_formatHex,
     // Deprecated! Use color.formatHex.
     formatHex: color_formatHex,
+    formatHex8: color_formatHex8,
     formatHsl: color_formatHsl,
     formatRgb: color_formatRgb,
     toString: color_formatRgb
@@ -2018,6 +1752,9 @@
   function color_formatHex() {
     return this.rgb().formatHex();
   }
+  function color_formatHex8() {
+    return this.rgb().formatHex8();
+  }
   function color_formatHsl() {
     return hslConvert(this).formatHsl();
   }
@@ -2064,36 +1801,48 @@
     this.opacity = +opacity;
   }
   define(Rgb, rgb, extend(Color, {
-    brighter: function (k) {
+    brighter(k) {
       k = k == null ? brighter : Math.pow(brighter, k);
       return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
     },
-    darker: function (k) {
+    darker(k) {
       k = k == null ? darker : Math.pow(darker, k);
       return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
     },
-    rgb: function () {
+    rgb() {
       return this;
     },
-    displayable: function () {
+    clamp() {
+      return new Rgb(clampi(this.r), clampi(this.g), clampi(this.b), clampa(this.opacity));
+    },
+    displayable() {
       return -0.5 <= this.r && this.r < 255.5 && -0.5 <= this.g && this.g < 255.5 && -0.5 <= this.b && this.b < 255.5 && 0 <= this.opacity && this.opacity <= 1;
     },
     hex: rgb_formatHex,
     // Deprecated! Use color.formatHex.
     formatHex: rgb_formatHex,
+    formatHex8: rgb_formatHex8,
     formatRgb: rgb_formatRgb,
     toString: rgb_formatRgb
   }));
   function rgb_formatHex() {
-    return "#" + hex(this.r) + hex(this.g) + hex(this.b);
+    return `#${hex(this.r)}${hex(this.g)}${hex(this.b)}`;
+  }
+  function rgb_formatHex8() {
+    return `#${hex(this.r)}${hex(this.g)}${hex(this.b)}${hex((isNaN(this.opacity) ? 1 : this.opacity) * 255)}`;
   }
   function rgb_formatRgb() {
-    var a = this.opacity;
-    a = isNaN(a) ? 1 : Math.max(0, Math.min(1, a));
-    return (a === 1 ? "rgb(" : "rgba(") + Math.max(0, Math.min(255, Math.round(this.r) || 0)) + ", " + Math.max(0, Math.min(255, Math.round(this.g) || 0)) + ", " + Math.max(0, Math.min(255, Math.round(this.b) || 0)) + (a === 1 ? ")" : ", " + a + ")");
+    const a = clampa(this.opacity);
+    return `${a === 1 ? "rgb(" : "rgba("}${clampi(this.r)}, ${clampi(this.g)}, ${clampi(this.b)}${a === 1 ? ")" : `, ${a})`}`;
+  }
+  function clampa(opacity) {
+    return isNaN(opacity) ? 1 : Math.max(0, Math.min(1, opacity));
+  }
+  function clampi(value) {
+    return Math.max(0, Math.min(255, Math.round(value) || 0));
   }
   function hex(value) {
-    value = Math.max(0, Math.min(255, Math.round(value) || 0));
+    value = clampi(value);
     return (value < 16 ? "0" : "") + value.toString(16);
   }
   function hsla(h, s, l, a) {
@@ -2133,15 +1882,15 @@
     this.opacity = +opacity;
   }
   define(Hsl, hsl, extend(Color, {
-    brighter: function (k) {
+    brighter(k) {
       k = k == null ? brighter : Math.pow(brighter, k);
       return new Hsl(this.h, this.s, this.l * k, this.opacity);
     },
-    darker: function (k) {
+    darker(k) {
       k = k == null ? darker : Math.pow(darker, k);
       return new Hsl(this.h, this.s, this.l * k, this.opacity);
     },
-    rgb: function () {
+    rgb() {
       var h = this.h % 360 + (this.h < 0) * 360,
         s = isNaN(h) || isNaN(this.s) ? 0 : this.s,
         l = this.l,
@@ -2149,15 +1898,24 @@
         m1 = 2 * l - m2;
       return new Rgb(hsl2rgb(h >= 240 ? h - 240 : h + 120, m1, m2), hsl2rgb(h, m1, m2), hsl2rgb(h < 120 ? h + 240 : h - 120, m1, m2), this.opacity);
     },
-    displayable: function () {
+    clamp() {
+      return new Hsl(clamph(this.h), clampt(this.s), clampt(this.l), clampa(this.opacity));
+    },
+    displayable() {
       return (0 <= this.s && this.s <= 1 || isNaN(this.s)) && 0 <= this.l && this.l <= 1 && 0 <= this.opacity && this.opacity <= 1;
     },
-    formatHsl: function () {
-      var a = this.opacity;
-      a = isNaN(a) ? 1 : Math.max(0, Math.min(1, a));
-      return (a === 1 ? "hsl(" : "hsla(") + (this.h || 0) + ", " + (this.s || 0) * 100 + "%, " + (this.l || 0) * 100 + "%" + (a === 1 ? ")" : ", " + a + ")");
+    formatHsl() {
+      const a = clampa(this.opacity);
+      return `${a === 1 ? "hsl(" : "hsla("}${clamph(this.h)}, ${clampt(this.s) * 100}%, ${clampt(this.l) * 100}%${a === 1 ? ")" : `, ${a})`}`;
     }
   }));
+  function clamph(value) {
+    value = (value || 0) % 360;
+    return value < 0 ? value + 360 : value;
+  }
+  function clampt(value) {
+    return Math.max(0, Math.min(1, value || 0));
+  }
 
   /* From FvD 13.37, CSS Color Module Level 3 */
   function hsl2rgb(h, m1, m2) {
@@ -3487,6 +3245,48 @@
       const ambientS = rotate ? `${-ambientM.y}px ${ambientM.y / 2}px ${ambientM.b}px ${ambientM.s}px` : `${ambientM.y / 2}px ${ambientM.y}px ${ambientM.b}px ${ambientM.s}px`;
       return `${umbraS} ${umbraC}, ${penumbraS} ${penumbraC}, ${ambientS} ${ambientC}`;
     }
+    static get svgDefs() {
+      const shadows = DecidablesElement.shadows; /* eslint-disable-line prefer-destructuring */
+
+      const filters = shadows.elevations.map(z => {
+        return `
+        <filter id=${`shadow-${z}`} filterUnits="userSpaceOnUse" x="-100%" y="-100%" width="200%" height="200%">
+          <feComponentTransfer in="SourceAlpha" result="solid">
+            <feFuncA type="table" tableValues="0 1 1"/>
+          </feComponentTransfer>
+          <feOffset in="solid" result="offU" dx=${shadows.mapUmbra[z].y / 2} dy=${shadows.mapUmbra[z].y} />
+          <feOffset in="solid" result="offP" dx=${shadows.mapPenumbra[z].y / 2} dy=${shadows.mapPenumbra[z].y} />
+          <feOffset in="solid" result="offA" dx=${shadows.mapAmbient[z].y / 2} dy=${shadows.mapAmbient[z].y} />
+          ${shadows.mapUmbra[z].s === 0 ? '' : `<feMorphology in="offU" result="spreadU" operator=${shadows.mapUmbra[z].s > 0 ? 'dilate' : 'erode'} radius=${Math.abs(shadows.mapUmbra[z].s)} />`}
+          ${shadows.mapPenumbra[z].s === 0 ? '' : `<feMorphology in="offP" result="spreadP" operator=${shadows.mapPenumbra[z].s > 0 ? 'dilate' : 'erode'} radius=${Math.abs(shadows.mapPenumbra[z].s)} />`}
+          ${shadows.mapAmbient[z].s === 0 ? '' : `<feMorphology in="offA" result="spreadA" operator=${shadows.mapAmbient[z].s > 0 ? 'dilate' : 'erode'} radius=${Math.abs(shadows.mapAmbient[z].s)} />`}
+          <feGaussianBlur in=${shadows.mapUmbra[z].s === 0 ? 'offU' : 'spreadU'} result="blurU" stdDeviation=${shadows.mapUmbra[z].b / 2} />
+          <feGaussianBlur in=${shadows.mapPenumbra[z].s === 0 ? 'offP' : 'spreadP'} result="blurP" stdDeviation=${shadows.mapPenumbra[z].b / 2} />
+          <feGaussianBlur in=${shadows.mapAmbient[z].s === 0 ? 'offA' : 'spreadA'} result="blurA" stdDeviation=${shadows.mapAmbient[z].b / 2} />
+          <feFlood in="SourceGraphic" result="opU" flood-color=${shadows.baselineColor} flood-opacity=${shadows.opacityUmbra + shadows.opacityBoost} />
+          <feFlood in="SourceGraphic" result="opP" flood-color=${shadows.baselineColor} flood-opacity=${shadows.opacityPenumbra + shadows.opacityBoost} />
+          <feFlood in="SourceGraphic" result="opA" flood-color=${shadows.baselineColor} flood-opacity=${shadows.opacityAmbient + shadows.opacityBoost} />
+          <feComposite in="opU" in2="blurU" result="shU" operator="in" />
+          <feComposite in="opP" in2="blurP" result="shP" operator="in" />
+          <feComposite in="opA" in2="blurA" result="shA" operator="in" />
+          <feMorphology in="solid" result="smaller" operator="erode" radius="1" />
+          <feComposite in="shU" in2="smaller" result="finalU" operator="out" />
+          <feComposite in="shP" in2="smaller" result="finalP" operator="out" />
+          <feComposite in="shA" in2="smaller" result="finalA" operator="out" />
+          <feMerge>
+            <feMergeNode in="finalU" />
+            <feMergeNode in="finalP" />
+            <feMergeNode in="finalA" />
+            <feMergeNode in="SourceGraphic" />
+          </feMerge>
+        </filter>`;
+      });
+      return `
+      <defs>
+        ${filters}
+      </defs>
+    `;
+    }
     static get svgFilters() {
       const shadows = DecidablesElement.shadows; /* eslint-disable-line prefer-destructuring */
 
@@ -3494,7 +3294,7 @@
         return b`
         <filter id=${`shadow-${z}`} x="-250%" y="-250%" width="600%" height="600%">
           <feComponentTransfer in="SourceAlpha" result="solid">
-            <feFuncA  type="table" tableValues="0 1 1"/>
+            <feFuncA type="table" tableValues="0 1 1"/>
           </feComponentTransfer>
           <feOffset in="solid" result="offU" dx=${shadows.mapUmbra[z].y / 2} dy=${shadows.mapUmbra[z].y} />
           <feOffset in="solid" result="offP" dx=${shadows.mapPenumbra[z].y / 2} dy=${shadows.mapPenumbra[z].y} />
@@ -3532,24 +3332,24 @@
     `;
     }
     static get styles() {
-      return r$1`
+      return i$1`
       :host {
-        ---shadow-0: var(--shadow-0, ${o$2(this.cssBoxShadow(0))});
-        ---shadow-2: var(--shadow-2, ${o$2(this.cssBoxShadow(2))});
-        ---shadow-4: var(--shadow-4, ${o$2(this.cssBoxShadow(4))});
-        ---shadow-8: var(--shadow-8, ${o$2(this.cssBoxShadow(8))});
-
-        ---color-background: var(--color-background, ${o$2(this.greys.white)});
-        ---color-border: var(--color-border, ${o$2(this.greys.light75)});
-        ---color-text: var(--color-text, ${o$2(this.greys.dark75)});
-        ---color-text-inverse: var(--color-text-inverse, ${o$2(this.greys.white)});
-        ---color-link: var(--color-link, ${o$2(this.greys.dark25)});
-        ---color-element-background: var(--color-element-background, ${o$2(this.greys.light75)});
-        ---color-element-disabled: var(--color-element-disabled, ${o$2(this.greys.light50)});
-        ---color-element-enabled: var(--color-element-enabled, ${o$2(this.greys.dark25)});
-        ---color-element-selected: var(--color-element-selected, ${o$2(this.greys.grey)});
-        ---color-element-border: var(--color-element-border, ${o$2(this.greys.dark50)});
-        ---color-element-emphasis: var(--color-element-emphasis, ${o$2(this.greys.dark75)});
+        ---shadow-0: var(--shadow-0, ${r$2(this.cssBoxShadow(0))});
+        ---shadow-2: var(--shadow-2, ${r$2(this.cssBoxShadow(2))});
+        ---shadow-4: var(--shadow-4, ${r$2(this.cssBoxShadow(4))});
+        ---shadow-8: var(--shadow-8, ${r$2(this.cssBoxShadow(8))});
+
+        ---color-background: var(--color-background, ${r$2(this.greys.white)});
+        ---color-border: var(--color-border, ${r$2(this.greys.light75)});
+        ---color-text: var(--color-text, ${r$2(this.greys.dark75)});
+        ---color-text-inverse: var(--color-text-inverse, ${r$2(this.greys.white)});
+        ---color-link: var(--color-link, ${r$2(this.greys.dark25)});
+        ---color-element-background: var(--color-element-background, ${r$2(this.greys.light75)});
+        ---color-element-disabled: var(--color-element-disabled, ${r$2(this.greys.light50)});
+        ---color-element-enabled: var(--color-element-enabled, ${r$2(this.greys.dark25)});
+        ---color-element-selected: var(--color-element-selected, ${r$2(this.greys.grey)});
+        ---color-element-border: var(--color-element-border, ${r$2(this.greys.dark50)});
+        ---color-element-emphasis: var(--color-element-emphasis, ${r$2(this.greys.dark75)});
 
         ---font-family-base: var(--font-family-base, "Source Sans", sans-serif);
         ---font-family-math: var(--font-family-math, "Source Serif", serif);
@@ -3610,7 +3410,7 @@
       this.disabled = false;
     }
     static get styles() {
-      return [super.styles, r$1`
+      return [super.styles, i$1`
         :host {
           margin: 0.25rem;
         }
@@ -3735,11 +3535,11 @@
       this.value = event.target.value;
     }
     static get styles() {
-      return [super.styles, r$1`
+      return [super.styles, i$1`
         :host {
-          ---shadow-2-rotate: var(--shadow-2-rotate, ${o$2(this.cssBoxShadow(2, true, false))});
-          ---shadow-4-rotate: var(--shadow-4-rotate, ${o$2(this.cssBoxShadow(4, true, false))});
-          ---shadow-8-rotate: var(--shadow-8-rotate, ${o$2(this.cssBoxShadow(8, true, false))});
+          ---shadow-2-rotate: var(--shadow-2-rotate, ${r$2(this.cssBoxShadow(2, true, false))});
+          ---shadow-4-rotate: var(--shadow-4-rotate, ${r$2(this.cssBoxShadow(4, true, false))});
+          ---shadow-8-rotate: var(--shadow-8-rotate, ${r$2(this.cssBoxShadow(8, true, false))});
 
           display: flex;
 
@@ -4045,12 +3845,15 @@
       this.value = event.target.value;
     }
     static get styles() {
-      return [super.styles, r$1`
+      return [super.styles, i$1`
         :host {
           ---decidables-spinner-font-size: var(--decidables-spinner-font-size, 1.125rem);
           ---decidables-spinner-input-width: var(--decidables-spinner-input-width, 4rem);
           ---decidables-spinner-prefix: var(--decidables-spinner-prefix, "");
 
+          ---decidables-spinner-postfix: var(--decidables-spinner-postfix, "");
+          ---decidables-spinner-postfix-padding: var(--decidables-spinner-postfix-padding, 0);
+
           display: block;
         }
 
@@ -4078,8 +3881,20 @@
           content: var(---decidables-spinner-prefix);
         }
 
+        label::after {
+          position: absolute;
+          right: 0.25rem;
+          bottom: 1px;
+
+          font-size: var(---decidables-spinner-font-size);
+          line-height: normal;
+
+          content: var(---decidables-spinner-postfix);
+        }
+
         input[type=number] {
           width: var(---decidables-spinner-input-width);
+          padding-right: var(---decidables-spinner-postfix-padding);
 
           font-family: var(---font-family-base);
           font-size: var(---decidables-spinner-font-size);
@@ -4169,7 +3984,7 @@
       }));
     }
     static get styles() {
-      return [super.styles, r$1`
+      return [super.styles, i$1`
         :host {
           display: flex;
 
@@ -4321,7 +4136,7 @@
       this.disabled = false;
     }
     static get styles() {
-      return [super.styles, r$1`
+      return [super.styles, i$1`
         fieldset {
           display: flex;
 
@@ -4396,7 +4211,7 @@
       }));
     }
     static get styles() {
-      return [super.styles, r$1`
+      return [super.styles, i$1`
         :host {
           display: flex;
         }
@@ -4532,10 +4347,55 @@
     }
   };
 
+  function DecidablesMixinResizeable(superClass) {
+    return class extends superClass {
+      static get properties() {
+        return {
+          width: {
+            attribute: false,
+            type: Number,
+            reflect: false
+          },
+          height: {
+            attribute: false,
+            type: Number,
+            reflect: false
+          },
+          rem: {
+            attribute: false,
+            type: Number,
+            reflect: false
+          }
+        };
+      }
+      constructor() {
+        super();
+        this.width = NaN;
+        this.height = NaN;
+        this.rem = NaN;
+      }
+      getDimensions() {
+        this.width = parseFloat(this.getComputedStyleValue('width'), 10);
+        this.height = parseFloat(this.getComputedStyleValue('height'), 10);
+        this.rem = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('font-size'), 10);
+      }
+      connectedCallback() {
+        super.connectedCallback();
+        this.resizeObserver = new ResizeObserver(this.getDimensions.bind(this));
+        this.resizeObserver.observe(this);
+      }
+      disconnectedCallback() {
+        this.resizeObserver.unobserve(this);
+        super.disconnectedCallback();
+      }
+    };
+  }
+
   exports.DecidablesButton = DecidablesButton;
   exports.DecidablesConverterArray = DecidablesConverterArray;
   exports.DecidablesConverterSet = DecidablesConverterSet;
   exports.DecidablesElement = DecidablesElement;
+  exports.DecidablesMixinResizeable = DecidablesMixinResizeable;
   exports.DecidablesSlider = DecidablesSlider;
   exports.DecidablesSpinner = DecidablesSpinner;
   exports.DecidablesSwitch = DecidablesSwitch;