@openvoxproject/voxblocks 0.9.0

package/dist/cdn/voxblocks.js

@@ -0,0 +1,5057 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const Ne = globalThis, ut = Ne.ShadowRoot && (Ne.ShadyCSS === void 0 || Ne.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, xt = Symbol(), Bt = /* @__PURE__ */ new WeakMap();
+let Gt = class {
+  constructor(e, o, r) {
+    if (this._$cssResult$ = !0, r !== xt) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    this.cssText = e, this.t = o;
+  }
+  get styleSheet() {
+    let e = this.o;
+    const o = this.t;
+    if (ut && e === void 0) {
+      const r = o !== void 0 && o.length === 1;
+      r && (e = Bt.get(o)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), r && Bt.set(o, e));
+    }
+    return e;
+  }
+  toString() {
+    return this.cssText;
+  }
+};
+const po = (s) => new Gt(typeof s == "string" ? s : s + "", void 0, xt), c = (s, ...e) => {
+  const o = s.length === 1 ? s[0] : e.reduce((r, t, a) => r + ((i) => {
+    if (i._$cssResult$ === !0) return i.cssText;
+    if (typeof i == "number") return i;
+    throw Error("Value passed to 'css' function must be a 'css' function result: " + i + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
+  })(t) + s[a + 1], s[0]);
+  return new Gt(o, s, xt);
+}, ho = (s, e) => {
+  if (ut) s.adoptedStyleSheets = e.map((o) => o instanceof CSSStyleSheet ? o : o.styleSheet);
+  else for (const o of e) {
+    const r = document.createElement("style"), t = Ne.litNonce;
+    t !== void 0 && r.setAttribute("nonce", t), r.textContent = o.cssText, s.appendChild(r);
+  }
+}, Vt = ut ? (s) => s : (s) => s instanceof CSSStyleSheet ? ((e) => {
+  let o = "";
+  for (const r of e.cssRules) o += r.cssText;
+  return po(o);
+})(s) : s;
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const { is: vo, defineProperty: uo, getOwnPropertyDescriptor: xo, getOwnPropertyNames: fo, getOwnPropertySymbols: go, getPrototypeOf: bo } = Object, P = globalThis, Nt = P.trustedTypes, mo = Nt ? Nt.emptyScript : "", rt = P.reactiveElementPolyfillSupport, Q = (s, e) => s, Re = { toAttribute(s, e) {
+  switch (e) {
+    case Boolean:
+      s = s ? mo : null;
+      break;
+    case Object:
+    case Array:
+      s = s == null ? s : JSON.stringify(s);
+  }
+  return s;
+}, fromAttribute(s, e) {
+  let o = s;
+  switch (e) {
+    case Boolean:
+      o = s !== null;
+      break;
+    case Number:
+      o = s === null ? null : Number(s);
+      break;
+    case Object:
+    case Array:
+      try {
+        o = JSON.parse(s);
+      } catch {
+        o = null;
+      }
+  }
+  return o;
+} }, ft = (s, e) => !vo(s, e), Rt = { attribute: !0, type: String, converter: Re, reflect: !1, useDefault: !1, hasChanged: ft };
+Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), P.litPropertyMetadata ?? (P.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
+let q = class extends HTMLElement {
+  static addInitializer(e) {
+    this._$Ei(), (this.l ?? (this.l = [])).push(e);
+  }
+  static get observedAttributes() {
+    return this.finalize(), this._$Eh && [...this._$Eh.keys()];
+  }
+  static createProperty(e, o = Rt) {
+    if (o.state && (o.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(e) && ((o = Object.create(o)).wrapped = !0), this.elementProperties.set(e, o), !o.noAccessor) {
+      const r = Symbol(), t = this.getPropertyDescriptor(e, r, o);
+      t !== void 0 && uo(this.prototype, e, t);
+    }
+  }
+  static getPropertyDescriptor(e, o, r) {
+    const { get: t, set: a } = xo(this.prototype, e) ?? { get() {
+      return this[o];
+    }, set(i) {
+      this[o] = i;
+    } };
+    return { get: t, set(i) {
+      const v = t == null ? void 0 : t.call(this);
+      a == null || a.call(this, i), this.requestUpdate(e, v, r);
+    }, configurable: !0, enumerable: !0 };
+  }
+  static getPropertyOptions(e) {
+    return this.elementProperties.get(e) ?? Rt;
+  }
+  static _$Ei() {
+    if (this.hasOwnProperty(Q("elementProperties"))) return;
+    const e = bo(this);
+    e.finalize(), e.l !== void 0 && (this.l = [...e.l]), this.elementProperties = new Map(e.elementProperties);
+  }
+  static finalize() {
+    if (this.hasOwnProperty(Q("finalized"))) return;
+    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(Q("properties"))) {
+      const o = this.properties, r = [...fo(o), ...go(o)];
+      for (const t of r) this.createProperty(t, o[t]);
+    }
+    const e = this[Symbol.metadata];
+    if (e !== null) {
+      const o = litPropertyMetadata.get(e);
+      if (o !== void 0) for (const [r, t] of o) this.elementProperties.set(r, t);
+    }
+    this._$Eh = /* @__PURE__ */ new Map();
+    for (const [o, r] of this.elementProperties) {
+      const t = this._$Eu(o, r);
+      t !== void 0 && this._$Eh.set(t, o);
+    }
+    this.elementStyles = this.finalizeStyles(this.styles);
+  }
+  static finalizeStyles(e) {
+    const o = [];
+    if (Array.isArray(e)) {
+      const r = new Set(e.flat(1 / 0).reverse());
+      for (const t of r) o.unshift(Vt(t));
+    } else e !== void 0 && o.push(Vt(e));
+    return o;
+  }
+  static _$Eu(e, o) {
+    const r = o.attribute;
+    return r === !1 ? void 0 : typeof r == "string" ? r : typeof e == "string" ? e.toLowerCase() : void 0;
+  }
+  constructor() {
+    super(), this._$Ep = void 0, this.isUpdatePending = !1, this.hasUpdated = !1, this._$Em = null, this._$Ev();
+  }
+  _$Ev() {
+    var e;
+    this._$ES = new Promise((o) => this.enableUpdating = o), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), (e = this.constructor.l) == null || e.forEach((o) => o(this));
+  }
+  addController(e) {
+    var o;
+    (this._$EO ?? (this._$EO = /* @__PURE__ */ new Set())).add(e), this.renderRoot !== void 0 && this.isConnected && ((o = e.hostConnected) == null || o.call(e));
+  }
+  removeController(e) {
+    var o;
+    (o = this._$EO) == null || o.delete(e);
+  }
+  _$E_() {
+    const e = /* @__PURE__ */ new Map(), o = this.constructor.elementProperties;
+    for (const r of o.keys()) this.hasOwnProperty(r) && (e.set(r, this[r]), delete this[r]);
+    e.size > 0 && (this._$Ep = e);
+  }
+  createRenderRoot() {
+    const e = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
+    return ho(e, this.constructor.elementStyles), e;
+  }
+  connectedCallback() {
+    var e;
+    this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this.enableUpdating(!0), (e = this._$EO) == null || e.forEach((o) => {
+      var r;
+      return (r = o.hostConnected) == null ? void 0 : r.call(o);
+    });
+  }
+  enableUpdating(e) {
+  }
+  disconnectedCallback() {
+    var e;
+    (e = this._$EO) == null || e.forEach((o) => {
+      var r;
+      return (r = o.hostDisconnected) == null ? void 0 : r.call(o);
+    });
+  }
+  attributeChangedCallback(e, o, r) {
+    this._$AK(e, r);
+  }
+  _$ET(e, o) {
+    var a;
+    const r = this.constructor.elementProperties.get(e), t = this.constructor._$Eu(e, r);
+    if (t !== void 0 && r.reflect === !0) {
+      const i = (((a = r.converter) == null ? void 0 : a.toAttribute) !== void 0 ? r.converter : Re).toAttribute(o, r.type);
+      this._$Em = e, i == null ? this.removeAttribute(t) : this.setAttribute(t, i), this._$Em = null;
+    }
+  }
+  _$AK(e, o) {
+    var a, i;
+    const r = this.constructor, t = r._$Eh.get(e);
+    if (t !== void 0 && this._$Em !== t) {
+      const v = r.getPropertyOptions(t), h = typeof v.converter == "function" ? { fromAttribute: v.converter } : ((a = v.converter) == null ? void 0 : a.fromAttribute) !== void 0 ? v.converter : Re;
+      this._$Em = t;
+      const x = h.fromAttribute(o, v.type);
+      this[t] = x ?? ((i = this._$Ej) == null ? void 0 : i.get(t)) ?? x, this._$Em = null;
+    }
+  }
+  requestUpdate(e, o, r, t = !1, a) {
+    var i;
+    if (e !== void 0) {
+      const v = this.constructor;
+      if (t === !1 && (a = this[e]), r ?? (r = v.getPropertyOptions(e)), !((r.hasChanged ?? ft)(a, o) || r.useDefault && r.reflect && a === ((i = this._$Ej) == null ? void 0 : i.get(e)) && !this.hasAttribute(v._$Eu(e, r)))) return;
+      this.C(e, o, r);
+    }
+    this.isUpdatePending === !1 && (this._$ES = this._$EP());
+  }
+  C(e, o, { useDefault: r, reflect: t, wrapped: a }, i) {
+    r && !(this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Map())).has(e) && (this._$Ej.set(e, i ?? o ?? this[e]), a !== !0 || i !== void 0) || (this._$AL.has(e) || (this.hasUpdated || r || (o = void 0), this._$AL.set(e, o)), t === !0 && this._$Em !== e && (this._$Eq ?? (this._$Eq = /* @__PURE__ */ new Set())).add(e));
+  }
+  async _$EP() {
+    this.isUpdatePending = !0;
+    try {
+      await this._$ES;
+    } catch (o) {
+      Promise.reject(o);
+    }
+    const e = this.scheduleUpdate();
+    return e != null && await e, !this.isUpdatePending;
+  }
+  scheduleUpdate() {
+    return this.performUpdate();
+  }
+  performUpdate() {
+    var r;
+    if (!this.isUpdatePending) return;
+    if (!this.hasUpdated) {
+      if (this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this._$Ep) {
+        for (const [a, i] of this._$Ep) this[a] = i;
+        this._$Ep = void 0;
+      }
+      const t = this.constructor.elementProperties;
+      if (t.size > 0) for (const [a, i] of t) {
+        const { wrapped: v } = i, h = this[a];
+        v !== !0 || this._$AL.has(a) || h === void 0 || this.C(a, void 0, i, h);
+      }
+    }
+    let e = !1;
+    const o = this._$AL;
+    try {
+      e = this.shouldUpdate(o), e ? (this.willUpdate(o), (r = this._$EO) == null || r.forEach((t) => {
+        var a;
+        return (a = t.hostUpdate) == null ? void 0 : a.call(t);
+      }), this.update(o)) : this._$EM();
+    } catch (t) {
+      throw e = !1, this._$EM(), t;
+    }
+    e && this._$AE(o);
+  }
+  willUpdate(e) {
+  }
+  _$AE(e) {
+    var o;
+    (o = this._$EO) == null || o.forEach((r) => {
+      var t;
+      return (t = r.hostUpdated) == null ? void 0 : t.call(r);
+    }), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(e)), this.updated(e);
+  }
+  _$EM() {
+    this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
+  }
+  get updateComplete() {
+    return this.getUpdateComplete();
+  }
+  getUpdateComplete() {
+    return this._$ES;
+  }
+  shouldUpdate(e) {
+    return !0;
+  }
+  update(e) {
+    this._$Eq && (this._$Eq = this._$Eq.forEach((o) => this._$ET(o, this[o]))), this._$EM();
+  }
+  updated(e) {
+  }
+  firstUpdated(e) {
+  }
+};
+q.elementStyles = [], q.shadowRootOptions = { mode: "open" }, q[Q("elementProperties")] = /* @__PURE__ */ new Map(), q[Q("finalized")] = /* @__PURE__ */ new Map(), rt == null || rt({ ReactiveElement: q }), (P.reactiveElementVersions ?? (P.reactiveElementVersions = [])).push("2.1.2");
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const ee = globalThis, Mt = (s) => s, Me = ee.trustedTypes, Ut = Me ? Me.createPolicy("lit-html", { createHTML: (s) => s }) : void 0, Xt = "$lit$", w = `lit$${Math.random().toFixed(9).slice(2)}$`, Yt = "?" + w, yo = `<${Yt}>`, D = document, te = () => D.createComment(""), oe = (s) => s === null || typeof s != "object" && typeof s != "function", gt = Array.isArray, $o = (s) => gt(s) || typeof (s == null ? void 0 : s[Symbol.iterator]) == "function", st = `[ 	
+\f\r]`, J = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, Lt = /-->/g, qt = />/g, E = RegExp(`>|${st}(?:([^\\s"'>=/]+)(${st}*=${st}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), Ht = /'/g, It = /"/g, Zt = /^(?:script|style|textarea|title)$/i, _o = (s) => (e, ...o) => ({ _$litType$: s, strings: e, values: o }), l = _o(1), m = Symbol.for("lit-noChange"), u = Symbol.for("lit-nothing"), Ft = /* @__PURE__ */ new WeakMap(), j = D.createTreeWalker(D, 129);
+function Jt(s, e) {
+  if (!gt(s) || !s.hasOwnProperty("raw")) throw Error("invalid template strings array");
+  return Ut !== void 0 ? Ut.createHTML(e) : e;
+}
+const wo = (s, e) => {
+  const o = s.length - 1, r = [];
+  let t, a = e === 2 ? "<svg>" : e === 3 ? "<math>" : "", i = J;
+  for (let v = 0; v < o; v++) {
+    const h = s[v];
+    let x, g, f = -1, y = 0;
+    for (; y < h.length && (i.lastIndex = y, g = i.exec(h), g !== null); ) y = i.lastIndex, i === J ? g[1] === "!--" ? i = Lt : g[1] !== void 0 ? i = qt : g[2] !== void 0 ? (Zt.test(g[2]) && (t = RegExp("</" + g[2], "g")), i = E) : g[3] !== void 0 && (i = E) : i === E ? g[0] === ">" ? (i = t ?? J, f = -1) : g[1] === void 0 ? f = -2 : (f = i.lastIndex - g[2].length, x = g[1], i = g[3] === void 0 ? E : g[3] === '"' ? It : Ht) : i === It || i === Ht ? i = E : i === Lt || i === qt ? i = J : (i = E, t = void 0);
+    const _ = i === E && s[v + 1].startsWith("/>") ? " " : "";
+    a += i === J ? h + yo : f >= 0 ? (r.push(x), h.slice(0, f) + Xt + h.slice(f) + w + _) : h + w + (f === -2 ? v : _);
+  }
+  return [Jt(s, a + (s[o] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), r];
+};
+class re {
+  constructor({ strings: e, _$litType$: o }, r) {
+    let t;
+    this.parts = [];
+    let a = 0, i = 0;
+    const v = e.length - 1, h = this.parts, [x, g] = wo(e, o);
+    if (this.el = re.createElement(x, r), j.currentNode = this.el.content, o === 2 || o === 3) {
+      const f = this.el.content.firstChild;
+      f.replaceWith(...f.childNodes);
+    }
+    for (; (t = j.nextNode()) !== null && h.length < v; ) {
+      if (t.nodeType === 1) {
+        if (t.hasAttributes()) for (const f of t.getAttributeNames()) if (f.endsWith(Xt)) {
+          const y = g[i++], _ = t.getAttribute(f).split(w), Be = /([.?@])?(.*)/.exec(y);
+          h.push({ type: 1, index: a, name: Be[2], strings: _, ctor: Be[1] === "." ? Oo : Be[1] === "?" ? Ao : Be[1] === "@" ? Co : Ye }), t.removeAttribute(f);
+        } else f.startsWith(w) && (h.push({ type: 6, index: a }), t.removeAttribute(f));
+        if (Zt.test(t.tagName)) {
+          const f = t.textContent.split(w), y = f.length - 1;
+          if (y > 0) {
+            t.textContent = Me ? Me.emptyScript : "";
+            for (let _ = 0; _ < y; _++) t.append(f[_], te()), j.nextNode(), h.push({ type: 2, index: ++a });
+            t.append(f[y], te());
+          }
+        }
+      } else if (t.nodeType === 8) if (t.data === Yt) h.push({ type: 2, index: a });
+      else {
+        let f = -1;
+        for (; (f = t.data.indexOf(w, f + 1)) !== -1; ) h.push({ type: 7, index: a }), f += w.length - 1;
+      }
+      a++;
+    }
+  }
+  static createElement(e, o) {
+    const r = D.createElement("template");
+    return r.innerHTML = e, r;
+  }
+}
+function H(s, e, o = s, r) {
+  var i, v;
+  if (e === m) return e;
+  let t = r !== void 0 ? (i = o._$Co) == null ? void 0 : i[r] : o._$Cl;
+  const a = oe(e) ? void 0 : e._$litDirective$;
+  return (t == null ? void 0 : t.constructor) !== a && ((v = t == null ? void 0 : t._$AO) == null || v.call(t, !1), a === void 0 ? t = void 0 : (t = new a(s), t._$AT(s, o, r)), r !== void 0 ? (o._$Co ?? (o._$Co = []))[r] = t : o._$Cl = t), t !== void 0 && (e = H(s, t._$AS(s, e.values), t, r)), e;
+}
+class Po {
+  constructor(e, o) {
+    this._$AV = [], this._$AN = void 0, this._$AD = e, this._$AM = o;
+  }
+  get parentNode() {
+    return this._$AM.parentNode;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  u(e) {
+    const { el: { content: o }, parts: r } = this._$AD, t = ((e == null ? void 0 : e.creationScope) ?? D).importNode(o, !0);
+    j.currentNode = t;
+    let a = j.nextNode(), i = 0, v = 0, h = r[0];
+    for (; h !== void 0; ) {
+      if (i === h.index) {
+        let x;
+        h.type === 2 ? x = new Oe(a, a.nextSibling, this, e) : h.type === 1 ? x = new h.ctor(a, h.name, h.strings, this, e) : h.type === 6 && (x = new Eo(a, this, e)), this._$AV.push(x), h = r[++v];
+      }
+      i !== (h == null ? void 0 : h.index) && (a = j.nextNode(), i++);
+    }
+    return j.currentNode = D, t;
+  }
+  p(e) {
+    let o = 0;
+    for (const r of this._$AV) r !== void 0 && (r.strings !== void 0 ? (r._$AI(e, r, o), o += r.strings.length - 2) : r._$AI(e[o])), o++;
+  }
+}
+class Oe {
+  get _$AU() {
+    var e;
+    return ((e = this._$AM) == null ? void 0 : e._$AU) ?? this._$Cv;
+  }
+  constructor(e, o, r, t) {
+    this.type = 2, this._$AH = u, this._$AN = void 0, this._$AA = e, this._$AB = o, this._$AM = r, this.options = t, this._$Cv = (t == null ? void 0 : t.isConnected) ?? !0;
+  }
+  get parentNode() {
+    let e = this._$AA.parentNode;
+    const o = this._$AM;
+    return o !== void 0 && (e == null ? void 0 : e.nodeType) === 11 && (e = o.parentNode), e;
+  }
+  get startNode() {
+    return this._$AA;
+  }
+  get endNode() {
+    return this._$AB;
+  }
+  _$AI(e, o = this) {
+    e = H(this, e, o), oe(e) ? e === u || e == null || e === "" ? (this._$AH !== u && this._$AR(), this._$AH = u) : e !== this._$AH && e !== m && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : $o(e) ? this.k(e) : this._(e);
+  }
+  O(e) {
+    return this._$AA.parentNode.insertBefore(e, this._$AB);
+  }
+  T(e) {
+    this._$AH !== e && (this._$AR(), this._$AH = this.O(e));
+  }
+  _(e) {
+    this._$AH !== u && oe(this._$AH) ? this._$AA.nextSibling.data = e : this.T(D.createTextNode(e)), this._$AH = e;
+  }
+  $(e) {
+    var a;
+    const { values: o, _$litType$: r } = e, t = typeof r == "number" ? this._$AC(e) : (r.el === void 0 && (r.el = re.createElement(Jt(r.h, r.h[0]), this.options)), r);
+    if (((a = this._$AH) == null ? void 0 : a._$AD) === t) this._$AH.p(o);
+    else {
+      const i = new Po(t, this), v = i.u(this.options);
+      i.p(o), this.T(v), this._$AH = i;
+    }
+  }
+  _$AC(e) {
+    let o = Ft.get(e.strings);
+    return o === void 0 && Ft.set(e.strings, o = new re(e)), o;
+  }
+  k(e) {
+    gt(this._$AH) || (this._$AH = [], this._$AR());
+    const o = this._$AH;
+    let r, t = 0;
+    for (const a of e) t === o.length ? o.push(r = new Oe(this.O(te()), this.O(te()), this, this.options)) : r = o[t], r._$AI(a), t++;
+    t < o.length && (this._$AR(r && r._$AB.nextSibling, t), o.length = t);
+  }
+  _$AR(e = this._$AA.nextSibling, o) {
+    var r;
+    for ((r = this._$AP) == null ? void 0 : r.call(this, !1, !0, o); e !== this._$AB; ) {
+      const t = Mt(e).nextSibling;
+      Mt(e).remove(), e = t;
+    }
+  }
+  setConnected(e) {
+    var o;
+    this._$AM === void 0 && (this._$Cv = e, (o = this._$AP) == null || o.call(this, e));
+  }
+}
+class Ye {
+  get tagName() {
+    return this.element.tagName;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  constructor(e, o, r, t, a) {
+    this.type = 1, this._$AH = u, this._$AN = void 0, this.element = e, this.name = o, this._$AM = t, this.options = a, r.length > 2 || r[0] !== "" || r[1] !== "" ? (this._$AH = Array(r.length - 1).fill(new String()), this.strings = r) : this._$AH = u;
+  }
+  _$AI(e, o = this, r, t) {
+    const a = this.strings;
+    let i = !1;
+    if (a === void 0) e = H(this, e, o, 0), i = !oe(e) || e !== this._$AH && e !== m, i && (this._$AH = e);
+    else {
+      const v = e;
+      let h, x;
+      for (e = a[0], h = 0; h < a.length - 1; h++) x = H(this, v[r + h], o, h), x === m && (x = this._$AH[h]), i || (i = !oe(x) || x !== this._$AH[h]), x === u ? e = u : e !== u && (e += (x ?? "") + a[h + 1]), this._$AH[h] = x;
+    }
+    i && !t && this.j(e);
+  }
+  j(e) {
+    e === u ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
+  }
+}
+class Oo extends Ye {
+  constructor() {
+    super(...arguments), this.type = 3;
+  }
+  j(e) {
+    this.element[this.name] = e === u ? void 0 : e;
+  }
+}
+class Ao extends Ye {
+  constructor() {
+    super(...arguments), this.type = 4;
+  }
+  j(e) {
+    this.element.toggleAttribute(this.name, !!e && e !== u);
+  }
+}
+class Co extends Ye {
+  constructor(e, o, r, t, a) {
+    super(e, o, r, t, a), this.type = 5;
+  }
+  _$AI(e, o = this) {
+    if ((e = H(this, e, o, 0) ?? u) === m) return;
+    const r = this._$AH, t = e === u && r !== u || e.capture !== r.capture || e.once !== r.once || e.passive !== r.passive, a = e !== u && (r === u || t);
+    t && this.element.removeEventListener(this.name, this, r), a && this.element.addEventListener(this.name, this, e), this._$AH = e;
+  }
+  handleEvent(e) {
+    var o;
+    typeof this._$AH == "function" ? this._$AH.call(((o = this.options) == null ? void 0 : o.host) ?? this.element, e) : this._$AH.handleEvent(e);
+  }
+}
+class Eo {
+  constructor(e, o, r) {
+    this.element = e, this.type = 6, this._$AN = void 0, this._$AM = o, this.options = r;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AI(e) {
+    H(this, e);
+  }
+}
+const at = ee.litHtmlPolyfillSupport;
+at == null || at(re, Oe), (ee.litHtmlVersions ?? (ee.litHtmlVersions = [])).push("3.3.3");
+const So = (s, e, o) => {
+  const r = (o == null ? void 0 : o.renderBefore) ?? e;
+  let t = r._$litPart$;
+  if (t === void 0) {
+    const a = (o == null ? void 0 : o.renderBefore) ?? null;
+    r._$litPart$ = t = new Oe(e.insertBefore(te(), a), a, void 0, o ?? {});
+  }
+  return t._$AI(s), t;
+};
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const k = globalThis;
+let p = class extends q {
+  constructor() {
+    super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
+  }
+  createRenderRoot() {
+    var o;
+    const e = super.createRenderRoot();
+    return (o = this.renderOptions).renderBefore ?? (o.renderBefore = e.firstChild), e;
+  }
+  update(e) {
+    const o = this.render();
+    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(e), this._$Do = So(o, this.renderRoot, this.renderOptions);
+  }
+  connectedCallback() {
+    var e;
+    super.connectedCallback(), (e = this._$Do) == null || e.setConnected(!0);
+  }
+  disconnectedCallback() {
+    var e;
+    super.disconnectedCallback(), (e = this._$Do) == null || e.setConnected(!1);
+  }
+  render() {
+    return m;
+  }
+};
+var Wt;
+p._$litElement$ = !0, p.finalized = !0, (Wt = k.litElementHydrateSupport) == null || Wt.call(k, { LitElement: p });
+const it = k.litElementPolyfillSupport;
+it == null || it({ LitElement: p });
+(k.litElementVersions ?? (k.litElementVersions = [])).push("4.2.2");
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const d = (s) => (e, o) => {
+  o !== void 0 ? o.addInitializer(() => {
+    customElements.define(s, e);
+  }) : customElements.define(s, e);
+};
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const jo = { attribute: !0, type: String, converter: Re, reflect: !1, hasChanged: ft }, ko = (s = jo, e, o) => {
+  const { kind: r, metadata: t } = o;
+  let a = globalThis.litPropertyMetadata.get(t);
+  if (a === void 0 && globalThis.litPropertyMetadata.set(t, a = /* @__PURE__ */ new Map()), r === "setter" && ((s = Object.create(s)).wrapped = !0), a.set(o.name, s), r === "accessor") {
+    const { name: i } = o;
+    return { set(v) {
+      const h = e.get.call(this);
+      e.set.call(this, v), this.requestUpdate(i, h, s, !0, v);
+    }, init(v) {
+      return v !== void 0 && this.C(i, void 0, s, v), v;
+    } };
+  }
+  if (r === "setter") {
+    const { name: i } = o;
+    return function(v) {
+      const h = this[i];
+      e.call(this, v), this.requestUpdate(i, h, s, !0, v);
+    };
+  }
+  throw Error("Unsupported decorator location: " + r);
+};
+function n(s) {
+  return (e, o) => typeof o == "object" ? ko(s, e, o) : ((r, t, a) => {
+    const i = t.hasOwnProperty(a);
+    return t.constructor.createProperty(a, r), i ? Object.getOwnPropertyDescriptor(t, a) : void 0;
+  })(s, e, o);
+}
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function Qt(s) {
+  return n({ ...s, state: !0, attribute: !1 });
+}
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const Do = (s, e, o) => (o.configurable = !0, o.enumerable = !0, Reflect.decorate && typeof e != "object" && Object.defineProperty(s, e, o), o);
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function bt(s, e) {
+  return (o, r, t) => {
+    const a = (i) => {
+      var v;
+      return ((v = i.renderRoot) == null ? void 0 : v.querySelector(s)) ?? null;
+    };
+    return Do(o, r, { get() {
+      return a(this);
+    } });
+  };
+}
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const S = { ATTRIBUTE: 1, PROPERTY: 3, BOOLEAN_ATTRIBUTE: 4 }, eo = (s) => (...e) => ({ _$litDirective$: s, values: e });
+class to {
+  constructor(e) {
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AT(e, o, r) {
+    this._$Ct = e, this._$AM = o, this._$Ci = r;
+  }
+  _$AS(e, o) {
+    return this.update(e, o);
+  }
+  update(e, o) {
+    return this.render(...o);
+  }
+}
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const zo = eo(class extends to {
+  constructor(s) {
+    var e;
+    if (super(s), s.type !== S.ATTRIBUTE || s.name !== "class" || ((e = s.strings) == null ? void 0 : e.length) > 2) throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.");
+  }
+  render(s) {
+    return " " + Object.keys(s).filter((e) => s[e]).join(" ") + " ";
+  }
+  update(s, [e]) {
+    var r, t;
+    if (this.st === void 0) {
+      this.st = /* @__PURE__ */ new Set(), s.strings !== void 0 && (this.nt = new Set(s.strings.join(" ").split(/\s/).filter((a) => a !== "")));
+      for (const a in e) e[a] && !((r = this.nt) != null && r.has(a)) && this.st.add(a);
+      return this.render(e);
+    }
+    const o = s.element.classList;
+    for (const a of this.st) a in e || (o.remove(a), this.st.delete(a));
+    for (const a in e) {
+      const i = !!e[a];
+      i === this.st.has(a) || (t = this.nt) != null && t.has(a) || (i ? (o.add(a), this.st.add(a)) : (o.remove(a), this.st.delete(a)));
+    }
+    return m;
+  }
+});
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const I = (s) => s ?? u;
+var To = Object.defineProperty, Bo = Object.getOwnPropertyDescriptor, M = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? Bo(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (r ? i(e, o, t) : i(t)) || t);
+  return r && t && To(e, o, t), t;
+};
+let $ = class extends p {
+  constructor() {
+    super(...arguments), this.variant = "brand", this.size = "md", this.type = "button", this.disabled = !1;
+  }
+  render() {
+    const s = zo({
+      button: !0,
+      [this.variant]: !0,
+      [this.size]: !0
+    });
+    return this.href !== void 0 && !this.disabled ? l`
+        <a
+          class=${s}
+          href=${this.href}
+          target=${I(this.target)}
+          rel=${I(this.target === "_blank" ? "noreferrer" : void 0)}
+        >
+          <slot></slot>
+        </a>
+      ` : l`
+      <button class=${s} type=${this.type} ?disabled=${this.disabled}>
+        <slot></slot>
+      </button>
+    `;
+  }
+};
+$.styles = c`
+    :host {
+      display: inline-block;
+    }
+
+    :host([disabled]) {
+      pointer-events: none;
+    }
+
+    .button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--vox-space-2);
+      border: 1px solid transparent;
+      border-radius: var(--vox-radius-full);
+      font-family: var(--vox-font-family-base);
+      font-weight: 600;
+      line-height: 1;
+      text-decoration: none;
+      cursor: pointer;
+      white-space: nowrap;
+      transition:
+        color var(--vox-transition-base),
+        background-color var(--vox-transition-base),
+        border-color var(--vox-transition-base);
+    }
+
+    .button:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+    }
+
+    .button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .sm {
+      font-size: 12px;
+      padding: 0 var(--vox-space-3);
+      height: 28px;
+    }
+
+    .md {
+      font-size: 14px;
+      padding: 0 20px;
+      height: 38px;
+    }
+
+    .lg {
+      font-size: 16px;
+      padding: 0 var(--vox-space-6);
+      height: 48px;
+    }
+
+    .brand {
+      background-color: var(--vox-color-brand-3);
+      color: var(--vox-color-text-inverse);
+    }
+
+    .brand:hover:not(:disabled) {
+      background-color: var(--vox-color-brand-2);
+    }
+
+    .alt {
+      background-color: var(--vox-color-bg-soft);
+      color: var(--vox-color-text-1);
+      border-color: var(--vox-color-divider);
+    }
+
+    .alt:hover:not(:disabled) {
+      border-color: var(--vox-color-brand-1);
+      color: var(--vox-color-brand-1);
+    }
+
+    .danger {
+      background-color: var(--vox-color-danger-3);
+      color: var(--vox-color-text-inverse);
+    }
+
+    .danger:hover:not(:disabled) {
+      background-color: var(--vox-color-danger-2);
+    }
+
+    .ghost {
+      background-color: transparent;
+      color: var(--vox-color-brand-1);
+    }
+
+    .ghost:hover:not(:disabled) {
+      background-color: var(--vox-color-brand-soft);
+    }
+
+    /* Corner flattening when placed inside a <vox-input-group>. */
+    :host([data-vox-group]) .button {
+      height: 100%;
+      border-radius: 0;
+    }
+
+    :host([data-vox-group='start']) .button {
+      border-radius: var(--vox-radius-md) 0 0 var(--vox-radius-md);
+    }
+
+    :host([data-vox-group='end']) .button {
+      border-radius: 0 var(--vox-radius-md) var(--vox-radius-md) 0;
+    }
+  `;
+M([
+  n()
+], $.prototype, "variant", 2);
+M([
+  n()
+], $.prototype, "size", 2);
+M([
+  n()
+], $.prototype, "href", 2);
+M([
+  n()
+], $.prototype, "target", 2);
+M([
+  n()
+], $.prototype, "type", 2);
+M([
+  n({ type: Boolean, reflect: !0 })
+], $.prototype, "disabled", 2);
+$ = M([
+  d("vox-button")
+], $);
+var Vo = Object.defineProperty, No = Object.getOwnPropertyDescriptor, mt = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? No(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (r ? i(e, o, t) : i(t)) || t);
+  return r && t && Vo(e, o, t), t;
+};
+let se = class extends p {
+  constructor() {
+    super(...arguments), this.href = "#";
+  }
+  render() {
+    return l`
+      <a href=${this.href} target=${this.target ?? ""}>
+        <slot></slot>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M5 12h14" />
+          <path d="m13 6 6 6-6 6" />
+        </svg>
+      </a>
+    `;
+  }
+};
+se.styles = c`
+    :host {
+      display: inline-block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    a {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--vox-space-2);
+      color: var(--vox-color-brand-1);
+      font-size: 15px;
+      font-weight: 600;
+      text-decoration: none;
+    }
+
+    a:hover {
+      color: var(--vox-color-brand-2);
+      text-decoration: underline;
+    }
+
+    a:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+      border-radius: var(--vox-radius-sm);
+    }
+
+    svg {
+      width: 16px;
+      height: 16px;
+      transition: transform var(--vox-transition-fast);
+    }
+
+    a:hover svg {
+      transform: translateX(3px);
+    }
+  `;
+mt([
+  n()
+], se.prototype, "href", 2);
+mt([
+  n()
+], se.prototype, "target", 2);
+se = mt([
+  d("vox-cta")
+], se);
+var Ro = Object.defineProperty, Mo = Object.getOwnPropertyDescriptor, Ze = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? Mo(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (r ? i(e, o, t) : i(t)) || t);
+  return r && t && Ro(e, o, t), t;
+};
+const Kt = "vox-theme", Ve = "data-vox-theme";
+let F = class extends p {
+  constructor() {
+    super(...arguments), this.lightLabel = "Switch to dark theme", this.darkLabel = "Switch to light theme", this.dark = !1, this.media = window.matchMedia("(prefers-color-scheme: dark)"), this.handleSystemChange = (s) => {
+      localStorage.getItem(Kt) || document.documentElement.setAttribute(Ve, s.matches ? "dark" : "light");
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.syncFromDocument(), this.observer = new MutationObserver(() => this.syncFromDocument()), this.observer.observe(document.documentElement, {
+      attributes: !0,
+      attributeFilter: [Ve]
+    }), this.media.addEventListener("change", this.handleSystemChange);
+  }
+  disconnectedCallback() {
+    var s;
+    super.disconnectedCallback(), (s = this.observer) == null || s.disconnect(), this.media.removeEventListener("change", this.handleSystemChange);
+  }
+  syncFromDocument() {
+    const s = document.documentElement.getAttribute(Ve) === "dark";
+    this.dark = s, this.toggleAttribute("dark", s);
+  }
+  handleClick() {
+    const s = this.dark ? "light" : "dark";
+    document.documentElement.setAttribute(Ve, s), localStorage.setItem(Kt, s), this.dispatchEvent(
+      new CustomEvent("vox-theme-change", {
+        detail: { theme: s },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  render() {
+    const s = this.dark ? this.darkLabel : this.lightLabel;
+    return l`
+      <button
+        type="button"
+        role="switch"
+        aria-checked=${this.dark}
+        aria-label=${s}
+        title=${s}
+        @click=${this.handleClick}
+      >
+        <span class="track">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <circle cx="12" cy="12" r="4" />
+            <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
+          </svg>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z" />
+          </svg>
+          <span class="thumb"></span>
+        </span>
+      </button>
+    `;
+  }
+};
+F.styles = c`
+    :host {
+      display: inline-flex;
+    }
+
+    button {
+      display: inline-flex;
+      align-items: center;
+      border: none;
+      background: none;
+      padding: 0;
+      cursor: pointer;
+      -webkit-tap-highlight-color: transparent;
+    }
+
+    button:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+      border-radius: var(--vox-radius-full);
+    }
+
+    .track {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: space-between;
+      box-sizing: border-box;
+      width: 44px;
+      height: 24px;
+      padding: 0 5px;
+      border-radius: var(--vox-radius-full);
+      background-color: var(--vox-color-bg-soft);
+      border: 1px solid var(--vox-color-divider);
+    }
+
+    .track svg {
+      position: relative;
+      width: 13px;
+      height: 13px;
+      flex: none;
+      color: var(--vox-color-text-3);
+    }
+
+    .thumb {
+      position: absolute;
+      top: 1px;
+      left: 1px;
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      background-color: var(--vox-color-bg-elv);
+      box-shadow: var(--vox-shadow-1);
+      transition: transform var(--vox-transition-base);
+    }
+
+    :host([dark]) .thumb {
+      transform: translateX(20px);
+    }
+  `;
+Ze([
+  n({ attribute: "light-label" })
+], F.prototype, "lightLabel", 2);
+Ze([
+  n({ attribute: "dark-label" })
+], F.prototype, "darkLabel", 2);
+Ze([
+  Qt()
+], F.prototype, "dark", 2);
+F = Ze([
+  d("vox-theme-toggle")
+], F);
+var Uo = Object.defineProperty, Ae = (s, e, o, r) => {
+  for (var t = void 0, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = i(e, o, t) || t);
+  return t && Uo(e, o, t), t;
+};
+const Tt = class Tt extends p {
+  constructor() {
+    super(), this.name = "", this.label = "", this.note = "", this.disabled = !1, this.required = !1, this.internals = this.attachInternals();
+  }
+  get form() {
+    return this.internals.form;
+  }
+  get validity() {
+    return this.internals.validity;
+  }
+  get validationMessage() {
+    return this.internals.validationMessage;
+  }
+  checkValidity() {
+    return this.internals.checkValidity();
+  }
+  reportValidity() {
+    return this.internals.reportValidity();
+  }
+  /** Mirror a native inner control's validity onto the host element. */
+  syncValidity(e) {
+    this.internals.setValidity(e.validity, e.validationMessage, e);
+  }
+  renderLabel(e) {
+    return this.label ? l`
+      <label class="label" for=${e}>
+        ${this.label}${this.required ? l`<span class="required-mark" aria-hidden="true"> *</span>` : u}
+      </label>
+    ` : u;
+  }
+  renderNote() {
+    return this.note ? l`<p class="note">${this.note}</p>` : u;
+  }
+};
+Tt.formAssociated = !0;
+let b = Tt;
+Ae([
+  n()
+], b.prototype, "name");
+Ae([
+  n()
+], b.prototype, "label");
+Ae([
+  n()
+], b.prototype, "note");
+Ae([
+  n({ type: Boolean, reflect: !0 })
+], b.prototype, "disabled");
+Ae([
+  n({ type: Boolean, reflect: !0 })
+], b.prototype, "required");
+const Ce = c`
+  :host {
+    display: block;
+    font-family: var(--vox-font-family-base);
+  }
+
+  :host([disabled]) {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--vox-space-1);
+  }
+
+  .label {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--vox-color-text-1);
+  }
+
+  .required-mark {
+    color: var(--vox-color-danger-1);
+  }
+
+  .note {
+    margin: 0;
+    font-size: 12px;
+    color: var(--vox-color-text-2);
+  }
+
+  .control {
+    box-sizing: border-box;
+    width: 100%;
+    background-color: var(--vox-color-bg);
+    border: 1px solid var(--vox-color-border);
+    border-radius: var(--vox-radius-md);
+    color: var(--vox-color-text-1);
+    font-family: inherit;
+    font-size: 14px;
+    line-height: 1.5;
+    padding: var(--vox-space-2) var(--vox-space-3);
+    transition:
+      border-color var(--vox-transition-fast),
+      box-shadow var(--vox-transition-fast);
+  }
+
+  .control:focus {
+    outline: none;
+    border-color: var(--vox-color-brand-1);
+    box-shadow: 0 0 0 3px var(--vox-color-brand-soft);
+  }
+
+  /* Corner flattening when placed inside a <vox-input-group>. */
+  :host([data-vox-group]) .control {
+    border-radius: 0;
+  }
+
+  :host([data-vox-group='start']) .control {
+    border-radius: var(--vox-radius-md) 0 0 var(--vox-radius-md);
+  }
+
+  :host([data-vox-group='end']) .control {
+    border-radius: 0 var(--vox-radius-md) var(--vox-radius-md) 0;
+  }
+`, oo = c`
+  :host {
+    display: block;
+    font-family: var(--vox-font-family-base);
+  }
+
+  :host([disabled]) {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  .check {
+    display: inline-flex;
+    align-items: flex-start;
+    gap: var(--vox-space-2);
+    cursor: pointer;
+    font-size: 14px;
+    line-height: 1.5;
+    color: var(--vox-color-text-1);
+  }
+
+  input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+    margin: 0;
+  }
+`;
+var Lo = Object.defineProperty, qo = Object.getOwnPropertyDescriptor, yt = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? qo(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (r ? i(e, o, t) : i(t)) || t);
+  return r && t && Lo(e, o, t), t;
+};
+let ae = class extends b {
+  constructor() {
+    super(...arguments), this.checked = !1, this.value = "on";
+  }
+  formResetCallback() {
+    this.checked = !1;
+  }
+  updated() {
+    this.internals.setFormValue(this.checked ? this.value : null), this.internals.setValidity(
+      this.required && !this.checked ? { valueMissing: !0 } : {},
+      "Please check this box.",
+      this.renderRoot.querySelector("input") ?? void 0
+    );
+  }
+  handleChange(s) {
+    this.checked = s.target.checked, this.dispatchEvent(new Event("change", { bubbles: !0 }));
+  }
+  render() {
+    return l`
+      <label class="check">
+        <input
+          type="checkbox"
+          .checked=${this.checked}
+          ?disabled=${this.disabled}
+          @change=${this.handleChange}
+        />
+        <span class="box" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
+            <path d="m4 12 5 5L20 6" />
+          </svg>
+        </span>
+        <span class="text"><slot></slot></span>
+      </label>
+    `;
+  }
+};
+ae.styles = [
+  oo,
+  c`
+      .box {
+        flex: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 18px;
+        height: 18px;
+        margin-top: 2px;
+        border: 1px solid var(--vox-color-border);
+        border-radius: var(--vox-radius-sm);
+        background-color: var(--vox-color-bg);
+        color: var(--vox-color-text-inverse);
+        transition:
+          background-color var(--vox-transition-fast),
+          border-color var(--vox-transition-fast);
+      }
+
+      .box svg {
+        width: 12px;
+        height: 12px;
+        opacity: 0;
+      }
+
+      input:checked + .box {
+        background-color: var(--vox-color-brand-3);
+        border-color: var(--vox-color-brand-3);
+      }
+
+      input:checked + .box svg {
+        opacity: 1;
+      }
+
+      input:focus-visible + .box {
+        outline: 2px solid var(--vox-color-brand-1);
+        outline-offset: 2px;
+      }
+    `
+];
+yt([
+  n({ type: Boolean, reflect: !0 })
+], ae.prototype, "checked", 2);
+yt([
+  n()
+], ae.prototype, "value", 2);
+ae = yt([
+  d("vox-checkbox")
+], ae);
+var Ho = Object.defineProperty, Io = Object.getOwnPropertyDescriptor, Y = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? Io(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (r ? i(e, o, t) : i(t)) || t);
+  return r && t && Ho(e, o, t), t;
+};
+let O = class extends b {
+  constructor() {
+    super(...arguments), this.multiple = !1, this.buttonLabel = "Choose a file", this.fileNames = [];
+  }
+  formResetCallback() {
+    this.fileNames = [], this.inputEl && (this.inputEl.value = ""), this.internals.setFormValue(null);
+  }
+  handleChange() {
+    const s = [...this.inputEl.files ?? []];
+    this.fileNames = s.map((o) => o.name);
+    const e = new FormData();
+    for (const o of s) e.append(this.name, o);
+    this.internals.setFormValue(s.length > 0 ? e : null), this.internals.setValidity(
+      this.required && s.length === 0 ? { valueMissing: !0 } : {},
+      "Please select a file.",
+      this.inputEl
+    ), this.dispatchEvent(new Event("change", { bubbles: !0 }));
+  }
+  render() {
+    return l`
+      <div class="field">
+        ${this.renderLabel("file")}
+        <label>
+          <input
+            id="file"
+            type="file"
+            accept=${I(this.accept)}
+            ?multiple=${this.multiple}
+            ?disabled=${this.disabled}
+            @change=${this.handleChange}
+          />
+          <span class="picker">
+            <span class="button">${this.buttonLabel}</span>
+            <span class="names">
+              ${this.fileNames.length > 0 ? this.fileNames.join(", ") : "No file selected"}
+            </span>
+          </span>
+        </label>
+        ${this.renderNote()}
+      </div>
+    `;
+  }
+};
+O.styles = [
+  Ce,
+  c`
+      input {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        opacity: 0;
+      }
+
+      .picker {
+        display: flex;
+        align-items: center;
+        gap: var(--vox-space-3);
+        flex-wrap: wrap;
+      }
+
+      .button {
+        display: inline-flex;
+        align-items: center;
+        padding: 0 var(--vox-space-4);
+        height: 34px;
+        background-color: var(--vox-color-bg-soft);
+        border: 1px dashed var(--vox-color-border);
+        border-radius: var(--vox-radius-md);
+        color: var(--vox-color-text-1);
+        font-size: 14px;
+        font-weight: 600;
+        cursor: pointer;
+        transition:
+          border-color var(--vox-transition-fast),
+          color var(--vox-transition-fast);
+      }
+
+      .button:hover {
+        border-color: var(--vox-color-brand-1);
+        color: var(--vox-color-brand-1);
+      }
+
+      input:focus-visible ~ .picker .button {
+        outline: 2px solid var(--vox-color-brand-1);
+        outline-offset: 2px;
+      }
+
+      .names {
+        font-size: 13px;
+        color: var(--vox-color-text-2);
+      }
+    `
+];
+Y([
+  n()
+], O.prototype, "accept", 2);
+Y([
+  n({ type: Boolean })
+], O.prototype, "multiple", 2);
+Y([
+  n({ attribute: "button-label" })
+], O.prototype, "buttonLabel", 2);
+Y([
+  Qt()
+], O.prototype, "fileNames", 2);
+Y([
+  bt("input")
+], O.prototype, "inputEl", 2);
+O = Y([
+  d("vox-file-input")
+], O);
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const Fo = (s) => s.strings === void 0, Ko = {}, Wo = (s, e = Ko) => s._$AH = e;
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const ro = eo(class extends to {
+  constructor(s) {
+    if (super(s), s.type !== S.PROPERTY && s.type !== S.ATTRIBUTE && s.type !== S.BOOLEAN_ATTRIBUTE) throw Error("The `live` directive is not allowed on child or event bindings");
+    if (!Fo(s)) throw Error("`live` bindings can only contain a single expression");
+  }
+  render(s) {
+    return s;
+  }
+  update(s, [e]) {
+    if (e === m || e === u) return e;
+    const o = s.element, r = s.name;
+    if (s.type === S.PROPERTY) {
+      if (e === o[r]) return m;
+    } else if (s.type === S.BOOLEAN_ATTRIBUTE) {
+      if (!!e === o.hasAttribute(r)) return m;
+    } else if (s.type === S.ATTRIBUTE && o.getAttribute(r) === e + "") return m;
+    return Wo(s), e;
+  }
+});
+var Go = Object.defineProperty, Xo = Object.getOwnPropertyDescriptor, Z = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? Xo(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (r ? i(e, o, t) : i(t)) || t);
+  return r && t && Go(e, o, t), t;
+};
+let A = class extends b {
+  constructor() {
+    super(...arguments), this.type = "text", this.value = "", this.readonly = !1;
+  }
+  formResetCallback() {
+    this.value = "";
+  }
+  updated() {
+    this.internals.setFormValue(this.value);
+    const s = this.renderRoot.querySelector("input");
+    s && this.syncValidity(s);
+  }
+  focus(s) {
+    var e;
+    (e = this.renderRoot.querySelector("input")) == null || e.focus(s);
+  }
+  handleInput(s) {
+    this.value = s.target.value;
+  }
+  handleChange() {
+    this.dispatchEvent(new Event("change", { bubbles: !0 }));
+  }
+  render() {
+    return l`
+      <div class="field">
+        ${this.renderLabel("input")}
+        <input
+          id="input"
+          class="control"
+          type=${this.type}
+          .value=${ro(this.value)}
+          placeholder=${I(this.placeholder)}
+          autocomplete=${I(this.autocomplete)}
+          ?required=${this.required}
+          ?readonly=${this.readonly}
+          ?disabled=${this.disabled}
+          aria-label=${this.label ? u : "text input"}
+          @input=${this.handleInput}
+          @change=${this.handleChange}
+        />
+        ${this.renderNote()}
+      </div>
+    `;
+  }
+};
+A.styles = Ce;
+Z([
+  n()
+], A.prototype, "type", 2);
+Z([
+  n()
+], A.prototype, "value", 2);
+Z([
+  n()
+], A.prototype, "placeholder", 2);
+Z([
+  n()
+], A.prototype, "autocomplete", 2);
+Z([
+  n({ type: Boolean, reflect: !0 })
+], A.prototype, "readonly", 2);
+A = Z([
+  d("vox-input")
+], A);
+var Yo = Object.getOwnPropertyDescriptor, Zo = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? Yo(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = i(t) || t);
+  return t;
+};
+let nt = class extends p {
+  handleSlotChange(s) {
+    const e = s.target.assignedElements();
+    e.forEach((o, r) => {
+      const t = r === 0 ? "start" : r === e.length - 1 ? "end" : "middle";
+      o.setAttribute("data-vox-group", t);
+    });
+  }
+  render() {
+    return l`
+      <div class="group" role="group">
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+  }
+};
+nt.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .group {
+      display: flex;
+      align-items: stretch;
+    }
+
+    ::slotted(*) {
+      flex: none;
+    }
+
+    ::slotted(vox-input),
+    ::slotted(vox-select) {
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+
+    ::slotted(span) {
+      display: inline-flex;
+      align-items: center;
+      padding: 0 var(--vox-space-3);
+      background-color: var(--vox-color-bg-soft);
+      border: 1px solid var(--vox-color-border);
+      color: var(--vox-color-text-2);
+      font-size: 14px;
+      white-space: nowrap;
+    }
+
+    ::slotted(span[data-vox-group='start']) {
+      border-radius: var(--vox-radius-md) 0 0 var(--vox-radius-md);
+      border-right: none;
+    }
+
+    ::slotted(span[data-vox-group='end']) {
+      border-radius: 0 var(--vox-radius-md) var(--vox-radius-md) 0;
+      border-left: none;
+    }
+  `;
+nt = Zo([
+  d("vox-input-group")
+], nt);
+var Jo = Object.defineProperty, Qo = Object.getOwnPropertyDescriptor, Je = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? Qo(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (r ? i(e, o, t) : i(t)) || t);
+  return r && t && Jo(e, o, t), t;
+};
+let K = class extends p {
+  constructor() {
+    super(...arguments), this.value = "", this.checked = !1, this.disabled = !1;
+  }
+  select() {
+    this.disabled || this.dispatchEvent(
+      new CustomEvent("vox-radio-select", { bubbles: !0, composed: !0 })
+    );
+  }
+  handleKeydown(s) {
+    (s.key === " " || s.key === "Enter") && (s.preventDefault(), this.select());
+  }
+  render() {
+    return l`
+      <span
+        class="radio"
+        role="radio"
+        aria-checked=${this.checked ? "true" : "false"}
+        aria-disabled=${this.disabled ? "true" : "false"}
+        tabindex=${this.checked ? "0" : "-1"}
+        @click=${this.select}
+        @keydown=${this.handleKeydown}
+      >
+        <span class="circle" aria-hidden="true"></span>
+        <span class="text"><slot></slot></span>
+      </span>
+    `;
+  }
+};
+K.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    :host([disabled]) {
+      opacity: 0.6;
+      pointer-events: none;
+    }
+
+    .radio {
+      display: inline-flex;
+      align-items: flex-start;
+      gap: var(--vox-space-2);
+      cursor: pointer;
+      font-size: 14px;
+      line-height: 1.5;
+      color: var(--vox-color-text-1);
+    }
+
+    .radio:focus {
+      outline: none;
+    }
+
+    .circle {
+      flex: none;
+      box-sizing: border-box;
+      width: 18px;
+      height: 18px;
+      margin-top: 2px;
+      border: 1px solid var(--vox-color-border);
+      border-radius: 50%;
+      background-color: var(--vox-color-bg);
+      transition:
+        border-color var(--vox-transition-fast),
+        box-shadow var(--vox-transition-fast);
+    }
+
+    :host([checked]) .circle {
+      border-color: var(--vox-color-brand-3);
+      border-width: 5px;
+    }
+
+    .radio:focus-visible .circle {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+    }
+  `;
+Je([
+  n()
+], K.prototype, "value", 2);
+Je([
+  n({ type: Boolean, reflect: !0 })
+], K.prototype, "checked", 2);
+Je([
+  n({ type: Boolean, reflect: !0 })
+], K.prototype, "disabled", 2);
+K = Je([
+  d("vox-radio")
+], K);
+var er = Object.defineProperty, tr = Object.getOwnPropertyDescriptor, so = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? tr(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (r ? i(e, o, t) : i(t)) || t);
+  return r && t && er(e, o, t), t;
+};
+let Ue = class extends b {
+  constructor() {
+    super(...arguments), this.value = "";
+  }
+  get radios() {
+    return [...this.querySelectorAll("vox-radio")];
+  }
+  formResetCallback() {
+    this.value = "";
+  }
+  updated() {
+    this.internals.setFormValue(this.value || null), this.internals.setValidity(
+      this.required && !this.value ? { valueMissing: !0 } : {},
+      "Please select an option.",
+      this
+    ), this.syncRadios();
+  }
+  syncRadios() {
+    const s = this.radios, e = s.some((o) => o.value === this.value && this.value !== "");
+    s.forEach((o, r) => {
+      var a, i;
+      o.checked = this.value !== "" && o.value === this.value;
+      const t = e ? o.checked : r === 0;
+      (i = (a = o.shadowRoot) == null ? void 0 : a.querySelector(".radio")) == null || i.setAttribute("tabindex", t ? "0" : "-1");
+    });
+  }
+  handleSelect(s) {
+    const e = s.target;
+    !(e instanceof HTMLElement) || e.tagName !== "VOX-RADIO" || (s.stopPropagation(), this.value !== e.value && (this.value = e.value, this.dispatchEvent(new Event("change", { bubbles: !0 }))));
+  }
+  handleKeydown(s) {
+    var v, h;
+    const o = {
+      ArrowDown: 1,
+      ArrowRight: 1,
+      ArrowUp: -1,
+      ArrowLeft: -1
+    }[s.key];
+    if (!o) return;
+    s.preventDefault();
+    const r = this.radios.filter((x) => !x.disabled);
+    if (r.length === 0) return;
+    const t = r.findIndex((x) => x.checked), a = (Math.max(t, 0) + o + r.length) % r.length, i = r[a];
+    i.select(), (h = (v = i.shadowRoot) == null ? void 0 : v.querySelector(".radio")) == null || h.focus();
+  }
+  render() {
+    return l`
+      <div class="field" role="radiogroup" aria-label=${this.label}>
+        ${this.label ? l`<span class="label">
+              ${this.label}${this.required ? l`<span class="required-mark" aria-hidden="true"> *</span>` : ""}
+            </span>` : ""}
+        <div
+          class="options"
+          @vox-radio-select=${this.handleSelect}
+          @keydown=${this.handleKeydown}
+        >
+          <slot @slotchange=${this.syncRadios}></slot>
+        </div>
+        ${this.renderNote()}
+      </div>
+    `;
+  }
+};
+Ue.styles = [
+  Ce,
+  c`
+      .options {
+        display: flex;
+        flex-direction: column;
+        gap: var(--vox-space-2);
+        margin-top: var(--vox-space-1);
+      }
+    `
+];
+so([
+  n()
+], Ue.prototype, "value", 2);
+Ue = so([
+  d("vox-radio-group")
+], Ue);
+var or = Object.defineProperty, rr = Object.getOwnPropertyDescriptor, $t = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? rr(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (r ? i(e, o, t) : i(t)) || t);
+  return r && t && or(e, o, t), t;
+};
+let ie = class extends b {
+  constructor() {
+    super(...arguments), this.value = "";
+  }
+  formResetCallback() {
+    this.value = "", this.syncOptions();
+  }
+  updated() {
+    this.internals.setFormValue(this.value), this.selectEl && this.syncValidity(this.selectEl);
+  }
+  syncOptions() {
+    if (!this.selectEl) return;
+    const s = this.renderRoot.querySelector("slot");
+    s && (this.selectEl.replaceChildren(
+      ...s.assignedElements().filter((e) => e instanceof HTMLOptionElement || e instanceof HTMLOptGroupElement).map((e) => e.cloneNode(!0))
+    ), this.value && (this.selectEl.value = this.value), this.value = this.selectEl.value);
+  }
+  handleChange() {
+    this.value = this.selectEl.value, this.dispatchEvent(new Event("change", { bubbles: !0 }));
+  }
+  render() {
+    return l`
+      <div class="field">
+        ${this.renderLabel("select")}
+        <select
+          id="select"
+          class="control"
+          ?required=${this.required}
+          ?disabled=${this.disabled}
+          @change=${this.handleChange}
+        ></select>
+        ${this.renderNote()}
+      </div>
+      <div hidden><slot @slotchange=${this.syncOptions}></slot></div>
+    `;
+  }
+};
+ie.styles = [
+  Ce,
+  c`
+      select.control {
+        appearance: none;
+        padding-right: var(--vox-space-8);
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+        background-repeat: no-repeat;
+        background-position: right var(--vox-space-3) center;
+        cursor: pointer;
+      }
+    `
+];
+$t([
+  n()
+], ie.prototype, "value", 2);
+$t([
+  bt("select")
+], ie.prototype, "selectEl", 2);
+ie = $t([
+  d("vox-select")
+], ie);
+var sr = Object.defineProperty, ar = Object.getOwnPropertyDescriptor, _t = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? ar(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (r ? i(e, o, t) : i(t)) || t);
+  return r && t && sr(e, o, t), t;
+};
+let ne = class extends b {
+  constructor() {
+    super(...arguments), this.checked = !1, this.value = "on";
+  }
+  formResetCallback() {
+    this.checked = !1;
+  }
+  updated() {
+    this.internals.setFormValue(this.checked ? this.value : null);
+  }
+  handleChange(s) {
+    this.checked = s.target.checked, this.dispatchEvent(new Event("change", { bubbles: !0 }));
+  }
+  render() {
+    return l`
+      <label class="check">
+        <input
+          type="checkbox"
+          role="switch"
+          .checked=${this.checked}
+          ?disabled=${this.disabled}
+          @change=${this.handleChange}
+        />
+        <span class="track" aria-hidden="true"></span>
+        <span class="text"><slot></slot></span>
+      </label>
+    `;
+  }
+};
+ne.styles = [
+  oo,
+  c`
+      .track {
+        flex: none;
+        position: relative;
+        width: 36px;
+        height: 20px;
+        margin-top: 1px;
+        border-radius: var(--vox-radius-full);
+        background-color: var(--vox-color-border);
+        transition: background-color var(--vox-transition-fast);
+      }
+
+      .track::after {
+        content: '';
+        position: absolute;
+        top: 2px;
+        left: 2px;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        background-color: var(--vox-color-bg);
+        transition: transform var(--vox-transition-fast);
+      }
+
+      input:checked + .track {
+        background-color: var(--vox-color-brand-3);
+      }
+
+      input:checked + .track::after {
+        transform: translateX(16px);
+      }
+
+      input:focus-visible + .track {
+        outline: 2px solid var(--vox-color-brand-1);
+        outline-offset: 2px;
+      }
+    `
+];
+_t([
+  n({ type: Boolean, reflect: !0 })
+], ne.prototype, "checked", 2);
+_t([
+  n()
+], ne.prototype, "value", 2);
+ne = _t([
+  d("vox-switch")
+], ne);
+var ir = Object.defineProperty, nr = Object.getOwnPropertyDescriptor, Ee = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? nr(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (r ? i(e, o, t) : i(t)) || t);
+  return r && t && ir(e, o, t), t;
+};
+let z = class extends b {
+  constructor() {
+    super(...arguments), this.value = "", this.rows = 4, this.readonly = !1;
+  }
+  formResetCallback() {
+    this.value = "";
+  }
+  updated() {
+    this.internals.setFormValue(this.value);
+    const s = this.renderRoot.querySelector("textarea");
+    s && this.syncValidity(s);
+  }
+  focus(s) {
+    var e;
+    (e = this.renderRoot.querySelector("textarea")) == null || e.focus(s);
+  }
+  handleInput(s) {
+    this.value = s.target.value;
+  }
+  handleChange() {
+    this.dispatchEvent(new Event("change", { bubbles: !0 }));
+  }
+  render() {
+    return l`
+      <div class="field">
+        ${this.renderLabel("textarea")}
+        <textarea
+          id="textarea"
+          class="control"
+          rows=${this.rows}
+          .value=${ro(this.value)}
+          placeholder=${I(this.placeholder)}
+          ?required=${this.required}
+          ?readonly=${this.readonly}
+          ?disabled=${this.disabled}
+          @input=${this.handleInput}
+          @change=${this.handleChange}
+        ></textarea>
+        ${this.renderNote()}
+      </div>
+    `;
+  }
+};
+z.styles = [
+  Ce,
+  c`
+      textarea.control {
+        resize: vertical;
+        min-height: 4em;
+      }
+    `
+];
+Ee([
+  n()
+], z.prototype, "value", 2);
+Ee([
+  n()
+], z.prototype, "placeholder", 2);
+Ee([
+  n({ type: Number })
+], z.prototype, "rows", 2);
+Ee([
+  n({ type: Boolean, reflect: !0 })
+], z.prototype, "readonly", 2);
+z = Ee([
+  d("vox-textarea")
+], z);
+var lr = Object.defineProperty, cr = Object.getOwnPropertyDescriptor, Se = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? cr(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (r ? i(e, o, t) : i(t)) || t);
+  return r && t && lr(e, o, t), t;
+};
+let T = class extends p {
+  constructor() {
+    super(...arguments), this.alt = "", this.initials = "", this.size = "md";
+  }
+  render() {
+    return l`
+      <span class="avatar" role=${this.src ? "presentation" : "img"} aria-label=${this.alt}>
+        ${this.src ? l`<img src=${this.src} alt=${this.alt} />` : this.initials}
+      </span>
+    `;
+  }
+};
+T.styles = c`
+    :host {
+      display: inline-block;
+    }
+
+    .avatar {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      border-radius: 50%;
+      background-color: var(--vox-color-brand-soft);
+      color: var(--vox-color-brand-1);
+      font-family: var(--vox-font-family-base);
+      font-weight: 600;
+      user-select: none;
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    :host([size='sm']) .avatar {
+      width: 28px;
+      height: 28px;
+      font-size: 11px;
+    }
+
+    :host([size='md']) .avatar {
+      width: 40px;
+      height: 40px;
+      font-size: 14px;
+    }
+
+    :host([size='lg']) .avatar {
+      width: 56px;
+      height: 56px;
+      font-size: 20px;
+    }
+
+    :host([size='xl']) .avatar {
+      width: 80px;
+      height: 80px;
+      font-size: 28px;
+    }
+  `;
+Se([
+  n()
+], T.prototype, "src", 2);
+Se([
+  n()
+], T.prototype, "alt", 2);
+Se([
+  n()
+], T.prototype, "initials", 2);
+Se([
+  n({ reflect: !0 })
+], T.prototype, "size", 2);
+T = Se([
+  d("vox-avatar")
+], T);
+var dr = Object.defineProperty, pr = Object.getOwnPropertyDescriptor, wt = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? pr(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (r ? i(e, o, t) : i(t)) || t);
+  return r && t && dr(e, o, t), t;
+};
+let le = class extends p {
+  constructor() {
+    super(...arguments), this.heading = "", this.reverse = !1, this.hasActions = !1;
+  }
+  handleActionsSlotChange(s) {
+    const e = s.target;
+    this.hasActions = e.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  }
+  render() {
+    return l`
+      <div class="billboard">
+        <div class="media"><slot name="media"></slot></div>
+        <div class="content">
+          <h2 class="heading">${this.heading}</h2>
+          <div class="body"><slot></slot></div>
+          <div class="actions ${this.hasActions ? "has-content" : ""}">
+            <slot name="actions" @slotchange=${this.handleActionsSlotChange}></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+le.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .billboard {
+      display: flex;
+      gap: var(--vox-space-8);
+      align-items: center;
+      flex-wrap: wrap;
+      padding: var(--vox-space-8);
+      background-color: var(--vox-color-bg-soft);
+      border-radius: var(--vox-radius-lg);
+    }
+
+    :host([reverse]) .billboard {
+      flex-direction: row-reverse;
+    }
+
+    .media {
+      flex: 1 1 280px;
+      min-width: 0;
+    }
+
+    .media ::slotted(img) {
+      display: block;
+      max-width: 100%;
+      border-radius: var(--vox-radius-md);
+    }
+
+    .content {
+      flex: 1 1 320px;
+      min-width: 0;
+    }
+
+    .heading {
+      margin: 0 0 var(--vox-space-3);
+      font-family: var(--vox-font-family-display);
+      font-size: 28px;
+      font-weight: 600;
+      line-height: 1.3;
+      color: var(--vox-color-text-1);
+    }
+
+    .body {
+      font-size: 16px;
+      line-height: 1.7;
+      color: var(--vox-color-text-2);
+    }
+
+    .actions {
+      display: flex;
+      gap: var(--vox-space-3);
+      flex-wrap: wrap;
+      margin-top: var(--vox-space-6);
+    }
+
+    .actions:not(.has-content) {
+      display: none;
+    }
+  `;
+wt([
+  n()
+], le.prototype, "heading", 2);
+wt([
+  n({ type: Boolean, reflect: !0 })
+], le.prototype, "reverse", 2);
+le = wt([
+  d("vox-billboard")
+], le);
+var hr = Object.getOwnPropertyDescriptor, vr = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? hr(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = i(t) || t);
+  return t;
+};
+let lt = class extends p {
+  render() {
+    return l`
+      <nav aria-label="Breadcrumbs">
+        <slot></slot>
+      </nav>
+    `;
+  }
+};
+lt.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    nav {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      font-size: 13px;
+    }
+
+    ::slotted(*) {
+      color: var(--vox-color-text-2);
+      text-decoration: none;
+    }
+
+    ::slotted(a:hover) {
+      color: var(--vox-color-brand-1);
+      text-decoration: underline;
+    }
+
+    ::slotted([aria-current='page']) {
+      color: var(--vox-color-text-1);
+      font-weight: 600;
+    }
+
+    ::slotted(*:not(:first-child))::before {
+      content: '/';
+      margin: 0 var(--vox-space-2);
+      color: var(--vox-color-text-3);
+    }
+  `;
+lt = vr([
+  d("vox-breadcrumbs")
+], lt);
+var ur = Object.defineProperty, xr = Object.getOwnPropertyDescriptor, Pt = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? xr(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (r ? i(e, o, t) : i(t)) || t);
+  return r && t && ur(e, o, t), t;
+};
+let ce = class extends p {
+  constructor() {
+    super(...arguments), this.siteTitle = "", this.href = "/";
+  }
+  render() {
+    return l`
+      <header class="header">
+        <a class="brand" href=${this.href}>
+          <slot name="logo"></slot>
+          ${this.siteTitle ? l`<span>${this.siteTitle}</span>` : u}
+        </a>
+        <nav aria-label="Main">
+          <slot></slot>
+        </nav>
+        <div class="actions">
+          <slot name="actions"></slot>
+        </div>
+      </header>
+    `;
+  }
+};
+ce.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+      background-color: var(--vox-color-bg);
+      border-bottom: 1px solid var(--vox-color-divider);
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      gap: var(--vox-space-6);
+      flex-wrap: wrap;
+      max-width: 1280px;
+      margin: 0 auto;
+      padding: var(--vox-space-3) var(--vox-space-6);
+    }
+
+    .brand {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--vox-space-2);
+      color: var(--vox-color-text-1);
+      font-size: 16px;
+      font-weight: 700;
+      text-decoration: none;
+    }
+
+    .brand ::slotted(img),
+    .brand ::slotted(svg) {
+      height: 28px;
+      width: auto;
+    }
+
+    nav {
+      display: flex;
+      align-items: center;
+      gap: var(--vox-space-4);
+      flex-wrap: wrap;
+      flex: 1 1 auto;
+    }
+
+    nav ::slotted(a) {
+      color: var(--vox-color-text-2);
+      font-size: 14px;
+      font-weight: 500;
+      text-decoration: none;
+      transition: color var(--vox-transition-fast);
+    }
+
+    nav ::slotted(a:hover) {
+      color: var(--vox-color-brand-1);
+    }
+
+    nav ::slotted(a[aria-current='page']) {
+      color: var(--vox-color-brand-1);
+      font-weight: 600;
+    }
+
+    .actions {
+      display: flex;
+      align-items: center;
+      gap: var(--vox-space-3);
+    }
+  `;
+Pt([
+  n({ attribute: "site-title" })
+], ce.prototype, "siteTitle", 2);
+Pt([
+  n()
+], ce.prototype, "href", 2);
+ce = Pt([
+  d("vox-header")
+], ce);
+var fr = Object.defineProperty, gr = Object.getOwnPropertyDescriptor, je = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? gr(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (r ? i(e, o, t) : i(t)) || t);
+  return r && t && fr(e, o, t), t;
+};
+let B = class extends p {
+  constructor() {
+    super(...arguments), this.previousLabel = "", this.nextLabel = "";
+  }
+  render() {
+    return l`
+      <nav aria-label="Series">
+        ${this.previousHref ? l`
+              <a href=${this.previousHref} rel="prev">
+                <span class="direction">← Previous</span>
+                <span class="title">${this.previousLabel}</span>
+              </a>
+            ` : u}
+        ${this.nextHref ? l`
+              <a class="next" href=${this.nextHref} rel="next">
+                <span class="direction">Next →</span>
+                <span class="title">${this.nextLabel}</span>
+              </a>
+            ` : u}
+      </nav>
+    `;
+  }
+};
+B.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    nav {
+      display: flex;
+      justify-content: space-between;
+      gap: var(--vox-space-4);
+    }
+
+    a {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      flex: 0 1 48%;
+      padding: var(--vox-space-3) var(--vox-space-4);
+      border: 1px solid var(--vox-color-divider);
+      border-radius: var(--vox-radius-md);
+      text-decoration: none;
+      transition: border-color var(--vox-transition-base);
+    }
+
+    a:hover,
+    a:focus-visible {
+      border-color: var(--vox-color-brand-1);
+    }
+
+    a:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+    }
+
+    .next {
+      margin-left: auto;
+      text-align: right;
+    }
+
+    .direction {
+      font-size: 12px;
+      color: var(--vox-color-text-3);
+    }
+
+    .title {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--vox-color-brand-1);
+    }
+  `;
+je([
+  n({ attribute: "previous-href" })
+], B.prototype, "previousHref", 2);
+je([
+  n({ attribute: "previous-label" })
+], B.prototype, "previousLabel", 2);
+je([
+  n({ attribute: "next-href" })
+], B.prototype, "nextHref", 2);
+je([
+  n({ attribute: "next-label" })
+], B.prototype, "nextLabel", 2);
+B = je([
+  d("vox-series-nav")
+], B);
+var br = Object.defineProperty, mr = Object.getOwnPropertyDescriptor, C = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? mr(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (r ? i(e, o, t) : i(t)) || t);
+  return r && t && br(e, o, t), t;
+};
+let Le = class extends p {
+  constructor() {
+    super(...arguments), this.label = "Section";
+  }
+  render() {
+    return l`
+      <nav aria-label=${this.label}>
+        <slot></slot>
+      </nav>
+    `;
+  }
+};
+Le.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    nav {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+  `;
+C([
+  n()
+], Le.prototype, "label", 2);
+Le = C([
+  d("vox-sidenav")
+], Le);
+let de = class extends p {
+  constructor() {
+    super(...arguments), this.heading = "", this.open = !1;
+  }
+  toggle() {
+    this.open = !this.open;
+  }
+  render() {
+    return l`
+      <button
+        class="trigger"
+        aria-expanded=${this.open ? "true" : "false"}
+        @click=${this.toggle}
+      >
+        ${this.heading}
+        <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="m9 6 6 6-6 6" />
+        </svg>
+      </button>
+      <div class="items"><slot></slot></div>
+    `;
+  }
+};
+de.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .trigger {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--vox-space-2);
+      width: 100%;
+      padding: var(--vox-space-2) var(--vox-space-3);
+      background: none;
+      border: none;
+      border-radius: var(--vox-radius-sm);
+      color: var(--vox-color-text-1);
+      font-family: inherit;
+      font-size: 14px;
+      font-weight: 600;
+      text-align: left;
+      cursor: pointer;
+    }
+
+    .trigger:hover {
+      color: var(--vox-color-brand-1);
+    }
+
+    .trigger:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: -2px;
+    }
+
+    .chevron {
+      flex: none;
+      width: 14px;
+      height: 14px;
+      transition: transform var(--vox-transition-fast);
+    }
+
+    :host([open]) .chevron {
+      transform: rotate(90deg);
+    }
+
+    .items {
+      display: none;
+      flex-direction: column;
+      gap: 2px;
+      padding-left: var(--vox-space-3);
+      border-left: 1px solid var(--vox-color-divider);
+      margin-left: var(--vox-space-3);
+    }
+
+    :host([open]) .items {
+      display: flex;
+    }
+  `;
+C([
+  n()
+], de.prototype, "heading", 2);
+C([
+  n({ type: Boolean, reflect: !0 })
+], de.prototype, "open", 2);
+de = C([
+  d("vox-sidenav-group")
+], de);
+let pe = class extends p {
+  constructor() {
+    super(...arguments), this.href = "#", this.current = !1;
+  }
+  render() {
+    return l`
+      <a href=${this.href} aria-current=${this.current ? "page" : "false"}>
+        <slot></slot>
+      </a>
+    `;
+  }
+};
+pe.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    a {
+      display: block;
+      padding: var(--vox-space-2) var(--vox-space-3);
+      border-radius: var(--vox-radius-sm);
+      color: var(--vox-color-text-2);
+      font-size: 14px;
+      text-decoration: none;
+      transition:
+        color var(--vox-transition-fast),
+        background-color var(--vox-transition-fast);
+    }
+
+    a:hover {
+      color: var(--vox-color-text-1);
+    }
+
+    a:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: -2px;
+    }
+
+    :host([current]) a {
+      background-color: var(--vox-color-brand-soft);
+      color: var(--vox-color-brand-1);
+      font-weight: 600;
+    }
+  `;
+C([
+  n()
+], pe.prototype, "href", 2);
+C([
+  n({ type: Boolean, reflect: !0 })
+], pe.prototype, "current", 2);
+pe = C([
+  d("vox-sidenav-item")
+], pe);
+var yr = Object.defineProperty, $r = Object.getOwnPropertyDescriptor, ao = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? $r(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (r ? i(e, o, t) : i(t)) || t);
+  return r && t && yr(e, o, t), t;
+};
+let qe = class extends p {
+  constructor() {
+    super(...arguments), this.label = "Secondary";
+  }
+  render() {
+    return l`
+      <nav aria-label=${this.label}>
+        <slot></slot>
+      </nav>
+    `;
+  }
+};
+qe.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    nav {
+      display: flex;
+      gap: var(--vox-space-1);
+      overflow-x: auto;
+      border-bottom: 1px solid var(--vox-color-divider);
+    }
+
+    ::slotted(a) {
+      padding: var(--vox-space-2) var(--vox-space-4);
+      margin-bottom: -1px;
+      border-bottom: 2px solid transparent;
+      color: var(--vox-color-text-2);
+      font-size: 14px;
+      font-weight: 500;
+      text-decoration: none;
+      white-space: nowrap;
+      transition: color var(--vox-transition-fast);
+    }
+
+    ::slotted(a:hover) {
+      color: var(--vox-color-text-1);
+    }
+
+    ::slotted(a[aria-current='page']) {
+      color: var(--vox-color-brand-1);
+      font-weight: 600;
+      border-bottom-color: var(--vox-color-brand-1);
+    }
+  `;
+ao([
+  n()
+], qe.prototype, "label", 2);
+qe = ao([
+  d("vox-subnav")
+], qe);
+var _r = Object.defineProperty, wr = Object.getOwnPropertyDescriptor, U = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? wr(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (r ? i(e, o, t) : i(t)) || t);
+  return r && t && _r(e, o, t), t;
+};
+let ct = class extends p {
+  get tabs() {
+    return [...this.querySelectorAll("vox-tab")];
+  }
+  get panels() {
+    return [...this.querySelectorAll("vox-tab-panel")];
+  }
+  sync() {
+    const s = this.tabs;
+    s.length > 0 && !s.some((o) => o.selected) && (s[0].selected = !0);
+    const e = s.find((o) => o.selected);
+    this.panels.forEach((o) => {
+      o.active = o.name === (e == null ? void 0 : e.panel);
+    });
+  }
+  handleSelect(s) {
+    const e = s.target;
+    e.tagName === "VOX-TAB" && (this.tabs.forEach((o) => o.selected = o === e), this.sync(), this.dispatchEvent(
+      new CustomEvent("vox-tab-change", {
+        detail: { panel: e.panel },
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  handleKeydown(s) {
+    const o = { ArrowRight: 1, ArrowLeft: -1 }[s.key];
+    if (!o) return;
+    s.preventDefault();
+    const r = this.tabs, t = r.findIndex((i) => i.selected), a = r[(t + o + r.length) % r.length];
+    a.select(), a.focusTab();
+  }
+  render() {
+    return l`
+      <div
+        class="tablist"
+        role="tablist"
+        @vox-tab-select=${this.handleSelect}
+        @keydown=${this.handleKeydown}
+      >
+        <slot name="tab" @slotchange=${this.sync}></slot>
+      </div>
+      <slot @slotchange=${this.sync}></slot>
+    `;
+  }
+};
+ct.styles = c`
+    :host {
+      display: block;
+    }
+
+    .tablist {
+      display: flex;
+      gap: var(--vox-space-1);
+      border-bottom: 1px solid var(--vox-color-divider);
+    }
+  `;
+ct = U([
+  d("vox-tabs")
+], ct);
+let he = class extends p {
+  constructor() {
+    super(...arguments), this.panel = "", this.selected = !1;
+  }
+  select() {
+    this.dispatchEvent(
+      new CustomEvent("vox-tab-select", { bubbles: !0, composed: !0 })
+    );
+  }
+  focusTab() {
+    var s;
+    (s = this.renderRoot.querySelector(".tab")) == null || s.focus();
+  }
+  render() {
+    return l`
+      <button
+        class="tab"
+        role="tab"
+        aria-selected=${this.selected ? "true" : "false"}
+        tabindex=${this.selected ? "0" : "-1"}
+        @click=${this.select}
+      >
+        <slot></slot>
+      </button>
+    `;
+  }
+};
+he.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .tab {
+      padding: var(--vox-space-2) var(--vox-space-4);
+      margin-bottom: -1px;
+      background: none;
+      border: none;
+      border-bottom: 2px solid transparent;
+      color: var(--vox-color-text-2);
+      font-family: inherit;
+      font-size: 14px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: color var(--vox-transition-fast);
+    }
+
+    .tab:hover {
+      color: var(--vox-color-text-1);
+    }
+
+    .tab:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: -2px;
+      border-radius: var(--vox-radius-sm);
+    }
+
+    :host([selected]) .tab {
+      color: var(--vox-color-brand-1);
+      border-bottom-color: var(--vox-color-brand-1);
+    }
+  `;
+U([
+  n()
+], he.prototype, "panel", 2);
+U([
+  n({ type: Boolean, reflect: !0 })
+], he.prototype, "selected", 2);
+he = U([
+  d("vox-tab")
+], he);
+let ve = class extends p {
+  constructor() {
+    super(...arguments), this.name = "", this.active = !1;
+  }
+  render() {
+    return l`<div role="tabpanel"><slot></slot></div>`;
+  }
+};
+ve.styles = c`
+    :host {
+      display: none;
+      font-family: var(--vox-font-family-base);
+      font-size: 14px;
+      line-height: 1.7;
+      color: var(--vox-color-text-2);
+      padding: var(--vox-space-4) 0;
+    }
+
+    :host([active]) {
+      display: block;
+    }
+  `;
+U([
+  n()
+], ve.prototype, "name", 2);
+U([
+  n({ type: Boolean, reflect: !0 })
+], ve.prototype, "active", 2);
+ve = U([
+  d("vox-tab-panel")
+], ve);
+var Pr = Object.defineProperty, Or = Object.getOwnPropertyDescriptor, ke = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? Or(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (r ? i(e, o, t) : i(t)) || t);
+  return r && t && Pr(e, o, t), t;
+};
+let V = class extends p {
+  constructor() {
+    super(...arguments), this.heading = "", this.open = !1, this.lightDismiss = !1, this.hasFooter = !1;
+  }
+  show() {
+    this.open = !0;
+  }
+  close() {
+    this.open = !1;
+  }
+  updated() {
+    this.open && !this.dialogEl.open ? this.dialogEl.showModal() : !this.open && this.dialogEl.open && this.dialogEl.close();
+  }
+  handleNativeClose() {
+    this.open = !1, this.dispatchEvent(
+      new CustomEvent("vox-close", { bubbles: !0, composed: !0 })
+    );
+  }
+  handleClick(s) {
+    this.lightDismiss && s.target === this.dialogEl && this.close();
+  }
+  handleFooterSlotChange(s) {
+    const e = s.target;
+    this.hasFooter = e.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  }
+  render() {
+    return l`
+      <dialog
+        aria-label=${this.heading || u}
+        @close=${this.handleNativeClose}
+        @click=${this.handleClick}
+      >
+        <div class="header">
+          <h2 class="heading">${this.heading}</h2>
+          <button class="close" aria-label="Close dialog" @click=${this.close}>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true">
+              <path d="M18 6 6 18M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+        <div class="body"><slot></slot></div>
+        <div class="footer ${this.hasFooter ? "has-content" : ""}">
+          <slot name="footer" @slotchange=${this.handleFooterSlotChange}></slot>
+        </div>
+      </dialog>
+    `;
+  }
+};
+V.styles = c`
+    dialog {
+      box-sizing: border-box;
+      width: min(90vw, 480px);
+      padding: 0;
+      border: 1px solid var(--vox-color-divider);
+      border-radius: var(--vox-radius-lg);
+      background-color: var(--vox-color-bg-elv);
+      color: var(--vox-color-text-1);
+      font-family: var(--vox-font-family-base);
+      box-shadow: var(--vox-shadow-2);
+    }
+
+    dialog::backdrop {
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--vox-space-3);
+      padding: var(--vox-space-4) var(--vox-space-6);
+      border-bottom: 1px solid var(--vox-color-divider);
+    }
+
+    .heading {
+      margin: 0;
+      font-size: 16px;
+      font-weight: 600;
+    }
+
+    .close {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 28px;
+      height: 28px;
+      padding: 0;
+      background: none;
+      border: none;
+      border-radius: var(--vox-radius-sm);
+      color: var(--vox-color-text-2);
+      cursor: pointer;
+    }
+
+    .close:hover {
+      color: var(--vox-color-text-1);
+      background-color: var(--vox-color-bg-soft);
+    }
+
+    .close:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+    }
+
+    .close svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    .body {
+      padding: var(--vox-space-6);
+      font-size: 14px;
+      line-height: 1.7;
+      color: var(--vox-color-text-2);
+    }
+
+    .footer {
+      display: flex;
+      justify-content: flex-end;
+      gap: var(--vox-space-3);
+      padding: var(--vox-space-4) var(--vox-space-6);
+      border-top: 1px solid var(--vox-color-divider);
+    }
+
+    .footer:not(.has-content) {
+      display: none;
+    }
+
+    ::slotted(p:first-child) {
+      margin-top: 0;
+    }
+
+    ::slotted(p:last-child) {
+      margin-bottom: 0;
+    }
+  `;
+ke([
+  n()
+], V.prototype, "heading", 2);
+ke([
+  n({ type: Boolean })
+], V.prototype, "open", 2);
+ke([
+  n({ type: Boolean, attribute: "light-dismiss" })
+], V.prototype, "lightDismiss", 2);
+ke([
+  bt("dialog")
+], V.prototype, "dialogEl", 2);
+V = ke([
+  d("vox-dialog")
+], V);
+var Ar = Object.defineProperty, Cr = Object.getOwnPropertyDescriptor, Ot = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? Cr(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (r ? i(e, o, t) : i(t)) || t);
+  return r && t && Ar(e, o, t), t;
+};
+let ue = class extends p {
+  constructor() {
+    super(...arguments), this.summary = "Show details", this.open = !1;
+  }
+  toggle() {
+    this.open = !this.open, this.dispatchEvent(
+      new CustomEvent("vox-toggle", { bubbles: !0, composed: !0 })
+    );
+  }
+  render() {
+    return l`
+      <button
+        class="trigger"
+        aria-expanded=${this.open ? "true" : "false"}
+        @click=${this.toggle}
+      >
+        <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="m9 6 6 6-6 6" />
+        </svg>
+        ${this.summary}
+      </button>
+      <div class="panel" ?hidden=${!this.open}>
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+ue.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .trigger {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--vox-space-2);
+      padding: 0;
+      background: none;
+      border: none;
+      color: var(--vox-color-brand-1);
+      font-family: inherit;
+      font-size: 14px;
+      font-weight: 600;
+      cursor: pointer;
+    }
+
+    .trigger:hover {
+      color: var(--vox-color-brand-2);
+      text-decoration: underline;
+    }
+
+    .trigger:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+      border-radius: var(--vox-radius-sm);
+    }
+
+    .chevron {
+      width: 14px;
+      height: 14px;
+      transition: transform var(--vox-transition-fast);
+    }
+
+    :host([open]) .chevron {
+      transform: rotate(90deg);
+    }
+
+    .panel {
+      margin-top: var(--vox-space-3);
+      font-size: 14px;
+      line-height: 1.7;
+      color: var(--vox-color-text-2);
+    }
+
+    .panel[hidden] {
+      display: none;
+    }
+  `;
+Ot([
+  n()
+], ue.prototype, "summary", 2);
+Ot([
+  n({ type: Boolean, reflect: !0 })
+], ue.prototype, "open", 2);
+ue = Ot([
+  d("vox-disclosure")
+], ue);
+var Er = Object.defineProperty, Sr = Object.getOwnPropertyDescriptor, At = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? Sr(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (r ? i(e, o, t) : i(t)) || t);
+  return r && t && Er(e, o, t), t;
+};
+let xe = class extends p {
+  constructor() {
+    super(...arguments), this.label = "Menu", this.open = !1, this.handleOutsideClick = (s) => {
+      this.open && !s.composedPath().includes(this) && (this.open = !1);
+    }, this.handleKeydown = (s) => {
+      var e;
+      if (s.key === "Escape" && this.open) {
+        this.open = !1, (e = this.renderRoot.querySelector(".trigger")) == null || e.focus();
+        return;
+      }
+      if ((s.key === "ArrowDown" || s.key === "ArrowUp") && this.open) {
+        s.preventDefault();
+        const o = [...this.querySelectorAll("a, button")];
+        if (o.length === 0) return;
+        const r = document.activeElement, t = o.indexOf(r), a = s.key === "ArrowDown" ? 1 : -1;
+        o[(Math.max(t, 0) + a + o.length) % o.length].focus();
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this.handleOutsideClick), this.addEventListener("keydown", this.handleKeydown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this.handleOutsideClick), this.removeEventListener("keydown", this.handleKeydown);
+  }
+  toggle() {
+    this.open = !this.open;
+  }
+  render() {
+    return l`
+      <button
+        class="trigger"
+        aria-expanded=${this.open ? "true" : "false"}
+        aria-haspopup="true"
+        @click=${this.toggle}
+      >
+        ${this.label}
+        <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="m6 9 6 6 6-6" />
+        </svg>
+      </button>
+      <div class="menu">
+        <slot @click=${() => this.open = !1}></slot>
+      </div>
+    `;
+  }
+};
+xe.styles = c`
+    :host {
+      position: relative;
+      display: inline-block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .trigger {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--vox-space-2);
+      padding: 0 var(--vox-space-4);
+      height: 38px;
+      background-color: var(--vox-color-bg-soft);
+      border: 1px solid var(--vox-color-divider);
+      border-radius: var(--vox-radius-md);
+      color: var(--vox-color-text-1);
+      font-family: inherit;
+      font-size: 14px;
+      font-weight: 600;
+      cursor: pointer;
+      transition:
+        border-color var(--vox-transition-fast),
+        color var(--vox-transition-fast);
+    }
+
+    .trigger:hover {
+      border-color: var(--vox-color-brand-1);
+      color: var(--vox-color-brand-1);
+    }
+
+    .trigger:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+    }
+
+    .chevron {
+      width: 14px;
+      height: 14px;
+      transition: transform var(--vox-transition-fast);
+    }
+
+    :host([open]) .chevron {
+      transform: rotate(180deg);
+    }
+
+    .menu {
+      position: absolute;
+      top: calc(100% + 4px);
+      left: 0;
+      z-index: 10;
+      min-width: max(100%, 180px);
+      display: none;
+      flex-direction: column;
+      padding: var(--vox-space-2);
+      background-color: var(--vox-color-bg-elv);
+      border: 1px solid var(--vox-color-divider);
+      border-radius: var(--vox-radius-md);
+      box-shadow: var(--vox-shadow-2);
+    }
+
+    :host([open]) .menu {
+      display: flex;
+    }
+
+    ::slotted(a),
+    ::slotted(button) {
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+      padding: var(--vox-space-2) var(--vox-space-3);
+      background: none;
+      border: none;
+      border-radius: var(--vox-radius-sm);
+      color: var(--vox-color-text-1);
+      font-family: inherit;
+      font-size: 14px;
+      text-align: left;
+      text-decoration: none;
+      cursor: pointer;
+      white-space: nowrap;
+    }
+
+    ::slotted(a:hover),
+    ::slotted(button:hover),
+    ::slotted(a:focus-visible),
+    ::slotted(button:focus-visible) {
+      background-color: var(--vox-color-brand-soft);
+      color: var(--vox-color-brand-1);
+      outline: none;
+    }
+
+    ::slotted(hr) {
+      width: 100%;
+      margin: var(--vox-space-1) 0;
+      border: none;
+      border-top: 1px solid var(--vox-color-divider);
+    }
+  `;
+At([
+  n()
+], xe.prototype, "label", 2);
+At([
+  n({ type: Boolean, reflect: !0 })
+], xe.prototype, "open", 2);
+xe = At([
+  d("vox-dropdown")
+], xe);
+var jr = Object.defineProperty, kr = Object.getOwnPropertyDescriptor, De = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? kr(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (r ? i(e, o, t) : i(t)) || t);
+  return r && t && jr(e, o, t), t;
+};
+let He = class extends p {
+  constructor() {
+    super(...arguments), this.single = !1;
+  }
+  handleToggle(s) {
+    if (!this.single) return;
+    const e = s.target;
+    e.open && this.querySelectorAll("vox-accordion-item").forEach(
+      (o) => {
+        o !== e && (o.open = !1);
+      }
+    );
+  }
+  render() {
+    return l`<slot @vox-toggle=${this.handleToggle}></slot>`;
+  }
+};
+He.styles = c`
+    :host {
+      display: block;
+      border: 1px solid var(--vox-color-divider);
+      border-radius: var(--vox-radius-md);
+      overflow: hidden;
+    }
+
+    ::slotted(vox-accordion-item:not(:first-child)) {
+      border-top: 1px solid var(--vox-color-divider);
+    }
+  `;
+De([
+  n({ type: Boolean })
+], He.prototype, "single", 2);
+He = De([
+  d("vox-accordion")
+], He);
+let fe = class extends p {
+  constructor() {
+    super(...arguments), this.heading = "", this.open = !1;
+  }
+  toggle() {
+    this.open = !this.open, this.dispatchEvent(
+      new CustomEvent("vox-toggle", { bubbles: !0, composed: !0 })
+    );
+  }
+  render() {
+    return l`
+      <h3 style="margin:0">
+        <button
+          class="trigger"
+          aria-expanded=${this.open ? "true" : "false"}
+          @click=${this.toggle}
+        >
+          ${this.heading}
+          <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="m6 9 6 6 6-6" />
+          </svg>
+        </button>
+      </h3>
+      <div class="panel" ?hidden=${!this.open}>
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+fe.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .trigger {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--vox-space-3);
+      width: 100%;
+      padding: var(--vox-space-4);
+      background: none;
+      border: none;
+      color: var(--vox-color-text-1);
+      font-family: inherit;
+      font-size: 15px;
+      font-weight: 600;
+      text-align: left;
+      cursor: pointer;
+    }
+
+    .trigger:hover {
+      color: var(--vox-color-brand-1);
+    }
+
+    .trigger:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: -2px;
+    }
+
+    .chevron {
+      flex: none;
+      width: 16px;
+      height: 16px;
+      transition: transform var(--vox-transition-fast);
+    }
+
+    :host([open]) .chevron {
+      transform: rotate(180deg);
+    }
+
+    .panel {
+      padding: 0 var(--vox-space-4) var(--vox-space-4);
+      font-size: 14px;
+      line-height: 1.7;
+      color: var(--vox-color-text-2);
+    }
+
+    .panel[hidden] {
+      display: none;
+    }
+
+    ::slotted(p:first-child) {
+      margin-top: 0;
+    }
+
+    ::slotted(p:last-child) {
+      margin-bottom: 0;
+    }
+  `;
+De([
+  n()
+], fe.prototype, "heading", 2);
+De([
+  n({ type: Boolean, reflect: !0 })
+], fe.prototype, "open", 2);
+fe = De([
+  d("vox-accordion-item")
+], fe);
+var Dr = Object.defineProperty, zr = Object.getOwnPropertyDescriptor, ze = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? zr(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (r ? i(e, o, t) : i(t)) || t);
+  return r && t && Dr(e, o, t), t;
+};
+let N = class extends p {
+  constructor() {
+    super(...arguments), this.variant = "info", this.heading = "", this.dismissible = !1, this.open = !0;
+  }
+  dismiss() {
+    this.open = !1, this.dispatchEvent(
+      new CustomEvent("vox-dismiss", { bubbles: !0, composed: !0 })
+    );
+  }
+  render() {
+    return l`
+      <div class="alert ${this.variant}" role="alert">
+        <div class="body">
+          ${this.heading ? l`<p class="heading">${this.heading}</p>` : u}
+          <slot></slot>
+        </div>
+        ${this.dismissible ? l`
+              <button class="close" aria-label="Dismiss" @click=${this.dismiss}>
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true">
+                  <path d="M18 6 6 18M6 6l12 12" />
+                </svg>
+              </button>
+            ` : u}
+      </div>
+    `;
+  }
+};
+N.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    :host(:not([open])) {
+      display: none;
+    }
+
+    .alert {
+      display: flex;
+      gap: var(--vox-space-3);
+      align-items: flex-start;
+      padding: var(--vox-space-4);
+      border-radius: var(--vox-radius-md);
+      border-left: 4px solid;
+      font-size: 14px;
+      line-height: 1.6;
+      color: var(--vox-color-text-1);
+    }
+
+    .body {
+      flex: 1 1 auto;
+    }
+
+    .heading {
+      margin: 0 0 var(--vox-space-1);
+      font-size: 14px;
+      font-weight: 600;
+    }
+
+    .info {
+      background-color: var(--vox-color-brand-soft);
+      border-color: var(--vox-color-brand-1);
+    }
+    .info .heading {
+      color: var(--vox-color-brand-1);
+    }
+
+    .success {
+      background-color: var(--vox-color-tip-soft);
+      border-color: var(--vox-color-tip-1);
+    }
+    .success .heading {
+      color: var(--vox-color-tip-1);
+    }
+
+    .warning {
+      background-color: var(--vox-color-warning-soft);
+      border-color: var(--vox-color-warning-1);
+    }
+    .warning .heading {
+      color: var(--vox-color-warning-1);
+    }
+
+    .danger {
+      background-color: var(--vox-color-danger-soft);
+      border-color: var(--vox-color-danger-1);
+    }
+    .danger .heading {
+      color: var(--vox-color-danger-1);
+    }
+
+    .close {
+      flex: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      padding: 0;
+      background: none;
+      border: none;
+      border-radius: var(--vox-radius-sm);
+      color: var(--vox-color-text-2);
+      cursor: pointer;
+    }
+
+    .close:hover {
+      color: var(--vox-color-text-1);
+    }
+
+    .close:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+    }
+
+    .close svg {
+      width: 14px;
+      height: 14px;
+    }
+
+    ::slotted(p:first-child) {
+      margin-top: 0;
+    }
+
+    ::slotted(p:last-child) {
+      margin-bottom: 0;
+    }
+  `;
+ze([
+  n()
+], N.prototype, "variant", 2);
+ze([
+  n()
+], N.prototype, "heading", 2);
+ze([
+  n({ type: Boolean })
+], N.prototype, "dismissible", 2);
+ze([
+  n({ type: Boolean, reflect: !0 })
+], N.prototype, "open", 2);
+N = ze([
+  d("vox-alert")
+], N);
+var Tr = Object.defineProperty, Br = Object.getOwnPropertyDescriptor, io = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? Br(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (r ? i(e, o, t) : i(t)) || t);
+  return r && t && Tr(e, o, t), t;
+};
+let Ie = class extends p {
+  constructor() {
+    super(...arguments), this.variant = "brand";
+  }
+  render() {
+    return l`<span class="badge ${this.variant}"><slot></slot></span>`;
+  }
+};
+Ie.styles = c`
+    :host {
+      display: inline-block;
+    }
+
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      padding: 2px 10px;
+      border-radius: var(--vox-radius-full);
+      font-family: var(--vox-font-family-base);
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 1.6;
+      white-space: nowrap;
+    }
+
+    .brand {
+      background-color: var(--vox-color-brand-soft);
+      color: var(--vox-color-brand-1);
+    }
+
+    .tip {
+      background-color: var(--vox-color-tip-soft);
+      color: var(--vox-color-tip-1);
+    }
+
+    .warning {
+      background-color: var(--vox-color-warning-soft);
+      color: var(--vox-color-warning-1);
+    }
+
+    .danger {
+      background-color: var(--vox-color-danger-soft);
+      color: var(--vox-color-danger-1);
+    }
+
+    .neutral {
+      background-color: var(--vox-color-bg-soft);
+      color: var(--vox-color-text-2);
+    }
+  `;
+io([
+  n()
+], Ie.prototype, "variant", 2);
+Ie = io([
+  d("vox-badge")
+], Ie);
+var Vr = Object.defineProperty, Nr = Object.getOwnPropertyDescriptor, Ct = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? Nr(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (r ? i(e, o, t) : i(t)) || t);
+  return r && t && Vr(e, o, t), t;
+};
+let ge = class extends p {
+  constructor() {
+    super(...arguments), this.date = "";
+  }
+  render() {
+    const s = /* @__PURE__ */ new Date(`${this.date}T00:00:00`), e = !Number.isNaN(s.getTime()), o = e ? s.toLocaleString(this.locale, { month: "short" }) : "—", r = e ? s.getDate() : "–";
+    return l`
+      <time class="tile" datetime=${this.date}>
+        <span class="month">${o}</span>
+        <span class="day">${r}</span>
+      </time>
+    `;
+  }
+};
+ge.styles = c`
+    :host {
+      display: inline-block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .tile {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      min-width: 56px;
+      border: 1px solid var(--vox-color-divider);
+      border-radius: var(--vox-radius-md);
+      overflow: hidden;
+      background-color: var(--vox-color-bg-elv);
+    }
+
+    .month {
+      align-self: stretch;
+      padding: 2px var(--vox-space-2);
+      background-color: var(--vox-color-brand-3);
+      color: var(--vox-color-text-inverse);
+      font-size: 11px;
+      font-weight: 700;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      text-align: center;
+    }
+
+    .day {
+      padding: var(--vox-space-1) var(--vox-space-2);
+      font-size: 24px;
+      font-weight: 700;
+      color: var(--vox-color-text-1);
+    }
+  `;
+Ct([
+  n()
+], ge.prototype, "date", 2);
+Ct([
+  n()
+], ge.prototype, "locale", 2);
+ge = Ct([
+  d("vox-calendar-tile")
+], ge);
+var Rr = Object.defineProperty, Mr = Object.getOwnPropertyDescriptor, Et = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? Mr(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (r ? i(e, o, t) : i(t)) || t);
+  return r && t && Rr(e, o, t), t;
+};
+const Ur = {
+  info: "Info",
+  tip: "Tip",
+  warning: "Warning",
+  danger: "Danger"
+};
+let be = class extends p {
+  constructor() {
+    super(...arguments), this.variant = "info";
+  }
+  render() {
+    return l`
+      <div class="callout ${this.variant}" role="note">
+        <p class="heading">${this.heading ?? Ur[this.variant]}</p>
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+be.styles = c`
+    :host {
+      display: block;
+    }
+
+    .callout {
+      border-radius: var(--vox-radius-md);
+      padding: var(--vox-space-4);
+      font-family: var(--vox-font-family-base);
+      font-size: 14px;
+      line-height: 1.7;
+      color: var(--vox-color-text-2);
+    }
+
+    .heading {
+      margin: 0 0 var(--vox-space-2);
+      font-size: 14px;
+      font-weight: 600;
+    }
+
+    .info {
+      background-color: var(--vox-color-bg-soft);
+    }
+    .info .heading {
+      color: var(--vox-color-text-1);
+    }
+
+    .tip {
+      background-color: var(--vox-color-tip-soft);
+    }
+    .tip .heading {
+      color: var(--vox-color-tip-1);
+    }
+
+    .warning {
+      background-color: var(--vox-color-warning-soft);
+    }
+    .warning .heading {
+      color: var(--vox-color-warning-1);
+    }
+
+    .danger {
+      background-color: var(--vox-color-danger-soft);
+    }
+    .danger .heading {
+      color: var(--vox-color-danger-1);
+    }
+
+    ::slotted(p:first-child) {
+      margin-top: 0;
+    }
+
+    ::slotted(p:last-child) {
+      margin-bottom: 0;
+    }
+  `;
+Et([
+  n()
+], be.prototype, "variant", 2);
+Et([
+  n()
+], be.prototype, "heading", 2);
+be = Et([
+  d("vox-callout")
+], be);
+var Lr = Object.defineProperty, qr = Object.getOwnPropertyDescriptor, Qe = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? qr(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (r ? i(e, o, t) : i(t)) || t);
+  return r && t && Lr(e, o, t), t;
+};
+let W = class extends p {
+  constructor() {
+    super(...arguments), this.heading = "", this.hasIcon = !1, this.hasBadge = !1, this.hasFooter = !1;
+  }
+  handleIconSlotChange(s) {
+    const e = s.target;
+    this.hasIcon = e.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  }
+  handleBadgeSlotChange(s) {
+    const e = s.target;
+    this.hasBadge = e.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  }
+  handleFooterSlotChange(s) {
+    const e = s.target;
+    this.hasFooter = e.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  }
+  render() {
+    const s = l`
+      <div class="badge ${this.hasBadge ? "has-badge" : ""}">
+        <slot name="badge" @slotchange=${this.handleBadgeSlotChange}></slot>
+      </div>
+      <div class="icon ${this.hasIcon ? "has-icon" : ""}">
+        <slot name="icon" @slotchange=${this.handleIconSlotChange}></slot>
+      </div>
+      <h3 class="heading">${this.heading}</h3>
+      <div class="body"><slot></slot></div>
+      <div class="footer ${this.hasFooter ? "has-footer" : ""}">
+        <slot name="footer" @slotchange=${this.handleFooterSlotChange}></slot>
+      </div>
+    `;
+    return this.href !== void 0 ? l`<a class="card" href=${this.href} target=${this.target ?? u}>${s}</a>` : l`<div class="card">${s}</div>`;
+  }
+};
+W.styles = c`
+    :host {
+      display: block;
+    }
+
+    .card {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      box-sizing: border-box;
+      background-color: var(--vox-color-bg-soft);
+      border: 1px solid var(--vox-color-bg-soft);
+      border-radius: var(--vox-radius-lg);
+      padding: var(--vox-space-6);
+      font-family: var(--vox-font-family-base);
+      text-decoration: none;
+      transition: border-color var(--vox-transition-base);
+    }
+
+    .badge {
+      position: absolute;
+      top: var(--vox-space-6);
+      right: var(--vox-space-6);
+    }
+
+    .badge:not(.has-badge) {
+      display: none;
+    }
+
+    a.card:hover,
+    a.card:focus-visible {
+      border-color: var(--vox-color-brand-1);
+    }
+
+    a.card:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+    }
+
+    .icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 48px;
+      height: 48px;
+      margin-bottom: var(--vox-space-4);
+      background-color: var(--vox-color-bg-elv);
+      border-radius: var(--vox-radius-md);
+      font-size: 24px;
+    }
+
+    .icon:not(.has-icon) {
+      display: none;
+    }
+
+    .heading {
+      margin: 0;
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 1.5;
+      color: var(--vox-color-text-1);
+    }
+
+    .body {
+      margin-top: var(--vox-space-2);
+      font-size: 14px;
+      line-height: 1.6;
+      color: var(--vox-color-text-2);
+    }
+
+    .footer {
+      margin-top: auto;
+      padding-top: var(--vox-space-4);
+    }
+
+    .footer:not(.has-footer) {
+      display: none;
+    }
+  `;
+Qe([
+  n()
+], W.prototype, "heading", 2);
+Qe([
+  n()
+], W.prototype, "href", 2);
+Qe([
+  n()
+], W.prototype, "target", 2);
+W = Qe([
+  d("vox-card")
+], W);
+var Hr = Object.defineProperty, Ir = Object.getOwnPropertyDescriptor, no = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? Ir(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (r ? i(e, o, t) : i(t)) || t);
+  return r && t && Hr(e, o, t), t;
+};
+let Fe = class extends p {
+  constructor() {
+    super(...arguments), this.heading = "", this.hasBody = !1, this.hasActions = !1;
+  }
+  handleBodySlotChange(s) {
+    const e = s.target;
+    this.hasBody = e.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  }
+  handleActionsSlotChange(s) {
+    const e = s.target;
+    this.hasActions = e.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  }
+  render() {
+    return l`
+      <div class="band">
+        ${this.heading ? l`<h2 class="heading">${this.heading}</h2>` : u}
+        <div class="body ${this.hasBody ? "has-content" : ""}">
+          <slot @slotchange=${this.handleBodySlotChange}></slot>
+        </div>
+        <div class="actions ${this.hasActions ? "has-content" : ""}">
+          <slot name="actions" @slotchange=${this.handleActionsSlotChange}></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+Fe.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .band {
+      text-align: center;
+      padding: var(--vox-space-8);
+      background-color: var(--vox-color-bg-soft);
+      border-radius: var(--vox-radius-lg);
+    }
+
+    .heading {
+      margin: 0;
+      font-family: var(--vox-font-family-display);
+      font-size: 28px;
+      font-weight: 600;
+      line-height: 1.3;
+      color: var(--vox-color-text-1);
+    }
+
+    .body {
+      max-width: 36rem;
+      margin: var(--vox-space-3) auto 0;
+      font-size: 16px;
+      line-height: 1.6;
+      color: var(--vox-color-text-2);
+    }
+
+    .body:not(.has-content) {
+      display: none;
+    }
+
+    .body ::slotted(a) {
+      color: var(--vox-color-brand-1);
+      text-decoration: underline;
+    }
+
+    .body ::slotted(a:hover) {
+      color: var(--vox-color-brand-2);
+    }
+
+    .actions {
+      display: flex;
+      gap: var(--vox-space-3);
+      justify-content: center;
+      flex-wrap: wrap;
+      margin-top: var(--vox-space-6);
+    }
+
+    .actions:not(.has-content) {
+      display: none;
+    }
+  `;
+no([
+  n()
+], Fe.prototype, "heading", 2);
+Fe = no([
+  d("vox-cta-band")
+], Fe);
+var Fr = Object.defineProperty, Kr = Object.getOwnPropertyDescriptor, lo = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? Kr(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (r ? i(e, o, t) : i(t)) || t);
+  return r && t && Fr(e, o, t), t;
+};
+let Ke = class extends p {
+  constructor() {
+    super(...arguments), this.heading = "";
+  }
+  render() {
+    return l`
+      <div class="empty">
+        <div class="icon"><slot name="icon"></slot></div>
+        <h3 class="heading">${this.heading}</h3>
+        <div class="body"><slot></slot></div>
+        <div class="actions"><slot name="actions"></slot></div>
+      </div>
+    `;
+  }
+};
+Ke.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .empty {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      padding: var(--vox-space-8);
+      border: 1px dashed var(--vox-color-border);
+      border-radius: var(--vox-radius-lg);
+    }
+
+    .icon {
+      font-size: 32px;
+      margin-bottom: var(--vox-space-3);
+    }
+
+    .heading {
+      margin: 0;
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--vox-color-text-1);
+    }
+
+    .body {
+      max-width: 32rem;
+      margin-top: var(--vox-space-2);
+      font-size: 14px;
+      line-height: 1.6;
+      color: var(--vox-color-text-2);
+    }
+
+    .actions {
+      display: flex;
+      gap: var(--vox-space-3);
+      flex-wrap: wrap;
+      justify-content: center;
+      margin-top: var(--vox-space-4);
+    }
+  `;
+lo([
+  n()
+], Ke.prototype, "heading", 2);
+Ke = lo([
+  d("vox-empty-state")
+], Ke);
+var Wr = Object.defineProperty, Gr = Object.getOwnPropertyDescriptor, St = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? Gr(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (r ? i(e, o, t) : i(t)) || t);
+  return r && t && Wr(e, o, t), t;
+};
+let dt = class extends p {
+  render() {
+    return l`
+      <footer>
+        <div class="inner">
+          <div class="columns"><slot></slot></div>
+          <div class="bottom"><slot name="bottom"></slot></div>
+        </div>
+      </footer>
+    `;
+  }
+};
+dt.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+      background-color: var(--vox-color-bg-alt);
+      border-top: 1px solid var(--vox-color-divider);
+    }
+
+    .inner {
+      max-width: 1280px;
+      margin: 0 auto;
+      padding: var(--vox-space-8) var(--vox-space-6);
+    }
+
+    .columns {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+      gap: var(--vox-space-6);
+    }
+
+    .bottom {
+      margin-top: var(--vox-space-8);
+      padding-top: var(--vox-space-4);
+      border-top: 1px solid var(--vox-color-divider);
+      font-size: 13px;
+      color: var(--vox-color-text-3);
+    }
+  `;
+dt = St([
+  d("vox-footer")
+], dt);
+let We = class extends p {
+  constructor() {
+    super(...arguments), this.heading = "";
+  }
+  render() {
+    return l`
+      <h3 class="heading">${this.heading}</h3>
+      <div class="links"><slot></slot></div>
+    `;
+  }
+};
+We.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .heading {
+      margin: 0 0 var(--vox-space-3);
+      font-size: 13px;
+      font-weight: 600;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+      color: var(--vox-color-text-1);
+    }
+
+    .links {
+      display: flex;
+      flex-direction: column;
+      gap: var(--vox-space-2);
+    }
+
+    ::slotted(a) {
+      color: var(--vox-color-text-2);
+      font-size: 14px;
+      text-decoration: none;
+    }
+
+    ::slotted(a:hover) {
+      color: var(--vox-color-brand-1);
+      text-decoration: underline;
+    }
+  `;
+St([
+  n()
+], We.prototype, "heading", 2);
+We = St([
+  d("vox-footer-column")
+], We);
+var Xr = Object.defineProperty, Yr = Object.getOwnPropertyDescriptor, et = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? Yr(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (r ? i(e, o, t) : i(t)) || t);
+  return r && t && Xr(e, o, t), t;
+};
+let G = class extends p {
+  constructor() {
+    super(...arguments), this.cols = 0, this.min = "240px", this.gap = "md";
+  }
+  updated() {
+    this.style.gridTemplateColumns = this.cols > 0 ? `repeat(${this.cols}, minmax(0, 1fr))` : `repeat(auto-fit, minmax(min(${this.min}, 100%), 1fr))`;
+  }
+  render() {
+    return l`<slot></slot>`;
+  }
+};
+G.styles = c`
+    :host {
+      display: grid;
+    }
+
+    :host([gap='sm']) {
+      gap: var(--vox-space-2);
+    }
+
+    :host([gap='md']) {
+      gap: var(--vox-space-4);
+    }
+
+    :host([gap='lg']) {
+      gap: var(--vox-space-6);
+    }
+  `;
+et([
+  n({ type: Number })
+], G.prototype, "cols", 2);
+et([
+  n()
+], G.prototype, "min", 2);
+et([
+  n({ reflect: !0 })
+], G.prototype, "gap", 2);
+G = et([
+  d("vox-grid")
+], G);
+var Zr = Object.defineProperty, Jr = Object.getOwnPropertyDescriptor, jt = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? Jr(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (r ? i(e, o, t) : i(t)) || t);
+  return r && t && Zr(e, o, t), t;
+};
+let me = class extends p {
+  constructor() {
+    super(...arguments), this.eyebrow = "", this.heading = "", this.hasActions = !1;
+  }
+  handleActionsSlotChange(s) {
+    const e = s.target;
+    this.hasActions = e.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  }
+  render() {
+    return l`
+      <header class="hero">
+        ${this.eyebrow ? l`<p class="eyebrow">${this.eyebrow}</p>` : u}
+        <h1 class="heading">${this.heading}</h1>
+        <div class="body"><slot></slot></div>
+        <div class="actions ${this.hasActions ? "has-content" : ""}">
+          <slot name="actions" @slotchange=${this.handleActionsSlotChange}></slot>
+        </div>
+      </header>
+    `;
+  }
+};
+me.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .hero {
+      padding: var(--vox-space-8) 0;
+      border-bottom: 1px solid var(--vox-color-divider);
+    }
+
+    .eyebrow {
+      margin: 0 0 var(--vox-space-2);
+      font-size: 13px;
+      font-weight: 600;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+      color: var(--vox-color-brand-1);
+    }
+
+    .heading {
+      margin: 0;
+      font-family: var(--vox-font-family-display);
+      font-size: 36px;
+      font-weight: 600;
+      line-height: 1.25;
+      color: var(--vox-color-text-1);
+    }
+
+    .body {
+      max-width: 44rem;
+      margin-top: var(--vox-space-3);
+      font-size: 17px;
+      line-height: 1.7;
+      color: var(--vox-color-text-2);
+    }
+
+    .body ::slotted(a) {
+      color: var(--vox-color-brand-1);
+      text-decoration: underline;
+    }
+
+    .body ::slotted(a:hover) {
+      color: var(--vox-color-brand-2);
+    }
+
+    .actions {
+      display: flex;
+      gap: var(--vox-space-3);
+      flex-wrap: wrap;
+      margin-top: var(--vox-space-6);
+    }
+
+    .actions:not(.has-content) {
+      display: none;
+    }
+  `;
+jt([
+  n()
+], me.prototype, "eyebrow", 2);
+jt([
+  n()
+], me.prototype, "heading", 2);
+me = jt([
+  d("vox-hero")
+], me);
+var Qr = Object.defineProperty, es = Object.getOwnPropertyDescriptor, tt = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? es(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (r ? i(e, o, t) : i(t)) || t);
+  return r && t && Qr(e, o, t), t;
+};
+let pt = class extends p {
+  render() {
+    return l`<slot></slot>`;
+  }
+};
+pt.styles = c`
+    :host {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
+      gap: var(--vox-space-4);
+    }
+  `;
+pt = tt([
+  d("vox-link-hub")
+], pt);
+let ye = class extends p {
+  constructor() {
+    super(...arguments), this.href = "#", this.heading = "";
+  }
+  render() {
+    return l`
+      <a href=${this.href}>
+        <span class="heading">
+          ${this.heading}
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M5 12h14" />
+            <path d="m13 6 6 6-6 6" />
+          </svg>
+        </span>
+        <span class="body"><slot></slot></span>
+      </a>
+    `;
+  }
+};
+ye.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    a {
+      display: block;
+      height: 100%;
+      box-sizing: border-box;
+      padding: var(--vox-space-4);
+      border-bottom: 2px solid var(--vox-color-divider);
+      text-decoration: none;
+      transition: border-color var(--vox-transition-base);
+    }
+
+    a:hover,
+    a:focus-visible {
+      border-bottom-color: var(--vox-color-brand-1);
+    }
+
+    a:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+    }
+
+    .heading {
+      display: flex;
+      align-items: center;
+      gap: var(--vox-space-2);
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--vox-color-brand-1);
+    }
+
+    .heading svg {
+      width: 14px;
+      height: 14px;
+      transition: transform var(--vox-transition-fast);
+    }
+
+    a:hover .heading svg {
+      transform: translateX(3px);
+    }
+
+    .body {
+      margin-top: var(--vox-space-1);
+      font-size: 14px;
+      line-height: 1.6;
+      color: var(--vox-color-text-2);
+    }
+  `;
+tt([
+  n()
+], ye.prototype, "href", 2);
+tt([
+  n()
+], ye.prototype, "heading", 2);
+ye = tt([
+  d("vox-link-hub-item")
+], ye);
+var ts = Object.defineProperty, os = Object.getOwnPropertyDescriptor, kt = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? os(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (r ? i(e, o, t) : i(t)) || t);
+  return r && t && ts(e, o, t), t;
+};
+let $e = class extends p {
+  constructor() {
+    super(...arguments), this.size = "md", this.label = "Loading";
+  }
+  render() {
+    return l`
+      <div role="status">
+        <div class="spinner"></div>
+        <span class="visually-hidden">${this.label}</span>
+      </div>
+    `;
+  }
+};
+$e.styles = c`
+    :host {
+      display: inline-block;
+    }
+
+    .spinner {
+      box-sizing: border-box;
+      border-radius: 50%;
+      border-style: solid;
+      border-color: var(--vox-color-brand-soft);
+      border-top-color: var(--vox-color-brand-3);
+      animation: spin 0.8s linear infinite;
+    }
+
+    :host([size='sm']) .spinner {
+      width: 16px;
+      height: 16px;
+      border-width: 2px;
+    }
+
+    :host([size='md']) .spinner {
+      width: 28px;
+      height: 28px;
+      border-width: 3px;
+    }
+
+    :host([size='lg']) .spinner {
+      width: 44px;
+      height: 44px;
+      border-width: 4px;
+    }
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .spinner {
+        animation-duration: 2.4s;
+      }
+    }
+
+    .visually-hidden {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip: rect(0 0 0 0);
+      white-space: nowrap;
+    }
+  `;
+kt([
+  n({ reflect: !0 })
+], $e.prototype, "size", 2);
+kt([
+  n()
+], $e.prototype, "label", 2);
+$e = kt([
+  d("vox-loader")
+], $e);
+var rs = Object.defineProperty, ss = Object.getOwnPropertyDescriptor, co = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? ss(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (r ? i(e, o, t) : i(t)) || t);
+  return r && t && rs(e, o, t), t;
+};
+let Ge = class extends p {
+  constructor() {
+    super(...arguments), this.label = "Pagination";
+  }
+  render() {
+    return l`
+      <nav aria-label=${this.label}>
+        <slot></slot>
+      </nav>
+    `;
+  }
+};
+Ge.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    nav {
+      display: flex;
+      gap: var(--vox-space-1);
+      flex-wrap: wrap;
+    }
+
+    ::slotted(a) {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 34px;
+      height: 34px;
+      padding: 0 var(--vox-space-2);
+      border-radius: var(--vox-radius-md);
+      color: var(--vox-color-text-2);
+      font-size: 14px;
+      font-weight: 500;
+      text-decoration: none;
+      transition:
+        color var(--vox-transition-fast),
+        background-color var(--vox-transition-fast);
+    }
+
+    ::slotted(a:hover) {
+      color: var(--vox-color-brand-1);
+      background-color: var(--vox-color-brand-soft);
+    }
+
+    ::slotted(a[aria-current='page']) {
+      background-color: var(--vox-color-brand-3);
+      color: var(--vox-color-text-inverse);
+      font-weight: 600;
+    }
+  `;
+co([
+  n()
+], Ge.prototype, "label", 2);
+Ge = co([
+  d("vox-pagination")
+], Ge);
+var as = Object.defineProperty, is = Object.getOwnPropertyDescriptor, Dt = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? is(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (r ? i(e, o, t) : i(t)) || t);
+  return r && t && as(e, o, t), t;
+};
+let _e = class extends p {
+  constructor() {
+    super(...arguments), this.attribution = "", this.detail = "";
+  }
+  render() {
+    return l`
+      <blockquote>
+        <div class="text"><slot></slot></div>
+        ${this.attribution ? l`
+              <footer>
+                <span class="attribution">${this.attribution}</span>
+                ${this.detail ? l`<span class="detail"> — ${this.detail}</span>` : u}
+              </footer>
+            ` : u}
+      </blockquote>
+    `;
+  }
+};
+_e.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    blockquote {
+      margin: 0;
+      padding-left: var(--vox-space-6);
+      border-left: 4px solid var(--vox-color-brand-3);
+    }
+
+    .text {
+      font-family: var(--vox-font-family-display);
+      font-style: italic;
+      font-size: 20px;
+      line-height: 1.6;
+      color: var(--vox-color-text-1);
+    }
+
+    .text::before {
+      content: '“';
+    }
+
+    .text::after {
+      content: '”';
+    }
+
+    footer {
+      margin-top: var(--vox-space-3);
+      font-size: 14px;
+    }
+
+    .attribution {
+      font-weight: 600;
+      color: var(--vox-color-text-1);
+    }
+
+    .detail {
+      color: var(--vox-color-text-2);
+    }
+  `;
+Dt([
+  n()
+], _e.prototype, "attribution", 2);
+Dt([
+  n()
+], _e.prototype, "detail", 2);
+_e = Dt([
+  d("vox-quote")
+], _e);
+var ns = Object.defineProperty, ls = Object.getOwnPropertyDescriptor, L = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? ls(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (r ? i(e, o, t) : i(t)) || t);
+  return r && t && ns(e, o, t), t;
+};
+let Xe = class extends p {
+  constructor() {
+    super(...arguments), this.heading = "", this.hasDescription = !1;
+  }
+  handleDescriptionSlotChange(s) {
+    const e = s.target;
+    this.hasDescription = e.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  }
+  render() {
+    return l`
+      <h2 class="heading">${this.heading}</h2>
+      <div class="description ${this.hasDescription ? "has-content" : ""}">
+        <slot
+          name="description"
+          @slotchange=${this.handleDescriptionSlotChange}
+        ></slot>
+      </div>
+      <div class="grid">
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+Xe.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .heading {
+      margin: 0;
+      font-size: 22px;
+      font-weight: 700;
+      line-height: 1.3;
+      color: var(--vox-color-text-1);
+    }
+
+    .description {
+      margin: var(--vox-space-2) 0 0;
+      font-size: 15px;
+      line-height: 1.7;
+      color: var(--vox-color-text-2);
+    }
+
+    .description:not(.has-content) {
+      display: none;
+    }
+
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
+      gap: var(--vox-space-4);
+      margin-top: var(--vox-space-6);
+    }
+  `;
+L([
+  n()
+], Xe.prototype, "heading", 2);
+Xe = L([
+  d("vox-sponsor-tier")
+], Xe);
+let R = class extends p {
+  constructor() {
+    super(...arguments), this.name = "", this.hasBody = !1;
+  }
+  handleBodySlotChange(s) {
+    const e = s.target;
+    this.hasBody = e.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  }
+  render() {
+    const s = l`
+      <div class="logo ${this.logo ? "has-logo" : ""}">
+        ${this.logo ? l`<img src=${this.logo} alt=${this.name} />` : u}
+      </div>
+      <span class="name">${this.name}</span>
+      <div class="body ${this.hasBody ? "has-content" : ""}">
+        <slot @slotchange=${this.handleBodySlotChange}></slot>
+      </div>
+    `;
+    return this.href !== void 0 ? l`<a
+          class="sponsor"
+          href=${this.href}
+          target=${this.target ?? u}
+          >${s}</a
+        >` : l`<div class="sponsor">${s}</div>`;
+  }
+};
+R.styles = c`
+    :host {
+      display: block;
+    }
+
+    .sponsor {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      box-sizing: border-box;
+      gap: var(--vox-space-3);
+      padding: var(--vox-space-4);
+      background-color: var(--vox-color-bg-soft);
+      border: 1px solid var(--vox-color-bg-soft);
+      border-radius: var(--vox-radius-lg);
+      font-family: var(--vox-font-family-base);
+      text-decoration: none;
+      transition: border-color var(--vox-transition-base);
+    }
+
+    a.sponsor:hover,
+    a.sponsor:focus-visible {
+      border-color: var(--vox-color-brand-1);
+    }
+
+    a.sponsor:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+    }
+
+    .logo {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 64px;
+      background-color: var(--vox-color-bg-elv);
+      border-radius: var(--vox-radius-md);
+    }
+
+    .logo:not(.has-logo) {
+      display: none;
+    }
+
+    .logo img {
+      max-width: 80%;
+      max-height: 40px;
+      object-fit: contain;
+    }
+
+    .name {
+      font-size: 15px;
+      font-weight: 600;
+      line-height: 1.4;
+      color: var(--vox-color-text-1);
+    }
+
+    .body {
+      font-size: 13px;
+      line-height: 1.6;
+      color: var(--vox-color-text-2);
+    }
+
+    .body:not(.has-content) {
+      display: none;
+    }
+  `;
+L([
+  n()
+], R.prototype, "name", 2);
+L([
+  n()
+], R.prototype, "href", 2);
+L([
+  n()
+], R.prototype, "logo", 2);
+L([
+  n()
+], R.prototype, "target", 2);
+R = L([
+  d("vox-sponsor")
+], R);
+var cs = Object.defineProperty, ds = Object.getOwnPropertyDescriptor, zt = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? ds(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (r ? i(e, o, t) : i(t)) || t);
+  return r && t && cs(e, o, t), t;
+};
+let we = class extends p {
+  constructor() {
+    super(...arguments), this.value = "", this.label = "";
+  }
+  render() {
+    return l`
+      <div class="value">${this.value}</div>
+      <div class="label">${this.label}</div>
+      <div class="description"><slot></slot></div>
+    `;
+  }
+};
+we.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .value {
+      font-size: 40px;
+      font-weight: 700;
+      line-height: 1.1;
+      color: var(--vox-color-brand-1);
+    }
+
+    .label {
+      margin-top: var(--vox-space-1);
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--vox-color-text-1);
+    }
+
+    .description {
+      margin-top: var(--vox-space-1);
+      font-size: 13px;
+      line-height: 1.6;
+      color: var(--vox-color-text-2);
+    }
+  `;
+zt([
+  n()
+], we.prototype, "value", 2);
+zt([
+  n()
+], we.prototype, "label", 2);
+we = zt([
+  d("vox-stat")
+], we);
+var ps = Object.defineProperty, hs = Object.getOwnPropertyDescriptor, Te = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? hs(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (r ? i(e, o, t) : i(t)) || t);
+  return r && t && ps(e, o, t), t;
+};
+let ht = class extends p {
+  numberSteps() {
+    this.querySelectorAll("vox-step").forEach((s, e) => {
+      s.number = e + 1;
+    });
+  }
+  render() {
+    return l`
+      <div class="steps" role="list" aria-label="Progress">
+        <slot @slotchange=${this.numberSteps}></slot>
+      </div>
+    `;
+  }
+};
+ht.styles = c`
+    :host {
+      display: block;
+    }
+
+    .steps {
+      display: flex;
+      align-items: flex-start;
+    }
+
+    ::slotted(vox-step) {
+      flex: 1 1 0;
+    }
+  `;
+ht = Te([
+  d("vox-step-indicator")
+], ht);
+let X = class extends p {
+  constructor() {
+    super(...arguments), this.label = "", this.state = "upcoming", this.number = 1;
+  }
+  render() {
+    return l`
+      <div
+        class="step"
+        role="listitem"
+        aria-current=${this.state === "current" ? "step" : "false"}
+      >
+        <span class="marker">
+          ${this.state === "complete" ? l`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <path d="m4 12 5 5L20 6" />
+              </svg>` : this.number}
+        </span>
+        <span class="label">${this.label}</span>
+      </div>
+    `;
+  }
+};
+X.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .step {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      gap: var(--vox-space-2);
+      padding: 0 var(--vox-space-2);
+    }
+
+    /* Connector line to the previous step. */
+    :host(:not(:first-child)) .step::before {
+      content: '';
+      position: absolute;
+      top: 14px;
+      right: 50%;
+      width: 100%;
+      height: 2px;
+      background-color: var(--vox-color-divider);
+      z-index: 0;
+    }
+
+    :host([state='complete']) .step::before {
+      background-color: var(--vox-color-brand-3);
+    }
+
+    .marker {
+      position: relative;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      border: 2px solid var(--vox-color-divider);
+      background-color: var(--vox-color-bg);
+      color: var(--vox-color-text-2);
+      font-size: 13px;
+      font-weight: 600;
+    }
+
+    :host([state='complete']) .marker {
+      background-color: var(--vox-color-brand-3);
+      border-color: var(--vox-color-brand-3);
+      color: var(--vox-color-text-inverse);
+    }
+
+    :host([state='current']) .marker {
+      border-color: var(--vox-color-brand-3);
+      color: var(--vox-color-brand-1);
+    }
+
+    .marker svg {
+      width: 14px;
+      height: 14px;
+    }
+
+    .label {
+      font-size: 13px;
+      color: var(--vox-color-text-2);
+    }
+
+    :host([state='current']) .label {
+      font-weight: 600;
+      color: var(--vox-color-text-1);
+    }
+  `;
+Te([
+  n()
+], X.prototype, "label", 2);
+Te([
+  n({ reflect: !0 })
+], X.prototype, "state", 2);
+Te([
+  n({ type: Number })
+], X.prototype, "number", 2);
+X = Te([
+  d("vox-step")
+], X);
+var vs = Object.defineProperty, us = Object.getOwnPropertyDescriptor, ot = (s, e, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? us(e, o) : e, a = s.length - 1, i; a >= 0; a--)
+    (i = s[a]) && (t = (r ? i(e, o, t) : i(t)) || t);
+  return r && t && vs(e, o, t), t;
+};
+let vt = class extends p {
+  render() {
+    return l`<slot></slot>`;
+  }
+};
+vt.styles = c`
+    :host {
+      display: block;
+    }
+  `;
+vt = ot([
+  d("vox-timeline")
+], vt);
+let Pe = class extends p {
+  constructor() {
+    super(...arguments), this.heading = "", this.date = "";
+  }
+  render() {
+    return l`
+      <div class="item">
+        <span class="dot" aria-hidden="true"></span>
+        ${this.date ? l`<div class="date">${this.date}</div>` : u}
+        <h3 class="heading">${this.heading}</h3>
+        <div class="body"><slot></slot></div>
+      </div>
+    `;
+  }
+};
+Pe.styles = c`
+    :host {
+      display: block;
+      font-family: var(--vox-font-family-base);
+    }
+
+    .item {
+      position: relative;
+      padding: 0 0 var(--vox-space-6) var(--vox-space-6);
+      border-left: 2px solid var(--vox-color-divider);
+    }
+
+    :host(:last-child) .item {
+      border-left-color: transparent;
+      padding-bottom: 0;
+    }
+
+    .dot {
+      position: absolute;
+      top: 4px;
+      left: -7px;
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background-color: var(--vox-color-brand-3);
+      border: 2px solid var(--vox-color-bg);
+    }
+
+    .date {
+      font-size: 12px;
+      font-weight: 600;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+      color: var(--vox-color-text-3);
+    }
+
+    .heading {
+      margin: var(--vox-space-1) 0 0;
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--vox-color-text-1);
+    }
+
+    .body {
+      margin-top: var(--vox-space-1);
+      font-size: 14px;
+      line-height: 1.6;
+      color: var(--vox-color-text-2);
+    }
+  `;
+ot([
+  n()
+], Pe.prototype, "heading", 2);
+ot([
+  n()
+], Pe.prototype, "date", 2);
+Pe = ot([
+  d("vox-timeline-item")
+], Pe);
+export {
+  He as VoxAccordion,
+  fe as VoxAccordionItem,
+  N as VoxAlert,
+  T as VoxAvatar,
+  Ie as VoxBadge,
+  le as VoxBillboard,
+  lt as VoxBreadcrumbs,
+  $ as VoxButton,
+  ge as VoxCalendarTile,
+  be as VoxCallout,
+  W as VoxCard,
+  ae as VoxCheckbox,
+  se as VoxCta,
+  Fe as VoxCtaBand,
+  V as VoxDialog,
+  ue as VoxDisclosure,
+  xe as VoxDropdown,
+  Ke as VoxEmptyState,
+  O as VoxFileInput,
+  dt as VoxFooter,
+  We as VoxFooterColumn,
+  G as VoxGrid,
+  ce as VoxHeader,
+  me as VoxHero,
+  A as VoxInput,
+  nt as VoxInputGroup,
+  pt as VoxLinkHub,
+  ye as VoxLinkHubItem,
+  $e as VoxLoader,
+  Ge as VoxPagination,
+  _e as VoxQuote,
+  K as VoxRadio,
+  Ue as VoxRadioGroup,
+  ie as VoxSelect,
+  B as VoxSeriesNav,
+  Le as VoxSidenav,
+  de as VoxSidenavGroup,
+  pe as VoxSidenavItem,
+  R as VoxSponsor,
+  Xe as VoxSponsorTier,
+  we as VoxStat,
+  X as VoxStep,
+  ht as VoxStepIndicator,
+  qe as VoxSubnav,
+  ne as VoxSwitch,
+  he as VoxTab,
+  ve as VoxTabPanel,
+  ct as VoxTabs,
+  z as VoxTextarea,
+  F as VoxThemeToggle,
+  vt as VoxTimeline,
+  Pe as VoxTimelineItem
+};