@record-evolution/widget-switch 1.0.1

package/dist/widget-switch.js

@@ -0,0 +1,3142 @@
+/* @license Copyright (c) 2023 Record Evolution GmbH. All rights reserved.*/
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+function __decorate(decorators, target, key, desc) {
+  var c = arguments.length,
+    r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+    d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t$4 = globalThis,
+  e$6 = t$4.ShadowRoot && (void 0 === t$4.ShadyCSS || t$4.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype,
+  s$3 = Symbol(),
+  o$4 = new WeakMap();
+let n$3 = class n {
+  constructor(t, e, o) {
+    if (this._$cssResult$ = true, o !== 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$6 && void 0 === t) {
+      const e = void 0 !== s && 1 === s.length;
+      e && (t = o$4.get(s)), void 0 === t && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), e && o$4.set(s, t));
+    }
+    return t;
+  }
+  toString() {
+    return this.cssText;
+  }
+};
+const r$5 = t => new n$3("string" == typeof t ? t : t + "", void 0, s$3),
+  i$4 = (t, ...e) => {
+    const o = 1 === t.length ? t[0] : e.reduce((e, s, o) => e + (t => {
+      if (true === t._$cssResult$) return t.cssText;
+      if ("number" == typeof t) return t;
+      throw Error("Value passed to 'css' function must be a 'css' function result: " + t + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
+    })(s) + t[o + 1], t[0]);
+    return new n$3(o, t, s$3);
+  },
+  S$1 = (s, o) => {
+    if (e$6) s.adoptedStyleSheets = o.map(t => t instanceof CSSStyleSheet ? t : t.styleSheet);else for (const e of o) {
+      const o = document.createElement("style"),
+        n = t$4.litNonce;
+      void 0 !== n && o.setAttribute("nonce", n), o.textContent = e.cssText, s.appendChild(o);
+    }
+  },
+  c$3 = e$6 ? 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
+ */
+const {
+    is: i$3,
+    defineProperty: e$5,
+    getOwnPropertyDescriptor: h$1,
+    getOwnPropertyNames: r$4,
+    getOwnPropertySymbols: o$3,
+    getPrototypeOf: n$2
+  } = Object,
+  a$1 = globalThis,
+  c$2 = a$1.trustedTypes,
+  l$1 = c$2 ? c$2.emptyScript : "",
+  p$2 = a$1.reactiveElementPolyfillSupport,
+  d$1 = (t, s) => t,
+  u$3 = {
+    toAttribute(t, s) {
+      switch (s) {
+        case Boolean:
+          t = t ? l$1 : null;
+          break;
+        case Object:
+        case Array:
+          t = null == t ? t : JSON.stringify(t);
+      }
+      return t;
+    },
+    fromAttribute(t, s) {
+      let i = t;
+      switch (s) {
+        case Boolean:
+          i = null !== t;
+          break;
+        case Number:
+          i = null === t ? null : Number(t);
+          break;
+        case Object:
+        case Array:
+          try {
+            i = JSON.parse(t);
+          } catch (t) {
+            i = null;
+          }
+      }
+      return i;
+    }
+  },
+  f$1 = (t, s) => !i$3(t, s),
+  b = {
+    attribute: true,
+    type: String,
+    converter: u$3,
+    reflect: false,
+    useDefault: false,
+    hasChanged: f$1
+  };
+Symbol.metadata ??= Symbol("metadata"), a$1.litPropertyMetadata ??= new WeakMap();
+let y$1 = class y extends HTMLElement {
+  static addInitializer(t) {
+    this._$Ei(), (this.l ??= []).push(t);
+  }
+  static get observedAttributes() {
+    return this.finalize(), this._$Eh && [...this._$Eh.keys()];
+  }
+  static createProperty(t, s = b) {
+    if (s.state && (s.attribute = false), this._$Ei(), this.prototype.hasOwnProperty(t) && ((s = Object.create(s)).wrapped = true), this.elementProperties.set(t, s), !s.noAccessor) {
+      const i = Symbol(),
+        h = this.getPropertyDescriptor(t, i, s);
+      void 0 !== h && e$5(this.prototype, t, h);
+    }
+  }
+  static getPropertyDescriptor(t, s, i) {
+    const {
+      get: e,
+      set: r
+    } = h$1(this.prototype, t) ?? {
+      get() {
+        return this[s];
+      },
+      set(t) {
+        this[s] = t;
+      }
+    };
+    return {
+      get: e,
+      set(s) {
+        const h = e?.call(this);
+        r?.call(this, s), this.requestUpdate(t, h, i);
+      },
+      configurable: true,
+      enumerable: true
+    };
+  }
+  static getPropertyOptions(t) {
+    return this.elementProperties.get(t) ?? b;
+  }
+  static _$Ei() {
+    if (this.hasOwnProperty(d$1("elementProperties"))) return;
+    const t = n$2(this);
+    t.finalize(), void 0 !== t.l && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
+  }
+  static finalize() {
+    if (this.hasOwnProperty(d$1("finalized"))) return;
+    if (this.finalized = true, this._$Ei(), this.hasOwnProperty(d$1("properties"))) {
+      const t = this.properties,
+        s = [...r$4(t), ...o$3(t)];
+      for (const i of s) this.createProperty(i, t[i]);
+    }
+    const t = this[Symbol.metadata];
+    if (null !== t) {
+      const s = litPropertyMetadata.get(t);
+      if (void 0 !== s) for (const [t, i] of s) this.elementProperties.set(t, i);
+    }
+    this._$Eh = new Map();
+    for (const [t, s] of this.elementProperties) {
+      const i = this._$Eu(t, s);
+      void 0 !== i && this._$Eh.set(i, t);
+    }
+    this.elementStyles = this.finalizeStyles(this.styles);
+  }
+  static finalizeStyles(s) {
+    const i = [];
+    if (Array.isArray(s)) {
+      const e = new Set(s.flat(1 / 0).reverse());
+      for (const s of e) i.unshift(c$3(s));
+    } else void 0 !== s && i.push(c$3(s));
+    return i;
+  }
+  static _$Eu(t, s) {
+    const i = s.attribute;
+    return false === i ? void 0 : "string" == typeof i ? i : "string" == typeof t ? t.toLowerCase() : void 0;
+  }
+  constructor() {
+    super(), this._$Ep = void 0, this.isUpdatePending = false, this.hasUpdated = false, this._$Em = null, this._$Ev();
+  }
+  _$Ev() {
+    this._$ES = new Promise(t => this.enableUpdating = t), this._$AL = new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach(t => t(this));
+  }
+  addController(t) {
+    (this._$EO ??= new Set()).add(t), void 0 !== this.renderRoot && this.isConnected && t.hostConnected?.();
+  }
+  removeController(t) {
+    this._$EO?.delete(t);
+  }
+  _$E_() {
+    const t = new Map(),
+      s = this.constructor.elementProperties;
+    for (const i of s.keys()) this.hasOwnProperty(i) && (t.set(i, this[i]), delete this[i]);
+    t.size > 0 && (this._$Ep = t);
+  }
+  createRenderRoot() {
+    const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
+    return S$1(t, this.constructor.elementStyles), t;
+  }
+  connectedCallback() {
+    this.renderRoot ??= this.createRenderRoot(), this.enableUpdating(true), this._$EO?.forEach(t => t.hostConnected?.());
+  }
+  enableUpdating(t) {}
+  disconnectedCallback() {
+    this._$EO?.forEach(t => t.hostDisconnected?.());
+  }
+  attributeChangedCallback(t, s, i) {
+    this._$AK(t, i);
+  }
+  _$ET(t, s) {
+    const i = this.constructor.elementProperties.get(t),
+      e = this.constructor._$Eu(t, i);
+    if (void 0 !== e && true === i.reflect) {
+      const h = (void 0 !== i.converter?.toAttribute ? i.converter : u$3).toAttribute(s, i.type);
+      this._$Em = t, null == h ? this.removeAttribute(e) : this.setAttribute(e, h), this._$Em = null;
+    }
+  }
+  _$AK(t, s) {
+    const i = this.constructor,
+      e = i._$Eh.get(t);
+    if (void 0 !== e && this._$Em !== e) {
+      const t = i.getPropertyOptions(e),
+        h = "function" == typeof t.converter ? {
+          fromAttribute: t.converter
+        } : void 0 !== t.converter?.fromAttribute ? t.converter : u$3;
+      this._$Em = e, this[e] = h.fromAttribute(s, t.type) ?? this._$Ej?.get(e) ?? null, this._$Em = null;
+    }
+  }
+  requestUpdate(t, s, i) {
+    if (void 0 !== t) {
+      const e = this.constructor,
+        h = this[t];
+      if (i ??= e.getPropertyOptions(t), !((i.hasChanged ?? f$1)(h, s) || i.useDefault && i.reflect && h === this._$Ej?.get(t) && !this.hasAttribute(e._$Eu(t, i)))) return;
+      this.C(t, s, i);
+    }
+    false === this.isUpdatePending && (this._$ES = this._$EP());
+  }
+  C(t, s, {
+    useDefault: i,
+    reflect: e,
+    wrapped: h
+  }, r) {
+    i && !(this._$Ej ??= new Map()).has(t) && (this._$Ej.set(t, r ?? s ?? this[t]), true !== h || void 0 !== r) || (this._$AL.has(t) || (this.hasUpdated || i || (s = void 0), this._$AL.set(t, s)), true === e && this._$Em !== t && (this._$Eq ??= new Set()).add(t));
+  }
+  async _$EP() {
+    this.isUpdatePending = true;
+    try {
+      await this._$ES;
+    } catch (t) {
+      Promise.reject(t);
+    }
+    const t = this.scheduleUpdate();
+    return null != t && (await t), !this.isUpdatePending;
+  }
+  scheduleUpdate() {
+    return this.performUpdate();
+  }
+  performUpdate() {
+    if (!this.isUpdatePending) return;
+    if (!this.hasUpdated) {
+      if (this.renderRoot ??= this.createRenderRoot(), this._$Ep) {
+        for (const [t, s] of this._$Ep) this[t] = s;
+        this._$Ep = void 0;
+      }
+      const t = this.constructor.elementProperties;
+      if (t.size > 0) for (const [s, i] of t) {
+        const {
+            wrapped: t
+          } = i,
+          e = this[s];
+        true !== t || this._$AL.has(s) || void 0 === e || this.C(s, void 0, i, e);
+      }
+    }
+    let t = false;
+    const s = this._$AL;
+    try {
+      t = this.shouldUpdate(s), t ? (this.willUpdate(s), this._$EO?.forEach(t => t.hostUpdate?.()), this.update(s)) : this._$EM();
+    } catch (s) {
+      throw t = false, this._$EM(), s;
+    }
+    t && this._$AE(s);
+  }
+  willUpdate(t) {}
+  _$AE(t) {
+    this._$EO?.forEach(t => t.hostUpdated?.()), this.hasUpdated || (this.hasUpdated = true, this.firstUpdated(t)), this.updated(t);
+  }
+  _$EM() {
+    this._$AL = new Map(), this.isUpdatePending = false;
+  }
+  get updateComplete() {
+    return this.getUpdateComplete();
+  }
+  getUpdateComplete() {
+    return this._$ES;
+  }
+  shouldUpdate(t) {
+    return true;
+  }
+  update(t) {
+    this._$Eq &&= this._$Eq.forEach(t => this._$ET(t, this[t])), this._$EM();
+  }
+  updated(t) {}
+  firstUpdated(t) {}
+};
+y$1.elementStyles = [], y$1.shadowRootOptions = {
+  mode: "open"
+}, y$1[d$1("elementProperties")] = new Map(), y$1[d$1("finalized")] = new Map(), p$2?.({
+  ReactiveElement: y$1
+}), (a$1.reactiveElementVersions ??= []).push("2.1.0");
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t$3 = globalThis,
+  i$2 = t$3.trustedTypes,
+  s$2 = i$2 ? i$2.createPolicy("lit-html", {
+    createHTML: t => t
+  }) : void 0,
+  e$4 = "$lit$",
+  h = `lit$${Math.random().toFixed(9).slice(2)}$`,
+  o$2 = "?" + h,
+  n$1 = `<${o$2}>`,
+  r$3 = document,
+  l = () => r$3.createComment(""),
+  c$1 = t => null === t || "object" != typeof t && "function" != typeof t,
+  a = Array.isArray,
+  u$2 = t => a(t) || "function" == typeof t?.[Symbol.iterator],
+  d = "[ \t\n\f\r]",
+  f = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,
+  v$1 = /-->/g,
+  _ = />/g,
+  m$1 = RegExp(`>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`, "g"),
+  p$1 = /'/g,
+  g = /"/g,
+  $ = /^(?:script|style|textarea|title)$/i,
+  y = t => (i, ...s) => ({
+    _$litType$: t,
+    strings: i,
+    values: s
+  }),
+  x = y(1),
+  T = Symbol.for("lit-noChange"),
+  E = Symbol.for("lit-nothing"),
+  A = new WeakMap(),
+  C = r$3.createTreeWalker(r$3, 129);
+function P(t, i) {
+  if (!a(t) || !t.hasOwnProperty("raw")) throw Error("invalid template strings array");
+  return void 0 !== s$2 ? s$2.createHTML(i) : i;
+}
+const V = (t, i) => {
+  const s = t.length - 1,
+    o = [];
+  let r,
+    l = 2 === i ? "<svg>" : 3 === i ? "<math>" : "",
+    c = f;
+  for (let i = 0; i < s; i++) {
+    const s = t[i];
+    let a,
+      u,
+      d = -1,
+      y = 0;
+    for (; y < s.length && (c.lastIndex = y, u = c.exec(s), null !== u);) y = c.lastIndex, c === f ? "!--" === u[1] ? c = v$1 : void 0 !== u[1] ? c = _ : void 0 !== u[2] ? ($.test(u[2]) && (r = RegExp("</" + u[2], "g")), c = m$1) : void 0 !== u[3] && (c = m$1) : c === m$1 ? ">" === u[0] ? (c = r ?? f, d = -1) : void 0 === u[1] ? d = -2 : (d = c.lastIndex - u[2].length, a = u[1], c = void 0 === u[3] ? m$1 : '"' === u[3] ? g : p$1) : c === g || c === p$1 ? c = m$1 : c === v$1 || c === _ ? c = f : (c = m$1, r = void 0);
+    const x = c === m$1 && t[i + 1].startsWith("/>") ? " " : "";
+    l += c === f ? s + n$1 : d >= 0 ? (o.push(a), s.slice(0, d) + e$4 + s.slice(d) + h + x) : s + h + (-2 === d ? i : x);
+  }
+  return [P(t, l + (t[s] || "<?>") + (2 === i ? "</svg>" : 3 === i ? "</math>" : "")), o];
+};
+class N {
+  constructor({
+    strings: t,
+    _$litType$: s
+  }, n) {
+    let r;
+    this.parts = [];
+    let c = 0,
+      a = 0;
+    const u = t.length - 1,
+      d = this.parts,
+      [f, v] = V(t, s);
+    if (this.el = N.createElement(f, n), C.currentNode = this.el.content, 2 === s || 3 === s) {
+      const t = this.el.content.firstChild;
+      t.replaceWith(...t.childNodes);
+    }
+    for (; null !== (r = C.nextNode()) && d.length < u;) {
+      if (1 === r.nodeType) {
+        if (r.hasAttributes()) for (const t of r.getAttributeNames()) if (t.endsWith(e$4)) {
+          const i = v[a++],
+            s = r.getAttribute(t).split(h),
+            e = /([.?@])?(.*)/.exec(i);
+          d.push({
+            type: 1,
+            index: c,
+            name: e[2],
+            strings: s,
+            ctor: "." === e[1] ? H : "?" === e[1] ? I : "@" === e[1] ? L : k
+          }), r.removeAttribute(t);
+        } else t.startsWith(h) && (d.push({
+          type: 6,
+          index: c
+        }), r.removeAttribute(t));
+        if ($.test(r.tagName)) {
+          const t = r.textContent.split(h),
+            s = t.length - 1;
+          if (s > 0) {
+            r.textContent = i$2 ? i$2.emptyScript : "";
+            for (let i = 0; i < s; i++) r.append(t[i], l()), C.nextNode(), d.push({
+              type: 2,
+              index: ++c
+            });
+            r.append(t[s], l());
+          }
+        }
+      } else if (8 === r.nodeType) if (r.data === o$2) d.push({
+        type: 2,
+        index: c
+      });else {
+        let t = -1;
+        for (; -1 !== (t = r.data.indexOf(h, t + 1));) d.push({
+          type: 7,
+          index: c
+        }), t += h.length - 1;
+      }
+      c++;
+    }
+  }
+  static createElement(t, i) {
+    const s = r$3.createElement("template");
+    return s.innerHTML = t, s;
+  }
+}
+function S(t, i, s = t, e) {
+  if (i === T) return i;
+  let h = void 0 !== e ? s._$Co?.[e] : s._$Cl;
+  const o = c$1(i) ? void 0 : i._$litDirective$;
+  return h?.constructor !== o && (h?._$AO?.(false), void 0 === o ? h = void 0 : (h = new o(t), h._$AT(t, s, e)), void 0 !== e ? (s._$Co ??= [])[e] = h : s._$Cl = h), void 0 !== h && (i = S(t, h._$AS(t, i.values), h, 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) {
+    const {
+        el: {
+          content: i
+        },
+        parts: s
+      } = this._$AD,
+      e = (t?.creationScope ?? r$3).importNode(i, true);
+    C.currentNode = e;
+    let h = C.nextNode(),
+      o = 0,
+      n = 0,
+      l = s[0];
+    for (; void 0 !== l;) {
+      if (o === l.index) {
+        let i;
+        2 === l.type ? i = new R(h, h.nextSibling, this, t) : 1 === l.type ? i = new l.ctor(h, l.name, l.strings, this, t) : 6 === l.type && (i = new z(h, this, t)), this._$AV.push(i), l = s[++n];
+      }
+      o !== l?.index && (h = C.nextNode(), o++);
+    }
+    return C.currentNode = r$3, e;
+  }
+  p(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++;
+  }
+};
+class R {
+  get _$AU() {
+    return this._$AM?._$AU ?? this._$Cv;
+  }
+  constructor(t, i, s, e) {
+    this.type = 2, this._$AH = E, this._$AN = void 0, this._$AA = t, this._$AB = i, this._$AM = s, this.options = e, this._$Cv = e?.isConnected ?? true;
+  }
+  get parentNode() {
+    let t = this._$AA.parentNode;
+    const i = this._$AM;
+    return void 0 !== i && 11 === t?.nodeType && (t = i.parentNode), t;
+  }
+  get startNode() {
+    return this._$AA;
+  }
+  get endNode() {
+    return this._$AB;
+  }
+  _$AI(t, i = this) {
+    t = S(this, t, i), c$1(t) ? t === E || null == t || "" === t ? (this._$AH !== E && this._$AR(), this._$AH = E) : t !== this._$AH && t !== T && this._(t) : void 0 !== t._$litType$ ? this.$(t) : void 0 !== t.nodeType ? this.T(t) : u$2(t) ? this.k(t) : this._(t);
+  }
+  O(t) {
+    return this._$AA.parentNode.insertBefore(t, this._$AB);
+  }
+  T(t) {
+    this._$AH !== t && (this._$AR(), this._$AH = this.O(t));
+  }
+  _(t) {
+    this._$AH !== E && c$1(this._$AH) ? this._$AA.nextSibling.data = t : this.T(r$3.createTextNode(t)), this._$AH = t;
+  }
+  $(t) {
+    const {
+        values: i,
+        _$litType$: s
+      } = t,
+      e = "number" == typeof s ? this._$AC(t) : (void 0 === s.el && (s.el = N.createElement(P(s.h, s.h[0]), this.options)), s);
+    if (this._$AH?._$AD === e) this._$AH.p(i);else {
+      const t = new M$1(e, this),
+        s = t.u(this.options);
+      t.p(i), this.T(s), this._$AH = t;
+    }
+  }
+  _$AC(t) {
+    let i = A.get(t.strings);
+    return void 0 === i && A.set(t.strings, i = new N(t)), i;
+  }
+  k(t) {
+    a(this._$AH) || (this._$AH = [], this._$AR());
+    const i = this._$AH;
+    let s,
+      e = 0;
+    for (const h of t) e === i.length ? i.push(s = new R(this.O(l()), this.O(l()), this, this.options)) : s = i[e], s._$AI(h), e++;
+    e < i.length && (this._$AR(s && s._$AB.nextSibling, e), i.length = e);
+  }
+  _$AR(t = this._$AA.nextSibling, i) {
+    for (this._$AP?.(false, true, i); t && t !== this._$AB;) {
+      const i = t.nextSibling;
+      t.remove(), t = i;
+    }
+  }
+  setConnected(t) {
+    void 0 === this._$AM && (this._$Cv = t, this._$AP?.(t));
+  }
+}
+class k {
+  get tagName() {
+    return this.element.tagName;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  constructor(t, i, s, e, h) {
+    this.type = 1, this._$AH = E, this._$AN = void 0, this.element = t, this.name = i, this._$AM = e, this.options = h, s.length > 2 || "" !== s[0] || "" !== s[1] ? (this._$AH = Array(s.length - 1).fill(new String()), this.strings = s) : this._$AH = E;
+  }
+  _$AI(t, i = this, s, e) {
+    const h = this.strings;
+    let o = false;
+    if (void 0 === h) t = S(this, t, i, 0), o = !c$1(t) || t !== this._$AH && t !== T, o && (this._$AH = t);else {
+      const e = t;
+      let n, r;
+      for (t = h[0], n = 0; n < h.length - 1; n++) r = S(this, e[s + n], i, n), r === T && (r = this._$AH[n]), o ||= !c$1(r) || r !== this._$AH[n], r === E ? t = E : t !== E && (t += (r ?? "") + h[n + 1]), this._$AH[n] = r;
+    }
+    o && !e && this.j(t);
+  }
+  j(t) {
+    t === E ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
+  }
+}
+class H extends k {
+  constructor() {
+    super(...arguments), this.type = 3;
+  }
+  j(t) {
+    this.element[this.name] = t === E ? void 0 : t;
+  }
+}
+class I extends k {
+  constructor() {
+    super(...arguments), this.type = 4;
+  }
+  j(t) {
+    this.element.toggleAttribute(this.name, !!t && t !== E);
+  }
+}
+class L extends k {
+  constructor(t, i, s, e, h) {
+    super(t, i, s, e, h), this.type = 5;
+  }
+  _$AI(t, i = this) {
+    if ((t = S(this, t, i, 0) ?? E) === T) return;
+    const s = this._$AH,
+      e = t === E && s !== E || t.capture !== s.capture || t.once !== s.once || t.passive !== s.passive,
+      h = t !== E && (s === E || e);
+    e && this.element.removeEventListener(this.name, this, s), h && this.element.addEventListener(this.name, this, t), this._$AH = t;
+  }
+  handleEvent(t) {
+    "function" == typeof this._$AH ? this._$AH.call(this.options?.host ?? 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(this, t);
+  }
+}
+const Z = {
+    I: R},
+  j = t$3.litHtmlPolyfillSupport;
+j?.(N, R), (t$3.litHtmlVersions ??= []).push("3.3.0");
+const B = (t, i, s) => {
+  const e = s?.renderBefore ?? i;
+  let h = e._$litPart$;
+  if (void 0 === h) {
+    const t = s?.renderBefore ?? null;
+    e._$litPart$ = h = new R(i.insertBefore(l(), t), t, void 0, s ?? {});
+  }
+  return h._$AI(t), h;
+};
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const s$1 = globalThis;
+let i$1 = class i extends y$1 {
+  constructor() {
+    super(...arguments), this.renderOptions = {
+      host: this
+    }, this._$Do = void 0;
+  }
+  createRenderRoot() {
+    const t = super.createRenderRoot();
+    return this.renderOptions.renderBefore ??= t.firstChild, t;
+  }
+  update(t) {
+    const r = this.render();
+    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t), this._$Do = B(r, this.renderRoot, this.renderOptions);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._$Do?.setConnected(true);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._$Do?.setConnected(false);
+  }
+  render() {
+    return T;
+  }
+};
+i$1._$litElement$ = true, i$1["finalized"] = true, s$1.litElementHydrateSupport?.({
+  LitElement: i$1
+});
+const o$1 = s$1.litElementPolyfillSupport;
+o$1?.({
+  LitElement: i$1
+});
+(s$1.litElementVersions ??= []).push("4.2.0");
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t$2 = {
+    ATTRIBUTE: 1,
+    CHILD: 2},
+  e$3 = t => (...e) => ({
+    _$litDirective$: t,
+    values: e
+  });
+class i {
+  constructor(t) {}
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AT(t, e, i) {
+    this._$Ct = t, this._$AM = e, this._$Ci = i;
+  }
+  _$AS(t, e) {
+    return this.update(t, e);
+  }
+  update(t, e) {
+    return this.render(...e);
+  }
+}
+
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const {
+    I: t$1
+  } = Z,
+  s = () => document.createComment(""),
+  r$2 = (o, i, n) => {
+    const e = o._$AA.parentNode,
+      l = void 0 === i ? o._$AB : i._$AA;
+    if (void 0 === n) {
+      const i = e.insertBefore(s(), l),
+        c = e.insertBefore(s(), l);
+      n = new t$1(i, c, o, o.options);
+    } else {
+      const t = n._$AB.nextSibling,
+        i = n._$AM,
+        c = i !== o;
+      if (c) {
+        let t;
+        n._$AQ?.(o), n._$AM = o, void 0 !== n._$AP && (t = o._$AU) !== i._$AU && n._$AP(t);
+      }
+      if (t !== l || c) {
+        let o = n._$AA;
+        for (; o !== t;) {
+          const t = o.nextSibling;
+          e.insertBefore(o, l), o = t;
+        }
+      }
+    }
+    return n;
+  },
+  v = (o, t, i = o) => (o._$AI(t, i), o),
+  u$1 = {},
+  m = (o, t = u$1) => o._$AH = t,
+  p = o => o._$AH,
+  M = o => {
+    o._$AP?.(false, true);
+    let t = o._$AA;
+    const i = o._$AB.nextSibling;
+    for (; t !== i;) {
+      const o = t.nextSibling;
+      t.remove(), t = o;
+    }
+  };
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const u = (e, s, t) => {
+    const r = new Map();
+    for (let l = s; l <= t; l++) r.set(e[l], l);
+    return r;
+  },
+  c = e$3(class extends i {
+    constructor(e) {
+      if (super(e), e.type !== t$2.CHILD) throw Error("repeat() can only be used in text expressions");
+    }
+    dt(e, s, t) {
+      let r;
+      void 0 === t ? t = s : void 0 !== s && (r = s);
+      const l = [],
+        o = [];
+      let i = 0;
+      for (const s of e) l[i] = r ? r(s, i) : i, o[i] = t(s, i), i++;
+      return {
+        values: o,
+        keys: l
+      };
+    }
+    render(e, s, t) {
+      return this.dt(e, s, t).values;
+    }
+    update(s, [t, r, c]) {
+      const d = p(s),
+        {
+          values: p$1,
+          keys: a
+        } = this.dt(t, r, c);
+      if (!Array.isArray(d)) return this.ut = a, p$1;
+      const h = this.ut ??= [],
+        v$1 = [];
+      let m$1,
+        y,
+        x = 0,
+        j = d.length - 1,
+        k = 0,
+        w = p$1.length - 1;
+      for (; x <= j && k <= w;) if (null === d[x]) x++;else if (null === d[j]) j--;else if (h[x] === a[k]) v$1[k] = v(d[x], p$1[k]), x++, k++;else if (h[j] === a[w]) v$1[w] = v(d[j], p$1[w]), j--, w--;else if (h[x] === a[w]) v$1[w] = v(d[x], p$1[w]), r$2(s, v$1[w + 1], d[x]), x++, w--;else if (h[j] === a[k]) v$1[k] = v(d[j], p$1[k]), r$2(s, d[x], d[j]), j--, k++;else if (void 0 === m$1 && (m$1 = u(a, k, w), y = u(h, x, j)), m$1.has(h[x])) {
+        if (m$1.has(h[j])) {
+          const e = y.get(a[k]),
+            t = void 0 !== e ? d[e] : null;
+          if (null === t) {
+            const e = r$2(s, d[x]);
+            v(e, p$1[k]), v$1[k] = e;
+          } else v$1[k] = v(t, p$1[k]), r$2(s, d[x], t), d[e] = null;
+          k++;
+        } else M(d[j]), j--;
+      } else M(d[x]), x++;
+      for (; k <= w;) {
+        const e = r$2(s, v$1[w + 1]);
+        v(e, p$1[k]), v$1[k++] = e;
+      }
+      for (; x <= j;) {
+        const e = d[x++];
+        null !== e && M(e);
+      }
+      return this.ut = a, m(s, v$1), T;
+    }
+  });
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const t = t => (e, o) => {
+  void 0 !== o ? o.addInitializer(() => {
+    customElements.define(t, e);
+  }) : customElements.define(t, e);
+};
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const o = {
+    attribute: true,
+    type: String,
+    converter: u$3,
+    reflect: false,
+    hasChanged: f$1
+  },
+  r$1 = (t = o, e, r) => {
+    const {
+      kind: n,
+      metadata: i
+    } = r;
+    let s = globalThis.litPropertyMetadata.get(i);
+    if (void 0 === s && globalThis.litPropertyMetadata.set(i, s = new Map()), "setter" === n && ((t = Object.create(t)).wrapped = true), s.set(r.name, t), "accessor" === n) {
+      const {
+        name: o
+      } = r;
+      return {
+        set(r) {
+          const n = e.get.call(this);
+          e.set.call(this, r), this.requestUpdate(o, n, t);
+        },
+        init(e) {
+          return void 0 !== e && this.C(o, void 0, t, e), e;
+        }
+      };
+    }
+    if ("setter" === n) {
+      const {
+        name: o
+      } = r;
+      return function (r) {
+        const n = this[o];
+        e.call(this, r), this.requestUpdate(o, n, t);
+      };
+    }
+    throw Error("Unsupported decorator location: " + n);
+  };
+function n(t) {
+  return (e, o) => "object" == typeof o ? r$1(t, e, o) : ((t, e, o) => {
+    const r = e.hasOwnProperty(o);
+    return e.constructor.createProperty(o, t), r ? Object.getOwnPropertyDescriptor(e, o) : void 0;
+  })(t, e, o);
+}
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function r(r) {
+  return n({
+    ...r,
+    state: true,
+    attribute: false
+  });
+}
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const e$2 = (e, t, c) => (c.configurable = true, c.enumerable = true, Reflect.decorate && "object" != typeof t && Object.defineProperty(e, t, c), c);
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function e$1(e, r) {
+  return (n, s, i) => {
+    const o = t => t.renderRoot?.querySelector(e) ?? null;
+    return e$2(n, s, {
+      get() {
+        return o(this);
+      }
+    });
+  };
+}
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A key to retrieve an `Attachable` element's `AttachableController` from a
+ * global `MutationObserver`.
+ */
+const ATTACHABLE_CONTROLLER = Symbol('attachableController');
+let FOR_ATTRIBUTE_OBSERVER;
+{
+  /**
+   * A global `MutationObserver` that reacts to `for` attribute changes on
+   * `Attachable` elements. If the `for` attribute changes, the controller will
+   * re-attach to the new referenced element.
+   */
+  FOR_ATTRIBUTE_OBSERVER = new MutationObserver(records => {
+    for (const record of records) {
+      // When a control's `for` attribute changes, inform its
+      // `AttachableController` to update to a new control.
+      record.target[ATTACHABLE_CONTROLLER]?.hostConnected();
+    }
+  });
+}
+/**
+ * A controller that provides an implementation for `Attachable` elements.
+ *
+ * @example
+ * ```ts
+ * class MyElement extends LitElement implements Attachable {
+ *   get control() { return this.attachableController.control; }
+ *
+ *   private readonly attachableController = new AttachableController(
+ *     this,
+ *     (previousControl, newControl) => {
+ *       previousControl?.removeEventListener('click', this.handleClick);
+ *       newControl?.addEventListener('click', this.handleClick);
+ *     }
+ *   );
+ *
+ *   // Implement remaining `Attachable` properties/methods that call the
+ *   // controller's properties/methods.
+ * }
+ * ```
+ */
+class AttachableController {
+  get htmlFor() {
+    return this.host.getAttribute('for');
+  }
+  set htmlFor(htmlFor) {
+    if (htmlFor === null) {
+      this.host.removeAttribute('for');
+    } else {
+      this.host.setAttribute('for', htmlFor);
+    }
+  }
+  get control() {
+    if (this.host.hasAttribute('for')) {
+      if (!this.htmlFor || !this.host.isConnected) {
+        return null;
+      }
+      return this.host.getRootNode().querySelector(`#${this.htmlFor}`);
+    }
+    return this.currentControl || this.host.parentElement;
+  }
+  set control(control) {
+    if (control) {
+      this.attach(control);
+    } else {
+      this.detach();
+    }
+  }
+  /**
+   * Creates a new controller for an `Attachable` element.
+   *
+   * @param host The `Attachable` element.
+   * @param onControlChange A callback with two parameters for the previous and
+   *     next control. An `Attachable` element may perform setup or teardown
+   *     logic whenever the control changes.
+   */
+  constructor(host, onControlChange) {
+    this.host = host;
+    this.onControlChange = onControlChange;
+    this.currentControl = null;
+    host.addController(this);
+    host[ATTACHABLE_CONTROLLER] = this;
+    FOR_ATTRIBUTE_OBSERVER?.observe(host, {
+      attributeFilter: ['for']
+    });
+  }
+  attach(control) {
+    if (control === this.currentControl) {
+      return;
+    }
+    this.setCurrentControl(control);
+    // When imperatively attaching, remove the `for` attribute so
+    // that the attached control is used instead of a referenced one.
+    this.host.removeAttribute('for');
+  }
+  detach() {
+    this.setCurrentControl(null);
+    // When imperatively detaching, add an empty `for=""` attribute. This will
+    // ensure the control is `null` rather than the `parentElement`.
+    this.host.setAttribute('for', '');
+  }
+  /** @private */
+  hostConnected() {
+    this.setCurrentControl(this.control);
+  }
+  /** @private */
+  hostDisconnected() {
+    this.setCurrentControl(null);
+  }
+  setCurrentControl(control) {
+    this.onControlChange(this.currentControl, control);
+    this.currentControl = control;
+  }
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Events that the focus ring listens to.
+ */
+const EVENTS$1 = ['focusin', 'focusout', 'pointerdown'];
+/**
+ * A focus ring component.
+ *
+ * @fires visibility-changed {Event} Fired whenever `visible` changes.
+ */
+class FocusRing extends i$1 {
+  constructor() {
+    super(...arguments);
+    /**
+     * Makes the focus ring visible.
+     */
+    this.visible = false;
+    /**
+     * Makes the focus ring animate inwards instead of outwards.
+     */
+    this.inward = false;
+    this.attachableController = new AttachableController(this, this.onControlChange.bind(this));
+  }
+  get htmlFor() {
+    return this.attachableController.htmlFor;
+  }
+  set htmlFor(htmlFor) {
+    this.attachableController.htmlFor = htmlFor;
+  }
+  get control() {
+    return this.attachableController.control;
+  }
+  set control(control) {
+    this.attachableController.control = control;
+  }
+  attach(control) {
+    this.attachableController.attach(control);
+  }
+  detach() {
+    this.attachableController.detach();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    // Needed for VoiceOver, which will create a "group" if the element is a
+    // sibling to other content.
+    this.setAttribute('aria-hidden', 'true');
+  }
+  /** @private */
+  handleEvent(event) {
+    if (event[HANDLED_BY_FOCUS_RING]) {
+      // This ensures the focus ring does not activate when multiple focus rings
+      // are used within a single component.
+      return;
+    }
+    switch (event.type) {
+      default:
+        return;
+      case 'focusin':
+        this.visible = this.control?.matches(':focus-visible') ?? false;
+        break;
+      case 'focusout':
+      case 'pointerdown':
+        this.visible = false;
+        break;
+    }
+    event[HANDLED_BY_FOCUS_RING] = true;
+  }
+  onControlChange(prev, next) {
+    for (const event of EVENTS$1) {
+      prev?.removeEventListener(event, this);
+      next?.addEventListener(event, this);
+    }
+  }
+  update(changed) {
+    if (changed.has('visible')) {
+      // This logic can be removed once the `:has` selector has been introduced
+      // to Firefox. This is necessary to allow correct submenu styles.
+      this.dispatchEvent(new Event('visibility-changed'));
+    }
+    super.update(changed);
+  }
+}
+__decorate([n({
+  type: Boolean,
+  reflect: true
+})], FocusRing.prototype, "visible", void 0);
+__decorate([n({
+  type: Boolean,
+  reflect: true
+})], FocusRing.prototype, "inward", void 0);
+const HANDLED_BY_FOCUS_RING = Symbol('handledByFocusRing');
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./focus/internal/focus-ring-styles.css.
+const styles$2 = i$4`:host{animation-delay:0s,calc(var(--md-focus-ring-duration, 600ms)*.25);animation-duration:calc(var(--md-focus-ring-duration, 600ms)*.25),calc(var(--md-focus-ring-duration, 600ms)*.75);animation-timing-function:cubic-bezier(0.2, 0, 0, 1);box-sizing:border-box;color:var(--md-focus-ring-color, var(--md-sys-color-secondary, #625b71));display:none;pointer-events:none;position:absolute}:host([visible]){display:flex}:host(:not([inward])){animation-name:outward-grow,outward-shrink;border-end-end-radius:calc(var(--md-focus-ring-shape-end-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));border-start-start-radius:calc(var(--md-focus-ring-shape-start-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) + var(--md-focus-ring-outward-offset, 2px));inset:calc(-1*var(--md-focus-ring-outward-offset, 2px));outline:var(--md-focus-ring-width, 3px) solid currentColor}:host([inward]){animation-name:inward-grow,inward-shrink;border-end-end-radius:calc(var(--md-focus-ring-shape-end-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border-end-start-radius:calc(var(--md-focus-ring-shape-end-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border-start-end-radius:calc(var(--md-focus-ring-shape-start-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border-start-start-radius:calc(var(--md-focus-ring-shape-start-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(--md-focus-ring-inward-offset, 0px));border:var(--md-focus-ring-width, 3px) solid currentColor;inset:var(--md-focus-ring-inward-offset, 0px)}@keyframes outward-grow{from{outline-width:0}to{outline-width:var(--md-focus-ring-active-width, 8px)}}@keyframes outward-shrink{from{outline-width:var(--md-focus-ring-active-width, 8px)}}@keyframes inward-grow{from{border-width:0}to{border-width:var(--md-focus-ring-active-width, 8px)}}@keyframes inward-shrink{from{border-width:var(--md-focus-ring-active-width, 8px)}}@media(prefers-reduced-motion){:host{animation:none}}
+`;
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * TODO(b/267336424): add docs
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdFocusRing = class MdFocusRing extends FocusRing {};
+MdFocusRing.styles = [styles$2];
+MdFocusRing = __decorate([t('md-focus-ring')], MdFocusRing);
+
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const e = e$3(class extends i {
+  constructor(t) {
+    if (super(t), t.type !== t$2.ATTRIBUTE || "class" !== t.name || t.strings?.length > 2) throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.");
+  }
+  render(t) {
+    return " " + Object.keys(t).filter(s => t[s]).join(" ") + " ";
+  }
+  update(s, [i]) {
+    if (void 0 === this.st) {
+      this.st = new Set(), void 0 !== s.strings && (this.nt = new Set(s.strings.join(" ").split(/\s/).filter(t => "" !== t)));
+      for (const t in i) i[t] && !this.nt?.has(t) && this.st.add(t);
+      return this.render(i);
+    }
+    const r = s.element.classList;
+    for (const t of this.st) t in i || (r.remove(t), this.st.delete(t));
+    for (const t in i) {
+      const s = !!i[t];
+      s === this.st.has(t) || this.nt?.has(t) || (s ? (r.add(t), this.st.add(t)) : (r.remove(t), this.st.delete(t)));
+    }
+    return T;
+  }
+});
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Easing functions to use for web animations.
+ *
+ * **NOTE:** `EASING.EMPHASIZED` is approximated with unknown accuracy.
+ *
+ * TODO(b/241113345): replace with tokens
+ */
+const EASING = {
+  STANDARD: 'cubic-bezier(0.2, 0, 0, 1)'};
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+const PRESS_GROW_MS = 450;
+const MINIMUM_PRESS_MS = 225;
+const INITIAL_ORIGIN_SCALE = 0.2;
+const PADDING = 10;
+const SOFT_EDGE_MINIMUM_SIZE = 75;
+const SOFT_EDGE_CONTAINER_RATIO = 0.35;
+const PRESS_PSEUDO = '::after';
+const ANIMATION_FILL = 'forwards';
+/**
+ * Interaction states for the ripple.
+ *
+ * On Touch:
+ *  - `INACTIVE -> TOUCH_DELAY -> WAITING_FOR_CLICK -> INACTIVE`
+ *  - `INACTIVE -> TOUCH_DELAY -> HOLDING -> WAITING_FOR_CLICK -> INACTIVE`
+ *
+ * On Mouse or Pen:
+ *   - `INACTIVE -> WAITING_FOR_CLICK -> INACTIVE`
+ */
+var State;
+(function (State) {
+  /**
+   * Initial state of the control, no touch in progress.
+   *
+   * Transitions:
+   *   - on touch down: transition to `TOUCH_DELAY`.
+   *   - on mouse down: transition to `WAITING_FOR_CLICK`.
+   */
+  State[State["INACTIVE"] = 0] = "INACTIVE";
+  /**
+   * Touch down has been received, waiting to determine if it's a swipe or
+   * scroll.
+   *
+   * Transitions:
+   *   - on touch up: begin press; transition to `WAITING_FOR_CLICK`.
+   *   - on cancel: transition to `INACTIVE`.
+   *   - after `TOUCH_DELAY_MS`: begin press; transition to `HOLDING`.
+   */
+  State[State["TOUCH_DELAY"] = 1] = "TOUCH_DELAY";
+  /**
+   * A touch has been deemed to be a press
+   *
+   * Transitions:
+   *  - on up: transition to `WAITING_FOR_CLICK`.
+   */
+  State[State["HOLDING"] = 2] = "HOLDING";
+  /**
+   * The user touch has finished, transition into rest state.
+   *
+   * Transitions:
+   *   - on click end press; transition to `INACTIVE`.
+   */
+  State[State["WAITING_FOR_CLICK"] = 3] = "WAITING_FOR_CLICK";
+})(State || (State = {}));
+/**
+ * Events that the ripple listens to.
+ */
+const EVENTS = ['click', 'contextmenu', 'pointercancel', 'pointerdown', 'pointerenter', 'pointerleave', 'pointerup'];
+/**
+ * Delay reacting to touch so that we do not show the ripple for a swipe or
+ * scroll interaction.
+ */
+const TOUCH_DELAY_MS = 150;
+/**
+ * Used to detect if HCM is active. Events do not process during HCM when the
+ * ripple is not displayed.
+ */
+const FORCED_COLORS = window.matchMedia('(forced-colors: active)');
+/**
+ * A ripple component.
+ */
+class Ripple extends i$1 {
+  constructor() {
+    super(...arguments);
+    /**
+     * Disables the ripple.
+     */
+    this.disabled = false;
+    this.hovered = false;
+    this.pressed = false;
+    this.rippleSize = '';
+    this.rippleScale = '';
+    this.initialSize = 0;
+    this.state = State.INACTIVE;
+    this.checkBoundsAfterContextMenu = false;
+    this.attachableController = new AttachableController(this, this.onControlChange.bind(this));
+  }
+  get htmlFor() {
+    return this.attachableController.htmlFor;
+  }
+  set htmlFor(htmlFor) {
+    this.attachableController.htmlFor = htmlFor;
+  }
+  get control() {
+    return this.attachableController.control;
+  }
+  set control(control) {
+    this.attachableController.control = control;
+  }
+  attach(control) {
+    this.attachableController.attach(control);
+  }
+  detach() {
+    this.attachableController.detach();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    // Needed for VoiceOver, which will create a "group" if the element is a
+    // sibling to other content.
+    this.setAttribute('aria-hidden', 'true');
+  }
+  render() {
+    const classes = {
+      'hovered': this.hovered,
+      'pressed': this.pressed
+    };
+    return x`<div class="surface ${e(classes)}"></div>`;
+  }
+  update(changedProps) {
+    if (changedProps.has('disabled') && this.disabled) {
+      this.hovered = false;
+      this.pressed = false;
+    }
+    super.update(changedProps);
+  }
+  /**
+   * TODO(b/269799771): make private
+   * @private only public for slider
+   */
+  handlePointerenter(event) {
+    if (!this.shouldReactToEvent(event)) {
+      return;
+    }
+    this.hovered = true;
+  }
+  /**
+   * TODO(b/269799771): make private
+   * @private only public for slider
+   */
+  handlePointerleave(event) {
+    if (!this.shouldReactToEvent(event)) {
+      return;
+    }
+    this.hovered = false;
+    // release a held mouse or pen press that moves outside the element
+    if (this.state !== State.INACTIVE) {
+      this.endPressAnimation();
+    }
+  }
+  handlePointerup(event) {
+    if (!this.shouldReactToEvent(event)) {
+      return;
+    }
+    if (this.state === State.HOLDING) {
+      this.state = State.WAITING_FOR_CLICK;
+      return;
+    }
+    if (this.state === State.TOUCH_DELAY) {
+      this.state = State.WAITING_FOR_CLICK;
+      this.startPressAnimation(this.rippleStartEvent);
+      return;
+    }
+  }
+  async handlePointerdown(event) {
+    if (!this.shouldReactToEvent(event)) {
+      return;
+    }
+    this.rippleStartEvent = event;
+    if (!this.isTouch(event)) {
+      this.state = State.WAITING_FOR_CLICK;
+      this.startPressAnimation(event);
+      return;
+    }
+    // after a longpress contextmenu event, an extra `pointerdown` can be
+    // dispatched to the pressed element. Check that the down is within
+    // bounds of the element in this case.
+    if (this.checkBoundsAfterContextMenu && !this.inBounds(event)) {
+      return;
+    }
+    this.checkBoundsAfterContextMenu = false;
+    // Wait for a hold after touch delay
+    this.state = State.TOUCH_DELAY;
+    await new Promise(resolve => {
+      setTimeout(resolve, TOUCH_DELAY_MS);
+    });
+    if (this.state !== State.TOUCH_DELAY) {
+      return;
+    }
+    this.state = State.HOLDING;
+    this.startPressAnimation(event);
+  }
+  handleClick() {
+    // Click is a MouseEvent in Firefox and Safari, so we cannot use
+    // `shouldReactToEvent`
+    if (this.disabled) {
+      return;
+    }
+    if (this.state === State.WAITING_FOR_CLICK) {
+      this.endPressAnimation();
+      return;
+    }
+    if (this.state === State.INACTIVE) {
+      // keyboard synthesized click event
+      this.startPressAnimation();
+      this.endPressAnimation();
+    }
+  }
+  handlePointercancel(event) {
+    if (!this.shouldReactToEvent(event)) {
+      return;
+    }
+    this.endPressAnimation();
+  }
+  handleContextmenu() {
+    if (this.disabled) {
+      return;
+    }
+    this.checkBoundsAfterContextMenu = true;
+    this.endPressAnimation();
+  }
+  determineRippleSize() {
+    const {
+      height,
+      width
+    } = this.getBoundingClientRect();
+    const maxDim = Math.max(height, width);
+    const softEdgeSize = Math.max(SOFT_EDGE_CONTAINER_RATIO * maxDim, SOFT_EDGE_MINIMUM_SIZE);
+    const initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE);
+    const hypotenuse = Math.sqrt(width ** 2 + height ** 2);
+    const maxRadius = hypotenuse + PADDING;
+    this.initialSize = initialSize;
+    this.rippleScale = `${(maxRadius + softEdgeSize) / initialSize}`;
+    this.rippleSize = `${initialSize}px`;
+  }
+  getNormalizedPointerEventCoords(pointerEvent) {
+    const {
+      scrollX,
+      scrollY
+    } = window;
+    const {
+      left,
+      top
+    } = this.getBoundingClientRect();
+    const documentX = scrollX + left;
+    const documentY = scrollY + top;
+    const {
+      pageX,
+      pageY
+    } = pointerEvent;
+    return {
+      x: pageX - documentX,
+      y: pageY - documentY
+    };
+  }
+  getTranslationCoordinates(positionEvent) {
+    const {
+      height,
+      width
+    } = this.getBoundingClientRect();
+    // end in the center
+    const endPoint = {
+      x: (width - this.initialSize) / 2,
+      y: (height - this.initialSize) / 2
+    };
+    let startPoint;
+    if (positionEvent instanceof PointerEvent) {
+      startPoint = this.getNormalizedPointerEventCoords(positionEvent);
+    } else {
+      startPoint = {
+        x: width / 2,
+        y: height / 2
+      };
+    }
+    // center around start point
+    startPoint = {
+      x: startPoint.x - this.initialSize / 2,
+      y: startPoint.y - this.initialSize / 2
+    };
+    return {
+      startPoint,
+      endPoint
+    };
+  }
+  startPressAnimation(positionEvent) {
+    if (!this.mdRoot) {
+      return;
+    }
+    this.pressed = true;
+    this.growAnimation?.cancel();
+    this.determineRippleSize();
+    const {
+      startPoint,
+      endPoint
+    } = this.getTranslationCoordinates(positionEvent);
+    const translateStart = `${startPoint.x}px, ${startPoint.y}px`;
+    const translateEnd = `${endPoint.x}px, ${endPoint.y}px`;
+    this.growAnimation = this.mdRoot.animate({
+      top: [0, 0],
+      left: [0, 0],
+      height: [this.rippleSize, this.rippleSize],
+      width: [this.rippleSize, this.rippleSize],
+      transform: [`translate(${translateStart}) scale(1)`, `translate(${translateEnd}) scale(${this.rippleScale})`]
+    }, {
+      pseudoElement: PRESS_PSEUDO,
+      duration: PRESS_GROW_MS,
+      easing: EASING.STANDARD,
+      fill: ANIMATION_FILL
+    });
+  }
+  async endPressAnimation() {
+    this.rippleStartEvent = undefined;
+    this.state = State.INACTIVE;
+    const animation = this.growAnimation;
+    let pressAnimationPlayState = Infinity;
+    if (typeof animation?.currentTime === 'number') {
+      pressAnimationPlayState = animation.currentTime;
+    } else if (animation?.currentTime) {
+      pressAnimationPlayState = animation.currentTime.to('ms').value;
+    }
+    if (pressAnimationPlayState >= MINIMUM_PRESS_MS) {
+      this.pressed = false;
+      return;
+    }
+    await new Promise(resolve => {
+      setTimeout(resolve, MINIMUM_PRESS_MS - pressAnimationPlayState);
+    });
+    if (this.growAnimation !== animation) {
+      // A new press animation was started. The old animation was canceled and
+      // should not finish the pressed state.
+      return;
+    }
+    this.pressed = false;
+  }
+  /**
+   * Returns `true` if
+   *  - the ripple element is enabled
+   *  - the pointer is primary for the input type
+   *  - the pointer is the pointer that started the interaction, or will start
+   * the interaction
+   *  - the pointer is a touch, or the pointer state has the primary button
+   * held, or the pointer is hovering
+   */
+  shouldReactToEvent(event) {
+    if (this.disabled || !event.isPrimary) {
+      return false;
+    }
+    if (this.rippleStartEvent && this.rippleStartEvent.pointerId !== event.pointerId) {
+      return false;
+    }
+    if (event.type === 'pointerenter' || event.type === 'pointerleave') {
+      return !this.isTouch(event);
+    }
+    const isPrimaryButton = event.buttons === 1;
+    return this.isTouch(event) || isPrimaryButton;
+  }
+  /**
+   * Check if the event is within the bounds of the element.
+   *
+   * This is only needed for the "stuck" contextmenu longpress on Chrome.
+   */
+  inBounds({
+    x,
+    y
+  }) {
+    const {
+      top,
+      left,
+      bottom,
+      right
+    } = this.getBoundingClientRect();
+    return x >= left && x <= right && y >= top && y <= bottom;
+  }
+  isTouch({
+    pointerType
+  }) {
+    return pointerType === 'touch';
+  }
+  /** @private */
+  async handleEvent(event) {
+    if (FORCED_COLORS?.matches) {
+      // Skip event logic since the ripple is `display: none`.
+      return;
+    }
+    switch (event.type) {
+      case 'click':
+        this.handleClick();
+        break;
+      case 'contextmenu':
+        this.handleContextmenu();
+        break;
+      case 'pointercancel':
+        this.handlePointercancel(event);
+        break;
+      case 'pointerdown':
+        await this.handlePointerdown(event);
+        break;
+      case 'pointerenter':
+        this.handlePointerenter(event);
+        break;
+      case 'pointerleave':
+        this.handlePointerleave(event);
+        break;
+      case 'pointerup':
+        this.handlePointerup(event);
+        break;
+    }
+  }
+  onControlChange(prev, next) {
+    for (const event of EVENTS) {
+      prev?.removeEventListener(event, this);
+      next?.addEventListener(event, this);
+    }
+  }
+}
+__decorate([n({
+  type: Boolean,
+  reflect: true
+})], Ripple.prototype, "disabled", void 0);
+__decorate([r()], Ripple.prototype, "hovered", void 0);
+__decorate([r()], Ripple.prototype, "pressed", void 0);
+__decorate([e$1('.surface')], Ripple.prototype, "mdRoot", void 0);
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./ripple/internal/ripple-styles.css.
+const styles$1 = i$4`:host{display:flex;margin:auto;pointer-events:none}:host([disabled]){display:none}@media(forced-colors: active){:host{display:none}}:host,.surface{border-radius:inherit;position:absolute;inset:0;overflow:hidden}.surface{-webkit-tap-highlight-color:rgba(0,0,0,0)}.surface::before,.surface::after{content:"";opacity:0;position:absolute}.surface::before{background-color:var(--md-ripple-hover-color, var(--md-sys-color-on-surface, #1d1b20));inset:0;transition:opacity 15ms linear,background-color 15ms linear}.surface::after{background:radial-gradient(closest-side, var(--md-ripple-pressed-color, var(--md-sys-color-on-surface, #1d1b20)) max(100% - 70px, 65%), transparent 100%);transform-origin:center center;transition:opacity 375ms linear}.hovered::before{background-color:var(--md-ripple-hover-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-ripple-hover-opacity, 0.08)}.pressed::after{opacity:var(--md-ripple-pressed-opacity, 0.12);transition-duration:105ms}
+`;
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @summary Ripples, also known as state layers, are visual indicators used to
+ * communicate the status of a component or interactive element.
+ *
+ * @description A state layer is a semi-transparent covering on an element that
+ * indicates its state. State layers provide a systematic approach to
+ * visualizing states by using opacity. A layer can be applied to an entire
+ * element or in a circular shape and only one state layer can be applied at a
+ * given time.
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdRipple = class MdRipple extends Ripple {};
+MdRipple.styles = [styles$1];
+MdRipple = __decorate([t('md-ripple')], MdRipple);
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Accessibility Object Model reflective aria properties.
+ */
+const ARIA_PROPERTIES = ['role', 'ariaAtomic', 'ariaAutoComplete', 'ariaBusy', 'ariaChecked', 'ariaColCount', 'ariaColIndex', 'ariaColSpan', 'ariaCurrent', 'ariaDisabled', 'ariaExpanded', 'ariaHasPopup', 'ariaHidden', 'ariaInvalid', 'ariaKeyShortcuts', 'ariaLabel', 'ariaLevel', 'ariaLive', 'ariaModal', 'ariaMultiLine', 'ariaMultiSelectable', 'ariaOrientation', 'ariaPlaceholder', 'ariaPosInSet', 'ariaPressed', 'ariaReadOnly', 'ariaRequired', 'ariaRoleDescription', 'ariaRowCount', 'ariaRowIndex', 'ariaRowSpan', 'ariaSelected', 'ariaSetSize', 'ariaSort', 'ariaValueMax', 'ariaValueMin', 'ariaValueNow', 'ariaValueText'];
+/**
+ * Accessibility Object Model aria attributes.
+ */
+const ARIA_ATTRIBUTES = ARIA_PROPERTIES.map(ariaPropertyToAttribute);
+/**
+ * Checks if an attribute is one of the AOM aria attributes.
+ *
+ * @example
+ * isAriaAttribute('aria-label'); // true
+ *
+ * @param attribute The attribute to check.
+ * @return True if the attribute is an aria attribute, or false if not.
+ */
+function isAriaAttribute(attribute) {
+  return ARIA_ATTRIBUTES.includes(attribute);
+}
+/**
+ * Converts an AOM aria property into its corresponding attribute.
+ *
+ * @example
+ * ariaPropertyToAttribute('ariaLabel'); // 'aria-label'
+ *
+ * @param property The aria property.
+ * @return The aria attribute.
+ */
+function ariaPropertyToAttribute(property) {
+  return property.replace('aria', 'aria-')
+  // IDREF attributes also include an "Element" or "Elements" suffix
+  .replace(/Elements?/g, '').toLowerCase();
+}
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Private symbols
+const privateIgnoreAttributeChangesFor = Symbol('privateIgnoreAttributeChangesFor');
+/**
+ * Mixes in aria delegation for elements that delegate focus and aria to inner
+ * shadow root elements.
+ *
+ * This mixin fixes invalid aria announcements with shadow roots, caused by
+ * duplicate aria attributes on both the host and the inner shadow root element.
+ *
+ * Note: this mixin **does not yet support** ID reference attributes, such as
+ * `aria-labelledby` or `aria-controls`.
+ *
+ * @example
+ * ```ts
+ * class MyButton extends mixinDelegatesAria(LitElement) {
+ *   static shadowRootOptions = {mode: 'open', delegatesFocus: true};
+ *
+ *   render() {
+ *     return html`
+ *       <button aria-label=${this.ariaLabel || nothing}>
+ *         <slot></slot>
+ *       </button>
+ *     `;
+ *   }
+ * }
+ * ```
+ * ```html
+ * <my-button aria-label="Plus one">+1</my-button>
+ * ```
+ *
+ * Use `ARIAMixinStrict` for lit analyzer strict types, such as the "role"
+ * attribute.
+ *
+ * @example
+ * ```ts
+ * return html`
+ *   <button role=${(this as ARIAMixinStrict).role || nothing}>
+ *     <slot></slot>
+ *   </button>
+ * `;
+ * ```
+ *
+ * In the future, updates to the Accessibility Object Model (AOM) will provide
+ * built-in aria delegation features that will replace this mixin.
+ *
+ * @param base The class to mix functionality into.
+ * @return The provided class with aria delegation mixed in.
+ */
+function mixinDelegatesAria(base) {
+  var _a;
+  class WithDelegatesAriaElement extends base {
+    constructor() {
+      super(...arguments);
+      this[_a] = new Set();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+      if (!isAriaAttribute(name)) {
+        super.attributeChangedCallback(name, oldValue, newValue);
+        return;
+      }
+      if (this[privateIgnoreAttributeChangesFor].has(name)) {
+        return;
+      }
+      // Don't trigger another `attributeChangedCallback` once we remove the
+      // aria attribute from the host. We check the explicit name of the
+      // attribute to ignore since `attributeChangedCallback` can be called
+      // multiple times out of an expected order when hydrating an element with
+      // multiple attributes.
+      this[privateIgnoreAttributeChangesFor].add(name);
+      this.removeAttribute(name);
+      this[privateIgnoreAttributeChangesFor].delete(name);
+      const dataProperty = ariaAttributeToDataProperty(name);
+      if (newValue === null) {
+        delete this.dataset[dataProperty];
+      } else {
+        this.dataset[dataProperty] = newValue;
+      }
+      this.requestUpdate(ariaAttributeToDataProperty(name), oldValue);
+    }
+    getAttribute(name) {
+      if (isAriaAttribute(name)) {
+        return super.getAttribute(ariaAttributeToDataAttribute(name));
+      }
+      return super.getAttribute(name);
+    }
+    removeAttribute(name) {
+      super.removeAttribute(name);
+      if (isAriaAttribute(name)) {
+        super.removeAttribute(ariaAttributeToDataAttribute(name));
+        // Since `aria-*` attributes are already removed`, we need to request
+        // an update because `attributeChangedCallback` will not be called.
+        this.requestUpdate();
+      }
+    }
+  }
+  _a = privateIgnoreAttributeChangesFor;
+  setupDelegatesAriaProperties(WithDelegatesAriaElement);
+  return WithDelegatesAriaElement;
+}
+/**
+ * Overrides the constructor's native `ARIAMixin` properties to ensure that
+ * aria properties reflect the values that were shifted to a data attribute.
+ *
+ * @param ctor The `ReactiveElement` constructor to patch.
+ */
+function setupDelegatesAriaProperties(ctor) {
+  for (const ariaProperty of ARIA_PROPERTIES) {
+    // The casing between ariaProperty and the dataProperty may be different.
+    // ex: aria-haspopup -> ariaHasPopup
+    const ariaAttribute = ariaPropertyToAttribute(ariaProperty);
+    // ex: aria-haspopup -> data-aria-haspopup
+    const dataAttribute = ariaAttributeToDataAttribute(ariaAttribute);
+    // ex: aria-haspopup -> dataset.ariaHaspopup
+    const dataProperty = ariaAttributeToDataProperty(ariaAttribute);
+    // Call `ReactiveElement.createProperty()` so that the `aria-*` and `data-*`
+    // attributes are added to the `static observedAttributes` array. This
+    // triggers `attributeChangedCallback` for the delegates aria mixin to
+    // handle.
+    ctor.createProperty(ariaProperty, {
+      attribute: ariaAttribute,
+      noAccessor: true
+    });
+    ctor.createProperty(Symbol(dataAttribute), {
+      attribute: dataAttribute,
+      noAccessor: true
+    });
+    // Re-define the `ARIAMixin` properties to handle data attribute shifting.
+    // It is safe to use `Object.defineProperty` here because the properties
+    // are native and not renamed.
+    // tslint:disable-next-line:ban-unsafe-reflection
+    Object.defineProperty(ctor.prototype, ariaProperty, {
+      configurable: true,
+      enumerable: true,
+      get() {
+        return this.dataset[dataProperty] ?? null;
+      },
+      set(value) {
+        const prevValue = this.dataset[dataProperty] ?? null;
+        if (value === prevValue) {
+          return;
+        }
+        if (value === null) {
+          delete this.dataset[dataProperty];
+        } else {
+          this.dataset[dataProperty] = value;
+        }
+        this.requestUpdate(ariaProperty, prevValue);
+      }
+    });
+  }
+}
+function ariaAttributeToDataAttribute(ariaAttribute) {
+  // aria-haspopup -> data-aria-haspopup
+  return `data-${ariaAttribute}`;
+}
+function ariaAttributeToDataProperty(ariaAttribute) {
+  // aria-haspopup -> dataset.ariaHaspopup
+  return ariaAttribute.replace(/-\w/, dashLetter => dashLetter[1].toUpperCase());
+}
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A symbol used to access dispatch hooks on an event.
+ */
+const dispatchHooks = Symbol('dispatchHooks');
+/**
+ * Add a hook for an event that is called after the event is dispatched and
+ * propagates to other event listeners.
+ *
+ * This is useful for behaviors that need to check if an event is canceled.
+ *
+ * The callback is invoked synchronously, which allows for better integration
+ * with synchronous platform APIs (like `<form>` or `<label>` clicking).
+ *
+ * Note: `setupDispatchHooks()` must be called on the element before adding any
+ * other event listeners. Call it in the constructor of an element or
+ * controller.
+ *
+ * @example
+ * ```ts
+ * class MyControl extends LitElement {
+ *   constructor() {
+ *     super();
+ *     setupDispatchHooks(this, 'click');
+ *     this.addEventListener('click', event => {
+ *       afterDispatch(event, () => {
+ *         if (event.defaultPrevented) {
+ *           return
+ *         }
+ *
+ *         // ... perform logic
+ *       });
+ *     });
+ *   }
+ * }
+ * ```
+ *
+ * @example
+ * ```ts
+ * class MyController implements ReactiveController {
+ *   constructor(host: ReactiveElement) {
+ *     // setupDispatchHooks() may be called multiple times for the same
+ *     // element and events, making it safe for multiple controllers to use it.
+ *     setupDispatchHooks(host, 'click');
+ *     host.addEventListener('click', event => {
+ *       afterDispatch(event, () => {
+ *         if (event.defaultPrevented) {
+ *           return;
+ *         }
+ *
+ *         // ... perform logic
+ *       });
+ *     });
+ *   }
+ * }
+ * ```
+ *
+ * @param event The event to add a hook to.
+ * @param callback A hook that is called after the event finishes dispatching.
+ */
+function afterDispatch(event, callback) {
+  const hooks = event[dispatchHooks];
+  if (!hooks) {
+    throw new Error(`'${event.type}' event needs setupDispatchHooks().`);
+  }
+  hooks.addEventListener('after', callback);
+}
+/**
+ * A lookup map of elements and event types that have a dispatch hook listener
+ * set up. Used to ensure we don't set up multiple hook listeners on the same
+ * element for the same event.
+ */
+const ELEMENT_DISPATCH_HOOK_TYPES = new WeakMap();
+/**
+ * Sets up an element to add dispatch hooks to given event types. This must be
+ * called before adding any event listeners that need to use dispatch hooks
+ * like `afterDispatch()`.
+ *
+ * This function is safe to call multiple times with the same element or event
+ * types. Call it in the constructor of elements, mixins, and controllers to
+ * ensure it is set up before external listeners.
+ *
+ * @example
+ * ```ts
+ * class MyControl extends LitElement {
+ *   constructor() {
+ *     super();
+ *     setupDispatchHooks(this, 'click');
+ *     this.addEventListener('click', this.listenerUsingAfterDispatch);
+ *   }
+ * }
+ * ```
+ *
+ * @param element The element to set up event dispatch hooks for.
+ * @param eventTypes The event types to add dispatch hooks to.
+ */
+function setupDispatchHooks(element, ...eventTypes) {
+  let typesAlreadySetUp = ELEMENT_DISPATCH_HOOK_TYPES.get(element);
+  if (!typesAlreadySetUp) {
+    typesAlreadySetUp = new Set();
+    ELEMENT_DISPATCH_HOOK_TYPES.set(element, typesAlreadySetUp);
+  }
+  for (const eventType of eventTypes) {
+    // Don't register multiple dispatch hook listeners. A second registration
+    // would lead to the second listener re-dispatching a re-dispatched event,
+    // which can cause an infinite loop inside the other one.
+    if (typesAlreadySetUp.has(eventType)) {
+      continue;
+    }
+    // When we re-dispatch the event, it's going to immediately trigger this
+    // listener again. Use a flag to ignore it.
+    let isRedispatching = false;
+    element.addEventListener(eventType, event => {
+      if (isRedispatching) {
+        return;
+      }
+      // Do not let the event propagate to any other listener (not just
+      // bubbling listeners with `stopPropagation()`).
+      event.stopImmediatePropagation();
+      // Make a copy.
+      const eventCopy = Reflect.construct(event.constructor, [event.type, event]);
+      // Add hooks onto the event.
+      const hooks = new EventTarget();
+      eventCopy[dispatchHooks] = hooks;
+      // Re-dispatch the event. We can't reuse `redispatchEvent()` since we
+      // need to add the hooks to the copy before it's dispatched.
+      isRedispatching = true;
+      const dispatched = element.dispatchEvent(eventCopy);
+      isRedispatching = false;
+      if (!dispatched) {
+        event.preventDefault();
+      }
+      // Synchronously call afterDispatch() hooks.
+      hooks.dispatchEvent(new Event('after'));
+    }, {
+      // Ensure this listener runs before other listeners.
+      // `setupDispatchHooks()` should be called in constructors to also
+      // ensure they run before any other externally-added capture listeners.
+      capture: true
+    });
+    typesAlreadySetUp.add(eventType);
+  }
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Dispatches a click event to the given element that triggers a native action,
+ * but is not composed and therefore is not seen outside the element.
+ *
+ * This is useful for responding to an external click event on the host element
+ * that should trigger an internal action like a button click.
+ *
+ * Note, a helper is provided because setting this up correctly is a bit tricky.
+ * In particular, calling `click` on an element creates a composed event, which
+ * is not desirable, and a manually dispatched event must specifically be a
+ * `MouseEvent` to trigger a native action.
+ *
+ * @example
+ * hostClickListener = (event: MouseEvent) {
+ *   if (isActivationClick(event)) {
+ *     this.dispatchActivationClick(this.buttonElement);
+ *   }
+ * }
+ *
+ */
+function dispatchActivationClick(element) {
+  const event = new MouseEvent('click', {
+    bubbles: true
+  });
+  element.dispatchEvent(event);
+  return event;
+}
+/**
+ * Returns true if the click event should trigger an activation behavior. The
+ * behavior is defined by the element and is whatever it should do when
+ * clicked.
+ *
+ * Typically when an element needs to handle a click, the click is generated
+ * from within the element and an event listener within the element implements
+ * the needed behavior; however, it's possible to fire a click directly
+ * at the element that the element should handle. This method helps
+ * distinguish these "external" clicks.
+ *
+ * An "external" click can be triggered in a number of ways: via a click
+ * on an associated label for a form  associated element, calling
+ * `element.click()`, or calling
+ * `element.dispatchEvent(new MouseEvent('click', ...))`.
+ *
+ * Also works around Firefox issue
+ * https://bugzilla.mozilla.org/show_bug.cgi?id=1804576 by squelching
+ * events for a microtask after called.
+ *
+ * @example
+ * hostClickListener = (event: MouseEvent) {
+ *   if (isActivationClick(event)) {
+ *     this.dispatchActivationClick(this.buttonElement);
+ *   }
+ * }
+ *
+ */
+function isActivationClick(event) {
+  // Event must start at the event target.
+  if (event.currentTarget !== event.target) {
+    return false;
+  }
+  // Event must not be retargeted from shadowRoot.
+  if (event.composedPath()[0] !== event.target) {
+    return false;
+  }
+  // Target must not be disabled; this should only occur for a synthetically
+  // dispatched click.
+  if (event.target.disabled) {
+    return false;
+  }
+  // This is an activation if the event should not be squelched.
+  return !squelchEvent(event);
+}
+// TODO(https://bugzilla.mozilla.org/show_bug.cgi?id=1804576)
+//  Remove when Firefox bug is addressed.
+function squelchEvent(event) {
+  const squelched = isSquelchingEvents;
+  if (squelched) {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  }
+  squelchEventsForMicrotask();
+  return squelched;
+}
+// Ignore events for one microtask only.
+let isSquelchingEvents = false;
+async function squelchEventsForMicrotask() {
+  isSquelchingEvents = true;
+  // Need to pause for just one microtask.
+  // tslint:disable-next-line
+  await null;
+  isSquelchingEvents = false;
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * Re-dispatches an event from the provided element.
+ *
+ * This function is useful for forwarding non-composed events, such as `change`
+ * events.
+ *
+ * @example
+ * class MyInput extends LitElement {
+ *   render() {
+ *     return html`<input @change=${this.redispatchEvent}>`;
+ *   }
+ *
+ *   protected redispatchEvent(event: Event) {
+ *     redispatchEvent(this, event);
+ *   }
+ * }
+ *
+ * @param element The element to dispatch the event from.
+ * @param event The event to re-dispatch.
+ * @return Whether or not the event was dispatched (if cancelable).
+ */
+function redispatchEvent(element, event) {
+  // For bubbling events in SSR light DOM (or composed), stop their propagation
+  // and dispatch the copy.
+  if (event.bubbles && (!element.shadowRoot || event.composed)) {
+    event.stopPropagation();
+  }
+  const copy = Reflect.construct(event.constructor, [event.type, event]);
+  const dispatched = element.dispatchEvent(copy);
+  if (!dispatched) {
+    event.preventDefault();
+  }
+  return dispatched;
+}
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A unique symbol used for protected access to an instance's
+ * `ElementInternals`.
+ *
+ * @example
+ * ```ts
+ * class MyElement extends mixinElementInternals(LitElement) {
+ *   constructor() {
+ *     super();
+ *     this[internals].role = 'button';
+ *   }
+ * }
+ * ```
+ */
+const internals = Symbol('internals');
+// Private symbols
+const privateInternals = Symbol('privateInternals');
+/**
+ * Mixes in an attached `ElementInternals` instance.
+ *
+ * This mixin is only needed when other shared code needs access to a
+ * component's `ElementInternals`, such as form-associated mixins.
+ *
+ * @param base The class to mix functionality into.
+ * @return The provided class with `WithElementInternals` mixed in.
+ */
+function mixinElementInternals(base) {
+  class WithElementInternalsElement extends base {
+    get [internals]() {
+      // Create internals in getter so that it can be used in methods called on
+      // construction in `ReactiveElement`, such as `requestUpdate()`.
+      if (!this[privateInternals]) {
+        // Cast needed for closure
+        this[privateInternals] = this.attachInternals();
+      }
+      return this[privateInternals];
+    }
+  }
+  return WithElementInternalsElement;
+}
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A symbol property used to create a constraint validation `Validator`.
+ * Required for all `mixinConstraintValidation()` elements.
+ */
+const createValidator = Symbol('createValidator');
+/**
+ * A symbol property used to return an anchor for constraint validation popups.
+ * Required for all `mixinConstraintValidation()` elements.
+ */
+const getValidityAnchor = Symbol('getValidityAnchor');
+// Private symbol members, used to avoid name clashing.
+const privateValidator = Symbol('privateValidator');
+const privateSyncValidity = Symbol('privateSyncValidity');
+const privateCustomValidationMessage = Symbol('privateCustomValidationMessage');
+/**
+ * Mixes in constraint validation APIs for an element.
+ *
+ * See https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation
+ * for more details.
+ *
+ * Implementations must provide a validator to cache and compute its validity,
+ * along with a shadow root element to anchor validation popups to.
+ *
+ * @example
+ * ```ts
+ * const baseClass = mixinConstraintValidation(
+ *   mixinFormAssociated(mixinElementInternals(LitElement))
+ * );
+ *
+ * class MyCheckbox extends baseClass {
+ *   \@property({type: Boolean}) checked = false;
+ *   \@property({type: Boolean}) required = false;
+ *
+ *   [createValidator]() {
+ *     return new CheckboxValidator(() => this);
+ *   }
+ *
+ *   [getValidityAnchor]() {
+ *     return this.renderRoot.querySelector('.root');
+ *   }
+ * }
+ * ```
+ *
+ * @param base The class to mix functionality into.
+ * @return The provided class with `ConstraintValidation` mixed in.
+ */
+function mixinConstraintValidation(base) {
+  var _a;
+  class ConstraintValidationElement extends base {
+    constructor() {
+      super(...arguments);
+      /**
+       * Needed for Safari, see https://bugs.webkit.org/show_bug.cgi?id=261432
+       * Replace with this[internals].validity.customError when resolved.
+       */
+      this[_a] = '';
+    }
+    get validity() {
+      this[privateSyncValidity]();
+      return this[internals].validity;
+    }
+    get validationMessage() {
+      this[privateSyncValidity]();
+      return this[internals].validationMessage;
+    }
+    get willValidate() {
+      this[privateSyncValidity]();
+      return this[internals].willValidate;
+    }
+    checkValidity() {
+      this[privateSyncValidity]();
+      return this[internals].checkValidity();
+    }
+    reportValidity() {
+      this[privateSyncValidity]();
+      return this[internals].reportValidity();
+    }
+    setCustomValidity(error) {
+      this[privateCustomValidationMessage] = error;
+      this[privateSyncValidity]();
+    }
+    requestUpdate(name, oldValue, options) {
+      super.requestUpdate(name, oldValue, options);
+      this[privateSyncValidity]();
+    }
+    firstUpdated(changed) {
+      super.firstUpdated(changed);
+      // Sync the validity again when the element first renders, since the
+      // validity anchor is now available.
+      //
+      // Elements that `delegatesFocus: true` to an `<input>` will throw an
+      // error in Chrome and Safari when a form tries to submit or call
+      // `form.reportValidity()`:
+      // "An invalid form control with name='' is not focusable"
+      //
+      // The validity anchor MUST be provided in `internals.setValidity()` and
+      // MUST be the `<input>` element rendered.
+      //
+      // See https://lit.dev/playground/#gist=6c26e418e0010f7a5aac15005cde8bde
+      // for a reproduction.
+      this[privateSyncValidity]();
+    }
+    [(_a = privateCustomValidationMessage, privateSyncValidity)]() {
+      if (!this[privateValidator]) {
+        this[privateValidator] = this[createValidator]();
+      }
+      const {
+        validity,
+        validationMessage: nonCustomValidationMessage
+      } = this[privateValidator].getValidity();
+      const customError = !!this[privateCustomValidationMessage];
+      const validationMessage = this[privateCustomValidationMessage] || nonCustomValidationMessage;
+      this[internals].setValidity({
+        ...validity,
+        customError
+      }, validationMessage, this[getValidityAnchor]() ?? undefined);
+    }
+    [createValidator]() {
+      throw new Error('Implement [createValidator]');
+    }
+    [getValidityAnchor]() {
+      throw new Error('Implement [getValidityAnchor]');
+    }
+  }
+  return ConstraintValidationElement;
+}
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A symbol property to retrieve the form value for an element.
+ */
+const getFormValue = Symbol('getFormValue');
+/**
+ * A symbol property to retrieve the form state for an element.
+ */
+const getFormState = Symbol('getFormState');
+/**
+ * Mixes in form-associated behavior for a class. This allows an element to add
+ * values to `<form>` elements.
+ *
+ * Implementing classes should provide a `[formValue]` to return the current
+ * value of the element, as well as reset and restore callbacks.
+ *
+ * @example
+ * ```ts
+ * const base = mixinFormAssociated(mixinElementInternals(LitElement));
+ *
+ * class MyControl extends base {
+ *   \@property()
+ *   value = '';
+ *
+ *   override [getFormValue]() {
+ *     return this.value;
+ *   }
+ *
+ *   override formResetCallback() {
+ *     const defaultValue = this.getAttribute('value');
+ *     this.value = defaultValue;
+ *   }
+ *
+ *   override formStateRestoreCallback(state: string) {
+ *     this.value = state;
+ *   }
+ * }
+ * ```
+ *
+ * Elements may optionally provide a `[formState]` if their values do not
+ * represent the state of the component.
+ *
+ * @example
+ * ```ts
+ * const base = mixinFormAssociated(mixinElementInternals(LitElement));
+ *
+ * class MyCheckbox extends base {
+ *   \@property()
+ *   value = 'on';
+ *
+ *   \@property({type: Boolean})
+ *   checked = false;
+ *
+ *   override [getFormValue]() {
+ *     return this.checked ? this.value : null;
+ *   }
+ *
+ *   override [getFormState]() {
+ *     return String(this.checked);
+ *   }
+ *
+ *   override formResetCallback() {
+ *     const defaultValue = this.hasAttribute('checked');
+ *     this.checked = defaultValue;
+ *   }
+ *
+ *   override formStateRestoreCallback(state: string) {
+ *     this.checked = Boolean(state);
+ *   }
+ * }
+ * ```
+ *
+ * IMPORTANT: Requires declares for lit-analyzer
+ * @example
+ * ```ts
+ * const base = mixinFormAssociated(mixinElementInternals(LitElement));
+ * class MyControl extends base {
+ *   // Writable mixin properties for lit-html binding, needed for lit-analyzer
+ *   declare disabled: boolean;
+ *   declare name: string;
+ * }
+ * ```
+ *
+ * @param base The class to mix functionality into. The base class must use
+ *     `mixinElementInternals()`.
+ * @return The provided class with `FormAssociated` mixed in.
+ */
+function mixinFormAssociated(base) {
+  class FormAssociatedElement extends base {
+    get form() {
+      return this[internals].form;
+    }
+    get labels() {
+      return this[internals].labels;
+    }
+    // Use @property for the `name` and `disabled` properties to add them to the
+    // `observedAttributes` array and trigger `attributeChangedCallback()`.
+    //
+    // We don't use Lit's default getter/setter (`noAccessor: true`) because
+    // the attributes need to be updated synchronously to work with synchronous
+    // form APIs, and Lit updates attributes async by default.
+    get name() {
+      return this.getAttribute('name') ?? '';
+    }
+    set name(name) {
+      // Note: setting name to null or empty does not remove the attribute.
+      this.setAttribute('name', name);
+      // We don't need to call `requestUpdate()` since it's called synchronously
+      // in `attributeChangedCallback()`.
+    }
+    get disabled() {
+      return this.hasAttribute('disabled');
+    }
+    set disabled(disabled) {
+      this.toggleAttribute('disabled', disabled);
+      // We don't need to call `requestUpdate()` since it's called synchronously
+      // in `attributeChangedCallback()`.
+    }
+    attributeChangedCallback(name, old, value) {
+      // Manually `requestUpdate()` for `name` and `disabled` when their
+      // attribute or property changes.
+      // The properties update their attributes, so this callback is invoked
+      // immediately when the properties are set. We call `requestUpdate()` here
+      // instead of letting Lit set the properties from the attribute change.
+      // That would cause the properties to re-set the attribute and invoke this
+      // callback again in a loop. This leads to stale state when Lit tries to
+      // determine if a property changed or not.
+      if (name === 'name' || name === 'disabled') {
+        // Disabled's value is only false if the attribute is missing and null.
+        const oldValue = name === 'disabled' ? old !== null : old;
+        // Trigger a lit update when the attribute changes.
+        this.requestUpdate(name, oldValue);
+        return;
+      }
+      super.attributeChangedCallback(name, old, value);
+    }
+    requestUpdate(name, oldValue, options) {
+      super.requestUpdate(name, oldValue, options);
+      // If any properties change, update the form value, which may have changed
+      // as well.
+      // Update the form value synchronously in `requestUpdate()` rather than
+      // `update()` or `updated()`, which are async. This is necessary to ensure
+      // that form data is updated in time for synchronous event listeners.
+      this[internals].setFormValue(this[getFormValue](), this[getFormState]());
+    }
+    [getFormValue]() {
+      // Closure does not allow abstract symbol members, so a default
+      // implementation is needed.
+      throw new Error('Implement [getFormValue]');
+    }
+    [getFormState]() {
+      return this[getFormValue]();
+    }
+    formDisabledCallback(disabled) {
+      this.disabled = disabled;
+    }
+  }
+  /** @nocollapse */
+  FormAssociatedElement.formAssociated = true;
+  __decorate([n({
+    noAccessor: true
+  })], FormAssociatedElement.prototype, "name", null);
+  __decorate([n({
+    type: Boolean,
+    noAccessor: true
+  })], FormAssociatedElement.prototype, "disabled", null);
+  return FormAssociatedElement;
+}
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A class that computes and caches `ValidityStateFlags` for a component with
+ * a given `State` interface.
+ *
+ * Cached performance before computing validity is important since constraint
+ * validation must be checked frequently and synchronously when properties
+ * change.
+ *
+ * @template State The expected interface of properties relevant to constraint
+ *     validation.
+ */
+class Validator {
+  /**
+   * Creates a new validator.
+   *
+   * @param getCurrentState A callback that returns the current state of
+   *     constraint validation-related properties.
+   */
+  constructor(getCurrentState) {
+    this.getCurrentState = getCurrentState;
+    /**
+     * The current validity state and message. This is cached and returns if
+     * constraint validation state does not change.
+     */
+    this.currentValidity = {
+      validity: {},
+      validationMessage: ''
+    };
+  }
+  /**
+   * Returns the current `ValidityStateFlags` and validation message for the
+   * validator.
+   *
+   * If the constraint validation state has not changed, this will return a
+   * cached result. This is important since `getValidity()` can be called
+   * frequently in response to synchronous property changes.
+   *
+   * @return The current validity and validation message.
+   */
+  getValidity() {
+    const state = this.getCurrentState();
+    const hasStateChanged = !this.prevState || !this.equals(this.prevState, state);
+    if (!hasStateChanged) {
+      return this.currentValidity;
+    }
+    const {
+      validity,
+      validationMessage
+    } = this.computeValidity(state);
+    this.prevState = this.copy(state);
+    this.currentValidity = {
+      validationMessage,
+      validity: {
+        // Change any `ValidityState` instances into `ValidityStateFlags` since
+        // `ValidityState` cannot be easily `{...spread}`.
+        badInput: validity.badInput,
+        customError: validity.customError,
+        patternMismatch: validity.patternMismatch,
+        rangeOverflow: validity.rangeOverflow,
+        rangeUnderflow: validity.rangeUnderflow,
+        stepMismatch: validity.stepMismatch,
+        tooLong: validity.tooLong,
+        tooShort: validity.tooShort,
+        typeMismatch: validity.typeMismatch,
+        valueMissing: validity.valueMissing
+      }
+    };
+    return this.currentValidity;
+  }
+}
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A validator that provides constraint validation that emulates
+ * `<input type="checkbox">` validation.
+ */
+class CheckboxValidator extends Validator {
+  computeValidity(state) {
+    if (!this.checkboxControl) {
+      // Lazily create the platform input
+      this.checkboxControl = document.createElement('input');
+      this.checkboxControl.type = 'checkbox';
+    }
+    this.checkboxControl.checked = state.checked;
+    this.checkboxControl.required = state.required;
+    return {
+      validity: this.checkboxControl.validity,
+      validationMessage: this.checkboxControl.validationMessage
+    };
+  }
+  equals(prev, next) {
+    return prev.checked === next.checked && prev.required === next.required;
+  }
+  copy({
+    checked,
+    required
+  }) {
+    return {
+      checked,
+      required
+    };
+  }
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Separate variable needed for closure.
+const switchBaseClass = mixinDelegatesAria(mixinConstraintValidation(mixinFormAssociated(mixinElementInternals(i$1))));
+/**
+ * @fires input {InputEvent} Fired whenever `selected` changes due to user
+ * interaction (bubbles and composed).
+ * @fires change {Event} Fired whenever `selected` changes due to user
+ * interaction (bubbles).
+ */
+class Switch extends switchBaseClass {
+  constructor() {
+    super();
+    /**
+     * Puts the switch in the selected state and sets the form submission value to
+     * the `value` property.
+     */
+    this.selected = false;
+    /**
+     * Shows both the selected and deselected icons.
+     */
+    this.icons = false;
+    /**
+     * Shows only the selected icon, and not the deselected icon. If `true`,
+     * overrides the behavior of the `icons` property.
+     */
+    this.showOnlySelectedIcon = false;
+    /**
+     * When true, require the switch to be selected when participating in
+     * form submission.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation
+     */
+    this.required = false;
+    /**
+     * The value associated with this switch on form submission. `null` is
+     * submitted when `selected` is `false`.
+     */
+    this.value = 'on';
+    // This click listener does not currently need dispatch hooks since it does
+    // not check `event.defaultPrevented`.
+    this.addEventListener('click', event => {
+      if (!isActivationClick(event) || !this.input) {
+        return;
+      }
+      this.focus();
+      dispatchActivationClick(this.input);
+    });
+    // Add the aria keyboard interaction pattern for switch and the Enter key.
+    // See https://www.w3.org/WAI/ARIA/apg/patterns/switch/.
+    setupDispatchHooks(this, 'keydown');
+    this.addEventListener('keydown', event => {
+      afterDispatch(event, () => {
+        const ignoreEvent = event.defaultPrevented || event.key !== 'Enter';
+        if (ignoreEvent || this.disabled || !this.input) {
+          return;
+        }
+        this.input.click();
+      });
+    });
+  }
+  render() {
+    return x`
+      <div class="switch ${e(this.getRenderClasses())}">
+        <input
+          id="switch"
+          class="touch"
+          type="checkbox"
+          role="switch"
+          aria-label=${this.ariaLabel || E}
+          ?checked=${this.selected}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          @input=${this.handleInput}
+          @change=${this.handleChange} />
+
+        <md-focus-ring part="focus-ring" for="switch"></md-focus-ring>
+        <span class="track"> ${this.renderHandle()} </span>
+      </div>
+    `;
+  }
+  getRenderClasses() {
+    return {
+      'selected': this.selected,
+      'unselected': !this.selected,
+      'disabled': this.disabled
+    };
+  }
+  renderHandle() {
+    const classes = {
+      'with-icon': this.showOnlySelectedIcon ? this.selected : this.icons
+    };
+    return x`
+      ${this.renderTouchTarget()}
+      <span class="handle-container">
+        <md-ripple for="switch" ?disabled="${this.disabled}"></md-ripple>
+        <span class="handle ${e(classes)}">
+          ${this.shouldShowIcons() ? this.renderIcons() : x``}
+        </span>
+      </span>
+    `;
+  }
+  renderIcons() {
+    return x`
+      <div class="icons">
+        ${this.renderOnIcon()}
+        ${this.showOnlySelectedIcon ? x`` : this.renderOffIcon()}
+      </div>
+    `;
+  }
+  /**
+   * https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Acheck%3AFILL%400%3Bwght%40500%3BGRAD%400%3Bopsz%4024
+   */
+  renderOnIcon() {
+    return x`
+      <slot class="icon icon--on" name="on-icon">
+        <svg viewBox="0 0 24 24">
+          <path
+            d="M9.55 18.2 3.65 12.3 5.275 10.675 9.55 14.95 18.725 5.775 20.35 7.4Z" />
+        </svg>
+      </slot>
+    `;
+  }
+  /**
+   * https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Aclose%3AFILL%400%3Bwght%40500%3BGRAD%400%3Bopsz%4024
+   */
+  renderOffIcon() {
+    return x`
+      <slot class="icon icon--off" name="off-icon">
+        <svg viewBox="0 0 24 24">
+          <path
+            d="M6.4 19.2 4.8 17.6 10.4 12 4.8 6.4 6.4 4.8 12 10.4 17.6 4.8 19.2 6.4 13.6 12 19.2 17.6 17.6 19.2 12 13.6Z" />
+        </svg>
+      </slot>
+    `;
+  }
+  renderTouchTarget() {
+    return x`<span class="touch"></span>`;
+  }
+  shouldShowIcons() {
+    return this.icons || this.showOnlySelectedIcon;
+  }
+  handleInput(event) {
+    const target = event.target;
+    this.selected = target.checked;
+    // <input> 'input' event bubbles and is composed, don't re-dispatch it.
+  }
+  handleChange(event) {
+    // <input> 'change' event is not composed, re-dispatch it.
+    redispatchEvent(this, event);
+  }
+  [getFormValue]() {
+    return this.selected ? this.value : null;
+  }
+  [getFormState]() {
+    return String(this.selected);
+  }
+  formResetCallback() {
+    // The selected property does not reflect, so the original attribute set by
+    // the user is used to determine the default value.
+    this.selected = this.hasAttribute('selected');
+  }
+  formStateRestoreCallback(state) {
+    this.selected = state === 'true';
+  }
+  [createValidator]() {
+    return new CheckboxValidator(() => ({
+      checked: this.selected,
+      required: this.required
+    }));
+  }
+  [getValidityAnchor]() {
+    return this.input;
+  }
+}
+/** @nocollapse */
+Switch.shadowRootOptions = {
+  mode: 'open',
+  delegatesFocus: true
+};
+__decorate([n({
+  type: Boolean
+})], Switch.prototype, "selected", void 0);
+__decorate([n({
+  type: Boolean
+})], Switch.prototype, "icons", void 0);
+__decorate([n({
+  type: Boolean,
+  attribute: 'show-only-selected-icon'
+})], Switch.prototype, "showOnlySelectedIcon", void 0);
+__decorate([n({
+  type: Boolean
+})], Switch.prototype, "required", void 0);
+__decorate([n()], Switch.prototype, "value", void 0);
+__decorate([e$1('input')], Switch.prototype, "input", void 0);
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./switch/internal/switch-styles.css.
+const styles = i$4`@layer styles, hcm;@layer styles{:host{display:inline-flex;outline:none;vertical-align:top;-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer}:host([disabled]){cursor:default}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--md-switch-track-height, 32px))/2) 0px}md-focus-ring{--md-focus-ring-shape-start-start: var(--md-switch-track-shape-start-start, var(--md-switch-track-shape, var(--md-sys-shape-corner-full, 9999px)));--md-focus-ring-shape-start-end: var(--md-switch-track-shape-start-end, var(--md-switch-track-shape, var(--md-sys-shape-corner-full, 9999px)));--md-focus-ring-shape-end-end: var(--md-switch-track-shape-end-end, var(--md-switch-track-shape, var(--md-sys-shape-corner-full, 9999px)));--md-focus-ring-shape-end-start: var(--md-switch-track-shape-end-start, var(--md-switch-track-shape, var(--md-sys-shape-corner-full, 9999px)))}.switch{align-items:center;display:inline-flex;flex-shrink:0;position:relative;width:var(--md-switch-track-width, 52px);height:var(--md-switch-track-height, 32px);border-start-start-radius:var(--md-switch-track-shape-start-start, var(--md-switch-track-shape, var(--md-sys-shape-corner-full, 9999px)));border-start-end-radius:var(--md-switch-track-shape-start-end, var(--md-switch-track-shape, var(--md-sys-shape-corner-full, 9999px)));border-end-end-radius:var(--md-switch-track-shape-end-end, var(--md-switch-track-shape, var(--md-sys-shape-corner-full, 9999px)));border-end-start-radius:var(--md-switch-track-shape-end-start, var(--md-switch-track-shape, var(--md-sys-shape-corner-full, 9999px)))}input{appearance:none;height:max(100%,var(--md-switch-touch-target-size, 48px));outline:none;margin:0;position:absolute;width:max(100%,var(--md-switch-touch-target-size, 48px));z-index:1;cursor:inherit;top:50%;left:50%;transform:translate(-50%, -50%)}:host([touch-target=none]) input{display:none}}@layer styles{.track{position:absolute;width:100%;height:100%;box-sizing:border-box;border-radius:inherit;display:flex;justify-content:center;align-items:center}.track::before{content:"";display:flex;position:absolute;height:100%;width:100%;border-radius:inherit;box-sizing:border-box;transition-property:opacity,background-color;transition-timing-function:linear;transition-duration:67ms}.disabled .track{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.disabled .track::before,.disabled .track::after{transition:none;opacity:var(--md-switch-disabled-track-opacity, 0.12)}.disabled .track::before{background-clip:content-box}.selected .track::before{background-color:var(--md-switch-selected-track-color, var(--md-sys-color-primary, #6750a4))}.selected:hover .track::before{background-color:var(--md-switch-selected-hover-track-color, var(--md-sys-color-primary, #6750a4))}.selected:focus-within .track::before{background-color:var(--md-switch-selected-focus-track-color, var(--md-sys-color-primary, #6750a4))}.selected:active .track::before{background-color:var(--md-switch-selected-pressed-track-color, var(--md-sys-color-primary, #6750a4))}.selected.disabled .track{background-clip:border-box}.selected.disabled .track::before{background-color:var(--md-switch-disabled-selected-track-color, var(--md-sys-color-on-surface, #1d1b20))}.unselected .track::before{background-color:var(--md-switch-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));border-color:var(--md-switch-track-outline-color, var(--md-sys-color-outline, #79747e));border-style:solid;border-width:var(--md-switch-track-outline-width, 2px)}.unselected:hover .track::before{background-color:var(--md-switch-hover-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));border-color:var(--md-switch-hover-track-outline-color, var(--md-sys-color-outline, #79747e))}.unselected:focus-visible .track::before{background-color:var(--md-switch-focus-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));border-color:var(--md-switch-focus-track-outline-color, var(--md-sys-color-outline, #79747e))}.unselected:active .track::before{background-color:var(--md-switch-pressed-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));border-color:var(--md-switch-pressed-track-outline-color, var(--md-sys-color-outline, #79747e))}.unselected.disabled .track::before{background-color:var(--md-switch-disabled-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));border-color:var(--md-switch-disabled-track-outline-color, var(--md-sys-color-on-surface, #1d1b20))}}@layer hcm{@media(forced-colors: active){.selected .track::before{background:ButtonText;border-color:ButtonText}.disabled .track::before{border-color:GrayText;opacity:1}.disabled.selected .track::before{background:GrayText}}}@layer styles{.handle-container{display:flex;place-content:center;place-items:center;position:relative;transition:margin 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275)}.selected .handle-container{margin-inline-start:calc(var(--md-switch-track-width, 52px) - var(--md-switch-track-height, 32px))}.unselected .handle-container{margin-inline-end:calc(var(--md-switch-track-width, 52px) - var(--md-switch-track-height, 32px))}.disabled .handle-container{transition:none}.handle{border-start-start-radius:var(--md-switch-handle-shape-start-start, var(--md-switch-handle-shape, var(--md-sys-shape-corner-full, 9999px)));border-start-end-radius:var(--md-switch-handle-shape-start-end, var(--md-switch-handle-shape, var(--md-sys-shape-corner-full, 9999px)));border-end-end-radius:var(--md-switch-handle-shape-end-end, var(--md-switch-handle-shape, var(--md-sys-shape-corner-full, 9999px)));border-end-start-radius:var(--md-switch-handle-shape-end-start, var(--md-switch-handle-shape, var(--md-sys-shape-corner-full, 9999px)));height:var(--md-switch-handle-height, 16px);width:var(--md-switch-handle-width, 16px);transform-origin:center;transition-property:height,width;transition-duration:250ms,250ms;transition-timing-function:cubic-bezier(0.2, 0, 0, 1),cubic-bezier(0.2, 0, 0, 1);z-index:0}.handle::before{content:"";display:flex;inset:0;position:absolute;border-radius:inherit;box-sizing:border-box;transition:background-color 67ms linear}.disabled .handle,.disabled .handle::before{transition:none}.selected .handle{height:var(--md-switch-selected-handle-height, 24px);width:var(--md-switch-selected-handle-width, 24px)}.handle.with-icon{height:var(--md-switch-with-icon-handle-height, 24px);width:var(--md-switch-with-icon-handle-width, 24px)}.selected:not(.disabled):active .handle,.unselected:not(.disabled):active .handle{height:var(--md-switch-pressed-handle-height, 28px);width:var(--md-switch-pressed-handle-width, 28px);transition-timing-function:linear;transition-duration:100ms}.selected .handle::before{background-color:var(--md-switch-selected-handle-color, var(--md-sys-color-on-primary, #fff))}.selected:hover .handle::before{background-color:var(--md-switch-selected-hover-handle-color, var(--md-sys-color-primary-container, #eaddff))}.selected:focus-within .handle::before{background-color:var(--md-switch-selected-focus-handle-color, var(--md-sys-color-primary-container, #eaddff))}.selected:active .handle::before{background-color:var(--md-switch-selected-pressed-handle-color, var(--md-sys-color-primary-container, #eaddff))}.selected.disabled .handle::before{background-color:var(--md-switch-disabled-selected-handle-color, var(--md-sys-color-surface, #fef7ff));opacity:var(--md-switch-disabled-selected-handle-opacity, 1)}.unselected .handle::before{background-color:var(--md-switch-handle-color, var(--md-sys-color-outline, #79747e))}.unselected:hover .handle::before{background-color:var(--md-switch-hover-handle-color, var(--md-sys-color-on-surface-variant, #49454f))}.unselected:focus-within .handle::before{background-color:var(--md-switch-focus-handle-color, var(--md-sys-color-on-surface-variant, #49454f))}.unselected:active .handle::before{background-color:var(--md-switch-pressed-handle-color, var(--md-sys-color-on-surface-variant, #49454f))}.unselected.disabled .handle::before{background-color:var(--md-switch-disabled-handle-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-switch-disabled-handle-opacity, 0.38)}md-ripple{border-radius:var(--md-switch-state-layer-shape, var(--md-sys-shape-corner-full, 9999px));height:var(--md-switch-state-layer-size, 40px);inset:unset;width:var(--md-switch-state-layer-size, 40px)}.selected md-ripple{--md-ripple-hover-color: var(--md-switch-selected-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-pressed-color: var(--md-switch-selected-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--md-ripple-hover-opacity: var(--md-switch-selected-hover-state-layer-opacity, 0.08);--md-ripple-pressed-opacity: var(--md-switch-selected-pressed-state-layer-opacity, 0.12)}.unselected md-ripple{--md-ripple-hover-color: var(--md-switch-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-pressed-color: var(--md-switch-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--md-ripple-hover-opacity: var(--md-switch-hover-state-layer-opacity, 0.08);--md-ripple-pressed-opacity: var(--md-switch-pressed-state-layer-opacity, 0.12)}}@layer hcm{@media(forced-colors: active){.unselected .handle::before{background:ButtonText}.disabled .handle::before{opacity:1}.disabled.unselected .handle::before{background:GrayText}}}@layer styles{.icons{position:relative;height:100%;width:100%}.icon{position:absolute;inset:0;margin:auto;display:flex;align-items:center;justify-content:center;fill:currentColor;transition:fill 67ms linear,opacity 33ms linear,transform 167ms cubic-bezier(0.2, 0, 0, 1);opacity:0}.disabled .icon{transition:none}.selected .icon--on,.unselected .icon--off{opacity:1}.unselected .handle:not(.with-icon) .icon--on{transform:rotate(-45deg)}.icon--off{width:var(--md-switch-icon-size, 16px);height:var(--md-switch-icon-size, 16px);color:var(--md-switch-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9))}.unselected:hover .icon--off{color:var(--md-switch-hover-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9))}.unselected:focus-within .icon--off{color:var(--md-switch-focus-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9))}.unselected:active .icon--off{color:var(--md-switch-pressed-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9))}.unselected.disabled .icon--off{color:var(--md-switch-disabled-icon-color, var(--md-sys-color-surface-container-highest, #e6e0e9));opacity:var(--md-switch-disabled-icon-opacity, 0.38)}.icon--on{width:var(--md-switch-selected-icon-size, 16px);height:var(--md-switch-selected-icon-size, 16px);color:var(--md-switch-selected-icon-color, var(--md-sys-color-on-primary-container, #21005d))}.selected:hover .icon--on{color:var(--md-switch-selected-hover-icon-color, var(--md-sys-color-on-primary-container, #21005d))}.selected:focus-within .icon--on{color:var(--md-switch-selected-focus-icon-color, var(--md-sys-color-on-primary-container, #21005d))}.selected:active .icon--on{color:var(--md-switch-selected-pressed-icon-color, var(--md-sys-color-on-primary-container, #21005d))}.selected.disabled .icon--on{color:var(--md-switch-disabled-selected-icon-color, var(--md-sys-color-on-surface, #1d1b20));opacity:var(--md-switch-disabled-selected-icon-opacity, 0.38)}}@layer hcm{@media(forced-colors: active){.icon--off{fill:Canvas}.icon--on{fill:ButtonText}.disabled.unselected .icon--off,.disabled.selected .icon--on{opacity:1}.disabled .icon--on{fill:GrayText}}}
+`;
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @summary Switches toggle the state of a single item on or off.
+ *
+ * @description
+ * There's one type of switch in Material. Use this selection control when the
+ * user needs to toggle a single item on or off.
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdSwitch = class MdSwitch extends Switch {};
+MdSwitch.styles = [styles];
+MdSwitch = __decorate([t('md-switch')], MdSwitch);
+
+let WidgetSwitch = class WidgetSwitch extends i$1 {
+    constructor() {
+        super();
+        this.dataSets = new Map();
+        this.textActive = true;
+        this.version = '1.0.1';
+        this.origWidth = 0;
+        this.origHeight = 0;
+        this.resizeObserver = new ResizeObserver(this.applyData.bind(this));
+        this.resizeObserver.observe(this);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+    }
+    firstUpdated(_changedProperties) {
+        var _a;
+        this.valueContainer = (_a = this === null || this === void 0 ? void 0 : this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.value-container');
+        this.registerTheme(this.theme);
+        this.transformData();
+        this.applyData();
+    }
+    update(changedProperties) {
+        if (changedProperties.has('inputData')) {
+            this.transformData();
+            this.applyData();
+        }
+        if (changedProperties.has('theme')) {
+            this.registerTheme(this.theme);
+        }
+        super.update(changedProperties);
+    }
+    registerTheme(theme) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        const cssTextColor = getComputedStyle(this).getPropertyValue('--re-text-color').trim();
+        const cssBgColor = getComputedStyle(this).getPropertyValue('--re-tile-background-color').trim();
+        this.themeBgColor = cssBgColor || ((_b = (_a = this.theme) === null || _a === void 0 ? void 0 : _a.theme_object) === null || _b === void 0 ? void 0 : _b.backgroundColor);
+        this.themeTitleColor = cssTextColor || ((_f = (_e = (_d = (_c = this.theme) === null || _c === void 0 ? void 0 : _c.theme_object) === null || _d === void 0 ? void 0 : _d.title) === null || _e === void 0 ? void 0 : _e.textStyle) === null || _f === void 0 ? void 0 : _f.color);
+        this.themeSubtitleColor =
+            cssTextColor || ((_k = (_j = (_h = (_g = this.theme) === null || _g === void 0 ? void 0 : _g.theme_object) === null || _h === void 0 ? void 0 : _h.title) === null || _j === void 0 ? void 0 : _j.subtextStyle) === null || _k === void 0 ? void 0 : _k.color) || this.themeTitleColor;
+    }
+    applyData() { }
+    async transformData() {
+        var _a, _b;
+        if (!this.inputData)
+            return;
+        this.dataSets.forEach((d) => {
+            var _a;
+            (_a = d.label) !== null && _a !== void 0 ? _a : (d.label = '');
+        });
+        this.dataSets = new Map();
+        (_b = (_a = this.inputData) === null || _a === void 0 ? void 0 : _a.dataseries) === null || _b === void 0 ? void 0 : _b.forEach((ds) => {
+            var _a;
+            // pivot data
+            const distincts = [...new Set((_a = ds.data) === null || _a === void 0 ? void 0 : _a.map((d) => d.pivot))].sort();
+            ds.selected = undefined;
+            distincts.forEach((piv) => {
+                var _a, _b, _c, _d, _e;
+                const prefix = piv !== null && piv !== void 0 ? piv : '';
+                const label = (_a = ds.label) !== null && _a !== void 0 ? _a : '';
+                const value = distincts.length === 1 ? (_b = ds.data) === null || _b === void 0 ? void 0 : _b[0] : (_d = (_c = ds.data) === null || _c === void 0 ? void 0 : _c.filter((d) => d.pivot === piv)) === null || _d === void 0 ? void 0 : _d[0];
+                const pds = {
+                    label: prefix + (!!prefix && !!label ? ' - ' : '') + label,
+                    actionApp: value === null || value === void 0 ? void 0 : value.actionApp,
+                    actionDevice: value === null || value === void 0 ? void 0 : value.actionDevice,
+                    actionTopic: value === null || value === void 0 ? void 0 : value.actionTopic,
+                    styling: ds.styling,
+                    selected: this.isSelected(ds, value)
+                };
+                this.dataSets.set((_e = pds.label) !== null && _e !== void 0 ? _e : '', pds);
+            });
+        });
+        // console.log('Value Datasets', this.dataSets)
+    }
+    isSelected(ds, value) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        if (!value)
+            return undefined;
+        const on = (_a = ds === null || ds === void 0 ? void 0 : ds.stateMap) === null || _a === void 0 ? void 0 : _a.on;
+        if (on === null || on === void 0 ? void 0 : on.startsWith('<=')) {
+            const val = parseFloat((_b = value.value) !== null && _b !== void 0 ? _b : '');
+            const comp = parseFloat(on.substring(2));
+            return isNaN(val) || isNaN(comp) ? undefined : val <= comp;
+        }
+        if (on === null || on === void 0 ? void 0 : on.startsWith('<')) {
+            const val = parseFloat((_c = value.value) !== null && _c !== void 0 ? _c : '');
+            const comp = parseFloat(on.substring(1));
+            return isNaN(val) || isNaN(comp) ? undefined : val < comp;
+        }
+        if (on === null || on === void 0 ? void 0 : on.startsWith('>=')) {
+            const val = parseFloat((_d = value.value) !== null && _d !== void 0 ? _d : '');
+            const comp = parseFloat(on.substring(2));
+            return isNaN(val) || isNaN(comp) ? undefined : val >= comp;
+        }
+        if (on === null || on === void 0 ? void 0 : on.startsWith('>')) {
+            const val = parseFloat((_e = value.value) !== null && _e !== void 0 ? _e : '');
+            const comp = parseFloat(on.substring(1));
+            return isNaN(val) || isNaN(comp) ? undefined : val > comp;
+        }
+        const off = (_f = ds === null || ds === void 0 ? void 0 : ds.stateMap) === null || _f === void 0 ? void 0 : _f.off;
+        if (off === null || off === void 0 ? void 0 : off.startsWith('<=')) {
+            const val = parseFloat((_g = value.value) !== null && _g !== void 0 ? _g : '');
+            const comp = parseFloat(off.substring(2));
+            return isNaN(val) || isNaN(comp) ? undefined : val > comp;
+        }
+        if (off === null || off === void 0 ? void 0 : off.startsWith('<')) {
+            const val = parseFloat((_h = value.value) !== null && _h !== void 0 ? _h : '');
+            const comp = parseFloat(off.substring(1));
+            return isNaN(val) || isNaN(comp) ? undefined : val <= comp;
+        }
+        if (off === null || off === void 0 ? void 0 : off.startsWith('>=')) {
+            const val = parseFloat((_j = value.value) !== null && _j !== void 0 ? _j : '');
+            const comp = parseFloat(off.substring(2));
+            return isNaN(val) || isNaN(comp) ? undefined : val < comp;
+        }
+        if (off === null || off === void 0 ? void 0 : off.startsWith('>')) {
+            const val = parseFloat((_k = value.value) !== null && _k !== void 0 ? _k : '');
+            const comp = parseFloat(off.substring(1));
+            return isNaN(val) || isNaN(comp) ? undefined : val <= comp;
+        }
+        const onValues = (_l = on === null || on === void 0 ? void 0 : on.split(',').map((v) => v.trim().replace('"', '').replace("'", ''))) !== null && _l !== void 0 ? _l : [];
+        if (onValues.includes((_m = String(value.value)) !== null && _m !== void 0 ? _m : ''))
+            return true;
+        const offValues = (_o = off === null || off === void 0 ? void 0 : off.split(',').map((v) => v.trim().replace('"', '').replace("'", ''))) !== null && _o !== void 0 ? _o : [];
+        if (offValues.includes((_p = String(value.value)) !== null && _p !== void 0 ? _p : ''))
+            return false;
+        return undefined;
+    }
+    handleActionSubmit(e) {
+        const switchEl = e.target;
+        const payload = {
+            args: switchEl === null || switchEl === void 0 ? void 0 : switchEl.selected,
+            actionApp: switchEl === null || switchEl === void 0 ? void 0 : switchEl.actionApp,
+            actionDevice: switchEl === null || switchEl === void 0 ? void 0 : switchEl.actionDevice,
+            actionTopic: switchEl === null || switchEl === void 0 ? void 0 : switchEl.actionTopic,
+            label: switchEl === null || switchEl === void 0 ? void 0 : switchEl.label
+        };
+        console.log('Action Submit', payload);
+        this.dispatchEvent(new CustomEvent('action-submit', {
+            detail: payload,
+            bubbles: false,
+            composed: false
+        }));
+    }
+    render() {
+        var _a, _b, _c, _d;
+        return x `
+            <div
+                class="wrapper"
+                style="background-color: ${this.themeBgColor}; color: ${this.themeTitleColor}"
+            >
+                <header>
+                    <h3 class="paging" ?active=${(_a = this.inputData) === null || _a === void 0 ? void 0 : _a.title}>${(_b = this.inputData) === null || _b === void 0 ? void 0 : _b.title}</h3>
+                    <p
+                        class="paging"
+                        ?active=${(_c = this.inputData) === null || _c === void 0 ? void 0 : _c.subTitle}
+                        style="color: ${this.themeSubtitleColor}"
+                    >
+                        ${(_d = this.inputData) === null || _d === void 0 ? void 0 : _d.subTitle}
+                    </p>
+                </header>
+
+                <div class="paging no-data" ?active=${!this.dataSets.size}>No Data</div>
+                <div class="value-container">
+                    ${c([...this.dataSets.entries()].sort(), ([label]) => label, ([label, ds]) => {
+            return x `
+                                <div class="switch" label="${label}">
+                                    ${label}
+                                    <label
+                                        ><md-switch
+                                            aria-label="${label}"
+                                            ?selected="${!!ds.selected}"
+                                            .actionApp="${ds === null || ds === void 0 ? void 0 : ds.actionApp}"
+                                            .actionDevice="${ds === null || ds === void 0 ? void 0 : ds.actionDevice}"
+                                            .actionTopic="${ds === null || ds === void 0 ? void 0 : ds.actionTopic}"
+                                            .label="${label}"
+                                            @change="${this.handleActionSubmit}"
+                                        ></md-switch
+                                    ></label>
+                                </div>
+                            `;
+        })}
+                </div>
+            </div>
+        `;
+    }
+};
+WidgetSwitch.styles = i$4 `
+        :host {
+            display: block;
+            font-family: sans-serif;
+            box-sizing: border-box;
+            position: relative;
+            margin: auto;
+        }
+
+        .paging:not([active]) {
+            display: none !important;
+        }
+
+        .wrapper {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            width: 100%;
+            padding: 16px;
+            box-sizing: border-box;
+        }
+
+        h3 {
+            margin: 0;
+            max-width: 300px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        p {
+            margin: 10px 0 0 0;
+            max-width: 300px;
+            font-size: 14px;
+            line-height: 17px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .value-container {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            justify-content: center;
+            line-height: 0.9;
+            flex: 1;
+            overflow: hidden;
+            position: relative;
+            gap: 12px;
+        }
+
+        .switch {
+            overflow: hidden;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            box-sizing: border-box;
+            /* border-left: 4px solid #ddd; */
+        }
+
+        .no-data {
+            font-size: 20px;
+            display: flex;
+            height: 100%;
+            width: 100%;
+            text-align: center;
+            align-items: center;
+            justify-content: center;
+        }
+    `;
+__decorate([
+    n({ type: Object })
+], WidgetSwitch.prototype, "inputData", void 0);
+__decorate([
+    n({ type: Object })
+], WidgetSwitch.prototype, "theme", void 0);
+__decorate([
+    r()
+], WidgetSwitch.prototype, "dataSets", void 0);
+__decorate([
+    r()
+], WidgetSwitch.prototype, "textActive", void 0);
+__decorate([
+    r()
+], WidgetSwitch.prototype, "themeBgColor", void 0);
+__decorate([
+    r()
+], WidgetSwitch.prototype, "themeTitleColor", void 0);
+__decorate([
+    r()
+], WidgetSwitch.prototype, "themeSubtitleColor", void 0);
+WidgetSwitch = __decorate([
+    t('widget-switch-1.0.1')
+], WidgetSwitch);
+
+export { WidgetSwitch };
+//# sourceMappingURL=widget-switch.js.map