@openvoxproject/voxblocks 0.10.0 → 0.11.0

package/dist/voxblocks.js

@@ -1,40 +1,40 @@
-import { css as d, LitElement as v, html as c, svg as l, nothing as h } from "lit";
-import { property as n, customElement as p, state as Le, query as Ze } from "lit/decorators.js";
-import { classMap as mo } from "lit/directives/class-map.js";
-import { ifDefined as P } from "lit/directives/if-defined.js";
-import { live as po } from "lit/directives/live.js";
-var yo = Object.defineProperty, wo = Object.getOwnPropertyDescriptor, O = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? wo(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && yo(o, a, e), e;
+import { css as d, LitElement as h, html as c, svg as l, nothing as v } from "lit";
+import { property as n, customElement as p, state as le, query as Ze } from "lit/decorators.js";
+import { classMap as bt } from "lit/directives/class-map.js";
+import { ifDefined as u } from "lit/directives/if-defined.js";
+import { live as dt } from "lit/directives/live.js";
+var mt = Object.defineProperty, yt = Object.getOwnPropertyDescriptor, V = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? yt(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && mt(t, a, e), e;
 };
-let f = class extends v {
+let g = class extends h {
   constructor() {
     super(...arguments), this.variant = "brand", this.size = "md", this.type = "button", this.disabled = !1;
   }
   render() {
-    const t = mo({
+    const o = bt({
       button: !0,
       [this.variant]: !0,
       [this.size]: !0
     });
     return this.href !== void 0 && !this.disabled ? c`
         <a
-          class=${t}
+          class=${o}
           href=${this.href}
-          target=${P(this.target)}
-          rel=${P(this.target === "_blank" ? "noreferrer" : void 0)}
+          target=${u(this.target)}
+          rel=${u(this.target === "_blank" ? "noreferrer" : void 0)}
         >
           <slot></slot>
         </a>
       ` : c`
-      <button class=${t} type=${this.type} ?disabled=${this.disabled}>
+      <button class=${o} type=${this.type} ?disabled=${this.disabled}>
         <slot></slot>
       </button>
     `;
   }
 };
-f.styles = d`
+g.styles = d`
     :host {
       display: inline-block;
     }
@@ -142,33 +142,33 @@ f.styles = d`
       border-radius: 0 var(--vox-radius-md) var(--vox-radius-md) 0;
     }
   `;
-O([
+V([
   n()
-], f.prototype, "variant", 2);
-O([
+], g.prototype, "variant", 2);
+V([
   n()
-], f.prototype, "size", 2);
-O([
+], g.prototype, "size", 2);
+V([
   n()
-], f.prototype, "href", 2);
-O([
+], g.prototype, "href", 2);
+V([
   n()
-], f.prototype, "target", 2);
-O([
+], g.prototype, "target", 2);
+V([
   n()
-], f.prototype, "type", 2);
-O([
+], g.prototype, "type", 2);
+V([
   n({ type: Boolean, reflect: !0 })
-], f.prototype, "disabled", 2);
-f = O([
+], g.prototype, "disabled", 2);
+g = V([
   p("vox-button")
-], f);
-var $o = Object.defineProperty, _o = Object.getOwnPropertyDescriptor, Ke = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? _o(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && $o(o, a, e), e;
+], g);
+var wt = Object.defineProperty, $t = Object.getOwnPropertyDescriptor, Ue = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? $t(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && wt(t, a, e), e;
 };
-let N = class extends v {
+let R = class extends h {
   constructor() {
     super(...arguments), this.href = "#";
   }
@@ -184,7 +184,7 @@ let N = class extends v {
     `;
   }
 };
-N.styles = d`
+R.styles = d`
     :host {
       display: inline-block;
       font-family: var(--vox-font-family-base);
@@ -221,60 +221,60 @@ N.styles = d`
       transform: translateX(3px);
     }
   `;
-Ke([
+Ue([
   n()
-], N.prototype, "href", 2);
-Ke([
+], R.prototype, "href", 2);
+Ue([
   n()
-], N.prototype, "target", 2);
-N = Ke([
+], R.prototype, "target", 2);
+R = Ue([
   p("vox-cta")
-], N);
-var Co = Object.defineProperty, Mo = Object.getOwnPropertyDescriptor, Pe = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Mo(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && Co(o, a, e), e;
+], R);
+var _t = Object.defineProperty, Ct = Object.getOwnPropertyDescriptor, Pe = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Ct(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && _t(t, a, e), e;
 };
-const co = "vox-theme", ge = "data-vox-theme";
-let V = class extends v {
+const ct = "vox-theme", be = "data-vox-theme";
+let z = class extends h {
   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 = (t) => {
-      localStorage.getItem(co) || document.documentElement.setAttribute(ge, t.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(ct) || document.documentElement.setAttribute(be, o.matches ? "dark" : "light");
     };
   }
   connectedCallback() {
     super.connectedCallback(), this.syncFromDocument(), this.observer = new MutationObserver(() => this.syncFromDocument()), this.observer.observe(document.documentElement, {
       attributes: !0,
-      attributeFilter: [ge]
+      attributeFilter: [be]
     }), this.media.addEventListener("change", this.handleSystemChange);
   }
   disconnectedCallback() {
-    var t;
-    super.disconnectedCallback(), (t = this.observer) == null || t.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 t = document.documentElement.getAttribute(ge) === "dark";
-    this.dark = t, this.toggleAttribute("dark", t);
+    const o = document.documentElement.getAttribute(be) === "dark";
+    this.dark = o, this.toggleAttribute("dark", o);
   }
   handleClick() {
-    const t = this.dark ? "light" : "dark";
-    document.documentElement.setAttribute(ge, t), localStorage.setItem(co, t), this.dispatchEvent(
+    const o = this.dark ? "light" : "dark";
+    document.documentElement.setAttribute(be, o), localStorage.setItem(ct, o), this.dispatchEvent(
       new CustomEvent("vox-theme-change", {
-        detail: { theme: t },
+        detail: { theme: o },
         bubbles: !0,
         composed: !0
       })
     );
   }
   render() {
-    const t = 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=${t}
-        title=${t}
+        aria-label=${o}
+        title=${o}
         @click=${this.handleClick}
       >
         <span class="track">
@@ -291,7 +291,7 @@ let V = class extends v {
     `;
   }
 };
-V.styles = d`
+z.styles = d`
     :host {
       display: inline-flex;
     }
@@ -352,17 +352,17 @@ V.styles = d`
   `;
 Pe([
   n({ attribute: "light-label" })
-], V.prototype, "lightLabel", 2);
+], z.prototype, "lightLabel", 2);
 Pe([
   n({ attribute: "dark-label" })
-], V.prototype, "darkLabel", 2);
+], z.prototype, "darkLabel", 2);
 Pe([
-  Le()
-], V.prototype, "dark", 2);
-V = Pe([
+  le()
+], z.prototype, "dark", 2);
+z = Pe([
   p("vox-theme-toggle")
-], V);
-const m = {
+], z);
+const y = {
   // 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"/>`,
@@ -450,18 +450,18 @@ const m = {
   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 Oo = Object.defineProperty, ko = Object.getOwnPropertyDescriptor, Ve = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? ko(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && Oo(o, a, e), e;
+var Ot = Object.defineProperty, Mt = Object.getOwnPropertyDescriptor, Ve = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Mt(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && Ot(t, a, e), e;
 };
-let j = class extends v {
+let E = class extends h {
   constructor() {
     super(...arguments), this.name = "info", this.size = "md";
   }
   render() {
-    const t = m[this.name];
-    return t ? c`
+    const o = y[this.name];
+    return o ? c`
       <svg
         viewBox="0 0 48 48"
         fill="none"
@@ -469,16 +469,16 @@ let j = class extends v {
         stroke-width="2"
         stroke-linecap="round"
         stroke-linejoin="round"
-        role=${this.label ? "img" : h}
-        aria-hidden=${this.label ? h : "true"}
-        aria-label=${this.label ?? h}
+        role=${this.label ? "img" : v}
+        aria-hidden=${this.label ? v : "true"}
+        aria-label=${this.label ?? v}
       >
-        ${t}
+        ${o}
       </svg>
-    ` : h;
+    ` : v;
   }
 };
-j.styles = d`
+E.styles = d`
     :host {
       display: inline-flex;
       flex: none;
@@ -511,24 +511,24 @@ j.styles = d`
   `;
 Ve([
   n()
-], j.prototype, "name", 2);
+], E.prototype, "name", 2);
 Ve([
   n({ reflect: !0 })
-], j.prototype, "size", 2);
+], E.prototype, "size", 2);
 Ve([
   n()
-], j.prototype, "label", 2);
-j = Ve([
+], E.prototype, "label", 2);
+E = Ve([
   p("vox-icon")
-], j);
-var Lo = Object.defineProperty, ne = (t, o, a, r) => {
-  for (var e = void 0, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = i(o, a, e) || e);
-  return e && Lo(o, a, e), e;
+], E);
+var kt = Object.defineProperty, N = (o, t, a, r) => {
+  for (var e = void 0, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = i(t, a, e) || e);
+  return e && kt(t, a, e), e;
 };
-const io = class io extends v {
+const it = class it extends h {
   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;
@@ -546,38 +546,45 @@ const io = class io extends v {
     return this.internals.reportValidity();
   }
   /** Mirror a native inner control's validity onto the host element. */
-  syncValidity(o) {
-    this.internals.setValidity(o.validity, o.validationMessage, o);
+  syncValidity(t) {
+    this.internals.setValidity(t.validity, t.validationMessage, t), this.invalid = !t.validity.valid;
   }
-  renderLabel(o) {
+  renderLabel(t) {
     return this.label ? c`
-      <label class="label" for=${o}>
-        ${this.label}${this.required ? c`<span class="required-mark" aria-hidden="true"> *</span>` : h}
+      <label class="label" for=${t}>
+        ${this.label}${this.required ? c`<span class="required-mark" aria-hidden="true"> *</span>` : v}
       </label>
-    ` : h;
+    ` : v;
+  }
+  /** `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>` : h;
+    return this.note ? c`<p class="note" id="note">${this.note}</p>` : v;
   }
 };
-io.formAssociated = !0;
-let x = io;
-ne([
+it.formAssociated = !0;
+let x = it;
+N([
+  le()
+], x.prototype, "invalid");
+N([
   n()
 ], x.prototype, "name");
-ne([
+N([
   n()
 ], x.prototype, "label");
-ne([
+N([
   n()
 ], x.prototype, "note");
-ne([
+N([
   n({ type: Boolean, reflect: !0 })
 ], x.prototype, "disabled");
-ne([
+N([
   n({ type: Boolean, reflect: !0 })
 ], x.prototype, "required");
-const le = d`
+const ce = d`
   :host {
     display: block;
     font-family: var(--vox-font-family-base);
@@ -632,6 +639,15 @@ const le = 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;
@@ -644,7 +660,7 @@ const le = d`
   :host([data-vox-group='end']) .control {
     border-radius: 0 var(--vox-radius-md) var(--vox-radius-md) 0;
   }
-`, vo = d`
+`, pt = d`
   :host {
     display: block;
     font-family: var(--vox-font-family-base);
@@ -673,12 +689,12 @@ const le = d`
     margin: 0;
   }
 `;
-var Po = Object.defineProperty, Vo = Object.getOwnPropertyDescriptor, Ue = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Vo(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && Po(o, a, e), e;
+var Lt = Object.defineProperty, Pt = Object.getOwnPropertyDescriptor, Ke = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Pt(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && Lt(t, a, e), e;
 };
-let I = class extends x {
+let Z = class extends x {
   constructor() {
     super(...arguments), this.checked = !1, this.value = "on";
   }
@@ -686,14 +702,14 @@ let I = class extends x {
     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(t) {
-    this.checked = t.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`
@@ -702,6 +718,8 @@ let I = class extends x {
           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">
@@ -714,8 +732,8 @@ let I = class extends x {
     `;
   }
 };
-I.styles = [
-  vo,
+Z.styles = [
+  pt,
   d`
       .box {
         flex: none;
@@ -755,21 +773,21 @@ I.styles = [
       }
     `
 ];
-Ue([
+Ke([
   n({ type: Boolean, reflect: !0 })
-], I.prototype, "checked", 2);
-Ue([
+], Z.prototype, "checked", 2);
+Ke([
   n()
-], I.prototype, "value", 2);
-I = Ue([
+], Z.prototype, "value", 2);
+Z = Ke([
   p("vox-checkbox")
-], I);
-var jo = Object.defineProperty, Do = Object.getOwnPropertyDescriptor, B = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Do(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && jo(o, a, e), e;
+], Z);
+var Vt = Object.defineProperty, jt = Object.getOwnPropertyDescriptor, T = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? jt(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && Vt(t, a, e), e;
 };
-let g = class extends x {
+let b = class extends x {
   constructor() {
     super(...arguments), this.multiple = !1, this.buttonLabel = "Choose a file", this.fileNames = [];
   }
@@ -777,12 +795,12 @@ let g = class extends x {
     this.fileNames = [], this.inputEl && (this.inputEl.value = ""), this.internals.setFormValue(null);
   }
   handleChange() {
-    const t = [...this.inputEl.files ?? []];
-    this.fileNames = t.map((a) => a.name);
-    const o = new FormData();
-    for (const a of t) o.append(this.name, a);
-    this.internals.setFormValue(t.length > 0 ? o : null), this.internals.setValidity(
-      this.required && t.length === 0 ? { valueMissing: !0 } : {},
+    const o = [...this.inputEl.files ?? []];
+    this.fileNames = o.map((a) => a.name);
+    const t = new FormData();
+    for (const a of o) t.append(this.name, a);
+    this.internals.setFormValue(o.length > 0 ? t : 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 }));
@@ -795,9 +813,11 @@ let g = class extends x {
           <input
             id="file"
             type="file"
-            accept=${P(this.accept)}
+            accept=${u(this.accept)}
             ?multiple=${this.multiple}
             ?disabled=${this.disabled}
+            aria-describedby=${u(this.noteId)}
+            aria-invalid=${this.invalid ? "true" : "false"}
             @change=${this.handleChange}
           />
           <span class="picker">
@@ -812,8 +832,8 @@ let g = class extends x {
     `;
   }
 };
-g.styles = [
-  le,
+b.styles = [
+  ce,
   d`
       input {
         position: absolute;
@@ -862,30 +882,30 @@ g.styles = [
       }
     `
 ];
-B([
+T([
   n()
-], g.prototype, "accept", 2);
-B([
+], b.prototype, "accept", 2);
+T([
   n({ type: Boolean })
-], g.prototype, "multiple", 2);
-B([
+], b.prototype, "multiple", 2);
+T([
   n({ attribute: "button-label" })
-], g.prototype, "buttonLabel", 2);
-B([
-  Le()
-], g.prototype, "fileNames", 2);
-B([
+], b.prototype, "buttonLabel", 2);
+T([
+  le()
+], b.prototype, "fileNames", 2);
+T([
   Ze("input")
-], g.prototype, "inputEl", 2);
-g = B([
+], b.prototype, "inputEl", 2);
+b = T([
   p("vox-file-input")
-], g);
-var zo = Object.defineProperty, Ho = Object.getOwnPropertyDescriptor, q = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Ho(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && zo(o, a, e), e;
+], b);
+var Dt = Object.defineProperty, zt = Object.getOwnPropertyDescriptor, F = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? zt(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && Dt(t, a, e), e;
 };
-let b = class extends x {
+let m = class extends x {
   constructor() {
     super(...arguments), this.type = "text", this.value = "", this.readonly = !1;
   }
@@ -894,15 +914,15 @@ let b = class extends x {
   }
   updated() {
     this.internals.setFormValue(this.value);
-    const t = this.renderRoot.querySelector("input");
-    t && this.syncValidity(t);
+    const o = this.renderRoot.querySelector("input");
+    o && this.syncValidity(o);
   }
-  focus(t) {
-    var o;
-    (o = this.renderRoot.querySelector("input")) == null || o.focus(t);
+  focus(o) {
+    var t;
+    (t = this.renderRoot.querySelector("input")) == null || t.focus(o);
   }
-  handleInput(t) {
-    this.value = t.target.value;
+  handleInput(o) {
+    this.value = o.target.value;
   }
   handleChange() {
     this.dispatchEvent(new Event("change", { bubbles: !0 }));
@@ -915,13 +935,15 @@ let b = class extends x {
           id="input"
           class="control"
           type=${this.type}
-          .value=${po(this.value)}
-          placeholder=${P(this.placeholder)}
-          autocomplete=${P(this.autocomplete)}
+          .value=${dt(this.value)}
+          placeholder=${u(this.placeholder)}
+          autocomplete=${u(this.autocomplete)}
           ?required=${this.required}
           ?readonly=${this.readonly}
           ?disabled=${this.disabled}
-          aria-label=${this.label ? h : "text input"}
+          aria-label=${this.label ? v : "text input"}
+          aria-describedby=${u(this.noteId)}
+          aria-invalid=${this.invalid ? "true" : "false"}
           @input=${this.handleInput}
           @change=${this.handleChange}
         />
@@ -930,35 +952,35 @@ let b = class extends x {
     `;
   }
 };
-b.styles = le;
-q([
+m.styles = ce;
+F([
   n()
-], b.prototype, "type", 2);
-q([
+], m.prototype, "type", 2);
+F([
   n()
-], b.prototype, "value", 2);
-q([
+], m.prototype, "value", 2);
+F([
   n()
-], b.prototype, "placeholder", 2);
-q([
+], m.prototype, "placeholder", 2);
+F([
   n()
-], b.prototype, "autocomplete", 2);
-q([
+], m.prototype, "autocomplete", 2);
+F([
   n({ type: Boolean, reflect: !0 })
-], b.prototype, "readonly", 2);
-b = q([
+], m.prototype, "readonly", 2);
+m = F([
   p("vox-input")
-], b);
-var Eo = Object.getOwnPropertyDescriptor, So = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Eo(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = i(e) || e);
+], m);
+var Et = Object.getOwnPropertyDescriptor, Ht = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Et(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = i(e) || e);
   return e;
 };
-let Be = class extends v {
-  handleSlotChange(t) {
-    const o = t.target.assignedElements();
-    o.forEach((a, r) => {
-      const e = r === 0 ? "start" : r === o.length - 1 ? "end" : "middle";
+let Ie = class extends h {
+  handleSlotChange(o) {
+    const t = o.target.assignedElements();
+    t.forEach((a, r) => {
+      const e = r === 0 ? "start" : r === t.length - 1 ? "end" : "middle";
       a.setAttribute("data-vox-group", e);
     });
   }
@@ -970,7 +992,7 @@ let Be = class extends v {
     `;
   }
 };
-Be.styles = d`
+Ie.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -1012,15 +1034,15 @@ Be.styles = d`
       border-left: none;
     }
   `;
-Be = So([
+Ie = Ht([
   p("vox-input-group")
-], Be);
-var Ao = Object.defineProperty, Bo = Object.getOwnPropertyDescriptor, je = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Bo(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && Ao(o, a, e), e;
+], Ie);
+var St = Object.defineProperty, At = Object.getOwnPropertyDescriptor, je = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? At(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && St(t, a, e), e;
 };
-let D = class extends v {
+let H = class extends h {
   constructor() {
     super(...arguments), this.value = "", this.checked = !1, this.disabled = !1;
   }
@@ -1029,8 +1051,8 @@ let D = class extends v {
       new CustomEvent("vox-radio-select", { bubbles: !0, composed: !0 })
     );
   }
-  handleKeydown(t) {
-    (t.key === " " || t.key === "Enter") && (t.preventDefault(), this.select());
+  handleKeydown(o) {
+    (o.key === " " || o.key === "Enter") && (o.preventDefault(), this.select());
   }
   render() {
     return c`
@@ -1049,7 +1071,7 @@ let D = class extends v {
     `;
   }
 };
-D.styles = d`
+H.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -1100,22 +1122,22 @@ D.styles = d`
   `;
 je([
   n()
-], D.prototype, "value", 2);
+], H.prototype, "value", 2);
 je([
   n({ type: Boolean, reflect: !0 })
-], D.prototype, "checked", 2);
+], H.prototype, "checked", 2);
 je([
   n({ type: Boolean, reflect: !0 })
-], D.prototype, "disabled", 2);
-D = je([
+], H.prototype, "disabled", 2);
+H = je([
   p("vox-radio")
-], D);
-var qo = Object.defineProperty, No = Object.getOwnPropertyDescriptor, ho = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? No(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && qo(o, a, e), e;
+], H);
+var It = Object.defineProperty, Bt = Object.getOwnPropertyDescriptor, ht = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Bt(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && It(t, a, e), e;
 };
-let be = class extends x {
+let me = class extends x {
   constructor() {
     super(...arguments), this.value = "";
   }
@@ -1126,43 +1148,50 @@ let be = class extends x {
     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 t = this.radios, o = t.some((a) => a.value === this.value && this.value !== "");
-    t.forEach((a, r) => {
+    const o = this.radios, t = o.some((r) => r.value === this.value && this.value !== ""), a = o.find((r) => !r.disabled);
+    o.forEach((r) => {
       var s, i;
-      a.checked = this.value !== "" && a.value === this.value;
-      const e = o ? a.checked : r === 0;
-      (i = (s = a.shadowRoot) == null ? void 0 : s.querySelector(".radio")) == null || i.setAttribute("tabindex", e ? "0" : "-1");
+      r.checked = this.value !== "" && r.value === this.value;
+      const e = t ? r.checked : r === a;
+      (i = (s = r.shadowRoot) == null ? void 0 : s.querySelector(".radio")) == null || i.setAttribute("tabindex", e ? "0" : "-1");
     });
   }
-  handleSelect(t) {
-    const o = t.target;
-    !(o instanceof HTMLElement) || o.tagName !== "VOX-RADIO" || (t.stopPropagation(), this.value !== o.value && (this.value = o.value, this.dispatchEvent(new Event("change", { bubbles: !0 }))));
+  handleSelect(o) {
+    const t = o.target;
+    !(t instanceof HTMLElement) || t.tagName !== "VOX-RADIO" || (o.stopPropagation(), this.value !== t.value && (this.value = t.value, this.dispatchEvent(new Event("change", { bubbles: !0 }))));
   }
-  handleKeydown(t) {
-    var no, lo;
+  handleKeydown(o) {
+    var nt, lt;
     const a = {
       ArrowDown: 1,
       ArrowRight: 1,
       ArrowUp: -1,
       ArrowLeft: -1
-    }[t.key];
+    }[o.key];
     if (!a) return;
-    t.preventDefault();
+    o.preventDefault();
     const r = this.radios.filter((Ae) => !Ae.disabled);
     if (r.length === 0) return;
     const e = r.findIndex((Ae) => Ae.checked), s = (Math.max(e, 0) + a + r.length) % r.length, i = r[s];
-    i.select(), (lo = (no = i.shadowRoot) == null ? void 0 : no.querySelector(".radio")) == null || lo.focus();
+    i.select(), (lt = (nt = i.shadowRoot) == null ? void 0 : nt.querySelector(".radio")) == null || lt.focus();
   }
   render() {
     return c`
-      <div class="field" role="radiogroup" aria-label=${this.label}>
+      <div
+        class="field"
+        role="radiogroup"
+        aria-label=${this.label || v}
+        aria-describedby=${u(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>` : ""}
@@ -1178,8 +1207,8 @@ let be = class extends x {
     `;
   }
 };
-be.styles = [
-  le,
+me.styles = [
+  ce,
   d`
       .options {
         display: flex;
@@ -1189,18 +1218,18 @@ be.styles = [
       }
     `
 ];
-ho([
+ht([
   n()
-], be.prototype, "value", 2);
-be = ho([
+], me.prototype, "value", 2);
+me = ht([
   p("vox-radio-group")
-], be);
-var Io = Object.defineProperty, To = Object.getOwnPropertyDescriptor, Ge = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? To(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && Io(o, a, e), e;
+], me);
+var qt = Object.defineProperty, Nt = Object.getOwnPropertyDescriptor, Ge = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Nt(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && qt(t, a, e), e;
 };
-let T = class extends x {
+let U = class extends x {
   constructor() {
     super(...arguments), this.value = "";
   }
@@ -1212,9 +1241,9 @@ let T = class extends x {
   }
   syncOptions() {
     if (!this.selectEl) return;
-    const t = this.renderRoot.querySelector("slot");
-    t && (this.selectEl.replaceChildren(
-      ...t.assignedElements().filter((o) => o instanceof HTMLOptionElement || o instanceof HTMLOptGroupElement).map((o) => o.cloneNode(!0))
+    const o = this.renderRoot.querySelector("slot");
+    o && (this.selectEl.replaceChildren(
+      ...o.assignedElements().filter((t) => t instanceof HTMLOptionElement || t instanceof HTMLOptGroupElement).map((t) => t.cloneNode(!0))
     ), this.value && (this.selectEl.value = this.value), this.value = this.selectEl.value);
   }
   handleChange() {
@@ -1229,6 +1258,8 @@ let T = class extends x {
           class="control"
           ?required=${this.required}
           ?disabled=${this.disabled}
+          aria-describedby=${u(this.noteId)}
+          aria-invalid=${this.invalid ? "true" : "false"}
           @change=${this.handleChange}
         ></select>
         ${this.renderNote()}
@@ -1237,8 +1268,8 @@ let T = class extends x {
     `;
   }
 };
-T.styles = [
-  le,
+U.styles = [
+  ce,
   d`
       select.control {
         appearance: none;
@@ -1252,19 +1283,19 @@ T.styles = [
 ];
 Ge([
   n()
-], T.prototype, "value", 2);
+], U.prototype, "value", 2);
 Ge([
   Ze("select")
-], T.prototype, "selectEl", 2);
-T = Ge([
+], U.prototype, "selectEl", 2);
+U = Ge([
   p("vox-select")
-], T);
-var Ro = Object.defineProperty, Fo = Object.getOwnPropertyDescriptor, Xe = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Fo(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && Ro(o, a, e), e;
+], U);
+var Tt = Object.defineProperty, Ft = Object.getOwnPropertyDescriptor, Xe = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Ft(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && Tt(t, a, e), e;
 };
-let R = class extends x {
+let K = class extends x {
   constructor() {
     super(...arguments), this.checked = !1, this.value = "on";
   }
@@ -1274,8 +1305,8 @@ let R = class extends x {
   updated() {
     this.internals.setFormValue(this.checked ? this.value : null);
   }
-  handleChange(t) {
-    this.checked = t.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`
@@ -1293,8 +1324,8 @@ let R = class extends x {
     `;
   }
 };
-R.styles = [
-  vo,
+K.styles = [
+  pt,
   d`
       .track {
         flex: none;
@@ -1335,19 +1366,19 @@ R.styles = [
 ];
 Xe([
   n({ type: Boolean, reflect: !0 })
-], R.prototype, "checked", 2);
+], K.prototype, "checked", 2);
 Xe([
   n()
-], R.prototype, "value", 2);
-R = Xe([
+], K.prototype, "value", 2);
+K = Xe([
   p("vox-switch")
-], R);
-var Zo = Object.defineProperty, Ko = Object.getOwnPropertyDescriptor, ce = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Ko(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && Zo(o, a, e), e;
+], K);
+var Rt = Object.defineProperty, Zt = Object.getOwnPropertyDescriptor, de = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Zt(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && Rt(t, a, e), e;
 };
-let y = class extends x {
+let w = class extends x {
   constructor() {
     super(...arguments), this.value = "", this.rows = 4, this.readonly = !1;
   }
@@ -1356,15 +1387,15 @@ let y = class extends x {
   }
   updated() {
     this.internals.setFormValue(this.value);
-    const t = this.renderRoot.querySelector("textarea");
-    t && this.syncValidity(t);
+    const o = this.renderRoot.querySelector("textarea");
+    o && this.syncValidity(o);
   }
-  focus(t) {
-    var o;
-    (o = this.renderRoot.querySelector("textarea")) == null || o.focus(t);
+  focus(o) {
+    var t;
+    (t = this.renderRoot.querySelector("textarea")) == null || t.focus(o);
   }
-  handleInput(t) {
-    this.value = t.target.value;
+  handleInput(o) {
+    this.value = o.target.value;
   }
   handleChange() {
     this.dispatchEvent(new Event("change", { bubbles: !0 }));
@@ -1377,11 +1408,13 @@ let y = class extends x {
           id="textarea"
           class="control"
           rows=${this.rows}
-          .value=${po(this.value)}
-          placeholder=${P(this.placeholder)}
+          .value=${dt(this.value)}
+          placeholder=${u(this.placeholder)}
           ?required=${this.required}
           ?readonly=${this.readonly}
           ?disabled=${this.disabled}
+          aria-describedby=${u(this.noteId)}
+          aria-invalid=${this.invalid ? "true" : "false"}
           @input=${this.handleInput}
           @change=${this.handleChange}
         ></textarea>
@@ -1390,8 +1423,8 @@ let y = class extends x {
     `;
   }
 };
-y.styles = [
-  le,
+w.styles = [
+  ce,
   d`
       textarea.control {
         resize: vertical;
@@ -1399,39 +1432,44 @@ y.styles = [
       }
     `
 ];
-ce([
+de([
   n()
-], y.prototype, "value", 2);
-ce([
+], w.prototype, "value", 2);
+de([
   n()
-], y.prototype, "placeholder", 2);
-ce([
+], w.prototype, "placeholder", 2);
+de([
   n({ type: Number })
-], y.prototype, "rows", 2);
-ce([
+], w.prototype, "rows", 2);
+de([
   n({ type: Boolean, reflect: !0 })
-], y.prototype, "readonly", 2);
-y = ce([
+], w.prototype, "readonly", 2);
+w = de([
   p("vox-textarea")
-], y);
-var Uo = Object.defineProperty, Go = Object.getOwnPropertyDescriptor, de = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Go(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && Uo(o, a, e), e;
+], w);
+var Ut = Object.defineProperty, Kt = Object.getOwnPropertyDescriptor, pe = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Kt(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && Ut(t, a, e), e;
 };
-let w = class extends v {
+let $ = class extends h {
   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" : v}
+        aria-label=${o ? this.alt : v}
+      >
         ${this.src ? c`<img src=${this.src} alt=${this.alt} />` : this.initials}
       </span>
     `;
   }
 };
-w.styles = d`
+$.styles = d`
     :host {
       display: inline-block;
     }
@@ -1479,33 +1517,33 @@ w.styles = d`
       font-size: 28px;
     }
   `;
-de([
+pe([
   n()
-], w.prototype, "src", 2);
-de([
+], $.prototype, "src", 2);
+pe([
   n()
-], w.prototype, "alt", 2);
-de([
+], $.prototype, "alt", 2);
+pe([
   n()
-], w.prototype, "initials", 2);
-de([
+], $.prototype, "initials", 2);
+pe([
   n({ reflect: !0 })
-], w.prototype, "size", 2);
-w = de([
+], $.prototype, "size", 2);
+$ = pe([
   p("vox-avatar")
-], w);
-var Xo = Object.defineProperty, Qo = Object.getOwnPropertyDescriptor, Qe = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Qo(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && Xo(o, a, e), e;
+], $);
+var Gt = Object.defineProperty, Xt = Object.getOwnPropertyDescriptor, Qe = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Xt(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && Gt(t, a, e), e;
 };
-let F = class extends v {
+let G = class extends h {
   constructor() {
     super(...arguments), this.heading = "", this.reverse = !1, this.hasActions = !1;
   }
-  handleActionsSlotChange(t) {
-    const o = t.target;
-    this.hasActions = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  handleActionsSlotChange(o) {
+    const t = o.target;
+    this.hasActions = t.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
     return c`
@@ -1522,7 +1560,7 @@ let F = class extends v {
     `;
   }
 };
-F.styles = d`
+G.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -1586,19 +1624,19 @@ F.styles = d`
   `;
 Qe([
   n()
-], F.prototype, "heading", 2);
+], G.prototype, "heading", 2);
 Qe([
   n({ type: Boolean, reflect: !0 })
-], F.prototype, "reverse", 2);
-F = Qe([
+], G.prototype, "reverse", 2);
+G = Qe([
   p("vox-billboard")
-], F);
-var Wo = Object.getOwnPropertyDescriptor, Yo = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Wo(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = i(e) || e);
+], G);
+var Qt = Object.getOwnPropertyDescriptor, Wt = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Qt(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = i(e) || e);
   return e;
 };
-let qe = class extends v {
+let Be = class extends h {
   render() {
     return c`
       <nav aria-label="Breadcrumbs">
@@ -1607,7 +1645,7 @@ let qe = class extends v {
     `;
   }
 };
-qe.styles = d`
+Be.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -1641,21 +1679,24 @@ qe.styles = d`
       color: var(--vox-color-text-3);
     }
   `;
-qe = Yo([
+Be = Wt([
   p("vox-breadcrumbs")
-], qe);
-var Jo = Object.defineProperty, et = Object.getOwnPropertyDescriptor, De = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? et(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && Jo(o, a, e), e;
+], Be);
+var Yt = Object.defineProperty, Jt = Object.getOwnPropertyDescriptor, De = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Jt(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && Yt(t, a, e), e;
 };
-let z = class extends v {
+let S = class extends h {
   constructor() {
-    super(...arguments), this.siteTitle = "", this.href = "/", this.mobileOpen = !1, this.handleOutsideClick = (t) => {
-      this.mobileOpen && !t.composedPath().includes(this) && (this.mobileOpen = !1);
-    }, this.handleKeydown = (t) => {
-      var o;
-      t.key === "Escape" && this.mobileOpen && (this.mobileOpen = !1, (o = this.renderRoot.querySelector(".menu-toggle")) == null || o.focus());
+    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 t = o.relatedTarget;
+      this.mobileOpen && !(t && this.contains(t)) && (this.mobileOpen = !1);
+    }, this.handleKeydown = (o) => {
+      var t;
+      o.key === "Escape" && this.mobileOpen && (this.mobileOpen = !1, (t = this.renderRoot.querySelector(".menu-toggle")) == null || t.focus());
     }, this.toggleMobileMenu = () => {
       this.mobileOpen = !this.mobileOpen;
     }, this.closeMobileMenu = () => {
@@ -1663,17 +1704,17 @@ let z = class extends v {
     };
   }
   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>` : h}
+          ${this.siteTitle ? c`<span>${this.siteTitle}</span>` : v}
         </a>
         <button
           type="button"
@@ -1693,7 +1734,7 @@ let z = class extends v {
             stroke-linejoin="round"
             aria-hidden="true"
           >
-            ${this.mobileOpen ? m.close : m.menu}
+            ${this.mobileOpen ? y.close : y.menu}
           </svg>
         </button>
         <div id="nav-wrap" class="nav-wrap${this.mobileOpen ? " open" : ""}">
@@ -1708,7 +1749,7 @@ let z = class extends v {
     `;
   }
 };
-z.styles = d`
+S.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -1840,22 +1881,22 @@ z.styles = d`
   `;
 De([
   n({ attribute: "site-title" })
-], z.prototype, "siteTitle", 2);
+], S.prototype, "siteTitle", 2);
 De([
   n()
-], z.prototype, "href", 2);
+], S.prototype, "href", 2);
 De([
-  Le()
-], z.prototype, "mobileOpen", 2);
-z = De([
+  le()
+], S.prototype, "mobileOpen", 2);
+S = De([
   p("vox-header")
-], z);
-var ot = Object.defineProperty, tt = Object.getOwnPropertyDescriptor, pe = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? tt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && ot(o, a, e), e;
+], S);
+var eo = Object.defineProperty, to = Object.getOwnPropertyDescriptor, he = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? to(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && eo(t, a, e), e;
 };
-let $ = class extends v {
+let _ = class extends h {
   constructor() {
     super(...arguments), this.previousLabel = "", this.nextLabel = "";
   }
@@ -1867,18 +1908,18 @@ let $ = class extends v {
                 <span class="direction">← Previous</span>
                 <span class="title">${this.previousLabel}</span>
               </a>
-            ` : h}
+            ` : v}
         ${this.nextHref ? c`
               <a class="next" href=${this.nextHref} rel="next">
                 <span class="direction">Next →</span>
                 <span class="title">${this.nextLabel}</span>
               </a>
-            ` : h}
+            ` : v}
       </nav>
     `;
   }
 };
-$.styles = d`
+_.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -1928,44 +1969,47 @@ $.styles = d`
       color: var(--vox-color-brand-1);
     }
   `;
-pe([
+he([
   n({ attribute: "previous-href" })
-], $.prototype, "previousHref", 2);
-pe([
+], _.prototype, "previousHref", 2);
+he([
   n({ attribute: "previous-label" })
-], $.prototype, "previousLabel", 2);
-pe([
+], _.prototype, "previousLabel", 2);
+he([
   n({ attribute: "next-href" })
-], $.prototype, "nextHref", 2);
-pe([
+], _.prototype, "nextHref", 2);
+he([
   n({ attribute: "next-label" })
-], $.prototype, "nextLabel", 2);
-$ = pe([
+], _.prototype, "nextLabel", 2);
+_ = he([
   p("vox-series-nav")
-], $);
-var rt = Object.defineProperty, at = Object.getOwnPropertyDescriptor, u = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? at(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && rt(o, a, e), e;
+], _);
+var oo = Object.defineProperty, ro = Object.getOwnPropertyDescriptor, f = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? ro(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && oo(t, a, e), e;
 };
-let H = class extends v {
+let A = class extends h {
   constructor() {
-    super(...arguments), this.label = "Section", this.toggleLabel = "Menu", this.mobileOpen = !1, this.handleOutsideClick = (t) => {
-      this.mobileOpen && !t.composedPath().includes(this) && (this.mobileOpen = !1);
-    }, this.handleKeydown = (t) => {
-      var o;
-      t.key === "Escape" && this.mobileOpen && (this.mobileOpen = !1, (o = this.renderRoot.querySelector(".toggle")) == null || o.focus());
+    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 t = o.relatedTarget;
+      this.mobileOpen && !(t && this.contains(t)) && (this.mobileOpen = !1);
+    }, this.handleKeydown = (o) => {
+      var t;
+      o.key === "Escape" && this.mobileOpen && (this.mobileOpen = !1, (t = this.renderRoot.querySelector(".toggle")) == null || t.focus());
     }, this.toggleMobile = () => {
       this.mobileOpen = !this.mobileOpen;
-    }, this.handleNavClick = (t) => {
-      t.composedPath().some((o) => o instanceof HTMLAnchorElement) && (this.mobileOpen = !1);
+    }, this.handleNavClick = (o) => {
+      o.composedPath().some((t) => t 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`
@@ -1987,7 +2031,7 @@ let H = class extends v {
           stroke-linejoin="round"
           aria-hidden="true"
         >
-          ${this.mobileOpen ? m.close : m.menu}
+          ${this.mobileOpen ? y.close : y.menu}
         </svg>
       </button>
       <nav
@@ -2001,7 +2045,7 @@ let H = class extends v {
     `;
   }
 };
-H.styles = d`
+A.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2061,21 +2105,21 @@ H.styles = d`
       }
     }
   `;
-u([
+f([
   n()
-], H.prototype, "label", 2);
-u([
+], A.prototype, "label", 2);
+f([
   n({ attribute: "toggle-label" })
-], H.prototype, "toggleLabel", 2);
-u([
-  Le()
-], H.prototype, "mobileOpen", 2);
-H = u([
+], A.prototype, "toggleLabel", 2);
+f([
+  le()
+], A.prototype, "mobileOpen", 2);
+A = f([
   p("vox-sidenav")
-], H);
-let Z = class extends v {
+], A);
+let C = class extends h {
   constructor() {
-    super(...arguments), this.heading = "", this.open = !1;
+    super(...arguments), this.heading = "", this.open = !1, this.itemsId = `vox-sidenav-group-items-${C.nextId++}`;
   }
   toggle() {
     this.open = !this.open;
@@ -2085,6 +2129,7 @@ let Z = class extends v {
       <button
         class="trigger"
         aria-expanded=${this.open ? "true" : "false"}
+        aria-controls=${this.itemsId}
         @click=${this.toggle}
       >
         ${this.heading}
@@ -2092,11 +2137,12 @@ let Z = class extends v {
           <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>
     `;
   }
 };
-Z.styles = d`
+C.nextId = 0;
+C.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2153,22 +2199,22 @@ Z.styles = d`
       display: flex;
     }
   `;
-u([
+f([
   n()
-], Z.prototype, "heading", 2);
-u([
+], C.prototype, "heading", 2);
+f([
   n({ type: Boolean, reflect: !0 })
-], Z.prototype, "open", 2);
-Z = u([
+], C.prototype, "open", 2);
+C = f([
   p("vox-sidenav-group")
-], Z);
-let K = class extends v {
+], C);
+let X = class extends h {
   constructor() {
     super(...arguments), this.href = "#", this.current = !1, this.hasIcon = !1;
   }
-  handleIconSlotChange(t) {
-    const o = t.target;
-    this.hasIcon = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  handleIconSlotChange(o) {
+    const t = o.target;
+    this.hasIcon = t.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
     return c`
@@ -2181,7 +2227,7 @@ let K = class extends v {
     `;
   }
 };
-K.styles = d`
+X.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2225,21 +2271,21 @@ K.styles = d`
       display: none;
     }
   `;
-u([
+f([
   n()
-], K.prototype, "href", 2);
-u([
+], X.prototype, "href", 2);
+f([
   n({ type: Boolean, reflect: !0 })
-], K.prototype, "current", 2);
-K = u([
+], X.prototype, "current", 2);
+X = f([
   p("vox-sidenav-item")
-], K);
-var st = Object.defineProperty, it = Object.getOwnPropertyDescriptor, xo = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? it(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && st(o, a, e), e;
+], X);
+var ao = Object.defineProperty, so = Object.getOwnPropertyDescriptor, vt = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? so(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && ao(t, a, e), e;
 };
-let me = class extends v {
+let ye = class extends h {
   constructor() {
     super(...arguments), this.label = "Secondary";
   }
@@ -2251,7 +2297,7 @@ let me = class extends v {
     `;
   }
 };
-me.styles = d`
+ye.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2286,18 +2332,18 @@ me.styles = d`
       border-bottom-color: var(--vox-color-brand-1);
     }
   `;
-xo([
+vt([
   n()
-], me.prototype, "label", 2);
-me = xo([
+], ye.prototype, "label", 2);
+ye = vt([
   p("vox-subnav")
-], me);
-var nt = Object.defineProperty, lt = Object.getOwnPropertyDescriptor, k = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? lt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && nt(o, a, e), e;
+], ye);
+var io = Object.defineProperty, no = Object.getOwnPropertyDescriptor, j = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? no(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && io(t, a, e), e;
 };
-let Ne = class extends v {
+let qe = class extends h {
   get tabs() {
     return [...this.querySelectorAll("vox-tab")];
   }
@@ -2305,28 +2351,35 @@ let Ne = class extends v {
     return [...this.querySelectorAll("vox-tab-panel")];
   }
   sync() {
-    const t = this.tabs;
-    t.length > 0 && !t.some((a) => a.selected) && (t[0].selected = !0);
-    const o = t.find((a) => a.selected);
+    const o = this.tabs;
+    o.length > 0 && !o.some((a) => a.selected) && (o[0].selected = !0);
+    const t = o.find((a) => a.selected);
     this.panels.forEach((a) => {
-      a.active = a.name === (o == null ? void 0 : o.panel);
+      a.active = a.name === (t == null ? void 0 : t.panel);
     });
   }
-  handleSelect(t) {
-    const o = t.target;
-    o.tagName === "VOX-TAB" && (this.tabs.forEach((a) => a.selected = a === o), this.sync(), this.dispatchEvent(
+  handleSelect(o) {
+    const t = o.target;
+    t.tagName === "VOX-TAB" && (this.tabs.forEach((a) => a.selected = a === t), this.sync(), this.dispatchEvent(
       new CustomEvent("vox-tab-change", {
-        detail: { panel: o.panel },
+        detail: { panel: t.panel },
         bubbles: !0,
         composed: !0
       })
     ));
   }
-  handleKeydown(t) {
-    const a = { ArrowRight: 1, ArrowLeft: -1 }[t.key];
-    if (!a) return;
-    t.preventDefault();
-    const r = this.tabs, e = r.findIndex((i) => i.selected), s = r[(e + a + r.length) % r.length];
+  handleKeydown(o) {
+    const t = this.tabs;
+    if (o.key === "Home" || o.key === "End") {
+      o.preventDefault();
+      const i = t[o.key === "Home" ? 0 : t.length - 1];
+      i.select(), i.focusTab();
+      return;
+    }
+    const r = { ArrowRight: 1, ArrowLeft: -1 }[o.key];
+    if (!r) return;
+    o.preventDefault();
+    const e = t.findIndex((i) => i.selected), s = t[(e + r + t.length) % t.length];
     s.select(), s.focusTab();
   }
   render() {
@@ -2343,7 +2396,7 @@ let Ne = class extends v {
     `;
   }
 };
-Ne.styles = d`
+qe.styles = d`
     :host {
       display: block;
     }
@@ -2354,10 +2407,10 @@ Ne.styles = d`
       border-bottom: 1px solid var(--vox-color-divider);
     }
   `;
-Ne = k([
+qe = j([
   p("vox-tabs")
-], Ne);
-let U = class extends v {
+], qe);
+let Q = class extends h {
   constructor() {
     super(...arguments), this.panel = "", this.selected = !1;
   }
@@ -2367,15 +2420,17 @@ let U = class extends v {
     );
   }
   focusTab() {
-    var t;
-    (t = this.renderRoot.querySelector(".tab")) == null || t.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}
       >
@@ -2384,7 +2439,7 @@ let U = class extends v {
     `;
   }
 };
-U.styles = d`
+Q.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2419,24 +2474,33 @@ U.styles = d`
       border-bottom-color: var(--vox-color-brand-1);
     }
   `;
-k([
+j([
   n()
-], U.prototype, "panel", 2);
-k([
+], Q.prototype, "panel", 2);
+j([
   n({ type: Boolean, reflect: !0 })
-], U.prototype, "selected", 2);
-U = k([
+], Q.prototype, "selected", 2);
+Q = j([
   p("vox-tab")
-], U);
-let G = class extends v {
+], Q);
+let W = class extends h {
   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>
+    `;
   }
 };
-G.styles = d`
+W.styles = d`
     :host {
       display: none;
       font-family: var(--vox-font-family-base);
@@ -2449,22 +2513,28 @@ G.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);
+    }
   `;
-k([
+j([
   n()
-], G.prototype, "name", 2);
-k([
+], W.prototype, "name", 2);
+j([
   n({ type: Boolean, reflect: !0 })
-], G.prototype, "active", 2);
-G = k([
+], W.prototype, "active", 2);
+W = j([
   p("vox-tab-panel")
-], G);
-var ct = Object.defineProperty, dt = Object.getOwnPropertyDescriptor, ve = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? dt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && ct(o, a, e), e;
+], W);
+var lo = Object.defineProperty, co = Object.getOwnPropertyDescriptor, ve = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? co(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && lo(t, a, e), e;
 };
-let ye = class extends v {
+let we = class extends h {
   constructor() {
     super(...arguments), this.heading = "On this page";
   }
@@ -2477,7 +2547,7 @@ let ye = class extends v {
     `;
   }
 };
-ye.styles = d`
+we.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2500,17 +2570,17 @@ ye.styles = d`
   `;
 ve([
   n()
-], ye.prototype, "heading", 2);
-ye = ve([
+], we.prototype, "heading", 2);
+we = ve([
   p("vox-toc")
-], ye);
-let X = class extends v {
+], we);
+let Y = class extends h {
   constructor() {
     super(...arguments), this.href = "#", this.current = !1, this.hasChildren = !1;
   }
-  handleChildrenSlotChange(t) {
-    const o = t.target;
-    this.hasChildren = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  handleChildrenSlotChange(o) {
+    const t = o.target;
+    this.hasChildren = t.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
     return c`
@@ -2523,7 +2593,7 @@ let X = class extends v {
     `;
   }
 };
-X.styles = d`
+Y.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2571,19 +2641,19 @@ X.styles = d`
   `;
 ve([
   n()
-], X.prototype, "href", 2);
+], Y.prototype, "href", 2);
 ve([
   n({ type: Boolean, reflect: !0 })
-], X.prototype, "current", 2);
-X = ve([
+], Y.prototype, "current", 2);
+Y = ve([
   p("vox-toc-item")
-], X);
-var pt = Object.defineProperty, vt = Object.getOwnPropertyDescriptor, he = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? vt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && pt(o, a, e), e;
+], Y);
+var po = Object.defineProperty, ho = Object.getOwnPropertyDescriptor, xe = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? ho(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && po(t, a, e), e;
 };
-let _ = class extends v {
+let O = class extends h {
   constructor() {
     super(...arguments), this.heading = "", this.open = !1, this.lightDismiss = !1, this.hasFooter = !1;
   }
@@ -2601,22 +2671,22 @@ let _ = class extends v {
       new CustomEvent("vox-close", { bubbles: !0, composed: !0 })
     );
   }
-  handleClick(t) {
-    this.lightDismiss && t.target === this.dialogEl && this.close();
+  handleClick(o) {
+    this.lightDismiss && o.target === this.dialogEl && this.close();
   }
-  handleFooterSlotChange(t) {
-    const o = t.target;
-    this.hasFooter = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  handleFooterSlotChange(o) {
+    const t = o.target;
+    this.hasFooter = t.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
     return c`
       <dialog
-        aria-label=${this.heading || h}
+        aria-labelledby=${this.heading ? "heading" : v}
         @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" />
@@ -2631,7 +2701,7 @@ let _ = class extends v {
     `;
   }
 };
-_.styles = d`
+O.styles = d`
     dialog {
       box-sizing: border-box;
       width: min(90vw, 480px);
@@ -2718,29 +2788,29 @@ _.styles = d`
       margin-bottom: 0;
     }
   `;
-he([
+xe([
   n()
-], _.prototype, "heading", 2);
-he([
+], O.prototype, "heading", 2);
+xe([
   n({ type: Boolean })
-], _.prototype, "open", 2);
-he([
+], O.prototype, "open", 2);
+xe([
   n({ type: Boolean, attribute: "light-dismiss" })
-], _.prototype, "lightDismiss", 2);
-he([
+], O.prototype, "lightDismiss", 2);
+xe([
   Ze("dialog")
-], _.prototype, "dialogEl", 2);
-_ = he([
+], O.prototype, "dialogEl", 2);
+O = xe([
   p("vox-dialog")
-], _);
-var ht = Object.defineProperty, xt = Object.getOwnPropertyDescriptor, We = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? xt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && ht(o, a, e), e;
+], O);
+var vo = Object.defineProperty, xo = Object.getOwnPropertyDescriptor, We = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? xo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && vo(t, a, e), e;
 };
-let Q = class extends v {
+let M = class extends h {
   constructor() {
-    super(...arguments), this.summary = "Show details", this.open = !1;
+    super(...arguments), this.summary = "Show details", this.open = !1, this.panelId = `vox-disclosure-panel-${M.nextId++}`;
   }
   toggle() {
     this.open = !this.open, this.dispatchEvent(
@@ -2752,6 +2822,7 @@ let Q = class extends v {
       <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">
@@ -2759,13 +2830,14 @@ let Q = class extends v {
         </svg>
         ${this.summary}
       </button>
-      <div class="panel" ?hidden=${!this.open}>
+      <div id=${this.panelId} class="panel" ?hidden=${!this.open}>
         <slot></slot>
       </div>
     `;
   }
 };
-Q.styles = d`
+M.nextId = 0;
+M.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -2819,45 +2891,57 @@ Q.styles = d`
   `;
 We([
   n()
-], Q.prototype, "summary", 2);
+], M.prototype, "summary", 2);
 We([
   n({ type: Boolean, reflect: !0 })
-], Q.prototype, "open", 2);
-Q = We([
+], M.prototype, "open", 2);
+M = We([
   p("vox-disclosure")
-], Q);
-var ut = Object.defineProperty, ft = Object.getOwnPropertyDescriptor, Ye = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? ft(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && ut(o, a, e), e;
+], M);
+var uo = Object.defineProperty, fo = Object.getOwnPropertyDescriptor, Ye = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? fo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && uo(t, a, e), e;
 };
-let W = class extends v {
+let J = class extends h {
   constructor() {
-    super(...arguments), this.label = "Menu", this.open = !1, this.handleOutsideClick = (t) => {
-      this.open && !t.composedPath().includes(this) && (this.open = !1);
-    }, this.handleKeydown = (t) => {
-      var o;
-      if (t.key === "Escape" && this.open) {
-        this.open = !1, (o = this.renderRoot.querySelector(".trigger")) == null || o.focus();
+    super(...arguments), this.label = "Menu", this.open = !1, this.handleOutsideClick = (o) => {
+      this.open && !o.composedPath().includes(this) && (this.open = !1);
+    }, this.handleFocusOut = (o) => {
+      const t = o.relatedTarget;
+      this.open && !(t && this.contains(t)) && (this.open = !1);
+    }, this.handleKeydown = (o) => {
+      var t;
+      if (o.key === "Escape" && this.open) {
+        this.open = !1, (t = this.renderRoot.querySelector(".trigger")) == null || t.focus();
         return;
       }
-      if ((t.key === "ArrowDown" || t.key === "ArrowUp") && this.open) {
-        t.preventDefault();
-        const a = [...this.querySelectorAll("a, button")];
-        if (a.length === 0) return;
-        const r = document.activeElement, e = a.indexOf(r), s = t.key === "ArrowDown" ? 1 : -1;
-        a[(Math.max(e, 0) + s + a.length) % a.length].focus();
+      if (o.key === "ArrowDown" || o.key === "ArrowUp") {
+        o.preventDefault();
+        const a = o.key === "ArrowDown" ? 1 : -1;
+        if (!this.open) {
+          this.open = !0, this.updateComplete.then(
+            () => this.focusItem(o.key === "ArrowDown" ? 0 : -1)
+          );
+          return;
+        }
+        const e = [...this.querySelectorAll("a, button")].indexOf(document.activeElement);
+        this.focusItem(Math.max(e, 0) + a);
       }
     };
   }
   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 t = [...this.querySelectorAll("a, button")];
+    t.length !== 0 && t[(o + t.length) % t.length].focus();
   }
   toggle() {
-    this.open = !this.open;
+    this.open = !this.open, this.open && this.updateComplete.then(() => this.focusItem(0));
   }
   render() {
     return c`
@@ -2865,6 +2949,7 @@ let W = class extends v {
         class="trigger"
         aria-expanded=${this.open ? "true" : "false"}
         aria-haspopup="true"
+        aria-controls="menu"
         @click=${this.toggle}
       >
         ${this.label}
@@ -2872,13 +2957,13 @@ let W = class extends v {
           <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>
     `;
   }
 };
-W.styles = d`
+J.styles = d`
     :host {
       position: relative;
       display: inline-block;
@@ -2979,28 +3064,28 @@ W.styles = d`
   `;
 Ye([
   n()
-], W.prototype, "label", 2);
+], J.prototype, "label", 2);
 Ye([
   n({ type: Boolean, reflect: !0 })
-], W.prototype, "open", 2);
-W = Ye([
+], J.prototype, "open", 2);
+J = Ye([
   p("vox-dropdown")
-], W);
-var gt = Object.defineProperty, bt = Object.getOwnPropertyDescriptor, xe = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? bt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && gt(o, a, e), e;
+], J);
+var go = Object.defineProperty, bo = Object.getOwnPropertyDescriptor, ue = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? bo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && go(t, a, e), e;
 };
-let we = class extends v {
+let $e = class extends h {
   constructor() {
     super(...arguments), this.single = !1;
   }
-  handleToggle(t) {
+  handleToggle(o) {
     if (!this.single) return;
-    const o = t.target;
-    o.open && this.querySelectorAll("vox-accordion-item").forEach(
+    const t = o.target;
+    t.open && this.querySelectorAll("vox-accordion-item").forEach(
       (a) => {
-        a !== o && (a.open = !1);
+        a !== t && (a.open = !1);
       }
     );
   }
@@ -3008,7 +3093,7 @@ let we = class extends v {
     return c`<slot @vox-toggle=${this.handleToggle}></slot>`;
   }
 };
-we.styles = d`
+$e.styles = d`
     :host {
       display: block;
       border: 1px solid var(--vox-color-divider);
@@ -3020,15 +3105,15 @@ we.styles = d`
       border-top: 1px solid var(--vox-color-divider);
     }
   `;
-xe([
+ue([
   n({ type: Boolean })
-], we.prototype, "single", 2);
-we = xe([
+], $e.prototype, "single", 2);
+$e = ue([
   p("vox-accordion")
-], we);
-let Y = class extends v {
+], $e);
+let k = class extends h {
   constructor() {
-    super(...arguments), this.heading = "", this.open = !1;
+    super(...arguments), this.heading = "", this.open = !1, this.panelId = `vox-accordion-panel-${k.nextId++}`;
   }
   toggle() {
     this.open = !this.open, this.dispatchEvent(
@@ -3041,6 +3126,7 @@ let Y = class extends v {
         <button
           class="trigger"
           aria-expanded=${this.open ? "true" : "false"}
+          aria-controls=${this.panelId}
           @click=${this.toggle}
         >
           ${this.heading}
@@ -3049,13 +3135,14 @@ let Y = class extends v {
           </svg>
         </button>
       </h3>
-      <div class="panel" ?hidden=${!this.open}>
+      <div id=${this.panelId} class="panel" ?hidden=${!this.open}>
         <slot></slot>
       </div>
     `;
   }
 };
-Y.styles = d`
+k.nextId = 0;
+k.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -3117,27 +3204,27 @@ Y.styles = d`
       margin-bottom: 0;
     }
   `;
-xe([
+ue([
   n()
-], Y.prototype, "heading", 2);
-xe([
+], k.prototype, "heading", 2);
+ue([
   n({ type: Boolean, reflect: !0 })
-], Y.prototype, "open", 2);
-Y = xe([
+], k.prototype, "open", 2);
+k = ue([
   p("vox-accordion-item")
-], Y);
-var mt = Object.defineProperty, yt = Object.getOwnPropertyDescriptor, ue = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? yt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && mt(o, a, e), e;
+], k);
+var mo = Object.defineProperty, yo = Object.getOwnPropertyDescriptor, fe = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? yo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && mo(t, a, e), e;
 };
-const wt = {
+const wo = {
   info: "info",
   success: "check-circle",
   warning: "warning",
   danger: "x-circle"
 };
-let C = class extends v {
+let L = class extends h {
   constructor() {
     super(...arguments), this.variant = "info", this.heading = "", this.dismissible = !1, this.open = !0;
   }
@@ -3147,8 +3234,12 @@ let C = class extends v {
     );
   }
   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"
@@ -3159,10 +3250,10 @@ let C = class extends v {
           stroke-linejoin="round"
           aria-hidden="true"
         >
-          ${m[wt[this.variant]]}
+          ${y[wo[this.variant]]}
         </svg>
         <div class="body">
-          ${this.heading ? c`<p class="heading">${this.heading}</p>` : h}
+          ${this.heading ? c`<p class="heading">${this.heading}</p>` : v}
           <slot></slot>
         </div>
         ${this.dismissible ? c`
@@ -3171,12 +3262,12 @@ let C = class extends v {
                   <path d="M18 6 6 18M6 6l12 12" />
                 </svg>
               </button>
-            ` : h}
+            ` : v}
       </div>
     `;
   }
 };
-C.styles = d`
+L.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -3295,27 +3386,27 @@ C.styles = d`
       margin-bottom: 0;
     }
   `;
-ue([
+fe([
   n()
-], C.prototype, "variant", 2);
-ue([
+], L.prototype, "variant", 2);
+fe([
   n()
-], C.prototype, "heading", 2);
-ue([
+], L.prototype, "heading", 2);
+fe([
   n({ type: Boolean })
-], C.prototype, "dismissible", 2);
-ue([
+], L.prototype, "dismissible", 2);
+fe([
   n({ type: Boolean, reflect: !0 })
-], C.prototype, "open", 2);
-C = ue([
+], L.prototype, "open", 2);
+L = fe([
   p("vox-alert")
-], C);
-var $t = Object.defineProperty, _t = Object.getOwnPropertyDescriptor, uo = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? _t(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && $t(o, a, e), e;
+], L);
+var $o = Object.defineProperty, _o = Object.getOwnPropertyDescriptor, xt = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? _o(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && $o(t, a, e), e;
 };
-let $e = class extends v {
+let _e = class extends h {
   constructor() {
     super(...arguments), this.variant = "brand";
   }
@@ -3323,7 +3414,7 @@ let $e = class extends v {
     return c`<span class="badge ${this.variant}"><slot></slot></span>`;
   }
 };
-$e.styles = d`
+_e.styles = d`
     :host {
       display: inline-block;
     }
@@ -3365,23 +3456,23 @@ $e.styles = d`
       color: var(--vox-color-text-2);
     }
   `;
-uo([
+xt([
   n()
-], $e.prototype, "variant", 2);
-$e = uo([
+], _e.prototype, "variant", 2);
+_e = xt([
   p("vox-badge")
-], $e);
-var Ct = Object.defineProperty, Mt = Object.getOwnPropertyDescriptor, Je = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Mt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && Ct(o, a, e), e;
+], _e);
+var Co = Object.defineProperty, Oo = Object.getOwnPropertyDescriptor, Je = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Oo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && Co(t, a, e), e;
 };
-let J = class extends v {
+let ee = class extends h {
   constructor() {
     super(...arguments), this.date = "";
   }
   render() {
-    const t = /* @__PURE__ */ new Date(`${this.date}T00:00:00`), o = !Number.isNaN(t.getTime()), a = o ? t.toLocaleString(this.locale, { month: "short" }) : "—", r = o ? t.getDate() : "–";
+    const o = /* @__PURE__ */ new Date(`${this.date}T00:00:00`), t = !Number.isNaN(o.getTime()), a = t ? o.toLocaleString(this.locale, { month: "short" }) : "—", r = t ? o.getDate() : "–";
     return c`
       <time class="tile" datetime=${this.date}>
         <span class="month">${a}</span>
@@ -3390,7 +3481,7 @@ let J = class extends v {
     `;
   }
 };
-J.styles = d`
+ee.styles = d`
     :host {
       display: inline-block;
       font-family: var(--vox-font-family-base);
@@ -3428,30 +3519,30 @@ J.styles = d`
   `;
 Je([
   n()
-], J.prototype, "date", 2);
+], ee.prototype, "date", 2);
 Je([
   n()
-], J.prototype, "locale", 2);
-J = Je([
+], ee.prototype, "locale", 2);
+ee = Je([
   p("vox-calendar-tile")
-], J);
-var Ot = Object.defineProperty, kt = Object.getOwnPropertyDescriptor, eo = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? kt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && Ot(o, a, e), e;
+], ee);
+var Mo = Object.defineProperty, ko = Object.getOwnPropertyDescriptor, et = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? ko(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && Mo(t, a, e), e;
 };
-const Lt = {
+const Lo = {
   info: "Info",
   tip: "Tip",
   warning: "Warning",
   danger: "Danger"
-}, Pt = {
+}, Po = {
   info: "info",
   tip: "check-circle",
   warning: "warning",
   danger: "x-circle"
 };
-let ee = class extends v {
+let te = class extends h {
   constructor() {
     super(...arguments), this.variant = "info";
   }
@@ -3468,17 +3559,17 @@ let ee = class extends v {
           stroke-linejoin="round"
           aria-hidden="true"
         >
-          ${m[Pt[this.variant]]}
+          ${y[Po[this.variant]]}
         </svg>
         <div class="content">
-          <p class="heading">${this.heading ?? Lt[this.variant]}</p>
+          <p class="heading">${this.heading ?? Lo[this.variant]}</p>
           <slot></slot>
         </div>
       </div>
     `;
   }
 };
-ee.styles = d`
+te.styles = d`
     :host {
       display: block;
     }
@@ -3561,42 +3652,42 @@ ee.styles = d`
       margin-bottom: 0;
     }
   `;
-eo([
+et([
   n()
-], ee.prototype, "variant", 2);
-eo([
+], te.prototype, "variant", 2);
+et([
   n()
-], ee.prototype, "heading", 2);
-ee = eo([
+], te.prototype, "heading", 2);
+te = et([
   p("vox-callout")
-], ee);
-var Vt = Object.defineProperty, jt = Object.getOwnPropertyDescriptor, ze = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? jt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && Vt(o, a, e), e;
+], te);
+var Vo = Object.defineProperty, jo = Object.getOwnPropertyDescriptor, ze = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? jo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && Vo(t, a, e), e;
 };
-let E = class extends v {
+let I = class extends h {
   constructor() {
     super(...arguments), this.heading = "", this.hasIcon = !1, this.hasBadge = !1, this.hasFooter = !1;
   }
-  handleIconSlotChange(t) {
-    const o = t.target;
-    this.hasIcon = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  handleIconSlotChange(o) {
+    const t = o.target;
+    this.hasIcon = t.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
-  handleBadgeSlotChange(t) {
-    const o = t.target;
-    this.hasBadge = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  handleBadgeSlotChange(o) {
+    const t = o.target;
+    this.hasBadge = t.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
-  handleFooterSlotChange(t) {
-    const o = t.target;
-    this.hasFooter = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  handleFooterSlotChange(o) {
+    const t = o.target;
+    this.hasFooter = t.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
-    const t = 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>
@@ -3605,10 +3696,10 @@ let E = class extends v {
         <slot name="footer" @slotchange=${this.handleFooterSlotChange}></slot>
       </div>
     `;
-    return this.href !== void 0 ? c`<a class="card" href=${this.href} target=${this.target ?? h}>${t}</a>` : c`<div class="card">${t}</div>`;
+    return this.href !== void 0 ? c`<a class="card" href=${this.href} target=${this.target ?? v}>${o}</a>` : c`<div class="card">${o}</div>`;
   }
 };
-E.styles = d`
+I.styles = d`
     :host {
       display: block;
     }
@@ -3695,37 +3786,37 @@ E.styles = d`
   `;
 ze([
   n()
-], E.prototype, "heading", 2);
+], I.prototype, "heading", 2);
 ze([
   n()
-], E.prototype, "href", 2);
+], I.prototype, "href", 2);
 ze([
   n()
-], E.prototype, "target", 2);
-E = ze([
+], I.prototype, "target", 2);
+I = ze([
   p("vox-card")
-], E);
-var Dt = Object.defineProperty, zt = Object.getOwnPropertyDescriptor, fo = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? zt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && Dt(o, a, e), e;
+], I);
+var Do = Object.defineProperty, zo = Object.getOwnPropertyDescriptor, ut = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? zo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && Do(t, a, e), e;
 };
-let _e = class extends v {
+let Ce = class extends h {
   constructor() {
     super(...arguments), this.heading = "", this.hasBody = !1, this.hasActions = !1;
   }
-  handleBodySlotChange(t) {
-    const o = t.target;
-    this.hasBody = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  handleBodySlotChange(o) {
+    const t = o.target;
+    this.hasBody = t.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
-  handleActionsSlotChange(t) {
-    const o = t.target;
-    this.hasActions = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  handleActionsSlotChange(o) {
+    const t = o.target;
+    this.hasActions = t.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
     return c`
       <div class="band">
-        ${this.heading ? c`<h2 class="heading">${this.heading}</h2>` : h}
+        ${this.heading ? c`<h2 class="heading">${this.heading}</h2>` : v}
         <div class="body ${this.hasBody ? "has-content" : ""}">
           <slot @slotchange=${this.handleBodySlotChange}></slot>
         </div>
@@ -3736,7 +3827,7 @@ let _e = class extends v {
     `;
   }
 };
-_e.styles = d`
+Ce.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -3791,25 +3882,25 @@ _e.styles = d`
       display: none;
     }
   `;
-fo([
+ut([
   n()
-], _e.prototype, "heading", 2);
-_e = fo([
+], Ce.prototype, "heading", 2);
+Ce = ut([
   p("vox-cta-band")
-], _e);
-var Ht = Object.defineProperty, Et = Object.getOwnPropertyDescriptor, go = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Et(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && Ht(o, a, e), e;
+], Ce);
+var Eo = Object.defineProperty, Ho = Object.getOwnPropertyDescriptor, ft = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Ho(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && Eo(t, a, e), e;
 };
-let Ce = class extends v {
+let Oe = class extends h {
   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>
@@ -3817,7 +3908,7 @@ let Ce = class extends v {
     `;
   }
 };
-Ce.styles = d`
+Oe.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -3861,18 +3952,18 @@ Ce.styles = d`
       margin-top: var(--vox-space-4);
     }
   `;
-go([
+ft([
   n()
-], Ce.prototype, "heading", 2);
-Ce = go([
+], Oe.prototype, "heading", 2);
+Oe = ft([
   p("vox-empty-state")
-], Ce);
-var St = Object.defineProperty, At = Object.getOwnPropertyDescriptor, oo = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? At(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && St(o, a, e), e;
+], Oe);
+var So = Object.defineProperty, Ao = Object.getOwnPropertyDescriptor, tt = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Ao(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && So(t, a, e), e;
 };
-let Ie = class extends v {
+let Ne = class extends h {
   render() {
     return c`
       <footer>
@@ -3884,7 +3975,7 @@ let Ie = class extends v {
     `;
   }
 };
-Ie.styles = d`
+Ne.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -3912,10 +4003,10 @@ Ie.styles = d`
       color: var(--vox-color-text-3);
     }
   `;
-Ie = oo([
+Ne = tt([
   p("vox-footer")
-], Ie);
-let Me = class extends v {
+], Ne);
+let Me = class extends h {
   constructor() {
     super(...arguments), this.heading = "";
   }
@@ -3958,18 +4049,18 @@ Me.styles = d`
       text-decoration: underline;
     }
   `;
-oo([
+tt([
   n()
 ], Me.prototype, "heading", 2);
-Me = oo([
+Me = tt([
   p("vox-footer-column")
 ], Me);
-var Bt = Object.defineProperty, qt = Object.getOwnPropertyDescriptor, He = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? qt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && Bt(o, a, e), e;
+var Io = Object.defineProperty, Bo = Object.getOwnPropertyDescriptor, Ee = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Bo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && Io(t, a, e), e;
 };
-let S = class extends v {
+let B = class extends h {
   constructor() {
     super(...arguments), this.cols = 0, this.min = "240px", this.gap = "md";
   }
@@ -3980,7 +4071,7 @@ let S = class extends v {
     return c`<slot></slot>`;
   }
 };
-S.styles = d`
+B.styles = d`
     :host {
       display: grid;
     }
@@ -3997,35 +4088,35 @@ S.styles = d`
       gap: var(--vox-space-6);
     }
   `;
-He([
+Ee([
   n({ type: Number })
-], S.prototype, "cols", 2);
-He([
+], B.prototype, "cols", 2);
+Ee([
   n()
-], S.prototype, "min", 2);
-He([
+], B.prototype, "min", 2);
+Ee([
   n({ reflect: !0 })
-], S.prototype, "gap", 2);
-S = He([
+], B.prototype, "gap", 2);
+B = Ee([
   p("vox-grid")
-], S);
-var Nt = Object.defineProperty, It = Object.getOwnPropertyDescriptor, to = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? It(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && Nt(o, a, e), e;
+], B);
+var qo = Object.defineProperty, No = Object.getOwnPropertyDescriptor, ot = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? No(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && qo(t, a, e), e;
 };
-let oe = class extends v {
+let oe = class extends h {
   constructor() {
     super(...arguments), this.eyebrow = "", this.heading = "", this.hasActions = !1;
   }
-  handleActionsSlotChange(t) {
-    const o = t.target;
-    this.hasActions = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  handleActionsSlotChange(o) {
+    const t = o.target;
+    this.hasActions = t.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
     return c`
       <header class="hero">
-        ${this.eyebrow ? c`<p class="eyebrow">${this.eyebrow}</p>` : h}
+        ${this.eyebrow ? c`<p class="eyebrow">${this.eyebrow}</p>` : v}
         <h1 class="heading">${this.heading}</h1>
         <div class="body"><slot></slot></div>
         <div class="actions ${this.hasActions ? "has-content" : ""}">
@@ -4092,21 +4183,21 @@ oe.styles = d`
       display: none;
     }
   `;
-to([
+ot([
   n()
 ], oe.prototype, "eyebrow", 2);
-to([
+ot([
   n()
 ], oe.prototype, "heading", 2);
-oe = to([
+oe = ot([
   p("vox-hero")
 ], oe);
-var Tt = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, Ee = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Rt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && Tt(o, a, e), e;
+var To = Object.defineProperty, Fo = Object.getOwnPropertyDescriptor, He = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Fo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && To(t, a, e), e;
 };
-let Te = class extends v {
+let Te = class extends h {
   render() {
     return c`<slot></slot>`;
   }
@@ -4118,22 +4209,22 @@ Te.styles = d`
       gap: var(--vox-space-4);
     }
   `;
-Te = Ee([
+Te = He([
   p("vox-link-hub")
 ], Te);
-let te = class extends v {
+let re = class extends h {
   constructor() {
     super(...arguments), this.href = "#", this.heading = "", this.hasIcon = !1;
   }
-  handleIconSlotChange(t) {
-    const o = t.target;
-    this.hasIcon = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  handleIconSlotChange(o) {
+    const t = o.target;
+    this.hasIcon = t.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}
@@ -4147,7 +4238,7 @@ let te = class extends v {
     `;
   }
 };
-te.styles = d`
+re.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -4208,21 +4299,21 @@ te.styles = d`
       color: var(--vox-color-text-2);
     }
   `;
-Ee([
+He([
   n()
-], te.prototype, "href", 2);
-Ee([
+], re.prototype, "href", 2);
+He([
   n()
-], te.prototype, "heading", 2);
-te = Ee([
+], re.prototype, "heading", 2);
+re = He([
   p("vox-link-hub-item")
-], te);
-var Ft = Object.defineProperty, Zt = Object.getOwnPropertyDescriptor, ro = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Zt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && Ft(o, a, e), e;
+], re);
+var Ro = Object.defineProperty, Zo = Object.getOwnPropertyDescriptor, rt = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Zo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && Ro(t, a, e), e;
 };
-let re = class extends v {
+let ae = class extends h {
   constructor() {
     super(...arguments), this.size = "md", this.label = "Loading";
   }
@@ -4235,7 +4326,7 @@ let re = class extends v {
     `;
   }
 };
-re.styles = d`
+ae.styles = d`
     :host {
       display: inline-block;
     }
@@ -4288,21 +4379,21 @@ re.styles = d`
       white-space: nowrap;
     }
   `;
-ro([
+rt([
   n({ reflect: !0 })
-], re.prototype, "size", 2);
-ro([
+], ae.prototype, "size", 2);
+rt([
   n()
-], re.prototype, "label", 2);
-re = ro([
+], ae.prototype, "label", 2);
+ae = rt([
   p("vox-loader")
-], re);
-var Kt = Object.defineProperty, Ut = Object.getOwnPropertyDescriptor, bo = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Ut(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && Kt(o, a, e), e;
+], ae);
+var Uo = Object.defineProperty, Ko = Object.getOwnPropertyDescriptor, gt = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Ko(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && Uo(t, a, e), e;
 };
-let Oe = class extends v {
+let ke = class extends h {
   constructor() {
     super(...arguments), this.label = "Pagination";
   }
@@ -4314,7 +4405,7 @@ let Oe = class extends v {
     `;
   }
 };
-Oe.styles = d`
+ke.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -4326,7 +4417,8 @@ Oe.styles = d`
       flex-wrap: wrap;
     }
 
-    ::slotted(a) {
+    ::slotted(a),
+    ::slotted(span) {
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -4348,24 +4440,24 @@ Oe.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;
     }
   `;
-bo([
+gt([
   n()
-], Oe.prototype, "label", 2);
-Oe = bo([
+], ke.prototype, "label", 2);
+ke = gt([
   p("vox-pagination")
-], Oe);
-var Gt = Object.defineProperty, Xt = Object.getOwnPropertyDescriptor, ao = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Xt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && Gt(o, a, e), e;
+], ke);
+var Go = Object.defineProperty, Xo = Object.getOwnPropertyDescriptor, at = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Xo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && Go(t, a, e), e;
 };
-let ae = class extends v {
+let se = class extends h {
   constructor() {
     super(...arguments), this.attribution = "", this.detail = "";
   }
@@ -4376,14 +4468,14 @@ let ae = class extends v {
         ${this.attribution ? c`
               <footer>
                 <span class="attribution">${this.attribution}</span>
-                ${this.detail ? c`<span class="detail"> — ${this.detail}</span>` : h}
+                ${this.detail ? c`<span class="detail"> — ${this.detail}</span>` : v}
               </footer>
-            ` : h}
+            ` : v}
       </blockquote>
     `;
   }
 };
-ae.styles = d`
+se.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -4425,27 +4517,27 @@ ae.styles = d`
       color: var(--vox-color-text-2);
     }
   `;
-ao([
+at([
   n()
-], ae.prototype, "attribution", 2);
-ao([
+], se.prototype, "attribution", 2);
+at([
   n()
-], ae.prototype, "detail", 2);
-ae = ao([
+], se.prototype, "detail", 2);
+se = at([
   p("vox-quote")
-], ae);
-var Qt = Object.defineProperty, Wt = Object.getOwnPropertyDescriptor, L = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Wt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && Qt(o, a, e), e;
+], se);
+var Qo = Object.defineProperty, Wo = Object.getOwnPropertyDescriptor, D = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Wo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && Qo(t, a, e), e;
 };
-let ke = class extends v {
+let Le = class extends h {
   constructor() {
     super(...arguments), this.heading = "", this.hasDescription = !1;
   }
-  handleDescriptionSlotChange(t) {
-    const o = t.target;
-    this.hasDescription = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  handleDescriptionSlotChange(o) {
+    const t = o.target;
+    this.hasDescription = t.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
     return c`
@@ -4462,7 +4554,7 @@ let ke = class extends v {
     `;
   }
 };
-ke.styles = d`
+Le.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -4494,24 +4586,24 @@ ke.styles = d`
       margin-top: var(--vox-space-6);
     }
   `;
-L([
+D([
   n()
-], ke.prototype, "heading", 2);
-ke = L([
+], Le.prototype, "heading", 2);
+Le = D([
   p("vox-sponsor-tier")
-], ke);
-let M = class extends v {
+], Le);
+let P = class extends h {
   constructor() {
     super(...arguments), this.name = "", this.hasBody = !1;
   }
-  handleBodySlotChange(t) {
-    const o = t.target;
-    this.hasBody = o.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
+  handleBodySlotChange(o) {
+    const t = o.target;
+    this.hasBody = t.assignedNodes({ flatten: !0 }).length > 0, this.requestUpdate();
   }
   render() {
-    const t = c`
+    const o = c`
       <div class="logo ${this.logo ? "has-logo" : ""}">
-        ${this.logo ? c`<img src=${this.logo} alt=${this.name} />` : h}
+        ${this.logo ? c`<img src=${this.logo} alt=${this.name} />` : v}
       </div>
       <span class="name">${this.name}</span>
       <div class="body ${this.hasBody ? "has-content" : ""}">
@@ -4521,12 +4613,12 @@ let M = class extends v {
     return this.href !== void 0 ? c`<a
           class="sponsor"
           href=${this.href}
-          target=${this.target ?? h}
-          >${t}</a
-        >` : c`<div class="sponsor">${t}</div>`;
+          target=${this.target ?? v}
+          >${o}</a
+        >` : c`<div class="sponsor">${o}</div>`;
   }
 };
-M.styles = d`
+P.styles = d`
     :host {
       display: block;
     }
@@ -4592,27 +4684,27 @@ M.styles = d`
       display: none;
     }
   `;
-L([
+D([
   n()
-], M.prototype, "name", 2);
-L([
+], P.prototype, "name", 2);
+D([
   n()
-], M.prototype, "href", 2);
-L([
+], P.prototype, "href", 2);
+D([
   n()
-], M.prototype, "logo", 2);
-L([
+], P.prototype, "logo", 2);
+D([
   n()
-], M.prototype, "target", 2);
-M = L([
+], P.prototype, "target", 2);
+P = D([
   p("vox-sponsor")
-], M);
-var Yt = Object.defineProperty, Jt = Object.getOwnPropertyDescriptor, so = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? Jt(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && Yt(o, a, e), e;
+], P);
+var Yo = Object.defineProperty, Jo = Object.getOwnPropertyDescriptor, st = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? Jo(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && Yo(t, a, e), e;
 };
-let se = class extends v {
+let ie = class extends h {
   constructor() {
     super(...arguments), this.value = "", this.label = "";
   }
@@ -4624,7 +4716,7 @@ let se = class extends v {
     `;
   }
 };
-se.styles = d`
+ie.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -4651,24 +4743,24 @@ se.styles = d`
       color: var(--vox-color-text-2);
     }
   `;
-so([
+st([
   n()
-], se.prototype, "value", 2);
-so([
+], ie.prototype, "value", 2);
+st([
   n()
-], se.prototype, "label", 2);
-se = so([
+], ie.prototype, "label", 2);
+ie = st([
   p("vox-stat")
-], se);
-var er = Object.defineProperty, or = Object.getOwnPropertyDescriptor, fe = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? or(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && er(o, a, e), e;
+], ie);
+var er = Object.defineProperty, tr = Object.getOwnPropertyDescriptor, ge = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? tr(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && er(t, a, e), e;
 };
-let Re = class extends v {
+let Fe = class extends h {
   numberSteps() {
-    this.querySelectorAll("vox-step").forEach((t, o) => {
-      t.number = o + 1;
+    this.querySelectorAll("vox-step").forEach((o, t) => {
+      o.number = t + 1;
     });
   }
   render() {
@@ -4679,7 +4771,7 @@ let Re = class extends v {
     `;
   }
 };
-Re.styles = d`
+Fe.styles = d`
     :host {
       display: block;
     }
@@ -4693,10 +4785,10 @@ Re.styles = d`
       flex: 1 1 0;
     }
   `;
-Re = fe([
+Fe = ge([
   p("vox-step-indicator")
-], Re);
-let A = class extends v {
+], Fe);
+let q = class extends h {
   constructor() {
     super(...arguments), this.label = "", this.state = "upcoming", this.number = 1;
   }
@@ -4712,12 +4804,15 @@ let A = class extends v {
                 <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>` : v}
+        </span>
       </div>
     `;
   }
 };
-A.styles = d`
+q.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -4790,38 +4885,47 @@ A.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;
+    }
   `;
-fe([
+ge([
   n()
-], A.prototype, "label", 2);
-fe([
+], q.prototype, "label", 2);
+ge([
   n({ reflect: !0 })
-], A.prototype, "state", 2);
-fe([
+], q.prototype, "state", 2);
+ge([
   n({ type: Number })
-], A.prototype, "number", 2);
-A = fe([
+], q.prototype, "number", 2);
+q = ge([
   p("vox-step")
-], A);
-var tr = Object.defineProperty, rr = Object.getOwnPropertyDescriptor, Se = (t, o, a, r) => {
-  for (var e = r > 1 ? void 0 : r ? rr(o, a) : o, s = t.length - 1, i; s >= 0; s--)
-    (i = t[s]) && (e = (r ? i(o, a, e) : i(e)) || e);
-  return r && e && tr(o, a, e), e;
+], q);
+var or = Object.defineProperty, rr = Object.getOwnPropertyDescriptor, Se = (o, t, a, r) => {
+  for (var e = r > 1 ? void 0 : r ? rr(t, a) : t, s = o.length - 1, i; s >= 0; s--)
+    (i = o[s]) && (e = (r ? i(t, a, e) : i(e)) || e);
+  return r && e && or(t, a, e), e;
 };
-let Fe = class extends v {
+let Re = class extends h {
   render() {
     return c`<slot></slot>`;
   }
 };
-Fe.styles = d`
+Re.styles = d`
     :host {
       display: block;
     }
   `;
-Fe = Se([
+Re = Se([
   p("vox-timeline")
-], Fe);
-let ie = class extends v {
+], Re);
+let ne = class extends h {
   constructor() {
     super(...arguments), this.heading = "", this.date = "";
   }
@@ -4829,14 +4933,14 @@ let ie = class extends v {
     return c`
       <div class="item">
         <span class="dot" aria-hidden="true"></span>
-        ${this.date ? c`<div class="date">${this.date}</div>` : h}
+        ${this.date ? c`<div class="date">${this.date}</div>` : v}
         <h3 class="heading">${this.heading}</h3>
         <div class="body"><slot></slot></div>
       </div>
     `;
   }
 };
-ie.styles = d`
+ne.styles = d`
     :host {
       display: block;
       font-family: var(--vox-font-family-base);
@@ -4888,67 +4992,67 @@ ie.styles = d`
   `;
 Se([
   n()
-], ie.prototype, "heading", 2);
+], ne.prototype, "heading", 2);
 Se([
   n()
-], ie.prototype, "date", 2);
-ie = Se([
+], ne.prototype, "date", 2);
+ne = Se([
   p("vox-timeline-item")
-], ie);
+], ne);
 export {
-  we as VoxAccordion,
-  Y as VoxAccordionItem,
-  C as VoxAlert,
-  w as VoxAvatar,
-  $e as VoxBadge,
-  F as VoxBillboard,
-  qe as VoxBreadcrumbs,
-  f as VoxButton,
-  J as VoxCalendarTile,
-  ee as VoxCallout,
-  E as VoxCard,
-  I as VoxCheckbox,
-  N as VoxCta,
-  _e as VoxCtaBand,
-  _ as VoxDialog,
-  Q as VoxDisclosure,
-  W as VoxDropdown,
-  Ce as VoxEmptyState,
-  g as VoxFileInput,
-  Ie as VoxFooter,
+  $e as VoxAccordion,
+  k as VoxAccordionItem,
+  L as VoxAlert,
+  $ as VoxAvatar,
+  _e as VoxBadge,
+  G as VoxBillboard,
+  Be as VoxBreadcrumbs,
+  g as VoxButton,
+  ee as VoxCalendarTile,
+  te as VoxCallout,
+  I as VoxCard,
+  Z as VoxCheckbox,
+  R as VoxCta,
+  Ce as VoxCtaBand,
+  O as VoxDialog,
+  M as VoxDisclosure,
+  J as VoxDropdown,
+  Oe as VoxEmptyState,
+  b as VoxFileInput,
+  Ne as VoxFooter,
   Me as VoxFooterColumn,
-  S as VoxGrid,
-  z as VoxHeader,
+  B as VoxGrid,
+  S as VoxHeader,
   oe as VoxHero,
-  j as VoxIcon,
-  b as VoxInput,
-  Be as VoxInputGroup,
+  E as VoxIcon,
+  m as VoxInput,
+  Ie as VoxInputGroup,
   Te as VoxLinkHub,
-  te as VoxLinkHubItem,
-  re as VoxLoader,
-  Oe as VoxPagination,
-  ae as VoxQuote,
-  D as VoxRadio,
-  be as VoxRadioGroup,
-  T as VoxSelect,
-  $ as VoxSeriesNav,
-  H as VoxSidenav,
-  Z as VoxSidenavGroup,
-  K as VoxSidenavItem,
-  M as VoxSponsor,
-  ke as VoxSponsorTier,
-  se as VoxStat,
-  A as VoxStep,
-  Re as VoxStepIndicator,
-  me as VoxSubnav,
-  R as VoxSwitch,
-  U as VoxTab,
-  G as VoxTabPanel,
-  Ne as VoxTabs,
-  y as VoxTextarea,
-  V as VoxThemeToggle,
-  Fe as VoxTimeline,
-  ie as VoxTimelineItem,
-  ye as VoxToc,
-  X as VoxTocItem
+  re as VoxLinkHubItem,
+  ae as VoxLoader,
+  ke as VoxPagination,
+  se as VoxQuote,
+  H as VoxRadio,
+  me as VoxRadioGroup,
+  U as VoxSelect,
+  _ as VoxSeriesNav,
+  A as VoxSidenav,
+  C as VoxSidenavGroup,
+  X as VoxSidenavItem,
+  P as VoxSponsor,
+  Le as VoxSponsorTier,
+  ie as VoxStat,
+  q as VoxStep,
+  Fe as VoxStepIndicator,
+  ye as VoxSubnav,
+  K as VoxSwitch,
+  Q as VoxTab,
+  W as VoxTabPanel,
+  qe as VoxTabs,
+  w as VoxTextarea,
+  z as VoxThemeToggle,
+  Re as VoxTimeline,
+  ne as VoxTimelineItem,
+  we as VoxToc,
+  Y as VoxTocItem
 };