@openvoxproject/voxblocks 0.10.0 → 0.11.0

package/dist/cdn/voxblocks.js

@@ -3,18 +3,18 @@
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const Ie = globalThis, _t = Ie.ShadowRoot && (Ie.ShadyCSS === void 0 || Ie.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, Ct = Symbol(), It = /* @__PURE__ */ new WeakMap();
+const qe = globalThis, _t = qe.ShadowRoot && (qe.ShadyCSS === void 0 || qe.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, Ct = Symbol(), Ut = /* @__PURE__ */ new WeakMap();
 let oo = class {
-  constructor(e, o, s) {
+  constructor(e, r, s) {
     if (this._$cssResult$ = !0, s !== Ct) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
-    this.cssText = e, this.t = o;
+    this.cssText = e, this.t = r;
   }
   get styleSheet() {
     let e = this.o;
-    const o = this.t;
+    const r = this.t;
     if (_t && e === void 0) {
-      const s = o !== void 0 && o.length === 1;
-      s && (e = It.get(o)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), s && It.set(o, e));
+      const s = r !== void 0 && r.length === 1;
+      s && (e = Ut.get(r)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), s && Ut.set(r, e));
     }
     return e;
   }
@@ -22,119 +22,119 @@ let oo = class {
     return this.cssText;
   }
 };
-const yo = (r) => new oo(typeof r == "string" ? r : r + "", void 0, Ct), d = (r, ...e) => {
-  const o = r.length === 1 ? r[0] : e.reduce((s, t, a) => s + ((i) => {
+const yo = (o) => new oo(typeof o == "string" ? o : o + "", void 0, Ct), d = (o, ...e) => {
+  const r = o.length === 1 ? o[0] : e.reduce((s, t, a) => s + ((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) + r[a + 1], r[0]);
-  return new oo(o, r, Ct);
-}, mo = (r, e) => {
-  if (_t) r.adoptedStyleSheets = e.map((o) => o instanceof CSSStyleSheet ? o : o.styleSheet);
-  else for (const o of e) {
-    const s = document.createElement("style"), t = Ie.litNonce;
-    t !== void 0 && s.setAttribute("nonce", t), s.textContent = o.cssText, r.appendChild(s);
-  }
-}, qt = _t ? (r) => r : (r) => r instanceof CSSStyleSheet ? ((e) => {
-  let o = "";
-  for (const s of e.cssRules) o += s.cssText;
-  return yo(o);
-})(r) : r;
+  })(t) + o[a + 1], o[0]);
+  return new oo(r, o, Ct);
+}, mo = (o, e) => {
+  if (_t) o.adoptedStyleSheets = e.map((r) => r instanceof CSSStyleSheet ? r : r.styleSheet);
+  else for (const r of e) {
+    const s = document.createElement("style"), t = qe.litNonce;
+    t !== void 0 && s.setAttribute("nonce", t), s.textContent = r.cssText, o.appendChild(s);
+  }
+}, qt = _t ? (o) => o : (o) => o instanceof CSSStyleSheet ? ((e) => {
+  let r = "";
+  for (const s of e.cssRules) r += s.cssText;
+  return yo(r);
+})(o) : o;
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { is: $o, defineProperty: wo, getOwnPropertyDescriptor: _o, getOwnPropertyNames: Co, getOwnPropertySymbols: Oo, getPrototypeOf: Mo } = Object, M = globalThis, Ft = M.trustedTypes, Po = Ft ? Ft.emptyScript : "", pt = M.reactiveElementPolyfillSupport, se = (r, e) => r, qe = { toAttribute(r, e) {
+const { is: $o, defineProperty: wo, getOwnPropertyDescriptor: _o, getOwnPropertyNames: Co, getOwnPropertySymbols: Oo, getPrototypeOf: Mo } = Object, P = globalThis, Ft = P.trustedTypes, Po = Ft ? Ft.emptyScript : "", pt = P.reactiveElementPolyfillSupport, le = (o, e) => o, Fe = { toAttribute(o, e) {
   switch (e) {
     case Boolean:
-      r = r ? Po : null;
+      o = o ? Po : null;
       break;
     case Object:
     case Array:
-      r = r == null ? r : JSON.stringify(r);
+      o = o == null ? o : JSON.stringify(o);
   }
-  return r;
-}, fromAttribute(r, e) {
-  let o = r;
+  return o;
+}, fromAttribute(o, e) {
+  let r = o;
   switch (e) {
     case Boolean:
-      o = r !== null;
+      r = o !== null;
       break;
     case Number:
-      o = r === null ? null : Number(r);
+      r = o === null ? null : Number(o);
       break;
     case Object:
     case Array:
       try {
-        o = JSON.parse(r);
+        r = JSON.parse(o);
       } catch {
-        o = null;
+        r = null;
       }
   }
-  return o;
-} }, Ot = (r, e) => !$o(r, e), Zt = { attribute: !0, type: String, converter: qe, reflect: !1, useDefault: !1, hasChanged: Ot };
-Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), M.litPropertyMetadata ?? (M.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
-let q = class extends HTMLElement {
+  return r;
+} }, Ot = (o, e) => !$o(o, e), Zt = { attribute: !0, type: String, converter: Fe, reflect: !1, useDefault: !1, hasChanged: Ot };
+Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), P.litPropertyMetadata ?? (P.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
+let G = 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 = Zt) {
-    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 s = Symbol(), t = this.getPropertyDescriptor(e, s, o);
+  static createProperty(e, r = Zt) {
+    if (r.state && (r.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(e) && ((r = Object.create(r)).wrapped = !0), this.elementProperties.set(e, r), !r.noAccessor) {
+      const s = Symbol(), t = this.getPropertyDescriptor(e, s, r);
       t !== void 0 && wo(this.prototype, e, t);
     }
   }
-  static getPropertyDescriptor(e, o, s) {
+  static getPropertyDescriptor(e, r, s) {
     const { get: t, set: a } = _o(this.prototype, e) ?? { get() {
-      return this[o];
+      return this[r];
     }, set(i) {
-      this[o] = i;
+      this[r] = i;
     } };
     return { get: t, set(i) {
-      const u = t == null ? void 0 : t.call(this);
-      a == null || a.call(this, i), this.requestUpdate(e, u, s);
+      const x = t == null ? void 0 : t.call(this);
+      a == null || a.call(this, i), this.requestUpdate(e, x, s);
     }, configurable: !0, enumerable: !0 };
   }
   static getPropertyOptions(e) {
     return this.elementProperties.get(e) ?? Zt;
   }
   static _$Ei() {
-    if (this.hasOwnProperty(se("elementProperties"))) return;
+    if (this.hasOwnProperty(le("elementProperties"))) return;
     const e = Mo(this);
     e.finalize(), e.l !== void 0 && (this.l = [...e.l]), this.elementProperties = new Map(e.elementProperties);
   }
   static finalize() {
-    if (this.hasOwnProperty(se("finalized"))) return;
-    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(se("properties"))) {
-      const o = this.properties, s = [...Co(o), ...Oo(o)];
-      for (const t of s) this.createProperty(t, o[t]);
+    if (this.hasOwnProperty(le("finalized"))) return;
+    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(le("properties"))) {
+      const r = this.properties, s = [...Co(r), ...Oo(r)];
+      for (const t of s) this.createProperty(t, r[t]);
     }
     const e = this[Symbol.metadata];
     if (e !== null) {
-      const o = litPropertyMetadata.get(e);
-      if (o !== void 0) for (const [s, t] of o) this.elementProperties.set(s, t);
+      const r = litPropertyMetadata.get(e);
+      if (r !== void 0) for (const [s, t] of r) this.elementProperties.set(s, t);
     }
     this._$Eh = /* @__PURE__ */ new Map();
-    for (const [o, s] of this.elementProperties) {
-      const t = this._$Eu(o, s);
-      t !== void 0 && this._$Eh.set(t, o);
+    for (const [r, s] of this.elementProperties) {
+      const t = this._$Eu(r, s);
+      t !== void 0 && this._$Eh.set(t, r);
     }
     this.elementStyles = this.finalizeStyles(this.styles);
   }
   static finalizeStyles(e) {
-    const o = [];
+    const r = [];
     if (Array.isArray(e)) {
       const s = new Set(e.flat(1 / 0).reverse());
-      for (const t of s) o.unshift(qt(t));
-    } else e !== void 0 && o.push(qt(e));
-    return o;
+      for (const t of s) r.unshift(qt(t));
+    } else e !== void 0 && r.push(qt(e));
+    return r;
   }
-  static _$Eu(e, o) {
-    const s = o.attribute;
+  static _$Eu(e, r) {
+    const s = r.attribute;
     return s === !1 ? void 0 : typeof s == "string" ? s : typeof e == "string" ? e.toLowerCase() : void 0;
   }
   constructor() {
@@ -142,19 +142,19 @@ let q = class extends HTMLElement {
   }
   _$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));
+    this._$ES = new Promise((r) => this.enableUpdating = r), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), (e = this.constructor.l) == null || e.forEach((r) => r(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));
+    var r;
+    (this._$EO ?? (this._$EO = /* @__PURE__ */ new Set())).add(e), this.renderRoot !== void 0 && this.isConnected && ((r = e.hostConnected) == null || r.call(e));
   }
   removeController(e) {
-    var o;
-    (o = this._$EO) == null || o.delete(e);
+    var r;
+    (r = this._$EO) == null || r.delete(e);
   }
   _$E_() {
-    const e = /* @__PURE__ */ new Map(), o = this.constructor.elementProperties;
-    for (const s of o.keys()) this.hasOwnProperty(s) && (e.set(s, this[s]), delete this[s]);
+    const e = /* @__PURE__ */ new Map(), r = this.constructor.elementProperties;
+    for (const s of r.keys()) this.hasOwnProperty(s) && (e.set(s, this[s]), delete this[s]);
     e.size > 0 && (this._$Ep = e);
   }
   createRenderRoot() {
@@ -163,59 +163,59 @@ let q = class extends HTMLElement {
   }
   connectedCallback() {
     var e;
-    this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this.enableUpdating(!0), (e = this._$EO) == null || e.forEach((o) => {
+    this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this.enableUpdating(!0), (e = this._$EO) == null || e.forEach((r) => {
       var s;
-      return (s = o.hostConnected) == null ? void 0 : s.call(o);
+      return (s = r.hostConnected) == null ? void 0 : s.call(r);
     });
   }
   enableUpdating(e) {
   }
   disconnectedCallback() {
     var e;
-    (e = this._$EO) == null || e.forEach((o) => {
+    (e = this._$EO) == null || e.forEach((r) => {
       var s;
-      return (s = o.hostDisconnected) == null ? void 0 : s.call(o);
+      return (s = r.hostDisconnected) == null ? void 0 : s.call(r);
     });
   }
-  attributeChangedCallback(e, o, s) {
+  attributeChangedCallback(e, r, s) {
     this._$AK(e, s);
   }
-  _$ET(e, o) {
+  _$ET(e, r) {
     var a;
     const s = this.constructor.elementProperties.get(e), t = this.constructor._$Eu(e, s);
     if (t !== void 0 && s.reflect === !0) {
-      const i = (((a = s.converter) == null ? void 0 : a.toAttribute) !== void 0 ? s.converter : qe).toAttribute(o, s.type);
+      const i = (((a = s.converter) == null ? void 0 : a.toAttribute) !== void 0 ? s.converter : Fe).toAttribute(r, s.type);
       this._$Em = e, i == null ? this.removeAttribute(t) : this.setAttribute(t, i), this._$Em = null;
     }
   }
-  _$AK(e, o) {
+  _$AK(e, r) {
     var a, i;
     const s = this.constructor, t = s._$Eh.get(e);
     if (t !== void 0 && this._$Em !== t) {
-      const u = s.getPropertyOptions(t), v = typeof u.converter == "function" ? { fromAttribute: u.converter } : ((a = u.converter) == null ? void 0 : a.fromAttribute) !== void 0 ? u.converter : qe;
+      const x = s.getPropertyOptions(t), v = typeof x.converter == "function" ? { fromAttribute: x.converter } : ((a = x.converter) == null ? void 0 : a.fromAttribute) !== void 0 ? x.converter : Fe;
       this._$Em = t;
-      const f = v.fromAttribute(o, u.type);
+      const f = v.fromAttribute(r, x.type);
       this[t] = f ?? ((i = this._$Ej) == null ? void 0 : i.get(t)) ?? f, this._$Em = null;
     }
   }
-  requestUpdate(e, o, s, t = !1, a) {
+  requestUpdate(e, r, s, t = !1, a) {
     var i;
     if (e !== void 0) {
-      const u = this.constructor;
-      if (t === !1 && (a = this[e]), s ?? (s = u.getPropertyOptions(e)), !((s.hasChanged ?? Ot)(a, o) || s.useDefault && s.reflect && a === ((i = this._$Ej) == null ? void 0 : i.get(e)) && !this.hasAttribute(u._$Eu(e, s)))) return;
-      this.C(e, o, s);
+      const x = this.constructor;
+      if (t === !1 && (a = this[e]), s ?? (s = x.getPropertyOptions(e)), !((s.hasChanged ?? Ot)(a, r) || s.useDefault && s.reflect && a === ((i = this._$Ej) == null ? void 0 : i.get(e)) && !this.hasAttribute(x._$Eu(e, s)))) return;
+      this.C(e, r, s);
     }
     this.isUpdatePending === !1 && (this._$ES = this._$EP());
   }
-  C(e, o, { useDefault: s, reflect: t, wrapped: a }, i) {
-    s && !(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 || s || (o = void 0), this._$AL.set(e, o)), t === !0 && this._$Em !== e && (this._$Eq ?? (this._$Eq = /* @__PURE__ */ new Set())).add(e));
+  C(e, r, { useDefault: s, reflect: t, wrapped: a }, i) {
+    s && !(this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Map())).has(e) && (this._$Ej.set(e, i ?? r ?? this[e]), a !== !0 || i !== void 0) || (this._$AL.has(e) || (this.hasUpdated || s || (r = void 0), this._$AL.set(e, r)), 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);
+    } catch (r) {
+      Promise.reject(r);
     }
     const e = this.scheduleUpdate();
     return e != null && await e, !this.isUpdatePending;
@@ -233,27 +233,27 @@ let q = class extends HTMLElement {
       }
       const t = this.constructor.elementProperties;
       if (t.size > 0) for (const [a, i] of t) {
-        const { wrapped: u } = i, v = this[a];
-        u !== !0 || this._$AL.has(a) || v === void 0 || this.C(a, void 0, i, v);
+        const { wrapped: x } = i, v = this[a];
+        x !== !0 || this._$AL.has(a) || v === void 0 || this.C(a, void 0, i, v);
       }
     }
     let e = !1;
-    const o = this._$AL;
+    const r = this._$AL;
     try {
-      e = this.shouldUpdate(o), e ? (this.willUpdate(o), (s = this._$EO) == null || s.forEach((t) => {
+      e = this.shouldUpdate(r), e ? (this.willUpdate(r), (s = this._$EO) == null || s.forEach((t) => {
         var a;
         return (a = t.hostUpdate) == null ? void 0 : a.call(t);
-      }), this.update(o)) : this._$EM();
+      }), this.update(r)) : this._$EM();
     } catch (t) {
       throw e = !1, this._$EM(), t;
     }
-    e && this._$AE(o);
+    e && this._$AE(r);
   }
   willUpdate(e) {
   }
   _$AE(e) {
-    var o;
-    (o = this._$EO) == null || o.forEach((s) => {
+    var r;
+    (r = this._$EO) == null || r.forEach((s) => {
       var t;
       return (t = s.hostUpdated) == null ? void 0 : t.call(s);
     }), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(e)), this.updated(e);
@@ -271,85 +271,85 @@ let q = class extends HTMLElement {
     return !0;
   }
   update(e) {
-    this._$Eq && (this._$Eq = this._$Eq.forEach((o) => this._$ET(o, this[o]))), this._$EM();
+    this._$Eq && (this._$Eq = this._$Eq.forEach((r) => this._$ET(r, this[r]))), this._$EM();
   }
   updated(e) {
   }
   firstUpdated(e) {
   }
 };
-q.elementStyles = [], q.shadowRootOptions = { mode: "open" }, q[se("elementProperties")] = /* @__PURE__ */ new Map(), q[se("finalized")] = /* @__PURE__ */ new Map(), pt == null || pt({ ReactiveElement: q }), (M.reactiveElementVersions ?? (M.reactiveElementVersions = [])).push("2.1.2");
+G.elementStyles = [], G.shadowRootOptions = { mode: "open" }, G[le("elementProperties")] = /* @__PURE__ */ new Map(), G[le("finalized")] = /* @__PURE__ */ new Map(), pt == null || pt({ ReactiveElement: G }), (P.reactiveElementVersions ?? (P.reactiveElementVersions = [])).push("2.1.2");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const ae = globalThis, Kt = (r) => r, Fe = ae.trustedTypes, Gt = Fe ? Fe.createPolicy("lit-html", { createHTML: (r) => r }) : void 0, ro = "$lit$", O = `lit$${Math.random().toFixed(9).slice(2)}$`, so = "?" + O, Ao = `<${so}>`, V = document, ie = () => V.createComment(""), ne = (r) => r === null || typeof r != "object" && typeof r != "function", Mt = Array.isArray, ko = (r) => Mt(r) || typeof (r == null ? void 0 : r[Symbol.iterator]) == "function", vt = `[ 	
-\f\r]`, re = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, Wt = /-->/g, Xt = />/g, k = RegExp(`>|${vt}(?:([^\\s"'>=/]+)(${vt}*=${vt}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), Yt = /'/g, Jt = /"/g, ao = /^(?:script|style|textarea|title)$/i, io = (r) => (e, ...o) => ({ _$litType$: r, strings: e, values: o }), c = io(1), l = io(2), m = Symbol.for("lit-noChange"), x = Symbol.for("lit-nothing"), Qt = /* @__PURE__ */ new WeakMap(), E = V.createTreeWalker(V, 129);
-function no(r, e) {
-  if (!Mt(r) || !r.hasOwnProperty("raw")) throw Error("invalid template strings array");
+const ce = globalThis, Kt = (o) => o, Ze = ce.trustedTypes, Gt = Ze ? Ze.createPolicy("lit-html", { createHTML: (o) => o }) : void 0, ro = "$lit$", M = `lit$${Math.random().toFixed(9).slice(2)}$`, so = "?" + M, Ao = `<${so}>`, j = document, de = () => j.createComment(""), he = (o) => o === null || typeof o != "object" && typeof o != "function", Mt = Array.isArray, ko = (o) => Mt(o) || typeof (o == null ? void 0 : o[Symbol.iterator]) == "function", vt = `[ 	
+\f\r]`, ne = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, Wt = /-->/g, Xt = />/g, L = RegExp(`>|${vt}(?:([^\\s"'>=/]+)(${vt}*=${vt}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), Yt = /'/g, Jt = /"/g, ao = /^(?:script|style|textarea|title)$/i, io = (o) => (e, ...r) => ({ _$litType$: o, strings: e, values: r }), c = io(1), l = io(2), m = Symbol.for("lit-noChange"), u = Symbol.for("lit-nothing"), Qt = /* @__PURE__ */ new WeakMap(), S = j.createTreeWalker(j, 129);
+function no(o, e) {
+  if (!Mt(o) || !o.hasOwnProperty("raw")) throw Error("invalid template strings array");
   return Gt !== void 0 ? Gt.createHTML(e) : e;
 }
-const Lo = (r, e) => {
-  const o = r.length - 1, s = [];
-  let t, a = e === 2 ? "<svg>" : e === 3 ? "<math>" : "", i = re;
-  for (let u = 0; u < o; u++) {
-    const v = r[u];
-    let f, b, g = -1, w = 0;
-    for (; w < v.length && (i.lastIndex = w, b = i.exec(v), b !== null); ) w = i.lastIndex, i === re ? b[1] === "!--" ? i = Wt : b[1] !== void 0 ? i = Xt : b[2] !== void 0 ? (ao.test(b[2]) && (t = RegExp("</" + b[2], "g")), i = k) : b[3] !== void 0 && (i = k) : i === k ? b[0] === ">" ? (i = t ?? re, g = -1) : b[1] === void 0 ? g = -2 : (g = i.lastIndex - b[2].length, f = b[1], i = b[3] === void 0 ? k : b[3] === '"' ? Jt : Yt) : i === Jt || i === Yt ? i = k : i === Wt || i === Xt ? i = re : (i = k, t = void 0);
-    const C = i === k && r[u + 1].startsWith("/>") ? " " : "";
-    a += i === re ? v + Ao : g >= 0 ? (s.push(f), v.slice(0, g) + ro + v.slice(g) + O + C) : v + O + (g === -2 ? u : C);
-  }
-  return [no(r, a + (r[o] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), s];
+const Lo = (o, e) => {
+  const r = o.length - 1, s = [];
+  let t, a = e === 2 ? "<svg>" : e === 3 ? "<math>" : "", i = ne;
+  for (let x = 0; x < r; x++) {
+    const v = o[x];
+    let f, b, g = -1, _ = 0;
+    for (; _ < v.length && (i.lastIndex = _, b = i.exec(v), b !== null); ) _ = i.lastIndex, i === ne ? b[1] === "!--" ? i = Wt : b[1] !== void 0 ? i = Xt : b[2] !== void 0 ? (ao.test(b[2]) && (t = RegExp("</" + b[2], "g")), i = L) : b[3] !== void 0 && (i = L) : i === L ? b[0] === ">" ? (i = t ?? ne, g = -1) : b[1] === void 0 ? g = -2 : (g = i.lastIndex - b[2].length, f = b[1], i = b[3] === void 0 ? L : b[3] === '"' ? Jt : Yt) : i === Jt || i === Yt ? i = L : i === Wt || i === Xt ? i = ne : (i = L, t = void 0);
+    const O = i === L && o[x + 1].startsWith("/>") ? " " : "";
+    a += i === ne ? v + Ao : g >= 0 ? (s.push(f), v.slice(0, g) + ro + v.slice(g) + M + O) : v + M + (g === -2 ? x : O);
+  }
+  return [no(o, a + (o[r] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), s];
 };
-class le {
-  constructor({ strings: e, _$litType$: o }, s) {
+class pe {
+  constructor({ strings: e, _$litType$: r }, s) {
     let t;
     this.parts = [];
     let a = 0, i = 0;
-    const u = e.length - 1, v = this.parts, [f, b] = Lo(e, o);
-    if (this.el = le.createElement(f, s), E.currentNode = this.el.content, o === 2 || o === 3) {
+    const x = e.length - 1, v = this.parts, [f, b] = Lo(e, r);
+    if (this.el = pe.createElement(f, s), S.currentNode = this.el.content, r === 2 || r === 3) {
       const g = this.el.content.firstChild;
       g.replaceWith(...g.childNodes);
     }
-    for (; (t = E.nextNode()) !== null && v.length < u; ) {
+    for (; (t = S.nextNode()) !== null && v.length < x; ) {
       if (t.nodeType === 1) {
         if (t.hasAttributes()) for (const g of t.getAttributeNames()) if (g.endsWith(ro)) {
-          const w = b[i++], C = t.getAttribute(g).split(O), Re = /([.?@])?(.*)/.exec(w);
-          v.push({ type: 1, index: a, name: Re[2], strings: C, ctor: Re[1] === "." ? So : Re[1] === "?" ? Vo : Re[1] === "@" ? jo : ot }), t.removeAttribute(g);
-        } else g.startsWith(O) && (v.push({ type: 6, index: a }), t.removeAttribute(g));
+          const _ = b[i++], O = t.getAttribute(g).split(M), Re = /([.?@])?(.*)/.exec(_);
+          v.push({ type: 1, index: a, name: Re[2], strings: O, ctor: Re[1] === "." ? So : Re[1] === "?" ? Vo : Re[1] === "@" ? jo : rt }), t.removeAttribute(g);
+        } else g.startsWith(M) && (v.push({ type: 6, index: a }), t.removeAttribute(g));
         if (ao.test(t.tagName)) {
-          const g = t.textContent.split(O), w = g.length - 1;
-          if (w > 0) {
-            t.textContent = Fe ? Fe.emptyScript : "";
-            for (let C = 0; C < w; C++) t.append(g[C], ie()), E.nextNode(), v.push({ type: 2, index: ++a });
-            t.append(g[w], ie());
+          const g = t.textContent.split(M), _ = g.length - 1;
+          if (_ > 0) {
+            t.textContent = Ze ? Ze.emptyScript : "";
+            for (let O = 0; O < _; O++) t.append(g[O], de()), S.nextNode(), v.push({ type: 2, index: ++a });
+            t.append(g[_], de());
           }
         }
       } else if (t.nodeType === 8) if (t.data === so) v.push({ type: 2, index: a });
       else {
         let g = -1;
-        for (; (g = t.data.indexOf(O, g + 1)) !== -1; ) v.push({ type: 7, index: a }), g += O.length - 1;
+        for (; (g = t.data.indexOf(M, g + 1)) !== -1; ) v.push({ type: 7, index: a }), g += M.length - 1;
       }
       a++;
     }
   }
-  static createElement(e, o) {
-    const s = V.createElement("template");
+  static createElement(e, r) {
+    const s = j.createElement("template");
     return s.innerHTML = e, s;
   }
 }
-function F(r, e, o = r, s) {
-  var i, u;
+function W(o, e, r = o, s) {
+  var i, x;
   if (e === m) return e;
-  let t = s !== void 0 ? (i = o._$Co) == null ? void 0 : i[s] : o._$Cl;
-  const a = ne(e) ? void 0 : e._$litDirective$;
-  return (t == null ? void 0 : t.constructor) !== a && ((u = t == null ? void 0 : t._$AO) == null || u.call(t, !1), a === void 0 ? t = void 0 : (t = new a(r), t._$AT(r, o, s)), s !== void 0 ? (o._$Co ?? (o._$Co = []))[s] = t : o._$Cl = t), t !== void 0 && (e = F(r, t._$AS(r, e.values), t, s)), e;
+  let t = s !== void 0 ? (i = r._$Co) == null ? void 0 : i[s] : r._$Cl;
+  const a = he(e) ? void 0 : e._$litDirective$;
+  return (t == null ? void 0 : t.constructor) !== a && ((x = t == null ? void 0 : t._$AO) == null || x.call(t, !1), a === void 0 ? t = void 0 : (t = new a(o), t._$AT(o, r, s)), s !== void 0 ? (r._$Co ?? (r._$Co = []))[s] = t : r._$Cl = t), t !== void 0 && (e = W(o, t._$AS(o, e.values), t, s)), e;
 }
 class Eo {
-  constructor(e, o) {
-    this._$AV = [], this._$AN = void 0, this._$AD = e, this._$AM = o;
+  constructor(e, r) {
+    this._$AV = [], this._$AN = void 0, this._$AD = e, this._$AM = r;
   }
   get parentNode() {
     return this._$AM.parentNode;
@@ -358,35 +358,35 @@ class Eo {
     return this._$AM._$AU;
   }
   u(e) {
-    const { el: { content: o }, parts: s } = this._$AD, t = ((e == null ? void 0 : e.creationScope) ?? V).importNode(o, !0);
-    E.currentNode = t;
-    let a = E.nextNode(), i = 0, u = 0, v = s[0];
+    const { el: { content: r }, parts: s } = this._$AD, t = ((e == null ? void 0 : e.creationScope) ?? j).importNode(r, !0);
+    S.currentNode = t;
+    let a = S.nextNode(), i = 0, x = 0, v = s[0];
     for (; v !== void 0; ) {
       if (i === v.index) {
         let f;
-        v.type === 2 ? f = new Le(a, a.nextSibling, this, e) : v.type === 1 ? f = new v.ctor(a, v.name, v.strings, this, e) : v.type === 6 && (f = new Do(a, this, e)), this._$AV.push(f), v = s[++u];
+        v.type === 2 ? f = new Ee(a, a.nextSibling, this, e) : v.type === 1 ? f = new v.ctor(a, v.name, v.strings, this, e) : v.type === 6 && (f = new Do(a, this, e)), this._$AV.push(f), v = s[++x];
       }
-      i !== (v == null ? void 0 : v.index) && (a = E.nextNode(), i++);
+      i !== (v == null ? void 0 : v.index) && (a = S.nextNode(), i++);
     }
-    return E.currentNode = V, t;
+    return S.currentNode = j, t;
   }
   p(e) {
-    let o = 0;
-    for (const s of this._$AV) s !== void 0 && (s.strings !== void 0 ? (s._$AI(e, s, o), o += s.strings.length - 2) : s._$AI(e[o])), o++;
+    let r = 0;
+    for (const s of this._$AV) s !== void 0 && (s.strings !== void 0 ? (s._$AI(e, s, r), r += s.strings.length - 2) : s._$AI(e[r])), r++;
   }
 }
-class Le {
+class Ee {
   get _$AU() {
     var e;
     return ((e = this._$AM) == null ? void 0 : e._$AU) ?? this._$Cv;
   }
-  constructor(e, o, s, t) {
-    this.type = 2, this._$AH = x, this._$AN = void 0, this._$AA = e, this._$AB = o, this._$AM = s, this.options = t, this._$Cv = (t == null ? void 0 : t.isConnected) ?? !0;
+  constructor(e, r, s, t) {
+    this.type = 2, this._$AH = u, this._$AN = void 0, this._$AA = e, this._$AB = r, this._$AM = s, 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;
+    const r = this._$AM;
+    return r !== void 0 && (e == null ? void 0 : e.nodeType) === 11 && (e = r.parentNode), e;
   }
   get startNode() {
     return this._$AA;
@@ -394,8 +394,8 @@ class Le {
   get endNode() {
     return this._$AB;
   }
-  _$AI(e, o = this) {
-    e = F(this, e, o), ne(e) ? e === x || e == null || e === "" ? (this._$AH !== x && this._$AR(), this._$AH = x) : e !== this._$AH && e !== m && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : ko(e) ? this.k(e) : this._(e);
+  _$AI(e, r = this) {
+    e = W(this, e, r), he(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) : ko(e) ? this.k(e) : this._(e);
   }
   O(e) {
     return this._$AA.parentNode.insertBefore(e, this._$AB);
@@ -404,135 +404,135 @@ class Le {
     this._$AH !== e && (this._$AR(), this._$AH = this.O(e));
   }
   _(e) {
-    this._$AH !== x && ne(this._$AH) ? this._$AA.nextSibling.data = e : this.T(V.createTextNode(e)), this._$AH = e;
+    this._$AH !== u && he(this._$AH) ? this._$AA.nextSibling.data = e : this.T(j.createTextNode(e)), this._$AH = e;
   }
   $(e) {
     var a;
-    const { values: o, _$litType$: s } = e, t = typeof s == "number" ? this._$AC(e) : (s.el === void 0 && (s.el = le.createElement(no(s.h, s.h[0]), this.options)), s);
-    if (((a = this._$AH) == null ? void 0 : a._$AD) === t) this._$AH.p(o);
+    const { values: r, _$litType$: s } = e, t = typeof s == "number" ? this._$AC(e) : (s.el === void 0 && (s.el = pe.createElement(no(s.h, s.h[0]), this.options)), s);
+    if (((a = this._$AH) == null ? void 0 : a._$AD) === t) this._$AH.p(r);
     else {
-      const i = new Eo(t, this), u = i.u(this.options);
-      i.p(o), this.T(u), this._$AH = i;
+      const i = new Eo(t, this), x = i.u(this.options);
+      i.p(r), this.T(x), this._$AH = i;
     }
   }
   _$AC(e) {
-    let o = Qt.get(e.strings);
-    return o === void 0 && Qt.set(e.strings, o = new le(e)), o;
+    let r = Qt.get(e.strings);
+    return r === void 0 && Qt.set(e.strings, r = new pe(e)), r;
   }
   k(e) {
     Mt(this._$AH) || (this._$AH = [], this._$AR());
-    const o = this._$AH;
+    const r = this._$AH;
     let s, t = 0;
-    for (const a of e) t === o.length ? o.push(s = new Le(this.O(ie()), this.O(ie()), this, this.options)) : s = o[t], s._$AI(a), t++;
-    t < o.length && (this._$AR(s && s._$AB.nextSibling, t), o.length = t);
+    for (const a of e) t === r.length ? r.push(s = new Ee(this.O(de()), this.O(de()), this, this.options)) : s = r[t], s._$AI(a), t++;
+    t < r.length && (this._$AR(s && s._$AB.nextSibling, t), r.length = t);
   }
-  _$AR(e = this._$AA.nextSibling, o) {
+  _$AR(e = this._$AA.nextSibling, r) {
     var s;
-    for ((s = this._$AP) == null ? void 0 : s.call(this, !1, !0, o); e !== this._$AB; ) {
+    for ((s = this._$AP) == null ? void 0 : s.call(this, !1, !0, r); e !== this._$AB; ) {
       const t = Kt(e).nextSibling;
       Kt(e).remove(), e = t;
     }
   }
   setConnected(e) {
-    var o;
-    this._$AM === void 0 && (this._$Cv = e, (o = this._$AP) == null || o.call(this, e));
+    var r;
+    this._$AM === void 0 && (this._$Cv = e, (r = this._$AP) == null || r.call(this, e));
   }
 }
-class ot {
+class rt {
   get tagName() {
     return this.element.tagName;
   }
   get _$AU() {
     return this._$AM._$AU;
   }
-  constructor(e, o, s, t, a) {
-    this.type = 1, this._$AH = x, this._$AN = void 0, this.element = e, this.name = o, this._$AM = t, this.options = a, s.length > 2 || s[0] !== "" || s[1] !== "" ? (this._$AH = Array(s.length - 1).fill(new String()), this.strings = s) : this._$AH = x;
+  constructor(e, r, s, t, a) {
+    this.type = 1, this._$AH = u, this._$AN = void 0, this.element = e, this.name = r, this._$AM = t, this.options = a, s.length > 2 || s[0] !== "" || s[1] !== "" ? (this._$AH = Array(s.length - 1).fill(new String()), this.strings = s) : this._$AH = u;
   }
-  _$AI(e, o = this, s, t) {
+  _$AI(e, r = this, s, t) {
     const a = this.strings;
     let i = !1;
-    if (a === void 0) e = F(this, e, o, 0), i = !ne(e) || e !== this._$AH && e !== m, i && (this._$AH = e);
+    if (a === void 0) e = W(this, e, r, 0), i = !he(e) || e !== this._$AH && e !== m, i && (this._$AH = e);
     else {
-      const u = e;
+      const x = e;
       let v, f;
-      for (e = a[0], v = 0; v < a.length - 1; v++) f = F(this, u[s + v], o, v), f === m && (f = this._$AH[v]), i || (i = !ne(f) || f !== this._$AH[v]), f === x ? e = x : e !== x && (e += (f ?? "") + a[v + 1]), this._$AH[v] = f;
+      for (e = a[0], v = 0; v < a.length - 1; v++) f = W(this, x[s + v], r, v), f === m && (f = this._$AH[v]), i || (i = !he(f) || f !== this._$AH[v]), f === u ? e = u : e !== u && (e += (f ?? "") + a[v + 1]), this._$AH[v] = f;
     }
     i && !t && this.j(e);
   }
   j(e) {
-    e === x ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
+    e === u ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
   }
 }
-class So extends ot {
+class So extends rt {
   constructor() {
     super(...arguments), this.type = 3;
   }
   j(e) {
-    this.element[this.name] = e === x ? void 0 : e;
+    this.element[this.name] = e === u ? void 0 : e;
   }
 }
-class Vo extends ot {
+class Vo extends rt {
   constructor() {
     super(...arguments), this.type = 4;
   }
   j(e) {
-    this.element.toggleAttribute(this.name, !!e && e !== x);
+    this.element.toggleAttribute(this.name, !!e && e !== u);
   }
 }
-class jo extends ot {
-  constructor(e, o, s, t, a) {
-    super(e, o, s, t, a), this.type = 5;
+class jo extends rt {
+  constructor(e, r, s, t, a) {
+    super(e, r, s, t, a), this.type = 5;
   }
-  _$AI(e, o = this) {
-    if ((e = F(this, e, o, 0) ?? x) === m) return;
-    const s = this._$AH, t = e === x && s !== x || e.capture !== s.capture || e.once !== s.once || e.passive !== s.passive, a = e !== x && (s === x || t);
+  _$AI(e, r = this) {
+    if ((e = W(this, e, r, 0) ?? u) === m) return;
+    const s = this._$AH, t = e === u && s !== u || e.capture !== s.capture || e.once !== s.once || e.passive !== s.passive, a = e !== u && (s === u || t);
     t && this.element.removeEventListener(this.name, this, s), 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);
+    var r;
+    typeof this._$AH == "function" ? this._$AH.call(((r = this.options) == null ? void 0 : r.host) ?? this.element, e) : this._$AH.handleEvent(e);
   }
 }
 class Do {
-  constructor(e, o, s) {
-    this.element = e, this.type = 6, this._$AN = void 0, this._$AM = o, this.options = s;
+  constructor(e, r, s) {
+    this.element = e, this.type = 6, this._$AN = void 0, this._$AM = r, this.options = s;
   }
   get _$AU() {
     return this._$AM._$AU;
   }
   _$AI(e) {
-    F(this, e);
+    W(this, e);
   }
 }
-const ut = ae.litHtmlPolyfillSupport;
-ut == null || ut(le, Le), (ae.litHtmlVersions ?? (ae.litHtmlVersions = [])).push("3.3.3");
-const Ho = (r, e, o) => {
-  const s = (o == null ? void 0 : o.renderBefore) ?? e;
+const ut = ce.litHtmlPolyfillSupport;
+ut == null || ut(pe, Ee), (ce.litHtmlVersions ?? (ce.litHtmlVersions = [])).push("3.3.3");
+const Ho = (o, e, r) => {
+  const s = (r == null ? void 0 : r.renderBefore) ?? e;
   let t = s._$litPart$;
   if (t === void 0) {
-    const a = (o == null ? void 0 : o.renderBefore) ?? null;
-    s._$litPart$ = t = new Le(e.insertBefore(ie(), a), a, void 0, o ?? {});
+    const a = (r == null ? void 0 : r.renderBefore) ?? null;
+    s._$litPart$ = t = new Ee(e.insertBefore(de(), a), a, void 0, r ?? {});
   }
-  return t._$AI(r), t;
+  return t._$AI(o), t;
 };
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const S = globalThis;
-let p = class extends q {
+const V = globalThis;
+let p = class extends G {
   constructor() {
     super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
   }
   createRenderRoot() {
-    var o;
+    var r;
     const e = super.createRenderRoot();
-    return (o = this.renderOptions).renderBefore ?? (o.renderBefore = e.firstChild), e;
+    return (r = this.renderOptions).renderBefore ?? (r.renderBefore = e.firstChild), e;
   }
   update(e) {
-    const o = this.render();
-    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(e), this._$Do = Ho(o, this.renderRoot, this.renderOptions);
+    const r = this.render();
+    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(e), this._$Do = Ho(r, this.renderRoot, this.renderOptions);
   }
   connectedCallback() {
     var e;
@@ -547,78 +547,78 @@ let p = class extends q {
   }
 };
 var to;
-p._$litElement$ = !0, p.finalized = !0, (to = S.litElementHydrateSupport) == null || to.call(S, { LitElement: p });
-const xt = S.litElementPolyfillSupport;
+p._$litElement$ = !0, p.finalized = !0, (to = V.litElementHydrateSupport) == null || to.call(V, { LitElement: p });
+const xt = V.litElementPolyfillSupport;
 xt == null || xt({ LitElement: p });
-(S.litElementVersions ?? (S.litElementVersions = [])).push("4.2.2");
+(V.litElementVersions ?? (V.litElementVersions = [])).push("4.2.2");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const h = (r) => (e, o) => {
-  o !== void 0 ? o.addInitializer(() => {
-    customElements.define(r, e);
-  }) : customElements.define(r, e);
+const h = (o) => (e, r) => {
+  r !== void 0 ? r.addInitializer(() => {
+    customElements.define(o, e);
+  }) : customElements.define(o, e);
 };
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const zo = { attribute: !0, type: String, converter: qe, reflect: !1, hasChanged: Ot }, To = (r = zo, e, o) => {
-  const { kind: s, metadata: t } = o;
+const zo = { attribute: !0, type: String, converter: Fe, reflect: !1, hasChanged: Ot }, To = (o = zo, e, r) => {
+  const { kind: s, metadata: t } = r;
   let a = globalThis.litPropertyMetadata.get(t);
-  if (a === void 0 && globalThis.litPropertyMetadata.set(t, a = /* @__PURE__ */ new Map()), s === "setter" && ((r = Object.create(r)).wrapped = !0), a.set(o.name, r), s === "accessor") {
-    const { name: i } = o;
-    return { set(u) {
+  if (a === void 0 && globalThis.litPropertyMetadata.set(t, a = /* @__PURE__ */ new Map()), s === "setter" && ((o = Object.create(o)).wrapped = !0), a.set(r.name, o), s === "accessor") {
+    const { name: i } = r;
+    return { set(x) {
       const v = e.get.call(this);
-      e.set.call(this, u), this.requestUpdate(i, v, r, !0, u);
-    }, init(u) {
-      return u !== void 0 && this.C(i, void 0, r, u), u;
+      e.set.call(this, x), this.requestUpdate(i, v, o, !0, x);
+    }, init(x) {
+      return x !== void 0 && this.C(i, void 0, o, x), x;
     } };
   }
   if (s === "setter") {
-    const { name: i } = o;
-    return function(u) {
+    const { name: i } = r;
+    return function(x) {
       const v = this[i];
-      e.call(this, u), this.requestUpdate(i, v, r, !0, u);
+      e.call(this, x), this.requestUpdate(i, v, o, !0, x);
     };
   }
   throw Error("Unsupported decorator location: " + s);
 };
-function n(r) {
-  return (e, o) => typeof o == "object" ? To(r, e, o) : ((s, t, a) => {
+function n(o) {
+  return (e, r) => typeof r == "object" ? To(o, e, r) : ((s, t, a) => {
     const i = t.hasOwnProperty(a);
     return t.constructor.createProperty(a, s), i ? Object.getOwnPropertyDescriptor(t, a) : void 0;
-  })(r, e, o);
+  })(o, e, r);
 }
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-function rt(r) {
-  return n({ ...r, state: !0, attribute: !1 });
+function Se(o) {
+  return n({ ...o, state: !0, attribute: !1 });
 }
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const Bo = (r, e, o) => (o.configurable = !0, o.enumerable = !0, Reflect.decorate && typeof e != "object" && Object.defineProperty(r, e, o), o);
+const Io = (o, e, r) => (r.configurable = !0, r.enumerable = !0, Reflect.decorate && typeof e != "object" && Object.defineProperty(o, e, r), r);
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-function Pt(r, e) {
-  return (o, s, t) => {
+function Pt(o, e) {
+  return (r, s, t) => {
     const a = (i) => {
-      var u;
-      return ((u = i.renderRoot) == null ? void 0 : u.querySelector(r)) ?? null;
+      var x;
+      return ((x = i.renderRoot) == null ? void 0 : x.querySelector(o)) ?? null;
     };
-    return Bo(o, s, { get() {
+    return Io(r, s, { get() {
       return a(this);
     } });
   };
@@ -628,21 +628,21 @@ function Pt(r, e) {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const L = { ATTRIBUTE: 1, PROPERTY: 3, BOOLEAN_ATTRIBUTE: 4 }, lo = (r) => (...e) => ({ _$litDirective$: r, values: e });
+const E = { ATTRIBUTE: 1, PROPERTY: 3, BOOLEAN_ATTRIBUTE: 4 }, lo = (o) => (...e) => ({ _$litDirective$: o, values: e });
 class co {
   constructor(e) {
   }
   get _$AU() {
     return this._$AM._$AU;
   }
-  _$AT(e, o, s) {
-    this._$Ct = e, this._$AM = o, this._$Ci = s;
+  _$AT(e, r, s) {
+    this._$Ct = e, this._$AM = r, this._$Ci = s;
   }
-  _$AS(e, o) {
-    return this.update(e, o);
+  _$AS(e, r) {
+    return this.update(e, r);
   }
-  update(e, o) {
-    return this.render(...o);
+  update(e, r) {
+    return this.render(...r);
   }
 }
 /**
@@ -650,26 +650,26 @@ class co {
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const No = lo(class extends co {
-  constructor(r) {
+const Bo = lo(class extends co {
+  constructor(o) {
     var e;
-    if (super(r), r.type !== L.ATTRIBUTE || r.name !== "class" || ((e = r.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.");
+    if (super(o), o.type !== E.ATTRIBUTE || o.name !== "class" || ((e = o.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(r) {
-    return " " + Object.keys(r).filter((e) => r[e]).join(" ") + " ";
+  render(o) {
+    return " " + Object.keys(o).filter((e) => o[e]).join(" ") + " ";
   }
-  update(r, [e]) {
+  update(o, [e]) {
     var s, t;
     if (this.st === void 0) {
-      this.st = /* @__PURE__ */ new Set(), r.strings !== void 0 && (this.nt = new Set(r.strings.join(" ").split(/\s/).filter((a) => a !== "")));
+      this.st = /* @__PURE__ */ new Set(), o.strings !== void 0 && (this.nt = new Set(o.strings.join(" ").split(/\s/).filter((a) => a !== "")));
       for (const a in e) e[a] && !((s = this.nt) != null && s.has(a)) && this.st.add(a);
       return this.render(e);
     }
-    const o = r.element.classList;
-    for (const a of this.st) a in e || (o.remove(a), this.st.delete(a));
+    const r = o.element.classList;
+    for (const a of this.st) a in e || (r.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)));
+      i === this.st.has(a) || (t = this.nt) != null && t.has(a) || (i ? (r.add(a), this.st.add(a)) : (r.remove(a), this.st.delete(a)));
     }
     return m;
   }
@@ -679,39 +679,39 @@ const No = lo(class extends co {
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const Z = (r) => r ?? x;
-var Ro = Object.defineProperty, Uo = Object.getOwnPropertyDescriptor, R = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? Uo(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && Ro(e, o, t), t;
+const $ = (o) => o ?? u;
+var No = Object.defineProperty, Ro = Object.getOwnPropertyDescriptor, F = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? Ro(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && No(e, r, t), t;
 };
-let _ = class extends p {
+let C = class extends p {
   constructor() {
     super(...arguments), this.variant = "brand", this.size = "md", this.type = "button", this.disabled = !1;
   }
   render() {
-    const r = No({
+    const o = Bo({
       button: !0,
       [this.variant]: !0,
       [this.size]: !0
     });
     return this.href !== void 0 && !this.disabled ? c`
         <a
-          class=${r}
+          class=${o}
           href=${this.href}
-          target=${Z(this.target)}
-          rel=${Z(this.target === "_blank" ? "noreferrer" : void 0)}
+          target=${$(this.target)}
+          rel=${$(this.target === "_blank" ? "noreferrer" : void 0)}
         >
           <slot></slot>
         </a>
       ` : c`
-      <button class=${r} type=${this.type} ?disabled=${this.disabled}>
+      <button class=${o} type=${this.type} ?disabled=${this.disabled}>
         <slot></slot>
       </button>
     `;
   }
 };
-_.styles = d`
+C.styles = d`
     :host {
       display: inline-block;
     }
@@ -819,33 +819,33 @@ _.styles = d`
       border-radius: 0 var(--vox-radius-md) var(--vox-radius-md) 0;
     }
   `;
-R([
+F([
   n()
-], _.prototype, "variant", 2);
-R([
+], C.prototype, "variant", 2);
+F([
   n()
-], _.prototype, "size", 2);
-R([
+], C.prototype, "size", 2);
+F([
   n()
-], _.prototype, "href", 2);
-R([
+], C.prototype, "href", 2);
+F([
   n()
-], _.prototype, "target", 2);
-R([
+], C.prototype, "target", 2);
+F([
   n()
-], _.prototype, "type", 2);
-R([
+], C.prototype, "type", 2);
+F([
   n({ type: Boolean, reflect: !0 })
-], _.prototype, "disabled", 2);
-_ = R([
+], C.prototype, "disabled", 2);
+C = F([
   h("vox-button")
-], _);
-var Io = Object.defineProperty, qo = Object.getOwnPropertyDescriptor, At = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? qo(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && Io(e, o, t), t;
+], C);
+var Uo = Object.defineProperty, qo = Object.getOwnPropertyDescriptor, At = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? qo(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && Uo(e, r, t), t;
 };
-let ce = class extends p {
+let ve = class extends p {
   constructor() {
     super(...arguments), this.href = "#";
   }
@@ -861,7 +861,7 @@ let ce = class extends p {
     `;
   }
 };
-ce.styles = d`
+ve.styles = d`
     :host {
       display: inline-block;
       font-family: var(--vox-font-family-base);
@@ -900,23 +900,23 @@ ce.styles = d`
   `;
 At([
   n()
-], ce.prototype, "href", 2);
+], ve.prototype, "href", 2);
 At([
   n()
-], ce.prototype, "target", 2);
-ce = At([
+], ve.prototype, "target", 2);
+ve = At([
   h("vox-cta")
-], ce);
-var Fo = Object.defineProperty, Zo = Object.getOwnPropertyDescriptor, st = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? Zo(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && Fo(e, o, t), t;
+], ve);
+var Fo = Object.defineProperty, Zo = Object.getOwnPropertyDescriptor, st = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? Zo(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && Fo(e, r, t), t;
 };
 const eo = "vox-theme", Ue = "data-vox-theme";
-let K = class extends p {
+let X = 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 = (r) => {
-      localStorage.getItem(eo) || document.documentElement.setAttribute(Ue, r.matches ? "dark" : "light");
+    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 = (o) => {
+      localStorage.getItem(eo) || document.documentElement.setAttribute(Ue, o.matches ? "dark" : "light");
     };
   }
   connectedCallback() {
@@ -926,32 +926,32 @@ let K = class extends p {
     }), this.media.addEventListener("change", this.handleSystemChange);
   }
   disconnectedCallback() {
-    var r;
-    super.disconnectedCallback(), (r = this.observer) == null || r.disconnect(), this.media.removeEventListener("change", this.handleSystemChange);
+    var o;
+    super.disconnectedCallback(), (o = this.observer) == null || o.disconnect(), this.media.removeEventListener("change", this.handleSystemChange);
   }
   syncFromDocument() {
-    const r = document.documentElement.getAttribute(Ue) === "dark";
-    this.dark = r, this.toggleAttribute("dark", r);
+    const o = document.documentElement.getAttribute(Ue) === "dark";
+    this.dark = o, this.toggleAttribute("dark", o);
   }
   handleClick() {
-    const r = this.dark ? "light" : "dark";
-    document.documentElement.setAttribute(Ue, r), localStorage.setItem(eo, r), this.dispatchEvent(
+    const o = this.dark ? "light" : "dark";
+    document.documentElement.setAttribute(Ue, o), localStorage.setItem(eo, o), this.dispatchEvent(
       new CustomEvent("vox-theme-change", {
-        detail: { theme: r },
+        detail: { theme: o },
         bubbles: !0,
         composed: !0
       })
     );
   }
   render() {
-    const r = this.dark ? this.darkLabel : this.lightLabel;
+    const o = this.dark ? this.darkLabel : this.lightLabel;
     return c`
       <button
         type="button"
         role="switch"
         aria-checked=${this.dark}
-        aria-label=${r}
-        title=${r}
+        aria-label=${o}
+        title=${o}
         @click=${this.handleClick}
       >
         <span class="track">
@@ -968,7 +968,7 @@ let K = class extends p {
     `;
   }
 };
-K.styles = d`
+X.styles = d`
     :host {
       display: inline-flex;
     }
@@ -1029,17 +1029,17 @@ K.styles = d`
   `;
 st([
   n({ attribute: "light-label" })
-], K.prototype, "lightLabel", 2);
+], X.prototype, "lightLabel", 2);
 st([
   n({ attribute: "dark-label" })
-], K.prototype, "darkLabel", 2);
+], X.prototype, "darkLabel", 2);
 st([
-  rt()
-], K.prototype, "dark", 2);
-K = st([
+  Se()
+], X.prototype, "dark", 2);
+X = st([
   h("vox-theme-toggle")
-], K);
-const j = {
+], X);
+const D = {
   // Phase 1: shared UI baseline -----------------------------------------
   search: l`<circle cx="21" cy="21" r="13"/><path d="M30.5 30.5 L41 41"/>`,
   close: l`<path d="M14 14 L34 34 M34 14 L14 34"/>`,
@@ -1127,18 +1127,18 @@ const j = {
   accessibility: l`<circle cx="24" cy="24" r="18"/><circle cx="24" cy="16" r="2.6" fill="currentColor" stroke="none"/><path d="M14 21 H34 M24 21 V32 M24 25 L18 34 M24 25 L30 34"/>`,
   settings: l`<circle cx="24" cy="24" r="7"/><path d="M24 6 V12 M24 36 V42 M6 24 H12 M36 24 H42 M11 11 L15.2 15.2 M32.8 32.8 L37 37 M37 11 L32.8 15.2 M15.2 32.8 L11 37"/>`
 };
-var Ko = Object.defineProperty, Go = Object.getOwnPropertyDescriptor, at = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? Go(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && Ko(e, o, t), t;
+var Ko = Object.defineProperty, Go = Object.getOwnPropertyDescriptor, at = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? Go(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && Ko(e, r, t), t;
 };
-let G = class extends p {
+let Y = class extends p {
   constructor() {
     super(...arguments), this.name = "info", this.size = "md";
   }
   render() {
-    const r = j[this.name];
-    return r ? c`
+    const o = D[this.name];
+    return o ? c`
       <svg
         viewBox="0 0 48 48"
         fill="none"
@@ -1146,16 +1146,16 @@ let G = class extends p {
         stroke-width="2"
         stroke-linecap="round"
         stroke-linejoin="round"
-        role=${this.label ? "img" : x}
-        aria-hidden=${this.label ? x : "true"}
-        aria-label=${this.label ?? x}
+        role=${this.label ? "img" : u}
+        aria-hidden=${this.label ? u : "true"}
+        aria-label=${this.label ?? u}
       >
-        ${r}
+        ${o}
       </svg>
-    ` : x;
+    ` : u;
   }
 };
-G.styles = d`
+Y.styles = d`
     :host {
       display: inline-flex;
       flex: none;
@@ -1188,24 +1188,24 @@ G.styles = d`
   `;
 at([
   n()
-], G.prototype, "name", 2);
+], Y.prototype, "name", 2);
 at([
   n({ reflect: !0 })
-], G.prototype, "size", 2);
+], Y.prototype, "size", 2);
 at([
   n()
-], G.prototype, "label", 2);
-G = at([
+], Y.prototype, "label", 2);
+Y = at([
   h("vox-icon")
-], G);
-var Wo = Object.defineProperty, Ee = (r, e, o, s) => {
-  for (var t = void 0, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = i(e, o, t) || t);
-  return t && Wo(e, o, t), t;
+], Y);
+var Wo = Object.defineProperty, se = (o, e, r, s) => {
+  for (var t = void 0, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = i(e, r, t) || t);
+  return t && Wo(e, r, t), t;
 };
-const Ut = class Ut extends p {
+const Rt = class Rt extends p {
   constructor() {
-    super(), this.name = "", this.label = "", this.note = "", this.disabled = !1, this.required = !1, this.internals = this.attachInternals();
+    super(), this.invalid = !1, this.name = "", this.label = "", this.note = "", this.disabled = !1, this.required = !1, this.internals = this.attachInternals();
   }
   get form() {
     return this.internals.form;
@@ -1224,37 +1224,44 @@ const Ut = class Ut extends p {
   }
   /** Mirror a native inner control's validity onto the host element. */
   syncValidity(e) {
-    this.internals.setValidity(e.validity, e.validationMessage, e);
+    this.internals.setValidity(e.validity, e.validationMessage, e), this.invalid = !e.validity.valid;
   }
   renderLabel(e) {
     return this.label ? c`
       <label class="label" for=${e}>
-        ${this.label}${this.required ? c`<span class="required-mark" aria-hidden="true"> *</span>` : x}
+        ${this.label}${this.required ? c`<span class="required-mark" aria-hidden="true"> *</span>` : u}
       </label>
-    ` : x;
+    ` : u;
+  }
+  /** `note`'s id when present, for `aria-describedby` on the native control. */
+  get noteId() {
+    return this.note ? "note" : void 0;
   }
   renderNote() {
-    return this.note ? c`<p class="note">${this.note}</p>` : x;
+    return this.note ? c`<p class="note" id="note">${this.note}</p>` : u;
   }
 };
-Ut.formAssociated = !0;
-let y = Ut;
-Ee([
+Rt.formAssociated = !0;
+let y = Rt;
+se([
+  Se()
+], y.prototype, "invalid");
+se([
   n()
 ], y.prototype, "name");
-Ee([
+se([
   n()
 ], y.prototype, "label");
-Ee([
+se([
   n()
 ], y.prototype, "note");
-Ee([
+se([
   n({ type: Boolean, reflect: !0 })
 ], y.prototype, "disabled");
-Ee([
+se([
   n({ type: Boolean, reflect: !0 })
 ], y.prototype, "required");
-const Se = d`
+const Ve = d`
   :host {
     display: block;
     font-family: var(--vox-font-family-base);
@@ -1309,6 +1316,15 @@ const Se = d`
     box-shadow: 0 0 0 3px var(--vox-color-brand-soft);
   }
 
+  .control[aria-invalid='true'] {
+    border-color: var(--vox-color-danger-1);
+  }
+
+  .control[aria-invalid='true']:focus {
+    border-color: var(--vox-color-danger-1);
+    box-shadow: 0 0 0 3px var(--vox-color-danger-soft);
+  }
+
   /* Corner flattening when placed inside a <vox-input-group>. */
   :host([data-vox-group]) .control {
     border-radius: 0;
@@ -1350,12 +1366,12 @@ const Se = d`
     margin: 0;
   }
 `;
-var Xo = Object.defineProperty, Yo = Object.getOwnPropertyDescriptor, kt = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? Yo(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && Xo(e, o, t), t;
+var Xo = Object.defineProperty, Yo = Object.getOwnPropertyDescriptor, kt = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? Yo(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && Xo(e, r, t), t;
 };
-let de = class extends y {
+let ue = class extends y {
   constructor() {
     super(...arguments), this.checked = !1, this.value = "on";
   }
@@ -1363,14 +1379,14 @@ let de = class extends y {
     this.checked = !1;
   }
   updated() {
-    this.internals.setFormValue(this.checked ? this.value : null), this.internals.setValidity(
-      this.required && !this.checked ? { valueMissing: !0 } : {},
+    this.internals.setFormValue(this.checked ? this.value : null), this.invalid = this.required && !this.checked, this.internals.setValidity(
+      this.invalid ? { valueMissing: !0 } : {},
       "Please check this box.",
       this.renderRoot.querySelector("input") ?? void 0
     );
   }
-  handleChange(r) {
-    this.checked = r.target.checked, this.dispatchEvent(new Event("change", { bubbles: !0 }));
+  handleChange(o) {
+    this.checked = o.target.checked, this.dispatchEvent(new Event("change", { bubbles: !0 }));
   }
   render() {
     return c`
@@ -1379,6 +1395,8 @@ let de = class extends y {
           type="checkbox"
           .checked=${this.checked}
           ?disabled=${this.disabled}
+          ?required=${this.required}
+          aria-invalid=${this.invalid ? "true" : "false"}
           @change=${this.handleChange}
         />
         <span class="box" aria-hidden="true">
@@ -1391,7 +1409,7 @@ let de = class extends y {
     `;
   }
 };
-de.styles = [
+ue.styles = [
   ho,
   d`
       .box {
@@ -1434,19 +1452,19 @@ de.styles = [
 ];
 kt([
   n({ type: Boolean, reflect: !0 })
-], de.prototype, "checked", 2);
+], ue.prototype, "checked", 2);
 kt([
   n()
-], de.prototype, "value", 2);
-de = kt([
+], ue.prototype, "value", 2);
+ue = kt([
   h("vox-checkbox")
-], de);
-var Jo = Object.defineProperty, Qo = Object.getOwnPropertyDescriptor, te = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? Qo(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && Jo(e, o, t), t;
+], ue);
+var Jo = Object.defineProperty, Qo = Object.getOwnPropertyDescriptor, ae = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? Qo(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && Jo(e, r, t), t;
 };
-let P = class extends y {
+let A = class extends y {
   constructor() {
     super(...arguments), this.multiple = !1, this.buttonLabel = "Choose a file", this.fileNames = [];
   }
@@ -1454,12 +1472,12 @@ let P = class extends y {
     this.fileNames = [], this.inputEl && (this.inputEl.value = ""), this.internals.setFormValue(null);
   }
   handleChange() {
-    const r = [...this.inputEl.files ?? []];
-    this.fileNames = r.map((o) => o.name);
+    const o = [...this.inputEl.files ?? []];
+    this.fileNames = o.map((r) => r.name);
     const e = new FormData();
-    for (const o of r) e.append(this.name, o);
-    this.internals.setFormValue(r.length > 0 ? e : null), this.internals.setValidity(
-      this.required && r.length === 0 ? { valueMissing: !0 } : {},
+    for (const r of o) e.append(this.name, r);
+    this.internals.setFormValue(o.length > 0 ? e : null), this.invalid = this.required && o.length === 0, this.internals.setValidity(
+      this.invalid ? { valueMissing: !0 } : {},
       "Please select a file.",
       this.inputEl
     ), this.dispatchEvent(new Event("change", { bubbles: !0 }));
@@ -1472,9 +1490,11 @@ let P = class extends y {
           <input
             id="file"
             type="file"
-            accept=${Z(this.accept)}
+            accept=${$(this.accept)}
             ?multiple=${this.multiple}
             ?disabled=${this.disabled}
+            aria-describedby=${$(this.noteId)}
+            aria-invalid=${this.invalid ? "true" : "false"}
             @change=${this.handleChange}
           />
           <span class="picker">
@@ -1489,8 +1509,8 @@ let P = class extends y {
     `;
   }
 };
-P.styles = [
-  Se,
+A.styles = [
+  Ve,
   d`
       input {
         position: absolute;
@@ -1539,60 +1559,60 @@ P.styles = [
       }
     `
 ];
-te([
+ae([
   n()
-], P.prototype, "accept", 2);
-te([
+], A.prototype, "accept", 2);
+ae([
   n({ type: Boolean })
-], P.prototype, "multiple", 2);
-te([
+], A.prototype, "multiple", 2);
+ae([
   n({ attribute: "button-label" })
-], P.prototype, "buttonLabel", 2);
-te([
-  rt()
-], P.prototype, "fileNames", 2);
-te([
+], A.prototype, "buttonLabel", 2);
+ae([
+  Se()
+], A.prototype, "fileNames", 2);
+ae([
   Pt("input")
-], P.prototype, "inputEl", 2);
-P = te([
+], A.prototype, "inputEl", 2);
+A = ae([
   h("vox-file-input")
-], P);
+], A);
 /**
  * @license
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const er = (r) => r.strings === void 0, tr = {}, or = (r, e = tr) => r._$AH = e;
+const er = (o) => o.strings === void 0, tr = {}, or = (o, e = tr) => o._$AH = e;
 /**
  * @license
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
 const po = lo(class extends co {
-  constructor(r) {
-    if (super(r), r.type !== L.PROPERTY && r.type !== L.ATTRIBUTE && r.type !== L.BOOLEAN_ATTRIBUTE) throw Error("The `live` directive is not allowed on child or event bindings");
-    if (!er(r)) throw Error("`live` bindings can only contain a single expression");
+  constructor(o) {
+    if (super(o), o.type !== E.PROPERTY && o.type !== E.ATTRIBUTE && o.type !== E.BOOLEAN_ATTRIBUTE) throw Error("The `live` directive is not allowed on child or event bindings");
+    if (!er(o)) throw Error("`live` bindings can only contain a single expression");
   }
-  render(r) {
-    return r;
+  render(o) {
+    return o;
   }
-  update(r, [e]) {
-    if (e === m || e === x) return e;
-    const o = r.element, s = r.name;
-    if (r.type === L.PROPERTY) {
-      if (e === o[s]) return m;
-    } else if (r.type === L.BOOLEAN_ATTRIBUTE) {
-      if (!!e === o.hasAttribute(s)) return m;
-    } else if (r.type === L.ATTRIBUTE && o.getAttribute(s) === e + "") return m;
-    return or(r), e;
+  update(o, [e]) {
+    if (e === m || e === u) return e;
+    const r = o.element, s = o.name;
+    if (o.type === E.PROPERTY) {
+      if (e === r[s]) return m;
+    } else if (o.type === E.BOOLEAN_ATTRIBUTE) {
+      if (!!e === r.hasAttribute(s)) return m;
+    } else if (o.type === E.ATTRIBUTE && r.getAttribute(s) === e + "") return m;
+    return or(o), e;
   }
 });
-var rr = Object.defineProperty, sr = Object.getOwnPropertyDescriptor, oe = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? sr(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && rr(e, o, t), t;
+var rr = Object.defineProperty, sr = Object.getOwnPropertyDescriptor, ie = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? sr(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && rr(e, r, t), t;
 };
-let A = class extends y {
+let k = class extends y {
   constructor() {
     super(...arguments), this.type = "text", this.value = "", this.readonly = !1;
   }
@@ -1601,15 +1621,15 @@ let A = class extends y {
   }
   updated() {
     this.internals.setFormValue(this.value);
-    const r = this.renderRoot.querySelector("input");
-    r && this.syncValidity(r);
+    const o = this.renderRoot.querySelector("input");
+    o && this.syncValidity(o);
   }
-  focus(r) {
+  focus(o) {
     var e;
-    (e = this.renderRoot.querySelector("input")) == null || e.focus(r);
+    (e = this.renderRoot.querySelector("input")) == null || e.focus(o);
   }
-  handleInput(r) {
-    this.value = r.target.value;
+  handleInput(o) {
+    this.value = o.target.value;
   }
   handleChange() {
     this.dispatchEvent(new Event("change", { bubbles: !0 }));
@@ -1623,12 +1643,14 @@ let A = class extends y {
           class="control"
           type=${this.type}
           .value=${po(this.value)}
-          placeholder=${Z(this.placeholder)}
-          autocomplete=${Z(this.autocomplete)}
+          placeholder=${$(this.placeholder)}
+          autocomplete=${$(this.autocomplete)}
           ?required=${this.required}
           ?readonly=${this.readonly}
           ?disabled=${this.disabled}
-          aria-label=${this.label ? x : "text input"}
+          aria-label=${this.label ? u : "text input"}
+          aria-describedby=${$(this.noteId)}
+          aria-invalid=${this.invalid ? "true" : "false"}
           @input=${this.handleInput}
           @change=${this.handleChange}
         />
@@ -1637,36 +1659,36 @@ let A = class extends y {
     `;
   }
 };
-A.styles = Se;
-oe([
+k.styles = Ve;
+ie([
   n()
-], A.prototype, "type", 2);
-oe([
+], k.prototype, "type", 2);
+ie([
   n()
-], A.prototype, "value", 2);
-oe([
+], k.prototype, "value", 2);
+ie([
   n()
-], A.prototype, "placeholder", 2);
-oe([
+], k.prototype, "placeholder", 2);
+ie([
   n()
-], A.prototype, "autocomplete", 2);
-oe([
+], k.prototype, "autocomplete", 2);
+ie([
   n({ type: Boolean, reflect: !0 })
-], A.prototype, "readonly", 2);
-A = oe([
+], k.prototype, "readonly", 2);
+k = ie([
   h("vox-input")
-], A);
-var ar = Object.getOwnPropertyDescriptor, ir = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? ar(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = i(t) || t);
+], k);
+var ar = Object.getOwnPropertyDescriptor, ir = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? ar(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = i(t) || t);
   return t;
 };
 let ft = class extends p {
-  handleSlotChange(r) {
-    const e = r.target.assignedElements();
-    e.forEach((o, s) => {
+  handleSlotChange(o) {
+    const e = o.target.assignedElements();
+    e.forEach((r, s) => {
       const t = s === 0 ? "start" : s === e.length - 1 ? "end" : "middle";
-      o.setAttribute("data-vox-group", t);
+      r.setAttribute("data-vox-group", t);
     });
   }
   render() {
@@ -1722,12 +1744,12 @@ ft.styles = d`
 ft = ir([
   h("vox-input-group")
 ], ft);
-var nr = Object.defineProperty, lr = Object.getOwnPropertyDescriptor, it = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? lr(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && nr(e, o, t), t;
+var nr = Object.defineProperty, lr = Object.getOwnPropertyDescriptor, it = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? lr(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && nr(e, r, t), t;
 };
-let W = class extends p {
+let J = class extends p {
   constructor() {
     super(...arguments), this.value = "", this.checked = !1, this.disabled = !1;
   }
@@ -1736,8 +1758,8 @@ let W = class extends p {
       new CustomEvent("vox-radio-select", { bubbles: !0, composed: !0 })
     );
   }
-  handleKeydown(r) {
-    (r.key === " " || r.key === "Enter") && (r.preventDefault(), this.select());
+  handleKeydown(o) {
+    (o.key === " " || o.key === "Enter") && (o.preventDefault(), this.select());
   }
   render() {
     return c`
@@ -1756,7 +1778,7 @@ let W = class extends p {
     `;
   }
 };
-W.styles = d`
+J.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -1807,22 +1829,22 @@ W.styles = d`
   `;
 it([
   n()
-], W.prototype, "value", 2);
+], J.prototype, "value", 2);
 it([
   n({ type: Boolean, reflect: !0 })
-], W.prototype, "checked", 2);
+], J.prototype, "checked", 2);
 it([
   n({ type: Boolean, reflect: !0 })
-], W.prototype, "disabled", 2);
-W = it([
+], J.prototype, "disabled", 2);
+J = it([
   h("vox-radio")
-], W);
-var cr = Object.defineProperty, dr = Object.getOwnPropertyDescriptor, vo = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? dr(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && cr(e, o, t), t;
+], J);
+var cr = Object.defineProperty, dr = Object.getOwnPropertyDescriptor, vo = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? dr(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && cr(e, r, t), t;
 };
-let Ze = class extends y {
+let Ke = class extends y {
   constructor() {
     super(...arguments), this.value = "";
   }
@@ -1833,43 +1855,50 @@ let Ze = class extends y {
     this.value = "";
   }
   updated() {
-    this.internals.setFormValue(this.value || null), this.internals.setValidity(
-      this.required && !this.value ? { valueMissing: !0 } : {},
+    this.internals.setFormValue(this.value || null), this.invalid = this.required && !this.value, this.internals.setValidity(
+      this.invalid ? { valueMissing: !0 } : {},
       "Please select an option.",
       this
     ), this.syncRadios();
   }
   syncRadios() {
-    const r = this.radios, e = r.some((o) => o.value === this.value && this.value !== "");
-    r.forEach((o, s) => {
+    const o = this.radios, e = o.some((s) => s.value === this.value && this.value !== ""), r = o.find((s) => !s.disabled);
+    o.forEach((s) => {
       var a, i;
-      o.checked = this.value !== "" && o.value === this.value;
-      const t = e ? o.checked : s === 0;
-      (i = (a = o.shadowRoot) == null ? void 0 : a.querySelector(".radio")) == null || i.setAttribute("tabindex", t ? "0" : "-1");
+      s.checked = this.value !== "" && s.value === this.value;
+      const t = e ? s.checked : s === r;
+      (i = (a = s.shadowRoot) == null ? void 0 : a.querySelector(".radio")) == null || i.setAttribute("tabindex", t ? "0" : "-1");
     });
   }
-  handleSelect(r) {
-    const e = r.target;
-    !(e instanceof HTMLElement) || e.tagName !== "VOX-RADIO" || (r.stopPropagation(), this.value !== e.value && (this.value = e.value, this.dispatchEvent(new Event("change", { bubbles: !0 }))));
+  handleSelect(o) {
+    const e = o.target;
+    !(e instanceof HTMLElement) || e.tagName !== "VOX-RADIO" || (o.stopPropagation(), this.value !== e.value && (this.value = e.value, this.dispatchEvent(new Event("change", { bubbles: !0 }))));
   }
-  handleKeydown(r) {
-    var u, v;
-    const o = {
+  handleKeydown(o) {
+    var x, v;
+    const r = {
       ArrowDown: 1,
       ArrowRight: 1,
       ArrowUp: -1,
       ArrowLeft: -1
-    }[r.key];
-    if (!o) return;
-    r.preventDefault();
+    }[o.key];
+    if (!r) return;
+    o.preventDefault();
     const s = this.radios.filter((f) => !f.disabled);
     if (s.length === 0) return;
-    const t = s.findIndex((f) => f.checked), a = (Math.max(t, 0) + o + s.length) % s.length, i = s[a];
-    i.select(), (v = (u = i.shadowRoot) == null ? void 0 : u.querySelector(".radio")) == null || v.focus();
+    const t = s.findIndex((f) => f.checked), a = (Math.max(t, 0) + r + s.length) % s.length, i = s[a];
+    i.select(), (v = (x = i.shadowRoot) == null ? void 0 : x.querySelector(".radio")) == null || v.focus();
   }
   render() {
     return c`
-      <div class="field" role="radiogroup" aria-label=${this.label}>
+      <div
+        class="field"
+        role="radiogroup"
+        aria-label=${this.label || u}
+        aria-describedby=${$(this.noteId)}
+        aria-invalid=${this.invalid ? "true" : "false"}
+        aria-required=${this.required ? "true" : "false"}
+      >
         ${this.label ? c`<span class="label">
               ${this.label}${this.required ? c`<span class="required-mark" aria-hidden="true"> *</span>` : ""}
             </span>` : ""}
@@ -1885,8 +1914,8 @@ let Ze = class extends y {
     `;
   }
 };
-Ze.styles = [
-  Se,
+Ke.styles = [
+  Ve,
   d`
       .options {
         display: flex;
@@ -1898,16 +1927,16 @@ Ze.styles = [
 ];
 vo([
   n()
-], Ze.prototype, "value", 2);
-Ze = vo([
+], Ke.prototype, "value", 2);
+Ke = vo([
   h("vox-radio-group")
-], Ze);
-var hr = Object.defineProperty, pr = Object.getOwnPropertyDescriptor, Lt = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? pr(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && hr(e, o, t), t;
+], Ke);
+var hr = Object.defineProperty, pr = Object.getOwnPropertyDescriptor, Lt = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? pr(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && hr(e, r, t), t;
 };
-let he = class extends y {
+let xe = class extends y {
   constructor() {
     super(...arguments), this.value = "";
   }
@@ -1919,9 +1948,9 @@ let he = class extends y {
   }
   syncOptions() {
     if (!this.selectEl) return;
-    const r = this.renderRoot.querySelector("slot");
-    r && (this.selectEl.replaceChildren(
-      ...r.assignedElements().filter((e) => e instanceof HTMLOptionElement || e instanceof HTMLOptGroupElement).map((e) => e.cloneNode(!0))
+    const o = this.renderRoot.querySelector("slot");
+    o && (this.selectEl.replaceChildren(
+      ...o.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() {
@@ -1936,6 +1965,8 @@ let he = class extends y {
           class="control"
           ?required=${this.required}
           ?disabled=${this.disabled}
+          aria-describedby=${$(this.noteId)}
+          aria-invalid=${this.invalid ? "true" : "false"}
           @change=${this.handleChange}
         ></select>
         ${this.renderNote()}
@@ -1944,8 +1975,8 @@ let he = class extends y {
     `;
   }
 };
-he.styles = [
-  Se,
+xe.styles = [
+  Ve,
   d`
       select.control {
         appearance: none;
@@ -1959,19 +1990,19 @@ he.styles = [
 ];
 Lt([
   n()
-], he.prototype, "value", 2);
+], xe.prototype, "value", 2);
 Lt([
   Pt("select")
-], he.prototype, "selectEl", 2);
-he = Lt([
+], xe.prototype, "selectEl", 2);
+xe = Lt([
   h("vox-select")
-], he);
-var vr = Object.defineProperty, ur = Object.getOwnPropertyDescriptor, Et = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? ur(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && vr(e, o, t), t;
+], xe);
+var vr = Object.defineProperty, ur = Object.getOwnPropertyDescriptor, Et = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? ur(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && vr(e, r, t), t;
 };
-let pe = class extends y {
+let fe = class extends y {
   constructor() {
     super(...arguments), this.checked = !1, this.value = "on";
   }
@@ -1981,8 +2012,8 @@ let pe = class extends y {
   updated() {
     this.internals.setFormValue(this.checked ? this.value : null);
   }
-  handleChange(r) {
-    this.checked = r.target.checked, this.dispatchEvent(new Event("change", { bubbles: !0 }));
+  handleChange(o) {
+    this.checked = o.target.checked, this.dispatchEvent(new Event("change", { bubbles: !0 }));
   }
   render() {
     return c`
@@ -2000,7 +2031,7 @@ let pe = class extends y {
     `;
   }
 };
-pe.styles = [
+fe.styles = [
   ho,
   d`
       .track {
@@ -2042,19 +2073,19 @@ pe.styles = [
 ];
 Et([
   n({ type: Boolean, reflect: !0 })
-], pe.prototype, "checked", 2);
+], fe.prototype, "checked", 2);
 Et([
   n()
-], pe.prototype, "value", 2);
-pe = Et([
+], fe.prototype, "value", 2);
+fe = Et([
   h("vox-switch")
-], pe);
-var xr = Object.defineProperty, fr = Object.getOwnPropertyDescriptor, Ve = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? fr(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && xr(e, o, t), t;
+], fe);
+var xr = Object.defineProperty, fr = Object.getOwnPropertyDescriptor, je = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? fr(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && xr(e, r, t), t;
 };
-let D = class extends y {
+let H = class extends y {
   constructor() {
     super(...arguments), this.value = "", this.rows = 4, this.readonly = !1;
   }
@@ -2063,15 +2094,15 @@ let D = class extends y {
   }
   updated() {
     this.internals.setFormValue(this.value);
-    const r = this.renderRoot.querySelector("textarea");
-    r && this.syncValidity(r);
+    const o = this.renderRoot.querySelector("textarea");
+    o && this.syncValidity(o);
   }
-  focus(r) {
+  focus(o) {
     var e;
-    (e = this.renderRoot.querySelector("textarea")) == null || e.focus(r);
+    (e = this.renderRoot.querySelector("textarea")) == null || e.focus(o);
   }
-  handleInput(r) {
-    this.value = r.target.value;
+  handleInput(o) {
+    this.value = o.target.value;
   }
   handleChange() {
     this.dispatchEvent(new Event("change", { bubbles: !0 }));
@@ -2085,10 +2116,12 @@ let D = class extends y {
           class="control"
           rows=${this.rows}
           .value=${po(this.value)}
-          placeholder=${Z(this.placeholder)}
+          placeholder=${$(this.placeholder)}
           ?required=${this.required}
           ?readonly=${this.readonly}
           ?disabled=${this.disabled}
+          aria-describedby=${$(this.noteId)}
+          aria-invalid=${this.invalid ? "true" : "false"}
           @input=${this.handleInput}
           @change=${this.handleChange}
         ></textarea>
@@ -2097,8 +2130,8 @@ let D = class extends y {
     `;
   }
 };
-D.styles = [
-  Se,
+H.styles = [
+  Ve,
   d`
       textarea.control {
         resize: vertical;
@@ -2106,39 +2139,44 @@ D.styles = [
       }
     `
 ];
-Ve([
+je([
   n()
-], D.prototype, "value", 2);
-Ve([
+], H.prototype, "value", 2);
+je([
   n()
-], D.prototype, "placeholder", 2);
-Ve([
+], H.prototype, "placeholder", 2);
+je([
   n({ type: Number })
-], D.prototype, "rows", 2);
-Ve([
+], H.prototype, "rows", 2);
+je([
   n({ type: Boolean, reflect: !0 })
-], D.prototype, "readonly", 2);
-D = Ve([
+], H.prototype, "readonly", 2);
+H = je([
   h("vox-textarea")
-], D);
-var gr = Object.defineProperty, br = Object.getOwnPropertyDescriptor, je = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? br(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && gr(e, o, t), t;
+], H);
+var gr = Object.defineProperty, br = Object.getOwnPropertyDescriptor, De = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? br(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && gr(e, r, t), t;
 };
-let H = class extends p {
+let z = class extends p {
   constructor() {
     super(...arguments), this.alt = "", this.initials = "", this.size = "md";
   }
   render() {
+    const o = !this.src && this.alt;
     return c`
-      <span class="avatar" role=${this.src ? "presentation" : "img"} aria-label=${this.alt}>
+      <span
+        class="avatar"
+        role=${o ? "img" : u}
+        aria-label=${o ? this.alt : u}
+      >
         ${this.src ? c`<img src=${this.src} alt=${this.alt} />` : this.initials}
       </span>
     `;
   }
 };
-H.styles = d`
+z.styles = d`
     :host {
       display: inline-block;
     }
@@ -2186,32 +2224,32 @@ H.styles = d`
       font-size: 28px;
     }
   `;
-je([
+De([
   n()
-], H.prototype, "src", 2);
-je([
+], z.prototype, "src", 2);
+De([
   n()
-], H.prototype, "alt", 2);
-je([
+], z.prototype, "alt", 2);
+De([
   n()
-], H.prototype, "initials", 2);
-je([
+], z.prototype, "initials", 2);
+De([
   n({ reflect: !0 })
-], H.prototype, "size", 2);
-H = je([
+], z.prototype, "size", 2);
+z = De([
   h("vox-avatar")
-], H);
-var yr = Object.defineProperty, mr = Object.getOwnPropertyDescriptor, St = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? mr(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && yr(e, o, t), t;
+], z);
+var yr = Object.defineProperty, mr = Object.getOwnPropertyDescriptor, St = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? mr(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && yr(e, r, t), t;
 };
-let ve = class extends p {
+let ge = class extends p {
   constructor() {
     super(...arguments), this.heading = "", this.reverse = !1, this.hasActions = !1;
   }
-  handleActionsSlotChange(r) {
-    const e = r.target;
+  handleActionsSlotChange(o) {
+    const e = o.target;
     this.hasActions = e.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
@@ -2229,7 +2267,7 @@ let ve = class extends p {
     `;
   }
 };
-ve.styles = d`
+ge.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2293,16 +2331,16 @@ ve.styles = d`
   `;
 St([
   n()
-], ve.prototype, "heading", 2);
+], ge.prototype, "heading", 2);
 St([
   n({ type: Boolean, reflect: !0 })
-], ve.prototype, "reverse", 2);
-ve = St([
+], ge.prototype, "reverse", 2);
+ge = St([
   h("vox-billboard")
-], ve);
-var $r = Object.getOwnPropertyDescriptor, wr = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? $r(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = i(t) || t);
+], ge);
+var $r = Object.getOwnPropertyDescriptor, wr = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? $r(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = i(t) || t);
   return t;
 };
 let gt = class extends p {
@@ -2351,18 +2389,21 @@ gt.styles = d`
 gt = wr([
   h("vox-breadcrumbs")
 ], gt);
-var _r = Object.defineProperty, Cr = Object.getOwnPropertyDescriptor, nt = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? Cr(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && _r(e, o, t), t;
+var _r = Object.defineProperty, Cr = Object.getOwnPropertyDescriptor, nt = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? Cr(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && _r(e, r, t), t;
 };
-let X = class extends p {
+let Q = class extends p {
   constructor() {
-    super(...arguments), this.siteTitle = "", this.href = "/", this.mobileOpen = !1, this.handleOutsideClick = (r) => {
-      this.mobileOpen && !r.composedPath().includes(this) && (this.mobileOpen = !1);
-    }, this.handleKeydown = (r) => {
+    super(...arguments), this.siteTitle = "", this.href = "/", this.mobileOpen = !1, this.handleOutsideClick = (o) => {
+      this.mobileOpen && !o.composedPath().includes(this) && (this.mobileOpen = !1);
+    }, this.handleFocusOut = (o) => {
+      const e = o.relatedTarget;
+      this.mobileOpen && !(e && this.contains(e)) && (this.mobileOpen = !1);
+    }, this.handleKeydown = (o) => {
       var e;
-      r.key === "Escape" && this.mobileOpen && (this.mobileOpen = !1, (e = this.renderRoot.querySelector(".menu-toggle")) == null || e.focus());
+      o.key === "Escape" && this.mobileOpen && (this.mobileOpen = !1, (e = this.renderRoot.querySelector(".menu-toggle")) == null || e.focus());
     }, this.toggleMobileMenu = () => {
       this.mobileOpen = !this.mobileOpen;
     }, this.closeMobileMenu = () => {
@@ -2370,17 +2411,17 @@ let X = class extends p {
     };
   }
   connectedCallback() {
-    super.connectedCallback(), document.addEventListener("click", this.handleOutsideClick), this.addEventListener("keydown", this.handleKeydown);
+    super.connectedCallback(), document.addEventListener("click", this.handleOutsideClick), this.addEventListener("keydown", this.handleKeydown), this.addEventListener("focusout", this.handleFocusOut);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), document.removeEventListener("click", this.handleOutsideClick), this.removeEventListener("keydown", this.handleKeydown);
+    super.disconnectedCallback(), document.removeEventListener("click", this.handleOutsideClick), this.removeEventListener("keydown", this.handleKeydown), this.removeEventListener("focusout", this.handleFocusOut);
   }
   render() {
     return c`
       <header class="header">
         <a class="brand" href=${this.href}>
           <slot name="logo"></slot>
-          ${this.siteTitle ? c`<span>${this.siteTitle}</span>` : x}
+          ${this.siteTitle ? c`<span>${this.siteTitle}</span>` : u}
         </a>
         <button
           type="button"
@@ -2400,7 +2441,7 @@ let X = class extends p {
             stroke-linejoin="round"
             aria-hidden="true"
           >
-            ${this.mobileOpen ? j.close : j.menu}
+            ${this.mobileOpen ? D.close : D.menu}
           </svg>
         </button>
         <div id="nav-wrap" class="nav-wrap${this.mobileOpen ? " open" : ""}">
@@ -2415,7 +2456,7 @@ let X = class extends p {
     `;
   }
 };
-X.styles = d`
+Q.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2547,22 +2588,22 @@ X.styles = d`
   `;
 nt([
   n({ attribute: "site-title" })
-], X.prototype, "siteTitle", 2);
+], Q.prototype, "siteTitle", 2);
 nt([
   n()
-], X.prototype, "href", 2);
+], Q.prototype, "href", 2);
 nt([
-  rt()
-], X.prototype, "mobileOpen", 2);
-X = nt([
+  Se()
+], Q.prototype, "mobileOpen", 2);
+Q = nt([
   h("vox-header")
-], X);
-var Or = Object.defineProperty, Mr = Object.getOwnPropertyDescriptor, De = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? Mr(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && Or(e, o, t), t;
+], Q);
+var Or = Object.defineProperty, Mr = Object.getOwnPropertyDescriptor, He = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? Mr(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && Or(e, r, t), t;
 };
-let z = class extends p {
+let T = class extends p {
   constructor() {
     super(...arguments), this.previousLabel = "", this.nextLabel = "";
   }
@@ -2574,18 +2615,18 @@ let z = class extends p {
                 <span class="direction">← Previous</span>
                 <span class="title">${this.previousLabel}</span>
               </a>
-            ` : x}
+            ` : u}
         ${this.nextHref ? c`
               <a class="next" href=${this.nextHref} rel="next">
                 <span class="direction">Next →</span>
                 <span class="title">${this.nextLabel}</span>
               </a>
-            ` : x}
+            ` : u}
       </nav>
     `;
   }
 };
-z.styles = d`
+T.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2635,44 +2676,47 @@ z.styles = d`
       color: var(--vox-color-brand-1);
     }
   `;
-De([
+He([
   n({ attribute: "previous-href" })
-], z.prototype, "previousHref", 2);
-De([
+], T.prototype, "previousHref", 2);
+He([
   n({ attribute: "previous-label" })
-], z.prototype, "previousLabel", 2);
-De([
+], T.prototype, "previousLabel", 2);
+He([
   n({ attribute: "next-href" })
-], z.prototype, "nextHref", 2);
-De([
+], T.prototype, "nextHref", 2);
+He([
   n({ attribute: "next-label" })
-], z.prototype, "nextLabel", 2);
-z = De([
+], T.prototype, "nextLabel", 2);
+T = He([
   h("vox-series-nav")
-], z);
-var Pr = Object.defineProperty, Ar = Object.getOwnPropertyDescriptor, $ = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? Ar(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && Pr(e, o, t), t;
+], T);
+var Pr = Object.defineProperty, Ar = Object.getOwnPropertyDescriptor, w = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? Ar(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && Pr(e, r, t), t;
 };
-let Y = class extends p {
+let ee = class extends p {
   constructor() {
-    super(...arguments), this.label = "Section", this.toggleLabel = "Menu", this.mobileOpen = !1, this.handleOutsideClick = (r) => {
-      this.mobileOpen && !r.composedPath().includes(this) && (this.mobileOpen = !1);
-    }, this.handleKeydown = (r) => {
+    super(...arguments), this.label = "Section", this.toggleLabel = "Menu", this.mobileOpen = !1, this.handleOutsideClick = (o) => {
+      this.mobileOpen && !o.composedPath().includes(this) && (this.mobileOpen = !1);
+    }, this.handleFocusOut = (o) => {
+      const e = o.relatedTarget;
+      this.mobileOpen && !(e && this.contains(e)) && (this.mobileOpen = !1);
+    }, this.handleKeydown = (o) => {
       var e;
-      r.key === "Escape" && this.mobileOpen && (this.mobileOpen = !1, (e = this.renderRoot.querySelector(".toggle")) == null || e.focus());
+      o.key === "Escape" && this.mobileOpen && (this.mobileOpen = !1, (e = this.renderRoot.querySelector(".toggle")) == null || e.focus());
     }, this.toggleMobile = () => {
       this.mobileOpen = !this.mobileOpen;
-    }, this.handleNavClick = (r) => {
-      r.composedPath().some((e) => e instanceof HTMLAnchorElement) && (this.mobileOpen = !1);
+    }, this.handleNavClick = (o) => {
+      o.composedPath().some((e) => e instanceof HTMLAnchorElement) && (this.mobileOpen = !1);
     };
   }
   connectedCallback() {
-    super.connectedCallback(), document.addEventListener("click", this.handleOutsideClick), this.addEventListener("keydown", this.handleKeydown);
+    super.connectedCallback(), document.addEventListener("click", this.handleOutsideClick), this.addEventListener("keydown", this.handleKeydown), this.addEventListener("focusout", this.handleFocusOut);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), document.removeEventListener("click", this.handleOutsideClick), this.removeEventListener("keydown", this.handleKeydown);
+    super.disconnectedCallback(), document.removeEventListener("click", this.handleOutsideClick), this.removeEventListener("keydown", this.handleKeydown), this.removeEventListener("focusout", this.handleFocusOut);
   }
   render() {
     return c`
@@ -2694,7 +2738,7 @@ let Y = class extends p {
           stroke-linejoin="round"
           aria-hidden="true"
         >
-          ${this.mobileOpen ? j.close : j.menu}
+          ${this.mobileOpen ? D.close : D.menu}
         </svg>
       </button>
       <nav
@@ -2708,7 +2752,7 @@ let Y = class extends p {
     `;
   }
 };
-Y.styles = d`
+ee.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2768,21 +2812,21 @@ Y.styles = d`
       }
     }
   `;
-$([
+w([
   n()
-], Y.prototype, "label", 2);
-$([
+], ee.prototype, "label", 2);
+w([
   n({ attribute: "toggle-label" })
-], Y.prototype, "toggleLabel", 2);
-$([
-  rt()
-], Y.prototype, "mobileOpen", 2);
-Y = $([
+], ee.prototype, "toggleLabel", 2);
+w([
+  Se()
+], ee.prototype, "mobileOpen", 2);
+ee = w([
   h("vox-sidenav")
-], Y);
-let ue = class extends p {
+], ee);
+let I = class extends p {
   constructor() {
-    super(...arguments), this.heading = "", this.open = !1;
+    super(...arguments), this.heading = "", this.open = !1, this.itemsId = `vox-sidenav-group-items-${I.nextId++}`;
   }
   toggle() {
     this.open = !this.open;
@@ -2792,6 +2836,7 @@ let ue = class extends p {
       <button
         class="trigger"
         aria-expanded=${this.open ? "true" : "false"}
+        aria-controls=${this.itemsId}
         @click=${this.toggle}
       >
         ${this.heading}
@@ -2799,11 +2844,12 @@ let ue = class extends p {
           <path d="m9 6 6 6-6 6" />
         </svg>
       </button>
-      <div class="items"><slot></slot></div>
+      <div id=${this.itemsId} class="items"><slot></slot></div>
     `;
   }
 };
-ue.styles = d`
+I.nextId = 0;
+I.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2860,21 +2906,21 @@ ue.styles = d`
       display: flex;
     }
   `;
-$([
+w([
   n()
-], ue.prototype, "heading", 2);
-$([
+], I.prototype, "heading", 2);
+w([
   n({ type: Boolean, reflect: !0 })
-], ue.prototype, "open", 2);
-ue = $([
+], I.prototype, "open", 2);
+I = w([
   h("vox-sidenav-group")
-], ue);
-let xe = class extends p {
+], I);
+let be = class extends p {
   constructor() {
     super(...arguments), this.href = "#", this.current = !1, this.hasIcon = !1;
   }
-  handleIconSlotChange(r) {
-    const e = r.target;
+  handleIconSlotChange(o) {
+    const e = o.target;
     this.hasIcon = e.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
@@ -2888,7 +2934,7 @@ let xe = class extends p {
     `;
   }
 };
-xe.styles = d`
+be.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2932,21 +2978,21 @@ xe.styles = d`
       display: none;
     }
   `;
-$([
+w([
   n()
-], xe.prototype, "href", 2);
-$([
+], be.prototype, "href", 2);
+w([
   n({ type: Boolean, reflect: !0 })
-], xe.prototype, "current", 2);
-xe = $([
+], be.prototype, "current", 2);
+be = w([
   h("vox-sidenav-item")
-], xe);
-var kr = Object.defineProperty, Lr = Object.getOwnPropertyDescriptor, uo = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? Lr(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && kr(e, o, t), t;
+], be);
+var kr = Object.defineProperty, Lr = Object.getOwnPropertyDescriptor, uo = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? Lr(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && kr(e, r, t), t;
 };
-let Ke = class extends p {
+let Ge = class extends p {
   constructor() {
     super(...arguments), this.label = "Secondary";
   }
@@ -2958,7 +3004,7 @@ let Ke = class extends p {
     `;
   }
 };
-Ke.styles = d`
+Ge.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2995,14 +3041,14 @@ Ke.styles = d`
   `;
 uo([
   n()
-], Ke.prototype, "label", 2);
-Ke = uo([
+], Ge.prototype, "label", 2);
+Ge = uo([
   h("vox-subnav")
-], Ke);
-var Er = Object.defineProperty, Sr = Object.getOwnPropertyDescriptor, U = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? Sr(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && Er(e, o, t), t;
+], Ge);
+var Er = Object.defineProperty, Sr = Object.getOwnPropertyDescriptor, Z = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? Sr(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && Er(e, r, t), t;
 };
 let bt = class extends p {
   get tabs() {
@@ -3012,16 +3058,16 @@ let bt = class extends p {
     return [...this.querySelectorAll("vox-tab-panel")];
   }
   sync() {
-    const r = this.tabs;
-    r.length > 0 && !r.some((o) => o.selected) && (r[0].selected = !0);
-    const e = r.find((o) => o.selected);
-    this.panels.forEach((o) => {
-      o.active = o.name === (e == null ? void 0 : e.panel);
+    const o = this.tabs;
+    o.length > 0 && !o.some((r) => r.selected) && (o[0].selected = !0);
+    const e = o.find((r) => r.selected);
+    this.panels.forEach((r) => {
+      r.active = r.name === (e == null ? void 0 : e.panel);
     });
   }
-  handleSelect(r) {
-    const e = r.target;
-    e.tagName === "VOX-TAB" && (this.tabs.forEach((o) => o.selected = o === e), this.sync(), this.dispatchEvent(
+  handleSelect(o) {
+    const e = o.target;
+    e.tagName === "VOX-TAB" && (this.tabs.forEach((r) => r.selected = r === e), this.sync(), this.dispatchEvent(
       new CustomEvent("vox-tab-change", {
         detail: { panel: e.panel },
         bubbles: !0,
@@ -3029,11 +3075,18 @@ let bt = class extends p {
       })
     ));
   }
-  handleKeydown(r) {
-    const o = { ArrowRight: 1, ArrowLeft: -1 }[r.key];
-    if (!o) return;
-    r.preventDefault();
-    const s = this.tabs, t = s.findIndex((i) => i.selected), a = s[(t + o + s.length) % s.length];
+  handleKeydown(o) {
+    const e = this.tabs;
+    if (o.key === "Home" || o.key === "End") {
+      o.preventDefault();
+      const i = e[o.key === "Home" ? 0 : e.length - 1];
+      i.select(), i.focusTab();
+      return;
+    }
+    const s = { ArrowRight: 1, ArrowLeft: -1 }[o.key];
+    if (!s) return;
+    o.preventDefault();
+    const t = e.findIndex((i) => i.selected), a = e[(t + s + e.length) % e.length];
     a.select(), a.focusTab();
   }
   render() {
@@ -3061,10 +3114,10 @@ bt.styles = d`
       border-bottom: 1px solid var(--vox-color-divider);
     }
   `;
-bt = U([
+bt = Z([
   h("vox-tabs")
 ], bt);
-let fe = class extends p {
+let ye = class extends p {
   constructor() {
     super(...arguments), this.panel = "", this.selected = !1;
   }
@@ -3074,15 +3127,17 @@ let fe = class extends p {
     );
   }
   focusTab() {
-    var r;
-    (r = this.renderRoot.querySelector(".tab")) == null || r.focus();
+    var o;
+    (o = this.renderRoot.querySelector(".tab")) == null || o.focus();
   }
   render() {
     return c`
       <button
+        id="tab-${this.panel}"
         class="tab"
         role="tab"
         aria-selected=${this.selected ? "true" : "false"}
+        aria-controls="panel-${this.panel}"
         tabindex=${this.selected ? "0" : "-1"}
         @click=${this.select}
       >
@@ -3091,7 +3146,7 @@ let fe = class extends p {
     `;
   }
 };
-fe.styles = d`
+ye.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -3126,24 +3181,33 @@ fe.styles = d`
       border-bottom-color: var(--vox-color-brand-1);
     }
   `;
-U([
+Z([
   n()
-], fe.prototype, "panel", 2);
-U([
+], ye.prototype, "panel", 2);
+Z([
   n({ type: Boolean, reflect: !0 })
-], fe.prototype, "selected", 2);
-fe = U([
+], ye.prototype, "selected", 2);
+ye = Z([
   h("vox-tab")
-], fe);
-let ge = class extends p {
+], ye);
+let me = class extends p {
   constructor() {
     super(...arguments), this.name = "", this.active = !1;
   }
   render() {
-    return c`<div role="tabpanel"><slot></slot></div>`;
+    return c`
+      <div
+        id="panel-${this.name}"
+        role="tabpanel"
+        aria-labelledby="tab-${this.name}"
+        tabindex="0"
+      >
+        <slot></slot>
+      </div>
+    `;
   }
 };
-ge.styles = d`
+me.styles = d`
     :host {
       display: none;
       font-family: var(--vox-font-family-base);
@@ -3156,22 +3220,28 @@ ge.styles = d`
     :host([active]) {
       display: block;
     }
+
+    div:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+      border-radius: var(--vox-radius-sm);
+    }
   `;
-U([
+Z([
   n()
-], ge.prototype, "name", 2);
-U([
+], me.prototype, "name", 2);
+Z([
   n({ type: Boolean, reflect: !0 })
-], ge.prototype, "active", 2);
-ge = U([
+], me.prototype, "active", 2);
+me = Z([
   h("vox-tab-panel")
-], ge);
-var Vr = Object.defineProperty, jr = Object.getOwnPropertyDescriptor, He = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? jr(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && Vr(e, o, t), t;
+], me);
+var Vr = Object.defineProperty, jr = Object.getOwnPropertyDescriptor, ze = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? jr(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && Vr(e, r, t), t;
 };
-let Ge = class extends p {
+let We = class extends p {
   constructor() {
     super(...arguments), this.heading = "On this page";
   }
@@ -3184,7 +3254,7 @@ let Ge = class extends p {
     `;
   }
 };
-Ge.styles = d`
+We.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -3205,18 +3275,18 @@ Ge.styles = d`
       border-left: 1px solid var(--vox-color-divider);
     }
   `;
-He([
+ze([
   n()
-], Ge.prototype, "heading", 2);
-Ge = He([
+], We.prototype, "heading", 2);
+We = ze([
   h("vox-toc")
-], Ge);
-let be = class extends p {
+], We);
+let $e = class extends p {
   constructor() {
     super(...arguments), this.href = "#", this.current = !1, this.hasChildren = !1;
   }
-  handleChildrenSlotChange(r) {
-    const e = r.target;
+  handleChildrenSlotChange(o) {
+    const e = o.target;
     this.hasChildren = e.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
@@ -3230,7 +3300,7 @@ let be = class extends p {
     `;
   }
 };
-be.styles = d`
+$e.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -3276,21 +3346,21 @@ be.styles = d`
       display: none;
     }
   `;
-He([
+ze([
   n()
-], be.prototype, "href", 2);
-He([
+], $e.prototype, "href", 2);
+ze([
   n({ type: Boolean, reflect: !0 })
-], be.prototype, "current", 2);
-be = He([
+], $e.prototype, "current", 2);
+$e = ze([
   h("vox-toc-item")
-], be);
-var Dr = Object.defineProperty, Hr = Object.getOwnPropertyDescriptor, ze = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? Hr(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && Dr(e, o, t), t;
+], $e);
+var Dr = Object.defineProperty, Hr = Object.getOwnPropertyDescriptor, Te = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? Hr(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && Dr(e, r, t), t;
 };
-let T = class extends p {
+let B = class extends p {
   constructor() {
     super(...arguments), this.heading = "", this.open = !1, this.lightDismiss = !1, this.hasFooter = !1;
   }
@@ -3308,22 +3378,22 @@ let T = class extends p {
       new CustomEvent("vox-close", { bubbles: !0, composed: !0 })
     );
   }
-  handleClick(r) {
-    this.lightDismiss && r.target === this.dialogEl && this.close();
+  handleClick(o) {
+    this.lightDismiss && o.target === this.dialogEl && this.close();
   }
-  handleFooterSlotChange(r) {
-    const e = r.target;
+  handleFooterSlotChange(o) {
+    const e = o.target;
     this.hasFooter = e.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
     return c`
       <dialog
-        aria-label=${this.heading || x}
+        aria-labelledby=${this.heading ? "heading" : u}
         @close=${this.handleNativeClose}
         @click=${this.handleClick}
       >
         <div class="header">
-          <h2 class="heading">${this.heading}</h2>
+          <h2 class="heading" id="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" />
@@ -3338,7 +3408,7 @@ let T = class extends p {
     `;
   }
 };
-T.styles = d`
+B.styles = d`
     dialog {
       box-sizing: border-box;
       width: min(90vw, 480px);
@@ -3425,29 +3495,29 @@ T.styles = d`
       margin-bottom: 0;
     }
   `;
-ze([
+Te([
   n()
-], T.prototype, "heading", 2);
-ze([
+], B.prototype, "heading", 2);
+Te([
   n({ type: Boolean })
-], T.prototype, "open", 2);
-ze([
+], B.prototype, "open", 2);
+Te([
   n({ type: Boolean, attribute: "light-dismiss" })
-], T.prototype, "lightDismiss", 2);
-ze([
+], B.prototype, "lightDismiss", 2);
+Te([
   Pt("dialog")
-], T.prototype, "dialogEl", 2);
-T = ze([
+], B.prototype, "dialogEl", 2);
+B = Te([
   h("vox-dialog")
-], T);
-var zr = Object.defineProperty, Tr = Object.getOwnPropertyDescriptor, Vt = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? Tr(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && zr(e, o, t), t;
+], B);
+var zr = Object.defineProperty, Tr = Object.getOwnPropertyDescriptor, Vt = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? Tr(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && zr(e, r, t), t;
 };
-let ye = class extends p {
+let N = class extends p {
   constructor() {
-    super(...arguments), this.summary = "Show details", this.open = !1;
+    super(...arguments), this.summary = "Show details", this.open = !1, this.panelId = `vox-disclosure-panel-${N.nextId++}`;
   }
   toggle() {
     this.open = !this.open, this.dispatchEvent(
@@ -3459,6 +3529,7 @@ let ye = class extends p {
       <button
         class="trigger"
         aria-expanded=${this.open ? "true" : "false"}
+        aria-controls=${this.panelId}
         @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">
@@ -3466,13 +3537,14 @@ let ye = class extends p {
         </svg>
         ${this.summary}
       </button>
-      <div class="panel" ?hidden=${!this.open}>
+      <div id=${this.panelId} class="panel" ?hidden=${!this.open}>
         <slot></slot>
       </div>
     `;
   }
 };
-ye.styles = d`
+N.nextId = 0;
+N.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -3526,45 +3598,57 @@ ye.styles = d`
   `;
 Vt([
   n()
-], ye.prototype, "summary", 2);
+], N.prototype, "summary", 2);
 Vt([
   n({ type: Boolean, reflect: !0 })
-], ye.prototype, "open", 2);
-ye = Vt([
+], N.prototype, "open", 2);
+N = Vt([
   h("vox-disclosure")
-], ye);
-var Br = Object.defineProperty, Nr = Object.getOwnPropertyDescriptor, jt = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? Nr(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && Br(e, o, t), t;
+], N);
+var Ir = Object.defineProperty, Br = Object.getOwnPropertyDescriptor, jt = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? Br(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && Ir(e, r, t), t;
 };
-let me = class extends p {
+let we = class extends p {
   constructor() {
-    super(...arguments), this.label = "Menu", this.open = !1, this.handleOutsideClick = (r) => {
-      this.open && !r.composedPath().includes(this) && (this.open = !1);
-    }, this.handleKeydown = (r) => {
+    super(...arguments), this.label = "Menu", this.open = !1, this.handleOutsideClick = (o) => {
+      this.open && !o.composedPath().includes(this) && (this.open = !1);
+    }, this.handleFocusOut = (o) => {
+      const e = o.relatedTarget;
+      this.open && !(e && this.contains(e)) && (this.open = !1);
+    }, this.handleKeydown = (o) => {
       var e;
-      if (r.key === "Escape" && this.open) {
+      if (o.key === "Escape" && this.open) {
         this.open = !1, (e = this.renderRoot.querySelector(".trigger")) == null || e.focus();
         return;
       }
-      if ((r.key === "ArrowDown" || r.key === "ArrowUp") && this.open) {
-        r.preventDefault();
-        const o = [...this.querySelectorAll("a, button")];
-        if (o.length === 0) return;
-        const s = document.activeElement, t = o.indexOf(s), a = r.key === "ArrowDown" ? 1 : -1;
-        o[(Math.max(t, 0) + a + o.length) % o.length].focus();
+      if (o.key === "ArrowDown" || o.key === "ArrowUp") {
+        o.preventDefault();
+        const r = o.key === "ArrowDown" ? 1 : -1;
+        if (!this.open) {
+          this.open = !0, this.updateComplete.then(
+            () => this.focusItem(o.key === "ArrowDown" ? 0 : -1)
+          );
+          return;
+        }
+        const t = [...this.querySelectorAll("a, button")].indexOf(document.activeElement);
+        this.focusItem(Math.max(t, 0) + r);
       }
     };
   }
   connectedCallback() {
-    super.connectedCallback(), document.addEventListener("click", this.handleOutsideClick), this.addEventListener("keydown", this.handleKeydown);
+    super.connectedCallback(), document.addEventListener("click", this.handleOutsideClick), this.addEventListener("keydown", this.handleKeydown), this.addEventListener("focusout", this.handleFocusOut);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), document.removeEventListener("click", this.handleOutsideClick), this.removeEventListener("keydown", this.handleKeydown);
+    super.disconnectedCallback(), document.removeEventListener("click", this.handleOutsideClick), this.removeEventListener("keydown", this.handleKeydown), this.removeEventListener("focusout", this.handleFocusOut);
+  }
+  focusItem(o) {
+    const e = [...this.querySelectorAll("a, button")];
+    e.length !== 0 && e[(o + e.length) % e.length].focus();
   }
   toggle() {
-    this.open = !this.open;
+    this.open = !this.open, this.open && this.updateComplete.then(() => this.focusItem(0));
   }
   render() {
     return c`
@@ -3572,6 +3656,7 @@ let me = class extends p {
         class="trigger"
         aria-expanded=${this.open ? "true" : "false"}
         aria-haspopup="true"
+        aria-controls="menu"
         @click=${this.toggle}
       >
         ${this.label}
@@ -3579,13 +3664,13 @@ let me = class extends p {
           <path d="m6 9 6 6 6-6" />
         </svg>
       </button>
-      <div class="menu">
+      <div id="menu" class="menu">
         <slot @click=${() => this.open = !1}></slot>
       </div>
     `;
   }
 };
-me.styles = d`
+we.styles = d`
     :host {
       position: relative;
       display: inline-block;
@@ -3686,28 +3771,28 @@ me.styles = d`
   `;
 jt([
   n()
-], me.prototype, "label", 2);
+], we.prototype, "label", 2);
 jt([
   n({ type: Boolean, reflect: !0 })
-], me.prototype, "open", 2);
-me = jt([
+], we.prototype, "open", 2);
+we = jt([
   h("vox-dropdown")
-], me);
-var Rr = Object.defineProperty, Ur = Object.getOwnPropertyDescriptor, Te = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? Ur(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && Rr(e, o, t), t;
+], we);
+var Nr = Object.defineProperty, Rr = Object.getOwnPropertyDescriptor, Ie = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? Rr(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && Nr(e, r, t), t;
 };
-let We = class extends p {
+let Xe = class extends p {
   constructor() {
     super(...arguments), this.single = !1;
   }
-  handleToggle(r) {
+  handleToggle(o) {
     if (!this.single) return;
-    const e = r.target;
+    const e = o.target;
     e.open && this.querySelectorAll("vox-accordion-item").forEach(
-      (o) => {
-        o !== e && (o.open = !1);
+      (r) => {
+        r !== e && (r.open = !1);
       }
     );
   }
@@ -3715,7 +3800,7 @@ let We = class extends p {
     return c`<slot @vox-toggle=${this.handleToggle}></slot>`;
   }
 };
-We.styles = d`
+Xe.styles = d`
     :host {
       display: block;
       border: 1px solid var(--vox-color-divider);
@@ -3727,15 +3812,15 @@ We.styles = d`
       border-top: 1px solid var(--vox-color-divider);
     }
   `;
-Te([
+Ie([
   n({ type: Boolean })
-], We.prototype, "single", 2);
-We = Te([
+], Xe.prototype, "single", 2);
+Xe = Ie([
   h("vox-accordion")
-], We);
-let $e = class extends p {
+], Xe);
+let R = class extends p {
   constructor() {
-    super(...arguments), this.heading = "", this.open = !1;
+    super(...arguments), this.heading = "", this.open = !1, this.panelId = `vox-accordion-panel-${R.nextId++}`;
   }
   toggle() {
     this.open = !this.open, this.dispatchEvent(
@@ -3748,6 +3833,7 @@ let $e = class extends p {
         <button
           class="trigger"
           aria-expanded=${this.open ? "true" : "false"}
+          aria-controls=${this.panelId}
           @click=${this.toggle}
         >
           ${this.heading}
@@ -3756,13 +3842,14 @@ let $e = class extends p {
           </svg>
         </button>
       </h3>
-      <div class="panel" ?hidden=${!this.open}>
+      <div id=${this.panelId} class="panel" ?hidden=${!this.open}>
         <slot></slot>
       </div>
     `;
   }
 };
-$e.styles = d`
+R.nextId = 0;
+R.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -3824,19 +3911,19 @@ $e.styles = d`
       margin-bottom: 0;
     }
   `;
-Te([
+Ie([
   n()
-], $e.prototype, "heading", 2);
-Te([
+], R.prototype, "heading", 2);
+Ie([
   n({ type: Boolean, reflect: !0 })
-], $e.prototype, "open", 2);
-$e = Te([
+], R.prototype, "open", 2);
+R = Ie([
   h("vox-accordion-item")
-], $e);
-var Ir = Object.defineProperty, qr = Object.getOwnPropertyDescriptor, Be = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? qr(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && Ir(e, o, t), t;
+], R);
+var Ur = Object.defineProperty, qr = Object.getOwnPropertyDescriptor, Be = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? qr(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && Ur(e, r, t), t;
 };
 const Fr = {
   info: "info",
@@ -3844,7 +3931,7 @@ const Fr = {
   warning: "warning",
   danger: "x-circle"
 };
-let B = class extends p {
+let U = class extends p {
   constructor() {
     super(...arguments), this.variant = "info", this.heading = "", this.dismissible = !1, this.open = !0;
   }
@@ -3854,8 +3941,12 @@ let B = class extends p {
     );
   }
   render() {
+    const o = this.variant === "danger" || this.variant === "warning";
     return c`
-      <div class="alert ${this.variant}" role="alert">
+      <div
+        class="alert ${this.variant}"
+        role=${o ? "alert" : "status"}
+      >
         <svg
           class="icon"
           viewBox="0 0 48 48"
@@ -3866,10 +3957,10 @@ let B = class extends p {
           stroke-linejoin="round"
           aria-hidden="true"
         >
-          ${j[Fr[this.variant]]}
+          ${D[Fr[this.variant]]}
         </svg>
         <div class="body">
-          ${this.heading ? c`<p class="heading">${this.heading}</p>` : x}
+          ${this.heading ? c`<p class="heading">${this.heading}</p>` : u}
           <slot></slot>
         </div>
         ${this.dismissible ? c`
@@ -3878,12 +3969,12 @@ let B = class extends p {
                   <path d="M18 6 6 18M6 6l12 12" />
                 </svg>
               </button>
-            ` : x}
+            ` : u}
       </div>
     `;
   }
 };
-B.styles = d`
+U.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -4004,25 +4095,25 @@ B.styles = d`
   `;
 Be([
   n()
-], B.prototype, "variant", 2);
+], U.prototype, "variant", 2);
 Be([
   n()
-], B.prototype, "heading", 2);
+], U.prototype, "heading", 2);
 Be([
   n({ type: Boolean })
-], B.prototype, "dismissible", 2);
+], U.prototype, "dismissible", 2);
 Be([
   n({ type: Boolean, reflect: !0 })
-], B.prototype, "open", 2);
-B = Be([
+], U.prototype, "open", 2);
+U = Be([
   h("vox-alert")
-], B);
-var Zr = Object.defineProperty, Kr = Object.getOwnPropertyDescriptor, xo = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? Kr(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && Zr(e, o, t), t;
+], U);
+var Zr = Object.defineProperty, Kr = Object.getOwnPropertyDescriptor, xo = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? Kr(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && Zr(e, r, t), t;
 };
-let Xe = class extends p {
+let Ye = class extends p {
   constructor() {
     super(...arguments), this.variant = "brand";
   }
@@ -4030,7 +4121,7 @@ let Xe = class extends p {
     return c`<span class="badge ${this.variant}"><slot></slot></span>`;
   }
 };
-Xe.styles = d`
+Ye.styles = d`
     :host {
       display: inline-block;
     }
@@ -4074,30 +4165,30 @@ Xe.styles = d`
   `;
 xo([
   n()
-], Xe.prototype, "variant", 2);
-Xe = xo([
+], Ye.prototype, "variant", 2);
+Ye = xo([
   h("vox-badge")
-], Xe);
-var Gr = Object.defineProperty, Wr = Object.getOwnPropertyDescriptor, Dt = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? Wr(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && Gr(e, o, t), t;
+], Ye);
+var Gr = Object.defineProperty, Wr = Object.getOwnPropertyDescriptor, Dt = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? Wr(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && Gr(e, r, t), t;
 };
-let we = class extends p {
+let _e = class extends p {
   constructor() {
     super(...arguments), this.date = "";
   }
   render() {
-    const r = /* @__PURE__ */ new Date(`${this.date}T00:00:00`), e = !Number.isNaN(r.getTime()), o = e ? r.toLocaleString(this.locale, { month: "short" }) : "—", s = e ? r.getDate() : "–";
+    const o = /* @__PURE__ */ new Date(`${this.date}T00:00:00`), e = !Number.isNaN(o.getTime()), r = e ? o.toLocaleString(this.locale, { month: "short" }) : "—", s = e ? o.getDate() : "–";
     return c`
       <time class="tile" datetime=${this.date}>
-        <span class="month">${o}</span>
+        <span class="month">${r}</span>
         <span class="day">${s}</span>
       </time>
     `;
   }
 };
-we.styles = d`
+_e.styles = d`
     :host {
       display: inline-block;
       font-family: var(--vox-font-family-base);
@@ -4135,17 +4226,17 @@ we.styles = d`
   `;
 Dt([
   n()
-], we.prototype, "date", 2);
+], _e.prototype, "date", 2);
 Dt([
   n()
-], we.prototype, "locale", 2);
-we = Dt([
+], _e.prototype, "locale", 2);
+_e = Dt([
   h("vox-calendar-tile")
-], we);
-var Xr = Object.defineProperty, Yr = Object.getOwnPropertyDescriptor, Ht = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? Yr(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && Xr(e, o, t), t;
+], _e);
+var Xr = Object.defineProperty, Yr = Object.getOwnPropertyDescriptor, Ht = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? Yr(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && Xr(e, r, t), t;
 };
 const Jr = {
   info: "Info",
@@ -4158,7 +4249,7 @@ const Jr = {
   warning: "warning",
   danger: "x-circle"
 };
-let _e = class extends p {
+let Ce = class extends p {
   constructor() {
     super(...arguments), this.variant = "info";
   }
@@ -4175,7 +4266,7 @@ let _e = class extends p {
           stroke-linejoin="round"
           aria-hidden="true"
         >
-          ${j[Qr[this.variant]]}
+          ${D[Qr[this.variant]]}
         </svg>
         <div class="content">
           <p class="heading">${this.heading ?? Jr[this.variant]}</p>
@@ -4185,7 +4276,7 @@ let _e = class extends p {
     `;
   }
 };
-_e.styles = d`
+Ce.styles = d`
     :host {
       display: block;
     }
@@ -4270,40 +4361,40 @@ _e.styles = d`
   `;
 Ht([
   n()
-], _e.prototype, "variant", 2);
+], Ce.prototype, "variant", 2);
 Ht([
   n()
-], _e.prototype, "heading", 2);
-_e = Ht([
+], Ce.prototype, "heading", 2);
+Ce = Ht([
   h("vox-callout")
-], _e);
-var es = Object.defineProperty, ts = Object.getOwnPropertyDescriptor, lt = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? ts(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && es(e, o, t), t;
+], Ce);
+var es = Object.defineProperty, ts = Object.getOwnPropertyDescriptor, lt = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? ts(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && es(e, r, t), t;
 };
-let J = class extends p {
+let te = class extends p {
   constructor() {
     super(...arguments), this.heading = "", this.hasIcon = !1, this.hasBadge = !1, this.hasFooter = !1;
   }
-  handleIconSlotChange(r) {
-    const e = r.target;
+  handleIconSlotChange(o) {
+    const e = o.target;
     this.hasIcon = e.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
-  handleBadgeSlotChange(r) {
-    const e = r.target;
+  handleBadgeSlotChange(o) {
+    const e = o.target;
     this.hasBadge = e.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
-  handleFooterSlotChange(r) {
-    const e = r.target;
+  handleFooterSlotChange(o) {
+    const e = o.target;
     this.hasFooter = e.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
-    const r = c`
+    const o = c`
       <div class="badge ${this.hasBadge ? "has-badge" : ""}">
         <slot name="badge" @slotchange=${this.handleBadgeSlotChange}></slot>
       </div>
-      <div class="icon ${this.hasIcon ? "has-icon" : ""}">
+      <div class="icon ${this.hasIcon ? "has-icon" : ""}" aria-hidden="true">
         <slot name="icon" @slotchange=${this.handleIconSlotChange}></slot>
       </div>
       <h3 class="heading">${this.heading}</h3>
@@ -4312,10 +4403,10 @@ let J = class extends p {
         <slot name="footer" @slotchange=${this.handleFooterSlotChange}></slot>
       </div>
     `;
-    return this.href !== void 0 ? c`<a class="card" href=${this.href} target=${this.target ?? x}>${r}</a>` : c`<div class="card">${r}</div>`;
+    return this.href !== void 0 ? c`<a class="card" href=${this.href} target=${this.target ?? u}>${o}</a>` : c`<div class="card">${o}</div>`;
   }
 };
-J.styles = d`
+te.styles = d`
     :host {
       display: block;
     }
@@ -4402,37 +4493,37 @@ J.styles = d`
   `;
 lt([
   n()
-], J.prototype, "heading", 2);
+], te.prototype, "heading", 2);
 lt([
   n()
-], J.prototype, "href", 2);
+], te.prototype, "href", 2);
 lt([
   n()
-], J.prototype, "target", 2);
-J = lt([
+], te.prototype, "target", 2);
+te = lt([
   h("vox-card")
-], J);
-var os = Object.defineProperty, rs = Object.getOwnPropertyDescriptor, fo = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? rs(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && os(e, o, t), t;
+], te);
+var os = Object.defineProperty, rs = Object.getOwnPropertyDescriptor, fo = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? rs(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && os(e, r, t), t;
 };
-let Ye = class extends p {
+let Je = class extends p {
   constructor() {
     super(...arguments), this.heading = "", this.hasBody = !1, this.hasActions = !1;
   }
-  handleBodySlotChange(r) {
-    const e = r.target;
+  handleBodySlotChange(o) {
+    const e = o.target;
     this.hasBody = e.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
-  handleActionsSlotChange(r) {
-    const e = r.target;
+  handleActionsSlotChange(o) {
+    const e = o.target;
     this.hasActions = e.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
     return c`
       <div class="band">
-        ${this.heading ? c`<h2 class="heading">${this.heading}</h2>` : x}
+        ${this.heading ? c`<h2 class="heading">${this.heading}</h2>` : u}
         <div class="body ${this.hasBody ? "has-content" : ""}">
           <slot @slotchange=${this.handleBodySlotChange}></slot>
         </div>
@@ -4443,7 +4534,7 @@ let Ye = class extends p {
     `;
   }
 };
-Ye.styles = d`
+Je.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -4500,23 +4591,23 @@ Ye.styles = d`
   `;
 fo([
   n()
-], Ye.prototype, "heading", 2);
-Ye = fo([
+], Je.prototype, "heading", 2);
+Je = fo([
   h("vox-cta-band")
-], Ye);
-var ss = Object.defineProperty, as = Object.getOwnPropertyDescriptor, go = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? as(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && ss(e, o, t), t;
+], Je);
+var ss = Object.defineProperty, as = Object.getOwnPropertyDescriptor, go = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? as(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && ss(e, r, t), t;
 };
-let Je = class extends p {
+let Qe = class extends p {
   constructor() {
     super(...arguments), this.heading = "";
   }
   render() {
     return c`
       <div class="empty">
-        <div class="icon"><slot name="icon"></slot></div>
+        <div class="icon" aria-hidden="true"><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>
@@ -4524,7 +4615,7 @@ let Je = class extends p {
     `;
   }
 };
-Je.styles = d`
+Qe.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -4570,14 +4661,14 @@ Je.styles = d`
   `;
 go([
   n()
-], Je.prototype, "heading", 2);
-Je = go([
+], Qe.prototype, "heading", 2);
+Qe = go([
   h("vox-empty-state")
-], Je);
-var is = Object.defineProperty, ns = Object.getOwnPropertyDescriptor, zt = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? ns(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && is(e, o, t), t;
+], Qe);
+var is = Object.defineProperty, ns = Object.getOwnPropertyDescriptor, zt = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? ns(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && is(e, r, t), t;
 };
 let yt = class extends p {
   render() {
@@ -4622,7 +4713,7 @@ yt.styles = d`
 yt = zt([
   h("vox-footer")
 ], yt);
-let Qe = class extends p {
+let et = class extends p {
   constructor() {
     super(...arguments), this.heading = "";
   }
@@ -4633,7 +4724,7 @@ let Qe = class extends p {
     `;
   }
 };
-Qe.styles = d`
+et.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -4667,16 +4758,16 @@ Qe.styles = d`
   `;
 zt([
   n()
-], Qe.prototype, "heading", 2);
-Qe = zt([
+], et.prototype, "heading", 2);
+et = zt([
   h("vox-footer-column")
-], Qe);
-var ls = Object.defineProperty, cs = Object.getOwnPropertyDescriptor, ct = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? cs(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && ls(e, o, t), t;
+], et);
+var ls = Object.defineProperty, cs = Object.getOwnPropertyDescriptor, ct = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? cs(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && ls(e, r, t), t;
 };
-let Q = class extends p {
+let oe = class extends p {
   constructor() {
     super(...arguments), this.cols = 0, this.min = "240px", this.gap = "md";
   }
@@ -4687,7 +4778,7 @@ let Q = class extends p {
     return c`<slot></slot>`;
   }
 };
-Q.styles = d`
+oe.styles = d`
     :host {
       display: grid;
     }
@@ -4706,33 +4797,33 @@ Q.styles = d`
   `;
 ct([
   n({ type: Number })
-], Q.prototype, "cols", 2);
+], oe.prototype, "cols", 2);
 ct([
   n()
-], Q.prototype, "min", 2);
+], oe.prototype, "min", 2);
 ct([
   n({ reflect: !0 })
-], Q.prototype, "gap", 2);
-Q = ct([
+], oe.prototype, "gap", 2);
+oe = ct([
   h("vox-grid")
-], Q);
-var ds = Object.defineProperty, hs = Object.getOwnPropertyDescriptor, Tt = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? hs(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && ds(e, o, t), t;
+], oe);
+var ds = Object.defineProperty, hs = Object.getOwnPropertyDescriptor, Tt = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? hs(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && ds(e, r, t), t;
 };
-let Ce = class extends p {
+let Oe = class extends p {
   constructor() {
     super(...arguments), this.eyebrow = "", this.heading = "", this.hasActions = !1;
   }
-  handleActionsSlotChange(r) {
-    const e = r.target;
+  handleActionsSlotChange(o) {
+    const e = o.target;
     this.hasActions = e.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
     return c`
       <header class="hero">
-        ${this.eyebrow ? c`<p class="eyebrow">${this.eyebrow}</p>` : x}
+        ${this.eyebrow ? c`<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" : ""}">
@@ -4742,7 +4833,7 @@ let Ce = class extends p {
     `;
   }
 };
-Ce.styles = d`
+Oe.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -4801,17 +4892,17 @@ Ce.styles = d`
   `;
 Tt([
   n()
-], Ce.prototype, "eyebrow", 2);
+], Oe.prototype, "eyebrow", 2);
 Tt([
   n()
-], Ce.prototype, "heading", 2);
-Ce = Tt([
+], Oe.prototype, "heading", 2);
+Oe = Tt([
   h("vox-hero")
-], Ce);
-var ps = Object.defineProperty, vs = Object.getOwnPropertyDescriptor, dt = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? vs(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && ps(e, o, t), t;
+], Oe);
+var ps = Object.defineProperty, vs = Object.getOwnPropertyDescriptor, dt = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? vs(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && ps(e, r, t), t;
 };
 let mt = class extends p {
   render() {
@@ -4828,19 +4919,19 @@ mt.styles = d`
 mt = dt([
   h("vox-link-hub")
 ], mt);
-let Oe = class extends p {
+let Me = class extends p {
   constructor() {
     super(...arguments), this.href = "#", this.heading = "", this.hasIcon = !1;
   }
-  handleIconSlotChange(r) {
-    const e = r.target;
+  handleIconSlotChange(o) {
+    const e = o.target;
     this.hasIcon = e.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
     return c`
       <a href=${this.href}>
         <span class="heading">
-          <span class="icon ${this.hasIcon ? "has-icon" : ""}">
+          <span class="icon ${this.hasIcon ? "has-icon" : ""}" aria-hidden="true">
             <slot name="icon" @slotchange=${this.handleIconSlotChange}></slot>
           </span>
           ${this.heading}
@@ -4854,7 +4945,7 @@ let Oe = class extends p {
     `;
   }
 };
-Oe.styles = d`
+Me.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -4917,19 +5008,19 @@ Oe.styles = d`
   `;
 dt([
   n()
-], Oe.prototype, "href", 2);
+], Me.prototype, "href", 2);
 dt([
   n()
-], Oe.prototype, "heading", 2);
-Oe = dt([
+], Me.prototype, "heading", 2);
+Me = dt([
   h("vox-link-hub-item")
-], Oe);
-var us = Object.defineProperty, xs = Object.getOwnPropertyDescriptor, Bt = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? xs(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && us(e, o, t), t;
+], Me);
+var us = Object.defineProperty, xs = Object.getOwnPropertyDescriptor, It = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? xs(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && us(e, r, t), t;
 };
-let Me = class extends p {
+let Pe = class extends p {
   constructor() {
     super(...arguments), this.size = "md", this.label = "Loading";
   }
@@ -4942,7 +5033,7 @@ let Me = class extends p {
     `;
   }
 };
-Me.styles = d`
+Pe.styles = d`
     :host {
       display: inline-block;
     }
@@ -4995,21 +5086,21 @@ Me.styles = d`
       white-space: nowrap;
     }
   `;
-Bt([
+It([
   n({ reflect: !0 })
-], Me.prototype, "size", 2);
-Bt([
+], Pe.prototype, "size", 2);
+It([
   n()
-], Me.prototype, "label", 2);
-Me = Bt([
+], Pe.prototype, "label", 2);
+Pe = It([
   h("vox-loader")
-], Me);
-var fs = Object.defineProperty, gs = Object.getOwnPropertyDescriptor, bo = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? gs(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && fs(e, o, t), t;
+], Pe);
+var fs = Object.defineProperty, gs = Object.getOwnPropertyDescriptor, bo = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? gs(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && fs(e, r, t), t;
 };
-let et = class extends p {
+let tt = class extends p {
   constructor() {
     super(...arguments), this.label = "Pagination";
   }
@@ -5021,7 +5112,7 @@ let et = class extends p {
     `;
   }
 };
-et.styles = d`
+tt.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -5033,7 +5124,8 @@ et.styles = d`
       flex-wrap: wrap;
     }
 
-    ::slotted(a) {
+    ::slotted(a),
+    ::slotted(span) {
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -5055,7 +5147,7 @@ et.styles = d`
       background-color: var(--vox-color-brand-soft);
     }
 
-    ::slotted(a[aria-current='page']) {
+    ::slotted([aria-current='page']) {
       background-color: var(--vox-color-brand-3);
       color: var(--vox-color-text-inverse);
       font-weight: 600;
@@ -5063,16 +5155,16 @@ et.styles = d`
   `;
 bo([
   n()
-], et.prototype, "label", 2);
-et = bo([
+], tt.prototype, "label", 2);
+tt = bo([
   h("vox-pagination")
-], et);
-var bs = Object.defineProperty, ys = Object.getOwnPropertyDescriptor, Nt = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? ys(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && bs(e, o, t), t;
+], tt);
+var bs = Object.defineProperty, ys = Object.getOwnPropertyDescriptor, Bt = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? ys(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && bs(e, r, t), t;
 };
-let Pe = class extends p {
+let Ae = class extends p {
   constructor() {
     super(...arguments), this.attribution = "", this.detail = "";
   }
@@ -5083,14 +5175,14 @@ let Pe = class extends p {
         ${this.attribution ? c`
               <footer>
                 <span class="attribution">${this.attribution}</span>
-                ${this.detail ? c`<span class="detail"> — ${this.detail}</span>` : x}
+                ${this.detail ? c`<span class="detail"> — ${this.detail}</span>` : u}
               </footer>
-            ` : x}
+            ` : u}
       </blockquote>
     `;
   }
 };
-Pe.styles = d`
+Ae.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -5132,26 +5224,26 @@ Pe.styles = d`
       color: var(--vox-color-text-2);
     }
   `;
-Nt([
+Bt([
   n()
-], Pe.prototype, "attribution", 2);
-Nt([
+], Ae.prototype, "attribution", 2);
+Bt([
   n()
-], Pe.prototype, "detail", 2);
-Pe = Nt([
+], Ae.prototype, "detail", 2);
+Ae = Bt([
   h("vox-quote")
-], Pe);
-var ms = Object.defineProperty, $s = Object.getOwnPropertyDescriptor, I = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? $s(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && ms(e, o, t), t;
+], Ae);
+var ms = Object.defineProperty, $s = Object.getOwnPropertyDescriptor, K = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? $s(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && ms(e, r, t), t;
 };
-let tt = class extends p {
+let ot = class extends p {
   constructor() {
     super(...arguments), this.heading = "", this.hasDescription = !1;
   }
-  handleDescriptionSlotChange(r) {
-    const e = r.target;
+  handleDescriptionSlotChange(o) {
+    const e = o.target;
     this.hasDescription = e.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
@@ -5169,7 +5261,7 @@ let tt = class extends p {
     `;
   }
 };
-tt.styles = d`
+ot.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -5201,24 +5293,24 @@ tt.styles = d`
       margin-top: var(--vox-space-6);
     }
   `;
-I([
+K([
   n()
-], tt.prototype, "heading", 2);
-tt = I([
+], ot.prototype, "heading", 2);
+ot = K([
   h("vox-sponsor-tier")
-], tt);
-let N = class extends p {
+], ot);
+let q = class extends p {
   constructor() {
     super(...arguments), this.name = "", this.hasBody = !1;
   }
-  handleBodySlotChange(r) {
-    const e = r.target;
+  handleBodySlotChange(o) {
+    const e = o.target;
     this.hasBody = e.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
-    const r = c`
+    const o = c`
       <div class="logo ${this.logo ? "has-logo" : ""}">
-        ${this.logo ? c`<img src=${this.logo} alt=${this.name} />` : x}
+        ${this.logo ? c`<img src=${this.logo} alt=${this.name} />` : u}
       </div>
       <span class="name">${this.name}</span>
       <div class="body ${this.hasBody ? "has-content" : ""}">
@@ -5228,12 +5320,12 @@ let N = class extends p {
     return this.href !== void 0 ? c`<a
           class="sponsor"
           href=${this.href}
-          target=${this.target ?? x}
-          >${r}</a
-        >` : c`<div class="sponsor">${r}</div>`;
+          target=${this.target ?? u}
+          >${o}</a
+        >` : c`<div class="sponsor">${o}</div>`;
   }
 };
-N.styles = d`
+q.styles = d`
     :host {
       display: block;
     }
@@ -5299,27 +5391,27 @@ N.styles = d`
       display: none;
     }
   `;
-I([
+K([
   n()
-], N.prototype, "name", 2);
-I([
+], q.prototype, "name", 2);
+K([
   n()
-], N.prototype, "href", 2);
-I([
+], q.prototype, "href", 2);
+K([
   n()
-], N.prototype, "logo", 2);
-I([
+], q.prototype, "logo", 2);
+K([
   n()
-], N.prototype, "target", 2);
-N = I([
+], q.prototype, "target", 2);
+q = K([
   h("vox-sponsor")
-], N);
-var ws = Object.defineProperty, _s = Object.getOwnPropertyDescriptor, Rt = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? _s(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && ws(e, o, t), t;
+], q);
+var ws = Object.defineProperty, _s = Object.getOwnPropertyDescriptor, Nt = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? _s(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && ws(e, r, t), t;
 };
-let Ae = class extends p {
+let ke = class extends p {
   constructor() {
     super(...arguments), this.value = "", this.label = "";
   }
@@ -5331,7 +5423,7 @@ let Ae = class extends p {
     `;
   }
 };
-Ae.styles = d`
+ke.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -5358,24 +5450,24 @@ Ae.styles = d`
       color: var(--vox-color-text-2);
     }
   `;
-Rt([
+Nt([
   n()
-], Ae.prototype, "value", 2);
-Rt([
+], ke.prototype, "value", 2);
+Nt([
   n()
-], Ae.prototype, "label", 2);
-Ae = Rt([
+], ke.prototype, "label", 2);
+ke = Nt([
   h("vox-stat")
-], Ae);
-var Cs = Object.defineProperty, Os = Object.getOwnPropertyDescriptor, Ne = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? Os(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && Cs(e, o, t), t;
+], ke);
+var Cs = Object.defineProperty, Os = Object.getOwnPropertyDescriptor, Ne = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? Os(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && Cs(e, r, t), t;
 };
 let $t = class extends p {
   numberSteps() {
-    this.querySelectorAll("vox-step").forEach((r, e) => {
-      r.number = e + 1;
+    this.querySelectorAll("vox-step").forEach((o, e) => {
+      o.number = e + 1;
     });
   }
   render() {
@@ -5403,7 +5495,7 @@ $t.styles = d`
 $t = Ne([
   h("vox-step-indicator")
 ], $t);
-let ee = class extends p {
+let re = class extends p {
   constructor() {
     super(...arguments), this.label = "", this.state = "upcoming", this.number = 1;
   }
@@ -5419,12 +5511,15 @@ let ee = class extends p {
                 <path d="m4 12 5 5L20 6" />
               </svg>` : this.number}
         </span>
-        <span class="label">${this.label}</span>
+        <span class="label">
+          ${this.label}
+          ${this.state !== "current" ? c`<span class="visually-hidden"> (${this.state})</span>` : u}
+        </span>
       </div>
     `;
   }
 };
-ee.styles = d`
+re.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -5497,23 +5592,32 @@ ee.styles = d`
       font-weight: 600;
       color: var(--vox-color-text-1);
     }
+
+    .visually-hidden {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip: rect(0 0 0 0);
+      white-space: nowrap;
+    }
   `;
 Ne([
   n()
-], ee.prototype, "label", 2);
+], re.prototype, "label", 2);
 Ne([
   n({ reflect: !0 })
-], ee.prototype, "state", 2);
+], re.prototype, "state", 2);
 Ne([
   n({ type: Number })
-], ee.prototype, "number", 2);
-ee = Ne([
+], re.prototype, "number", 2);
+re = Ne([
   h("vox-step")
-], ee);
-var Ms = Object.defineProperty, Ps = Object.getOwnPropertyDescriptor, ht = (r, e, o, s) => {
-  for (var t = s > 1 ? void 0 : s ? Ps(e, o) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (t = (s ? i(e, o, t) : i(t)) || t);
-  return s && t && Ms(e, o, t), t;
+], re);
+var Ms = Object.defineProperty, Ps = Object.getOwnPropertyDescriptor, ht = (o, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? Ps(e, r) : e, a = o.length - 1, i; a >= 0; a--)
+    (i = o[a]) && (t = (s ? i(e, r, t) : i(t)) || t);
+  return s && t && Ms(e, r, t), t;
 };
 let wt = class extends p {
   render() {
@@ -5528,7 +5632,7 @@ wt.styles = d`
 wt = ht([
   h("vox-timeline")
 ], wt);
-let ke = class extends p {
+let Le = class extends p {
   constructor() {
     super(...arguments), this.heading = "", this.date = "";
   }
@@ -5536,14 +5640,14 @@ let ke = class extends p {
     return c`
       <div class="item">
         <span class="dot" aria-hidden="true"></span>
-        ${this.date ? c`<div class="date">${this.date}</div>` : x}
+        ${this.date ? c`<div class="date">${this.date}</div>` : u}
         <h3 class="heading">${this.heading}</h3>
         <div class="body"><slot></slot></div>
       </div>
     `;
   }
 };
-ke.styles = d`
+Le.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -5595,67 +5699,67 @@ ke.styles = d`
   `;
 ht([
   n()
-], ke.prototype, "heading", 2);
+], Le.prototype, "heading", 2);
 ht([
   n()
-], ke.prototype, "date", 2);
-ke = ht([
+], Le.prototype, "date", 2);
+Le = ht([
   h("vox-timeline-item")
-], ke);
+], Le);
 export {
-  We as VoxAccordion,
-  $e as VoxAccordionItem,
-  B as VoxAlert,
-  H as VoxAvatar,
-  Xe as VoxBadge,
-  ve as VoxBillboard,
+  Xe as VoxAccordion,
+  R as VoxAccordionItem,
+  U as VoxAlert,
+  z as VoxAvatar,
+  Ye as VoxBadge,
+  ge as VoxBillboard,
   gt as VoxBreadcrumbs,
-  _ as VoxButton,
-  we as VoxCalendarTile,
-  _e as VoxCallout,
-  J as VoxCard,
-  de as VoxCheckbox,
-  ce as VoxCta,
-  Ye as VoxCtaBand,
-  T as VoxDialog,
-  ye as VoxDisclosure,
-  me as VoxDropdown,
-  Je as VoxEmptyState,
-  P as VoxFileInput,
+  C as VoxButton,
+  _e as VoxCalendarTile,
+  Ce as VoxCallout,
+  te as VoxCard,
+  ue as VoxCheckbox,
+  ve as VoxCta,
+  Je as VoxCtaBand,
+  B as VoxDialog,
+  N as VoxDisclosure,
+  we as VoxDropdown,
+  Qe as VoxEmptyState,
+  A as VoxFileInput,
   yt as VoxFooter,
-  Qe as VoxFooterColumn,
-  Q as VoxGrid,
-  X as VoxHeader,
-  Ce as VoxHero,
-  G as VoxIcon,
-  A as VoxInput,
+  et as VoxFooterColumn,
+  oe as VoxGrid,
+  Q as VoxHeader,
+  Oe as VoxHero,
+  Y as VoxIcon,
+  k as VoxInput,
   ft as VoxInputGroup,
   mt as VoxLinkHub,
-  Oe as VoxLinkHubItem,
-  Me as VoxLoader,
-  et as VoxPagination,
-  Pe as VoxQuote,
-  W as VoxRadio,
-  Ze as VoxRadioGroup,
-  he as VoxSelect,
-  z as VoxSeriesNav,
-  Y as VoxSidenav,
-  ue as VoxSidenavGroup,
-  xe as VoxSidenavItem,
-  N as VoxSponsor,
-  tt as VoxSponsorTier,
-  Ae as VoxStat,
-  ee as VoxStep,
+  Me as VoxLinkHubItem,
+  Pe as VoxLoader,
+  tt as VoxPagination,
+  Ae as VoxQuote,
+  J as VoxRadio,
+  Ke as VoxRadioGroup,
+  xe as VoxSelect,
+  T as VoxSeriesNav,
+  ee as VoxSidenav,
+  I as VoxSidenavGroup,
+  be as VoxSidenavItem,
+  q as VoxSponsor,
+  ot as VoxSponsorTier,
+  ke as VoxStat,
+  re as VoxStep,
   $t as VoxStepIndicator,
-  Ke as VoxSubnav,
-  pe as VoxSwitch,
-  fe as VoxTab,
-  ge as VoxTabPanel,
+  Ge as VoxSubnav,
+  fe as VoxSwitch,
+  ye as VoxTab,
+  me as VoxTabPanel,
   bt as VoxTabs,
-  D as VoxTextarea,
-  K as VoxThemeToggle,
+  H as VoxTextarea,
+  X as VoxThemeToggle,
   wt as VoxTimeline,
-  ke as VoxTimelineItem,
-  Ge as VoxToc,
-  be as VoxTocItem
+  Le as VoxTimelineItem,
+  We as VoxToc,
+  $e as VoxTocItem
 };