@decidables/detectable-elements 0.2.5 → 0.2.6

package/lib/detectableElements.esm.js

@@ -3,21 +3,21 @@
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const t$3 = window,
-  e$5 = t$3.ShadowRoot && (void 0 === t$3.ShadyCSS || t$3.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype,
-  s$6 = Symbol(),
-  n$6 = new WeakMap();
-let o$6 = 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$6) 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$5 && void 0 === t) {
+    if (e$2 && void 0 === t) {
       const e = void 0 !== s && 1 === s.length;
-      e && (t = n$6.get(s)), void 0 === t && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), e && n$6.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;
   }
@@ -25,608 +25,26 @@ let o$6 = class o {
     return this.cssText;
   }
 };
-const r$5 = t => new o$6("string" == typeof t ? t : t + "", void 0, s$6),
-  S$3 = (s, n) => {
-    e$5 ? s.adoptedStyleSheets = n.map(t => t instanceof CSSStyleSheet ? t : t.styleSheet) : n.forEach(e => {
-      const n = document.createElement("style"),
-        o = t$3.litNonce;
-      void 0 !== o && n.setAttribute("nonce", o), n.textContent = e.cssText, s.appendChild(n);
-    });
-  },
-  c$2 = e$5 ? t => t : t => t instanceof CSSStyleSheet ? (t => {
-    let e = "";
-    for (const s of t.cssRules) e += s.cssText;
-    return r$5(e);
-  })(t) : t;
-
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-var s$5;
-const e$4 = window,
-  r$4 = e$4.trustedTypes,
-  h$3 = r$4 ? r$4.emptyScript : "",
-  o$5 = e$4.reactiveElementPolyfillSupport,
-  n$5 = {
-    toAttribute(t, i) {
-      switch (i) {
-        case Boolean:
-          t = t ? h$3 : 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;
-    }
-  },
-  a$3 = (t, i) => i !== t && (i == i || t == t),
-  l$5 = {
-    attribute: !0,
-    type: String,
-    converter: n$5,
-    reflect: !1,
-    hasChanged: a$3
-  };
-let d$2 = class d extends HTMLElement {
-  constructor() {
-    super(), this._$Ei = new Map(), this.isUpdatePending = !1, this.hasUpdated = !1, this._$El = null, this.u();
-  }
-  static addInitializer(t) {
-    var i;
-    this.finalize(), (null !== (i = this.h) && void 0 !== i ? i : this.h = []).push(t);
-  }
-  static get observedAttributes() {
-    this.finalize();
-    const t = [];
-    return this.elementProperties.forEach((i, s) => {
-      const e = this._$Ep(s, i);
-      void 0 !== e && (this._$Ev.set(e, s), t.push(e));
-    }), t;
-  }
-  static createProperty(t, i = l$5) {
-    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$5;
-  }
-  static finalize() {
-    if (this.hasOwnProperty("finalized")) return !1;
-    this.finalized = !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,
-        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(c$2(i));
-    } else void 0 !== i && s.push(c$2(i));
-    return s;
-  }
-  static _$Ep(t, i) {
-    const s = i.attribute;
-    return !1 === s ? void 0 : "string" == typeof s ? s : "string" == typeof t ? t.toLowerCase() : void 0;
-  }
-  u() {
-    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));
-  }
-  addController(t) {
-    var i, s;
-    (null !== (i = this._$ES) && void 0 !== i ? i : this._$ES = []).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._$ES) || void 0 === i || i.splice(this._$ES.indexOf(t) >>> 0, 1);
-  }
-  _$Eg() {
-    this.constructor.elementProperties.forEach((t, i) => {
-      this.hasOwnProperty(i) && (this._$Ei.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 S$3(s, this.constructor.elementStyles), s;
-  }
-  connectedCallback() {
-    var t;
-    void 0 === this.renderRoot && (this.renderRoot = this.createRenderRoot()), this.enableUpdating(!0), null === (t = this._$ES) || 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._$ES) || 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);
-  }
-  _$EO(t, i, s = l$5) {
-    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$5).toAttribute(i, s.type);
-      this._$El = t, null == h ? this.removeAttribute(r) : this.setAttribute(r, h), this._$El = null;
-    }
-  }
-  _$AK(t, i) {
-    var s;
-    const e = this.constructor,
-      r = e._$Ev.get(t);
-    if (void 0 !== r && this._$El !== r) {
-      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$5;
-      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$3)(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;
-    try {
-      await this._$E_;
-    } 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._$Ei && (this._$Ei.forEach((t, i) => this[i] = t), this._$Ei = void 0);
-    let i = !1;
-    const s = this._$AL;
-    try {
-      i = this.shouldUpdate(s), i ? (this.willUpdate(s), null === (t = this._$ES) || 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._$Ek();
-    } catch (t) {
-      throw i = !1, this._$Ek(), t;
-    }
-    i && this._$AE(s);
-  }
-  willUpdate(t) {}
-  _$AE(t) {
-    var i;
-    null === (i = this._$ES) || 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);
-  }
-  _$Ek() {
-    this._$AL = new Map(), this.isUpdatePending = !1;
-  }
-  get updateComplete() {
-    return this.getUpdateComplete();
-  }
-  getUpdateComplete() {
-    return this._$E_;
-  }
-  shouldUpdate(t) {
-    return !0;
-  }
-  update(t) {
-    void 0 !== this._$EC && (this._$EC.forEach((t, i) => this._$EO(i, this[i], t)), this._$EC = void 0), this._$Ek();
-  }
-  updated(t) {}
-  firstUpdated(t) {}
-};
-d$2.finalized = !0, d$2.elementProperties = new Map(), d$2.elementStyles = [], d$2.shadowRootOptions = {
-  mode: "open"
-}, null == o$5 || o$5({
-  ReactiveElement: d$2
-}), (null !== (s$5 = e$4.reactiveElementVersions) && void 0 !== s$5 ? s$5 : e$4.reactiveElementVersions = []).push("1.6.1");
-
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-var t$2;
-const i$2 = window,
-  s$4 = i$2.trustedTypes,
-  e$3 = s$4 ? s$4.createPolicy("lit-html", {
-    createHTML: t => t
-  }) : void 0,
-  o$4 = "$lit$",
-  n$4 = `lit$${(Math.random() + "").slice(9)}$`,
-  l$4 = "?" + n$4,
-  h$2 = `<${l$4}>`,
-  r$3 = document,
-  u$1 = () => r$3.createComment(""),
-  d$1 = t => null === t || "object" != typeof t && "function" != typeof t,
-  c$1 = Array.isArray,
-  v$1 = t => c$1(t) || "function" == typeof (null == t ? void 0 : t[Symbol.iterator]),
-  a$2 = "[ \t\n\f\r]",
-  f$1 = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,
-  _$1 = /-->/g,
-  m$1 = />/g,
-  p$1 = RegExp(`>|${a$2}(?:([^\\s"'>=/]+)(${a$2}*=${a$2}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`, "g"),
-  g$1 = /'/g,
-  $$1 = /"/g,
-  y$2 = /^(?:script|style|textarea|title)$/i,
-  T$1 = Symbol.for("lit-noChange"),
-  A$1 = Symbol.for("lit-nothing"),
-  E$1 = new WeakMap(),
-  C$1 = r$3.createTreeWalker(r$3, 129, null, !1);
-function P$1(t, i) {
-  if (!Array.isArray(t) || !t.hasOwnProperty("raw")) throw Error("invalid template strings array");
-  return void 0 !== e$3 ? e$3.createHTML(i) : i;
-}
-const V$1 = (t, i) => {
-  const s = t.length - 1,
-    e = [];
-  let l,
-    r = 2 === i ? "<svg>" : "",
-    u = f$1;
-  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$1 ? "!--" === c[1] ? u = _$1 : void 0 !== c[1] ? u = m$1 : void 0 !== c[2] ? (y$2.test(c[2]) && (l = RegExp("</" + c[2], "g")), u = p$1) : void 0 !== c[3] && (u = p$1) : u === p$1 ? ">" === c[0] ? (u = null != l ? l : f$1, v = -1) : void 0 === c[1] ? v = -2 : (v = u.lastIndex - c[2].length, d = c[1], u = void 0 === c[3] ? p$1 : '"' === c[3] ? $$1 : g$1) : u === $$1 || u === g$1 ? u = p$1 : u === _$1 || u === m$1 ? u = f$1 : (u = p$1, l = void 0);
-    const w = u === p$1 && t[i + 1].startsWith("/>") ? " " : "";
-    r += u === f$1 ? s + h$2 : v >= 0 ? (e.push(d), s.slice(0, v) + o$4 + s.slice(v) + n$4 + w) : s + n$4 + (-2 === v ? (e.push(void 0), i) : w);
-  }
-  return [P$1(t, r + (t[s] || "<?>") + (2 === i ? "</svg>" : "")), e];
-};
-let N$1 = class N {
-  constructor({
-    strings: t,
-    _$litType$: i
-  }, e) {
-    let h;
-    this.parts = [];
-    let r = 0,
-      d = 0;
-    const c = t.length - 1,
-      v = this.parts,
-      [a, f] = V$1(t, i);
-    if (this.el = N.createElement(a, e), C$1.currentNode = this.el.content, 2 === i) {
-      const t = this.el.content,
-        i = t.firstChild;
-      i.remove(), t.append(...i.childNodes);
-    }
-    for (; null !== (h = C$1.nextNode()) && v.length < c;) {
-      if (1 === h.nodeType) {
-        if (h.hasAttributes()) {
-          const t = [];
-          for (const i of h.getAttributeNames()) if (i.endsWith(o$4) || i.startsWith(n$4)) {
-            const s = f[d++];
-            if (t.push(i), void 0 !== s) {
-              const t = h.getAttribute(s.toLowerCase() + o$4).split(n$4),
-                i = /([.?@])?(.*)/.exec(s);
-              v.push({
-                type: 1,
-                index: r,
-                name: i[2],
-                strings: t,
-                ctor: "." === i[1] ? H$1 : "?" === i[1] ? L$1 : "@" === i[1] ? z$1 : k$1
-              });
-            } else v.push({
-              type: 6,
-              index: r
-            });
-          }
-          for (const i of t) h.removeAttribute(i);
-        }
-        if (y$2.test(h.tagName)) {
-          const t = h.textContent.split(n$4),
-            i = t.length - 1;
-          if (i > 0) {
-            h.textContent = s$4 ? s$4.emptyScript : "";
-            for (let s = 0; s < i; s++) h.append(t[s], u$1()), C$1.nextNode(), v.push({
-              type: 2,
-              index: ++r
-            });
-            h.append(t[i], u$1());
-          }
-        }
-      } else if (8 === h.nodeType) if (h.data === l$4) v.push({
-        type: 2,
-        index: r
-      });else {
-        let t = -1;
-        for (; -1 !== (t = h.data.indexOf(n$4, t + 1));) v.push({
-          type: 7,
-          index: r
-        }), t += n$4.length - 1;
-      }
-      r++;
-    }
-  }
-  static createElement(t, i) {
-    const s = r$3.createElement("template");
-    return s.innerHTML = t, s;
-  }
-};
-function S$2(t, i, s = t, e) {
-  var o, n, l, h;
-  if (i === T$1) return i;
-  let r = void 0 !== e ? null === (o = s._$Co) || void 0 === o ? void 0 : o[e] : s._$Cl;
-  const u = d$1(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$2(t, r._$AS(t, i.values), r, e)), i;
-}
-let M$1 = class M {
-  constructor(t, i) {
-    this._$AV = [], this._$AN = void 0, this._$AD = t, this._$AM = i;
-  }
-  get parentNode() {
-    return this._$AM.parentNode;
-  }
-  get _$AU() {
-    return this._$AM._$AU;
-  }
-  u(t) {
-    var i;
-    const {
-        el: {
-          content: s
-        },
-        parts: e
-      } = this._$AD,
-      o = (null !== (i = null == t ? void 0 : t.creationScope) && void 0 !== i ? i : r$3).importNode(s, !0);
-    C$1.currentNode = o;
-    let n = C$1.nextNode(),
-      l = 0,
-      h = 0,
-      u = e[0];
-    for (; void 0 !== u;) {
-      if (l === u.index) {
-        let i;
-        2 === u.type ? i = new R$1(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 == u ? void 0 : u.index) && (n = C$1.nextNode(), l++);
-    }
-    return C$1.currentNode = r$3, o;
-  }
-  v(t) {
-    let i = 0;
-    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++;
-  }
-};
-let R$1 = class R {
-  constructor(t, i, s, e) {
-    var o;
-    this.type = 2, this._$AH = A$1, 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._$Cp;
-  }
-  get parentNode() {
-    let t = this._$AA.parentNode;
-    const i = this._$AM;
-    return void 0 !== i && 11 === (null == t ? void 0 : t.nodeType) && (t = i.parentNode), t;
-  }
-  get startNode() {
-    return this._$AA;
-  }
-  get endNode() {
-    return this._$AB;
-  }
-  _$AI(t, i = this) {
-    t = S$2(this, t, i), d$1(t) ? t === A$1 || null == t || "" === t ? (this._$AH !== A$1 && this._$AR(), this._$AH = A$1) : t !== this._$AH && t !== T$1 && this._(t) : void 0 !== t._$litType$ ? this.g(t) : void 0 !== t.nodeType ? this.$(t) : v$1(t) ? this.T(t) : this._(t);
-  }
-  k(t) {
-    return this._$AA.parentNode.insertBefore(t, this._$AB);
-  }
-  $(t) {
-    this._$AH !== t && (this._$AR(), this._$AH = this.k(t));
-  }
-  _(t) {
-    this._$AH !== A$1 && d$1(this._$AH) ? this._$AA.nextSibling.data = t : this.$(r$3.createTextNode(t)), this._$AH = t;
-  }
-  g(t) {
-    var i;
-    const {
-        values: s,
-        _$litType$: e
-      } = t,
-      o = "number" == typeof e ? this._$AC(t) : (void 0 === e.el && (e.el = N$1.createElement(P$1(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$1(o, this),
-        i = t.u(this.options);
-      t.v(s), this.$(i), this._$AH = t;
-    }
-  }
-  _$AC(t) {
-    let i = E$1.get(t.strings);
-    return void 0 === i && E$1.set(t.strings, i = new N$1(t)), i;
-  }
-  T(t) {
-    c$1(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 R(this.k(u$1()), this.k(u$1()), 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) {
-    var s;
-    for (null === (s = this._$AP) || void 0 === s || s.call(this, !1, !0, i); t && t !== this._$AB;) {
-      const i = t.nextSibling;
-      t.remove(), t = i;
-    }
-  }
-  setConnected(t) {
-    var i;
-    void 0 === this._$AM && (this._$Cp = t, null === (i = this._$AP) || void 0 === i || i.call(this, t));
-  }
-};
-let k$1 = class k {
-  constructor(t, i, s, e, o) {
-    this.type = 1, this._$AH = A$1, 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$1;
-  }
-  get tagName() {
-    return this.element.tagName;
-  }
-  get _$AU() {
-    return this._$AM._$AU;
-  }
-  _$AI(t, i = this, s, e) {
-    const o = this.strings;
-    let n = !1;
-    if (void 0 === o) t = S$2(this, t, i, 0), n = !d$1(t) || t !== this._$AH && t !== T$1, n && (this._$AH = t);else {
-      const e = t;
-      let l, h;
-      for (t = o[0], l = 0; l < o.length - 1; l++) h = S$2(this, e[s + l], i, l), h === T$1 && (h = this._$AH[l]), n || (n = !d$1(h) || h !== this._$AH[l]), h === A$1 ? t = A$1 : t !== A$1 && (t += (null != h ? h : "") + o[l + 1]), this._$AH[l] = h;
-    }
-    n && !e && this.j(t);
-  }
-  j(t) {
-    t === A$1 ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, null != t ? t : "");
-  }
-};
-let H$1 = class H extends k$1 {
-  constructor() {
-    super(...arguments), this.type = 3;
-  }
-  j(t) {
-    this.element[this.name] = t === A$1 ? void 0 : t;
-  }
-};
-const I$1 = s$4 ? s$4.emptyScript : "";
-let L$1 = class L extends k$1 {
-  constructor() {
-    super(...arguments), this.type = 4;
-  }
-  j(t) {
-    t && t !== A$1 ? this.element.setAttribute(this.name, I$1) : this.element.removeAttribute(this.name);
-  }
-};
-let z$1 = class z extends k$1 {
-  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 = S$2(this, t, i, 0)) && void 0 !== s ? s : A$1) === T$1) return;
-    const e = this._$AH,
-      o = t === A$1 && e !== A$1 || t.capture !== e.capture || t.once !== e.once || t.passive !== e.passive,
-      n = t !== A$1 && (e === A$1 || o);
-    o && this.element.removeEventListener(this.name, this, e), n && this.element.addEventListener(this.name, this, t), this._$AH = t;
-  }
-  handleEvent(t) {
-    var i, s;
-    "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 {
-  constructor(t, i, s) {
-    this.element = t, this.type = 6, this._$AN = void 0, this._$AM = i, this.options = s;
-  }
-  get _$AU() {
-    return this._$AM._$AU;
-  }
-  _$AI(t) {
-    S$2(this, t);
-  }
-}
-const B$1 = i$2.litHtmlPolyfillSupport;
-null == B$1 || B$1(N$1, R$1), (null !== (t$2 = i$2.litHtmlVersions) && void 0 !== t$2 ? t$2 : i$2.litHtmlVersions = []).push("2.8.0");
-
-/**
- * @license
- * Copyright 2019 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const t$1 = window.ShadowRoot && (void 0 === window.ShadyCSS || window.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype,
-  e$2 = Symbol(),
-  n$3 = new Map();
-let s$3 = class s {
-  constructor(t, n) {
-    if (this._$cssResult$ = !0, n !== e$2) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
-    this.cssText = t;
-  }
-  get styleSheet() {
-    let e = n$3.get(this.cssText);
-    return t$1 && void 0 === e && (n$3.set(this.cssText, e = new CSSStyleSheet()), e.replaceSync(this.cssText)), e;
-  }
-  toString() {
-    return this.cssText;
-  }
-};
-const o$3 = t => new s$3("string" == typeof t ? t : t + "", e$2),
-  r$2 = (t, ...n) => {
-    const o = 1 === t.length ? t[0] : n.reduce((e, n, s) => e + (t => {
+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.");
-    })(n) + t[s + 1], t[0]);
-    return new s$3(o, e$2);
+    })(s) + t[n + 1], t[0]);
+    return new o$3(n, t, s$3);
   },
-  i$1 = (e, n) => {
-    t$1 ? e.adoptedStyleSheets = n.map(t => t instanceof CSSStyleSheet ? t : t.styleSheet) : n.forEach(t => {
+  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"),
-        s = window.litNonce;
-      void 0 !== s && n.setAttribute("nonce", s), n.textContent = t.cssText, e.appendChild(n);
+        o = t$1.litNonce;
+      void 0 !== o && n.setAttribute("nonce", o), n.textContent = e.cssText, s.appendChild(n);
     });
   },
-  S$1 = t$1 ? t => t : t => t instanceof CSSStyleSheet ? (t => {
+  c$1 = e$2 ? t => t : t => t instanceof CSSStyleSheet ? (t => {
     let e = "";
-    for (const n of t.cssRules) e += n.cssText;
-    return o$3(e);
+    for (const s of t.cssRules) e += s.cssText;
+    return r$2(e);
   })(t) : t;
 
 /**
@@ -635,14 +53,15 @@ const o$3 = t => new s$3("string" == typeof t ? t : t + "", e$2),
  * SPDX-License-Identifier: BSD-3-Clause
  */
 var s$2;
-const e$1 = window.trustedTypes,
-  r$1 = e$1 ? e$1.emptyScript : "",
-  h$1 = window.reactiveElementPolyfillSupport,
-  o$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 ? r$1 : null;
+          t = t ? h$1 : null;
           break;
         case Object:
         case Array:
@@ -670,28 +89,29 @@ const e$1 = window.trustedTypes,
       return s;
     }
   },
-  n$2 = (t, i) => i !== t && (i == i || t == t),
+  a$1 = (t, i) => i !== t && (i == i || t == t),
   l$3 = {
     attribute: !0,
     type: String,
-    converter: o$2,
+    converter: n$2,
     reflect: !1,
-    hasChanged: n$2
-  };
-let a$1 = class a extends HTMLElement {
+    hasChanged: a$1
+  },
+  d$1 = "finalized";
+let u$1 = class u extends HTMLElement {
   constructor() {
-    super(), this._$Et = new Map(), this.isUpdatePending = !1, this.hasUpdated = !1, this._$Ei = null, this.o();
+    super(), this._$Ei = new Map(), this.isUpdatePending = !1, this.hasUpdated = !1, this._$El = null, this._$Eu();
   }
   static addInitializer(t) {
     var i;
-    null !== (i = this.l) && void 0 !== i || (this.l = []), this.l.push(t);
+    this.finalize(), (null !== (i = this.h) && void 0 !== i ? i : this.h = []).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));
+      const e = this._$Ep(s, i);
+      void 0 !== e && (this._$Ev.set(e, s), t.push(e));
     }), t;
   }
   static createProperty(t, i = l$3) {
@@ -718,10 +138,10 @@ let a$1 = class a extends HTMLElement {
     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(), this.elementProperties = new Map(t.elementProperties), this._$Eu = new Map(), this.hasOwnProperty("properties")) {
+    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,
         i = [...Object.getOwnPropertyNames(t), ...Object.getOwnPropertySymbols(t)];
       for (const s of i) this.createProperty(s, t[s]);
@@ -732,39 +152,39 @@ let a$1 = class a extends HTMLElement {
     const s = [];
     if (Array.isArray(i)) {
       const e = new Set(i.flat(1 / 0).reverse());
-      for (const i of e) s.unshift(S$1(i));
-    } else void 0 !== i && s.push(S$1(i));
+      for (const i of e) s.unshift(c$1(i));
+    } else void 0 !== i && s.push(c$1(i));
     return s;
   }
-  static _$Eh(t, i) {
+  static _$Ep(t, i) {
     const s = i.attribute;
     return !1 === s ? void 0 : "string" == typeof s ? s : "string" == typeof t ? t.toLowerCase() : void 0;
   }
-  o() {
+  _$Eu() {
     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));
+    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));
   }
   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));
+    (null !== (i = this._$ES) && void 0 !== i ? i : this._$ES = []).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);
+    null === (i = this._$ES) || void 0 === i || i.splice(this._$ES.indexOf(t) >>> 0, 1);
   }
-  _$Em() {
+  _$Eg() {
     this.constructor.elementProperties.forEach((t, i) => {
-      this.hasOwnProperty(i) && (this._$Et.set(i, this[i]), delete this[i]);
+      this.hasOwnProperty(i) && (this._$Ei.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$1(s, this.constructor.elementStyles), s;
+    return S$1(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 => {
+    void 0 === this.renderRoot && (this.renderRoot = this.createRenderRoot()), this.enableUpdating(!0), null === (t = this._$ES) || void 0 === t || t.forEach(t => {
       var i;
       return null === (i = t.hostConnected) || void 0 === i ? void 0 : i.call(t);
     });
@@ -772,7 +192,7 @@ let a$1 = class a extends HTMLElement {
   enableUpdating(t) {}
   disconnectedCallback() {
     var t;
-    null === (t = this._$Eg) || void 0 === t || t.forEach(t => {
+    null === (t = this._$ES) || void 0 === t || t.forEach(t => {
       var i;
       return null === (i = t.hostDisconnected) || void 0 === i ? void 0 : i.call(t);
     });
@@ -780,33 +200,34 @@ let a$1 = class a extends HTMLElement {
   attributeChangedCallback(t, i, s) {
     this._$AK(t, s);
   }
-  _$ES(t, i, s = l$3) {
-    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$2.toAttribute)(i, s.type);
-      this._$Ei = t, null == n ? this.removeAttribute(h) : this.setAttribute(h, n), this._$Ei = null;
+  _$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$2).toAttribute(i, s.type);
+      this._$El = t, null == h ? this.removeAttribute(r) : this.setAttribute(r, h), this._$El = 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$2.fromAttribute;
-      this._$Ei = n, this[n] = a(i, t.type), this._$Ei = null;
+    var s;
+    const e = this.constructor,
+      r = e._$Ev.get(t);
+    if (void 0 !== r && this._$El !== r) {
+      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$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 || n$2)(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_());
+    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 _$E_() {
+  async _$Ej() {
     this.isUpdatePending = !0;
     try {
-      await this._$Ep;
+      await this._$E_;
     } catch (t) {
       Promise.reject(t);
     }
@@ -819,50 +240,50 @@ let a$1 = class a extends HTMLElement {
   performUpdate() {
     var t;
     if (!this.isUpdatePending) return;
-    this.hasUpdated, this._$Et && (this._$Et.forEach((t, i) => this[i] = t), this._$Et = void 0);
+    this.hasUpdated, this._$Ei && (this._$Ei.forEach((t, i) => this[i] = t), this._$Ei = 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 => {
+      i = this.shouldUpdate(s), i ? (this.willUpdate(s), null === (t = this._$ES) || 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();
+      }), this.update(s)) : this._$Ek();
     } catch (t) {
-      throw i = !1, this._$EU(), t;
+      throw i = !1, this._$Ek(), t;
     }
     i && this._$AE(s);
   }
   willUpdate(t) {}
   _$AE(t) {
     var i;
-    null === (i = this._$Eg) || void 0 === i || i.forEach(t => {
+    null === (i = this._$ES) || 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() {
+  _$Ek() {
     this._$AL = new Map(), this.isUpdatePending = !1;
   }
   get updateComplete() {
     return this.getUpdateComplete();
   }
   getUpdateComplete() {
-    return this._$Ep;
+    return this._$E_;
   }
   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();
+    void 0 !== this._$EC && (this._$EC.forEach((t, i) => this._$EO(i, this[i], t)), this._$EC = void 0), this._$Ek();
   }
   updated(t) {}
   firstUpdated(t) {}
 };
-a$1.finalized = !0, a$1.elementProperties = new Map(), a$1.elementStyles = [], a$1.shadowRootOptions = {
+u$1[d$1] = !0, u$1.elementProperties = new Map(), u$1.elementStyles = [], u$1.shadowRootOptions = {
   mode: "open"
-}, null == h$1 || h$1({
-  ReactiveElement: a$1
-}), (null !== (s$2 = globalThis.reactiveElementVersions) && void 0 !== s$2 ? s$2 : globalThis.reactiveElementVersions = []).push("1.3.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
@@ -880,8 +301,8 @@ const i = window,
   l$2 = "?" + n$1,
   h = `<${l$2}>`,
   r = document,
-  d = () => r.createComment(""),
-  u = t => null === t || "object" != typeof t && "function" != typeof t,
+  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 = "[ \t\n\f\r]",
@@ -902,28 +323,30 @@ const i = window,
   T = Symbol.for("lit-noChange"),
   A = Symbol.for("lit-nothing"),
   E = new WeakMap(),
-  C = r.createTreeWalker(r, 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$1.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 : v >= 0 ? (l.push(e), s.slice(0, v) + o$1 + s.slice(v) + n$1 + w) : s + n$1 + (-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 ? e.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$1.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
@@ -931,11 +354,11 @@ class V {
     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);
@@ -945,7 +368,7 @@ class V {
         if (h.hasAttributes()) {
           const t = [];
           for (const i of h.getAttributeNames()) if (i.endsWith(o$1) || i.startsWith(n$1)) {
-            const s = f[u++];
+            const s = f[d++];
             if (t.push(i), void 0 !== s) {
               const t = h.getAttribute(s.toLowerCase() + o$1).split(n$1),
                 i = /([.?@])?(.*)/.exec(s);
@@ -954,7 +377,7 @@ class V {
                 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,
@@ -968,11 +391,11 @@ class V {
             i = t.length - 1;
           if (i > 0) {
             h.textContent = s$1 ? s$1.emptyScript : "";
-            for (let s = 0; s < i; s++) h.append(t[s], d()), C.nextNode(), v.push({
+            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$2) v.push({
@@ -993,16 +416,16 @@ class V {
     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;
 }
-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;
@@ -1010,7 +433,7 @@ class S {
   get _$AU() {
     return this._$AM._$AU;
   }
-  v(t) {
+  u(t) {
     var i;
     const {
         el: {
@@ -1023,29 +446,29 @@ class S {
     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;
@@ -1059,40 +482,40 @@ class M {
     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.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(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) {
@@ -1104,10 +527,10 @@ class M {
   }
   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;
   }
@@ -1120,10 +543,10 @@ class R {
   _$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);
   }
@@ -1131,7 +554,7 @@ class R {
     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;
   }
@@ -1139,22 +562,22 @@ class k extends R {
     this.element[this.name] = t === A ? void 0 : t;
   }
 }
-const H = s$1 ? s$1.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);
@@ -1165,7 +588,7 @@ class L extends R {
     "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;
   }
@@ -1173,18 +596,18 @@ class z {
     return this._$AM._$AU;
   }
   _$AI(t) {
-    N(this, t);
+    S(this, t);
   }
 }
-const j = i.litHtmlPolyfillSupport;
-null == j || j(V, M), (null !== (t = i.litHtmlVersions) && void 0 !== t ? t : i.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;
 };
@@ -1195,7 +618,7 @@ const B = (t, i, s) => {
  * SPDX-License-Identifier: BSD-3-Clause
  */
 var l$1, o;
-class s extends a$1 {
+class s extends u$1 {
   constructor() {
     super(...arguments), this.renderOptions = {
       host: this
@@ -1208,7 +631,7 @@ class s extends a$1 {
   }
   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;
@@ -1229,20 +652,32 @@ const n = globalThis.litElementPolyfillSupport;
 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");
 
 function ascending$2(a, b) {
   return a == null || b == null ? NaN : a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
 }
 
+function descending(a, b) {
+  return a == null || b == null ? NaN : b < a ? -1 : b > a ? 1 : b >= a ? 0 : NaN;
+}
+
 function bisector(f) {
-  let delta = f;
-  let compare1 = f;
-  let compare2 = f;
+  let compare1, compare2, delta;
+
+  // If an accessor is specified, promote it to a comparator. In this case we
+  // can test whether the search value is (self-) comparable. We can’t do this
+  // for a comparator (except for specific, known comparators) because we can’t
+  // tell if the comparator is symmetric, and an asymmetric comparator can’t be
+  // used to test whether a single value is comparable.
   if (f.length !== 2) {
-    delta = (d, x) => f(d) - x;
     compare1 = ascending$2;
     compare2 = (d, x) => ascending$2(f(d), x);
+    delta = (d, x) => f(d) - x;
+  } else {
+    compare1 = f === ascending$2 || f === descending ? f : zero$1;
+    compare2 = f;
+    delta = f;
   }
   function left(a, x, lo = 0, hi = a.length) {
     if (lo < hi) {
@@ -1274,6 +709,9 @@ function bisector(f) {
     right
   };
 }
+function zero$1() {
+  return 0;
+}
 
 function number$2(x) {
   return x === null ? NaN : +x;
@@ -1284,7 +722,7 @@ const bisectRight = ascendingBisect.right;
 bisector(number$2).center;
 var bisect = bisectRight;
 
-function count$1(values, valueof) {
+function count(values, valueof) {
   let count = 0;
   if (valueof === undefined) {
     for (let value of values) {
@@ -1303,7 +741,7 @@ function count$1(values, valueof) {
   return count;
 }
 
-function extent$1(values, valueof) {
+function extent(values, valueof) {
   let min;
   let max;
   if (valueof === undefined) {
@@ -1390,56 +828,63 @@ function constant$5(x) {
   return () => x;
 }
 
-var e10$1 = Math.sqrt(50),
-  e5$1 = Math.sqrt(10),
-  e2$1 = Math.sqrt(2);
-function ticks$1(start, stop, count) {
-  var reverse,
-    i = -1,
-    n,
-    ticks,
-    step;
+const e10 = Math.sqrt(50),
+  e5 = Math.sqrt(10),
+  e2 = Math.sqrt(2);
+function tickSpec(start, stop, count) {
+  const step = (stop - start) / Math.max(0, count),
+    power = Math.floor(Math.log10(step)),
+    error = step / Math.pow(10, power),
+    factor = error >= e10 ? 10 : error >= e5 ? 5 : error >= e2 ? 2 : 1;
+  let i1, i2, inc;
+  if (power < 0) {
+    inc = Math.pow(10, -power) / factor;
+    i1 = Math.round(start * inc);
+    i2 = Math.round(stop * inc);
+    if (i1 / inc < start) ++i1;
+    if (i2 / inc > stop) --i2;
+    inc = -inc;
+  } else {
+    inc = Math.pow(10, power) * factor;
+    i1 = Math.round(start / inc);
+    i2 = Math.round(stop / inc);
+    if (i1 * inc < start) ++i1;
+    if (i2 * inc > stop) --i2;
+  }
+  if (i2 < i1 && 0.5 <= count && count < 2) return tickSpec(start, stop, count * 2);
+  return [i1, i2, inc];
+}
+function ticks(start, stop, count) {
   stop = +stop, start = +start, count = +count;
-  if (start === stop && count > 0) return [start];
-  if (reverse = stop < start) n = start, start = stop, stop = n;
-  if ((step = tickIncrement$1(start, stop, count)) === 0 || !isFinite(step)) return [];
-  if (step > 0) {
-    let r0 = Math.round(start / step),
-      r1 = Math.round(stop / step);
-    if (r0 * step < start) ++r0;
-    if (r1 * step > stop) --r1;
-    ticks = new Array(n = r1 - r0 + 1);
-    while (++i < n) ticks[i] = (r0 + i) * step;
+  if (!(count > 0)) return [];
+  if (start === stop) return [start];
+  const reverse = stop < start,
+    [i1, i2, inc] = reverse ? tickSpec(stop, start, count) : tickSpec(start, stop, count);
+  if (!(i2 >= i1)) return [];
+  const n = i2 - i1 + 1,
+    ticks = new Array(n);
+  if (reverse) {
+    if (inc < 0) for (let i = 0; i < n; ++i) ticks[i] = (i2 - i) / -inc;else for (let i = 0; i < n; ++i) ticks[i] = (i2 - i) * inc;
   } else {
-    step = -step;
-    let r0 = Math.round(start * step),
-      r1 = Math.round(stop * step);
-    if (r0 / step < start) ++r0;
-    if (r1 / step > stop) --r1;
-    ticks = new Array(n = r1 - r0 + 1);
-    while (++i < n) ticks[i] = (r0 + i) / step;
-  }
-  if (reverse) ticks.reverse();
+    if (inc < 0) for (let i = 0; i < n; ++i) ticks[i] = (i1 + i) / -inc;else for (let i = 0; i < n; ++i) ticks[i] = (i1 + i) * inc;
+  }
   return ticks;
 }
-function tickIncrement$1(start, stop, count) {
-  var step = (stop - start) / Math.max(0, count),
-    power = Math.floor(Math.log(step) / Math.LN10),
-    error = step / Math.pow(10, power);
-  return power >= 0 ? (error >= e10$1 ? 10 : error >= e5$1 ? 5 : error >= e2$1 ? 2 : 1) * Math.pow(10, power) : -Math.pow(10, -power) / (error >= e10$1 ? 10 : error >= e5$1 ? 5 : error >= e2$1 ? 2 : 1);
+function tickIncrement(start, stop, count) {
+  stop = +stop, start = +start, count = +count;
+  return tickSpec(start, stop, count)[2];
 }
-function tickStep$1(start, stop, count) {
-  var step0 = Math.abs(stop - start) / Math.max(0, count),
-    step1 = Math.pow(10, Math.floor(Math.log(step0) / Math.LN10)),
-    error = step0 / step1;
-  if (error >= e10$1) step1 *= 10;else if (error >= e5$1) step1 *= 5;else if (error >= e2$1) step1 *= 2;
-  return stop < start ? -step1 : step1;
+function tickStep(start, stop, count) {
+  stop = +stop, start = +start, count = +count;
+  const reverse = stop < start,
+    inc = reverse ? tickIncrement(stop, start, count) : tickIncrement(start, stop, count);
+  return (reverse ? -1 : 1) * (inc < 0 ? 1 / -inc : inc);
 }
 
 function nice(start, stop, count) {
   let prestep;
   while (true) {
-    const step = tickIncrement$1(start, stop, count);
+    const step = tickIncrement(start, stop, count);
     if (step === prestep || step === 0 || !isFinite(step)) {
       return [start, stop];
     } else if (step > 0) {
@@ -1453,19 +898,20 @@ function nice(start, stop, count) {
   }
 }
 
-function thresholdSturges$1(values) {
-  return Math.ceil(Math.log(count$1(values)) / Math.LN2) + 1;
+function thresholdSturges(values) {
+  return Math.max(1, Math.ceil(Math.log(count(values)) / Math.LN2) + 1);
 }
 
 function bin() {
   var value = identity$6,
-    domain = extent$1,
-    threshold = thresholdSturges$1;
+    domain = extent,
+    threshold = thresholdSturges;
   function histogram(data) {
     if (!Array.isArray(data)) data = Array.from(data);
     var i,
       n = data.length,
       x,
+      step,
       values = new Array(n);
     for (i = 0; i < n; ++i) {
       values[i] = value(data[i], i, data);
@@ -1480,8 +926,13 @@ function bin() {
     if (!Array.isArray(tz)) {
       const max = x1,
         tn = +tz;
-      if (domain === extent$1) [x0, x1] = nice(x0, x1, tn);
-      tz = ticks$1(x0, x1, tn);
+      if (domain === extent) [x0, x1] = nice(x0, x1, tn);
+      tz = ticks(x0, x1, tn);
+
+      // If the domain is aligned with the first tick (which it will by
+      // default), then we can use quantization rather than bisection to bin
+      // values, which is substantially faster.
+      if (tz[0] <= x0) step = tickIncrement(x0, x1, tn);
 
       // If the last threshold is coincident with the domain’s upper bound, the
       // last bin will be zero-width. If the default domain is used, and this
@@ -1491,8 +942,8 @@ function bin() {
       // coerce values or the domain to numbers, and thus must be careful to
       // compare order (>=) rather than strict equality (===)!
       if (tz[tz.length - 1] >= x1) {
-        if (max >= x1 && domain === extent$1) {
-          const step = tickIncrement$1(x0, x1, tn);
+        if (max >= x1 && domain === extent) {
+          const step = tickIncrement(x0, x1, tn);
           if (isFinite(step)) {
             if (step > 0) {
               x1 = (Math.floor(x1 / step) + 1) * step;
@@ -1507,9 +958,13 @@ function bin() {
     }
 
     // Remove any thresholds outside the domain.
-    var m = tz.length;
-    while (tz[0] <= x0) tz.shift(), --m;
-    while (tz[m - 1] > x1) tz.pop(), --m;
+    // Be careful not to mutate an array owned by the user!
+    var m = tz.length,
+      a = 0,
+      b = m;
+    while (tz[a] <= x0) ++a;
+    while (tz[b - 1] > x1) --b;
+    if (a || b < m) tz = tz.slice(a, b), m = b - a;
     var bins = new Array(m + 1),
       bin;
 
@@ -1521,10 +976,26 @@ function bin() {
     }
 
     // Assign data to bins by value, ignoring any outside the domain.
-    for (i = 0; i < n; ++i) {
-      x = values[i];
-      if (x != null && x0 <= x && x <= x1) {
-        bins[bisect(tz, x, 0, m)].push(data[i]);
+    if (isFinite(step)) {
+      if (step > 0) {
+        for (i = 0; i < n; ++i) {
+          if ((x = values[i]) != null && x0 <= x && x <= x1) {
+            bins[Math.min(m, Math.floor((x - x0) / step))].push(data[i]);
+          }
+        }
+      } else if (step < 0) {
+        for (i = 0; i < n; ++i) {
+          if ((x = values[i]) != null && x0 <= x && x <= x1) {
+            const j = Math.floor((x0 - x) * step);
+            bins[Math.min(m, j + (tz[j] <= x))].push(data[i]); // handle off-by-one due to rounding
+          }
+        }
+      }
+    } else {
+      for (i = 0; i < n; ++i) {
+        if ((x = values[i]) != null && x0 <= x && x <= x1) {
+          bins[bisect(tz, x, 0, m)].push(data[i]);
+        }
       }
     }
     return bins;
@@ -1536,7 +1007,7 @@ function bin() {
     return arguments.length ? (domain = typeof _ === "function" ? _ : constant$5([_[0], _[1]]), histogram) : domain;
   };
   histogram.thresholds = function (_) {
-    return arguments.length ? (threshold = typeof _ === "function" ? _ : Array.isArray(_) ? constant$5(slice$1.call(_)) : constant$5(_), histogram) : threshold;
+    return arguments.length ? (threshold = typeof _ === "function" ? _ : constant$5(Array.isArray(_) ? slice$1.call(_) : _), histogram) : threshold;
   };
   return histogram;
 }
@@ -2913,15 +2384,15 @@ function Color() {}
 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,
@@ -3073,15 +2544,16 @@ var named = {
   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
@@ -3089,6 +2561,9 @@ define(Color, color, {
 function color_formatHex() {
   return this.rgb().formatHex();
 }
+function color_formatHex8() {
+  return this.rgb().formatHex8();
+}
 function color_formatHsl() {
   return hslConvert(this).formatHsl();
 }
@@ -3135,36 +2610,48 @@ function Rgb(r, g, b, opacity) {
   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) {
@@ -3204,15 +2691,15 @@ function Hsl(h, s, l, opacity) {
   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,
@@ -3220,15 +2707,24 @@ define(Hsl, hsl, extend(Color, {
       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) {
@@ -4439,38 +3935,56 @@ const pi$1 = Math.PI,
   tau$1 = 2 * pi$1,
   epsilon$1 = 1e-6,
   tauEpsilon = tau$1 - epsilon$1;
-function Path() {
-  this._x0 = this._y0 =
-  // start of current subpath
-  this._x1 = this._y1 = null; // end of current subpath
-  this._ = "";
-}
-function path() {
-  return new Path();
-}
-Path.prototype = path.prototype = {
-  constructor: Path,
-  moveTo: function (x, y) {
-    this._ += "M" + (this._x0 = this._x1 = +x) + "," + (this._y0 = this._y1 = +y);
-  },
-  closePath: function () {
+function append$1(strings) {
+  this._ += strings[0];
+  for (let i = 1, n = strings.length; i < n; ++i) {
+    this._ += arguments[i] + strings[i];
+  }
+}
+function appendRound$1(digits) {
+  let d = Math.floor(digits);
+  if (!(d >= 0)) throw new Error(`invalid digits: ${digits}`);
+  if (d > 15) return append$1;
+  const k = 10 ** d;
+  return function (strings) {
+    this._ += strings[0];
+    for (let i = 1, n = strings.length; i < n; ++i) {
+      this._ += Math.round(arguments[i] * k) / k + strings[i];
+    }
+  };
+}
+class Path {
+  constructor(digits) {
+    this._x0 = this._y0 =
+    // start of current subpath
+    this._x1 = this._y1 = null; // end of current subpath
+    this._ = "";
+    this._append = digits == null ? append$1 : appendRound$1(digits);
+  }
+  moveTo(x, y) {
+    this._append`M${this._x0 = this._x1 = +x},${this._y0 = this._y1 = +y}`;
+  }
+  closePath() {
     if (this._x1 !== null) {
       this._x1 = this._x0, this._y1 = this._y0;
-      this._ += "Z";
+      this._append`Z`;
     }
-  },
-  lineTo: function (x, y) {
-    this._ += "L" + (this._x1 = +x) + "," + (this._y1 = +y);
-  },
-  quadraticCurveTo: function (x1, y1, x, y) {
-    this._ += "Q" + +x1 + "," + +y1 + "," + (this._x1 = +x) + "," + (this._y1 = +y);
-  },
-  bezierCurveTo: function (x1, y1, x2, y2, x, y) {
-    this._ += "C" + +x1 + "," + +y1 + "," + +x2 + "," + +y2 + "," + (this._x1 = +x) + "," + (this._y1 = +y);
-  },
-  arcTo: function (x1, y1, x2, y2, r) {
+  }
+  lineTo(x, y) {
+    this._append`L${this._x1 = +x},${this._y1 = +y}`;
+  }
+  quadraticCurveTo(x1, y1, x, y) {
+    this._append`Q${+x1},${+y1},${this._x1 = +x},${this._y1 = +y}`;
+  }
+  bezierCurveTo(x1, y1, x2, y2, x, y) {
+    this._append`C${+x1},${+y1},${+x2},${+y2},${this._x1 = +x},${this._y1 = +y}`;
+  }
+  arcTo(x1, y1, x2, y2, r) {
     x1 = +x1, y1 = +y1, x2 = +x2, y2 = +y2, r = +r;
-    var x0 = this._x1,
+
+    // Is the radius negative? Error.
+    if (r < 0) throw new Error(`negative radius: ${r}`);
+    let x0 = this._x1,
       y0 = this._y1,
       x21 = x2 - x1,
       y21 = y2 - y1,
@@ -4478,12 +3992,9 @@ Path.prototype = path.prototype = {
       y01 = y0 - y1,
       l01_2 = x01 * x01 + y01 * y01;
 
-    // Is the radius negative? Error.
-    if (r < 0) throw new Error("negative radius: " + r);
-
     // Is this path empty? Move to (x1,y1).
     if (this._x1 === null) {
-      this._ += "M" + (this._x1 = x1) + "," + (this._y1 = y1);
+      this._append`M${this._x1 = x1},${this._y1 = y1}`;
     }
 
     // Or, is (x1,y1) coincident with (x0,y0)? Do nothing.
@@ -4493,12 +4004,12 @@ Path.prototype = path.prototype = {
     // Equivalently, is (x1,y1) coincident with (x2,y2)?
     // Or, is the radius zero? Line to (x1,y1).
     else if (!(Math.abs(y01 * x21 - y21 * x01) > epsilon$1) || !r) {
-      this._ += "L" + (this._x1 = x1) + "," + (this._y1 = y1);
+      this._append`L${this._x1 = x1},${this._y1 = y1}`;
     }
 
     // Otherwise, draw an arc!
     else {
-      var x20 = x2 - x0,
+      let x20 = x2 - x0,
         y20 = y2 - y0,
         l21_2 = x21 * x21 + y21 * y21,
         l20_2 = x20 * x20 + y20 * y20,
@@ -4510,31 +4021,31 @@ Path.prototype = path.prototype = {
 
       // If the start tangent is not coincident with (x0,y0), line to.
       if (Math.abs(t01 - 1) > epsilon$1) {
-        this._ += "L" + (x1 + t01 * x01) + "," + (y1 + t01 * y01);
+        this._append`L${x1 + t01 * x01},${y1 + t01 * y01}`;
       }
-      this._ += "A" + r + "," + r + ",0,0," + +(y01 * x20 > x01 * y20) + "," + (this._x1 = x1 + t21 * x21) + "," + (this._y1 = y1 + t21 * y21);
+      this._append`A${r},${r},0,0,${+(y01 * x20 > x01 * y20)},${this._x1 = x1 + t21 * x21},${this._y1 = y1 + t21 * y21}`;
     }
-  },
-  arc: function (x, y, r, a0, a1, ccw) {
+  }
+  arc(x, y, r, a0, a1, ccw) {
     x = +x, y = +y, r = +r, ccw = !!ccw;
-    var dx = r * Math.cos(a0),
+
+    // Is the radius negative? Error.
+    if (r < 0) throw new Error(`negative radius: ${r}`);
+    let dx = r * Math.cos(a0),
       dy = r * Math.sin(a0),
       x0 = x + dx,
       y0 = y + dy,
       cw = 1 ^ ccw,
       da = ccw ? a0 - a1 : a1 - a0;
 
-    // Is the radius negative? Error.
-    if (r < 0) throw new Error("negative radius: " + r);
-
     // Is this path empty? Move to (x0,y0).
     if (this._x1 === null) {
-      this._ += "M" + x0 + "," + y0;
+      this._append`M${x0},${y0}`;
     }
 
     // Or, is (x0,y0) not coincident with the previous point? Line to (x0,y0).
     else if (Math.abs(this._x1 - x0) > epsilon$1 || Math.abs(this._y1 - y0) > epsilon$1) {
-      this._ += "L" + x0 + "," + y0;
+      this._append`L${x0},${y0}`;
     }
 
     // Is this arc empty? We’re done.
@@ -4545,119 +4056,20 @@ Path.prototype = path.prototype = {
 
     // Is this a complete circle? Draw two arcs to complete the circle.
     if (da > tauEpsilon) {
-      this._ += "A" + r + "," + r + ",0,1," + cw + "," + (x - dx) + "," + (y - dy) + "A" + r + "," + r + ",0,1," + cw + "," + (this._x1 = x0) + "," + (this._y1 = y0);
+      this._append`A${r},${r},0,1,${cw},${x - dx},${y - dy}A${r},${r},0,1,${cw},${this._x1 = x0},${this._y1 = y0}`;
     }
 
     // Is this arc non-empty? Draw an arc!
     else if (da > epsilon$1) {
-      this._ += "A" + r + "," + r + ",0," + +(da >= pi$1) + "," + cw + "," + (this._x1 = x + r * Math.cos(a1)) + "," + (this._y1 = y + r * Math.sin(a1));
+      this._append`A${r},${r},0,${+(da >= pi$1)},${cw},${this._x1 = x + r * Math.cos(a1)},${this._y1 = y + r * Math.sin(a1)}`;
     }
-  },
-  rect: function (x, y, w, h) {
-    this._ += "M" + (this._x0 = this._x1 = +x) + "," + (this._y0 = this._y1 = +y) + "h" + +w + "v" + +h + "h" + -w + "Z";
-  },
-  toString: function () {
-    return this._;
   }
-};
-
-function count(values, valueof) {
-  let count = 0;
-  if (valueof === undefined) {
-    for (let value of values) {
-      if (value != null && (value = +value) >= value) {
-        ++count;
-      }
-    }
-  } else {
-    let index = -1;
-    for (let value of values) {
-      if ((value = valueof(value, ++index, values)) != null && (value = +value) >= value) {
-        ++count;
-      }
-    }
+  rect(x, y, w, h) {
+    this._append`M${this._x0 = this._x1 = +x},${this._y0 = this._y1 = +y}h${w = +w}v${+h}h${-w}Z`;
   }
-  return count;
-}
-
-function extent(values, valueof) {
-  let min;
-  let max;
-  if (valueof === undefined) {
-    for (const value of values) {
-      if (value != null) {
-        if (min === undefined) {
-          if (value >= value) min = max = value;
-        } else {
-          if (min > value) min = value;
-          if (max < value) max = value;
-        }
-      }
-    }
-  } else {
-    let index = -1;
-    for (let value of values) {
-      if ((value = valueof(value, ++index, values)) != null) {
-        if (min === undefined) {
-          if (value >= value) min = max = value;
-        } else {
-          if (min > value) min = value;
-          if (max < value) max = value;
-        }
-      }
-    }
+  toString() {
+    return this._;
   }
-  return [min, max];
-}
-
-var e10 = Math.sqrt(50),
-  e5 = Math.sqrt(10),
-  e2 = Math.sqrt(2);
-function ticks(start, stop, count) {
-  var reverse,
-    i = -1,
-    n,
-    ticks,
-    step;
-  stop = +stop, start = +start, count = +count;
-  if (start === stop && count > 0) return [start];
-  if (reverse = stop < start) n = start, start = stop, stop = n;
-  if ((step = tickIncrement(start, stop, count)) === 0 || !isFinite(step)) return [];
-  if (step > 0) {
-    let r0 = Math.round(start / step),
-      r1 = Math.round(stop / step);
-    if (r0 * step < start) ++r0;
-    if (r1 * step > stop) --r1;
-    ticks = new Array(n = r1 - r0 + 1);
-    while (++i < n) ticks[i] = (r0 + i) * step;
-  } else {
-    step = -step;
-    let r0 = Math.round(start * step),
-      r1 = Math.round(stop * step);
-    if (r0 / step < start) ++r0;
-    if (r1 / step > stop) --r1;
-    ticks = new Array(n = r1 - r0 + 1);
-    while (++i < n) ticks[i] = (r0 + i) / step;
-  }
-  if (reverse) ticks.reverse();
-  return ticks;
-}
-function tickIncrement(start, stop, count) {
-  var step = (stop - start) / Math.max(0, count),
-    power = Math.floor(Math.log(step) / Math.LN10),
-    error = step / Math.pow(10, power);
-  return power >= 0 ? (error >= e10 ? 10 : error >= e5 ? 5 : error >= e2 ? 2 : 1) * Math.pow(10, power) : -Math.pow(10, -power) / (error >= e10 ? 10 : error >= e5 ? 5 : error >= e2 ? 2 : 1);
-}
-function tickStep(start, stop, count) {
-  var step0 = Math.abs(stop - start) / Math.max(0, count),
-    step1 = Math.pow(10, Math.floor(Math.log(step0) / Math.LN10)),
-    error = step0 / step1;
-  if (error >= e10) step1 *= 10;else if (error >= e5) step1 *= 5;else if (error >= e2) step1 *= 2;
-  return stop < start ? -step1 : step1;
-}
-
-function thresholdSturges(values) {
-  return Math.ceil(Math.log(count(values)) / Math.LN2) + 1;
 }
 
 var array$1 = Array.prototype;
@@ -4724,9 +4136,10 @@ function Contours () {
 
     // Convert number of thresholds into uniform thresholds.
     if (!Array.isArray(tz)) {
-      const e = extent(values),
-        ts = tickStep(e[0], e[1], tz);
-      tz = ticks(Math.floor(e[0] / ts) * ts, Math.floor(e[1] / ts - 1) * ts, tz);
+      const e = extent(values, finite);
+      tz = ticks(...nice(e[0], e[1], tz), tz);
+      while (tz[tz.length - 1] >= e[1]) tz.pop();
+      while (tz[1] < e[0]) tz.shift();
     } else {
       tz = tz.slice().sort(ascending);
     }
@@ -4736,10 +4149,12 @@ function Contours () {
   // Accumulate, smooth contour rings, assign holes to exterior rings.
   // Based on https://github.com/mbostock/shapefile/blob/v0.6.2/shp/polygon.js
   function contour(values, value) {
+    const v = value == null ? NaN : +value;
+    if (isNaN(v)) throw new Error(`invalid value: ${value}`);
     var polygons = [],
       holes = [];
-    isorings(values, value, function (ring) {
-      smooth(ring, values, value);
+    isorings(values, v, function (ring) {
+      smooth(ring, values, v);
       if (area(ring) > 0) polygons.push([ring]);else holes.push(ring);
     });
     holes.forEach(function (hole) {
@@ -4771,10 +4186,10 @@ function Contours () {
 
     // Special case for the first row (y = -1, t2 = t3 = 0).
     x = y = -1;
-    t1 = values[0] >= value;
+    t1 = above(values[0], value);
     cases[t1 << 1].forEach(stitch);
     while (++x < dx - 1) {
-      t0 = t1, t1 = values[x + 1] >= value;
+      t0 = t1, t1 = above(values[x + 1], value);
       cases[t0 | t1 << 1].forEach(stitch);
     }
     cases[t1 << 0].forEach(stitch);
@@ -4782,12 +4197,12 @@ function Contours () {
     // General case for the intermediate rows.
     while (++y < dy - 1) {
       x = -1;
-      t1 = values[y * dx + dx] >= value;
-      t2 = values[y * dx] >= value;
+      t1 = above(values[y * dx + dx], value);
+      t2 = above(values[y * dx], value);
       cases[t1 << 1 | t2 << 2].forEach(stitch);
       while (++x < dx - 1) {
-        t0 = t1, t1 = values[y * dx + dx + x + 1] >= value;
-        t3 = t2, t2 = values[y * dx + x + 1] >= value;
+        t0 = t1, t1 = above(values[y * dx + dx + x + 1], value);
+        t3 = t2, t2 = above(values[y * dx + x + 1], value);
         cases[t0 | t1 << 1 | t2 << 2 | t3 << 3].forEach(stitch);
       }
       cases[t1 | t2 << 3].forEach(stitch);
@@ -4798,7 +4213,7 @@ function Contours () {
     t2 = values[y * dx] >= value;
     cases[t2 << 2].forEach(stitch);
     while (++x < dx - 1) {
-      t3 = t2, t2 = values[y * dx + x + 1] >= value;
+      t3 = t2, t2 = above(values[y * dx + x + 1], value);
       cases[t2 << 2 | t3 << 3].forEach(stitch);
     }
     cases[t2 << 3].forEach(stitch);
@@ -4865,15 +4280,12 @@ function Contours () {
         y = point[1],
         xt = x | 0,
         yt = y | 0,
-        v0,
-        v1 = values[yt * dx + xt];
+        v1 = valid(values[yt * dx + xt]);
       if (x > 0 && x < dx && xt === x) {
-        v0 = values[yt * dx + xt - 1];
-        point[0] = x + (value - v0) / (v1 - v0) - 0.5;
+        point[0] = smooth1(x, valid(values[yt * dx + xt - 1]), v1, value);
       }
       if (y > 0 && y < dy && yt === y) {
-        v0 = values[(yt - 1) * dx + xt];
-        point[1] = y + (value - v0) / (v1 - v0) - 0.5;
+        point[1] = smooth1(y, valid(values[(yt - 1) * dx + xt]), v1, value);
       }
     });
   }
@@ -4894,6 +4306,28 @@ function Contours () {
   return contours;
 }
 
+// When computing the extent, ignore infinite values (as well as invalid ones).
+function finite(x) {
+  return isFinite(x) ? x : NaN;
+}
+
+// Is the (possibly invalid) x greater than or equal to the (known valid) value?
+// Treat any invalid value as below negative infinity.
+function above(x, value) {
+  return x == null ? false : +x >= value;
+}
+
+// During smoothing, treat any invalid value as negative infinity.
+function valid(v) {
+  return v == null || isNaN(v = +v) ? -Infinity : v;
+}
+function smooth1(x, v0, v1, value) {
+  const a = value - v0;
+  const b = v1 - v0;
+  const d = isFinite(a) || isFinite(b) ? a / b : Math.sign(a) / Math.sign(b);
+  return isNaN(d) ? x : x + d - 0.5;
+}
+
 function formatDecimal (x) {
   return Math.abs(x = Math.round(x)) >= 1e21 ? x.toLocaleString("en").replace(/,/g, "") : x.toString(10);
 }
@@ -5850,66 +5284,96 @@ function lengthPoint(x, y) {
 }
 var pathMeasure = lengthStream;
 
-function PathString() {
-  this._string = [];
-}
-PathString.prototype = {
-  _radius: 4.5,
-  _circle: circle(4.5),
-  pointRadius: function (_) {
-    if ((_ = +_) !== this._radius) this._radius = _, this._circle = null;
+// Simple caching for constant-radius points.
+let cacheDigits, cacheAppend, cacheRadius, cacheCircle;
+class PathString {
+  constructor(digits) {
+    this._append = digits == null ? append : appendRound(digits);
+    this._radius = 4.5;
+    this._ = "";
+  }
+  pointRadius(_) {
+    this._radius = +_;
     return this;
-  },
-  polygonStart: function () {
+  }
+  polygonStart() {
     this._line = 0;
-  },
-  polygonEnd: function () {
+  }
+  polygonEnd() {
     this._line = NaN;
-  },
-  lineStart: function () {
+  }
+  lineStart() {
     this._point = 0;
-  },
-  lineEnd: function () {
-    if (this._line === 0) this._string.push("Z");
+  }
+  lineEnd() {
+    if (this._line === 0) this._ += "Z";
     this._point = NaN;
-  },
-  point: function (x, y) {
+  }
+  point(x, y) {
     switch (this._point) {
       case 0:
         {
-          this._string.push("M", x, ",", y);
+          this._append`M${x},${y}`;
           this._point = 1;
           break;
         }
       case 1:
         {
-          this._string.push("L", x, ",", y);
+          this._append`L${x},${y}`;
           break;
         }
       default:
         {
-          if (this._circle == null) this._circle = circle(this._radius);
-          this._string.push("M", x, ",", y, this._circle);
+          this._append`M${x},${y}`;
+          if (this._radius !== cacheRadius || this._append !== cacheAppend) {
+            const r = this._radius;
+            const s = this._;
+            this._ = ""; // stash the old string so we can cache the circle path fragment
+            this._append`m0,${r}a${r},${r} 0 1,1 0,${-2 * r}a${r},${r} 0 1,1 0,${2 * r}z`;
+            cacheRadius = r;
+            cacheAppend = this._append;
+            cacheCircle = this._;
+            this._ = s;
+          }
+          this._ += cacheCircle;
           break;
         }
     }
-  },
-  result: function () {
-    if (this._string.length) {
-      var result = this._string.join("");
-      this._string = [];
-      return result;
-    } else {
-      return null;
-    }
   }
-};
-function circle(radius) {
-  return "m0," + radius + "a" + radius + "," + radius + " 0 1,1 0," + -2 * radius + "a" + radius + "," + radius + " 0 1,1 0," + 2 * radius + "z";
+  result() {
+    const result = this._;
+    this._ = "";
+    return result.length ? result : null;
+  }
+}
+function append(strings) {
+  let i = 1;
+  this._ += strings[0];
+  for (const j = strings.length; i < j; ++i) {
+    this._ += arguments[i] + strings[i];
+  }
+}
+function appendRound(digits) {
+  const d = Math.floor(digits);
+  if (!(d >= 0)) throw new RangeError(`invalid digits: ${digits}`);
+  if (d > 15) return append;
+  if (d !== cacheDigits) {
+    const k = 10 ** d;
+    cacheDigits = d;
+    cacheAppend = function append(strings) {
+      let i = 1;
+      this._ += strings[0];
+      for (const j = strings.length; i < j; ++i) {
+        this._ += Math.round(arguments[i] * k) / k + strings[i];
+      }
+    };
+  }
+  return cacheAppend;
 }
 
 function index (projection, context) {
-  var pointRadius = 4.5,
+  let digits = 3,
+    pointRadius = 4.5,
     projectionStream,
     contextStream;
   function path(object) {
@@ -5936,11 +5400,13 @@ function index (projection, context) {
     return pathCentroid.result();
   };
   path.projection = function (_) {
-    return arguments.length ? (projectionStream = _ == null ? (projection = null, identity$2) : (projection = _).stream, path) : projection;
+    if (!arguments.length) return projection;
+    projectionStream = _ == null ? (projection = null, identity$2) : (projection = _).stream;
+    return path;
   };
   path.context = function (_) {
     if (!arguments.length) return context;
-    contextStream = _ == null ? (context = null, new PathString()) : new PathContext(context = _);
+    contextStream = _ == null ? (context = null, new PathString(digits)) : new PathContext(context = _);
     if (typeof pointRadius !== "function") contextStream.pointRadius(pointRadius);
     return path;
   };
@@ -5949,7 +5415,17 @@ function index (projection, context) {
     pointRadius = typeof _ === "function" ? _ : (contextStream.pointRadius(+_), +_);
     return path;
   };
-  return path.projection(projection).context(context);
+  path.digits = function (_) {
+    if (!arguments.length) return digits;
+    if (_ == null) digits = null;else {
+      const d = Math.floor(_);
+      if (!(d >= 0)) throw new RangeError(`invalid digits: ${_}`);
+      digits = d;
+    }
+    if (context === null) contextStream = new PathString(digits);
+    return path;
+  };
+  return path.projection(projection).digits(digits).context(context);
 }
 
 function transformer$1(methods) {
@@ -6244,7 +5720,7 @@ function continuous() {
 }
 
 function tickFormat(start, stop, count, specifier) {
-  var step = tickStep$1(start, stop, count),
+  var step = tickStep(start, stop, count),
     precision;
   specifier = formatSpecifier(specifier == null ? ",f" : specifier);
   switch (specifier.type) {
@@ -6277,7 +5753,7 @@ function linearish(scale) {
   var domain = scale.domain;
   scale.ticks = function (count) {
     var d = domain();
-    return ticks$1(d[0], d[d.length - 1], count == null ? 10 : count);
+    return ticks(d[0], d[d.length - 1], count == null ? 10 : count);
   };
   scale.tickFormat = function (count, specifier) {
     var d = domain();
@@ -6298,7 +5774,7 @@ function linearish(scale) {
       step = i0, i0 = i1, i1 = step;
     }
     while (maxIter-- > 0) {
-      step = tickIncrement$1(start, stop, count);
+      step = tickIncrement(start, stop, count);
       if (step === prestep) {
         d[i0] = start;
         d[i1] = stop;
@@ -6343,6 +5819,22 @@ function constant (x) {
   };
 }
 
+function withPath(shape) {
+  let digits = 3;
+  shape.digits = function (_) {
+    if (!arguments.length) return digits;
+    if (_ == null) {
+      digits = null;
+    } else {
+      const d = Math.floor(_);
+      if (!(d >= 0)) throw new RangeError(`invalid digits: ${_}`);
+      digits = d;
+    }
+    return shape;
+  };
+  return () => new Path(digits);
+}
+
 function array (x) {
   return typeof x === "object" && "length" in x ? x // Array, TypedArray, NodeList, array-like
   : Array.from(x); // Map, Set, iterable, string, or anything else
@@ -6396,7 +5888,8 @@ function line (x$1, y$1) {
   var defined = constant(true),
     context = null,
     curve = curveLinear,
-    output = null;
+    output = null,
+    path = withPath(line);
   x$1 = typeof x$1 === "function" ? x$1 : x$1 === undefined ? x : constant(x$1);
   y$1 = typeof y$1 === "function" ? y$1 : y$1 === undefined ? y : constant(y$1);
   function line(data) {
@@ -6646,6 +6139,48 @@ class DecidablesElement extends s {
     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 */
 
@@ -6653,7 +6188,7 @@ class DecidablesElement extends s {
       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} />
@@ -6691,24 +6226,24 @@ class DecidablesElement extends s {
     `;
   }
   static get styles() {
-    return r$2`
+    return i$1`
       :host {
-        ---shadow-0: var(--shadow-0, ${o$3(this.cssBoxShadow(0))});
-        ---shadow-2: var(--shadow-2, ${o$3(this.cssBoxShadow(2))});
-        ---shadow-4: var(--shadow-4, ${o$3(this.cssBoxShadow(4))});
-        ---shadow-8: var(--shadow-8, ${o$3(this.cssBoxShadow(8))});
-
-        ---color-background: var(--color-background, ${o$3(this.greys.white)});
-        ---color-border: var(--color-border, ${o$3(this.greys.light75)});
-        ---color-text: var(--color-text, ${o$3(this.greys.dark75)});
-        ---color-text-inverse: var(--color-text-inverse, ${o$3(this.greys.white)});
-        ---color-link: var(--color-link, ${o$3(this.greys.dark25)});
-        ---color-element-background: var(--color-element-background, ${o$3(this.greys.light75)});
-        ---color-element-disabled: var(--color-element-disabled, ${o$3(this.greys.light50)});
-        ---color-element-enabled: var(--color-element-enabled, ${o$3(this.greys.dark25)});
-        ---color-element-selected: var(--color-element-selected, ${o$3(this.greys.grey)});
-        ---color-element-border: var(--color-element-border, ${o$3(this.greys.dark50)});
-        ---color-element-emphasis: var(--color-element-emphasis, ${o$3(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);
@@ -6769,7 +6304,7 @@ class DecidablesButton extends DecidablesElement {
     this.disabled = false;
   }
   static get styles() {
-    return [super.styles, r$2`
+    return [super.styles, i$1`
         :host {
           margin: 0.25rem;
         }
@@ -6839,7 +6374,7 @@ customElements.define('decidables-button', DecidablesButton);
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const l = l => null != l ? l : A$1;
+const l = l => null != l ? l : A;
 
 class DecidablesSlider extends DecidablesElement {
   static get properties() {
@@ -6894,11 +6429,11 @@ class DecidablesSlider extends DecidablesElement {
     this.value = event.target.value;
   }
   static get styles() {
-    return [super.styles, r$2`
+    return [super.styles, i$1`
         :host {
-          ---shadow-2-rotate: var(--shadow-2-rotate, ${o$3(this.cssBoxShadow(2, true, false))});
-          ---shadow-4-rotate: var(--shadow-4-rotate, ${o$3(this.cssBoxShadow(4, true, false))});
-          ---shadow-8-rotate: var(--shadow-8-rotate, ${o$3(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;
 
@@ -7204,12 +6739,15 @@ class DecidablesSpinner extends DecidablesElement {
     this.value = event.target.value;
   }
   static get styles() {
-    return [super.styles, r$2`
+    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;
         }
 
@@ -7237,8 +6775,20 @@ class DecidablesSpinner extends DecidablesElement {
           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);
@@ -7328,7 +6878,7 @@ class DecidablesSwitch extends DecidablesElement {
     }));
   }
   static get styles() {
-    return [super.styles, r$2`
+    return [super.styles, i$1`
         :host {
           display: flex;
 
@@ -7480,7 +7030,7 @@ class DecidablesToggle extends DecidablesElement {
     this.disabled = false;
   }
   static get styles() {
-    return [super.styles, r$2`
+    return [super.styles, i$1`
         fieldset {
           display: flex;
 
@@ -7555,7 +7105,7 @@ class DecidablesToggleOption extends DecidablesElement {
     }));
   }
   static get styles() {
-    return [super.styles, r$2`
+    return [super.styles, i$1`
         :host {
           display: flex;
         }
@@ -7691,6 +7241,50 @@ const DecidablesConverterSet = {
   }
 };
 
+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();
+    }
+  };
+}
+
 /*
   DetectableElement Base Class - Not intended for instantiation!
   <detectable-element>
@@ -7741,55 +7335,55 @@ class DetectableElement extends DecidablesElement {
     }, {});
   }
   static get styles() {
-    return [super.styles, r$2`
+    return [super.styles, i$1`
         :host {
-          ---color-h: var(--color-h, ${o$3(this.colors.h)});
-          ---color-m: var(--color-m, ${o$3(this.colors.m)});
-          ---color-fa: var(--color-fa, ${o$3(this.colors.fa)});
-          ---color-cr: var(--color-cr, ${o$3(this.colors.cr)});
-          ---color-hr: var(--color-hr, ${o$3(this.colors.hr)});
-          ---color-far: var(--color-far, ${o$3(this.colors.far)});
-          ---color-acc: var(--color-acc, ${o$3(this.colors.acc)});
-          ---color-d: var(--color-d, ${o$3(this.colors.d)});
-          ---color-c: var(--color-c, ${o$3(this.colors.c)});
-          ---color-s: var(--color-s, ${o$3(this.colors.s)});
-          ---color-present: var(--color-present, ${o$3(this.colors.present)});
-          ---color-absent: var(--color-absent, ${o$3(this.colors.absent)});
-          ---color-correct: var(--color-correct, ${o$3(this.colors.correct)});
-          ---color-error: var(--color-error, ${o$3(this.colors.error)});
-          ---color-nr: var(--color-nr, ${o$3(this.colors.nr)});
-
-          ---color-h-light: var(--color-h-light, ${o$3(this.lights.h)});
-          ---color-m-light: var(--color-m-light, ${o$3(this.lights.m)});
-          ---color-fa-light: var(--color-fa-light, ${o$3(this.lights.fa)});
-          ---color-cr-light: var(--color-cr-light, ${o$3(this.lights.cr)});
-          ---color-hr-light: var(--color-hr-light, ${o$3(this.lights.hr)});
-          ---color-far-light: var(--color-far-light, ${o$3(this.lights.far)});
-          ---color-acc-light: var(--color-acc-light, ${o$3(this.lights.acc)});
-          ---color-d-light: var(--color-d-light, ${o$3(this.lights.d)});
-          ---color-c-light: var(--color-c-light, ${o$3(this.lights.c)});
-          ---color-s-light: var(--color-s-light, ${o$3(this.lights.s)});
-          ---color-present-light: var(--color-present-light, ${o$3(this.lights.present)});
-          ---color-absent-light: var(--color-absent-light, ${o$3(this.lights.absent)});
-          ---color-correct-light: var(--color-correct-light, ${o$3(this.lights.correct)});
-          ---color-error-light: var(--color-error-light, ${o$3(this.lights.error)});
-          ---color-nr-light: var(--color-nr-light, ${o$3(this.lights.nr)});
-
-          ---color-h-dark: var(--color-h-dark, ${o$3(this.darks.h)});
-          ---color-m-dark: var(--color-m-dark, ${o$3(this.darks.m)});
-          ---color-fa-dark: var(--color-fa-dark, ${o$3(this.darks.fa)});
-          ---color-cr-dark: var(--color-cr-dark, ${o$3(this.darks.cr)});
-          ---color-hr-dark: var(--color-hr-dark, ${o$3(this.darks.hr)});
-          ---color-far-dark: var(--color-far-dark, ${o$3(this.darks.far)});
-          ---color-acc-dark: var(--color-acc-dark, ${o$3(this.darks.acc)});
-          ---color-d-dark: var(--color-d-dark, ${o$3(this.darks.d)});
-          ---color-c-dark: var(--color-c-dark, ${o$3(this.darks.c)});
-          ---color-s-dark: var(--color-s-dark, ${o$3(this.darks.s)});
-          ---color-present-dark: var(--color-present-dark, ${o$3(this.darks.present)});
-          ---color-absent-dark: var(--color-absent-dark, ${o$3(this.darks.absent)});
-          ---color-correct-dark: var(--color-correct-dark, ${o$3(this.darks.correct)});
-          ---color-error-dark: var(--color-error-dark, ${o$3(this.darks.error)});
-          ---color-nr-dark: var(--color-nr-dark, ${o$3(this.darks.nr)});
+          ---color-h: var(--color-h, ${r$2(this.colors.h)});
+          ---color-m: var(--color-m, ${r$2(this.colors.m)});
+          ---color-fa: var(--color-fa, ${r$2(this.colors.fa)});
+          ---color-cr: var(--color-cr, ${r$2(this.colors.cr)});
+          ---color-hr: var(--color-hr, ${r$2(this.colors.hr)});
+          ---color-far: var(--color-far, ${r$2(this.colors.far)});
+          ---color-acc: var(--color-acc, ${r$2(this.colors.acc)});
+          ---color-d: var(--color-d, ${r$2(this.colors.d)});
+          ---color-c: var(--color-c, ${r$2(this.colors.c)});
+          ---color-s: var(--color-s, ${r$2(this.colors.s)});
+          ---color-present: var(--color-present, ${r$2(this.colors.present)});
+          ---color-absent: var(--color-absent, ${r$2(this.colors.absent)});
+          ---color-correct: var(--color-correct, ${r$2(this.colors.correct)});
+          ---color-error: var(--color-error, ${r$2(this.colors.error)});
+          ---color-nr: var(--color-nr, ${r$2(this.colors.nr)});
+
+          ---color-h-light: var(--color-h-light, ${r$2(this.lights.h)});
+          ---color-m-light: var(--color-m-light, ${r$2(this.lights.m)});
+          ---color-fa-light: var(--color-fa-light, ${r$2(this.lights.fa)});
+          ---color-cr-light: var(--color-cr-light, ${r$2(this.lights.cr)});
+          ---color-hr-light: var(--color-hr-light, ${r$2(this.lights.hr)});
+          ---color-far-light: var(--color-far-light, ${r$2(this.lights.far)});
+          ---color-acc-light: var(--color-acc-light, ${r$2(this.lights.acc)});
+          ---color-d-light: var(--color-d-light, ${r$2(this.lights.d)});
+          ---color-c-light: var(--color-c-light, ${r$2(this.lights.c)});
+          ---color-s-light: var(--color-s-light, ${r$2(this.lights.s)});
+          ---color-present-light: var(--color-present-light, ${r$2(this.lights.present)});
+          ---color-absent-light: var(--color-absent-light, ${r$2(this.lights.absent)});
+          ---color-correct-light: var(--color-correct-light, ${r$2(this.lights.correct)});
+          ---color-error-light: var(--color-error-light, ${r$2(this.lights.error)});
+          ---color-nr-light: var(--color-nr-light, ${r$2(this.lights.nr)});
+
+          ---color-h-dark: var(--color-h-dark, ${r$2(this.darks.h)});
+          ---color-m-dark: var(--color-m-dark, ${r$2(this.darks.m)});
+          ---color-fa-dark: var(--color-fa-dark, ${r$2(this.darks.fa)});
+          ---color-cr-dark: var(--color-cr-dark, ${r$2(this.darks.cr)});
+          ---color-hr-dark: var(--color-hr-dark, ${r$2(this.darks.hr)});
+          ---color-far-dark: var(--color-far-dark, ${r$2(this.darks.far)});
+          ---color-acc-dark: var(--color-acc-dark, ${r$2(this.darks.acc)});
+          ---color-d-dark: var(--color-d-dark, ${r$2(this.darks.d)});
+          ---color-c-dark: var(--color-c-dark, ${r$2(this.darks.c)});
+          ---color-s-dark: var(--color-s-dark, ${r$2(this.darks.s)});
+          ---color-present-dark: var(--color-present-dark, ${r$2(this.darks.present)});
+          ---color-absent-dark: var(--color-absent-dark, ${r$2(this.darks.absent)});
+          ---color-correct-dark: var(--color-correct-dark, ${r$2(this.darks.correct)});
+          ---color-error-dark: var(--color-error-dark, ${r$2(this.darks.error)});
+          ---color-nr-dark: var(--color-nr-dark, ${r$2(this.darks.nr)});
         }
       `];
   }
@@ -7803,7 +7397,7 @@ class DetectableElement extends DecidablesElement {
   Dots; Coherence;
   # Direction, Speed, Lifetime
 */
-class RDKTask extends DetectableElement {
+class RDKTask extends DecidablesMixinResizeable(DetectableElement) {
   static get properties() {
     return {
       coherence: {
@@ -7860,21 +7454,6 @@ class RDKTask extends DetectableElement {
         attribute: false,
         type: Number,
         reflect: false
-      },
-      width: {
-        attribute: false,
-        type: Number,
-        reflect: false
-      },
-      height: {
-        attribute: false,
-        type: Number,
-        reflect: false
-      },
-      rem: {
-        attribute: false,
-        type: Number,
-        reflect: false
       }
     };
   }
@@ -7896,10 +7475,6 @@ class RDKTask extends DetectableElement {
     this.lifetime = 400; // Lifetime of each dot in milliseconds
     this.speed = 50; // Rate of dot movement in pixels per second
 
-    this.width = NaN; // Width of component in pixels
-    this.height = NaN; // Height of component in pixels
-    this.rem = NaN; // Pixels per rem for component
-
     // Private
     this.firstUpdate = true;
     this.COHERENT = 0; // "Constant" for index to coherent dots
@@ -7925,7 +7500,7 @@ class RDKTask extends DetectableElement {
   }
 
   static get styles() {
-    return [super.styles, r$2`
+    return [super.styles, i$1`
         :host {
           display: inline-block;
 
@@ -7976,27 +7551,6 @@ class RDKTask extends DetectableElement {
     /* eslint-disable-line class-methods-use-this */
     return x$1``;
   }
-  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);
-    // console.log(`rdk-task: width = ${this.width}, height = ${this.height}, rem = ${this.rem}`);
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    window.addEventListener('resize', this.getDimensions.bind(this));
-  }
-  disconnectedCallback() {
-    window.removeEventListener('resize', this.getDimensions.bind(this));
-    super.disconnectedCallback();
-  }
-  firstUpdated(changedProperties) {
-    super.firstUpdated(changedProperties);
-
-    // Get the width and height after initial render/update has occurred
-    this.getDimensions();
-  }
   update(changedProperties) {
     super.update(changedProperties);
 
@@ -12790,7 +12344,7 @@ class SDTMath {
   Styles:
     ??
 */
-class ROCSpace extends DetectableElement {
+class ROCSpace extends DecidablesMixinResizeable(DetectableElement) {
   static get properties() {
     return {
       contour: {
@@ -12842,21 +12396,6 @@ class ROCSpace extends DetectableElement {
         attribute: false,
         type: Number,
         reflect: false
-      },
-      width: {
-        attribute: false,
-        type: Number,
-        reflect: false
-      },
-      height: {
-        attribute: false,
-        type: Number,
-        reflect: false
-      },
-      rem: {
-        attribute: false,
-        type: Number,
-        reflect: false
       }
     };
   }
@@ -12888,9 +12427,6 @@ class ROCSpace extends DetectableElement {
     this.pointArray = [];
     this.isoDArray = [];
     this.isoCArray = [];
-    this.width = NaN;
-    this.height = NaN;
-    this.rem = NaN;
     this.alignState();
   }
   alignState() {
@@ -12977,7 +12513,7 @@ class ROCSpace extends DetectableElement {
     this.requestUpdate();
   }
   static get styles() {
-    return [super.styles, r$2`
+    return [super.styles, i$1`
         :host {
           display: inline-block;
 
@@ -13117,27 +12653,6 @@ class ROCSpace extends DetectableElement {
       ${DetectableElement.svgFilters}
     `;
   }
-  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);
-    // console.log(`roc-space: width = ${this.width}, height = ${this.height}, rem = ${this.rem}`);
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    window.addEventListener('resize', this.getDimensions.bind(this));
-  }
-  disconnectedCallback() {
-    window.removeEventListener('resize', this.getDimensions.bind(this));
-    super.disconnectedCallback();
-  }
-  firstUpdated(changedProperties) {
-    super.firstUpdated(changedProperties);
-
-    // Get the width and height after initial render/update has occurred
-    this.getDimensions();
-  }
   update(changedProperties) {
     super.update(changedProperties);
     this.alignState();
@@ -13270,7 +12785,7 @@ class ROCSpace extends DetectableElement {
         const contours = Contours().size([n, n]).thresholds(contourThresholds);
         const contourColorStart = this.getComputedStyleValue(this.contour === 'bias' ? '---color-element-background' : this.contour === 'sensitivity' ? '---color-d' : this.contour === 'accuracy' ? '---color-acc-dark' : null);
         const contourColorEnd = this.getComputedStyleValue(this.contour === 'bias' ? '---color-c' : this.contour === 'sensitivity' ? '---color-element-background' : this.contour === 'accuracy' ? '---color-element-background' : null);
-        const contourColor = linear().domain(extent$1(contourThresholds)).interpolate(() => {
+        const contourColor = linear().domain(extent(contourThresholds)).interpolate(() => {
           return interpolateRgb(contourColorStart, contourColorEnd);
         });
         //  DATA-JOIN
@@ -13814,7 +13329,7 @@ class DetectableControl extends DetectableElement {
     this.state = 'ended';
   }
   static get styles() {
-    return [super.styles, r$2`
+    return [super.styles, i$1`
         :host {
           display: inline-block;
         }
@@ -13893,7 +13408,7 @@ customElements.define('detectable-control', DetectableControl);
     Styles:
       ??
 */
-class SDTModel extends DetectableElement {
+class SDTModel extends DecidablesMixinResizeable(DetectableElement) {
   static get properties() {
     return {
       color: {
@@ -13970,21 +13485,6 @@ class SDTModel extends DetectableElement {
         attribute: false,
         type: Array,
         reflect: false
-      },
-      width: {
-        attribute: false,
-        type: Number,
-        reflect: false
-      },
-      height: {
-        attribute: false,
-        type: Number,
-        reflect: false
-      },
-      rem: {
-        attribute: false,
-        type: Number,
-        reflect: false
       }
     };
   }
@@ -14012,10 +13512,6 @@ class SDTModel extends DetectableElement {
     this.responses = ['present', 'absent']; // Allowable values of trial.response
     this.trials = []; // Array of simulated trials
 
-    this.width = NaN; // Width of component in pixels
-    this.height = NaN; // Height of component in pixels
-    this.rem = NaN; // Pixels per rem for component
-
     // Private
     this.muN = NaN; // Mean of noise distribution
     this.muS = NaN; // Mean of signal distribution
@@ -14084,7 +13580,7 @@ class SDTModel extends DetectableElement {
     }
   }
   static get styles() {
-    return [super.styles, r$2`
+    return [super.styles, i$1`
         :host {
           display: inline-block;
 
@@ -14350,27 +13846,6 @@ class SDTModel extends DetectableElement {
       bubbles: true
     }));
   }
-  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);
-    // console.log(`sdt-model: width = ${this.width}, height = ${this.height}, rem = ${this.rem}`);
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    window.addEventListener('resize', this.getDimensions.bind(this));
-  }
-  disconnectedCallback() {
-    window.removeEventListener('resize', this.getDimensions.bind(this));
-    super.disconnectedCallback();
-  }
-  firstUpdated(changedProperties) {
-    super.firstUpdated(changedProperties);
-
-    // Get the width and height after initial render/update has occurred
-    this.getDimensions();
-  }
   update(changedProperties) {
     super.update(changedProperties);
     this.alignState();
@@ -15444,7 +14919,7 @@ class DetectableResponse extends DetectableElement {
     this.e = 0;
   }
   static get styles() {
-    return [super.styles, r$2`
+    return [super.styles, i$1`
         :host {
           display: inline-block;
         }
@@ -15838,7 +15313,7 @@ class DetectableTable extends DetectableElement {
     this.sendEvent();
   }
   static get styles() {
-    return [super.styles, r$2`
+    return [super.styles, i$1`
         :host {
           display: inline-block;
         }
@@ -16211,7 +15686,7 @@ class SDTEquation extends DetectableElement {
     this.numeric = false;
   }
   static get styles() {
-    return [super.styles, r$2`
+    return [super.styles, i$1`
         :host {
           display: block;
 
@@ -17566,7 +17041,7 @@ customElements.define('sdt-equation-mcr2fomr', SDTEquationMCr2Fomr);
 */
 class SDTExample extends DetectableElement {
   static get styles() {
-    return [super.styles, r$2`
+    return [super.styles, i$1`
         :host {
           display: inline-block;